refactor!: Allow alt-position to update style in any way (fixes #1018)

Author: Jasenkoo

index.d.ts

@@ -206,7 +206,7 @@ export interface VueDatePickerProps {
     noHoursOverlay?: boolean;
     noMinutesOverlay?: boolean;
     noSecondsOverlay?: boolean;
-    altPosition?: (el: HTMLElement | undefined) => { top: number | string; left: number | string; transform?: string };
+    altPosition?: (el: HTMLElement | undefined) => Record<string, string | number>;
     disabledWeekDays?: number[] | string[];
     allowedDates?: string[] | Date[];
     nowButtonLabel?: string;

src/VueDatePicker/composables/position.ts

@@ -90,7 +90,7 @@ export const usePosition = ({
 
     const getInputPositions = (inputEl: HTMLElement) => {
         const { width, height } = inputEl.getBoundingClientRect();
-        const { top, left } = props.altPosition ? props.altPosition(inputEl) : getOffset(inputEl);
+        const { top, left } = getOffset(inputEl);
         return { top: +top, left: +left, width, height };
     };
 
@@ -104,8 +104,7 @@ export const usePosition = ({
 
     const customAltPosition = () => {
         const el = unrefElement(inputRef as MaybeElementRef);
-        const { top, left, transform } = props.altPosition(el);
-        menuStyle.value = { top: `${top}px`, left: `${left}px`, transform: transform ?? '' };
+        menuStyle.value = props.altPosition(el);
     };
 
     /**

src/VueDatePicker/interfaces.ts

@@ -120,12 +120,6 @@ export type TimeType = keyof Time;
 
 export type DisabledDatesProp = Date[] | string[] | IDisableDates;
 
-export type CustomAltPosition = (el: HTMLElement | null) => {
-    top: number | string;
-    left: number | string;
-    transform?: string;
-};
-
 export type PresetDate = {
     label: string;
     value: Date[] | string[] | Date | string;

src/VueDatePicker/props.ts

@@ -13,7 +13,6 @@ import type {
     OpenPosition,
     WeekStartNum,
     WeekStartStr,
-    CustomAltPosition,
     SixWeekMode,
     ActionRowData,
     ICalendarDate,
@@ -44,7 +43,7 @@ export const AllProps = {
         default: () => null,
     },
     autoPosition: { type: Boolean as PropType<boolean>, default: true },
-    altPosition: { type: Function as PropType<CustomAltPosition>, default: null },
+    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 },
     utc: { type: [Boolean, String] as PropType<boolean | 'preserve'>, default: false },