feat: Add option to force top or bottom position (resolves #1026)

Author: Jasenkoo

index.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-types */
 import type {
     ComponentOptionsMixin,
     ComponentPropsOptions,
@@ -185,7 +184,7 @@ export interface VueDatePickerProps {
     selectText?: string;
     cancelText?: string;
     weekNumName?: string;
-    autoPosition?: boolean;
+    autoPosition?: boolean | 'top' | 'bottom';
     monthPicker?: boolean;
     timePicker?: boolean;
     textInput?:

src/VueDatePicker/composables/position.ts

@@ -1,17 +1,16 @@
+import type { Component, ComputedRef, Ref, Slots } from 'vue';
 import { h, ref, render, toRef, watch } from 'vue';
 import {
     type DatepickerInputRef,
     type DatepickerMenuRef,
     type InlineOptions,
-    type VueEmit,
-    OpenPosition,
     type MaybeElementRef,
+    OpenPosition,
+    type VueEmit,
 } from '@/interfaces';
 
 import { unrefElement } from '@/utils/util';
 import { MenuPlacement } from '@/constants';
-
-import type { Component, ComputedRef, Ref, Slots } from 'vue';
 import type { AllPropsType } from '@/props';
 import { useDefaults } from '@/composables/defaults';
 
@@ -181,6 +180,8 @@ export const usePosition = ({
     const getMenuPlacement = (): MenuPlacement => {
         const inputEl = unrefElement(inputRef as MaybeElementRef);
         if (inputEl) {
+            if (props.autoPosition === 'top') return MenuPlacement.top;
+            if (props.autoPosition === 'bottom') return MenuPlacement.bottom;
             const { height: menuHeight } = menuRect.value;
             const { top: inputTop, height: inputHeight } = inputEl.getBoundingClientRect();
 

src/VueDatePicker/props.ts

@@ -42,7 +42,7 @@ export const AllProps = {
         type: [String, Function] as PropType<IFormat>,
         default: () => null,
     },
-    autoPosition: { type: Boolean as PropType<boolean>, default: true },
+    autoPosition: { type: [Boolean, String] as PropType<boolean | 'top' | 'bottom'>, default: true },
     altPosition: { type: Function as PropType<(el: HTMLElement | null) => any>, default: null },
     transitions: { type: [Boolean, Object] as PropType<boolean | Partial<Transition>>, default: true },
     formatLocale: { type: Object as PropType<Locale>, default: null },