validlyjs/dist/esm/integrations/vue/index.js

A high-performance Laravel-inspired validation library for TypeScript/JavaScript

function e(e,t,d){const c=n({}),s=r(!0),u=n({}),v=n(new Set),f=r(!1),m=new l(t,d),y=async t=>{f.value=!0
try{let n
if(t){const r={[t]:e[t]}
return n=await m.validate(r),c[t]&&delete c[t],n.errors&&"object"==typeof n.errors&&t in n.errors&&(c[t]=n.errors[t]),s.value=!(Object.keys(c).length>0),!c[t]}return n=await m.validate(e),Object.keys(c).forEach(e=>{delete c[e]}),n.errors&&"object"==typeof n.errors&&Object.assign(c,n.errors),s.value=n.isValid,n.isValid}catch(e){return!1}finally{f.value=!1}},b=o(()=>Object.keys(c).length>0),h=o(()=>Object.values(c).reduce((e,t)=>Array.isArray(t)?e+t.length:e+(t?1:0),0))
return i(()=>({...e}),()=>{if(null==d?void 0:d.validateOnChange)for(const e of v)y(e)},{deep:!0}),a(()=>{(null==d?void 0:d.validateOnMount)&&y()}),{errors:c,isValid:s,isDirty:u,touchedFields:v,isValidating:f,hasErrors:b,errorCount:h,validate:y,handleChange:e=>{u[e]=!0,(null==d?void 0:d.validateOnChange)&&v.has(e)&&y(e)},handleBlur:e=>{v.add(e),!1!==(null==d?void 0:d.validateOnBlur)&&y(e)},reset:()=>{Object.keys(c).forEach(e=>{delete c[e]}),s.value=!0,Object.keys(u).forEach(e=>{delete u[e]}),v.clear(),f.value=!1},getFieldError:e=>{const t=c[e]
return Array.isArray(t)?t[0]:t},hasFieldError:e=>{const t=c[e]
return Array.isArray(t)?t.length>0:!!t}}}function t(e){e.directive("validate",d),e.directive("validate-on",c),e.directive("error-display",s)}import{reactive as n,ref as r,computed as o,watch as i,onMounted as a}from"vue"
import{Validator as l}from"validlyjs"
const d={mounted(e,t){const{value:n,modifiers:r}=t
if(!n)return
const o=new l({[e.name||"field"]:n}),i=async()=>{var t
const n=e.name||"field",r=e.value
try{const i=await o.validate({[n]:r})
if(e.classList.remove("error","valid"),i.isValid)e.classList.add("valid"),e.removeAttribute("data-error")
else{e.classList.add("error")
const n=(null===(t=i.errors[0])||void 0===t?void 0:t.message)||"Validation failed"
e.setAttribute("data-error",n)}e.dispatchEvent(new CustomEvent("validation",{detail:{isValid:i.isValid,errors:i.errors}}))}catch(e){}}
!r.blur&&Object.keys(r).length||e.addEventListener("blur",i),r.input&&e.addEventListener("input",i),r.change&&e.addEventListener("change",i),e.t=o,e.o=i},unmounted(e){e.o&&(e.removeEventListener("blur",e.o),e.removeEventListener("input",e.o),e.removeEventListener("change",e.o))}},c={mounted(e,t){const{value:n,arg:r="blur"}=t
if(!n||!n.rules)return
const o=new l({[n.field||"field"]:n.rules}),i=async()=>{const t=n.field||"field",r=n.getValue?n.getValue(e):e.value
try{const i=await o.validate({[t]:r})
n.onValidate&&n.onValidate(i,e)}catch(e){}}
e.addEventListener(r,i),e.o=i,e.i=r},unmounted(e){e.o&&e.i&&e.removeEventListener(e.i,e.o)}},s={mounted(e,t){const{value:n,modifiers:r}=t
if(!n)return
const o=r.html?"html":"text",i=t=>{const r=t.detail
if(r.errors&&r.errors.length>0){const t=r.errors.find(e=>e.field===n)
t?("text"===o?e.textContent=t.message:"html"===o&&(e.innerHTML=t.message),e.style.display="block"):e.style.display="none"}else e.style.display="none"}
document.addEventListener("validation",i),e.l=i},unmounted(e){e.l&&document.removeEventListener("validation",e.l)}},u={install(e,t={}){const{install:n}=require("./directives")
n(e),e.provide("validly-options",t)}}
export{u as ValidlyPlugin,t as directivesPlugin,e as useValidation,s as vErrorDisplay,d as vValidate,c as vValidateOn}