@macrulez/vue-form-schema 0.1.9 → 0.2.0

package/dist/ui.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),y=require("./MaskEngine-DAKSNIHQ.cjs"),R=["for"],w={key:0,class:"vfs-field__required","aria-hidden":"true"},A=["id"],B=e.defineComponent({__name:"BaseField",props:{field:{},error:{},touched:{type:Boolean}},setup(t){const r=t,l=e.computed(()=>{var i;return!!(r.touched&&((i=r.error)!=null&&i.length))}),u=e.computed(()=>`${r.field.name}-error`),o=e.computed(()=>({"aria-required":r.field.required?"true":void 0,"aria-invalid":l.value?"true":"false","aria-describedby":l.value?u.value:void 0}));return(i,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vfs-field",[`vfs-field--${r.field.type}`,{"vfs-field--error":l.value}]])},[r.field.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.field.name,class:"vfs-field__label"},[e.createTextVNode(e.toDisplayString(r.field.label)+" ",1),r.field.required?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0)],8,R)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default",e.normalizeProps(e.guardReactiveProps(o.value))),l.value?(e.openBlock(),e.createElementBlock("ul",{key:1,id:u.value,class:"vfs-field__errors",role:"alert","aria-live":"polite"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.error,(m,v)=>(e.openBlock(),e.createElementBlock("li",{key:v,class:"vfs-field__error"},e.toDisplayString(m),1))),128))],8,A)):e.createCommentVNode("",!0)],2))}}),P=["id","type","name","value","placeholder","disabled","required"],V=e.defineComponent({__name:"TextField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.ref(null);let i=null;e.onMounted(()=>{o.value&&l.field.mask&&(i=y.bindMask(o.value,l.field.mask))}),e.onUnmounted(()=>i==null?void 0:i());function s(m){u("update:modelValue",m.target.value)}return(m,v)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(c=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,ref_key:"inputRef",ref:o,type:t.field.type==="email"?"email":"text",name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},c,{class:"vfs-input",onInput:s,onBlur:v[0]||(v[0]=b=>u("blur"))}),null,16,P)]),_:1},8,["field","error","touched"]))}}),T=["id","name","value","placeholder","disabled","required"],$=e.defineComponent({__name:"NumberField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;function u(o){const i=o.target.value;l("update:modelValue",i===""?null:Number(i))}return(o,i)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(s=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"number",name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},s,{class:"vfs-input",onInput:u,onBlur:i[0]||(i[0]=m=>l("blur"))}),null,16,T)]),_:1},8,["field","error","touched"]))}}),z=["id","name","value","placeholder","disabled","required"],E=e.defineComponent({__name:"TextareaField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(i=>[e.createElementVNode("textarea",e.mergeProps({id:t.field.name,name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},i,{class:"vfs-textarea",onInput:o[0]||(o[0]=s=>l("update:modelValue",s.target.value)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,z)]),_:1},8,["field","error","touched"]))}}),I={key:0,class:"vfs-select-loading"},M=["id","name","disabled","required"],U=["selected"],O=["value","selected"],C=e.defineComponent({__name:"SelectField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.computed(()=>Array.isArray(l.field.options)?l.field.options:[]);function i(s){const m=s.target,v=o.value.find(c=>String(c.value)===m.value);u("update:modelValue",(v==null?void 0:v.value)??m.value)}return(s,m)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(v=>[t.field.optionsLoading?(e.openBlock(),e.createElementBlock("div",I,"Loading…")):(e.openBlock(),e.createElementBlock("select",e.mergeProps({key:1,id:t.field.name,name:t.field.name,disabled:t.field.disabled===!0||t.field.optionsLoading,required:t.field.required},v,{class:"vfs-select",onChange:i,onBlur:m[0]||(m[0]=c=>u("blur"))}),[e.createElementVNode("option",{value:"",disabled:"",selected:t.modelValue===null||t.modelValue===void 0||t.modelValue===""},e.toDisplayString(t.field.placeholder??"Select an option"),9,U),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,c=>(e.openBlock(),e.createElementBlock("option",{key:String(c.value),value:String(c.value),selected:t.modelValue===c.value},e.toDisplayString(c.label),9,O))),128))],16,M))]),_:1},8,["field","error","touched"]))}}),j={class:"vfs-checkbox-label"},K=["id","name","checked","disabled","required","aria-checked"],G={key:0,class:"vfs-checkbox-text"},S=e.defineComponent({__name:"CheckboxField",props:{field:{},modelValue:{type:[Boolean,null]},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:{...t.field,label:void 0},error:t.error,touched:t.touched},{default:e.withCtx(i=>[e.createElementVNode("label",j,[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"checkbox",name:t.field.name,checked:!!t.modelValue,disabled:t.field.disabled===!0,required:t.field.required,"aria-checked":t.modelValue?"true":"false"},i,{class:"vfs-checkbox",onChange:o[0]||(o[0]=s=>l("update:modelValue",s.target.checked)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,K),t.field.label?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0)])]),_:1},8,["field","error","touched"]))}}),H=["aria-required","aria-invalid","aria-describedby"],J={key:0,class:"vfs-field__label"},Q={key:0,class:"vfs-field__required","aria-hidden":"true"},W={class:"vfs-radio-group"},X=["name","value","checked","disabled","onChange"],Y=["id"],N=e.defineComponent({__name:"RadioField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.computed(()=>{var m;return!!(l.touched&&((m=l.error)!=null&&m.length))}),i=e.computed(()=>`${l.field.name}-error`),s=e.computed(()=>Array.isArray(l.field.options)?l.field.options:[]);return(m,v)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["vfs-field vfs-field--radio",{"vfs-field--error":o.value}]),"aria-required":t.field.required?"true":void 0,"aria-invalid":o.value?"true":"false","aria-describedby":o.value?i.value:void 0},[t.field.label?(e.openBlock(),e.createElementBlock("legend",J,[e.createTextVNode(e.toDisplayString(t.field.label)+" ",1),t.field.required?(e.openBlock(),e.createElementBlock("span",Q,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,c=>(e.openBlock(),e.createElementBlock("label",{key:String(c.value),class:"vfs-radio-label"},[e.createElementVNode("input",{type:"radio",name:t.field.name,value:String(c.value),checked:t.modelValue===c.value,disabled:t.field.disabled===!0,class:"vfs-radio",onChange:b=>u("update:modelValue",c.value),onBlur:v[0]||(v[0]=b=>u("blur"))},null,40,X),e.createTextVNode(" "+e.toDisplayString(c.label),1)]))),128))]),o.value?(e.openBlock(),e.createElementBlock("ul",{key:1,id:i.value,class:"vfs-field__errors",role:"alert","aria-live":"polite"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.error,(c,b)=>(e.openBlock(),e.createElementBlock("li",{key:b,class:"vfs-field__error"},e.toDisplayString(c),1))),128))],8,Y)):e.createCommentVNode("",!0)],10,H))}}),Z=["id","name","value","disabled","required"],x=e.defineComponent({__name:"DateField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(i=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"date",name:t.field.name,value:t.modelValue??"",disabled:t.field.disabled===!0,required:t.field.required},i,{class:"vfs-input",onInput:o[0]||(o[0]=s=>l("update:modelValue",s.target.value)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,Z)]),_:1},8,["field","error","touched"]))}}),_={class:"vfs-array"},ee={key:0,class:"vfs-field__label"},te=["onClick"],D=e.defineComponent({__name:"ArrayField",props:{field:{},form:{},components:{}},setup(t){const r=t,l=y.useRegistry(),u={text:V,email:V,number:$,textarea:E,select:C,checkbox:S,radio:N,date:x};function o(k){var n;return k.component?k.component:((n=r.components)==null?void 0:n[k.type])??l[k.type]??u[k.type]??null}const{rows:i,append:s,remove:m}=y.useFieldArray(r.form,r.field.name);function v(k){return y.getByPath(r.form.values.value,k.name)}function c(k,n){r.form.setField(k.name,n)}function b(k){var a;const n=r.form;(a=n.touchField)==null||a.call(n,k.name)}function h(k){return r.form.errors.value[k.name]??[]}function g(k){return r.form.touched.value[k.name]??!1}return(k,n)=>(e.openBlock(),e.createElementBlock("div",_,[e.createVNode(B,{field:{...t.field,label:void 0},error:[],touched:!1},{default:e.withCtx(()=>[t.field.label?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),a=>(e.openBlock(),e.createElementBlock("div",{key:a.key,class:"vfs-array__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields,f=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:f.name},[o(f)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o(f)),{key:0,field:f,"model-value":v(f),error:h(f),touched:g(f),"onUpdate:modelValue":d=>c(f,d),onBlur:d=>b(f)},null,40,["field","model-value","error","touched","onUpdate:modelValue","onBlur"])):e.createCommentVNode("",!0)],64))),128)),e.createElementVNode("button",{type:"button",class:"vfs-array__remove",onClick:f=>e.unref(m)(a.index)}," Remove ",8,te)]))),128)),e.createElementVNode("button",{type:"button",class:"vfs-array__add",onClick:n[0]||(n[0]=a=>e.unref(s)())}," + Add row ")]),_:1},8,["field"])]))}}),le=["id","name","accept","multiple","disabled","required"],oe=["for"],ne={key:0,class:"vfs-file-hint"},re={key:0,class:"vfs-file-list"},ae={class:"vfs-file-name"},ie={class:"vfs-file-size"},de=["aria-label","onClick"],q=e.defineComponent({__name:"FileField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.ref(!1),i=e.ref(null),s=e.computed(()=>l.modelValue?Array.isArray(l.modelValue)?l.modelValue:[l.modelValue]:[]),m=e.computed(()=>l.field.multiple??!1);function v(a){if(!a||a.length===0){u("update:modelValue",null);return}m.value?u("update:modelValue",Array.from(a)):u("update:modelValue",a[0])}function c(a){v(a.target.files),u("blur")}function b(a){var f;o.value=!1,a.preventDefault(),v(((f=a.dataTransfer)==null?void 0:f.files)??null),u("blur")}function h(a){a.preventDefault(),o.value=!0}function g(){o.value=!1}function k(a){const f=s.value.filter((d,p)=>p!==a);f.length===0?(u("update:modelValue",null),i.value&&(i.value.value="")):m.value?u("update:modelValue",f):u("update:modelValue",f[0])}function n(a){return a<1024?`${a} B`:a<1024*1024?`${(a/1024).toFixed(1)} KB`:`${(a/(1024*1024)).toFixed(1)} MB`}return(a,f)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(d=>[e.createElementVNode("div",{class:e.normalizeClass(["vfs-file-zone",{"vfs-file-zone--dragging":o.value}]),onDragover:h,onDragleave:g,onDrop:b},[e.createElementVNode("input",e.mergeProps({id:t.field.name,ref_key:"inputRef",ref:i,type:"file",name:t.field.name,accept:t.field.accept,multiple:m.value,disabled:t.field.disabled===!0,required:t.field.required},d,{class:"vfs-file-input",onChange:c}),null,16,le),e.createElementVNode("label",{for:t.field.name,class:"vfs-file-label"},[f[0]||(f[0]=e.createElementVNode("span",{class:"vfs-file-icon","aria-hidden":"true"},"📁",-1)),e.createElementVNode("span",null,e.toDisplayString(o.value?"Drop files here":"Click to upload or drag & drop"),1),t.field.accept?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(t.field.accept),1)):e.createCommentVNode("",!0)],8,oe)],34),s.value.length?(e.openBlock(),e.createElementBlock("ul",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(p,F)=>(e.openBlock(),e.createElementBlock("li",{key:`${p.name}-${F}`,class:"vfs-file-item"},[e.createElementVNode("span",ae,e.toDisplayString(p.name),1),e.createElementVNode("span",ie,e.toDisplayString(n(p.size)),1),e.createElementVNode("button",{type:"button",class:"vfs-file-remove","aria-label":`Remove ${p.name}`,onClick:ye=>k(F)}," × ",8,de)]))),128))])):e.createCommentVNode("",!0)]),_:1},8,["field","error","touched"]))}}),ue={key:1,class:"vfs-group"},ce={key:0},se=["disabled"],L=e.defineComponent({__name:"FormRenderer",props:{form:{},components:{},submitLabel:{}},emits:["submit"],setup(t,{emit:r}){const l=t,u=y.useRegistry(),o=r,i={text:V,email:V,number:$,textarea:E,select:C,checkbox:S,radio:N,date:x,file:q};function s(n){var a;return n.component?n.component:((a=l.components)==null?void 0:a[n.type])??u[n.type]??i[n.type]??null}function m(n){return y.getByPath(l.form.values.value,n.name)}function v(n,a){l.form.setField(n.name,a)}function c(n){var f;const a=l.form;(f=a.touchField)==null||f.call(a,n.name)}function b(n){return l.form.errors.value[n.name]??[]}function h(n){return l.form.touched.value[n.name]??!1}const g=e.computed(()=>l.form.fields.value.filter(n=>n.visible!==!1));async function k(n){n.preventDefault(),await l.form.submit(),o("submit")}return(n,a)=>{const f=e.resolveComponent("FormRenderer",!0);return e.openBlock(),e.createElementBlock("form",{class:"vfs-form",novalidate:"",onSubmit:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,d=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:d.name},[n.$slots[`field-${d.name}`]?e.renderSlot(n.$slots,`field-${d.name}`,{key:0,field:d,value:m(d),error:b(d),touched:h(d),setValue:p=>v(d,p),touch:()=>c(d)}):d.type==="group"?(e.openBlock(),e.createElementBlock("fieldset",ue,[d.label?(e.openBlock(),e.createElementBlock("legend",ce,e.toDisplayString(d.label),1)):e.createCommentVNode("",!0),d.fields?(e.openBlock(),e.createBlock(f,{key:1,form:t.form,components:t.components},null,8,["form","components"])):e.createCommentVNode("",!0)])):d.type==="array"?(e.openBlock(),e.createBlock(D,{key:2,field:d,form:t.form,components:t.components},null,8,["field","form","components"])):s(d)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s(d)),{key:3,field:d,"model-value":m(d),error:b(d),touched:h(d),"onUpdate:modelValue":p=>v(d,p),onBlur:p=>c(d)},e.createSlots({_:2},[n.$slots[`label-${d.name}`]?{name:"label",fn:e.withCtx(()=>[e.renderSlot(n.$slots,`label-${d.name}`,{field:d})]),key:"0"}:void 0,n.$slots[`error-${d.name}`]?{name:"error",fn:e.withCtx(()=>[e.renderSlot(n.$slots,`error-${d.name}`,{field:d,error:b(d)})]),key:"1"}:void 0]),1064,["field","model-value","error","touched","onUpdate:modelValue","onBlur"])):e.createCommentVNode("",!0)],64))),128)),e.renderSlot(n.$slots,"submit",{isSubmitting:t.form.isSubmitting.value,isValid:t.form.isValid.value},()=>[e.createElementVNode("button",{type:"submit",disabled:t.form.isSubmitting.value,class:"vfs-submit"},e.toDisplayString(t.submitLabel??"Submit"),9,se)])],32)}}}),me={class:"vfs-multistep"},fe={class:"vfs-multistep__steps"},ve={class:"vfs-multistep__step-number"},ke={key:0,class:"vfs-multistep__step-label"},be={class:"vfs-multistep__progress"},pe={class:"vfs-multistep__nav"},Be=["disabled"],he=e.defineComponent({__name:"MultiStepFormRenderer",props:{form:{},components:{},submitLabel:{},nextLabel:{},backLabel:{},stepLabels:{}},emits:["submit"],setup(t,{emit:r}){const l=t,u=r;async function o(){await l.form.next()}async function i(){await l.form.submit(),u("submit")}return(s,m)=>(e.openBlock(),e.createElementBlock("div",me,[e.createElementVNode("div",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.form.steps,(v,c)=>{var b;return e.openBlock(),e.createElementBlock("div",{key:c,class:e.normalizeClass(["vfs-multistep__step",{"vfs-multistep__step--active":c===t.form.currentStep.value,"vfs-multistep__step--done":c<t.form.currentStep.value}])},[e.createElementVNode("span",ve,e.toDisplayString(c+1),1),(b=t.stepLabels)!=null&&b[c]?(e.openBlock(),e.createElementBlock("span",ke,e.toDisplayString(t.stepLabels[c]),1)):e.createCommentVNode("",!0)],2)}),128))]),e.createElementVNode("div",be," Step "+e.toDisplayString(t.form.currentStep.value+1)+" of "+e.toDisplayString(t.form.totalSteps),1),e.createVNode(L,{form:t.form.form.value,components:t.components},{submit:e.withCtx(()=>[e.createElementVNode("div",pe,[t.form.isFirstStep.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vfs-multistep__back",onClick:m[0]||(m[0]=v=>t.form.back())},e.toDisplayString(t.backLabel??"← Back"),1)),t.form.isLastStep.value?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"vfs-submit",disabled:t.form.isSubmitting.value,onClick:i},e.toDisplayString(t.submitLabel??"Submit"),9,Be)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"vfs-multistep__next",onClick:o},e.toDisplayString(t.nextLabel??"Next →"),1))])]),_:1},8,["form","components"])]))}});exports.ArrayField=D;exports.CheckboxField=S;exports.DateField=x;exports.FileField=q;exports.FormRenderer=L;exports.MultiStepFormRenderer=he;exports.NumberField=$;exports.RadioField=N;exports.SelectField=C;exports.TextField=V;exports.TextareaField=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),V=require("./MaskEngine-CPr-fSPy.cjs"),D=require("./ValidationEngine-Diz-qTFs.cjs"),w=["for"],A={key:0,class:"vfs-field__required","aria-hidden":"true"},P=["id"],B=e.defineComponent({__name:"BaseField",props:{field:{},error:{},touched:{type:Boolean}},setup(t){const r=t,l=e.computed(()=>{var d;return!!(r.touched&&((d=r.error)!=null&&d.length))}),u=e.computed(()=>`${r.field.name}-error`),o=e.computed(()=>({"aria-required":r.field.required?"true":void 0,"aria-invalid":l.value?"true":"false","aria-describedby":l.value?u.value:void 0}));return(d,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vfs-field",[`vfs-field--${r.field.type}`,{"vfs-field--error":l.value}]])},[r.field.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.field.name,class:"vfs-field__label"},[e.createTextVNode(e.toDisplayString(r.field.label)+" ",1),r.field.required?(e.openBlock(),e.createElementBlock("span",A,"*")):e.createCommentVNode("",!0)],8,w)):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"default",e.normalizeProps(e.guardReactiveProps(o.value))),l.value?(e.openBlock(),e.createElementBlock("ul",{key:1,id:u.value,class:"vfs-field__errors",role:"alert","aria-live":"polite"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.error,(m,v)=>(e.openBlock(),e.createElementBlock("li",{key:v,class:"vfs-field__error"},e.toDisplayString(m),1))),128))],8,P)):e.createCommentVNode("",!0)],2))}}),T=["id","type","name","value","placeholder","disabled","required"],g=e.defineComponent({__name:"TextField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.ref(null);let d=null;e.onMounted(()=>{o.value&&l.field.mask&&(d=V.bindMask(o.value,l.field.mask))}),e.onUnmounted(()=>d==null?void 0:d());function s(m){u("update:modelValue",m.target.value)}return(m,v)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(c=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,ref_key:"inputRef",ref:o,type:t.field.type==="email"?"email":"text",name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},c,{class:"vfs-input",onInput:s,onBlur:v[0]||(v[0]=b=>u("blur"))}),null,16,T)]),_:1},8,["field","error","touched"]))}}),z=["id","name","value","placeholder","disabled","required"],$=e.defineComponent({__name:"NumberField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;function u(o){const d=o.target.value;l("update:modelValue",d===""?null:Number(d))}return(o,d)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(s=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"number",name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},s,{class:"vfs-input",onInput:u,onBlur:d[0]||(d[0]=m=>l("blur"))}),null,16,z)]),_:1},8,["field","error","touched"]))}}),I=["id","name","value","placeholder","disabled","required"],E=e.defineComponent({__name:"TextareaField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(d=>[e.createElementVNode("textarea",e.mergeProps({id:t.field.name,name:t.field.name,value:t.modelValue??"",placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required},d,{class:"vfs-textarea",onInput:o[0]||(o[0]=s=>l("update:modelValue",s.target.value)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,I)]),_:1},8,["field","error","touched"]))}}),M={key:0,class:"vfs-select-loading"},U=["id","name","disabled","required"],O=["selected"],j=["value","selected"],C=e.defineComponent({__name:"SelectField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.computed(()=>Array.isArray(l.field.options)?l.field.options:[]);function d(s){const m=s.target,v=o.value.find(c=>String(c.value)===m.value);u("update:modelValue",(v==null?void 0:v.value)??m.value)}return(s,m)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(v=>[t.field.optionsLoading?(e.openBlock(),e.createElementBlock("div",M,"Loading…")):(e.openBlock(),e.createElementBlock("select",e.mergeProps({key:1,id:t.field.name,name:t.field.name,disabled:t.field.disabled===!0||t.field.optionsLoading,required:t.field.required},v,{class:"vfs-select",onChange:d,onBlur:m[0]||(m[0]=c=>u("blur"))}),[e.createElementVNode("option",{value:"",disabled:"",selected:t.modelValue===null||t.modelValue===void 0||t.modelValue===""},e.toDisplayString(t.field.placeholder??"Select an option"),9,O),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,c=>(e.openBlock(),e.createElementBlock("option",{key:String(c.value),value:String(c.value),selected:t.modelValue===c.value},e.toDisplayString(c.label),9,j))),128))],16,U))]),_:1},8,["field","error","touched"]))}}),K={class:"vfs-checkbox-label"},G=["id","name","checked","disabled","required","aria-checked"],H={key:0,class:"vfs-checkbox-text"},S=e.defineComponent({__name:"CheckboxField",props:{field:{},modelValue:{type:[Boolean,null]},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:{...t.field,label:void 0},error:t.error,touched:t.touched},{default:e.withCtx(d=>[e.createElementVNode("label",K,[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"checkbox",name:t.field.name,checked:!!t.modelValue,disabled:t.field.disabled===!0,required:t.field.required,"aria-checked":t.modelValue?"true":"false"},d,{class:"vfs-checkbox",onChange:o[0]||(o[0]=s=>l("update:modelValue",s.target.checked)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,G),t.field.label?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0)])]),_:1},8,["field","error","touched"]))}}),J=["aria-required","aria-invalid","aria-describedby"],Q={key:0,class:"vfs-field__label"},W={key:0,class:"vfs-field__required","aria-hidden":"true"},X={class:"vfs-radio-group"},Y=["name","value","checked","disabled","onChange"],Z=["id"],N=e.defineComponent({__name:"RadioField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.computed(()=>{var m;return!!(l.touched&&((m=l.error)!=null&&m.length))}),d=e.computed(()=>`${l.field.name}-error`),s=e.computed(()=>Array.isArray(l.field.options)?l.field.options:[]);return(m,v)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["vfs-field vfs-field--radio",{"vfs-field--error":o.value}]),"aria-required":t.field.required?"true":void 0,"aria-invalid":o.value?"true":"false","aria-describedby":o.value?d.value:void 0},[t.field.label?(e.openBlock(),e.createElementBlock("legend",Q,[e.createTextVNode(e.toDisplayString(t.field.label)+" ",1),t.field.required?(e.openBlock(),e.createElementBlock("span",W,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,c=>(e.openBlock(),e.createElementBlock("label",{key:String(c.value),class:"vfs-radio-label"},[e.createElementVNode("input",{type:"radio",name:t.field.name,value:String(c.value),checked:t.modelValue===c.value,disabled:t.field.disabled===!0,class:"vfs-radio",onChange:b=>u("update:modelValue",c.value),onBlur:v[0]||(v[0]=b=>u("blur"))},null,40,Y),e.createTextVNode(" "+e.toDisplayString(c.label),1)]))),128))]),o.value?(e.openBlock(),e.createElementBlock("ul",{key:1,id:d.value,class:"vfs-field__errors",role:"alert","aria-live":"polite"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.error,(c,b)=>(e.openBlock(),e.createElementBlock("li",{key:b,class:"vfs-field__error"},e.toDisplayString(c),1))),128))],8,Z)):e.createCommentVNode("",!0)],10,J))}}),_=["id","name","value","disabled","required"],x=e.defineComponent({__name:"DateField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=r;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(d=>[e.createElementVNode("input",e.mergeProps({id:t.field.name,type:"date",name:t.field.name,value:t.modelValue??"",disabled:t.field.disabled===!0,required:t.field.required},d,{class:"vfs-input",onInput:o[0]||(o[0]=s=>l("update:modelValue",s.target.value)),onBlur:o[1]||(o[1]=s=>l("blur"))}),null,16,_)]),_:1},8,["field","error","touched"]))}}),ee={class:"vfs-array"},te={key:0,class:"vfs-field__label"},le=["onClick"],q=e.defineComponent({__name:"ArrayField",props:{field:{},form:{},components:{}},setup(t){const r=t,l=V.useRegistry(),u={text:g,email:g,number:$,textarea:E,select:C,checkbox:S,radio:N,date:x};function o(k){var n;return k.component?k.component:((n=r.components)==null?void 0:n[k.type])??l[k.type]??u[k.type]??null}const{rows:d,append:s,remove:m}=V.useFieldArray(r.form,r.field.name);function v(k){return D.getByPath(r.form.values.value,k.name)}function c(k,n){r.form.setField(k.name,n)}function b(k){var a;const n=r.form;(a=n.touchField)==null||a.call(n,k.name)}function h(k){return r.form.errors.value[k.name]??[]}function y(k){return r.form.touched.value[k.name]??!1}return(k,n)=>(e.openBlock(),e.createElementBlock("div",ee,[e.createVNode(B,{field:{...t.field,label:void 0},error:[],touched:!1},{default:e.withCtx(()=>[t.field.label?(e.openBlock(),e.createElementBlock("div",te,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),a=>(e.openBlock(),e.createElementBlock("div",{key:a.key,class:"vfs-array__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields,f=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:f.name},[o(f)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o(f)),{key:0,field:f,"model-value":v(f),error:h(f),touched:y(f),"onUpdate:modelValue":i=>c(f,i),onBlur:i=>b(f)},null,40,["field","model-value","error","touched","onUpdate:modelValue","onBlur"])):e.createCommentVNode("",!0)],64))),128)),e.createElementVNode("button",{type:"button",class:"vfs-array__remove",onClick:f=>e.unref(m)(a.index)},"Remove",8,le)]))),128)),e.createElementVNode("button",{type:"button",class:"vfs-array__add",onClick:n[0]||(n[0]=a=>e.unref(s)())},"+ Add row")]),_:1},8,["field"])]))}}),oe=["id","name","accept","multiple","disabled","required"],ne=["for"],re={key:0,class:"vfs-file-hint"},ae={key:0,class:"vfs-file-list"},ie={class:"vfs-file-name"},de={class:"vfs-file-size"},ue=["aria-label","onClick"],L=e.defineComponent({__name:"FileField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:r}){const l=t,u=r,o=e.ref(!1),d=e.ref(null),s=e.computed(()=>l.modelValue?Array.isArray(l.modelValue)?l.modelValue:[l.modelValue]:[]),m=e.computed(()=>l.field.multiple??!1);function v(a){if(!a||a.length===0){u("update:modelValue",null);return}m.value?u("update:modelValue",Array.from(a)):u("update:modelValue",a[0])}function c(a){v(a.target.files),u("blur")}function b(a){var f;o.value=!1,a.preventDefault(),v(((f=a.dataTransfer)==null?void 0:f.files)??null),u("blur")}function h(a){a.preventDefault(),o.value=!0}function y(){o.value=!1}function k(a){const f=s.value.filter((i,p)=>p!==a);f.length===0?(u("update:modelValue",null),d.value&&(d.value.value="")):m.value?u("update:modelValue",f):u("update:modelValue",f[0])}function n(a){return a<1024?`${a} B`:a<1024*1024?`${(a/1024).toFixed(1)} KB`:`${(a/(1024*1024)).toFixed(1)} MB`}return(a,f)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(i=>[e.createElementVNode("div",{class:e.normalizeClass(["vfs-file-zone",{"vfs-file-zone--dragging":o.value}]),onDragover:h,onDragleave:y,onDrop:b},[e.createElementVNode("input",e.mergeProps({id:t.field.name,ref_key:"inputRef",ref:d,type:"file",name:t.field.name,accept:t.field.accept,multiple:m.value,disabled:t.field.disabled===!0,required:t.field.required},i,{class:"vfs-file-input",onChange:c}),null,16,oe),e.createElementVNode("label",{for:t.field.name,class:"vfs-file-label"},[f[0]||(f[0]=e.createElementVNode("span",{class:"vfs-file-icon","aria-hidden":"true"},"📁",-1)),e.createElementVNode("span",null,e.toDisplayString(o.value?"Drop files here":"Click to upload or drag & drop"),1),t.field.accept?(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.field.accept),1)):e.createCommentVNode("",!0)],8,ne)],34),s.value.length?(e.openBlock(),e.createElementBlock("ul",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(p,F)=>(e.openBlock(),e.createElementBlock("li",{key:`${p.name}-${F}`,class:"vfs-file-item"},[e.createElementVNode("span",ie,e.toDisplayString(p.name),1),e.createElementVNode("span",de,e.toDisplayString(n(p.size)),1),e.createElementVNode("button",{type:"button",class:"vfs-file-remove","aria-label":`Remove ${p.name}`,onClick:ge=>k(F)}," × ",8,ue)]))),128))])):e.createCommentVNode("",!0)]),_:1},8,["field","error","touched"]))}}),ce={key:1,class:"vfs-group"},se={key:0},me=["disabled"],R=e.defineComponent({__name:"FormRenderer",props:{form:{},components:{},submitLabel:{},fields:{}},emits:["submit"],setup(t,{emit:r}){const l=t,u=V.useRegistry(),o=r,d={text:g,email:g,number:$,textarea:E,select:C,checkbox:S,radio:N,date:x,file:L};function s(n){var a;return n.component?n.component:((a=l.components)==null?void 0:a[n.type])??u[n.type]??d[n.type]??null}function m(n){return D.getByPath(l.form.values.value,n.name)}function v(n,a){l.form.setField(n.name,a)}function c(n){var f;const a=l.form;(f=a.touchField)==null||f.call(a,n.name)}function b(n){return l.form.errors.value[n.name]??[]}function h(n){return l.form.touched.value[n.name]??!1}const y=e.computed(()=>(l.fields??l.form.fields.value).filter(n=>n.visible!==!1));async function k(n){n.preventDefault(),await l.form.submit(),o("submit")}return(n,a)=>{const f=e.resolveComponent("FormRenderer",!0);return e.openBlock(),e.createElementBlock("form",{class:"vfs-form",novalidate:"",onSubmit:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,i=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i.name},[n.$slots[`field-${i.name}`]?e.renderSlot(n.$slots,`field-${i.name}`,{key:0,field:i,value:m(i),error:b(i),touched:h(i),setValue:p=>v(i,p),touch:()=>c(i)}):i.type==="group"?(e.openBlock(),e.createElementBlock("fieldset",ce,[i.label?(e.openBlock(),e.createElementBlock("legend",se,e.toDisplayString(i.label),1)):e.createCommentVNode("",!0),i.fields?(e.openBlock(),e.createBlock(f,{key:1,form:t.form,fields:i.fields,components:t.components},null,8,["form","fields","components"])):e.createCommentVNode("",!0)])):i.type==="array"?(e.openBlock(),e.createBlock(q,{key:2,field:i,form:t.form,components:t.components},null,8,["field","form","components"])):s(i)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s(i)),{key:3,field:i,"model-value":m(i),error:b(i),touched:h(i),"onUpdate:modelValue":p=>v(i,p),onBlur:p=>c(i)},e.createSlots({_:2},[n.$slots[`label-${i.name}`]?{name:"label",fn:e.withCtx(()=>[e.renderSlot(n.$slots,`label-${i.name}`,{field:i})]),key:"0"}:void 0,n.$slots[`error-${i.name}`]?{name:"error",fn:e.withCtx(()=>[e.renderSlot(n.$slots,`error-${i.name}`,{field:i,error:b(i)})]),key:"1"}:void 0]),1064,["field","model-value","error","touched","onUpdate:modelValue","onBlur"])):e.createCommentVNode("",!0)],64))),128)),e.renderSlot(n.$slots,"submit",{isSubmitting:t.form.isSubmitting.value,isValid:t.form.isValid.value},()=>[e.createElementVNode("button",{type:"submit",disabled:t.form.isSubmitting.value,class:"vfs-submit"},e.toDisplayString(t.submitLabel??"Submit"),9,me)])],32)}}}),fe={class:"vfs-multistep"},ve={class:"vfs-multistep__steps"},ke={class:"vfs-multistep__step-number"},be={key:0,class:"vfs-multistep__step-label"},pe={class:"vfs-multistep__progress"},Be={class:"vfs-multistep__nav"},he=["disabled"],ye=e.defineComponent({__name:"MultiStepFormRenderer",props:{form:{},components:{},submitLabel:{},nextLabel:{},backLabel:{},stepLabels:{}},emits:["submit"],setup(t,{emit:r}){const l=t,u=r;async function o(){await l.form.next()}async function d(){await l.form.submit(),u("submit")}return(s,m)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.form.steps,(v,c)=>{var b;return e.openBlock(),e.createElementBlock("div",{key:c,class:e.normalizeClass(["vfs-multistep__step",{"vfs-multistep__step--active":c===t.form.currentStep.value,"vfs-multistep__step--done":c<t.form.currentStep.value}])},[e.createElementVNode("span",ke,e.toDisplayString(c+1),1),(b=t.stepLabels)!=null&&b[c]?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(t.stepLabels[c]),1)):e.createCommentVNode("",!0)],2)}),128))]),e.createElementVNode("div",pe," Step "+e.toDisplayString(t.form.currentStep.value+1)+" of "+e.toDisplayString(t.form.totalSteps),1),e.createVNode(R,{form:t.form.form.value,components:t.components},{submit:e.withCtx(()=>[e.createElementVNode("div",Be,[t.form.isFirstStep.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vfs-multistep__back",onClick:m[0]||(m[0]=v=>t.form.back())},e.toDisplayString(t.backLabel??"← Back"),1)),t.form.isLastStep.value?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"vfs-submit",disabled:t.form.isSubmitting.value,onClick:d},e.toDisplayString(t.submitLabel??"Submit"),9,he)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"vfs-multistep__next",onClick:o},e.toDisplayString(t.nextLabel??"Next →"),1))])]),_:1},8,["form","components"])]))}});exports.ArrayField=q;exports.CheckboxField=S;exports.DateField=x;exports.FileField=L;exports.FormRenderer=R;exports.MultiStepFormRenderer=ye;exports.NumberField=$;exports.RadioField=N;exports.SelectField=C;exports.TextField=g;exports.TextareaField=E;

package/dist/ui.d.ts

@@ -14,6 +14,13 @@ form: UseFormReturn;
 components?: Partial<Record<FieldDefinition["type"], Component | string>>;
 /** Label for the submit button */
 submitLabel?: string;
+/**
+* Internal: the field list to render. Used by the `group` case to recurse
+* into `field.fields` instead of re-rendering the whole top-level schema
+* (which would recurse into the same group forever). Defaults to the
+* form's top-level fields — not meant to be passed by consumers.
+*/
+fields?: FieldDefinition[];
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 submit: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -22,6 +29,13 @@ form: UseFormReturn;
 components?: Partial<Record<FieldDefinition["type"], Component | string>>;
 /** Label for the submit button */
 submitLabel?: string;
+/**
+* Internal: the field list to render. Used by the `group` case to recurse
+* into `field.fields` instead of re-rendering the whole top-level schema
+* (which would recurse into the same group forever). Defaults to the
+* form's top-level fields — not meant to be passed by consumers.
+*/
+fields?: FieldDefinition[];
 }>>> & Readonly<{
 onSubmit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;