allow presetDate.value to be functions

Author: ayrtonandino

package.json

@@ -84,7 +84,7 @@
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "vue": ">=3.2.0"
+    "vue": ">=3.3.0"
   },
   "engines": {
     "node": ">=18.12.0"

src/VueDatePicker/components/DatepickerMenu.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
+    import { computed, onMounted, onUnmounted, ref, toValue, useSlots } from 'vue';
 
     import ActionRow from '@/components/ActionRow.vue';
 
@@ -135,7 +135,7 @@
     import QuarterPicker from '@/components/QuarterPicker/QuarterPicker.vue';
 
     import type { DynamicClass, MenuView, InternalModuleValue, MenuExposedFn, MonthModel } from '@/interfaces';
-    import type { PropType } from 'vue';
+    import type { MaybeRefOrGetter, PropType } from 'vue';
     import { ArrowDirection, EventKey } from '@/constants';
     import { useResponsive } from '@/composables/responsive';
 
@@ -368,8 +368,8 @@
         callChildFn('selectCurrentDate');
     };
 
-    const presetDate = (value: Date[] | string[] | string | Date, noTz?: boolean) => {
-        callChildFn('presetDate', value, noTz);
+    const presetDate = (value: MaybeRefOrGetter<Date[] | string[] | string | Date>, noTz?: boolean) => {
+        callChildFn('presetDate', toValue(value), noTz);
     };
 
     const clearHoverDate = () => {

src/VueDatePicker/interfaces.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, Ref } from 'vue';
+import type { ComponentPublicInstance, Ref, MaybeRefOrGetter } from 'vue';
 import type { HeaderPicker } from '@/constants';
 import DatepickerMenu from '@/components/DatepickerMenu.vue';
 import type DatepickerInput from '@/components/DatepickerInput.vue';
@@ -122,7 +122,7 @@ export type DisabledDatesProp = Date[] | string[] | IDisableDates;
 
 export type PresetDate = {
     label: string;
-    value: Date[] | string[] | Date | string;
+    value: MaybeRefOrGetter<Date[] | string[] | Date | string>;
     style?: Record<string, string>;
     slot?: string;
     noTz?: boolean;

tests/unit/components/Datepicker.spec.ts

@@ -1,5 +1,5 @@
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, afterEach, vi } from 'vitest';
 import { nextTick } from 'vue';
 import {
     addMonths,
@@ -12,6 +12,8 @@ import {
     addDays,
     getHours,
     startOfMonth,
+    startOfDay,
+    endOfDay,
 } from 'date-fns';
 import { ja } from 'date-fns/locale';
 
@@ -274,16 +276,55 @@ describe('Logic connection', () => {
         const { dp, menu } = await mountDatepicker({
             modeValue: null,
             range: true,
-            presetDates: [{ label: 'Today', range }],
+            presetDates: [{ label: 'Today', value: range, testId: 'TodayPresetBtn' }],
         });
 
-        menu.vm.presetDate(range);
+        await menu.find('[data-test-id="TodayPresetBtn"]').trigger('click');
 
         expect(dp.vm.internalModelValue).toHaveLength(2);
         expect(dp.vm.internalModelValue).toEqual(range);
         dp.unmount();
     });
 
+    it('Should preset range from preset-dates when range its a function', async () => {
+        const range = [new Date('2000-01-01T00:00:00'), new Date('2000-12-31T23:59:59')];
+        const { dp, menu } = await mountDatepicker({
+            modeValue: null,
+            range: true,
+            presetDates: [{ label: 'This Year', value: () => range, testId: 'ThisYearPresetBtn' }],
+        });
+
+        await menu.find('[data-test-id="ThisYearPresetBtn"]').trigger('click');
+
+        expect(dp.vm.internalModelValue).toHaveLength(2);
+        expect(dp.vm.internalModelValue).toEqual(range);
+        dp.unmount();
+    });
+
+    it('Should correctly set today when preset-dates its a function and selected 2 days later', async () => {
+        vi.useFakeTimers()
+        vi.setSystemTime(new Date('2000-01-01T00:00:00.000Z'))
+
+        const { dp, menu } = await mountDatepicker({
+            modeValue: null,
+            range: true,
+            presetDates: [{ label: 'Today', value: () => [startOfDay(new Date()), endOfDay(new Date())], testId: 'TodayPresetBtn' }],
+        });
+
+        await menu.find('[data-test-id="TodayPresetBtn"]').trigger('click');
+
+        expect(dp.vm.internalModelValue).toEqual([startOfDay(new Date('2000-01-01T00:00:00.000Z')), endOfDay(new Date('2000-01-01T00:00:00.000Z'))]);
+
+        setTimeout(async () => await menu.find('[data-test-id="TodayPresetBtn"]').trigger('click'), 1000 * 60 * 60 * 48) //
+
+        vi.runAllTimers()
+
+        expect(dp.vm.internalModelValue).toEqual([startOfDay(new Date('2000-01-03T00:00:00.000Z')), endOfDay(new Date('2000-01-03T00:00:00.000Z'))]);
+
+        dp.unmount();
+        vi.useRealTimers()
+    });
+
     it('Should select week', async () => {
         const start = startOfMonth(new Date());