maz-ui 4.0.0-beta.31 → 4.0.0-beta.35

package/dist/composables/useFormField.d.ts

@@ -0,0 +1,16 @@
+import { BaseFormPayload, ExtractModelKey, FormFieldOptions, FormSchema } from './useFormValidator/types';
+export declare function useFormField<FieldType, Model extends BaseFormPayload = BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(name: ModelKey, options?: FormFieldOptions<Model, ModelKey, FieldType>): {
+    hasError: import('vue').ComputedRef<boolean>;
+    errors: import('vue').ComputedRef<import('./useFormValidator/types').ValidationIssues>;
+    errorMessage: import('vue').ComputedRef<Record<ModelKey, string | undefined>[ModelKey]>;
+    isValid: import('vue').ComputedRef<boolean>;
+    isDirty: import('vue').ComputedRef<boolean>;
+    isBlurred: import('vue').ComputedRef<boolean>;
+    isValidated: import('vue').ComputedRef<boolean>;
+    isValidating: import('vue').ComputedRef<boolean>;
+    mode: import('vue').ComputedRef<"blur" | "eager" | "lazy" | "aggressive" | "progressive" | undefined>;
+    value: import('vue').WritableComputedRef<FieldType, FieldType>;
+    validationEvents: import('vue').ComputedRef<{
+        onBlur: () => void;
+    } | undefined>;
+};

package/dist/composables/useFormField.js

@@ -1,4 +1,4 @@
-import { e as getContext, f as fieldHasValidation, i as updateFieldState, j as isEqual, k as setFieldValidationState, l as getValidationEvents, h as hasModeIncludes, r as removeEventFromInteractiveElements, m as findInteractiveElements, n as addEventToInteractiveElements, o as handleFieldBlur } from "../chunks/dom-events.Bbe7wDQl.js";
+import { e as getContext, f as fieldHasValidation, i as updateFieldState, j as s, k as setFieldValidationState, l as getValidationEvents, h as hasModeIncludes, r as removeEventFromInteractiveElements, m as findInteractiveElements, n as addEventToInteractiveElements, o as handleFieldBlur } from "../chunks/dom-events.H9KIOv83.js";
 import { computed, onMounted, onUnmounted } from "vue";
 import { useFreezeValue } from "./useFreezeValue.js";
 function useFormField(name, options) {
@@ -21,7 +21,7 @@ function useFormField(name, options) {
     payload: payload.value,
     schema: internalSchema.value,
     options: { ...formOptions, ...finalOpts }
-  }), finalOpts.defaultValue !== void 0 && !isEqual(payload.value[name], finalOpts.defaultValue)) {
+  }), finalOpts.defaultValue !== void 0 && !s(payload.value[name], finalOpts.defaultValue)) {
     const initialValue = finalOpts.defaultValue;
     payload.value[name] = initialValue, fieldsStates.value[name].initialValue = useFreezeValue(initialValue);
   }

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

@@ -0,0 +1,7 @@
+import { BaseFormPayload, ExtractModelKey, FormSchema, StrictOptions } from './types';
+export declare const CONFIG: {
+    mode: StrictOptions<BaseFormPayload, ExtractModelKey<FormSchema<BaseFormPayload>>>['mode'];
+    scrollToErrorSelector: string;
+    debounceTime: number;
+    throttleTime: number;
+};

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

@@ -0,0 +1,19 @@
+import { BaseFormPayload, ExtractModelKey, FieldState, FormSchema, 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<BaseFormPayload, ExtractModelKey<FormSchema<BaseFormPayload>>>['mode'];
+}): void;
+export declare function removeEventFromInteractiveElements({ interactiveElements, onBlur, }: {
+    interactiveElements: HTMLElement[];
+    onBlur: () => void;
+}): void;
+export declare function getValidationEvents<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>, F extends FieldState<Model, ModelKey, Model[ModelKey]>>({ hasRef, fieldState, onBlur, }: {
+    hasRef?: boolean;
+    fieldState: F;
+    onBlur: () => void;
+}): {
+    onBlur: () => void;
+} | undefined;

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

@@ -0,0 +1,72 @@
+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>>, FieldType = Model[ModelKey]>({ name, schema, initialValue, fieldState, options, }: {
+    name: ModelKey;
+    schema?: FormSchema<Model>;
+    initialValue?: FieldType;
+    fieldState: FieldState<Model, ModelKey, FieldType>;
+    options?: Pick<StrictOptions<Model, ModelKey>, 'debouncedFields' | 'throttledFields' | 'mode'>;
+}): FieldState<Model, ModelKey, FieldType>;
+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, ModelKey>;
+}): FieldsStates<Model, ModelKey>;
+export declare function updateFieldsStates<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ fieldsStates, payload, schema, options, updateMode, }: {
+    fieldsStates: FieldsStates<Model, ModelKey>;
+    payload: Model;
+    schema: FormSchema<Model>;
+    options: StrictOptions<Model, ModelKey>;
+    updateMode?: boolean;
+}): void;
+export declare function updateFieldState<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>, FieldType = Model[ModelKey]>({ name, fieldState, payload, schema, options, updateMode, }: {
+    name: ModelKey;
+    fieldState: FieldState<Model, ModelKey, FieldType>;
+    payload: Model;
+    schema: FormSchema<Model>;
+    options: FormFieldOptions<Model, ModelKey, FieldType> & StrictOptions<Model, ModelKey>;
+    updateMode?: boolean;
+}): {
+    blurred: boolean;
+    dirty: boolean;
+    error: boolean;
+    errors: import('./types').ValidationIssues;
+    valid: boolean;
+    validating: boolean;
+    validated: boolean;
+    validateFunction: ((args_0: {
+        name: ModelKey;
+        fieldState: FieldState<Model, ModelKey, Model[ModelKey]>;
+        schema: FormSchema<Model>;
+        payload: Model;
+        setError?: boolean;
+        setErrorIfInvalidAndNotEmpty?: boolean;
+    }) => Promise<void>) | undefined;
+    initialValue: Readonly<FieldType> | undefined;
+    mode: "blur" | "eager" | "lazy" | "aggressive" | "progressive" | undefined;
+};
+export declare function canExecuteValidation<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>, FieldType = Model[ModelKey]>({ eventName, fieldState, isSubmitted, }: {
+    eventName: 'blur' | 'input';
+    fieldState: FieldState<Model, ModelKey, FieldType>;
+    isSubmitted: boolean;
+}): boolean;
+export declare function handleFieldBlur<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>, FieldType = Model[ModelKey]>({ name, force, payload, fieldState, schema, isSubmitted, }: {
+    name: ModelKey;
+    payload: Model;
+    fieldState: FieldState<Model, ModelKey, FieldType>;
+    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>>, FieldType = Model[ModelKey]>({ name, payload, fieldState, schema, isSubmitted, forceValidation, }: {
+    name: ModelKey;
+    payload: Model;
+    fieldState: FieldState<Model, ModelKey, FieldType>;
+    schema: FormSchema<Model>;
+    isSubmitted: boolean;
+    forceValidation?: boolean;
+}): Promise<void> | undefined;
+export declare function hasModeIncludes<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(modes: StrictOptions<Model, ModelKey>['mode'][], value?: StrictOptions<Model, ModelKey>['mode']): value is StrictOptions<Model, ModelKey>['mode'];
+export declare function getInstance<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(composableName: string): CustomInstance<Model, ModelKey>;
+export declare function getContext<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(identifier: string | symbol | InjectionKey<FormContext<Model, ModelKey>>, composableName: string): FormContext<Model, ModelKey>;

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

@@ -0,0 +1,98 @@
+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 extends 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;
+};
+export type CustomInstance<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>> = ComponentInternalInstance & {
+    formContexts?: Map<string | symbol | InjectionKey<FormContext<Model, ModelKey>>, FormContext<Model, ModelKey>>;
+};
+export interface FormValidatorOptions<Model extends BaseFormPayload = BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>> {
+    /**
+     * Validation mode
+     * - lazy: validate on input value change
+     * - aggressive: validate all fields immediately on form creation and on input value change
+     * - blur: validate on blur
+     * - eager: validate on blur at first (only if the field is not empty) and then on input value change
+     * - progressive: field becomes valid after the first validation and then validate on input value change. If invalid validate on blur.
+     * @default 'lazy'
+     */
+    mode?: 'eager' | 'lazy' | 'aggressive' | 'blur' | 'progressive';
+    /**
+     * Fields to validate with throttling
+     * Useful for fields that require a network request to avoid spamming the server
+     * @example { name: 1000 } or { name: true } for the default throttle time (1000ms)
+     */
+    throttledFields?: Partial<Record<ModelKey, number | true>> | null;
+    /**
+     * Fields to validate with debouncing
+     * Useful to wait for the user to finish typing before validating
+     * Useful for fields that require a network request to avoid spamming the server
+     * @example { name: 300 } or { name: true } for the default debounce time (300ms)
+     */
+    debouncedFields?: Partial<Record<ModelKey, number | true>> | null;
+    /**
+     * Scroll to the first error found
+     * @default '.has-field-error'
+     */
+    scrollToError?: string | false;
+    /**
+     * Identifier to use for the form
+     * Useful to have multiple forms on the same page
+     * @default `main-form-validator`
+     */
+    identifier?: string | symbol;
+}
+export type StrictOptions<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>> = Required<FormValidatorOptions<Model, ModelKey>>;
+export interface FormContext<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>> {
+    fieldsStates: Ref<FieldsStates<Model, ModelKey>>;
+    options: StrictOptions<Model, ModelKey>;
+    internalSchema: Ref<FormSchema<Model>>;
+    payload: Ref<Model>;
+    errorMessages: Ref<Record<ModelKey, string | undefined>>;
+    isSubmitted: Ref<boolean>;
+}
+export interface FieldState<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>, FieldType = Model[ModelKey]> {
+    blurred: boolean;
+    dirty: boolean;
+    error: boolean;
+    errors: ValidationIssues;
+    valid: boolean;
+    initialValue?: Readonly<FieldType>;
+    validating: boolean;
+    validated: boolean;
+    validateFunction: ReturnType<typeof getValidateFunction<Model, ModelKey>>;
+    mode?: StrictOptions<Model, ModelKey>['mode'];
+}
+export type FieldsStates<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>> = Record<ModelKey, FieldState<Model, ModelKey, Model[ModelKey]>>;
+export type BaseFormPayload = Record<string, any>;
+export interface FormFieldOptions<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>>, FieldType> {
+    /**
+     * Default value of the field
+     * @default undefined
+     */
+    defaultValue?: FieldType;
+    /**
+     * Validation mode
+     * To override the form validation mode
+     */
+    mode?: StrictOptions<Model, ModelKey>['mode'];
+    /**
+     * Reference to the component or HTML element to associate and trigger validation events
+     * Necessary for 'eager', 'progressive' and 'blur' validation modes
+     */
+    ref?: Ref | TemplateRef;
+    /**
+     * Identifier for the form
+     * Useful when you have multiple forms on the same component
+     * Should be the same as the one used in `useFormValidator`
+     */
+    formIdentifier?: string | symbol;
+}
+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/composables/useFormValidator/validation.d.ts

@@ -0,0 +1,37 @@
+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>>>(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>>>({ name, fieldState, schema, payload, setError, setErrorIfInvalidAndNotEmpty, }: {
+    name: ModelKey;
+    fieldState: FieldState<Model, ModelKey, Model[ModelKey]>;
+    schema: FormSchema<Model>;
+    payload: Model;
+    setError?: boolean;
+    setErrorIfInvalidAndNotEmpty?: boolean;
+}): Promise<void>;
+export declare function validateForm<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>({ fieldsStates, payload, setErrors, schema, }: {
+    fieldsStates: FieldsStates<Model, ExtractModelKey<FormSchema<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, ExtractModelKey<FormSchema<Model>>>): Record<ModelKey, string | undefined>;
+export declare function getFieldsErrors<Model extends BaseFormPayload, ModelKey extends ExtractModelKey<FormSchema<Model>> = ExtractModelKey<FormSchema<Model>>>(fieldsStates: FieldsStates<Model, ExtractModelKey<FormSchema<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, ModelKey>['debouncedFields'];
+    throttledFields?: StrictOptions<Model, ModelKey>['throttledFields'];
+}): ((args_0: {
+    name: ModelKey;
+    fieldState: FieldState<Model, ModelKey, Model[ModelKey]>;
+    schema: FormSchema<Model>;
+    payload: Model;
+    setError?: boolean;
+    setErrorIfInvalidAndNotEmpty?: boolean;
+}) => Promise<void>) | undefined;

package/dist/composables/useFormValidator.d.ts

@@ -0,0 +1,23 @@
+import { DeepPartial } from '@maz-ui/utils/ts-helpers/DeepPartial';
+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<InferSchemaFormValidator<TSchema>>>, import('./useFormValidator/types').ValidationIssues>>;
+    model: Ref<InferSchemaFormValidator<TSchema>, InferSchemaFormValidator<TSchema>>;
+    fieldsStates: Ref<FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>, FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>>;
+    validateForm: (setErrors?: boolean) => Promise<void[]>;
+    scrollToError: typeof scrollToError;
+    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/composables/useFormValidator.js

@@ -1,5 +1,5 @@
 import { ref, toValue, computed, watch, provide, nextTick } from "vue";
-import { g as getInstance, a as getFieldsStates, b as getFieldsErrors, c as getErrorMessages, u as updateFieldsStates, v as validateForm, C as CONFIG, s as scrollToError, h as hasModeIncludes, d as handleFieldInput } from "../chunks/dom-events.Bbe7wDQl.js";
+import { g as getInstance, a as getFieldsStates, b as getFieldsErrors, c as getErrorMessages, u as updateFieldsStates, v as validateForm, C as CONFIG, s as scrollToError, h as hasModeIncludes, d as handleFieldInput } from "../chunks/dom-events.H9KIOv83.js";
 function createValidationProcessor(fieldsToValidate, fieldsStates, payload, internalSchema, isSubmitted) {
   return () => {
     fieldsToValidate.forEach((name) => {

package/dist/composables/useFreezeValue.d.ts

@@ -0,0 +1,5 @@
+import { MaybeRef } from 'vue';
+/**
+ * Freeze a value to prevent it from being modified
+ */
+export declare function useFreezeValue<T>(value: MaybeRef<T>): Readonly<T>;

package/dist/composables/useIdleTimeout.d.ts

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

package/dist/composables/useIdleTimeout.js

@@ -1,10 +1,10 @@
-import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
-class IdleTimeout {
-  constructor(callback, options) {
-    this.callback = callback, this.options = {
+import { e } from "../chunks/isClient.8V3qjGdO.js";
+class l {
+  constructor(t, e$1) {
+    this.callback = t, this.options = {
       ...this.defaultOptions,
-      ...options
-    }, isClient() && this.start();
+      ...e$1
+    }, e() && this.start();
   }
   defaultOptions = {
     element: void 0,
@@ -38,17 +38,17 @@ class IdleTimeout {
     return this.options.element ?? document.body;
   }
   start() {
-    if (!isClient()) {
+    if (!e()) {
       console.warn("[IdleTimeout](start) you should run this method on client side");
       return;
     }
-    for (const eventName of this.eventNames)
-      this.element.addEventListener(eventName, this.handleEvent);
+    for (const t of this.eventNames)
+      this.element.addEventListener(t, this.handleEvent);
     this.resetTimeout(), this.options.immediate && this.callback({ isIdle: !1, instance: this });
   }
   pause() {
-    const remainingTime = this.startTime + this.options.timeout - Date.now();
-    remainingTime <= 0 || (this.remainingTime = remainingTime, this.timeoutHandler && (clearTimeout(this.timeoutHandler), this.timeoutHandler = void 0));
+    const t = this.startTime + this.options.timeout - Date.now();
+    t <= 0 || (this.remainingTime = t, this.timeoutHandler && (clearTimeout(this.timeoutHandler), this.timeoutHandler = void 0));
   }
   resume() {
     this.remainingTime <= 0 || (this.resetTimeout(), this.callback({ isIdle: this.isIdle, instance: this }), this.remainingTime = 0);
@@ -57,13 +57,13 @@ class IdleTimeout {
     this.isDestroy = !1, this.isIdle = !1, this.remainingTime = 0, this.resetTimeout(), this.callback({ isIdle: this.isIdle, instance: this });
   }
   destroy() {
-    if (!isClient()) {
+    if (!e()) {
       console.warn("[IdleTimeout](destroy) you should run this method on client side");
       return;
     }
     this.isDestroy = !0;
-    for (const eventName of this.eventNames)
-      this.element.removeEventListener(eventName, this.handleEvent);
+    for (const t of this.eventNames)
+      this.element.removeEventListener(t, this.handleEvent);
     this.timeoutHandler && clearTimeout(this.timeoutHandler);
   }
   resetTimeout() {
@@ -72,19 +72,19 @@ class IdleTimeout {
       this.remainingTime || this.options.timeout
     ), this.startTime = Date.now();
   }
-  handleEvent = (event) => {
+  handleEvent = (t) => {
     try {
       if (this.remainingTime > 0)
         return;
-      if (event.type === "mousemove") {
-        const { clientX, clientY } = event;
-        if (clientX === void 0 && clientY === void 0 || clientX === this.lastClientX && clientY === this.lastClientY)
+      if (t.type === "mousemove") {
+        const { clientX: e2, clientY: i } = t;
+        if (e2 === void 0 && i === void 0 || e2 === this.lastClientX && i === this.lastClientY)
           return;
-        this.lastClientX = clientX, this.lastClientY = clientY;
+        this.lastClientX = e2, this.lastClientY = i;
       }
-      this.resetTimeout(), this.callback({ isIdle: this.isIdle, eventType: event.type, instance: this });
-    } catch (error) {
-      throw new Error(`[IdleTimeout](handleEvent) ${error}`);
+      this.resetTimeout(), this.callback({ isIdle: this.isIdle, eventType: t.type, instance: this });
+    } catch (e2) {
+      throw new Error(`[IdleTimeout](handleEvent) ${e2}`);
     }
   };
   handleTimeout() {
@@ -96,21 +96,21 @@ class IdleTimeout {
   get timeout() {
     return this.options.timeout;
   }
-  set timeout(value) {
-    this.options.timeout = value;
+  set timeout(t) {
+    this.options.timeout = t;
   }
   get idle() {
     return this.isIdle;
   }
-  set idle(value) {
-    value ? this.handleTimeout() : this.reset(), this.callback({ isIdle: this.isIdle, instance: this });
+  set idle(t) {
+    t ? this.handleTimeout() : this.reset(), this.callback({ isIdle: this.isIdle, instance: this });
   }
 }
 function useIdleTimeout({
   callback,
   options
 }) {
-  return new IdleTimeout(callback, options);
+  return new l(callback, options);
 }
 export {
   useIdleTimeout

package/dist/composables/useInjectStrict.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey } from 'vue';
+export declare function useInjectStrict<T>(key: string | InjectionKey<T> | symbol, fallback?: T, errorMessage?: string): NonNullable<T>;

package/dist/composables/useInstanceUniqId.d.ts

@@ -0,0 +1,4 @@
+export declare function useInstanceUniqId({ componentName, providedId, }: {
+    componentName: string;
+    providedId?: string;
+}): import('vue').ComputedRef<string>;

package/dist/composables/useMountComponent.d.ts

@@ -0,0 +1,14 @@
+import { App, Component, VNodeProps, createVNode } from 'vue';
+export declare function useMountComponent<T extends Component | string, P = Record<string, unknown>>(component: T | string, options?: {
+    props?: P & VNodeProps;
+    children?: Parameters<typeof createVNode>[2];
+    app?: App;
+    element?: HTMLElement;
+    noRender?: boolean;
+}): {
+    vNode: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>;
+    destroy: () => void;
+    el: HTMLElement;
+};

package/dist/composables/useReadingTime.d.ts

@@ -0,0 +1,25 @@
+import { ComputedRef, Ref } from 'vue';
+export interface ReadingTimeOptions {
+    /** Content to calculate the reading time */
+    content?: string | Ref<string>;
+    /** Selector of the content to calculate the reading time */
+    contentSelector?: string | Ref<string>;
+    /** Ref of the content to calculate the reading time */
+    contentRef?: Ref<HTMLElement | undefined>;
+    /**
+     * Words per minute
+     * @default 150
+     */
+    velocity?: number | Ref<number>;
+}
+export interface ReadingTimeReturn {
+    /** Content to calculate the reading time */
+    content: ComputedRef<string | undefined | null>;
+    /** Number of words in the content */
+    wordCount: ComputedRef<number>;
+    /** Words per minute */
+    velocity: ComputedRef<number>;
+    /** Reading time in minutes */
+    duration: ComputedRef<number>;
+}
+export declare function useReadingTime(options: ReadingTimeOptions): ReadingTimeReturn;

package/dist/composables/useStringMatching.d.ts

@@ -0,0 +1,5 @@
+import { MaybeRefOrGetter } from 'vue';
+export declare function useStringMatching(string1: MaybeRefOrGetter<string>, string2: MaybeRefOrGetter<string>, threshold?: MaybeRefOrGetter<number>): {
+    isMatching: import('vue').ComputedRef<boolean>;
+    score: import('vue').ComputedRef<number>;
+};

package/dist/composables/useStringMatching.js

@@ -1,4 +1,4 @@
-import { u } from "../chunks/useStringMatching.BBezu-6J.js";
+import { u } from "../chunks/useStringMatching.DzSigyZ7.js";
 import "vue";
 export {
   u as useStringMatching

package/dist/composables/useSwipe.d.ts

@@ -0,0 +1,14 @@
+import { SwipeOptions } from '@maz-ui/utils/helpers/swipeHandler';
+import { MaybeRef } from 'vue';
+export declare function useSwipe(options: Omit<SwipeOptions, 'onValuesChanged' | 'element'> & {
+    element: MaybeRef<HTMLElement> | string | null | undefined;
+}): {
+    xDiff: import('vue').Ref<number | undefined, number | undefined>;
+    yDiff: import('vue').Ref<number | undefined, number | undefined>;
+    xStart: import('vue').Ref<number | undefined, number | undefined>;
+    xEnd: import('vue').Ref<number | undefined, number | undefined>;
+    yStart: import('vue').Ref<number | undefined, number | undefined>;
+    yEnd: import('vue').Ref<number | undefined, number | undefined>;
+    start: () => void;
+    stop: () => void;
+};

package/dist/composables/useSwipe.js

@@ -1,14 +1,14 @@
 import { ref, computed, toValue } from "vue";
-const defaultOptions = {
+const s = {
   preventDefaultOnTouchMove: !1,
   preventDefaultOnMouseWheel: !1,
   threshold: 50,
   immediate: !1,
   triggerOnEnd: !1
 };
-class Swipe {
-  constructor(inputOption) {
-    this.inputOption = inputOption, this.options = { ...defaultOptions, ...inputOption }, this.onToucheStartCallback = this.toucheStartHandler.bind(this), this.onToucheMoveCallback = this.handleTouchMove.bind(this), this.onToucheEndCallback = this.handleTouchEnd.bind(this), this.onMouseWheelCallback = this.handleMouseWheel.bind(this), this.start = this.startListening.bind(this), this.stop = this.stopListening.bind(this), this.options.element && this.setElement(this.options.element), this.options.immediate && this.start();
+class n {
+  constructor(t) {
+    this.inputOption = t, this.options = { ...s, ...t }, this.onToucheStartCallback = this.toucheStartHandler.bind(this), this.onToucheMoveCallback = this.handleTouchMove.bind(this), this.onToucheEndCallback = this.handleTouchEnd.bind(this), this.onMouseWheelCallback = this.handleMouseWheel.bind(this), this.start = this.startListening.bind(this), this.stop = this.stopListening.bind(this), this.options.element && this.setElement(this.options.element), this.options.immediate && this.start();
   }
   element;
   xStart;
@@ -30,28 +30,28 @@ class Swipe {
   stopListening() {
     this.element?.removeEventListener("touchstart", this.onToucheStartCallback), this.element?.removeEventListener("touchmove", this.onToucheMoveCallback), this.element?.removeEventListener("touchend", this.onToucheEndCallback), this.options.preventDefaultOnMouseWheel && this.element?.removeEventListener("mousewheel", this.onMouseWheelCallback);
   }
-  setElement(element) {
-    if (!element) {
+  setElement(t) {
+    if (!t) {
       console.error(
         "[maz-ui][SwipeHandler](setElement) Element should be provided. Its can be a string selector or an HTMLElement"
       );
       return;
     }
-    if (typeof element == "string") {
-      const foundElement = document.querySelector(element);
-      if (!(foundElement instanceof HTMLElement)) {
+    if (typeof t == "string") {
+      const e = document.querySelector(t);
+      if (!(e instanceof HTMLElement)) {
         console.error("[maz-ui][SwipeHandler](setElement) String selector for element is not found");
         return;
       }
-      this.element = foundElement;
+      this.element = e;
     } else
-      this.element = element;
+      this.element = t;
   }
-  handleMouseWheel(event) {
-    event.preventDefault();
+  handleMouseWheel(t) {
+    t.preventDefault();
   }
-  toucheStartHandler(event) {
-    this.xStart = event.touches[0].clientX, this.yStart = event.touches[0].clientY, this.emitValuesChanged();
+  toucheStartHandler(t) {
+    this.xStart = t.touches[0].clientX, this.yStart = t.touches[0].clientY, this.emitValuesChanged();
   }
   emitValuesChanged() {
     this.options.onValuesChanged?.({
@@ -63,21 +63,21 @@ class Swipe {
       yDiff: this.yDiff
     });
   }
-  handleTouchMove(event) {
-    this.options.preventDefaultOnTouchMove && event.cancelable && event.preventDefault(), this.xEnd = event.touches[0].clientX, this.yEnd = event.touches[0].clientY, !(!this.xStart || !this.yStart) && (this.xDiff = this.xStart - this.xEnd, this.yDiff = this.yStart - this.yEnd, this.emitValuesChanged(), this.options.triggerOnEnd || this.runCallbacks(event));
+  handleTouchMove(t) {
+    this.options.preventDefaultOnTouchMove && t.cancelable && t.preventDefault(), this.xEnd = t.touches[0].clientX, this.yEnd = t.touches[0].clientY, !(!this.xStart || !this.yStart) && (this.xDiff = this.xStart - this.xEnd, this.yDiff = this.yStart - this.yEnd, this.emitValuesChanged(), this.options.triggerOnEnd || this.runCallbacks(t));
   }
-  handleTouchEnd(event) {
-    this.runCallbacks(event), this.emitValuesChanged();
+  handleTouchEnd(t) {
+    this.runCallbacks(t), this.emitValuesChanged();
   }
-  runCallbacks(event) {
-    typeof this.xDiff != "number" || typeof this.yDiff != "number" || Math.abs(this.xDiff) < this.options.threshold && Math.abs(this.yDiff) < this.options.threshold || (Math.abs(this.xDiff) > Math.abs(this.yDiff) ? this.xDiff > 0 ? this.options.onLeft?.(event) : this.options.onRight?.(event) : this.yDiff > 0 ? this.options.onUp?.(event) : this.options.onDown?.(event), this.resetValues());
+  runCallbacks(t) {
+    typeof this.xDiff != "number" || typeof this.yDiff != "number" || Math.abs(this.xDiff) < this.options.threshold && Math.abs(this.yDiff) < this.options.threshold || (Math.abs(this.xDiff) > Math.abs(this.yDiff) ? this.xDiff > 0 ? this.options.onLeft?.(t) : this.options.onRight?.(t) : this.yDiff > 0 ? this.options.onUp?.(t) : this.options.onDown?.(t), this.resetValues());
   }
   resetValues() {
     this.xStart = void 0, this.yStart = void 0, this.xEnd = void 0, this.yEnd = void 0, this.xDiff = void 0, this.yDiff = void 0, this.emitValuesChanged();
   }
 }
 function useSwipe(options) {
-  const xDiff = ref(), yDiff = ref(), xStart = ref(), xEnd = ref(), yStart = ref(), yEnd = ref(), element = computed(() => toValue(options.element)), swiper = new Swipe({
+  const xDiff = ref(), yDiff = ref(), xStart = ref(), xEnd = ref(), yStart = ref(), yEnd = ref(), element = computed(() => toValue(options.element)), swiper = new n({
     ...options,
     element: element.value,
     onValuesChanged(values) {

package/dist/composables/useTimer.d.ts

@@ -0,0 +1,30 @@
+export interface TimerOptions {
+    /**
+     * The time in milliseconds
+     * @default 1000
+     */
+    timeout?: number;
+    /**
+     * The callback to execute when the timer is finished
+     * @default undefined
+     */
+    callback?: () => unknown;
+    /**
+     * The interval to update the remaining time
+     * @default 200
+     */
+    remainingTimeUpdate?: number;
+    /**
+     * The offset time to execute the callback
+     * @default 0
+     */
+    callbackOffsetTime?: number;
+}
+export declare function useTimer({ timeout, callback, remainingTimeUpdate, callbackOffsetTime }: TimerOptions): {
+    remainingTime: import('vue').Ref<number, number>;
+    start: (timeout?: number) => void;
+    pause: () => void;
+    resume: () => void;
+    stop: () => void;
+    reset: () => void;
+};