@josercl/form-maker 1.4.2 → 1.4.3

package/dist/index.iife.js

@@ -1 +1 @@
-var FormMaker=function(e){"use strict";const E=["onSubmit"],S={key:0},w=["disabled"],j=e.defineComponent({__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{default:()=>({})},fields:{default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{default:null},columnClass:{default:null},labelClass:{default:null},inputGroupClass:{default:null},inputWrapperClass:{default:null},inputErrorClass:{default:null},inputClass:{default:null},errorClass:{default:null},helpTextClass:{default:null},submitButtonClass:{default:null},submitButtonText:{default:"Submit"},unlabeledTypes:{}},emits:["submit","update:modelValue"],setup(n,{emit:r}){const l=n,i=r,t=()=>i("submit"),a=e.computed(()=>l.fields.length>0?l.fields.map(o=>{let u=o;return Array.isArray(o)||(u=[o]),u.map(k=>({...k,id:k.id||`formMaker_${new Date().getTime()}_${k.name}`}))}):Object.keys(l.modelValue).map(o=>[{name:o,label:o,id:`formMaker_${o}`}]));e.provide("labelClass",l.labelClass||e.inject("form-label")),e.provide("inputGroupClass",l.inputGroupClass||e.inject("input-group")),e.provide("inputWrapperClass",l.inputWrapperClass||e.inject("input-wrapper")),e.provide("inputErrorClass",l.inputErrorClass||e.inject("input-error")),e.provide("inputClass",l.inputClass||e.inject("input")),e.provide("errorClass",l.errorClass||e.inject("error")),e.provide("helpTextClass",l.helpTextClass||e.inject("help-text")),e.provide("unlabeledTypes",l.unlabeledTypes||e.inject("unlabeled-types"));const s=l.rowClass||e.inject("form-row"),p=l.columnClass||e.inject("form-column"),b=l.submitButtonClass||e.inject("submit-button"),m=o=>{const u=o.split(".");let k=l.modelValue;for(let h=0;h<u.length-1;h+=1){const y=k[u[h]];if(!y)break;k=y}return k},d=o=>{const u=o.split(".");return u[u.length-1]};return(o,u)=>{const k=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(t,["prevent"])},[o.loading?e.renderSlot(o.$slots,"loading",{key:0},()=>[e.createTextVNode(" Loading... ")]):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(h,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s)),key:`fieldRow_${y}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h,(C,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(p),C.columnClass]),key:`field_${y}_${g}`},[e.renderSlot(o.$slots,`${C.name}`,{field:C},()=>[e.createVNode(k,e.mergeProps({modelValue:m(C.name)[d(C.name)],"onUpdate:modelValue":c=>m(C.name)[d(C.name)]=c},C),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(o.$slots,"extra"),e.renderSlot(o.$slots,"divider",{},()=>[o.hasActions&&!o.hideDivider?(e.openBlock(),e.createElementBlock("hr",S)):e.createCommentVNode("",!0)]),o.hasActions?e.renderSlot(o.$slots,"actions",{key:1},()=>[e.renderSlot(o.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(b)),disabled:o.loading,type:"submit"},e.toDisplayString(o.submitButtonText),11,w)]),e.renderSlot(o.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,E)}}}),N=()=>{const n=e.inject("labelClass",null),r=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),i=e.inject("inputGroupClass",null),t=e.inject("inputErrorClass",null),a=e.inject("errorClass",null),s=e.inject("helpTextClass",null);return{labelClass:n,inputClass:r,inputWrapperClass:l,inputGroupClass:i,inputErrorClass:t,errorClass:a,helpTextClass:s}},F=(n,r=[])=>{const l=e.toRaw(r),i=e.ref(null);return e.watch(n,(t,a)=>{if(i.value=null,t!==a)for(let s=0;s<l.length;s+=1){const p=l[s];if(!p.validator(t)){i.value=p.message;break}}},{immediate:!0}),i};function B(n,r,l){const i=l??"modelValue";return e.computed({get:()=>n(),set:t=>r(`update:${i}`,t)})}const D=e.defineComponent({inheritAttrs:!1,__name:"FormMakerInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r),{labelClass:a,inputClass:s,inputWrapperClass:p,inputErrorClass:b,errorClass:m,helpTextClass:d}=N(),o=e.computed(()=>!!l.label),u=e.computed(()=>!!l.helpText),k=F(t,l.rules),h=e.computed(()=>!!l.error||!!k.value),y=e.computed(()=>l.error?l.error:k.value),C=e.inject("unlabeledTypes",[]),g=e.computed(()=>!new Set(C).has(l.type));return(c,T)=>{const J=e.resolveComponent("form-maker-label"),K=e.resolveComponent("form-maker-help"),Q=e.resolveComponent("form-maker-error"),X=e.resolveComponent("form-maker-input-wrapper");return e.openBlock(),e.createBlock(X,{class:e.normalizeClass([h.value&&e.unref(b),e.unref(p)])},{default:e.withCtx(()=>[g.value?e.renderSlot(c.$slots,"label",{key:0},()=>[o.value?(e.openBlock(),e.createBlock(J,{key:0,id:c.id,class:e.normalizeClass(e.unref(a)),label:c.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{},()=>[e.renderSlot(c.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${c.type}`),e.mergeProps({...c.$props,...c.$attrs},{class:[c.type!=="checkbox"&&e.unref(s),h.value&&e.unref(b)],modelValue:e.unref(t),"onUpdate:modelValue":T[0]||(T[0]=Y=>e.isRef(t)?t.value=Y:null)}),null,16,["class","modelValue"])),e.renderSlot(c.$slots,"after")]),e.renderSlot(c.$slots,"help",{},()=>[u.value?(e.openBlock(),e.createBlock(K,{key:0,class:e.normalizeClass(e.unref(d))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(c.$slots,"errors",{},()=>[h.value?(e.openBlock(),e.createBlock(Q,{key:0,class:e.normalizeClass(e.unref(m))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(y.value),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)])]),_:3},8,["class"])}}}),M=["checked","value","onClick"],A=e.defineComponent({__name:"CheckboxInput",props:{options:{type:[Boolean,Array],default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,i=r,t=e.computed(()=>Array.isArray(l.options)&&l.options.length===0),a=e.computed(()=>l.modelValue),s=e.computed(()=>(Array.isArray(a.value)?a.value:[a.value]).filter(d=>!!d)),p=e.computed(()=>t.value?[{label:l.label,value:!0}]:l.options),b=m=>{let d=[...s.value];d.indexOf(m)===-1?d.push(m):d=d.filter(o=>o!==m),t.value?i("update:modelValue",d.length>0):i("update:modelValue",d)};return(m,d)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${u}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(m.$props,{checked:s.value.indexOf(o.value)!==-1,value:o.value,type:"checkbox",onClick:()=>b(o.value)}),null,16,M),e.createTextVNode(" "+e.toDisplayString(o.label),1)])]))),128))}}),L=e.defineComponent({__name:"FileInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,i=t=>{const a=t.currentTarget;if(a.files&&a.files.length){const s=a.files[0];l("update:modelValue",s)}};return(t,a)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:i}),null,16))}});function V(n,r){return e.h(`${n.as??"div"}`,r.attrs,r.slots)}V.props={as:{type:String,required:!1,default:"div"}};function $(n,{slots:r,attrs:l}){return e.h("label",{...l,for:n.id},r.default())}$.props={id:{type:String,default:null}};const G=$,I=["checked","value","onChange"],O=e.defineComponent({__name:"RadioInput",props:{options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{},id:{default:void 0}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,i=t=>{l("update:modelValue",t)};return(t,a)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(s,p)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${p}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:s.value===t.modelValue,value:s.value,type:"radio",onChange:b=>i(s.value)}),null,16,I),e.createTextVNode(" "+e.toDisplayString(s.label),1)])]))),128))}}),P=["id","disabled","name","placeholder"],R=["label"],x=["value"],z=["value"],U=e.defineComponent({__name:"SelectInput",props:{options:{default:()=>[]},optionGroups:{default:()=>({})},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r),a=Object.keys(l.optionGroups).length>0,s=e.computed(()=>l.options.map(p=>typeof p=="object"?p:{label:p,value:p}));return(p,b)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:p.id,"onUpdate:modelValue":b[0]||(b[0]=m=>e.isRef(t)?t.value=m:null),disabled:p.disabled,name:p.name,placeholder:p.placeholder},[a?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.optionGroups,(m,d)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${d}`,label:d},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,x))),128))],8,R))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(m,d)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${d}`,value:m.value},e.toDisplayString(m.label),9,z))),128))],8,P)),[[e.vModelSelect,e.unref(t)]])}}),W=["id"],q=e.defineComponent({__name:"TextAreaInput",props:{modelValue:{}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:a.id,"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(t)?t.value=p:null)},{...a.$props,...a.$attrs}),null,16,W)),[[e.vModelText,e.unref(t)]])}}),H=["type"],f=e.defineComponent({__name:"BasicInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(t)?t.value=p:null),type:a.type},{...a.$props,...a.$attrs}),null,16,H)),[[e.vModelDynamic,e.unref(t)]])}}),_={unlabeledTypes:[],classes:{"form-row":"form-maker-row","form-column":"form-maker-column","form-label":"form-maker-label","input-wrapper":"form-maker-input-wrapper","input-error":"form-maker-input-error",input:"form-maker-input",error:"form-maker-error","help-text":"form-maker-help-text","submit-button":"form-maker-submit"},components:{"form-maker-input-color":f,"form-maker-input-date":f,"form-maker-input-email":f,"form-maker-input-month":f,"form-maker-input-number":f,"form-maker-input-password":f,"form-maker-input-search":f,"form-maker-input-tel":f,"form-maker-input-time":f,"form-maker-input-text":f,"form-maker-input-url":f,"form-maker-input-week":f,"form-maker-input-range":f,"form-maker-input-file":L,"form-maker-input-textarea":q,"form-maker-input-select":U,"form-maker-input-checkbox":A,"form-maker-input-radio":O,"form-maker-label":G,"form-maker-help":V,"form-maker-error":V,"form-maker-input-wrapper":V}};return{install:(n,r={})=>{const l={unlabeledTypes:r.unlabeledTypes!==void 0?r.unlabeledTypes:_.unlabeledTypes,classes:{..._.classes,...r.classes},components:{..._.components,...r.components}};n.component("FormMaker",j),n.component("FormMakerInput",D),n.provide("unlabeled-types",l.unlabeledTypes),Object.keys(l.classes).forEach(i=>{n.provide(i,l.classes[i])}),Object.keys(l.components).forEach(i=>{n.component(i,l.components[i])})}}}(Vue);
+var FormMaker=function(e){"use strict";const E=["onSubmit"],S={key:0},w=["disabled"],j=e.defineComponent({__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{default:()=>({})},fields:{default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{default:null},columnClass:{default:null},labelClass:{default:null},inputGroupClass:{default:null},inputWrapperClass:{default:null},inputErrorClass:{default:null},inputClass:{default:null},errorClass:{default:null},helpTextClass:{default:null},submitButtonClass:{default:null},submitButtonText:{default:"Submit"},unlabeledTypes:{}},emits:["submit","submit-error","update:modelValue"],setup(n,{emit:r}){const l=n,a=r,t=e.computed(()=>l.fields.length>0?l.fields.map(o=>{let u=o;return Array.isArray(o)||(u=[o]),u.map(m=>({...m,id:m.id||`formMaker_${new Date().getTime()}_${m.field}`}))}):Object.keys(l.modelValue).map(o=>[{field:o,label:o,id:`formMaker_${o}`}]));e.provide("labelClass",l.labelClass||e.inject("form-label")),e.provide("inputGroupClass",l.inputGroupClass||e.inject("input-group")),e.provide("inputWrapperClass",l.inputWrapperClass||e.inject("input-wrapper")),e.provide("inputErrorClass",l.inputErrorClass||e.inject("input-error")),e.provide("inputClass",l.inputClass||e.inject("input")),e.provide("errorClass",l.errorClass||e.inject("error")),e.provide("helpTextClass",l.helpTextClass||e.inject("help-text")),e.provide("unlabeledTypes",l.unlabeledTypes||e.inject("unlabeled-types"));const s=l.rowClass||e.inject("form-row"),i=l.columnClass||e.inject("form-column"),p=l.submitButtonClass||e.inject("submit-button"),C=o=>{const u=o.split(".");let m=l.modelValue;for(let h=0;h<u.length-1;h+=1){const y=m[u[h]];if(!y)break;m=y}return m},d=o=>{const u=o.split(".");return u[u.length-1]},c=()=>{for(const o in t.value)for(const u in t.value[o]){const m=t.value[o][u];if(m.rules===void 0||m.rules.length===0)continue;const h=C(m.field)[d(m.field)];for(const y in m.rules){const k=m.rules[y];if(!k.validator(h)){console.error(`${k.message}`),a("submit-error",k.message);return}}}a("submit")};return(o,u)=>{const m=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(c,["prevent","stop"])},[o.loading?e.renderSlot(o.$slots,"loading",{key:0},()=>[e.createTextVNode(" Loading... ")]):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(h,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s)),key:`fieldRow_${y}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h,(k,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(i),k.columnClass]),key:`field_${y}_${_}`},[e.renderSlot(o.$slots,`${k.field}`,{field:k},()=>[e.createVNode(m,e.mergeProps({modelValue:C(k.field)[d(k.field)],"onUpdate:modelValue":f=>C(k.field)[d(k.field)]=f},k),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(o.$slots,"extra"),e.renderSlot(o.$slots,"divider",{},()=>[o.hasActions&&!o.hideDivider?(e.openBlock(),e.createElementBlock("hr",S)):e.createCommentVNode("",!0)]),o.hasActions?e.renderSlot(o.$slots,"actions",{key:1},()=>[e.renderSlot(o.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(p)),disabled:o.loading,type:"submit"},e.toDisplayString(o.submitButtonText),11,w)]),e.renderSlot(o.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,E)}}}),N=()=>{const n=e.inject("labelClass",null),r=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),a=e.inject("inputGroupClass",null),t=e.inject("inputErrorClass",null),s=e.inject("errorClass",null),i=e.inject("helpTextClass",null);return{labelClass:n,inputClass:r,inputWrapperClass:l,inputGroupClass:a,inputErrorClass:t,errorClass:s,helpTextClass:i}},F=(n,r=[])=>{const l=e.toRaw(r),a=e.ref(null);return e.watch(n,(t,s)=>{if(a.value=null,t!==s)for(let i=0;i<l.length;i+=1){const p=l[i];if(!p.validator(t)){a.value=p.message;break}}},{immediate:!0}),a};function B(n,r,l){const a=l??"modelValue";return e.computed({get:()=>n(),set:t=>r(`update:${a}`,t)})}const D=e.defineComponent({inheritAttrs:!1,__name:"FormMakerInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r),{labelClass:s,inputClass:i,inputWrapperClass:p,inputErrorClass:C,errorClass:d,helpTextClass:c}=N(),o=e.computed(()=>!!l.label),u=e.computed(()=>!!l.helpText),m=F(t,l.rules),h=e.computed(()=>!!l.error||!!m.value),y=e.computed(()=>l.error?l.error:m.value),k=e.inject("unlabeledTypes",[]),_=e.computed(()=>!new Set(k).has(l.type));return(f,T)=>{const J=e.resolveComponent("form-maker-label"),K=e.resolveComponent("form-maker-help"),Q=e.resolveComponent("form-maker-error"),X=e.resolveComponent("form-maker-input-wrapper");return e.openBlock(),e.createBlock(X,{class:e.normalizeClass([h.value&&e.unref(C),e.unref(p)])},{default:e.withCtx(()=>[_.value?e.renderSlot(f.$slots,"label",{key:0},()=>[o.value?(e.openBlock(),e.createBlock(J,{key:0,id:f.id,class:e.normalizeClass(e.unref(s)),label:f.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(f.$slots,"default",{},()=>[e.renderSlot(f.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${f.type}`),e.mergeProps({...f.$props,...f.$attrs},{class:[f.type!=="checkbox"&&e.unref(i),h.value&&e.unref(C)],modelValue:e.unref(t),"onUpdate:modelValue":T[0]||(T[0]=Y=>e.isRef(t)?t.value=Y:null)}),null,16,["class","modelValue"])),e.renderSlot(f.$slots,"after")]),e.renderSlot(f.$slots,"help",{},()=>[u.value?(e.openBlock(),e.createBlock(K,{key:0,class:e.normalizeClass(e.unref(c))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(f.$slots,"errors",{},()=>[h.value?(e.openBlock(),e.createBlock(Q,{key:0,class:e.normalizeClass(e.unref(d))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(y.value),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)])]),_:3},8,["class"])}}}),M=["checked","value","onClick"],A=e.defineComponent({__name:"CheckboxInput",props:{options:{type:[Boolean,Array],default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,a=r,t=e.computed(()=>Array.isArray(l.options)&&l.options.length===0),s=e.computed(()=>l.modelValue),i=e.computed(()=>(Array.isArray(s.value)?s.value:[s.value]).filter(c=>!!c)),p=e.computed(()=>t.value?[{label:l.label,value:!0}]:l.options),C=d=>{let c=[...i.value];c.indexOf(d)===-1?c.push(d):c=c.filter(o=>o!==d),t.value?a("update:modelValue",c.length>0):a("update:modelValue",c)};return(d,c)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${u}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(d.$props,{checked:i.value.indexOf(o.value)!==-1,value:o.value,type:"checkbox",onClick:()=>C(o.value)}),null,16,M),e.createTextVNode(" "+e.toDisplayString(o.label),1)])]))),128))}}),L=e.defineComponent({__name:"FileInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,a=t=>{const s=t.currentTarget;if(s.files&&s.files.length){const i=s.files[0];l("update:modelValue",i)}};return(t,s)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:a}),null,16))}});function V(n,r){return e.h(`${n.as??"div"}`,r.attrs,r.slots)}V.props={as:{type:String,required:!1,default:"div"}};function $(n,{slots:r,attrs:l}){return e.h("label",{...l,for:n.id},r.default())}$.props={id:{type:String,default:null}};const G=$,I=["checked","value","onChange"],O=e.defineComponent({__name:"RadioInput",props:{options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{},id:{default:void 0}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,a=t=>{l("update:modelValue",t)};return(t,s)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,p)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${p}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:i.value===t.modelValue,value:i.value,type:"radio",onChange:C=>a(i.value)}),null,16,I),e.createTextVNode(" "+e.toDisplayString(i.label),1)])]))),128))}}),P=["id","disabled","name","placeholder"],R=["label"],x=["value"],z=["value"],U=e.defineComponent({__name:"SelectInput",props:{options:{default:()=>[]},optionGroups:{default:()=>({})},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r),s=Object.keys(l.optionGroups).length>0,i=e.computed(()=>l.options.map(p=>typeof p=="object"?p:{label:p,value:p}));return(p,C)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:p.id,"onUpdate:modelValue":C[0]||(C[0]=d=>e.isRef(t)?t.value=d:null),disabled:p.disabled,name:p.name,placeholder:p.placeholder},[s?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.optionGroups,(d,c)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${c}`,label:c},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,x))),128))],8,R))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(i.value,(d,c)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${c}`,value:d.value},e.toDisplayString(d.label),9,z))),128))],8,P)),[[e.vModelSelect,e.unref(t)]])}}),W=["id"],q=e.defineComponent({__name:"TextAreaInput",props:{modelValue:{}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r);return(s,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:s.id,"onUpdate:modelValue":i[0]||(i[0]=p=>e.isRef(t)?t.value=p:null)},{...s.$props,...s.$attrs}),null,16,W)),[[e.vModelText,e.unref(t)]])}}),H=["type"],b=e.defineComponent({__name:"BasicInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=B(()=>l.modelValue,r);return(s,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":i[0]||(i[0]=p=>e.isRef(t)?t.value=p:null),type:s.type},{...s.$props,...s.$attrs}),null,16,H)),[[e.vModelDynamic,e.unref(t)]])}}),g={unlabeledTypes:[],classes:{"form-row":"form-maker-row","form-column":"form-maker-column","form-label":"form-maker-label","input-wrapper":"form-maker-input-wrapper","input-error":"form-maker-input-error",input:"form-maker-input",error:"form-maker-error","help-text":"form-maker-help-text","submit-button":"form-maker-submit"},components:{"form-maker-input-color":b,"form-maker-input-date":b,"form-maker-input-email":b,"form-maker-input-month":b,"form-maker-input-number":b,"form-maker-input-password":b,"form-maker-input-search":b,"form-maker-input-tel":b,"form-maker-input-time":b,"form-maker-input-text":b,"form-maker-input-url":b,"form-maker-input-week":b,"form-maker-input-range":b,"form-maker-input-file":L,"form-maker-input-textarea":q,"form-maker-input-select":U,"form-maker-input-checkbox":A,"form-maker-input-radio":O,"form-maker-label":G,"form-maker-help":V,"form-maker-error":V,"form-maker-input-wrapper":V}};return{install:(n,r={})=>{const l={unlabeledTypes:r.unlabeledTypes!==void 0?r.unlabeledTypes:g.unlabeledTypes,classes:{...g.classes,...r.classes},components:{...g.components,...r.components}};n.component("FormMaker",j),n.component("FormMakerInput",D),n.provide("unlabeled-types",l.unlabeledTypes),Object.keys(l.classes).forEach(a=>{n.provide(a,l.classes[a])}),Object.keys(l.components).forEach(a=>{n.component(a,l.components[a])})}}}(Vue);

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as B, computed as C, provide as g, inject as m, resolveComponent as O, openBlock as i, createElementBlock as p, withModifiers as Y, renderSlot as v, createTextVNode as G, createCommentVNode as E, Fragment as A, renderList as S, normalizeClass as M, unref as k, createVNode as Z, mergeProps as F, createElementVNode as j, toDisplayString as T, toRaw as ee, ref as le, watch as te, createBlock as I, withCtx as D, resolveDynamicComponent as ae, isRef as U, h as z, withDirectives as P, vModelSelect as oe, vModelText as re, vModelDynamic as se } from "vue";
-const ne = ["onSubmit"], ue = { key: 0 }, ie = ["disabled"], pe = /* @__PURE__ */ B({
+import { defineComponent as w, computed as $, provide as T, inject as f, resolveComponent as O, openBlock as i, createElementBlock as d, withModifiers as Y, renderSlot as k, createTextVNode as G, createCommentVNode as E, Fragment as A, renderList as S, normalizeClass as M, unref as y, createVNode as Z, mergeProps as F, createElementVNode as j, toDisplayString as B, toRaw as ee, ref as le, watch as te, createBlock as I, withCtx as R, resolveDynamicComponent as ae, isRef as W, h as z, withDirectives as P, vModelSelect as oe, vModelText as re, vModelDynamic as se } from "vue";
+const ne = ["onSubmit"], ue = { key: 0 }, ie = ["disabled"], de = /* @__PURE__ */ w({
   __name: "FormMaker",
   props: {
     loading: { type: Boolean, default: !1 },
@@ -20,116 +20,132 @@ const ne = ["onSubmit"], ue = { key: 0 }, ie = ["disabled"], pe = /* @__PURE__ *
     submitButtonText: { default: "Submit" },
     unlabeledTypes: {}
   },
-  emits: ["submit", "update:modelValue"],
+  emits: ["submit", "submit-error", "update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, n = a, l = () => n("submit"), r = C(() => e.fields.length > 0 ? e.fields.map((t) => {
+    const e = o, r = a, l = $(() => e.fields.length > 0 ? e.fields.map((t) => {
       let b = t;
-      return Array.isArray(t) || (b = [t]), b.map((y) => ({
-        ...y,
-        id: y.id || `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${y.name}`
+      return Array.isArray(t) || (b = [t]), b.map((m) => ({
+        ...m,
+        id: m.id || `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${m.field}`
       }));
     }) : Object.keys(e.modelValue).map((t) => [
       {
-        name: t,
+        field: t,
         label: t,
         id: `formMaker_${t}`
       }
     ]));
-    g("labelClass", e.labelClass || m("form-label")), g("inputGroupClass", e.inputGroupClass || m("input-group")), g("inputWrapperClass", e.inputWrapperClass || m("input-wrapper")), g("inputErrorClass", e.inputErrorClass || m("input-error")), g("inputClass", e.inputClass || m("input")), g("errorClass", e.errorClass || m("error")), g("helpTextClass", e.helpTextClass || m("help-text")), g("unlabeledTypes", e.unlabeledTypes || m("unlabeled-types"));
-    const s = e.rowClass || m("form-row"), u = e.columnClass || m("form-column"), _ = e.submitButtonClass || m("submit-button"), f = (t) => {
+    T("labelClass", e.labelClass || f("form-label")), T("inputGroupClass", e.inputGroupClass || f("input-group")), T("inputWrapperClass", e.inputWrapperClass || f("input-wrapper")), T("inputErrorClass", e.inputErrorClass || f("input-error")), T("inputClass", e.inputClass || f("input")), T("errorClass", e.errorClass || f("error")), T("helpTextClass", e.helpTextClass || f("help-text")), T("unlabeledTypes", e.unlabeledTypes || f("unlabeled-types"));
+    const s = e.rowClass || f("form-row"), n = e.columnClass || f("form-column"), u = e.submitButtonClass || f("submit-button"), C = (t) => {
       const b = t.split(".");
-      let y = e.modelValue;
+      let m = e.modelValue;
       for (let V = 0; V < b.length - 1; V += 1) {
-        const w = y[b[V]];
-        if (!w)
+        const g = m[b[V]];
+        if (!g)
           break;
-        y = w;
+        m = g;
       }
-      return y;
-    }, d = (t) => {
+      return m;
+    }, p = (t) => {
       const b = t.split(".");
       return b[b.length - 1];
+    }, c = () => {
+      for (const t in l.value)
+        for (const b in l.value[t]) {
+          const m = l.value[t][b];
+          if (m.rules === void 0 || m.rules.length === 0)
+            continue;
+          const V = C(m.field)[p(m.field)];
+          for (const g in m.rules) {
+            const h = m.rules[g];
+            if (!h.validator(V)) {
+              console.error(`${h.message}`), r("submit-error", h.message);
+              return;
+            }
+          }
+        }
+      r("submit");
     };
     return (t, b) => {
-      const y = O("form-maker-input");
-      return i(), p("form", {
+      const m = O("form-maker-input");
+      return i(), d("form", {
         class: "form-maker",
-        onSubmit: Y(l, ["prevent"])
+        onSubmit: Y(c, ["prevent", "stop"])
       }, [
-        t.loading ? v(t.$slots, "loading", { key: 0 }, () => [
+        t.loading ? k(t.$slots, "loading", { key: 0 }, () => [
           G(" Loading... ")
         ]) : E("", !0),
-        v(t.$slots, "default", {}, () => [
-          (i(!0), p(A, null, S(r.value, (V, w) => (i(), p("div", {
-            class: M(k(s)),
-            key: `fieldRow_${w}`
+        k(t.$slots, "default", {}, () => [
+          (i(!0), d(A, null, S(l.value, (V, g) => (i(), d("div", {
+            class: M(y(s)),
+            key: `fieldRow_${g}`
           }, [
-            (i(!0), p(A, null, S(V, ($, L) => (i(), p("div", {
-              class: M([k(u), $.columnClass]),
-              key: `field_${w}_${L}`
+            (i(!0), d(A, null, S(V, (h, D) => (i(), d("div", {
+              class: M([y(n), h.columnClass]),
+              key: `field_${g}_${D}`
             }, [
-              v(t.$slots, `${$.name}`, { field: $ }, () => [
-                Z(y, F({
-                  modelValue: f($.name)[d($.name)],
-                  "onUpdate:modelValue": (c) => f($.name)[d($.name)] = c
-                }, $), null, 16, ["modelValue", "onUpdate:modelValue"])
+              k(t.$slots, `${h.field}`, { field: h }, () => [
+                Z(m, F({
+                  modelValue: C(h.field)[p(h.field)],
+                  "onUpdate:modelValue": (v) => C(h.field)[p(h.field)] = v
+                }, h), null, 16, ["modelValue", "onUpdate:modelValue"])
               ])
             ], 2))), 128))
           ], 2))), 128))
         ]),
-        v(t.$slots, "extra"),
-        v(t.$slots, "divider", {}, () => [
-          t.hasActions && !t.hideDivider ? (i(), p("hr", ue)) : E("", !0)
+        k(t.$slots, "extra"),
+        k(t.$slots, "divider", {}, () => [
+          t.hasActions && !t.hideDivider ? (i(), d("hr", ue)) : E("", !0)
         ]),
-        t.hasActions ? v(t.$slots, "actions", { key: 1 }, () => [
-          v(t.$slots, "submit-button", {}, () => [
+        t.hasActions ? k(t.$slots, "actions", { key: 1 }, () => [
+          k(t.$slots, "submit-button", {}, () => [
             j("button", {
-              class: M(k(_)),
+              class: M(y(u)),
               disabled: t.loading,
               type: "submit"
-            }, T(t.submitButtonText), 11, ie)
+            }, B(t.submitButtonText), 11, ie)
           ]),
-          v(t.$slots, "extra-buttons")
+          k(t.$slots, "extra-buttons")
         ]) : E("", !0)
       ], 40, ne);
     };
   }
-}), de = () => {
-  const o = m("labelClass", null), a = m("inputClass", null), e = m("inputWrapperClass", null), n = m("inputGroupClass", null), l = m("inputErrorClass", null), r = m("errorClass", null), s = m("helpTextClass", null);
+}), pe = () => {
+  const o = f("labelClass", null), a = f("inputClass", null), e = f("inputWrapperClass", null), r = f("inputGroupClass", null), l = f("inputErrorClass", null), s = f("errorClass", null), n = f("helpTextClass", null);
   return {
     labelClass: o,
     inputClass: a,
     inputWrapperClass: e,
-    inputGroupClass: n,
+    inputGroupClass: r,
     inputErrorClass: l,
-    errorClass: r,
-    helpTextClass: s
+    errorClass: s,
+    helpTextClass: n
   };
 }, me = (o, a = []) => {
-  const e = ee(a), n = le(null);
+  const e = ee(a), r = le(null);
   return te(
     o,
-    (l, r) => {
-      if (n.value = null, l !== r)
-        for (let s = 0; s < e.length; s += 1) {
-          const u = e[s];
+    (l, s) => {
+      if (r.value = null, l !== s)
+        for (let n = 0; n < e.length; n += 1) {
+          const u = e[n];
           if (!u.validator(l)) {
-            n.value = u.message;
+            r.value = u.message;
             break;
           }
         }
     },
     { immediate: !0 }
-  ), n;
+  ), r;
 };
-function W(o, a, e) {
-  const n = e ?? "modelValue";
-  return C({
+function L(o, a, e) {
+  const r = e ?? "modelValue";
+  return $({
     get: () => o(),
-    set: (l) => a(`update:${n}`, l)
+    set: (l) => a(`update:${r}`, l)
   });
 }
-const fe = /* @__PURE__ */ B({
+const fe = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "FormMakerInput",
   props: {
@@ -145,60 +161,60 @@ const fe = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, l = W(() => e.modelValue, a), {
-      labelClass: r,
-      inputClass: s,
+    const e = o, l = L(() => e.modelValue, a), {
+      labelClass: s,
+      inputClass: n,
       inputWrapperClass: u,
-      inputErrorClass: _,
-      errorClass: f,
-      helpTextClass: d
-    } = de(), t = C(() => !!e.label), b = C(() => !!e.helpText), y = me(l, e.rules), V = C(() => !!e.error || !!y.value), w = C(() => e.error ? e.error : y.value), $ = m("unlabeledTypes", []), L = C(() => !new Set($).has(e.type));
-    return (c, q) => {
+      inputErrorClass: C,
+      errorClass: p,
+      helpTextClass: c
+    } = pe(), t = $(() => !!e.label), b = $(() => !!e.helpText), m = me(l, e.rules), V = $(() => !!e.error || !!m.value), g = $(() => e.error ? e.error : m.value), h = f("unlabeledTypes", []), D = $(() => !new Set(h).has(e.type));
+    return (v, q) => {
       const x = O("form-maker-label"), J = O("form-maker-help"), K = O("form-maker-error"), Q = O("form-maker-input-wrapper");
       return i(), I(Q, {
-        class: M([V.value && k(_), k(u)])
+        class: M([V.value && y(C), y(u)])
       }, {
-        default: D(() => [
-          L.value ? v(c.$slots, "label", { key: 0 }, () => [
+        default: R(() => [
+          D.value ? k(v.$slots, "label", { key: 0 }, () => [
             t.value ? (i(), I(x, {
               key: 0,
-              id: c.id,
-              class: M(k(r)),
-              label: c.label
+              id: v.id,
+              class: M(y(s)),
+              label: v.label
             }, {
-              default: D(() => [
-                G(T(c.label), 1)
+              default: R(() => [
+                G(B(v.label), 1)
               ]),
               _: 1
             }, 8, ["id", "class", "label"])) : E("", !0)
           ]) : E("", !0),
-          v(c.$slots, "default", {}, () => [
-            v(c.$slots, "before"),
-            (i(), I(ae(`form-maker-input-${c.type}`), F({ ...c.$props, ...c.$attrs }, {
-              class: [c.type !== "checkbox" && k(s), V.value && k(_)],
-              modelValue: k(l),
-              "onUpdate:modelValue": q[0] || (q[0] = (X) => U(l) ? l.value = X : null)
+          k(v.$slots, "default", {}, () => [
+            k(v.$slots, "before"),
+            (i(), I(ae(`form-maker-input-${v.type}`), F({ ...v.$props, ...v.$attrs }, {
+              class: [v.type !== "checkbox" && y(n), V.value && y(C)],
+              modelValue: y(l),
+              "onUpdate:modelValue": q[0] || (q[0] = (X) => W(l) ? l.value = X : null)
             }), null, 16, ["class", "modelValue"])),
-            v(c.$slots, "after")
+            k(v.$slots, "after")
           ]),
-          v(c.$slots, "help", {}, () => [
+          k(v.$slots, "help", {}, () => [
             b.value ? (i(), I(J, {
               key: 0,
-              class: M(k(d))
+              class: M(y(c))
             }, {
-              default: D(() => [
-                G(T(c.helpText), 1)
+              default: R(() => [
+                G(B(v.helpText), 1)
               ]),
               _: 1
             }, 8, ["class"])) : E("", !0)
           ]),
-          v(c.$slots, "errors", {}, () => [
+          k(v.$slots, "errors", {}, () => [
             V.value ? (i(), I(K, {
               key: 0,
-              class: M(k(f))
+              class: M(y(p))
             }, {
-              default: D(() => [
-                G(T(w.value), 1)
+              default: R(() => [
+                G(B(g.value), 1)
               ]),
               _: 1
             }, 8, ["class"])) : E("", !0)
@@ -208,7 +224,7 @@ const fe = /* @__PURE__ */ B({
       }, 8, ["class"]);
     };
   }
-}), ce = ["checked", "value", "onClick"], be = /* @__PURE__ */ B({
+}), ce = ["checked", "value", "onClick"], be = /* @__PURE__ */ w({
   __name: "CheckboxInput",
   props: {
     options: { type: [Boolean, Array], default: () => [] },
@@ -223,30 +239,30 @@ const fe = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, n = a, l = C(() => Array.isArray(e.options) && e.options.length === 0), r = C(() => e.modelValue), s = C(() => (Array.isArray(r.value) ? r.value : [r.value]).filter((d) => !!d)), u = C(() => l.value ? [
+    const e = o, r = a, l = $(() => Array.isArray(e.options) && e.options.length === 0), s = $(() => e.modelValue), n = $(() => (Array.isArray(s.value) ? s.value : [s.value]).filter((c) => !!c)), u = $(() => l.value ? [
       {
         label: e.label,
         value: !0
       }
-    ] : e.options), _ = (f) => {
-      let d = [...s.value];
-      d.indexOf(f) === -1 ? d.push(f) : d = d.filter((t) => t !== f), l.value ? n("update:modelValue", d.length > 0) : n("update:modelValue", d);
+    ] : e.options), C = (p) => {
+      let c = [...n.value];
+      c.indexOf(p) === -1 ? c.push(p) : c = c.filter((t) => t !== p), l.value ? r("update:modelValue", c.length > 0) : r("update:modelValue", c);
     };
-    return (f, d) => (i(!0), p(A, null, S(u.value, (t, b) => (i(), p("div", {
+    return (p, c) => (i(!0), d(A, null, S(u.value, (t, b) => (i(), d("div", {
       key: `option_${b}`
     }, [
       j("label", null, [
-        j("input", F(f.$props, {
-          checked: s.value.indexOf(t.value) !== -1,
+        j("input", F(p.$props, {
+          checked: n.value.indexOf(t.value) !== -1,
           value: t.value,
           type: "checkbox",
-          onClick: () => _(t.value)
+          onClick: () => C(t.value)
         }), null, 16, ce),
-        G(" " + T(t.label), 1)
+        G(" " + B(t.label), 1)
       ])
     ]))), 128));
   }
-}), ve = /* @__PURE__ */ B({
+}), ve = /* @__PURE__ */ w({
   __name: "FileInput",
   props: {
     loading: { type: Boolean, default: !1 },
@@ -261,23 +277,23 @@ const fe = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = a, n = (l) => {
-      const r = l.currentTarget;
-      if (r.files && r.files.length) {
-        const s = r.files[0];
-        e("update:modelValue", s);
+    const e = a, r = (l) => {
+      const s = l.currentTarget;
+      if (s.files && s.files.length) {
+        const n = s.files[0];
+        e("update:modelValue", n);
       }
     };
-    return (l, r) => (i(), p("input", F(l.$props, {
+    return (l, s) => (i(), d("input", F(l.$props, {
       type: "file",
-      onChange: n
+      onChange: r
     }), null, 16));
   }
 });
-function R(o, a) {
+function U(o, a) {
   return z(`${o.as ?? "div"}`, a.attrs, a.slots);
 }
-R.props = {
+U.props = {
   as: {
     type: String,
     required: !1,
@@ -293,7 +309,7 @@ H.props = {
     default: null
   }
 };
-const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
+const he = H, ke = ["checked", "value", "onChange"], ye = /* @__PURE__ */ w({
   __name: "RadioInput",
   props: {
     options: { default: () => [] },
@@ -309,24 +325,24 @@ const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = a, n = (l) => {
+    const e = a, r = (l) => {
       e("update:modelValue", l);
     };
-    return (l, r) => (i(!0), p(A, null, S(l.options, (s, u) => (i(), p("div", {
+    return (l, s) => (i(!0), d(A, null, S(l.options, (n, u) => (i(), d("div", {
       key: `option_${u}`
     }, [
       j("label", null, [
         j("input", F(l.$props, {
-          checked: s.value === l.modelValue,
-          value: s.value,
+          checked: n.value === l.modelValue,
+          value: n.value,
           type: "radio",
-          onChange: (_) => n(s.value)
-        }), null, 16, he),
-        G(" " + T(s.label), 1)
+          onChange: (C) => r(n.value)
+        }), null, 16, ke),
+        G(" " + B(n.label), 1)
       ])
     ]))), 128));
   }
-}), Ce = ["id", "disabled", "name", "placeholder"], _e = ["label"], $e = ["value"], Ve = ["value"], ge = /* @__PURE__ */ B({
+}), Ce = ["id", "disabled", "name", "placeholder"], _e = ["label"], $e = ["value"], Ve = ["value"], ge = /* @__PURE__ */ w({
   __name: "SelectInput",
   props: {
     options: { default: () => [] },
@@ -343,49 +359,49 @@ const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, l = W(() => e.modelValue, a), r = Object.keys(e.optionGroups).length > 0, s = C(() => e.options.map((u) => typeof u == "object" ? u : {
+    const e = o, l = L(() => e.modelValue, a), s = Object.keys(e.optionGroups).length > 0, n = $(() => e.options.map((u) => typeof u == "object" ? u : {
       label: u,
       value: u
     }));
-    return (u, _) => P((i(), p("select", {
+    return (u, C) => P((i(), d("select", {
       id: u.id,
-      "onUpdate:modelValue": _[0] || (_[0] = (f) => U(l) ? l.value = f : null),
+      "onUpdate:modelValue": C[0] || (C[0] = (p) => W(l) ? l.value = p : null),
       disabled: u.disabled,
       name: u.name,
       placeholder: u.placeholder
     }, [
-      r ? (i(!0), p(A, { key: 0 }, S(u.optionGroups, (f, d) => (i(), p("optgroup", {
-        key: `optGroup_${d}`,
-        label: d
+      s ? (i(!0), d(A, { key: 0 }, S(u.optionGroups, (p, c) => (i(), d("optgroup", {
+        key: `optGroup_${c}`,
+        label: c
       }, [
-        (i(!0), p(A, null, S(f, (t, b) => (i(), p("option", {
+        (i(!0), d(A, null, S(p, (t, b) => (i(), d("option", {
           key: `option_${t}`,
           value: b
-        }, T(t), 9, $e))), 128))
-      ], 8, _e))), 128)) : (i(!0), p(A, { key: 1 }, S(s.value, (f, d) => (i(), p("option", {
-        key: `option_${d}`,
-        value: f.value
-      }, T(f.label), 9, Ve))), 128))
+        }, B(t), 9, $e))), 128))
+      ], 8, _e))), 128)) : (i(!0), d(A, { key: 1 }, S(n.value, (p, c) => (i(), d("option", {
+        key: `option_${c}`,
+        value: p.value
+      }, B(p.label), 9, Ve))), 128))
     ], 8, Ce)), [
-      [oe, k(l)]
+      [oe, y(l)]
     ]);
   }
-}), Te = ["id"], Be = /* @__PURE__ */ B({
+}), Te = ["id"], Be = /* @__PURE__ */ w({
   __name: "TextAreaInput",
   props: {
     modelValue: {}
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, l = W(() => e.modelValue, a);
-    return (r, s) => P((i(), p("textarea", F({
-      id: r.id,
-      "onUpdate:modelValue": s[0] || (s[0] = (u) => U(l) ? l.value = u : null)
-    }, { ...r.$props, ...r.$attrs }), null, 16, Te)), [
-      [re, k(l)]
+    const e = o, l = L(() => e.modelValue, a);
+    return (s, n) => P((i(), d("textarea", F({
+      id: s.id,
+      "onUpdate:modelValue": n[0] || (n[0] = (u) => W(l) ? l.value = u : null)
+    }, { ...s.$props, ...s.$attrs }), null, 16, Te)), [
+      [re, y(l)]
     ]);
   }
-}), we = ["type"], h = /* @__PURE__ */ B({
+}), we = ["type"], _ = /* @__PURE__ */ w({
   __name: "BasicInput",
   props: {
     loading: { type: Boolean, default: !1 },
@@ -400,12 +416,12 @@ const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const e = o, l = W(() => e.modelValue, a);
-    return (r, s) => P((i(), p("input", F({
-      "onUpdate:modelValue": s[0] || (s[0] = (u) => U(l) ? l.value = u : null),
-      type: r.type
-    }, { ...r.$props, ...r.$attrs }), null, 16, we)), [
-      [se, k(l)]
+    const e = o, l = L(() => e.modelValue, a);
+    return (s, n) => P((i(), d("input", F({
+      "onUpdate:modelValue": n[0] || (n[0] = (u) => W(l) ? l.value = u : null),
+      type: s.type
+    }, { ...s.$props, ...s.$attrs }), null, 16, we)), [
+      [se, y(l)]
     ]);
   }
 }), N = {
@@ -422,28 +438,28 @@ const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
     "submit-button": "form-maker-submit"
   },
   components: {
-    "form-maker-input-color": h,
-    "form-maker-input-date": h,
-    "form-maker-input-email": h,
-    "form-maker-input-month": h,
-    "form-maker-input-number": h,
-    "form-maker-input-password": h,
-    "form-maker-input-search": h,
-    "form-maker-input-tel": h,
-    "form-maker-input-time": h,
-    "form-maker-input-text": h,
-    "form-maker-input-url": h,
-    "form-maker-input-week": h,
-    "form-maker-input-range": h,
+    "form-maker-input-color": _,
+    "form-maker-input-date": _,
+    "form-maker-input-email": _,
+    "form-maker-input-month": _,
+    "form-maker-input-number": _,
+    "form-maker-input-password": _,
+    "form-maker-input-search": _,
+    "form-maker-input-tel": _,
+    "form-maker-input-time": _,
+    "form-maker-input-text": _,
+    "form-maker-input-url": _,
+    "form-maker-input-week": _,
+    "form-maker-input-range": _,
     "form-maker-input-file": ve,
     "form-maker-input-textarea": Be,
     "form-maker-input-select": ge,
     "form-maker-input-checkbox": be,
     "form-maker-input-radio": ye,
-    "form-maker-label": ke,
-    "form-maker-help": R,
-    "form-maker-error": R,
-    "form-maker-input-wrapper": R
+    "form-maker-label": he,
+    "form-maker-help": U,
+    "form-maker-error": U,
+    "form-maker-input-wrapper": U
   }
 }, Me = {
   install: (o, a = {}) => {
@@ -455,10 +471,10 @@ const ke = H, he = ["checked", "value", "onChange"], ye = /* @__PURE__ */ B({
         ...a.components
       }
     };
-    o.component("FormMaker", pe), o.component("FormMakerInput", fe), o.provide("unlabeled-types", e.unlabeledTypes), Object.keys(e.classes).forEach((n) => {
-      o.provide(n, e.classes[n]);
-    }), Object.keys(e.components).forEach((n) => {
-      o.component(n, e.components[n]);
+    o.component("FormMaker", de), o.component("FormMakerInput", fe), o.provide("unlabeled-types", e.unlabeledTypes), Object.keys(e.classes).forEach((r) => {
+      o.provide(r, e.classes[r]);
+    }), Object.keys(e.components).forEach((r) => {
+      o.component(r, e.components[r]);
     });
   }
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,B){typeof exports=="object"&&typeof module<"u"?module.exports=B(require("vue")):typeof define=="function"&&define.amd?define(["vue"],B):(e=typeof globalThis<"u"?globalThis:e||self,e.FormMaker=B(e.Vue))})(this,function(e){"use strict";const B=["onSubmit"],S={key:0},w=["disabled"],j=e.defineComponent({__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{default:()=>({})},fields:{default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{default:null},columnClass:{default:null},labelClass:{default:null},inputGroupClass:{default:null},inputWrapperClass:{default:null},inputErrorClass:{default:null},inputClass:{default:null},errorClass:{default:null},helpTextClass:{default:null},submitButtonClass:{default:null},submitButtonText:{default:"Submit"},unlabeledTypes:{}},emits:["submit","update:modelValue"],setup(n,{emit:r}){const t=n,i=r,l=()=>i("submit"),a=e.computed(()=>t.fields.length>0?t.fields.map(o=>{let u=o;return Array.isArray(o)||(u=[o]),u.map(k=>({...k,id:k.id||`formMaker_${new Date().getTime()}_${k.name}`}))}):Object.keys(t.modelValue).map(o=>[{name:o,label:o,id:`formMaker_${o}`}]));e.provide("labelClass",t.labelClass||e.inject("form-label")),e.provide("inputGroupClass",t.inputGroupClass||e.inject("input-group")),e.provide("inputWrapperClass",t.inputWrapperClass||e.inject("input-wrapper")),e.provide("inputErrorClass",t.inputErrorClass||e.inject("input-error")),e.provide("inputClass",t.inputClass||e.inject("input")),e.provide("errorClass",t.errorClass||e.inject("error")),e.provide("helpTextClass",t.helpTextClass||e.inject("help-text")),e.provide("unlabeledTypes",t.unlabeledTypes||e.inject("unlabeled-types"));const s=t.rowClass||e.inject("form-row"),p=t.columnClass||e.inject("form-column"),b=t.submitButtonClass||e.inject("submit-button"),m=o=>{const u=o.split(".");let k=t.modelValue;for(let h=0;h<u.length-1;h+=1){const y=k[u[h]];if(!y)break;k=y}return k},d=o=>{const u=o.split(".");return u[u.length-1]};return(o,u)=>{const k=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(l,["prevent"])},[o.loading?e.renderSlot(o.$slots,"loading",{key:0},()=>[e.createTextVNode(" Loading... ")]):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(h,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s)),key:`fieldRow_${y}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h,(C,$)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(p),C.columnClass]),key:`field_${y}_${$}`},[e.renderSlot(o.$slots,`${C.name}`,{field:C},()=>[e.createVNode(k,e.mergeProps({modelValue:m(C.name)[d(C.name)],"onUpdate:modelValue":c=>m(C.name)[d(C.name)]=c},C),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(o.$slots,"extra"),e.renderSlot(o.$slots,"divider",{},()=>[o.hasActions&&!o.hideDivider?(e.openBlock(),e.createElementBlock("hr",S)):e.createCommentVNode("",!0)]),o.hasActions?e.renderSlot(o.$slots,"actions",{key:1},()=>[e.renderSlot(o.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(b)),disabled:o.loading,type:"submit"},e.toDisplayString(o.submitButtonText),11,w)]),e.renderSlot(o.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,B)}}}),N=()=>{const n=e.inject("labelClass",null),r=e.inject("inputClass",null),t=e.inject("inputWrapperClass",null),i=e.inject("inputGroupClass",null),l=e.inject("inputErrorClass",null),a=e.inject("errorClass",null),s=e.inject("helpTextClass",null);return{labelClass:n,inputClass:r,inputWrapperClass:t,inputGroupClass:i,inputErrorClass:l,errorClass:a,helpTextClass:s}},F=(n,r=[])=>{const t=e.toRaw(r),i=e.ref(null);return e.watch(n,(l,a)=>{if(i.value=null,l!==a)for(let s=0;s<t.length;s+=1){const p=t[s];if(!p.validator(l)){i.value=p.message;break}}},{immediate:!0}),i};function V(n,r,t){const i=t??"modelValue";return e.computed({get:()=>n(),set:l=>r(`update:${i}`,l)})}const D=e.defineComponent({inheritAttrs:!1,__name:"FormMakerInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r),{labelClass:a,inputClass:s,inputWrapperClass:p,inputErrorClass:b,errorClass:m,helpTextClass:d}=N(),o=e.computed(()=>!!t.label),u=e.computed(()=>!!t.helpText),k=F(l,t.rules),h=e.computed(()=>!!t.error||!!k.value),y=e.computed(()=>t.error?t.error:k.value),C=e.inject("unlabeledTypes",[]),$=e.computed(()=>!new Set(C).has(t.type));return(c,E)=>{const J=e.resolveComponent("form-maker-label"),K=e.resolveComponent("form-maker-help"),Q=e.resolveComponent("form-maker-error"),X=e.resolveComponent("form-maker-input-wrapper");return e.openBlock(),e.createBlock(X,{class:e.normalizeClass([h.value&&e.unref(b),e.unref(p)])},{default:e.withCtx(()=>[$.value?e.renderSlot(c.$slots,"label",{key:0},()=>[o.value?(e.openBlock(),e.createBlock(J,{key:0,id:c.id,class:e.normalizeClass(e.unref(a)),label:c.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{},()=>[e.renderSlot(c.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${c.type}`),e.mergeProps({...c.$props,...c.$attrs},{class:[c.type!=="checkbox"&&e.unref(s),h.value&&e.unref(b)],modelValue:e.unref(l),"onUpdate:modelValue":E[0]||(E[0]=Y=>e.isRef(l)?l.value=Y:null)}),null,16,["class","modelValue"])),e.renderSlot(c.$slots,"after")]),e.renderSlot(c.$slots,"help",{},()=>[u.value?(e.openBlock(),e.createBlock(K,{key:0,class:e.normalizeClass(e.unref(d))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(c.$slots,"errors",{},()=>[h.value?(e.openBlock(),e.createBlock(Q,{key:0,class:e.normalizeClass(e.unref(m))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(y.value),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)])]),_:3},8,["class"])}}}),M=["checked","value","onClick"],A=e.defineComponent({__name:"CheckboxInput",props:{options:{type:[Boolean,Array],default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,i=r,l=e.computed(()=>Array.isArray(t.options)&&t.options.length===0),a=e.computed(()=>t.modelValue),s=e.computed(()=>(Array.isArray(a.value)?a.value:[a.value]).filter(d=>!!d)),p=e.computed(()=>l.value?[{label:t.label,value:!0}]:t.options),b=m=>{let d=[...s.value];d.indexOf(m)===-1?d.push(m):d=d.filter(o=>o!==m),l.value?i("update:modelValue",d.length>0):i("update:modelValue",d)};return(m,d)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${u}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(m.$props,{checked:s.value.indexOf(o.value)!==-1,value:o.value,type:"checkbox",onClick:()=>b(o.value)}),null,16,M),e.createTextVNode(" "+e.toDisplayString(o.label),1)])]))),128))}}),L=e.defineComponent({__name:"FileInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=r,i=l=>{const a=l.currentTarget;if(a.files&&a.files.length){const s=a.files[0];t("update:modelValue",s)}};return(l,a)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(l.$props,{type:"file",onChange:i}),null,16))}});function _(n,r){return e.h(`${n.as??"div"}`,r.attrs,r.slots)}_.props={as:{type:String,required:!1,default:"div"}};function T(n,{slots:r,attrs:t}){return e.h("label",{...t,for:n.id},r.default())}T.props={id:{type:String,default:null}};const G=T,x=["checked","value","onChange"],I=e.defineComponent({__name:"RadioInput",props:{options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{},id:{default:void 0}},emits:["update:modelValue"],setup(n,{emit:r}){const t=r,i=l=>{t("update:modelValue",l)};return(l,a)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(s,p)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${p}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(l.$props,{checked:s.value===l.modelValue,value:s.value,type:"radio",onChange:b=>i(s.value)}),null,16,x),e.createTextVNode(" "+e.toDisplayString(s.label),1)])]))),128))}}),O=["id","disabled","name","placeholder"],P=["label"],R=["value"],z=["value"],U=e.defineComponent({__name:"SelectInput",props:{options:{default:()=>[]},optionGroups:{default:()=>({})},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r),a=Object.keys(t.optionGroups).length>0,s=e.computed(()=>t.options.map(p=>typeof p=="object"?p:{label:p,value:p}));return(p,b)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:p.id,"onUpdate:modelValue":b[0]||(b[0]=m=>e.isRef(l)?l.value=m:null),disabled:p.disabled,name:p.name,placeholder:p.placeholder},[a?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.optionGroups,(m,d)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${d}`,label:d},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,R))),128))],8,P))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(m,d)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${d}`,value:m.value},e.toDisplayString(m.label),9,z))),128))],8,O)),[[e.vModelSelect,e.unref(l)]])}}),W=["id"],q=e.defineComponent({__name:"TextAreaInput",props:{modelValue:{}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:a.id,"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(l)?l.value=p:null)},{...a.$props,...a.$attrs}),null,16,W)),[[e.vModelText,e.unref(l)]])}}),H=["type"],f=e.defineComponent({__name:"BasicInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(l)?l.value=p:null),type:a.type},{...a.$props,...a.$attrs}),null,16,H)),[[e.vModelDynamic,e.unref(l)]])}}),g={unlabeledTypes:[],classes:{"form-row":"form-maker-row","form-column":"form-maker-column","form-label":"form-maker-label","input-wrapper":"form-maker-input-wrapper","input-error":"form-maker-input-error",input:"form-maker-input",error:"form-maker-error","help-text":"form-maker-help-text","submit-button":"form-maker-submit"},components:{"form-maker-input-color":f,"form-maker-input-date":f,"form-maker-input-email":f,"form-maker-input-month":f,"form-maker-input-number":f,"form-maker-input-password":f,"form-maker-input-search":f,"form-maker-input-tel":f,"form-maker-input-time":f,"form-maker-input-text":f,"form-maker-input-url":f,"form-maker-input-week":f,"form-maker-input-range":f,"form-maker-input-file":L,"form-maker-input-textarea":q,"form-maker-input-select":U,"form-maker-input-checkbox":A,"form-maker-input-radio":I,"form-maker-label":G,"form-maker-help":_,"form-maker-error":_,"form-maker-input-wrapper":_}};return{install:(n,r={})=>{const t={unlabeledTypes:r.unlabeledTypes!==void 0?r.unlabeledTypes:g.unlabeledTypes,classes:{...g.classes,...r.classes},components:{...g.components,...r.components}};n.component("FormMaker",j),n.component("FormMakerInput",D),n.provide("unlabeled-types",t.unlabeledTypes),Object.keys(t.classes).forEach(i=>{n.provide(i,t.classes[i])}),Object.keys(t.components).forEach(i=>{n.component(i,t.components[i])})}}});
+(function(e,B){typeof exports=="object"&&typeof module<"u"?module.exports=B(require("vue")):typeof define=="function"&&define.amd?define(["vue"],B):(e=typeof globalThis<"u"?globalThis:e||self,e.FormMaker=B(e.Vue))})(this,function(e){"use strict";const B=["onSubmit"],S={key:0},w=["disabled"],j=e.defineComponent({__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{default:()=>({})},fields:{default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{default:null},columnClass:{default:null},labelClass:{default:null},inputGroupClass:{default:null},inputWrapperClass:{default:null},inputErrorClass:{default:null},inputClass:{default:null},errorClass:{default:null},helpTextClass:{default:null},submitButtonClass:{default:null},submitButtonText:{default:"Submit"},unlabeledTypes:{}},emits:["submit","submit-error","update:modelValue"],setup(n,{emit:r}){const l=n,a=r,t=e.computed(()=>l.fields.length>0?l.fields.map(o=>{let u=o;return Array.isArray(o)||(u=[o]),u.map(m=>({...m,id:m.id||`formMaker_${new Date().getTime()}_${m.field}`}))}):Object.keys(l.modelValue).map(o=>[{field:o,label:o,id:`formMaker_${o}`}]));e.provide("labelClass",l.labelClass||e.inject("form-label")),e.provide("inputGroupClass",l.inputGroupClass||e.inject("input-group")),e.provide("inputWrapperClass",l.inputWrapperClass||e.inject("input-wrapper")),e.provide("inputErrorClass",l.inputErrorClass||e.inject("input-error")),e.provide("inputClass",l.inputClass||e.inject("input")),e.provide("errorClass",l.errorClass||e.inject("error")),e.provide("helpTextClass",l.helpTextClass||e.inject("help-text")),e.provide("unlabeledTypes",l.unlabeledTypes||e.inject("unlabeled-types"));const s=l.rowClass||e.inject("form-row"),i=l.columnClass||e.inject("form-column"),d=l.submitButtonClass||e.inject("submit-button"),C=o=>{const u=o.split(".");let m=l.modelValue;for(let h=0;h<u.length-1;h+=1){const y=m[u[h]];if(!y)break;m=y}return m},p=o=>{const u=o.split(".");return u[u.length-1]},c=()=>{for(const o in t.value)for(const u in t.value[o]){const m=t.value[o][u];if(m.rules===void 0||m.rules.length===0)continue;const h=C(m.field)[p(m.field)];for(const y in m.rules){const k=m.rules[y];if(!k.validator(h)){console.error(`${k.message}`),a("submit-error",k.message);return}}}a("submit")};return(o,u)=>{const m=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(c,["prevent","stop"])},[o.loading?e.renderSlot(o.$slots,"loading",{key:0},()=>[e.createTextVNode(" Loading... ")]):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(h,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s)),key:`fieldRow_${y}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h,(k,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(i),k.columnClass]),key:`field_${y}_${g}`},[e.renderSlot(o.$slots,`${k.field}`,{field:k},()=>[e.createVNode(m,e.mergeProps({modelValue:C(k.field)[p(k.field)],"onUpdate:modelValue":f=>C(k.field)[p(k.field)]=f},k),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(o.$slots,"extra"),e.renderSlot(o.$slots,"divider",{},()=>[o.hasActions&&!o.hideDivider?(e.openBlock(),e.createElementBlock("hr",S)):e.createCommentVNode("",!0)]),o.hasActions?e.renderSlot(o.$slots,"actions",{key:1},()=>[e.renderSlot(o.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(d)),disabled:o.loading,type:"submit"},e.toDisplayString(o.submitButtonText),11,w)]),e.renderSlot(o.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,B)}}}),N=()=>{const n=e.inject("labelClass",null),r=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),a=e.inject("inputGroupClass",null),t=e.inject("inputErrorClass",null),s=e.inject("errorClass",null),i=e.inject("helpTextClass",null);return{labelClass:n,inputClass:r,inputWrapperClass:l,inputGroupClass:a,inputErrorClass:t,errorClass:s,helpTextClass:i}},F=(n,r=[])=>{const l=e.toRaw(r),a=e.ref(null);return e.watch(n,(t,s)=>{if(a.value=null,t!==s)for(let i=0;i<l.length;i+=1){const d=l[i];if(!d.validator(t)){a.value=d.message;break}}},{immediate:!0}),a};function V(n,r,l){const a=l??"modelValue";return e.computed({get:()=>n(),set:t=>r(`update:${a}`,t)})}const D=e.defineComponent({inheritAttrs:!1,__name:"FormMakerInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=V(()=>l.modelValue,r),{labelClass:s,inputClass:i,inputWrapperClass:d,inputErrorClass:C,errorClass:p,helpTextClass:c}=N(),o=e.computed(()=>!!l.label),u=e.computed(()=>!!l.helpText),m=F(t,l.rules),h=e.computed(()=>!!l.error||!!m.value),y=e.computed(()=>l.error?l.error:m.value),k=e.inject("unlabeledTypes",[]),g=e.computed(()=>!new Set(k).has(l.type));return(f,E)=>{const J=e.resolveComponent("form-maker-label"),K=e.resolveComponent("form-maker-help"),Q=e.resolveComponent("form-maker-error"),X=e.resolveComponent("form-maker-input-wrapper");return e.openBlock(),e.createBlock(X,{class:e.normalizeClass([h.value&&e.unref(C),e.unref(d)])},{default:e.withCtx(()=>[g.value?e.renderSlot(f.$slots,"label",{key:0},()=>[o.value?(e.openBlock(),e.createBlock(J,{key:0,id:f.id,class:e.normalizeClass(e.unref(s)),label:f.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(f.$slots,"default",{},()=>[e.renderSlot(f.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${f.type}`),e.mergeProps({...f.$props,...f.$attrs},{class:[f.type!=="checkbox"&&e.unref(i),h.value&&e.unref(C)],modelValue:e.unref(t),"onUpdate:modelValue":E[0]||(E[0]=Y=>e.isRef(t)?t.value=Y:null)}),null,16,["class","modelValue"])),e.renderSlot(f.$slots,"after")]),e.renderSlot(f.$slots,"help",{},()=>[u.value?(e.openBlock(),e.createBlock(K,{key:0,class:e.normalizeClass(e.unref(c))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(f.$slots,"errors",{},()=>[h.value?(e.openBlock(),e.createBlock(Q,{key:0,class:e.normalizeClass(e.unref(p))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(y.value),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)])]),_:3},8,["class"])}}}),M=["checked","value","onClick"],A=e.defineComponent({__name:"CheckboxInput",props:{options:{type:[Boolean,Array],default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,a=r,t=e.computed(()=>Array.isArray(l.options)&&l.options.length===0),s=e.computed(()=>l.modelValue),i=e.computed(()=>(Array.isArray(s.value)?s.value:[s.value]).filter(c=>!!c)),d=e.computed(()=>t.value?[{label:l.label,value:!0}]:l.options),C=p=>{let c=[...i.value];c.indexOf(p)===-1?c.push(p):c=c.filter(o=>o!==p),t.value?a("update:modelValue",c.length>0):a("update:modelValue",c)};return(p,c)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${u}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(p.$props,{checked:i.value.indexOf(o.value)!==-1,value:o.value,type:"checkbox",onClick:()=>C(o.value)}),null,16,M),e.createTextVNode(" "+e.toDisplayString(o.label),1)])]))),128))}}),L=e.defineComponent({__name:"FileInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,a=t=>{const s=t.currentTarget;if(s.files&&s.files.length){const i=s.files[0];l("update:modelValue",i)}};return(t,s)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:a}),null,16))}});function _(n,r){return e.h(`${n.as??"div"}`,r.attrs,r.slots)}_.props={as:{type:String,required:!1,default:"div"}};function T(n,{slots:r,attrs:l}){return e.h("label",{...l,for:n.id},r.default())}T.props={id:{type:String,default:null}};const G=T,x=["checked","value","onChange"],I=e.defineComponent({__name:"RadioInput",props:{options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{},id:{default:void 0}},emits:["update:modelValue"],setup(n,{emit:r}){const l=r,a=t=>{l("update:modelValue",t)};return(t,s)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,d)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${d}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:i.value===t.modelValue,value:i.value,type:"radio",onChange:C=>a(i.value)}),null,16,x),e.createTextVNode(" "+e.toDisplayString(i.label),1)])]))),128))}}),O=["id","disabled","name","placeholder"],P=["label"],R=["value"],z=["value"],U=e.defineComponent({__name:"SelectInput",props:{options:{default:()=>[]},optionGroups:{default:()=>({})},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=V(()=>l.modelValue,r),s=Object.keys(l.optionGroups).length>0,i=e.computed(()=>l.options.map(d=>typeof d=="object"?d:{label:d,value:d}));return(d,C)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:d.id,"onUpdate:modelValue":C[0]||(C[0]=p=>e.isRef(t)?t.value=p:null),disabled:d.disabled,name:d.name,placeholder:d.placeholder},[s?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(d.optionGroups,(p,c)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${c}`,label:c},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,R))),128))],8,P))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(i.value,(p,c)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${c}`,value:p.value},e.toDisplayString(p.label),9,z))),128))],8,O)),[[e.vModelSelect,e.unref(t)]])}}),W=["id"],q=e.defineComponent({__name:"TextAreaInput",props:{modelValue:{}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=V(()=>l.modelValue,r);return(s,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:s.id,"onUpdate:modelValue":i[0]||(i[0]=d=>e.isRef(t)?t.value=d:null)},{...s.$props,...s.$attrs}),null,16,W)),[[e.vModelText,e.unref(t)]])}}),H=["type"],b=e.defineComponent({__name:"BasicInput",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const l=n,t=V(()=>l.modelValue,r);return(s,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":i[0]||(i[0]=d=>e.isRef(t)?t.value=d:null),type:s.type},{...s.$props,...s.$attrs}),null,16,H)),[[e.vModelDynamic,e.unref(t)]])}}),$={unlabeledTypes:[],classes:{"form-row":"form-maker-row","form-column":"form-maker-column","form-label":"form-maker-label","input-wrapper":"form-maker-input-wrapper","input-error":"form-maker-input-error",input:"form-maker-input",error:"form-maker-error","help-text":"form-maker-help-text","submit-button":"form-maker-submit"},components:{"form-maker-input-color":b,"form-maker-input-date":b,"form-maker-input-email":b,"form-maker-input-month":b,"form-maker-input-number":b,"form-maker-input-password":b,"form-maker-input-search":b,"form-maker-input-tel":b,"form-maker-input-time":b,"form-maker-input-text":b,"form-maker-input-url":b,"form-maker-input-week":b,"form-maker-input-range":b,"form-maker-input-file":L,"form-maker-input-textarea":q,"form-maker-input-select":U,"form-maker-input-checkbox":A,"form-maker-input-radio":I,"form-maker-label":G,"form-maker-help":_,"form-maker-error":_,"form-maker-input-wrapper":_}};return{install:(n,r={})=>{const l={unlabeledTypes:r.unlabeledTypes!==void 0?r.unlabeledTypes:$.unlabeledTypes,classes:{...$.classes,...r.classes},components:{...$.components,...r.components}};n.component("FormMaker",j),n.component("FormMakerInput",D),n.provide("unlabeled-types",l.unlabeledTypes),Object.keys(l.classes).forEach(a=>{n.provide(a,l.classes[a])}),Object.keys(l.components).forEach(a=>{n.component(a,l.components[a])})}}});

package/lib/components/FormMaker.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import type { FormMakerProps, InputType } from 'lib/model';
-import {
-  computed,
-  inject,
-  provide,
-  type ComputedRef
-} from 'vue';
+import type {FormMakerProps, InputType} from 'lib/model';
+import {computed, type ComputedRef, inject, provide} from 'vue';
 
 const props = withDefaults(defineProps<FormMakerProps>(), {
   loading: false,
@@ -26,9 +21,7 @@ const props = withDefaults(defineProps<FormMakerProps>(), {
   submitButtonText: 'Submit',
 })
 
-const emit = defineEmits(['submit', 'update:modelValue']);
-
-const handleSubmit = () => emit('submit');
+const emit = defineEmits(['submit', 'submit-error', 'update:modelValue']);
 
 const formFields: ComputedRef<InputType[][]> = computed(() => {
   if (props.fields.length > 0) {
@@ -40,7 +33,7 @@ const formFields: ComputedRef<InputType[][]> = computed(() => {
       return newRow.map((fieldSpec: InputType) => {
         return {
           ...fieldSpec,
-          id: fieldSpec.id || `formMaker_${new Date().getTime()}_${fieldSpec.name}`,
+          id: fieldSpec.id || `formMaker_${new Date().getTime()}_${fieldSpec.field}`,
         };
       });
     });
@@ -48,7 +41,7 @@ const formFields: ComputedRef<InputType[][]> = computed(() => {
 
   return Object.keys(props.modelValue).map(key => ([
     {
-      name: key,
+      field: key,
       label: key,
       id: `formMaker_${key}`,
     }
@@ -86,23 +79,44 @@ const getProp = (fieldName: string) => {
   return fields[fields.length - 1];
 };
 
+const handleSubmit = () => {
+  for (const row in formFields.value) {
+    for (const f in formFields.value[row]) {
+      const field = formFields.value[row][f];
+      if (field.rules === undefined || field.rules.length === 0) continue
+
+      const value = getObject(field.field)[getProp(field.field)]
+      for (const rn in field.rules) {
+        const rule = field.rules[rn]
+        const isValid = rule.validator(value);
+        if (!isValid) {
+          console.error(`${rule.message}`)
+          emit('submit-error', rule.message)
+          return
+        }
+      }
+    }
+  }
+
+  emit('submit');
+};
 </script>
 
 <template>
-  <form class="form-maker" @submit.prevent="handleSubmit">
+  <form class="form-maker" @submit.prevent.stop="handleSubmit">
     <slot v-if="loading" name="loading">
       Loading...
     </slot>
     <slot>
       <div v-for="(fieldRow, i) in formFields" :class="realRowClass" :key="`fieldRow_${i}`">
         <div v-for="(field, j) in fieldRow" :class="[realColumnClass, field.columnClass]" :key="`field_${i}_${j}`">
-          <slot :field="field" :name="`${field.name}`">
-            <form-maker-input v-model="getObject(field.name)[getProp(field.name)]" v-bind="field" />
+          <slot :field="field" :name="`${field.field}`">
+            <form-maker-input v-model="getObject(field.field)[getProp(field.field)]" v-bind="field"/>
           </slot>
         </div>
       </div>
     </slot>
-    <slot name="extra" />
+    <slot name="extra"/>
     <slot name="divider">
       <hr v-if="hasActions && !hideDivider">
     </slot>
@@ -112,7 +126,7 @@ const getProp = (fieldName: string) => {
           {{ submitButtonText }}
         </button>
       </slot>
-      <slot name="extra-buttons" />
+      <slot name="extra-buttons"/>
     </slot>
   </form>
 </template>

package/lib/model.d.ts

@@ -13,10 +13,11 @@ export interface FormMakerPluginOptions {
 
 export interface InputType {
   id?: string | null
-  name: string
+  field: string
   type?: string | null
   label?: string | null
   columnClass?: string | null
+  rules?: RuleValidator[]
 }
 
 export interface FormMakerProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "type": "module",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",