maz-ui 4.0.0-alpha.4 → 4.0.0-beta.0

package/dist/types/components/MazDatePicker.vue.d.ts

@@ -0,0 +1,551 @@
+import { HTMLAttributes } from 'vue';
+import { MazDatePickerShortcut, MazDatePickerValue } from './MazDatePicker/types';
+import { MazInputProps } from './MazInput.vue';
+import { MazPopoverProps } from './MazPopover.vue';
+import { MazColor } from './types';
+type __VLS_Props = MazDatePickerProps;
+export type { MazDatePickerPartialRangeValue, MazDatePickerRangeValue, MazDatePickerShortcut, MazDatePickerValue } from './MazDatePicker/types';
+export interface MazDatePickerProps {
+    /**
+     * The unique identifier of the component
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * The inline style object for the component
+     * @type {HTMLAttributes['style']}
+     */
+    style?: HTMLAttributes['style'];
+    /**
+     * The CSS class(es) to apply to the component
+     * @type {HTMLAttributes['class']}
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * The props to apply to the input component
+     * @default undefined
+     * @type {MazInputProps}
+     */
+    inputProps?: MazInputProps;
+    /**
+     * The value of the date picker component
+     * If an object is provided, the picker will be a range picker
+     * @type {MazDatePickerValue}
+     * @default undefined
+     */
+    modelValue?: MazDatePickerValue;
+    /**
+     * The format pattern for date display and parsing
+     * @type {string}
+     * @default 'YYYY-MM-DD'
+     * @example 'YYYY-MM-DD', 'DD/MM/YYYY', 'YYYY-MM-DD HH:mm'
+     */
+    format?: string;
+    /**
+     * Controls whether the picker window is open
+     * @type {boolean}
+     * @default false
+     * @model
+     */
+    open?: boolean;
+    /**
+     * The label text displayed above the input field
+     * @type {string}
+     */
+    label?: string;
+    /**
+     * The placeholder text shown when no value is selected
+     * @type {string}
+     */
+    placeholder?: string;
+    /**
+     * The Intl.DateTimeFormatOptions for styling the input date display
+     * @type {Intl.DateTimeFormatOptions}
+     * @default { dateStyle: 'medium', timeStyle: 'full' }
+     */
+    inputFormat?: Intl.DateTimeFormatOptions;
+    /**
+     * Custom function to transform the formatted date display
+     * @type {Function}
+     * @param {object} payload - The transformation payload
+     * @param {string} payload.formattedDate - The formatted date string
+     * @param {MazDatePickerValue} payload.value - The current picker value
+     * @param {string} payload.locale - The current locale
+     * @returns {string} The transformed date string
+     */
+    inputDateTransformer?: (payload: {
+        formattedDate?: string;
+        value?: MazDatePickerValue;
+        locale: string;
+    }) => string;
+    /**
+     * The locale string for date formatting and localization
+     * @type {string}
+     * @example 'en-US', 'fr-FR', 'de-DE'
+     */
+    locale?: string;
+    /**
+     * Controls whether the calendar header is hidden
+     * @type {boolean}
+     * @default false
+     */
+    hideHeader?: boolean;
+    /**
+     * Controls whether the component is disabled
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The first day of the week in the calendar
+     * @type {number}
+     * @values 0, 1, 2, 3, 4, 5, 6
+     * @default 0
+     * @example 0 (Sunday), 1 (Monday), 6 (Saturday)
+     */
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Controls whether the picker closes automatically after date selection
+     * @type {boolean}
+     * @default false
+     */
+    autoClose?: boolean;
+    /**
+     * CSS selector for a custom element that triggers the picker
+     * @type {string}
+     * @example '#my-button', '.trigger-class'
+     */
+    customElementSelector?: string;
+    /**
+     * Controls whether the picker displays two months side by side
+     * @type {boolean}
+     * @default false
+     */
+    double?: boolean;
+    /**
+     * Controls whether the picker is displayed inline without input field
+     * @type {boolean}
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * The color theme of the component
+     * @type {MazColor}
+     * @values primary, secondary, success, destructive, warning, info, accent, contrast
+     * @default 'primary'
+     */
+    color?: MazColor;
+    /**
+     * The position where the picker popover should appear
+     * @type {MazPopoverProps['position']}
+     * @values top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
+     */
+    pickerPosition?: MazPopoverProps['position'];
+    /**
+     * Controls whether the picker includes a time selector
+     * @type {boolean}
+     * @default false
+     */
+    time?: boolean;
+    /**
+     * Controls whether the picker shows only time selection (no date)
+     * @type {boolean}
+     * @default false
+     */
+    onlyTime?: boolean;
+    /**
+     * The interval in minutes for the time picker minute selection
+     * @type {number}
+     * @default 5
+     * @values 1, 5, 10, 15, 30
+     */
+    minuteInterval?: number;
+    /**
+     * Controls whether to automatically detect and use the browser's locale
+     * @type {boolean}
+     * @default true
+     */
+    useBrowserLocale?: boolean;
+    /**
+     * Controls whether to fetch locale data dynamically
+     * @type {boolean}
+     * @default true
+     */
+    fetchLocal?: boolean;
+    /**
+     * Array of predefined date range shortcuts or false to disable
+     * @type {MazDatePickerShortcut[] | false}
+     * @default [predefined shortcuts array]
+     */
+    shortcuts?: MazDatePickerShortcut[] | boolean;
+    /**
+     * The identifier of the currently selected shortcut
+     * @type {string}
+     */
+    shortcut?: MazDatePickerShortcut['identifier'];
+    /**
+     * The minimum selectable date in ISO format
+     * @type {string}
+     * @example '2023-01-01'
+     */
+    minDate?: string;
+    /**
+     * The maximum selectable date in ISO format
+     * @type {string}
+     * @example '2024-12-31'
+     */
+    maxDate?: string;
+    /**
+     * Array of weekday numbers to disable (0 = Sunday, 6 = Saturday)
+     * @type {number[]}
+     * @default []
+     * @example [0, 6] to disable weekends
+     */
+    disabledWeekly?: number[];
+    /**
+     * Array of specific dates to disable in ISO format
+     * @type {string[]}
+     * @default []
+     * @example ['2023-12-25', '2024-01-01']
+     */
+    disabledDates?: string[];
+    /**
+     * Array of hour numbers to disable in the time picker (0-23)
+     * @type {number[]}
+     * @default []
+     * @example [0, 1, 2, 22, 23] to disable night hours
+     */
+    disabledHours?: number[];
+    /**
+     * Controls whether the input displays in full width
+     * @type {boolean}
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Controls whether the picker operates in range selection mode
+     * @type {boolean}
+     * @default false
+     */
+    range?: boolean;
+}
+type __VLS_PublicProps = {
+    'locale'?: string;
+    'open'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {
+            isOpen: boolean;
+            close: () => void;
+            open: () => void;
+            toggle: () => void;
+        }): any;
+    };
+    refs: {
+        popover: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly modelValue?: boolean | undefined;
+                readonly position?: import('./MazPopover.vue').PopoverPosition | undefined;
+                readonly preferPosition?: import('./MazPopover.vue').PopoverPosition | undefined;
+                readonly fallbackPosition?: import('./MazPopover.vue').PopoverPosition | undefined;
+                readonly trigger?: import('./MazPopover.vue').PopoverTrigger | undefined;
+                readonly role?: import('./MazPopover.vue').PopoverRole | undefined;
+                readonly ariaLabel?: string | undefined;
+                readonly announceChanges?: boolean | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly offset?: number | undefined;
+                readonly delay?: number | undefined;
+                readonly hoverDelay?: number | undefined;
+                readonly transition?: string | undefined;
+                readonly teleportTo?: string | undefined;
+                readonly overlayClass?: HTMLAttributes["class"];
+                readonly panelClass?: HTMLAttributes["class"];
+                readonly panelStyle?: import('vue').StyleValue;
+                readonly closeOnClickOutside?: boolean | undefined;
+                readonly closeOnEscape?: boolean | undefined;
+                readonly persistent?: boolean | undefined;
+                readonly id?: string | undefined;
+                readonly ariaLabelledby?: string | undefined;
+                readonly ariaDescribedby?: string | undefined;
+                readonly color?: (MazColor | "background") | undefined;
+                readonly trapFocus?: boolean | undefined;
+                readonly keepOpenOnHover?: boolean | undefined;
+                readonly block?: boolean | undefined;
+                readonly positionDelay?: number | undefined;
+                readonly onClose?: (() => any) | undefined;
+                readonly onToggle?: ((value: boolean) => any) | undefined;
+                readonly onOpen?: (() => any) | undefined;
+                readonly "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+                readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                trigger: HTMLDivElement;
+                panel: HTMLDivElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "close") => void) & ((event: "toggle", value: boolean) => void) & ((event: "open") => void) & ((event: "update:model-value", value: boolean) => void) & ((event: "update:modelValue", value: boolean) => void);
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                modelValue?: boolean;
+            } & MazPopoverProps> & Readonly<{
+                onClose?: (() => any) | undefined;
+                onToggle?: ((value: boolean) => any) | undefined;
+                onOpen?: (() => any) | undefined;
+                "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            }>, {
+                open: () => void;
+                close: () => void;
+                toggle: () => void;
+                isOpen: import('vue').ComputedRef<boolean>;
+                updatePosition: () => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                close: () => any;
+                toggle: (value: boolean) => any;
+                open: () => any;
+                "update:model-value": (value: boolean) => any;
+                "update:modelValue": (value: boolean) => any;
+            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (... /**
+             * CSS selector for a custom element that triggers the picker
+             * @type {string}
+             * @example '#my-button', '.trigger-class'
+             */args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<{
+            modelValue?: boolean;
+        } & MazPopoverProps> & Readonly<{
+            onClose?: (() => any) | undefined;
+            onToggle?: ((value: boolean) => any) | undefined;
+            onOpen?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }>, "close" | "toggle" | "open" | "updatePosition" | "isOpen"> & import('vue').ShallowUnwrapRef<{
+            open: () => void;
+            close: () => void;
+            toggle: () => void;
+            isOpen: import('vue').ComputedRef<boolean>;
+            updatePosition: () => void;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                trigger?(_: {
+                    open: () => void;
+                    close: () => void;
+                    toggle: () => void;
+                    isOpen: boolean;
+                }): any;
+                default?(_: {
+                    open: () => void;
+                    close: () => void;
+                    toggle: () => void;
+                    isOpen: true;
+                }): any;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (args_0: void) => any;
+    "update:model-value": (value: MazDatePickerValue) => any;
+    "update:locale": (value: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((args_0?: void | undefined) => any) | undefined;
+    "onUpdate:model-value"?: ((value: MazDatePickerValue) => any) | undefined;
+    "onUpdate:locale"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    time: boolean;
+    color: MazColor;
+    disabled: boolean;
+    open: boolean;
+    double: boolean;
+    inline: boolean;
+    range: boolean;
+    shortcuts: MazDatePickerShortcut[] | boolean;
+    format: string;
+    minDate: string;
+    maxDate: string;
+    disabledWeekly: number[];
+    disabledDates: string[];
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    minuteInterval: number;
+    disabledHours: number[];
+    hideHeader: boolean;
+    inputFormat: Intl.DateTimeFormatOptions;
+    autoClose: boolean;
+    pickerPosition: import('./MazPopover.vue').PopoverPosition;
+    onlyTime: boolean;
+    useBrowserLocale: boolean;
+    fetchLocal: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    popover: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly modelValue?: boolean | undefined;
+            readonly position?: import('./MazPopover.vue').PopoverPosition | undefined;
+            readonly preferPosition?: import('./MazPopover.vue').PopoverPosition | undefined;
+            readonly fallbackPosition?: import('./MazPopover.vue').PopoverPosition | undefined;
+            readonly trigger?: import('./MazPopover.vue').PopoverTrigger | undefined;
+            readonly role?: import('./MazPopover.vue').PopoverRole | undefined;
+            readonly ariaLabel?: string | undefined;
+            readonly announceChanges?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly offset?: number | undefined;
+            readonly delay?: number | undefined;
+            readonly hoverDelay?: number | undefined;
+            readonly transition?: string | undefined;
+            readonly teleportTo?: string | undefined;
+            readonly overlayClass?: HTMLAttributes["class"];
+            readonly panelClass?: HTMLAttributes["class"];
+            readonly panelStyle?: import('vue').StyleValue;
+            readonly closeOnClickOutside?: boolean | undefined;
+            readonly closeOnEscape?: boolean | undefined;
+            readonly persistent?: boolean | undefined;
+            readonly id?: string | undefined;
+            readonly ariaLabelledby?: string | undefined;
+            readonly ariaDescribedby?: string | undefined;
+            readonly color?: (MazColor | "background") | undefined;
+            readonly trapFocus?: boolean | undefined;
+            readonly keepOpenOnHover?: boolean | undefined;
+            readonly block?: boolean | undefined;
+            readonly positionDelay?: number | undefined;
+            readonly onClose?: (() => any) | undefined;
+            readonly onToggle?: ((value: boolean) => any) | undefined;
+            readonly onOpen?: (() => any) | undefined;
+            readonly "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            trigger: HTMLDivElement;
+            panel: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "close") => void) & ((event: "toggle", value: boolean) => void) & ((event: "open") => void) & ((event: "update:model-value", value: boolean) => void) & ((event: "update:modelValue", value: boolean) => void);
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            modelValue?: boolean;
+        } & MazPopoverProps> & Readonly<{
+            onClose?: (() => any) | undefined;
+            onToggle?: ((value: boolean) => any) | undefined;
+            onOpen?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }>, {
+            open: () => void;
+            close: () => void;
+            toggle: () => void;
+            isOpen: import('vue').ComputedRef<boolean>;
+            updatePosition: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            close: () => any;
+            toggle: (value: boolean) => any;
+            open: () => any;
+            "update:model-value": (value: boolean) => any;
+            "update:modelValue": (value: boolean) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (... /**
+         * CSS selector for a custom element that triggers the picker
+         * @type {string}
+         * @example '#my-button', '.trigger-class'
+         */args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        modelValue?: boolean;
+    } & MazPopoverProps> & Readonly<{
+        onClose?: (() => any) | undefined;
+        onToggle?: ((value: boolean) => any) | undefined;
+        onOpen?: (() => any) | undefined;
+        "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>, "close" | "toggle" | "open" | "updatePosition" | "isOpen"> & import('vue').ShallowUnwrapRef<{
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: import('vue').ComputedRef<boolean>;
+        updatePosition: () => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            trigger?(_: {
+                open: () => void;
+                close: () => void;
+                toggle: () => void;
+                isOpen: boolean;
+            }): any;
+            default?(_: {
+                open: () => void;
+                close: () => void;
+                toggle: () => void;
+                isOpen: true;
+            }): any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};