Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow preset-dates values to be computed when clicked #1031

Open
ayrtonandino opened this issue Nov 5, 2024 · 0 comments
Open

Allow preset-dates values to be computed when clicked #1031

ayrtonandino opened this issue Nov 5, 2024 · 0 comments
Labels
awaiting triage The issue is not reviewed by the maintainers enhancement New feature or request

Comments

@ayrtonandino
Copy link

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
@ayrtonandino ayrtonandino added awaiting triage The issue is not reviewed by the maintainers enhancement New feature or request labels Nov 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting triage The issue is not reviewed by the maintainers enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant