maz-ui 4.0.0-beta.1 → 4.0.0-beta.11

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

@@ -47,15 +47,15 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MazLazyImgProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    error: (el: HTMLElement) => any;
-    loaded: (el: HTMLElement) => any;
-    loading: (el: HTMLElement) => any;
-    intersecting: (el: HTMLElement) => any;
+    error: (el: Element) => any;
+    loaded: (el: Element) => any;
+    loading: (el: Element) => any;
+    intersecting: (el: Element) => any;
 }, string, import('vue').PublicProps, Readonly<MazLazyImgProps> & Readonly<{
-    onError?: ((el: HTMLElement) => any) | undefined;
-    onLoaded?: ((el: HTMLElement) => any) | undefined;
-    onLoading?: ((el: HTMLElement) => any) | undefined;
-    onIntersecting?: ((el: HTMLElement) => any) | undefined;
+    onError?: ((el: Element) => any) | undefined;
+    onLoaded?: ((el: Element) => any) | undefined;
+    onLoading?: ((el: Element) => any) | undefined;
+    onIntersecting?: ((el: Element) => any) | undefined;
 }>, {
     src: MazImage | null;
     style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;

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

@@ -1,7 +1,18 @@
 import { IconComponent } from '@maz-ui/icons';
 import { RouteLocationRaw } from 'vue-router';
 import { MazColor } from './types';
+import { HTMLAttributes } from 'vue';
 export interface MazLinkProps {
+    /**
+     * The class attribute of the link
+     * @default undefined
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * The style attribute of the link
+     * @default undefined
+     */
+    style?: HTMLAttributes['style'];
     /**
      * The component to use for the link - if not provided, it will be `router-link` if `to` is provided, will be `a` if `href` is provided, otherwise it will be `button`, you can force the component to be used with `as` prop
      * @default depends on the provided props

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

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'vue';
 import { MazColor } from './types';
 type __VLS_Props = MazPopoverProps;
-export type PopoverPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
-export type PopoverTrigger = 'click' | 'hover' | 'manual';
-export type PopoverRole = 'dialog' | 'tooltip' | 'menu';
+export type MazPopoverPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type MazPopoverTrigger = 'click' | 'hover' | 'manual' | 'adaptive';
+export type MazPopoverRole = 'dialog' | 'tooltip' | 'menu';
 export interface MazPopoverProps {
     /**
      * Controls the popover open state
@@ -18,35 +18,35 @@ export interface MazPopoverProps {
      * @default auto
      * @description Position of the popover relative to trigger
      */
-    position?: PopoverPosition;
+    position?: MazPopoverPosition;
     /**
      * Preferred position of the popover relative to trigger when auto position is used
      * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end
      * @default 'bottom-start'
      * @description Preferred position of the popover relative to trigger
      */
-    preferPosition?: PopoverPosition;
+    preferPosition?: MazPopoverPosition;
     /**
      * Fallback position of the popover relative to trigger when prefer position is not visible
      * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end
      * @default auto
      * @description Fallback position of the popover relative to trigger
      */
-    fallbackPosition?: PopoverPosition;
+    fallbackPosition?: MazPopoverPosition;
     /**
      * How the popover is triggered
-     * @values click, hover, manual
+     * @values click, hover, manual, adaptive
      * @default click
-     * @description How the popover is triggered
+     * @description How the popover is triggered. 'adaptive' uses hover on desktop and click on mobile
      */
-    trigger?: PopoverTrigger;
+    trigger?: MazPopoverTrigger;
     /**
      * ARIA role for accessibility
      * @values dialog, tooltip
      * @default dialog
      * @description ARIA role for accessibility
      */
-    role?: PopoverRole;
+    role?: MazPopoverRole;
     /**
      * ARIA label for the popover
      * @default undefined
@@ -155,11 +155,14 @@ export interface MazPopoverProps {
      */
     block?: boolean;
     /**
-     * Delay before setting the position in milliseconds
-     * @description Useful when the popover content is not immediately visible or rendered
-     * @default 50
+     * CSS selector or element reference to use for positioning calculations
+     * @description When provided, the popover will position relative to this element instead of the trigger
+     * Useful for components with labels where you want to position relative to the actual input
+     * @type {string | HTMLElement}
+     * @default undefined
+     * @example "input" or "#my-input" or HTMLElement
      */
-    positionDelay?: number;
+    positionReference?: string | HTMLElement;
 }
 declare function updatePosition(): void;
 declare function open(): void;
@@ -212,7 +215,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     toggle: typeof toggle;
     /**
      * Check if the popover is open
-     * @type {Ref<boolean>}
+     * @type {ComputedRef<boolean>}
      * @description Reactive reference to the popover open state
      * @usage `const isPopoverOpen = mazPopoverInstance.value?.isOpen`
      */

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

@@ -11,7 +11,7 @@ export interface MazSelectOptionWithOptGroup {
     options: (MazSelectNormalizedOption | string | number | boolean)[];
 }
 export type MazSelectOption = MazSelectNormalizedOption | string | number | boolean | MazSelectOptionWithOptGroup;
-export interface MazSelectProps<Value extends MazInputValue, Option extends MazSelectOption, Multiple extends boolean> {
+export interface MazSelectProps<Value extends MazInputValue = MazInputValue, Option extends MazSelectOption = MazSelectOption, Multiple extends boolean = false> {
     /**
      * Style attribut of the component root element
      * @type {HTMLAttributes['style']}

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

@@ -1,12 +1,15 @@
 import { MazTranslationsNestedSchema } from '@maz-ui/translations/src/types.js';
 import { HTMLAttributes } from 'vue';
-import { PopoverPosition } from './MazPopover.vue';
+import { MazPopoverPosition } 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;
+} = {
+    name: string;
+    code: string;
 }> extends Omit<MazSelectProps<Option['code'], Option, false>, 'options' | 'multiple'> {
     /**
      * Style attribut of the component root element
@@ -54,7 +57,7 @@ export interface MazSelectCountryProps<Option extends {
      * @type {PopoverPosition}
      * @default bottom-start
      */
-    listPosition?: PopoverPosition;
+    listPosition?: MazPopoverPosition;
     /**
      * Hide flags
      */
@@ -89,7 +92,7 @@ export interface MazSelectCountryProps<Option extends {
      */
     warning?: boolean;
     /**
-     * Country selector display name
+     *
      */
     displayCode?: boolean;
     /**
@@ -124,6 +127,12 @@ export interface MazSelectCountryProps<Option extends {
      * @values 'iso' | 'bcp' | 'country' | 'all'
      */
     codesType?: CodesType;
+    /**
+     * Open the select
+     * @type {boolean}
+     * @default false
+     */
+    open?: boolean;
 }
 declare const _default: <Option extends {
     name: string;

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

@@ -33,13 +33,24 @@ export interface MazStepperProps {
     /** Allow to close the steps */
     canCloseSteps?: boolean;
 }
-declare function __VLS_template(): any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    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: {};
+    rootEl: HTMLDivElement;
+};
 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;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -244,10 +244,71 @@ declare const _default: <T extends MazTableRow<T>>(__VLS_props: NonNullable<Awai
         readonly "onUpdate:search-query"?: ((searchQuery: string | undefined) => any) | undefined;
         readonly "onUpdate:page"?: ((page: number) => any) | undefined;
         readonly "onUpdate:page-size"?: ((pageSize: number) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value" | "onUpdate:search-query" | "onUpdate:page" | "onUpdate:page-size"> & MazTableProps<T> & any> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value" | "onUpdate:search-query" | "onUpdate:page" | "onUpdate:page-size"> & MazTableProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: any;
+    slots: Partial<Record<`header-label-${string}`, (_: {
+        header: {
+            label: string;
+            key?: string | undefined;
+            sortable?: boolean | undefined;
+            hidden?: boolean | undefined;
+            srOnly?: boolean | undefined;
+            width?: string | undefined;
+            maxWidth?: string | undefined;
+            classes?: ThHTMLAttributes["class"];
+            scope?: string | undefined;
+            align?: "justify" | "center" | "left" | "right" | "char" | undefined;
+            rowspan?: (string | number) | undefined;
+            colspan?: (string | number) | undefined;
+            headers?: string | undefined;
+            thHeaders?: string | undefined;
+            sorted?: "ASC" | "DESC" | undefined;
+        };
+        label: string;
+    }) => any>> & Partial<Record<`cell-${string}`, (_: {
+        row: T;
+        value: any;
+    }) => any>> & {
+        title?(_: {}): any;
+        caption?(_: {}): any;
+        thead?(_: {}): any;
+        header?(_: {
+            header: {
+                label: string;
+                key?: string | undefined;
+                sortable?: boolean | undefined;
+                hidden?: boolean | undefined;
+                srOnly?: boolean | undefined;
+                width?: string | undefined;
+                maxWidth?: string | undefined;
+                classes?: ThHTMLAttributes["class"];
+                scope?: string | undefined;
+                align?: "justify" | "center" | "left" | "right" | "char" | undefined;
+                rowspan?: (string | number) | undefined;
+                colspan?: (string | number) | undefined;
+                headers?: string | undefined;
+                thHeaders?: string | undefined;
+                sorted?: "ASC" | "DESC" | undefined;
+            };
+            label: string;
+        }): any;
+        'actions-header'?(_: {}): any;
+        default?(_: {}): any;
+        select?(_: {
+            row: T;
+            selected: boolean | undefined;
+        }): any;
+        cell?(_: {
+            row: T;
+            value: any;
+        }): any;
+        actions?(_: {
+            row: T;
+        }): any;
+        'no-results'?(_: {}): any;
+        'no-results-text'?(_: {}): any;
+    };
     emit: {
         (event: "update:model-value", value: (MazTableRow<T> | string | number | boolean)[] | undefined): void;
         (event: "update:search-query", searchQuery: string | undefined): void;

package/dist/types/components/index.d.ts

@@ -34,12 +34,12 @@ export { default as MazDatePicker } from './MazDatePicker.vue';
 export type { MazDatePickerPartialRangeValue, MazDatePickerProps, MazDatePickerRangeValue, MazDatePickerShortcut, MazDatePickerValue } from './MazDatePicker.vue';
 export { default as MazDialog } from './MazDialog.vue';
 export type { MazDialogProps } from './MazDialog.vue';
-export { default as MazDialogPromise, useMazDialogPromise } from './MazDialogPromise.vue';
-export type { MazDialogPromiseButton, MazDialogPromiseData, MazDialogPromiseProps } from './MazDialogPromise.vue';
+export { default as MazDialogConfirm, useMazDialogConfirm } from './MazDialogConfirm.vue';
+export type { MazDialogConfirmButton, MazDialogConfirmData, MazDialogConfirmProps } from './MazDialogConfirm.vue';
 export { default as MazDrawer } from './MazDrawer.vue';
 export type { MazDrawerProps } from './MazDrawer.vue';
 export { default as MazDropdown } from './MazDropdown.vue';
-export type { MazDropdownProps } from './MazDropdown.vue';
+export type { MazDropdownMenuItem, MazDropdownProps } from './MazDropdown.vue';
 export { default as MazDropzone } from './MazDropzone.vue';
 export type { MazDropzoneErrorCode, MazDropzoneFileData, MazDropzoneProps } from './MazDropzone.vue';
 export { default as MazExpandAnimation } from './MazExpandAnimation.vue';
@@ -71,7 +71,7 @@ export type { MazLoadingBarProps } from './MazLoadingBar.vue';
 export { default as MazPagination } from './MazPagination.vue';
 export type { MazPaginationProps } from './MazPagination.vue';
 export { default as MazPopover } from './MazPopover.vue';
-export type { PopoverPosition as MazPopoverPosition, MazPopoverProps, PopoverRole as MazPopoverRole, PopoverTrigger as MazPopoverTrigger } from './MazPopover.vue';
+export type { MazPopoverPosition, MazPopoverProps, MazPopoverRole, MazPopoverTrigger } from './MazPopover.vue';
 export { default as MazPullToRefresh } from './MazPullToRefresh.vue';
 export type { MazPullToRefreshProps } from './MazPullToRefresh.vue';
 export { default as MazRadio } from './MazRadio.vue';

package/dist/types/composables/index.d.ts

@@ -4,7 +4,7 @@ export * from './useDialog';
 export * from './useDisplayNames';
 export * from './useFormField';
 export * from './useFormValidator';
-export * from './useFormValidator/types';
+export type { FieldsStates, FieldState, FormFieldOptions, FormSchema, FormValidatorOptions, InferOutputSchemaFormValidator, InferSchemaFormValidator } from './useFormValidator/types';
 export * from './useFreezeValue';
 export * from './useIdleTimeout';
 export * from './useInjectStrict';

package/dist/types/composables/useDisplayNames.d.ts

@@ -34,8 +34,8 @@ type GetAllDisplayNamesOptions<T extends CodesType> = MaybeRefOrGetter<{
 } & DynamicDisplayNamesOptions>;
 type CodeResult<T extends CodesType> = T extends 'iso' ? Iso6391Code : T extends 'bcp' ? Bcp47Code : T extends 'country' ? CountryCode : DisplayNameCode | string;
 export declare function useDisplayNames(mainLocale?: MaybeRefOrGetter<string | DisplayNameCode>): {
-    getDisplayName: (code: Parameters<typeof getDisplayName>[0], options: GetDisplayNameOptions) => import('vue').ComputedRef<string | undefined>;
-    getAllDisplayNames: <T extends CodesType>(options: GetAllDisplayNamesOptions<T>) => import('vue').ComputedRef<{
+    getDisplayName: (code: Parameters<typeof getDisplayName>[0], options?: GetDisplayNameOptions) => import('vue').ComputedRef<string | undefined>;
+    getAllDisplayNames: <T extends CodesType>(options?: GetAllDisplayNamesOptions<T>) => import('vue').ComputedRef<{
         name: string;
         code: CodeResult<T>;
     }[] | undefined>;

package/dist/types/composables/useDropzone.d.ts

@@ -1,10 +1,10 @@
 import { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
-export interface UseDropZoneReturn {
+export interface UseDropzoneReturn {
     files: Ref<File[] | null>;
     isOverDropZone: Ref<boolean>;
     isOverError: Ref<boolean>;
 }
-export interface UseDropZoneOptions {
+export interface UseDropzoneOptions {
     /**
      * Allowed data types, if not set, all data types are allowed.
      * Also can be a function to check the data types.
@@ -24,4 +24,4 @@ export interface UseDropZoneOptions {
      */
     preventDefaultForUnhandled?: boolean;
 }
-export declare function useDropZone(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options?: UseDropZoneOptions | UseDropZoneOptions['onDrop']): UseDropZoneReturn;
+export declare function useDropzone(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options?: UseDropzoneOptions | UseDropzoneOptions['onDrop']): UseDropzoneReturn;

package/dist/types/composables/useFormField.d.ts

@@ -1,56 +1,18 @@
-import { ComputedRef, WritableComputedRef } from 'vue';
-import { BaseFormPayload, ExtractModelKey, FormFieldOptions, FormSchema, ValidationIssues } from '../composables/useFormValidator/types';
-import { getValidationEvents } from '../composables/useFormValidator/utils';
+import { BaseFormPayload, ExtractModelKey, FormFieldOptions, FormSchema, ValidationIssues } from './useFormValidator/types';
+import { ComputedRef, Ref } from 'vue';
+import { getValidationEvents } from './useFormValidator/dom-events';
 interface UseFormFieldReturn<FieldType> {
-    /**
-     * Indicates if the field has an error
-     */
     hasError: ComputedRef<boolean>;
-    /**
-     * Errors of the field
-     */
     errors: ComputedRef<ValidationIssues>;
-    /**
-     * Error message of the field
-     * It's the first error of the field
-     */
     errorMessage: ComputedRef<string | undefined>;
-    /**
-     * Indicates if the field is valid
-     */
     isValid: ComputedRef<boolean>;
-    /**
-     * Indicates if the field has been modified
-     */
     isDirty: ComputedRef<boolean>;
-    /**
-     * Indicates if the field has been blurred
-     */
     isBlurred: ComputedRef<boolean>;
-    /**
-     * Indicates if the field has been validated
-     */
     isValidated: ComputedRef<boolean>;
-    /**
-     * Indicates if the field is validating
-     */
     isValidating: ComputedRef<boolean>;
-    /**
-     * Validation mode of the field
-     */
     mode: ComputedRef<FormFieldOptions<FieldType>['mode']>;
-    /**
-     * Value of the field
-     */
-    value: WritableComputedRef<FieldType>;
-    /**
-     * Validation events of the field
-     */
+    value: Ref<FieldType>;
     validationEvents: ComputedRef<ReturnType<typeof getValidationEvents>>;
-    /**
-     * Function to handle the blur event of the field
-     */
-    onBlur: () => void;
 }
-export declare function useFormField<FieldType extends Model[ExtractModelKey<FormSchema<Model>>], Model extends BaseFormPayload = BaseFormPayload>(name: ExtractModelKey<FormSchema<Model>>, options?: FormFieldOptions<FieldType>): UseFormFieldReturn<FieldType>;
+export declare function useFormField<FieldType, Model extends BaseFormPayload = BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(name: ModelKey, options?: FormFieldOptions<FieldType>): UseFormFieldReturn<FieldType>;
 export {};

package/dist/types/composables/useFormValidator/dom-events.d.ts

@@ -0,0 +1,19 @@
+import { BaseFormPayload, FieldState, StrictOptions } from './types';
+export declare function scrollToError(selector?: string): void;
+export declare function findInteractiveElements(el: HTMLElement): HTMLElement[];
+export declare function addEventToInteractiveElements({ interactiveElements, onBlur, mode, }: {
+    interactiveElements: HTMLElement[];
+    onBlur: () => void;
+    mode: StrictOptions['mode'];
+}): void;
+export declare function removeEventFromInteractiveElements({ interactiveElements, onBlur, }: {
+    interactiveElements: HTMLElement[];
+    onBlur: () => void;
+}): void;
+export declare function getValidationEvents<Model extends BaseFormPayload>({ hasRef, fieldState, onBlur, }: {
+    hasRef?: boolean;
+    fieldState: FieldState<Model>;
+    onBlur: () => void;
+}): {
+    onBlur: () => void;
+} | undefined;

package/dist/types/composables/useFormValidator/state-management.d.ts

@@ -0,0 +1,54 @@
+import { InjectionKey } from 'vue';
+import { BaseFormPayload, CustomInstance, ExtractModelKey, FieldsStates, FieldState, FormContext, FormFieldOptions, FormSchema, StrictOptions } from './types';
+export declare function getFieldState<Model extends BaseFormPayload = BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, schema, initialValue, fieldState, options, }: {
+    name: ModelKey;
+    schema?: FormSchema<Model>;
+    initialValue?: Model[ModelKey];
+    fieldState: FieldState<Model>;
+    options?: Pick<StrictOptions<Model>, 'debouncedFields' | 'throttledFields' | 'mode'>;
+}): FieldState<Model>;
+export declare function fieldHasValidation<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>>(field: ModelKey, schema: FormSchema<Model>): boolean;
+export declare function getFieldsStates<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ schema, payload, options, }: {
+    schema: FormSchema<Model>;
+    payload: Partial<Model>;
+    options: StrictOptions<Model>;
+}): FieldsStates<Model>;
+export declare function updateFieldsStates<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ fieldsStates, payload, schema, options, updateMode, }: {
+    fieldsStates: FieldsStates<Model>;
+    payload: Model;
+    schema: FormSchema<Model>;
+    options: StrictOptions<Model>;
+    updateMode?: boolean;
+}): void;
+export declare function updateFieldState<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, fieldState, payload, schema, options, updateMode, }: {
+    name: ModelKey;
+    fieldState: FieldState<Model>;
+    payload: Model;
+    schema: FormSchema<Model>;
+    options: FormFieldOptions<Model[ModelKey]> & StrictOptions<Model>;
+    updateMode?: boolean;
+}): FieldState<Model>;
+export declare function canExecuteValidation<Model extends BaseFormPayload>({ eventName, fieldState, isSubmitted, }: {
+    eventName: 'blur' | 'input';
+    fieldState: FieldState<Model>;
+    isSubmitted: boolean;
+}): boolean;
+export declare function handleFieldBlur<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, force, payload, fieldState, schema, isSubmitted, }: {
+    name: ModelKey;
+    payload: Model;
+    fieldState: FieldState<Model>;
+    schema: FormSchema<Model>;
+    isSubmitted: boolean;
+    force?: boolean;
+}): Promise<void> | undefined;
+export declare function handleFieldInput<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, payload, fieldState, schema, isSubmitted, forceValidation, }: {
+    name: ModelKey;
+    payload: Model;
+    fieldState: FieldState<Model>;
+    schema: FormSchema<Model>;
+    isSubmitted: boolean;
+    forceValidation?: boolean;
+}): Promise<void> | undefined;
+export declare function hasModeIncludes(modes: StrictOptions['mode'][], value?: StrictOptions['mode']): value is StrictOptions['mode'];
+export declare function getInstance<Model extends BaseFormPayload>(composableName: string): CustomInstance<Model>;
+export declare function getContext<Model extends BaseFormPayload>(identifier: string | symbol | InjectionKey<FormContext<Model>>, composableName: string): FormContext<Model, Extract<keyof { [K in Extract<keyof Model, string> as Model[K] extends Required<Model>[K] ? K : never]: import('./types').Validation; }, string> | Extract<keyof { [K_1 in Extract<keyof Model, string> as Model[K_1] extends Required<Model>[K_1] ? never : K_1]?: import('./types').Validation | undefined; }, string>>;

package/dist/types/composables/useFormValidator/types.d.ts

@@ -1,15 +1,10 @@
-import { DeepPartial } from '@maz-ui/utils/src/ts-helpers/DeepPartial.js';
-import { BaseIssue, BaseSchema, BaseSchemaAsync, InferIssue, InferOutput, objectAsync } from 'valibot';
-import { ComponentInternalInstance, ComponentPublicInstance, InjectionKey, MaybeRef, Ref } from 'vue';
-import { useFormField } from './../useFormField';
-import { useFormValidator } from './../useFormValidator';
-import { getValidateFunction } from './utils';
-export type ValidationSync = BaseSchema<unknown, unknown, BaseIssue<unknown>>;
-export type ValidationAsync = ValidationSync | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>;
-export type Validation = ValidationAsync;
+import { BaseIssue, BaseSchema, BaseSchemaAsync, InferInput, InferIssue, InferOutput, objectAsync } from 'valibot';
+import { ComponentInternalInstance, InjectionKey, Ref, TemplateRef } from 'vue';
+import { getValidateFunction } from './validation';
+export type Validation = BaseSchema<unknown, unknown, BaseIssue<unknown>> | BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>;
 export type ValidationIssues = InferIssue<Validation>[];
 export type ExtractModelKey<T> = Extract<keyof T, string>;
-export type FormSchema<Model> = {
+export type FormSchema<Model = BaseFormPayload> = {
     [K in Extract<keyof Model, string> as Model[K] extends Required<Model>[K] ? K : never]: Validation;
 } & {
     [K in Extract<keyof Model, string> as Model[K] extends Required<Model>[K] ? never : K]?: Validation;
@@ -91,7 +86,7 @@ export interface FormFieldOptions<FieldType> {
      * Reference to the component or HTML element to associate and trigger validation events
      * Necessary for 'eager', 'progressive' and 'blur' validation modes
      */
-    ref?: Ref<HTMLElement | ComponentPublicInstance | undefined>;
+    ref?: Ref | TemplateRef;
     /**
      * Identifier for the form
      * Useful when you have multiple forms on the same component
@@ -99,12 +94,5 @@ export interface FormFieldOptions<FieldType> {
      */
     formIdentifier?: string | symbol;
 }
-export type UseFormValidator<Model extends BaseFormPayload = BaseFormPayload> = typeof useFormValidator<Model>;
-export interface UseFormValidatorParams<Model extends BaseFormPayload> {
-    schema: MaybeRef<FormSchema<Model>>;
-    defaultValues?: MaybeRef<DeepPartial<Model> | undefined | null>;
-    model?: Ref<DeepPartial<Model> | undefined | null>;
-    options?: FormValidatorOptions<Model>;
-}
-export type UseFormField<FieldType extends Model[ExtractModelKey<FormSchema<Model>>], Model extends BaseFormPayload = BaseFormPayload> = typeof useFormField<FieldType, Model>;
-export type InferSchemaFormValidator<T> = T extends Ref<infer U> ? U extends Record<string, Validation> ? InferOutput<ReturnType<typeof objectAsync<U>>> : never : T extends Record<string, Validation> ? InferOutput<ReturnType<typeof objectAsync<T>>> : never;
+export type InferSchemaFormValidator<T> = T extends Ref<infer U> ? U extends FormSchema<BaseFormPayload> ? Partial<InferInput<ReturnType<typeof objectAsync<U>>>> : never : T extends (...args: any[]) => FormSchema<BaseFormPayload> ? Partial<InferInput<ReturnType<typeof objectAsync<ReturnType<T>>>>> : T extends FormSchema<BaseFormPayload> ? Partial<InferInput<ReturnType<typeof objectAsync<T>>>> : never;
+export type InferOutputSchemaFormValidator<T> = T extends Ref<infer U> ? U extends FormSchema<BaseFormPayload> ? InferOutput<ReturnType<typeof objectAsync<U>>> : never : T extends (...args: any[]) => FormSchema<BaseFormPayload> ? InferOutput<ReturnType<typeof objectAsync<ReturnType<T>>>> : T extends FormSchema<BaseFormPayload> ? InferOutput<ReturnType<typeof objectAsync<T>>> : never;

package/dist/types/composables/useFormValidator/validation.d.ts

@@ -0,0 +1,43 @@
+import { BaseFormPayload, ExtractModelKey, FieldsStates, FieldState, FormSchema, StrictOptions, ValidationIssues } from './types';
+export declare function isEmptyValue(value: unknown): value is null | undefined | '';
+export declare function getValibotValidationMethod<MethodName extends keyof typeof import('valibot')>(methodName: MethodName): Promise<(typeof import('valibot'))[MethodName]>;
+export declare function getValidationSchema<Model extends BaseFormPayload>(formSchema: FormSchema<Model>): Promise<import('valibot').ObjectSchemaAsync<FormSchema<Model>, undefined>>;
+export declare function getFieldValidationResult<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(name: ModelKey, schema: FormSchema<Model>, value: Model[ModelKey]): Promise<{
+    result: import('valibot').SafeParseResult<FormSchema<Model>[ModelKey]>;
+    isValid: boolean;
+}>;
+export declare function setFieldValidationState<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, fieldState, schema, payload, setError, setErrorIfInvalidAndNotEmpty, }: {
+    name: ModelKey;
+    fieldState: FieldState<Model>;
+    schema: FormSchema<Model>;
+    payload: Model;
+    setError?: boolean;
+    setErrorIfInvalidAndNotEmpty?: boolean;
+}): Promise<void>;
+export declare function validateField<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, fieldState, payload, schema, }: {
+    name: ModelKey;
+    fieldState: FieldState<Model>;
+    payload: Model;
+    schema: FormSchema<Model>;
+}): Promise<void> | undefined;
+export declare function validateForm<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ fieldsStates, payload, setErrors, schema, }: {
+    fieldsStates: FieldsStates<Model>;
+    setErrors?: boolean;
+    payload: Model;
+    schema: FormSchema<Model>;
+}): Promise<void[]>;
+export declare function getErrorMessages<Model extends BaseFormPayload = BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(errors: Record<ModelKey, ValidationIssues>, fieldsStates: FieldsStates<Model>): Record<ModelKey, string | undefined>;
+export declare function getFieldsErrors<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(fieldsStates: FieldsStates<Model>): Record<ModelKey, ValidationIssues>;
+export declare function getValidateFunction<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ name, hasValidation, debouncedFields, throttledFields, }: {
+    name: ModelKey;
+    hasValidation: boolean;
+    debouncedFields?: StrictOptions<Model>['debouncedFields'];
+    throttledFields?: StrictOptions<Model>['throttledFields'];
+}): ((args_0: {
+    name: ExtractModelKey<FormSchema<Model>>;
+    fieldState: FieldState<Model, Model[Extract<keyof { [K in Extract<keyof Model, string> as Model[K] extends Required<Model>[K] ? K : never]: import('./types').Validation; }, string> | Extract<keyof { [K_1 in Extract<keyof Model, string> as Model[K_1] extends Required<Model>[K_1] ? never : K_1]?: import('./types').Validation | undefined; }, string>]>;
+    schema: FormSchema<Model>;
+    payload: Model;
+    setError?: boolean;
+    setErrorIfInvalidAndNotEmpty?: boolean;
+}) => Promise<void>) | undefined;

package/dist/types/composables/useFormValidator.d.ts

@@ -1,17 +1,23 @@
-import { Ref } from 'vue';
-import { BaseFormPayload, ExtractModelKey, FieldsStates, FormSchema, FormValidatorOptions, UseFormValidatorParams } from '../composables/useFormValidator/types';
-import { scrollToError } from '../composables/useFormValidator/utils';
-export declare function useFormValidator<Model extends BaseFormPayload>({ schema, defaultValues, model, options }: UseFormValidatorParams<Model>): {
+import { DeepPartial } from '@maz-ui/utils/src/ts-helpers/DeepPartial.js';
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { BaseFormPayload, ExtractModelKey, FieldsStates, FormSchema, FormValidatorOptions, InferOutputSchemaFormValidator, InferSchemaFormValidator } from './useFormValidator/types';
+import { scrollToError } from './useFormValidator/dom-events';
+export declare function useFormValidator<TSchema extends MaybeRefOrGetter<FormSchema<BaseFormPayload>>>({ schema, defaultValues, model, options }: {
+    schema: TSchema;
+    defaultValues?: MaybeRefOrGetter<DeepPartial<InferSchemaFormValidator<TSchema>> | undefined | null>;
+    model?: Ref<DeepPartial<InferSchemaFormValidator<TSchema>> | undefined | null>;
+    options?: FormValidatorOptions<InferSchemaFormValidator<TSchema>>;
+}): {
     identifier: string | symbol;
     isDirty: import('vue').ComputedRef<boolean>;
     isSubmitting: Ref<boolean, boolean>;
     isSubmitted: Ref<boolean, boolean>;
     isValid: import('vue').ComputedRef<boolean>;
-    errors: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<Model>>, import('.').ValidationIssues>>;
-    model: Ref<Model, Model>;
-    fieldsStates: Ref<FieldsStates<Model>, FieldsStates<Model>>;
-    validateForm: (showErrors?: boolean) => Promise<void[]>;
+    errors: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, import('./useFormValidator/types').ValidationIssues>>;
+    model: Ref<InferSchemaFormValidator<TSchema>, InferSchemaFormValidator<TSchema>>;
+    fieldsStates: Ref<FieldsStates<InferSchemaFormValidator<TSchema>>, FieldsStates<InferSchemaFormValidator<TSchema>>>;
+    validateForm: (setErrors?: boolean) => Promise<void[]>;
     scrollToError: typeof scrollToError;
-    handleSubmit: <Func extends (model: Model) => Promise<Awaited<ReturnType<Func>>> | ReturnType<Func>>(successCallback: Func, enableScrollOrSelector?: FormValidatorOptions["scrollToError"]) => (event?: Event) => Promise<ReturnType<Func> | undefined>;
-    errorMessages: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<Model>>, string | undefined>>;
+    handleSubmit: <Func extends (model: InferOutputSchemaFormValidator<TSchema>) => Promise<Awaited<ReturnType<Func>>> | ReturnType<Func>>(successCallback: Func, enableScrollOrSelector?: FormValidatorOptions["scrollToError"]) => (event?: Event) => Promise<ReturnType<Func> | undefined>;
+    errorMessages: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, string | undefined>>;
 };

package/dist/types/composables/useIdleTimeout.d.ts

@@ -1,4 +1,4 @@
-import { IdleTimeoutCallback, IdleTimeoutOptions, IdleTimeout } from '@maz-ui/utils/src/utils/idleTimeout.js';
+import { IdleTimeoutCallback, IdleTimeoutOptions, IdleTimeout } from '@maz-ui/utils/src/helpers/idleTimeout.js';
 export declare function useIdleTimeout({ callback, options, }: {
     callback: IdleTimeoutCallback;
     options?: IdleTimeoutOptions;