maz-ui 4.0.0-alpha.5 → 4.0.0-beta.1

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

@@ -1,22 +1,47 @@
-import { Color, ModelValueSimple, Position, Size } from './types';
+import { MazTranslationsNestedSchema } from '@maz-ui/translations/src/types.js';
 import { HTMLAttributes } from 'vue';
-export type NormalizedOption = Record<string, ModelValueSimple>;
+import { MazInputValue } from './MazInput.vue';
+import { MazColor, MazSize } from './types';
+import { MazPopoverProps } from './MazPopover.vue';
+export interface MazSelectNormalizedOption {
+    [key: string]: MazInputValue;
+}
 export interface MazSelectOptionWithOptGroup {
     label: string;
-    options: (NormalizedOption | string | number | boolean)[];
+    options: (MazSelectNormalizedOption | string | number | boolean)[];
 }
-export type MazSelectOption = NormalizedOption | string | number | boolean | MazSelectOptionWithOptGroup;
-export interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectOption> {
-    /** Style attribut of the component root element */
+export type MazSelectOption = MazSelectNormalizedOption | string | number | boolean | MazSelectOptionWithOptGroup;
+export interface MazSelectProps<Value extends MazInputValue, Option extends MazSelectOption, Multiple extends boolean> {
+    /**
+     * Style attribut of the component root element
+     * @type {HTMLAttributes['style']}
+     */
     style?: HTMLAttributes['style'];
-    /** Class attribut of the component root element */
+    /**
+     * Class attribut of the component root element
+     * @type {HTMLAttributes['class']}
+     */
     class?: HTMLAttributes['class'];
     /** The id of the select */
     id?: string;
-    /** The value of the select */
-    modelValue?: T | T[];
-    /** The options of the select */
-    options?: U[];
+    /**
+     * The label of the select
+     */
+    label?: string;
+    /**
+     * The placeholder of the select
+     */
+    placeholder?: string;
+    /**
+     * The value of the select
+     * @type {Value | Value[]}
+     */
+    modelValue?: Multiple extends true ? Value[] : Value;
+    /**
+     * The options of the select
+     * @type {Option[]}
+     */
+    options: Option[];
     /**
      * The key of the option value
      * @default 'value'
@@ -34,9 +59,9 @@ export interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectO
     optionInputValueKey?: string;
     /**
      * The position of the list
-     * @default 'bottom left'
+     * @default 'bottom-start'
      */
-    listPosition?: Position;
+    listPosition?: MazPopoverProps['position'];
     /** The height of the option list item */
     itemHeight?: number;
     /** The max height of the option list */
@@ -51,77 +76,93 @@ export interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectO
      * The size of the select
      * @default 'md'
      */
-    size?: Size;
+    size?: MazSize;
     /**
      * The color of the select
      * @default 'primary'
      */
-    color?: Color;
+    color?: MazColor;
     /** Display search input in option list */
     search?: boolean;
-    /**
-     * The placeholder of the search input
-     * @default 'Search in options'
-     */
-    searchPlaceholder?: string;
     /**
      * Replace the default search function to provide a custom search function
      * @default undefined
      */
-    searchFunction?: (query: string, options: U[]) => U[] | undefined;
+    searchFunction?: (query: string, options: Option[]) => Option[] | undefined;
     /**
      * The threshold for the search input where 1 is a perfect match and 0 is a match with any character
      * @default 0.75
      */
     searchThreshold?: number;
-    /** if true, the option list is opened by default */
-    open?: boolean;
     /** Enable the multiple selection */
-    multiple?: boolean;
+    multiple?: Multiple;
     /** Make the input required in the form */
     required?: boolean;
     /** Disable the component */
     disabled?: boolean;
     /** The input will be displayed in full width */
     block?: boolean;
-    /** The exclude selectors for the v-closable directive - will exclude the elements from the directive */
-    excludeSelectors?: string[];
     /**
      * The autocomplete attribute of the input
      * @default 'off'
      */
     autocomplete?: string;
+    /**
+     * The translations of the component
+     * @type {Partial<MazTranslationsNestedSchema['select']>}
+     * @default {
+     *   searchPlaceholder: 'Search in options',
+     * }
+     */
+    translations?: Partial<MazTranslationsNestedSchema['select']>;
+    /**
+     * The function to format the input value
+     * @type {(value: Multiple extends true ? Value[] : Value) => string}
+     * @default undefined
+     */
+    formatInputValue?: (value: Multiple extends true ? Value[] : Value) => string;
 }
-declare const _default: <T extends ModelValueSimple, U extends MazSelectOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <Value extends MazInputValue, Option extends MazSelectOption, Multiple extends boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onBlur?: ((value: Event) => any) | undefined;
         readonly onChange?: ((value: Event) => any) | undefined;
-        readonly onClose?: ((value?: Event | undefined) => any) | undefined;
-        readonly onFocus?: ((value: Event) => any) | undefined;
+        readonly onClose?: (() => any) | undefined;
+        readonly onFocus?: ((value?: Event | undefined) => any) | undefined;
         readonly onInput?: ((value: Event) => any) | undefined;
-        readonly onOpen?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:model-value"?: ((value: T | T[]) => any) | undefined;
-        readonly "onSelected-option"?: ((value: U) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClose" | "onOpen" | "onUpdate:model-value" | "onSelected-option"> & MazSelectProps<T, U>> & import('vue').PublicProps;
+        readonly onOpen?: (() => any) | undefined;
+        readonly "onUpdate:model-value"?: ((value: Multiple extends true ? Value[] : Value) => any) | undefined;
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onSelected-option"?: ((value: Option) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClose" | "onOpen" | "onUpdate:model-value" | "onUpdate:open" | "onSelected-option"> & ({
+        open?: boolean;
+    } & MazSelectProps<Value, Option, Multiple>) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
-        openList: (event: Event) => Promise<void>;
-        closeList: (event?: Event) => Promise<void>;
+        /**
+         * Open the select
+         * @description This is used to open the list options
+         */
+        open: () => void;
+        /**
+         * Close the select
+         * @description This is used to close the list options
+         */
+        close: () => void;
     }>): void;
     attrs: any;
     slots: {
-        "no-results"?(_: {}): any;
+        'left-icon'?(_: {}): any;
+        'right-icon'?(_: {}): any;
+        'no-results'?(_: {}): any;
         optgroup?(_: {
             label: string | number | true;
         }): any;
         default?(_: {
-            option: NormalizedOption;
+            option: Option;
             isSelected: boolean;
         }): any;
     };
