@macrulez/vue-form-schema 0.1.7 → 0.2.0

package/dist/ui.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),h=require("./MaskEngine-BwAs2Zb0.cjs"),L=["for"],D={key:0,class:"vfs-field__required","aria-hidden":"true"},w=["id"],B=e.defineComponent({__name:"BaseField",props:{field:{},error:{},touched:{type:Boolean}},setup(t){const a=t;return(n,u)=>{var o,r;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vfs-field",[`vfs-field--${a.field.type}`,{"vfs-field--error":t.touched&&((o=t.error)==null?void 0:o.length)}]])},[a.field.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:a.field.name,class:"vfs-field__label"},[e.createTextVNode(e.toDisplayString(a.field.label)+" ",1),a.field.required?(e.openBlock(),e.createElementBlock("span",D,"*")):e.createCommentVNode("",!0)],8,L)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default"),t.touched&&((r=t.error)!=null&&r.length)?(e.openBlock(),e.createElementBlock("ul",{key:1,id:`${a.field.name}-error`,class:"vfs-field__errors",role:"alert","aria-live":"polite"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.error,(f,c)=>(e.openBlock(),e.createElementBlock("li",{key:c,class:"vfs-field__error"},e.toDisplayString(f),1))),128))],8,w)):e.createCommentVNode("",!0)],2)}}}),R=["id","type","name","value","placeholder","disabled","required"],y=e.defineComponent({__name:"TextField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=t,u=a,o=e.ref(null);let r=null;e.onMounted(()=>{o.value&&n.field.mask&&(r=h.bindMask(o.value,n.field.mask))}),e.onUnmounted(()=>r==null?void 0:r());function f(c){u("update:modelValue",c.target.value)}return(c,i)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("input",{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,class:"vfs-input",onInput:f,onBlur:i[0]||(i[0]=k=>u("blur"))},null,40,R)]),_: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:a}){const n=a;function u(o){const r=o.target.value;n("update:modelValue",r===""?null:Number(r))}return(o,r)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("input",{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,class:"vfs-input",onInput:u,onBlur:r[0]||(r[0]=f=>n("blur"))},null,40,T)]),_:1},8,["field","error","touched"]))}}),A=["id","name","value","placeholder","disabled","required"],C=e.defineComponent({__name:"TextareaField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=a;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("textarea",{id:t.field.name,name:t.field.name,value:t.modelValue,placeholder:t.field.placeholder,disabled:t.field.disabled===!0,required:t.field.required,class:"vfs-textarea",onInput:o[0]||(o[0]=r=>n("update:modelValue",r.target.value)),onBlur:o[1]||(o[1]=r=>n("blur"))},null,40,A)]),_:1},8,["field","error","touched"]))}}),M={key:0,class:"vfs-select-loading"},U=["id","name","disabled","required"],I=["selected"],P=["value","selected"],E=e.defineComponent({__name:"SelectField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=t,u=a,o=e.computed(()=>Array.isArray(n.field.options)?n.field.options:[]);function r(f){const c=f.target,i=o.value.find(k=>String(k.value)===c.value);u("update:modelValue",(i==null?void 0:i.value)??c.value)}return(f,c)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[t.field.optionsLoading?(e.openBlock(),e.createElementBlock("div",M,"Loading…")):(e.openBlock(),e.createElementBlock("select",{key:1,id:t.field.name,name:t.field.name,disabled:t.field.disabled===!0||t.field.optionsLoading,required:t.field.required,class:"vfs-select",onChange:r,onBlur:c[0]||(c[0]=i=>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,I),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,i=>(e.openBlock(),e.createElementBlock("option",{key:String(i.value),value:String(i.value),selected:t.modelValue===i.value},e.toDisplayString(i.label),9,P))),128))],40,U))]),_:1},8,["field","error","touched"]))}}),z={class:"vfs-checkbox-label"},j=["id","name","checked","disabled","required"],O={key:0,class:"vfs-checkbox-text"},S=e.defineComponent({__name:"CheckboxField",props:{field:{},modelValue:{type:Boolean},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=a;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:{...t.field,label:void 0},error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("label",z,[e.createElementVNode("input",{id:t.field.name,type:"checkbox",name:t.field.name,checked:t.modelValue,disabled:t.field.disabled===!0,required:t.field.required,class:"vfs-checkbox",onChange:o[0]||(o[0]=r=>n("update:modelValue",r.target.checked)),onBlur:o[1]||(o[1]=r=>n("blur"))},null,40,j),t.field.label?(e.openBlock(),e.createElementBlock("span",O,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0)])]),_:1},8,["field","error","touched"]))}}),G=["aria-labelledby"],H=["name","value","checked","disabled","onChange"],x=e.defineComponent({__name:"RadioField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=a;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"vfs-radio-group",role:"radiogroup","aria-labelledby":t.field.name+"-label"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.field.options,r=>(e.openBlock(),e.createElementBlock("label",{key:String(r.value),class:"vfs-radio-label"},[e.createElementVNode("input",{type:"radio",name:t.field.name,value:String(r.value),checked:t.modelValue===r.value,disabled:t.field.disabled===!0,class:"vfs-radio",onChange:f=>n("update:modelValue",r.value),onBlur:o[0]||(o[0]=f=>n("blur"))},null,40,H),e.createTextVNode(" "+e.toDisplayString(r.label),1)]))),128))],8,G)]),_:1},8,["field","error","touched"]))}}),J=["id","name","value","disabled","required"],N=e.defineComponent({__name:"DateField",props:{field:{},modelValue:{},error:{},touched:{type:Boolean}},emits:["update:modelValue","blur"],setup(t,{emit:a}){const n=a;return(u,o)=>(e.openBlock(),e.createBlock(B,{field:t.field,error:t.error,touched:t.touched},{default:e.withCtx(()=>[e.createElementVNode("input",{id:t.field.name,type:"date",name:t.field.name,value:t.modelValue,disabled:t.field.disabled===!0,required:t.field.required,class:"vfs-input",onInput:o[0]||(o[0]=r=>n("update:modelValue",r.target.value)),onBlur:o[1]||(o[1]=r=>n("blur"))},null,40,J)]),_:1},8,["field","error","touched"]))}}),K={class:"vfs-array"},Q={key:0,class:"vfs-field__label"},W=["onClick"],F=e.defineComponent({__name:"ArrayField",props:{field:{},form:{},components:{}},setup(t){const a=t,n=h.useRegistry(),u={text:y,email:y,number:$,textarea:C,select:E,checkbox:S,radio:x,date:N};function o(s){var l;return s.component?s.component:((l=a.components)==null?void 0:l[s.type])??n[s.type]??u[s.type]??null}const{rows:r,append:f,remove:c}=h.useFieldArray(a.form,a.field.name);function i(s){return h.getByPath(a.form.values.value,s.name)}function k(s,l){a.form.setField(s.name,l)}function b(s){var m;const l=a.form;(m=l.touchField)==null||m.call(l,s.name)}function V(s){return a.form.errors.value[s.name]??[]}function p(s){return a.form.touched.value[s.name]??!1}return(s,l)=>(e.openBlock(),e.createElementBlock("div",K,[e.createVNode(B,{field:{...t.field,label:void 0},error:[],touched:!1},{default:e.withCtx(()=>[t.field.label?(e.openBlock(),e.createElementBlock("div",Q,e.toDisplayString(t.field.label),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),m=>(e.openBlock(),e.createElementBlock("div",{key:m.key,class:"vfs-array__row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.fields,v=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:v.name},[o(v)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o(v)),{key:0,field:v,"model-value":i(v),error:V(v),touched:p(v),"onUpdate:modelValue":d=>k(v,d),onBlur:d=>b(v)},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:v=>e.unref(c)(m.index)}," Remove ",8,W)]))),128)),e.createElementVNode("button",{type:"button",class:"vfs-array__add",onClick:l[0]||(l[0]=m=>e.unref(f)())}," + Add row ")]),_:1},8,["field"])]))}}),X={key:1,class:"vfs-group"},Y={key:0},Z=["disabled"],q=e.defineComponent({__name:"FormRenderer",props:{form:{},components:{},submitLabel:{}},emits:["submit"],setup(t,{emit:a}){const n=t,u=h.useRegistry(),o=a,r={text:y,email:y,number:$,textarea:C,select:E,checkbox:S,radio:x,date:N};function f(l){var m;return l.component?l.component:((m=n.components)==null?void 0:m[l.type])??u[l.type]??r[l.type]??null}function c(l){return h.getByPath(n.form.values.value,l.name)}function i(l,m){n.form.setField(l.name,m)}function k(l){var v;const m=n.form;(v=m.touchField)==null||v.call(m,l.name)}function b(l){return n.form.errors.value[l.name]??[]}function V(l){return n.form.touched.value[l.name]??!1}const p=e.computed(()=>n.form.fields.value.filter(l=>l.visible!==!1));async function s(l){l.preventDefault(),await n.form.submit(),o("submit")}return(l,m)=>{const v=e.resolveComponent("FormRenderer",!0);return e.openBlock(),e.createElementBlock("form",{class:"vfs-form",novalidate:"",onSubmit:s},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,d=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:d.name},[l.$slots[`field-${d.name}`]?e.renderSlot(l.$slots,`field-${d.name}`,{key:0,field:d,value:c(d),error:b(d),touched:V(d),setValue:g=>i(d,g),touch:()=>k(d)}):d.type==="group"?(e.openBlock(),e.createElementBlock("fieldset",X,[d.label?(e.openBlock(),e.createElementBlock("legend",Y,e.toDisplayString(d.label),1)):e.createCommentVNode("",!0),d.fields?(e.openBlock(),e.createBlock(v,{key:1,form:t.form,components:t.components},null,8,["form","components"])):e.createCommentVNode("",!0)])):d.type==="array"?(e.openBlock(),e.createBlock(F,{key:2,field:d,form:t.form,components:t.components},null,8,["field","form","components"])):f(d)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f(d)),{key:3,field:d,"model-value":c(d),error:b(d),touched:V(d),"onUpdate:modelValue":g=>i(d,g),onBlur:g=>k(d)},e.createSlots({_:2},[l.$slots[`label-${d.name}`]?{name:"label",fn:e.withCtx(()=>[e.renderSlot(l.$slots,`label-${d.name}`,{field:d})]),key:"0"}:void 0,l.$slots[`error-${d.name}`]?{name:"error",fn:e.withCtx(()=>[e.renderSlot(l.$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(l.$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,Z)])],32)}}}),_={class:"vfs-multistep"},ee={class:"vfs-multistep__steps"},te={class:"vfs-multistep__step-number"},le={key:0,class:"vfs-multistep__step-label"},oe={class:"vfs-multistep__progress"},ne={class:"vfs-multistep__nav"},re=["disabled"],ae=e.defineComponent({__name:"MultiStepFormRenderer",props:{form:{},components:{},submitLabel:{},nextLabel:{},backLabel:{},stepLabels:{}},emits:["submit"],setup(t,{emit:a}){const n=t,u=a;async function o(){await n.form.next()}async function r(){await n.form.submit(),u("submit")}return(f,c)=>(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.form.steps,(i,k)=>{var b;return e.openBlock(),e.createElementBlock("div",{key:k,class:e.normalizeClass(["vfs-multistep__step",{"vfs-multistep__step--active":k===t.form.currentStep.value,"vfs-multistep__step--done":k<t.form.currentStep.value}])},[e.createElementVNode("span",te,e.toDisplayString(k+1),1),(b=t.stepLabels)!=null&&b[k]?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(t.stepLabels[k]),1)):e.createCommentVNode("",!0)],2)}),128))]),e.createElementVNode("div",oe," Step "+e.toDisplayString(t.form.currentStep.value+1)+" of "+e.toDisplayString(t.form.totalSteps),1),e.createVNode(q,{form:t.form.form.value,components:t.components},{submit:e.withCtx(()=>[e.createElementVNode("div",ne,[t.form.isFirstStep.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vfs-multistep__back",onClick:c[0]||(c[0]=i=>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:r},e.toDisplayString(t.submitLabel??"Submit"),9,re)):(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=F;exports.CheckboxField=S;exports.DateField=N;exports.FormRenderer=q;exports.MultiStepFormRenderer=ae;exports.NumberField=$;exports.RadioField=x;exports.SelectField=E;exports.TextField=y;exports.TextareaField=C;
+"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>;
@@ -30,6 +44,8 @@ declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_10<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_11<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
@@ -83,6 +99,15 @@ declare type __VLS_TypePropsToRuntimeProps_10<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_11<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_11<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
@@ -175,7 +200,7 @@ declare type AsyncValidatorFn = (value: unknown, values: Record<string, unknown>
 
 export declare const CheckboxField: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_7<{
 field: FieldDefinition;
-modelValue: boolean;
+modelValue: boolean | null;
 error?: string[];
 touched?: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -183,7 +208,7 @@ blur: () => void;
 "update:modelValue": (value: boolean) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_7<{
 field: FieldDefinition;
-modelValue: boolean;
+modelValue: boolean | null;
 error?: string[];
 touched?: boolean;
 }>>> & Readonly<{
@@ -193,7 +218,7 @@ onBlur?: (() => any) | undefined;
 
 export declare const DateField: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -201,7 +226,7 @@ blur: () => void;
 "update:modelValue": (value: string) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>> & Readonly<{
@@ -215,7 +240,7 @@ declare interface FieldDefinition {
     name: string;
     label?: string;
     placeholder?: string;
-    defaultValue?: unknown;
+    defaultValue?: unknown | ((values: Record<string, unknown>) => unknown);
     required?: boolean;
     /** Static or dynamic disabled state */
     disabled?: boolean | ((values: Record<string, unknown>) => boolean);
@@ -250,6 +275,14 @@ declare interface FieldDefinition {
      * Receives FormFieldProps and must emit 'update:modelValue' and 'blur'.
      */
     component?: Component | string;
+    /** Accepted file types, e.g. "image/*,.pdf" — passed to <input accept> */
+    accept?: string;
+    /** Allow selecting multiple files */
+    multiple?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files (only relevant when multiple=true) */
+    maxFiles?: number;
 }
 
 declare interface FieldOption {
@@ -257,7 +290,25 @@ declare interface FieldOption {
     value: unknown;
 }
 
-declare type FieldType = 'text' | 'number' | 'email' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'date' | 'array' | 'group';
+declare type FieldType = 'text' | 'number' | 'email' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'date' | 'array' | 'group' | 'file';
+
+export declare const FileField: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_11<{
+field: FieldDefinition;
+modelValue: File | File[] | null;
+error?: string[];
+touched?: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+blur: () => void;
+"update:modelValue": (value: File | File[] | null) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_11<{
+field: FieldDefinition;
+modelValue: File | File[] | null;
+error?: string[];
+touched?: boolean;
+}>>> & Readonly<{
+onBlur?: (() => any) | undefined;
+"onUpdate:modelValue"?: ((value: File | File[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare const FormRenderer: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 
@@ -365,7 +416,7 @@ onBlur?: (() => any) | undefined;
 
 export declare const TextareaField: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_5<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -373,7 +424,7 @@ blur: () => void;
 "update:modelValue": (value: string) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_5<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>> & Readonly<{
@@ -383,7 +434,7 @@ onBlur?: (() => any) | undefined;
 
 export declare const TextField: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_3<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -391,7 +442,7 @@ blur: () => void;
 "update:modelValue": (value: string) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_3<{
 field: FieldDefinition;
-modelValue: string;
+modelValue: string | null;
 error?: string[];
 touched?: boolean;
 }>>> & Readonly<{