refactor: Code cleanup

- Redundant interfaces removed
- Shared props extracted
- Props passing from main to menu improved

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -43,80 +43,12 @@
                 :class="theme"
                 :style="menuPosition"
                 v-bind="{
-                    weekNumbers,
-                    weekStart,
-                    disableMonthYearSelect,
-                    menuClassName,
-                    calendarClassName,
-                    yearRange,
-                    range,
+                    ...passCommonProps($props),
                     multiCalendars: multiCalendarDefault,
-                    multiCalendarsSolo,
-                    calendarCellClassName,
-                    enableTimePicker,
-                    is24,
-                    hoursIncrement,
-                    minutesIncrement,
-                    hoursGridIncrement,
-                    minutesGridIncrement,
-                    minDate,
-                    maxDate,
-                    autoApply,
-                    selectText,
-                    cancelText,
                     previewFormat: previewFormatDefault,
-                    locale,
-                    weekNumName,
-                    disabledDates,
                     filters: defaultFilters,
-                    minTime,
-                    maxTime,
-                    inline,
                     openOnTop,
-                    monthPicker,
-                    timePicker,
-                    monthNameFormat,
-                    startDate,
                     startTime: defaultStartTime,
-                    monthYearComponent,
-                    timePickerComponent,
-                    actionRowComponent,
-                    customProps,
-                    hideOffsetDates,
-                    autoRange,
-                    noToday,
-                    noHoursOverlay,
-                    noMinutesOverlay,
-                    disabledWeekDays,
-                    allowedDates,
-                    showNowButton,
-                    nowButtonLabel,
-                    monthChangeOnScroll,
-                    markers,
-                    uid,
-                    modeHeight,
-                    enableSeconds,
-                    secondsIncrement,
-                    secondsGridIncrement,
-                    noSecondsOverlay,
-                    escClose,
-                    spaceConfirm,
-                    monthChangeOnArrows,
-                    textInput,
-                    disabled,
-                    readonly,
-                    multiDates,
-                    presetRanges,
-                    flow,
-                    preventMinMaxNavigation,
-                    minRange,
-                    maxRange,
-                    fixedStart,
-                    fixedEnd,
-                    multiDatesLimit,
-                    reverseYears,
-                    keepActionRow,
-                    weekPicker,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
@@ -136,18 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-    import {
-        computed,
-        DefineComponent,
-        onMounted,
-        onUnmounted,
-        PropType,
-        provide,
-        ref,
-        toRef,
-        useSlots,
-        watch,
-    } from 'vue';
+    import { computed, onMounted, onUnmounted, PropType, provide, ref, toRef, useSlots, watch } from 'vue';
     import { getHours, getMinutes, getSeconds, Locale } from 'date-fns';
 
     import DatepickerInput from './components/DatepickerInput.vue';
@@ -161,14 +82,8 @@
         ITextInputOptions,
         ModelValue,
         ITimeValue,
-        WeekStartNum,
-        WeekStartStr,
-        IMarker,
         ITransition,
-        IDisableDates,
         AltPosition,
-        PresetRange,
-        Flow,
     } from './interfaces';
     import { getDefaultPattern, isValidTime } from './utils/date-utils';
     import { getDefaultTextInputOptions, getDefaultFilters, mergeDefaultTransitions } from './utils/util';
@@ -177,6 +92,7 @@
     import { isString } from './utils/type-guard';
     import { mapSlots } from './components/composition/slots';
     import { onClickOutside } from './directives/clickOutside';