-    emit: ((evt: "blur", value: Event) => void) & ((evt: "change", value: Event) => void) & ((evt: "close", value?: Event | undefined) => void) & ((evt: "focus", value: Event) => void) & ((evt: "input", value: Event) => void) & ((evt: "open", value: boolean) => void) & ((evt: "update:model-value", value: T | T[]) => void) & ((evt: "selected-option", value: U) => void);
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+    emit: (((evt: "blur", value: Event) => void) & ((evt: "change", value: Event) => void) & ((evt: "close") => void) & ((evt: "focus", value?: Event | undefined) => void) & ((evt: "input", value: Event) => void) & ((evt: "open") => void) & ((evt: "update:model-value", value: Multiple extends true ? Value[] : Value) => void) & ((evt: "selected-option", value: Option) => void)) & ((evt: "update:open", value: boolean) => void);
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -0,0 +1,162 @@
+import { MazTranslationsNestedSchema } from '@maz-ui/translations/src/types.js';
+import { HTMLAttributes } from 'vue';
+import { PopoverPosition } from './MazPopover.vue';
+import { MazColor, MazSize } from './types';
+import { CodesType, DisplayNameCode, DisplayNamesOptions } from '../composables/useDisplayNames';
+import { MazSelectProps } from './MazSelect.vue';
+export interface MazSelectCountryProps<Option extends {
+    name: string;
+    code: DisplayNameCode | string;
+}> extends Omit<MazSelectProps<Option['code'], Option, false>, 'options' | 'multiple'> {
+    /**
+     * Style attribut of the component root element
+     * @type {HTMLAttributes['style']}
+     */
+    style?: HTMLAttributes['style'];
+    /**
+     * Class attribut of the component root element
+     * @type {HTMLAttributes['class']}
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * Id of the component
+     */
+    id?: string;
+    /**
+     * Color of the component
+     * @type {MazColor}
+     * @default primary
+     */
+    color?: MazColor;
+    /**
+     * Size of the component
+     * @type {MazSize}
+     * @default md
+     */
+    size?: MazSize;
+    /**
+     * Preferred countries to display
+     * @type {Option['code'][]}
+     */
+    preferredCodes?: Option['code'][];
+    /**
+     * Ignored countries to display
+     * @type {Option['code'][]}
+     */
+    ignoredCodes?: Option['code'][];
+    /**
+     * Only countries to display
+     * @type {Option['code'][]}
+     */
+    onlyCodes?: Option['code'][];
+    /**
+     * Position of the list
+     * @type {PopoverPosition}
+     * @default bottom-start
+     */
+    listPosition?: PopoverPosition;
+    /**
+     * Hide flags
+     */
+    hideFlags?: boolean;
+    /**
+     * Display search input in options list
+     * @type {boolean}
+     * @default true
+     */
+    search?: boolean;
+    /**
+     * Show code on list
+     * @default false
+     */
+    showCodeInList?: boolean;
+    /**
+     * Locale
+     * @type {string}
+     * @default locale defined within the maz-ui plugin or browser locale or en-US
+     */
+    locale?: string;
+    /**
+     * Success state
+     */
+    success?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Warning state
+     */
+    warning?: boolean;
+    /**
+     * Country selector display name
+     */
+    displayCode?: boolean;
+    /**
+     * Search threshold
+     */
+    searchThreshold?: number;
+    /**
+     * Translations
+     * @type {Partial<MazTranslationsNestedSchema['selectCountry']>}
+     * @default MazTranslationsNestedSchema['selectCountry']
+     */
+    translations?: Partial<MazTranslationsNestedSchema['selectCountry']>;
+    /**
+     * Hint message displayed
+     */
+    hint?: string;
+    /**
+     * Options
+     * @type {Option[]}
+     */
+    options?: Option[];
+    /**
+     * Display name type
+     * @type {Intl.DisplayNamesOptions}
+     * @default { type: 'region', languageDisplay: 'standard', fallback: 'code', style: 'long' }
+     */
+    displayNamesOptions?: DisplayNamesOptions;
+    /**
+     * Codes type
+     * @type {CodesType}
+     * @default defined by displayNamesOptions.type (if 'region', 'country' is used, otherwise 'iso')
+     * @values 'iso' | 'bcp' | 'country' | 'all'
+     */
+    codesType?: CodesType;
+}
+declare const _default: <Option extends {
+    name: string;
+    code: DisplayNameCode | string;
+}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:model-value"?: ((value?: Option["code"] | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value"> & MazSelectCountryProps<Option> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        'selector-flag'?(_: {
+            countryCode: Option["code"] | undefined;
+        }): any;
+        'no-results'?(_: {}): any;
+        'country-list-flag'?(_: {
+            option: Option;
+            isSelected: boolean;
+        }): any;
+        'country-list-code'?(_: {
+            option: Option;
+            isSelected: boolean;
+        }): any;
+        'country-list-name'?(_: {
+            option: Option;
+            isSelected: boolean;
+        }): any;
+    };
+    emit: (evt: "update:model-value", value?: Option["code"] | undefined) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,111 +1,31 @@
-import { Color } from './types';
-import { PropType } from 'vue';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { MazColor } from './types';
+export interface MazSliderProps {
     /** Array of cursors values */
-    modelValue: {
-        type: PropType<number | number[]>;
-        required: true;
-        validator: (value: string) => boolean;
-    };
+    modelValue: number | number[] | undefined | null;
     /** array of cursors label */
-    labels: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
+    labels?: string[];
     /** min value of sliders */
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
+    min?: number;
     /** max value of sliders */
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
+    max?: number;
+    /** step value for slider increments */
+    step?: number;
     /** height size of slider bar */
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    size?: string;
     /** remove div in different colors */
-    noDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    divider?: boolean;
     /** become a logarithmic slider (exponential) */
-    log: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    log?: boolean;
     /** main slider color */
-    color: {
-        type: PropType<Color>;
-        default: string;
-    };
+    color?: MazColor;
     /** disables cursor animation when active */
-    noCursorAnim: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cursorAnim?: boolean;
+}
+declare const _default: import('vue').DefineComponent<MazSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:model-value": (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /** Array of cursors values */
-    modelValue: {
-        type: PropType<number | number[]>;
-        required: true;
-        validator: (value: string) => boolean;
-    };
-    /** array of cursors label */
-    labels: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    /** min value of sliders */
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /** max value of sliders */
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /** height size of slider bar */
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /** remove div in different colors */
-    noDivider: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** become a logarithmic slider (exponential) */
-    log: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** main slider color */
-    color: {
-        type: PropType<Color>;
-        default: string;
-    };
-    /** disables cursor animation when active */
-    noCursorAnim: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<MazSliderProps> & Readonly<{
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: string;
-    color: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white" | "black" | "transparent" | "theme";
-    labels: unknown[];
-    max: number;
-    min: number;
-    noDivider: boolean;
-    log: boolean;
-    noCursorAnim: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    MazSlider: HTMLDivElement;
+}, any>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { Color } from './types';
+import { MazColor } from './types';
 export interface MazSpinnerProps {
     /**
      * The size of the spinner
@@ -9,7 +9,7 @@ export interface MazSpinnerProps {
      * The color of the spinner
      * @default theme
      */
-    color?: Color;
+    color?: MazColor;
 }
