maz-ui/dist/composables/useFormField.js

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

import{_ as setFieldValidationState,f as hasModeIncludes,i as removeEventFromInteractiveElements,n as findInteractiveElements,o as fieldHasValidation,p as updateFieldState,r as getValidationEvents,s as getContext,t as addEventToInteractiveElements,u as handleFieldBlur}from"../chunks/dom-events.CB-n_3UB.js";import{useFreezeValue}from"./useFreezeValue.js";import{computed,onMounted,onUnmounted}from"vue";import{isEqual}from"@maz-ui/utils/helpers/isEqual";function useFormField(name,options){let opts={formIdentifier:`main-form-validator`,...options};let{fieldsStates,payload,options:formOptions,internalSchema,errorMessages,isSubmitted}=getContext(opts.formIdentifier,`useFormField`);let finalOpts=opts;let fieldMode=fieldHasValidation(name,internalSchema.value)?options?.mode??formOptions.mode:void 0;finalOpts.mode=fieldMode;let fieldState=computed(()=>fieldsStates.value[name]);if(fieldsStates.value[name]=updateFieldState({name,fieldState:fieldState.value,payload:payload.value,schema:internalSchema.value,options:{...formOptions,...finalOpts}}),finalOpts.defaultValue!==void 0&&!isEqual(payload.value[name],finalOpts.defaultValue)){let initialValue=finalOpts.defaultValue;payload.value[name]=initialValue,fieldsStates.value[name].initialValue=useFreezeValue(initialValue)}fieldMode&&setFieldValidationState({name,fieldState:fieldState.value,payload:payload.value,schema:internalSchema.value,setError:fieldMode===`aggressive`,setErrorIfInvalidAndNotEmpty:fieldMode===`lazy`});function onBlur(){handleFieldBlur({name,fieldState:fieldState.value,payload:payload.value,schema:internalSchema.value,isSubmitted:isSubmitted.value})}let validationEvents=computed(()=>getValidationEvents({hasRef:!!finalOpts.ref?.value,onBlur,fieldState:fieldState.value}));if(finalOpts.ref&&fieldMode&&hasModeIncludes([`eager`,`blur`,`progressive`],fieldMode)){let interactiveElements=[];let handleInteractiveElements=element=>{interactiveElements.length>0&&removeEventFromInteractiveElements({interactiveElements,onBlur}),interactiveElements=findInteractiveElements(element),addEventToInteractiveElements({interactiveElements,onBlur,mode:fieldMode})};onMounted(()=>{let element=finalOpts.ref?.value;let elementToBind=element instanceof HTMLElement?element:element?.$el;if(elementToBind instanceof HTMLElement){handleInteractiveElements(elementToBind);return}else if(elementToBind instanceof Text&&elementToBind.nextElementSibling instanceof HTMLElement){handleInteractiveElements(elementToBind.nextElementSibling);return}console.warn(`[maz-ui](useFormField) No element found for ref in field '${String(name)}'. Make sure the ref is properly bound to an HTMLElement or Vue component (form identifier: ${String(formOptions.identifier)})`)}),onUnmounted(()=>{removeEventFromInteractiveElements({interactiveElements,onBlur})})}return{hasError:computed(()=>fieldState.value.error),errors:computed(()=>fieldState.value.errors),errorMessage:computed(()=>errorMessages.value[name]),isValid:computed(()=>fieldState.value.valid),isDirty:computed(()=>fieldState.value.dirty),isBlurred:computed(()=>fieldState.value.blurred),isValidated:computed(()=>fieldState.value.validated),isValidating:computed(()=>fieldState.value.validating),mode:computed(()=>fieldState.value.mode),value:computed({get:()=>payload.value[name],set:value=>payload.value[name]=value}),validationEvents}}export{useFormField};