refactor: Update arrow positioning logic (#802)

Vuepic · Apr 6, 2024 · aae1c57 · aae1c57
1 parent e3914d8
commit aae1c57
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/src/VueDatePicker/VueDatePicker.vue b/src/VueDatePicker/VueDatePicker.vue
@@ -37,7 +37,7 @@
                         :open-on-top="openOnTop"
                         :no-overlay-focus="noOverlayFocus"
                         :collapse="collapse"
-                        :input-width="inputWidth"
+                        :get-input-rect="getInputRect"
                         @close-picker="closeMenu"
                         @select-date="selectDate"
                         @auto-apply="autoApplyValue"
@@ -259,9 +259,9 @@
         );
     });
 
-    const inputWidth = computed(() => {
-        return inputRef.value?.$el?.getBoundingClientRect()?.width ?? 0;
-    });
+    const getInputRect = () => {
+        return inputRef.value?.$el?.getBoundingClientRect();
+    };
 
     /**
      * Event listener for 'scroll'

diff --git a/src/VueDatePicker/components/DatepickerMenu.vue b/src/VueDatePicker/components/DatepickerMenu.vue
@@ -173,10 +173,10 @@
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
         collapse: { type: Boolean as PropType<boolean>, default: false },
-        inputWidth: { type: Number as PropType<number>, default: 0 },
+        getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
     });
 
-    const dpMenuRef = ref(null);
+    const dpMenuRef = ref<HTMLElement | null>(null);
 
     const baseProps = computed(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -247,8 +247,11 @@
     });
 
     const arrowPos = computed(() => {
-        if (props.inputWidth < calendarWidth.value) {
-            return `${props.inputWidth / 2}px`;
+        if (defaultedConfig.value.arrowLeft) return defaultedConfig.value.arrowLeft;
+        const menuRect = dpMenuRef.value?.getBoundingClientRect();
+        const inputRect = props.getInputRect();
+        if (inputRect.width < calendarWidth.value && inputRect.left <= (menuRect?.left ?? 0)) {
+            return `${inputRect.width / 2}px`;
         }
         return '50%';
     });

diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts
@@ -281,6 +281,7 @@ export interface Config {
     keepActionRow: boolean;
     onClickOutside?: (validate: () => boolean) => void;
     tabOutClosesMenu: boolean;
+    arrowLeft?: string;
 }
 
 export interface Highlight {

diff --git a/src/VueDatePicker/props.ts b/src/VueDatePicker/props.ts
@@ -174,7 +174,7 @@ export const PickerBaseProps = {
     noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
     collapse: { type: Boolean as PropType<boolean>, default: false },
     menuWrapRef: { type: Object as PropType<HTMLElement | null>, default: null },
-    inputWidth: { type: Number as PropType<number>, default: 0 },
+    getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
 };
 
 export type AllPropsType = ExtractPropTypes<typeof AllProps>;

diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts
@@ -167,6 +167,7 @@ export const getDefaultConfig = (config?: Partial<Config>): Config => {
         keepActionRow: false,
         onClickOutside: undefined,
         tabOutClosesMenu: true,
+        arrowLeft: undefined,
     };
     return { ...defaultConfig, ...(config ?? {}) };
 };