+    import { CommonProps, passCommonProps } from './utils/props';
 
     const emit = defineEmits([
         'update:modelValue',
@@ -192,35 +108,14 @@
         'updateMonthYear',
     ]);
     const props = defineProps({
-        uid: { type: String as PropType<string>, default: null },
+        ...CommonProps,
         name: { type: String as PropType<string>, default: null },
-        is24: { type: Boolean as PropType<boolean>, default: true },
-        enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
-        locale: { type: String as PropType<string>, default: 'en-US' },
-        range: { type: Boolean as PropType<boolean>, default: false },
         multiCalendars: { type: [Boolean, Number, String] as PropType<boolean | number | string>, default: null },
-        multiCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
         modelValue: { type: [String, Date, Array, Object] as PropType<ModelValue>, default: null },
         position: { type: String as PropType<OpenPosition>, default: 'center' },
         placeholder: { type: String as PropType<string>, default: null },
-        weekNumbers: { type: Boolean as PropType<boolean>, default: false },
         dark: { type: Boolean as PropType<boolean>, default: false },
-        hoursIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
-        minutesIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
-        secondsIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
-        hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
-        minutesGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
-        secondsGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
-        minDate: { type: [Date, String] as PropType<Date | string>, default: null },
-        maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
-        minTime: { type: Object as PropType<ITimeValue>, default: null },
-        maxTime: { type: Object as PropType<ITimeValue>, default: null },
-        weekStart: { type: [String, Number] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
-        disabled: { type: Boolean as PropType<boolean>, default: false },
-        readonly: { type: Boolean as PropType<boolean>, default: false },
         required: { type: Boolean as PropType<boolean>, default: false },
-        monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
-        weekNumName: { type: String as PropType<string>, default: 'W' },
         format: {
             type: [String, Function] as PropType<IFormat>,
             default: () => null,
@@ -230,71 +125,23 @@
             default: () => null,
         },
         inputClassName: { type: String as PropType<string>, default: null },
-        menuClassName: { type: String as PropType<string>, default: null },
-        calendarClassName: { type: String as PropType<string>, default: null },
-        calendarCellClassName: { type: String as PropType<string>, default: null },
         hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
         state: { type: Boolean as PropType<boolean>, default: null },
         clearable: { type: Boolean as PropType<boolean>, default: true },
         closeOnScroll: { type: Boolean as PropType<boolean>, default: false },
-        autoApply: { type: Boolean as PropType<boolean>, default: false },
         filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
-        disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
-        yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
-        disabledDates: { type: [Array, Function] as PropType<Date[] | string[] | IDisableDates>, default: () => [] },
-        disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
-        inline: { type: Boolean as PropType<boolean>, default: false },
         inlineWithInput: { type: Boolean as PropType<boolean>, default: false },
-        selectText: { type: String as PropType<string>, default: 'Select' },
-        cancelText: { type: String as PropType<string>, default: 'Cancel' },
         autoPosition: { type: Boolean as PropType<boolean>, default: true },
-        monthPicker: { type: Boolean as PropType<boolean>, default: false },
-        timePicker: { type: Boolean as PropType<boolean>, default: false },
         closeOnAutoApply: { type: Boolean as PropType<boolean>, default: true },
-        textInput: { type: Boolean as PropType<boolean>, default: false },
         textInputOptions: { type: Object as PropType<ITextInputOptions>, default: () => ({}) },
         teleport: { type: String as PropType<string>, default: 'body' },
-        startDate: { type: [Date, String] as PropType<string | Date>, default: null },
-        startTime: { type: [Object, Array] as PropType<ITimeValue | ITimeValue[]>, default: null },
-        monthYearComponent: { type: Object as PropType<DefineComponent>, default: null },
-        timePickerComponent: { type: Object as PropType<DefineComponent>, default: null },
-        actionRowComponent: { type: Object as PropType<DefineComponent>, default: null },
-        customProps: { type: Object as PropType<Record<string, unknown>>, default: null },
-        hideOffsetDates: { type: Boolean as PropType<boolean>, default: false },
-        autoRange: { type: [Number, String] as PropType<number | string>, default: null },
-        noToday: { type: Boolean as PropType<boolean>, default: false },
-        noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
-        noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false },
-        noSecondsOverlay: { type: Boolean as PropType<boolean>, default: false },
         altPosition: { type: [Boolean, Function] as PropType<AltPosition>, default: false },
-        allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] },
-        showNowButton: { type: Boolean as PropType<boolean>, default: false },
-        nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
         partialRange: { type: Boolean as PropType<boolean>, default: true },