-declare const _default: import('vue').DefineComponent<MazSpinnerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<MazSpinnerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
 export default _default;

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

@@ -1,4 +1,5 @@
-import { Color, Icon } from './types';
+import { IconComponent } from '@maz-ui/icons';
+import { MazColor } from './types';
 export interface MazStepperStep {
     title?: string;
     subtitle?: string;
@@ -7,19 +8,18 @@ export interface MazStepperStep {
     error?: boolean;
     success?: boolean;
     warning?: boolean;
-    icon?: string | Icon;
+    icon?: string | IconComponent;
 }
-export type MazStepperSteps = MazStepperStep[];
 export interface MazStepperProps {
     /** The current step */
     modelValue?: number;
     /** The steps */
-    steps?: MazStepperSteps;
+    steps?: MazStepperStep[];
     /**
      * The color of the stepper
      * @default primary
      */
-    color?: Color;
+    color?: MazColor;
     /** Disable the next steps */
     disabledNextSteps?: boolean;
     /** Disable the previous steps */
@@ -33,27 +33,13 @@ export interface MazStepperProps {
     /** Allow to close the steps */
     canCloseSteps?: boolean;
 }
-declare function __VLS_template(): {
-    slots: Partial<Record<`icon-${number}`, (_: {}) => any>> & Partial<Record<`title-${number}`, (_: {}) => any>> & Partial<Record<`subtitle-${number}`, (_: {}) => any>> & Partial<Record<`title-info-${number}`, (_: {}) => any>> & Partial<Record<`content-${number}`, (_: {
-        validated: boolean;
-        error: boolean | undefined;
-        warning: boolean | undefined;
-        nextStep: () => void;
-        previousStep: () => void;
-    }) => any>>;
-    refs: {};
-    attrs: Partial<{}>;
-};
+declare function __VLS_template(): any;
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MazStepperProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:model-value": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<MazStepperProps> & Readonly<{
     "onUpdate:model-value"?: ((value: number) => any) | undefined;
-}>, {
-    color: Color;
-    modelValue: number;
-    steps: MazStepperSteps;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
-import { Color } from './types';
 import { HTMLAttributes } from 'vue';
+import { MazColor } from './types';
 export interface MazSwitchProps {
     /** Style attribut of the component root element */
     style?: HTMLAttributes['style'];
@@ -16,7 +16,7 @@ export interface MazSwitchProps {
     /** Text label */
     label?: string;
     /** The color of the switch */
-    color?: Color;
+    color?: MazColor;
     /** Whether there is an error with the input. */
     error?: boolean;
     /** Whether the input is successful. */
@@ -27,6 +27,7 @@ export interface MazSwitchProps {
     hint?: string;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {
             value: boolean;
@@ -35,7 +36,7 @@ declare function __VLS_template(): {
     refs: {
         inputRef: HTMLInputElement;
     };
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MazSwitchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -49,14 +50,16 @@ declare const __VLS_component: import('vue').DefineComponent<MazSwitchProps, {},
     onFocus?: ((value: FocusEvent) => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
 }>, {
-    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
     name: string;
+    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
     class: HTMLAttributes["class"];
-    color: Color;
+    color: MazColor;
     disabled: boolean;
     id: string;
     modelValue: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {