maz-ui/dist/composables/useFormValidator.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

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.CfOiauCR.js";
function createValidationProcessor(fieldsToValidate, fieldsStates, payload, internalSchema, isSubmitted) {
  return () => {
    fieldsToValidate.forEach((name) => {
      const fieldState = fieldsStates.value[name];
      handleFieldInput({
        name,
        fieldState,
        payload: payload.value,
        schema: internalSchema.value,
        isSubmitted: isSubmitted.value,
        forceValidation: !0
      });
    });
  };
}
function useFormValidator({ schema, defaultValues, model, options }) {
  const instance = getInstance("useFormValidator"), opts = {
    mode: CONFIG.mode,
    scrollToError: CONFIG.scrollToErrorSelector,
    debouncedFields: null,
    throttledFields: null,
    identifier: "main-form-validator",
    ...options
  }, internalDefaultValues = ref(toValue(defaultValues)), payload = ref({ ...internalDefaultValues.value, ...model?.value }), internalSchema = ref(toValue(schema)), fieldsStates = ref(
    getFieldsStates({
      schema: internalSchema.value,
      payload: payload.value,
      options: opts
    })
  ), isSubmitting = ref(!1), isSubmitted = ref(!1), isValid = computed(() => {
    for (const key in fieldsStates.value)
      if (!fieldsStates.value[key].valid)
        return !1;
    return !0;
  }), isDirty = computed(() => {
    for (const key in fieldsStates.value)
      if (fieldsStates.value[key].dirty)
        return !0;
    return !1;
  }), errors = computed(() => getFieldsErrors(fieldsStates.value)), errorMessages = computed(() => getErrorMessages(errors.value, fieldsStates.value));
  model && watch(
    payload,
    (newModel) => {
      model.value = { ...internalDefaultValues.value, ...newModel };
    },
    { deep: !0 }
  ), watch(
    internalDefaultValues,
    (newDefaultValues) => {
      payload.value = { ...newDefaultValues, ...payload.value };
    },
    { deep: !0 }
  ), watch(
    internalSchema,
    (schema2) => {
      updateFieldsStates({
        schema: schema2,
        fieldsStates: fieldsStates.value,
        payload: payload.value,
        options: opts
      }), internalValidateForm();
    },
    { deep: !0 }
  ), internalValidateForm();
  function internalValidateForm(setErrors = opts.mode === "aggressive") {
    return validateForm({
      fieldsStates: fieldsStates.value,
      payload: payload.value,
      schema: internalSchema.value,
      setErrors
    });
  }
  let payloadWatchStop = null;
  function setupOptimizedWatch() {
    payloadWatchStop && payloadWatchStop();
    const payloadSnapshot = computed(() => {
      const snapshot = {};
      for (const key of Object.keys(internalSchema.value))
        snapshot[key] = payload.value[key];
      return snapshot;
    });
    payloadWatchStop = watch(
      payloadSnapshot,
      (newSnapshot, oldSnapshot) => {
        const fieldsToValidate = Object.keys(internalSchema.value).filter((name) => {
          const fieldState = fieldsStates.value[name];
          return fieldState && newSnapshot[name] !== oldSnapshot?.[name] && hasModeIncludes(["aggressive", "lazy", "progressive"], fieldState.mode);
        });
        if (fieldsToValidate.length > 0) {
          const processValidations = createValidationProcessor(
            fieldsToValidate,
            fieldsStates,
            payload,
            internalSchema,
            isSubmitted
          );
          typeof requestIdleCallback < "u" ? requestIdleCallback(processValidations, { timeout: 100 }) : nextTick(processValidations);
        }
      },
      { deep: !0 }
    );
  }
  function handleSubmit(successCallback, enableScrollOrSelector) {
    return async (event) => {
      if (event?.preventDefault(), !isSubmitting.value) {
        isSubmitted.value = !0, isSubmitting.value = !0;
        try {
          await internalValidateForm(!0);
          const scrollToErrorParam = typeof enableScrollOrSelector == "string" ? enableScrollOrSelector : opts.scrollToError;
          let response;
          return isValid.value ? response = await successCallback(payload.value) : typeof scrollToErrorParam != "boolean" && scrollToError(scrollToErrorParam), isSubmitting.value = !1, response;
        } finally {
          isSubmitting.value = !1;
        }
      }
    };
  }
  const context = {
    fieldsStates,
    payload,
    options: opts,
    internalSchema,
    errorMessages,
    isSubmitted
  };
  return instance.formContexts ??= /* @__PURE__ */ new Map(), instance.formContexts.set(opts.identifier, context), provide(opts.identifier, context), setupOptimizedWatch(), {
    identifier: opts.identifier,
    isDirty,
    isSubmitting,
    isSubmitted,
    isValid,
    errors,
    model: payload,
    fieldsStates,
    validateForm: internalValidateForm,
    scrollToError,
    handleSubmit,
    errorMessages
  };
}
export {
  useFormValidator
};