Fixes #3609 - Update Calendar typings to be precise

[Magiczne]

As the calendar only allows to select two values, which one of them can be null (first range item selected, second not) the types should be precise and declared as tuple, and not allow arrays of unspecified length.

Fixes #3609

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2024 9:01am

[melloware]

Not sure if this helps but in PrimeReact we made the TS even smarter by knowing whether you were in single mode, range mode, or multiple mode.

interface CalendarPropsSingle extends CalendarBaseProps {
    /**
     * Specifies the selection mode either "single", "range", or "multiple";
     * @defaultValue single
     */
    selectionMode?: 'single' | undefined;
    /**
     * Value of the component.
     * @defaultValue null
     */
    value?: Nullable<Date>;
    /**
     * Callback to invoke when value changes.
     * @param { FormEvent<Date>} event - Custom change event
     */
    onChange?(event: FormEvent<Date>): void;
}

interface CalendarPropsRange extends CalendarBaseProps {
    /**
     * Specifies the selection mode either "single", "range", or "multiple";
     * @defaultValue single
     */
    selectionMode: 'range';
    /**
     * Value of the component.
     * @defaultValue null
     */
    value?: Nullable<(Date | null)[]>;
    /**
     * Callback to invoke when value changes.
     * @param { FormEvent<(Date | null)[]>} event - Custom change event
     */
    onChange?(event: FormEvent<(Date | null)[]>): void;
}

interface CalendarPropsMultiple extends CalendarBaseProps {
    /**
     * Specifies the selection mode either "single", "range", or "multiple";
     * @defaultValue single
     */
    selectionMode: 'multiple';
    /**
     * Value of the component.
     * @defaultValue null
     */
    value?: Nullable<Date[]>;
    /**
     * Callback to invoke when value changes.
     * @param {FormEvent<Date[]>} event - Custom change event
     */
    onChange?(event: FormEvent<Date[]>): void;
}

export type CalendarProps = CalendarPropsSingle | CalendarPropsRange | CalendarPropsMultiple;

[mertsincan]

Hi @Magiczne,

There are some conflicts in it. Could you please update it and give an update to Melloware's comment? WDYT?

[Magiczne]

@mertsincan will try but probably at the end of the week

[Magiczne]

@mertsincan updated - since in vue on type level the emits are not aware of props the emits will have to stay as normal interface (updated type value), and only props will be a discriminated union, wchich works perfectly fine when I tested this types locally.

Only keep in mind, that this could be a breaking change for users using TypeScript.