maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
552 lines (551 loc) • 24.3 kB
TypeScript
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' }
*/
inputDateFormat?: 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
* @example 'en-US', 'fr-FR', 'de-DE'
*/
locale?: string;
/**
* Controls whether the calendar header is hidden
* @default false
*/
hideHeader?: boolean;
/**
* Controls whether the component is disabled
* @default false
*/
disabled?: boolean;
/**
* The first day of the week in the calendar
* @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
* @default false
*/
autoClose?: boolean;
/**
* CSS selector for a custom element that triggers the picker
* @example '#my-button', '.trigger-class'
*/
customElementSelector?: string;
/**
* Controls whether the picker displays two months side by side
* @default false
*/
double?: boolean;
/**
* Controls whether the picker is displayed inline without input field
* @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-end, bottom-end, left-end, right-end, top-start, bottom-start, left-start, right-start
* @default 'auto'
*/
pickerPosition?: MazPopoverProps['position'];
/**
* Controls whether the picker includes a time selector
* @default false
*/
time?: boolean;
/**
* Controls whether the picker shows only time selection (no date)
* @default false
*/
onlyTime?: boolean;
/**
* The interval in minutes for the time picker minute selection
* @default 5
* @values 1, 5, 10, 15, 30
*/
minuteInterval?: number;
/**
* Controls whether to automatically detect and use the browser's locale
* @default true
*/
useBrowserLocale?: boolean;
/**
* Controls whether to fetch locale data dynamically
* @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 {MazDatePickerShortcut['identifier']}
*/
shortcut?: MazDatePickerShortcut['identifier'];
/**
* The minimum selectable date in ISO format
* @example '2023-01-01'
*/
minDate?: string;
/**
* The maximum selectable date in ISO format
* @example '2024-12-31'
*/
maxDate?: string;
/**
* When minDate or maxDate are provided, if the current date is not between minDate and maxDate, the current date will be set to the minDate or maxDate
* @default true
*/
minMaxAuto?: boolean;
/**
* Array of weekday numbers to disable (0 = Sunday, 6 = Saturday)
* @default []
* @example [0, 6] to disable weekends
*/
disabledWeekly?: number[];
/**
* Array of specific dates to disable in ISO format
* @default []
* @example ['2023-12-25', '2024-01-01']
*/
disabledDates?: string[];
/**
* Array of hour numbers to disable in the time picker (0-23)
* @default []
* @example [0, 1, 2, 22, 23] to disable night hours
*/
disabledHours?: number[];
/**
* Controls whether the input displays in full width
* @default false
*/
block?: boolean;
/**
* Controls whether the picker operates in range selection mode
* @default false
*/
range?: boolean;
/**
* The transition name of the popover
* @type {MazPopoverProps['transition']}
* @default 'scale-fade'
*/
transition?: MazPopoverProps['transition'];
}
declare const __VLS_defaults: {
locale: undefined;
open: boolean;
};
type __VLS_PublicProps = {
'locale'?: string;
'open'?: typeof __VLS_defaults['open'];
} & __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').MazPopoverPosition | undefined;
readonly preferPosition?: import('./MazPopover.vue').MazPopoverPreferPosition | undefined;
readonly fallbackPosition?: import('./MazPopover.vue').MazPopoverFallbackPosition | undefined;
readonly trigger?: import('./MazPopover.vue').MazPopoverTrigger | undefined;
readonly role?: import('./MazPopover.vue').MazPopoverRole | 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?: "scale-pop" | "scale-fade" | 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 positionReference?: (string | HTMLElement) | 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;
readonly "onAfter-close-animation"?: (() => 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) & ((event: "after-close-animation") => 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;
"onAfter-close-animation"?: (() => any) | undefined;
}>, {
open: () => void;
close: () => void;
toggle: () => void;
isOpen: import('vue').ModelRef<boolean, string, boolean, 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;
"after-close-animation": () => 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 : (...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;
"onAfter-close-animation"?: (() => any) | undefined;
}>, "close" | "toggle" | "open" | "isOpen" | "updatePosition"> & import('vue').ShallowUnwrapRef<{
open: () => void;
close: () => void;
toggle: () => void;
isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
updatePosition: () => void;
}> & {} & import('vue').ComponentCustomProperties & {} & {
$slots: {
trigger?(_: {
open: () => void;
close: () => void;
toggle: () => void;
isOpen: boolean;
trigger: "click" | "hover" | "manual";
}): 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: (typeof __VLS_defaults)["open"];
format: string;
transition: string;
double: boolean;
inline: boolean;
range: boolean;
shortcuts: MazDatePickerShortcut[] | boolean;
minDate: string;
maxDate: string;
minMaxAuto: boolean;
disabledWeekly: number[];
disabledDates: string[];
firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
minuteInterval: number;
disabledHours: number[];
hideHeader: boolean;
inputDateFormat: Intl.DateTimeFormatOptions;
autoClose: boolean;
pickerPosition: import('./MazPopover.vue').MazPopoverPosition;
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').MazPopoverPosition | undefined;
readonly preferPosition?: import('./MazPopover.vue').MazPopoverPreferPosition | undefined;
readonly fallbackPosition?: import('./MazPopover.vue').MazPopoverFallbackPosition | undefined;
readonly trigger?: import('./MazPopover.vue').MazPopoverTrigger | undefined;
readonly role?: import('./MazPopover.vue').MazPopoverRole | 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?: "scale-pop" | "scale-fade" | 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 positionReference?: (string | HTMLElement) | 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;
readonly "onAfter-close-animation"?: (() => 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) & ((event: "after-close-animation") => 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;
"onAfter-close-animation"?: (() => any) | undefined;
}>, {
open: () => void;
close: () => void;
toggle: () => void;
isOpen: import('vue').ModelRef<boolean, string, boolean, 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;
"after-close-animation": () => 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 : (...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;
"onAfter-close-animation"?: (() => any) | undefined;
}>, "close" | "toggle" | "open" | "isOpen" | "updatePosition"> & import('vue').ShallowUnwrapRef<{
open: () => void;
close: () => void;
toggle: () => void;
isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
updatePosition: () => void;
}> & {} & import('vue').ComponentCustomProperties & {} & {
$slots: {
trigger?(_: {
open: () => void;
close: () => void;
toggle: () => void;
isOpen: boolean;
trigger: "click" | "hover" | "manual";
}): 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;
};
};