-        monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
-        markers: { type: Array as PropType<IMarker[]>, default: () => [] },
         transitions: { type: Boolean as PropType<boolean | ITransition>, default: true },
-        modeHeight: { type: [Number, String] as PropType<number | string>, default: 255 },
-        enableSeconds: { type: Boolean as PropType<boolean>, default: false },
         openMenuOnFocus: { type: Boolean as PropType<boolean>, default: true },
-        escClose: { type: Boolean as PropType<boolean>, default: true },
-        spaceConfirm: { type: Boolean as PropType<boolean>, default: true },
-        monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true },
         formatLocale: { type: Object as PropType<Locale>, default: null },
         autocomplete: { type: String as PropType<string>, default: null },
-        multiDates: { type: Boolean as PropType<boolean>, default: false },
-        presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] },
-        flow: { type: Array as PropType<Flow>, default: () => [] },
-        preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
-        minRange: { type: [Number, String] as PropType<number | string>, default: null },
-        maxRange: { type: [Number, String] as PropType<number | string>, default: null },
-        fixedStart: { type: Boolean as PropType<boolean>, default: false },
-        fixedEnd: { type: Boolean as PropType<boolean>, default: false },
         utc: { type: Boolean as PropType<boolean>, default: false },
-        multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
-        reverseYears: { type: Boolean as PropType<boolean>, default: false },
-        keepActionRow: { type: Boolean as PropType<boolean>, default: false },
-        weekPicker: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);

src/Vue3DatePicker/components/Calendar.vue

@@ -109,48 +109,29 @@
         watch,
     } from 'vue';
 
-    import {
-        DynamicClass,
-        IDateFilter,
-        ICalendarDate,
-        ICalendarDay,
-        IDefaultSelect,
-        IMarker,
-        ITransition,
-        InternalModuleValue,
-    } from '../interfaces';
+    import { DynamicClass, ICalendarDate, ICalendarDay, IMarker, ITransition } from '../interfaces';
     import { getDayNames, getDefaultMarker, unrefElement } from '../utils/util';
     import { isDateAfter, isDateEqual, setDateMonthOrYear } from '../utils/date-utils';
+    import { MonthCalendarSharedProps } from '../utils/props';
 
     const emit = defineEmits(['selectDate', 'setHoverDate', 'handleScroll', 'mount']);
 
     const props = defineProps({
+        ...MonthCalendarSharedProps,
         locale: { type: String as PropType<string>, default: 'en-Us' },
         weekNumName: { type: String as PropType<string>, default: 'W' },
         weekStart: { type: [Number, String] as PropType<number | string>, default: 1 },
         weekNumbers: { type: Boolean as PropType<boolean>, default: false },
         mappedDates: { type: Array as PropType<ICalendarDate[]>, default: () => [] },
         monthYearComponent: { type: Object as PropType<DefineComponent>, default: null },
-        range: { type: Boolean as PropType<boolean>, default: false },
-        filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
-        customProps: { type: Object as PropType<Record<string, unknown>>, default: null },
         calendarClassName: { type: String as PropType<string>, default: null },
-        monthPicker: { type: Boolean as PropType<boolean>, default: false },
         timePicker: { type: Boolean as PropType<boolean>, default: false },
         disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
         getWeekNum: {
             type: Function as PropType<(dates: UnwrapRef<ICalendarDay[]>) => string | number>,
             default: () => '',
         },
-        instance: { type: Number as PropType<number>, default: 1 },
-        multiCalendars: { type: Number as PropType<number>, default: 0 },
-        multiCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
-        years: { type: Array as PropType<IDefaultSelect[]>, default: () => [] },
-        months: { type: Array as PropType<IDefaultSelect[]>, default: () => [] },
-        month: { type: Number as PropType<number>, default: 0 },
-        year: { type: Number as PropType<number>, default: 0 },
         modeHeight: { type: [Number, String] as PropType<number | string>, default: 255 },
-        internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
     });
 
     const showMakerTooltip = ref<Date | null>(null);