Description
Is your feature request related to a problem? Please describe.
I have users that never close the browser, on mobile and desktop, this is usually not an issue, except when they want to change the date range in the dashboard, using preset-dates defined in VueDatePicker
, sometimes when clicking on the "Today" preset doesn't give you "Today", but rather the day the component was mounted, which could be yesterday or a week ago, same with "This Month", it could be the previous month.
Describe the solution you'd like
Change the PresetDate
interface to allow the value to be a function, using something like MaybeRefOrGetter:
export type PresetDate = {
label: string;
value: MaybeRefOrGetter<Date[] | string[] | Date | string>;
style?: Record<string, string>;
slot?: string;
noTz?: boolean;
testId?: string;
};
Then in DatepickerMenu
wrap preset.value in toValue():
<button
type="button"
:style="preset.style || {}"
class="dp__btn dp--preset-range"
:class="{ 'dp--preset-range-collapsed': collapse }"
:data-test-id="preset.testId ?? undefined"
:data-dp-mobile="isMobile"
@click.prevent="() => presetDate(toValue(preset.value), preset.noTz)"
@keydown="checkKeyDown($event, () => presetDate(toValue(preset.value), preset.noTz), true)"
>
{{ preset.label }}
</button>
Also, peerDependencies in package.json should be updated to "vue": ">=3.3.0"
Additional context
From VUEs documentation:
toValue() Only supported in 3.3+
Normalizes values / refs / getters to values. This is similar to unref(), except that it also normalizes getters. If the argument is a getter, it will be invoked and its return value will be returned.
function toValue<T>(source: T | Ref<T> | (() => T)): T
toValue(1) // --> 1
toValue(ref(1)) // --> 1
toValue(() => 1) // --> 1