refactor: Code cleanup

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -105,6 +105,7 @@
         DatepickerInputRef,
         ModelValue,
         MenuView,
+        MaybeElementRef,
     } from '@/interfaces';
     import { useDefaults } from '@/composables/defaults';
 
@@ -518,7 +519,7 @@
         dpMenuRef.value?.handleFlow(skipStep);
     };
 
-    onClickOutside(dpWrapMenuRef, inputRef, () => clickOutside(validateBeforeEmit));
+    onClickOutside(dpWrapMenuRef, inputRef as unknown as MaybeElementRef, () => clickOutside(validateBeforeEmit));
 
     defineExpose({
         closeMenu,

src/VueDatePicker/composables/defaults.ts

@@ -82,16 +82,16 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
     const defaultedMultiDates = computed(() => getDefaultMultiDates(props.multiDates, props.multiDatesLimit));
 
     const propDates = computed(() =>
-        mapPropDates(
-            props.minDate,
-            props.maxDate,
-            props.disabledDates,
-            props.allowedDates,
-            defaultedHighlight.value,
-            props.markers,
-            defaultedTz.value,
-            props.monthPicker || props.yearPicker || props.quarterPicker,
-        ),
+        mapPropDates({
+            minDate: props.minDate,
+            maxDate: props.maxDate,
+            disabledDates: props.disabledDates,
+            allowedDates: props.allowedDates,
+            highlight: defaultedHighlight.value,
+            markers: props.markers,
+            timezone: defaultedTz.value,
+            isSpecific: props.monthPicker || props.yearPicker || props.quarterPicker,
+        }),
     );
 
     const defaultedRange = computed(() =>

src/VueDatePicker/composables/position.ts

@@ -1,11 +1,17 @@
 import { h, ref, render, toRef, watch } from 'vue';
-import { type DatepickerInputRef, type DatepickerMenuRef, OpenPosition } from '@/interfaces';
+import {
+    type DatepickerInputRef,
+    type DatepickerMenuRef,
+    type InlineOptions,
+    type VueEmit,
+    OpenPosition,
+    type MaybeElementRef,
+} from '@/interfaces';
 
 import { unrefElement } from '@/utils/util';
 import { MenuPlacement } from '@/constants';
 
 import type { Component, ComputedRef, Ref, Slots } from 'vue';
-import type { InlineOptions, VueEmit } from '@/interfaces';
 import type { AllPropsType } from '@/props';
 
 /**
@@ -95,7 +101,7 @@ export const usePosition = ({
     };
 
     const customAltPosition = () => {
-        const el = unrefElement(inputRef);
+        const el = unrefElement(inputRef as MaybeElementRef);
         const { top, left, transform } = props.altPosition(el);
         menuStyle.value = { top: `${top}px`, left: `${left}px`, transform: transform ?? '' };
     };
@@ -172,7 +178,7 @@ export const usePosition = ({
     };
 
     const getMenuPlacement = (): MenuPlacement => {
-        const inputEl = unrefElement(inputRef);
+        const inputEl = unrefElement(inputRef as MaybeElementRef);
         if (inputEl) {
             const { height: menuHeight } = menuRect.value;
             const { top: inputTop, height: inputHeight } = inputEl.getBoundingClientRect();
@@ -201,7 +207,7 @@ export const usePosition = ({
 
     // Parent function that will perform check on which calculation function to invoke
     const calculateMenuPosition = () => {
-        const inputEl = unrefElement(inputRef);
+        const inputEl = unrefElement(inputRef as MaybeElementRef);
         if (inputEl) {
             if (props.autoPosition) {
                 return setAutoPosition(inputEl);
@@ -245,7 +251,7 @@ export const usePosition = ({
     // Renders invisible menu on open to determine the menu dimensions
     const shadowRender = (DPMenu: Component, props: AllPropsType) => {
         const container = document.createElement('div');
-        const input = unrefElement(inputRef)?.getBoundingClientRect();
+        const input = unrefElement(inputRef as MaybeElementRef)?.getBoundingClientRect();
         container.setAttribute('id', 'dp--temp-container');
         const wrap = pickerWrapperRef.value?.clientWidth ? pickerWrapperRef.value : document.body;
         wrap.append(container);

src/VueDatePicker/interfaces.ts

@@ -87,9 +87,7 @@ export interface ConfigurableWindow {
     window?: Window;
 }
 
-export type MaybeElementRef = MaybeRef<
-    HTMLElement | SVGElement | ComponentPublicInstance | undefined | null | Element | any
->;
+export type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | ComponentPublicInstance | undefined | null | Element>;
 export type OnClickOutsideEvents = Pick<
     WindowEventMap,
     'click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend' | 'pointerdown' | 'pointerup'
@@ -371,3 +369,14 @@ export interface TimeInput {
     type: TimeType;
     separator?: boolean;
 }
+
+export interface MapPropDatesOpts {
+    minDate: MaybeDate;
+    maxDate: MaybeDate;
+    disabledDates: DisabledDatesProp;
+    allowedDates: string[] | Date[];
+    highlight: HighlightFn | Highlight;
+    markers: IMarker[];
+    timezone: TimeZoneConfig | undefined;
+    isSpecific?: boolean;
+}

src/VueDatePicker/utils/date-utils.ts

@@ -123,12 +123,7 @@ export const dateToUtc = (date: Date, preserve: boolean, enableSeconds: boolean)
 export const resetDateTime = (value: Date | string, beginning?: boolean): Date => {
     const dateParse = getDate(JSON.parse(JSON.stringify(value)));
     const timeReset = set(dateParse, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
-    if (beginning) {
-        return startOfMonth(timeReset);
-    }
-    return timeReset;
-
-    // return set(dateParse, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
+    return beginning ? startOfMonth(timeReset) : timeReset;
 };
 
 export const setDateTime = (

src/VueDatePicker/utils/defaults.ts

@@ -28,6 +28,7 @@ import type {
     PropDates,
     MultiDatesProp,
     MultiDatesDefault,
+    MapPropDatesOpts,
 } from '@/interfaces';
 import { getDate } from '@/utils/date-utils';
 import { dateToTimezoneSafe, sanitizeDateToLocal } from '@/utils/timezone';
@@ -276,26 +277,21 @@ const mapMarkers = (markers: IMarker[], timezone: TimeZoneConfig | undefined) =>
  * Sync all props that rely on the date value to be in the same timezone
  * All validation that is done from these props will now be in sync with provided timezone config
  */
-export const mapPropDates = (
-    minDate: MaybeDate,
-    maxDate: MaybeDate,
-    disabledDates: DisabledDatesProp,
-    allowedDates: string[] | Date[],
-    highlight: HighlightFn | Highlight,
-    markers: IMarker[],
-    timezone: TimeZoneConfig | undefined,
-    isSpecific: boolean,
-): PropDates => {
+export const mapPropDates = (opts: MapPropDatesOpts): PropDates => {
     return {
-        minDate: sanitizeDateToLocal(minDate, timezone, isSpecific),
-        maxDate: sanitizeDateToLocal(maxDate, timezone, isSpecific),
-        disabledDates: shouldMap(disabledDates) ? datesArrToMap(disabledDates, timezone, isSpecific) : disabledDates,
-        allowedDates: shouldMap(allowedDates) ? datesArrToMap(allowedDates, timezone, isSpecific) : null,
+        minDate: sanitizeDateToLocal(opts.minDate, opts.timezone, opts.isSpecific),
+        maxDate: sanitizeDateToLocal(opts.maxDate, opts.timezone, opts.isSpecific),
+        disabledDates: shouldMap(opts.disabledDates)
+            ? datesArrToMap(opts.disabledDates, opts.timezone, opts.isSpecific)
+            : opts.disabledDates,
+        allowedDates: shouldMap(opts.allowedDates)
+            ? datesArrToMap(opts.allowedDates, opts.timezone, opts.isSpecific)
+            : null,
         highlight:
-            typeof highlight === 'object' && shouldMap(highlight?.dates)
-                ? datesArrToMap(highlight.dates, timezone)
-                : (highlight as HighlightFn),
-        markers: mapMarkers(markers, timezone),
+            typeof opts.highlight === 'object' && shouldMap(opts.highlight?.dates)
+                ? datesArrToMap(opts.highlight.dates, opts.timezone)
+                : (opts.highlight as HighlightFn),
+        markers: mapMarkers(opts.markers, opts.timezone),
     };
 };
 

tests/unit/utils.spec.ts

@@ -57,6 +57,7 @@ import type { AllPropsType } from '@/props';
 import { defaultMultiCalendars, defaultTransitions, mapPropDates } from '@/utils/defaults';
 import { de } from 'date-fns/locale';
 import { localToTz } from '@/utils/timezone';
+import type { TimeZoneConfig } from '@/interfaces';
 
 const getCurrentTime = () => {
     return {
@@ -72,6 +73,19 @@ const getMinMax = () => {
     return { minDate, maxDate };
 };
 
+const getMapDatesOpts = (date: Date, timezone: TimeZoneConfig) => {
+    const highlightFn = (date: any) => !!date;
+    return {
+        minDate: date,
+        maxDate: date,
+        disabledDates: [date],
+        allowedDates: [date],
+        markers: [],
+        highlight: highlightFn,
+        timezone,
+    };
+};
+
 describe('Utils and date utils formatting', () => {
     it('Should group array by 3', () => {
         const items = getArrayInArray(Array.from(Array(10).keys()));
@@ -434,10 +448,7 @@ describe('Utils and date utils formatting', () => {
     it('Should map propDates value with and without timezone', async () => {
         const today = resetDateTime(new Date());
         const highlightFn = (date: any) => !!date;
-        const mappedDates = mapPropDates(today, today, [today], [today], highlightFn, [], {
-            timezone: undefined,
-            exactMatch: false,
-        });
+        const mappedDates = mapPropDates(getMapDatesOpts(today, { timezone: undefined, exactMatch: false }));
 
         expect(mappedDates.maxDate).toEqual(today);
         expect(mappedDates.minDate).toEqual(today);
@@ -446,10 +457,7 @@ describe('Utils and date utils formatting', () => {
         expect(mappedDates.highlight).toEqual(highlightFn);
 
         const todayInTz = localToTz(today, 'UTC');
-        const mappedDatesInTimezone = mapPropDates(today, today, [today], [today], highlightFn, [], {
-            timezone: 'UTC',
-            exactMatch: false,
-        });
+        const mappedDatesInTimezone = mapPropDates(getMapDatesOpts(today, { timezone: 'UTC', exactMatch: false }));
 
         expect(mappedDatesInTimezone.maxDate).toEqual(todayInTz);
         expect(mappedDatesInTimezone.minDate).toEqual(todayInTz);