maz-ui/dist/composables/useFormValidator.js

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

import{a as scrollToError,c as getFieldsStates,d as handleFieldInput,f as hasModeIncludes,g as getFieldsErrors,h as getErrorMessages,l as getInstance,m as updateFieldsStates,v as validateForm,y as CONFIG}from"../chunks/dom-events.CB-n_3UB.js";import{computed,nextTick,provide,ref,toValue,watch}from"vue";function createValidationProcessor(fieldsToValidate,fieldsStates,payload,internalSchema,isSubmitted){return()=>{fieldsToValidate.forEach(name=>{let fieldState=fieldsStates.value[name];handleFieldInput({name,fieldState,payload:payload.value,schema:internalSchema.value,isSubmitted:isSubmitted.value,forceValidation:!0})})}}function useFormValidator({schema,defaultValues,model,options}){let instance=getInstance(`useFormValidator`);let opts={mode:CONFIG.mode,scrollToError:CONFIG.scrollToErrorSelector,debouncedFields:null,throttledFields:null,identifier:`main-form-validator`,resetOnSuccess:!0,...options};let internalDefaultValues=ref(toValue(defaultValues));let payload=ref({...internalDefaultValues.value,...model?.value});let internalSchema=ref(toValue(schema));let fieldsStates=ref(getFieldsStates({schema:internalSchema.value,payload:payload.value,options:opts}));let isSubmitting=ref(!1);let isSubmitted=ref(!1);let isValid=computed(()=>{for(let key in fieldsStates.value)if(!fieldsStates.value[key].valid)return!1;return!0});let isDirty=computed(()=>{for(let key in fieldsStates.value)if(fieldsStates.value[key].dirty)return!0;return!1});let errors=computed(()=>getFieldsErrors(fieldsStates.value));let errorMessages=computed(()=>getErrorMessages(errors.value,fieldsStates.value));model&&(watch(payload,newPayload=>{model.value={...internalDefaultValues.value,...newPayload}},{deep:!0}),watch(model,newModel=>{newModel&&Object.assign(payload.value,newModel)},{deep:!0})),watch(internalDefaultValues,newDefaultValues=>{payload.value={...newDefaultValues,...payload.value}},{deep:!0}),watch(internalSchema,schema=>{updateFieldsStates({schema,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(),payloadWatchStop=watch(computed(()=>{let snapshot={};for(let key of Object.keys(internalSchema.value))snapshot[key]=payload.value[key];return snapshot}),(newSnapshot,oldSnapshot)=>{let fieldsToValidate=Object.keys(internalSchema.value).filter(name=>{let fieldState=fieldsStates.value[name];return fieldState&&newSnapshot[name]!==oldSnapshot?.[name]&&hasModeIncludes([`aggressive`,`lazy`,`progressive`],fieldState.mode)});if(fieldsToValidate.length>0){let processValidations=createValidationProcessor(fieldsToValidate,fieldsStates,payload,internalSchema,isSubmitted);typeof requestIdleCallback<`u`?requestIdleCallback(processValidations,{timeout:100}):nextTick(processValidations)}},{deep:!0})}function resetForm(){payloadWatchStop&&payloadWatchStop(),isSubmitting.value=!1,isSubmitted.value=!1,payload.value={...internalDefaultValues.value},fieldsStates.value=getFieldsStates({schema:internalSchema.value,payload:payload.value,options:opts}),internalValidateForm(!1),setupOptimizedWatch()}function handleSubmit(successCallback,enableScrollOrSelector,options){let finalOptions={resetOnSuccess:options?.resetOnSuccess??opts.resetOnSuccess};return async event=>{if(event?.preventDefault(),!isSubmitting.value){isSubmitted.value=!0,isSubmitting.value=!0;try{await internalValidateForm(!0);let scrollToErrorParam=typeof enableScrollOrSelector==`string`?enableScrollOrSelector:opts.scrollToError;let response;return isValid.value?(response=await successCallback(payload.value),(finalOptions.resetOnSuccess||options?.resetOnSuccess)&&resetForm()):typeof scrollToErrorParam!=`boolean`&&(options?.onError?.({model:payload.value,errorMessages:errorMessages.value,errors:errors.value}),scrollToError(scrollToErrorParam)),isSubmitting.value=!1,response}finally{isSubmitting.value=!1}}}}let context={fieldsStates,payload,options:opts,internalSchema,errorMessages,isSubmitted};return instance.formContexts??=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,resetForm,handleSubmit,errorMessages}}export{useFormValidator};