@josercl/form-maker 1.3.1-beta4 → 1.3.3

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 - José Rafael Carrero León
+Copyright (c) 2023 - José Rafael Carrero León
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,7 +1,7 @@
 # Form-Maker
 
 <img src="https://badgen.net/gitlab/license/josercl/form-maker">
-<a href="https://vuejs.org/" target="_blank"><img src="https://badgen.net/badge/vue/v3.0.0?color=green"></a>
+<a href="https://vuejs.org/" target="_blank"><img src="https://badgen.net/badge/vue/v3?color=green"></a>
 <a href="https://www.npmjs.com/package/@josercl/form-maker" target="_blank"><img src="https://badgen.net/npm/v/@josercl/form-maker/?color=red&icon=npm&label"></a>
 <a href="https://www.npmjs.com/package/@josercl/form-maker" target="_blank"><img src="https://badgen.net/npm/dt/@josercl/form-maker"></a>
 
@@ -28,23 +28,17 @@ createApp(App)
 
 ### App.vue
 ```vuejs
+<script setup>
+import { reactive } from 'vue'
+
+const person = reactive({
+  name: 'John Doe',
+  age: 20,
+  email: 'email@example.com',
+})
+</script>
+
 <template>
   <form-maker v-model="person" />
 </template>
-
-<script>
-export default {
-  setup() {
-    const person = reactive({
-      name: 'John Doe',
-      age: 20,
-      email: 'email@example.com',
-    })
-
-    return {
-      person,
-    }
-  }
-}
-</script>
 ```

package/dist/index.iife.js

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

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as g, computed as y, provide as E, inject as c, resolveComponent as j, openBlock as n, createElementBlock as i, withModifiers as X, renderSlot as b, createTextVNode as O, createCommentVNode as B, Fragment as M, renderList as A, normalizeClass as T, unref as f, createVNode as Y, mergeProps as F, createElementVNode as S, toDisplayString as w, watch as q, toRaw as Z, ref as x, createBlock as I, withCtx as W, resolveDynamicComponent as ee, isRef as R, h as z, withDirectives as L, vModelSelect as le, vModelText as te, vModelDynamic as ae } from "vue";
-const oe = ["onSubmit"], re = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ */ g({
+import { defineComponent as w, computed as y, provide as E, inject as f, resolveComponent as D, openBlock as i, createElementBlock as p, withModifiers as Q, renderSlot as k, createTextVNode as O, createCommentVNode as M, Fragment as A, renderList as F, normalizeClass as B, unref as v, createVNode as X, mergeProps as G, createElementVNode as S, toDisplayString as T, toRaw as Y, ref as Z, watch as ee, createBlock as j, withCtx as W, resolveDynamicComponent as le, isRef as R, h as P, withDirectives as L, vModelSelect as te, vModelText as ae, vModelDynamic as oe } from "vue";
+const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ */ w({
   __name: "FormMaker",
   props: {
     loading: { type: Boolean, default: !1 },
@@ -20,10 +20,10 @@ const oe = ["onSubmit"], re = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
     submitButtonText: { default: "Submit" }
   },
   emits: ["submit", "update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s, l = () => o("submit"), a = y(() => e.fields.length > 0 ? e.fields.map((t) => {
-      let k = t;
-      return Array.isArray(t) || (k = [t]), k.map((C) => C.id ? C : {
+  setup(o, { emit: a }) {
+    const e = o, n = a, l = () => n("submit"), r = y(() => e.fields.length > 0 ? e.fields.map((t) => {
+      let b = t;
+      return Array.isArray(t) || (b = [t]), b.map((C) => C.id ? C : {
         ...C,
         id: `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${C.name}`
       });
@@ -34,133 +34,106 @@ const oe = ["onSubmit"], re = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
         id: `formMaker_${t}`
       }
     ]));
-    E("labelClass", e.labelClass || c("form-label")), E("inputGroupClass", e.inputGroupClass || c("input-group")), E("inputWrapperClass", e.inputWrapperClass || c("input-wrapper")), E("inputErrorClass", e.inputErrorClass || c("input-error")), E("inputClass", e.inputClass || c("input")), E("errorClass", e.errorClass || c("error")), E("helpTextClass", e.helpTextClass || c("help-text"));
-    const u = e.rowClass || c("form-row"), r = e.columnClass || c("form-column"), v = e.submitButtonClass || c("submit-button"), p = (t) => {
-      const k = t.split(".");
+    E("labelClass", e.labelClass || f("form-label")), E("inputGroupClass", e.inputGroupClass || f("input-group")), E("inputWrapperClass", e.inputWrapperClass || f("input-wrapper")), E("inputErrorClass", e.inputErrorClass || f("input-error")), E("inputClass", e.inputClass || f("input")), E("errorClass", e.errorClass || f("error")), E("helpTextClass", e.helpTextClass || f("help-text"));
+    const s = e.rowClass || f("form-row"), u = e.columnClass || f("form-column"), _ = e.submitButtonClass || f("submit-button"), d = (t) => {
+      const b = t.split(".");
       let C = e.modelValue;
-      for (let $ = 0; $ < k.length - 1; $ += 1) {
-        const _ = C[k[$]];
-        if (!_)
+      for (let g = 0; g < b.length - 1; g += 1) {
+        const $ = C[b[g]];
+        if (!$)
           break;
-        C = _;
+        C = $;
       }
       return C;
     }, m = (t) => {
-      const k = t.split(".");
-      return k[k.length - 1];
+      const b = t.split(".");
+      return b[b.length - 1];
     };
-    return (t, k) => {
-      const C = j("form-maker-input");
-      return n(), i("form", {
+    return (t, b) => {
+      const C = D("form-maker-input");
+      return i(), p("form", {
         class: "form-maker",
-        onSubmit: X(l, ["prevent"])
+        onSubmit: Q(l, ["prevent"])
       }, [
-        t.loading ? b(t.$slots, "loading", { key: 0 }, () => [
+        t.loading ? k(t.$slots, "loading", { key: 0 }, () => [
           O(" Loading... ")
-        ]) : B("", !0),
-        b(t.$slots, "default", {}, () => [
-          (n(!0), i(M, null, A(a.value, ($, _) => (n(), i("div", {
-            class: T(f(u)),
-            key: `fieldRow_${_}`
+        ]) : M("", !0),
+        k(t.$slots, "default", {}, () => [
+          (i(!0), p(A, null, F(r.value, (g, $) => (i(), p("div", {
+            class: B(v(s)),
+            key: `fieldRow_${$}`
           }, [
-            (n(!0), i(M, null, A($, (V, d) => (n(), i("div", {
-              class: T([f(r), V.columnClass]),
-              key: `field_${_}_${d}`
+            (i(!0), p(A, null, F(g, (V, c) => (i(), p("div", {
+              class: B([v(u), V.columnClass]),
+              key: `field_${$}_${c}`
             }, [
-              b(t.$slots, `${V.name}`, { field: V }, () => [
-                Y(C, F({
-                  modelValue: p(V.name)[m(V.name)],
-                  "onUpdate:modelValue": (G) => p(V.name)[m(V.name)] = G
+              k(t.$slots, `${V.name}`, { field: V }, () => [
+                X(C, G({
+                  modelValue: d(V.name)[m(V.name)],
+                  "onUpdate:modelValue": (I) => d(V.name)[m(V.name)] = I
                 }, V), null, 16, ["modelValue", "onUpdate:modelValue"])
               ])
             ], 2))), 128))
           ], 2))), 128))
         ]),
-        b(t.$slots, "extra"),
-        b(t.$slots, "divider", {}, () => [
-          t.hasActions && !t.hideDivider ? (n(), i("hr", re)) : B("", !0)
+        k(t.$slots, "extra"),
+        k(t.$slots, "divider", {}, () => [
+          t.hasActions && !t.hideDivider ? (i(), p("hr", se)) : M("", !0)
         ]),
-        t.hasActions ? b(t.$slots, "actions", { key: 1 }, () => [
-          b(t.$slots, "submit-button", {}, () => [
+        t.hasActions ? k(t.$slots, "actions", { key: 1 }, () => [
+          k(t.$slots, "submit-button", {}, () => [
             S("button", {
-              class: T(f(v)),
+              class: B(v(_)),
               disabled: t.loading,
               type: "submit"
-            }, w(t.submitButtonText), 11, se)
+            }, T(t.submitButtonText), 11, ne)
           ]),
-          b(t.$slots, "extra-buttons")
-        ]) : B("", !0)
-      ], 40, oe);
+          k(t.$slots, "extra-buttons")
+        ]) : M("", !0)
+      ], 40, re);
     };
   }
-}), ne = /* @__PURE__ */ g({
-  __name: "RuleEvaluator",
-  props: {
-    rules: { default: () => [] },
-    modelValue: { default: void 0 }
-  },
-  emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s;
-    return q(
-      e.modelValue,
-      (l) => {
-        var r;
-        let a = null;
-        const u = ((r = e.rules) == null ? void 0 : r.length) ?? 0;
-        for (let v = 0; v < u; v += 1) {
-          const p = e.rules[v];
-          if (!p.validator(l)) {
-            a = p.message;
-            break;
-          }
-        }
-        o("update:modelValue", a);
-      },
-      { immediate: !0 }
-    ), () => {
-    };
-  }
-}), pe = () => {
-  const s = c("labelClass", null), o = c("inputClass", null), e = c("inputWrapperClass", null), l = c("inputGroupClass", null), a = c("inputErrorClass", null), u = c("errorClass", null), r = c("helpTextClass", null);
+}), ie = () => {
+  const o = f("labelClass", null), a = f("inputClass", null), e = f("inputWrapperClass", null), n = f("inputGroupClass", null), l = f("inputErrorClass", null), r = f("errorClass", null), s = f("helpTextClass", null);
   return {
-    labelClass: s,
-    inputClass: o,
+    labelClass: o,
+    inputClass: a,
     inputWrapperClass: e,
-    inputGroupClass: l,
-    inputErrorClass: a,
-    errorClass: u,
-    helpTextClass: r
+    inputGroupClass: n,
+    inputErrorClass: l,
+    errorClass: r,
+    helpTextClass: s
   };
-}, ie = (s, o) => {
-  const e = Z(o), l = x(null);
-  return q(
-    s,
-    (a, u) => {
-      if (l.value = null, a !== u)
-        for (let r = 0; r < e.length; r += 1) {
-          const v = e[r];
-          if (!v.validator(a)) {
-            l.value = v.message;
+}, pe = (o, a = []) => {
+  const e = Y(a), n = Z(null);
+  return ee(
+    o,
+    (l, r) => {
+      if (n.value = null, l !== r)
+        for (let s = 0; s < e.length; s += 1) {
+          const u = e[s];
+          if (!u.validator(l)) {
+            n.value = u.message;
             break;
           }
         }
     },
     { immediate: !0 }
-  ), l;
+  ), n;
 };
-function D(s, o, e) {
-  const l = e ?? "modelValue";
+function U(o, a, e) {
+  const n = e ?? "modelValue";
   return y({
-    get: () => s(),
-    set: (a) => o(`update:${l}`, a)
+    get: () => o(),
+    set: (l) => a(`update:${n}`, l)
   });
 }
-const me = /* @__PURE__ */ g({
+const de = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "FormMakerInput",
   props: {
     loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
     modelValue: {},
     error: { default: void 0 },
     helpText: { default: void 0 },
@@ -169,113 +142,114 @@ const me = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s, l = D(() => e.modelValue, o), {
-      labelClass: a,
-      inputClass: u,
-      inputWrapperClass: r,
-      inputGroupClass: v,
-      inputErrorClass: p,
+  setup(o, { emit: a }) {
+    const e = o, l = U(() => e.modelValue, a), {
+      labelClass: r,
+      inputClass: s,
+      inputWrapperClass: u,
+      inputGroupClass: _,
+      inputErrorClass: d,
       errorClass: m,
       helpTextClass: t
-    } = pe(), k = y(() => !!e.label), C = y(() => !!e.helpText), $ = ie(l, e.rules), _ = y(() => !!e.error || !!$.value), V = y(() => e.error ? e.error : $.value);
-    return (d, G) => {
-      const J = j("form-maker-label"), K = j("form-maker-help"), Q = j("form-maker-error");
-      return n(), i("div", {
-        class: T([_.value && f(p), f(r)])
+    } = ie(), b = y(() => !!e.label), C = y(() => !!e.helpText), g = pe(l, e.rules), $ = y(() => !!e.error || !!g.value), V = y(() => e.error ? e.error : g.value);
+    return (c, I) => {
+      const z = D("form-maker-label"), H = D("form-maker-help"), J = D("form-maker-error");
+      return i(), p("div", {
+        class: B([$.value && v(d), v(u)])
       }, [
-        d.type !== "checkbox" ? b(d.$slots, "label", { key: 0 }, () => [
-          k.value ? (n(), I(J, {
+        c.type !== "checkbox" ? k(c.$slots, "label", { key: 0 }, () => [
+          b.value ? (i(), j(z, {
             key: 0,
-            id: d.id,
-            class: T(f(a))
+            id: c.id,
+            class: B(v(r))
           }, {
             default: W(() => [
-              O(w(d.label), 1)
+              O(T(c.label), 1)
             ]),
             _: 1
-          }, 8, ["id", "class"])) : B("", !0)
-        ]) : B("", !0),
-        b(d.$slots, "default", {}, () => [
+          }, 8, ["id", "class"])) : M("", !0)
+        ]) : M("", !0),
+        k(c.$slots, "default", {}, () => [
           S("div", {
-            class: T([f(v), _.value && f(p)])
+            class: B([v(_), $.value && v(d)])
           }, [
-            b(d.$slots, "before"),
-            (n(), I(ee(`form-maker-input-${d.type}`), F({ ...d.$props, ...d.$attrs }, {
-              class: [d.type !== "checkbox" && f(u), _.value && f(p)],
-              label: d.label,
-              modelValue: f(l),
-              "onUpdate:modelValue": G[0] || (G[0] = (U) => R(l) ? l.value = U : null)
-            }), null, 16, ["class", "label", "modelValue"])),
-            b(d.$slots, "after")
+            k(c.$slots, "before"),
+            (i(), j(le(`form-maker-input-${c.type}`), G({ ...c.$props, ...c.$attrs }, {
+              class: [c.type !== "checkbox" && v(s), $.value && v(d)],
+              modelValue: v(l),
+              "onUpdate:modelValue": I[0] || (I[0] = (K) => R(l) ? l.value = K : null)
+            }), null, 16, ["class", "modelValue"])),
+            k(c.$slots, "after")
           ], 2)
         ]),
-        b(d.$slots, "help", {}, () => [
-          C.value ? (n(), I(K, {
+        k(c.$slots, "help", {}, () => [
+          C.value ? (i(), j(H, {
             key: 0,
-            class: T(f(t))
+            class: B(v(t))
           }, {
             default: W(() => [
-              O(w(d.helpText), 1)
+              O(T(c.helpText), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : B("", !0)
+          }, 8, ["class"])) : M("", !0)
         ]),
-        b(d.$slots, "errors", {}, () => [
-          _.value ? (n(), I(Q, {
+        k(c.$slots, "errors", {}, () => [
+          $.value ? (i(), j(J, {
             key: 0,
-            class: T(f(m))
+            class: B(v(m))
           }, {
             default: W(() => [
-              O(w(V.value), 1)
+              O(T(V.value), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : B("", !0),
-          d.rules.length ? (n(), I(ne, {
-            key: 1,
-            rules: d.rules,
-            value: d.modelValue,
-            modelValue: f($),
-            "onUpdate:modelValue": G[1] || (G[1] = (U) => R($) ? $.value = U : null)
-          }, null, 8, ["rules", "value", "modelValue"])) : B("", !0)
+          }, 8, ["class"])) : M("", !0)
         ])
       ], 2);
     };
   }
-}), de = ["checked", "value", "onClick"], fe = /* @__PURE__ */ g({
+}), me = ["checked", "value", "onClick"], fe = /* @__PURE__ */ w({
   __name: "CheckboxInput",
   props: {
-    options: { type: [Boolean, Array], default: () => [] }
+    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(s, { emit: o }) {
-    const e = s, l = y(() => Array.isArray(e.options) && e.options.length === 0), a = y(() => e.modelValue), u = y(() => (Array.isArray(a.value) ? a.value : [a.value]).filter((m) => !!m)), r = y(() => l.value ? [
+  setup(o, { emit: a }) {
+    const e = o, n = a, l = y(() => Array.isArray(e.options) && e.options.length === 0), r = y(() => e.modelValue), s = y(() => (Array.isArray(r.value) ? r.value : [r.value]).filter((m) => !!m)), u = y(() => l.value ? [
       {
         label: e.label,
         value: !0
       }
-    ] : e.options), v = (p) => {
-      let m = [...u.value];
-      m.indexOf(p) === -1 ? m.push(p) : m = m.filter((t) => t !== p), l.value ? o("update:modelValue", m.length > 0) : o("update:modelValue", m);
+    ] : e.options), _ = (d) => {
+      let m = [...s.value];
+      m.indexOf(d) === -1 ? m.push(d) : m = m.filter((t) => t !== d), l.value ? n("update:modelValue", m.length > 0) : n("update:modelValue", m);
     };
-    return (p, m) => (n(!0), i(M, null, A(r.value, (t, k) => (n(), i("div", {
-      key: `option_${k}`
+    return (d, m) => (i(!0), p(A, null, F(u.value, (t, b) => (i(), p("div", {
+      key: `option_${b}`
     }, [
       S("label", null, [
-        S("input", F(p.$props, {
-          checked: u.value.indexOf(t.value) !== -1,
+        S("input", G(d.$props, {
+          checked: s.value.indexOf(t.value) !== -1,
           value: t.value,
           type: "checkbox",
-          onClick: () => v(t.value)
-        }), null, 16, de),
-        O(" " + w(t.label), 1)
+          onClick: () => _(t.value)
+        }), null, 16, me),
+        O(" " + T(t.label), 1)
       ])
     ]))), 128));
   }
-}), ce = /* @__PURE__ */ g({
+}), ce = /* @__PURE__ */ w({
   __name: "FileInput",
   props: {
     loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
     modelValue: {},
     error: { default: void 0 },
     helpText: { default: void 0 },
@@ -284,22 +258,22 @@ const me = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = (l) => {
-      const a = l.currentTarget;
-      if (a.files && a.files.length) {
-        const u = a.files[0];
-        o("update:modelValue", u);
+  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);
       }
     };
-    return (l, a) => (n(), i("input", F(l.$props, {
+    return (l, r) => (i(), p("input", G(l.$props, {
       type: "file",
-      onChange: e
+      onChange: n
     }), null, 16));
   }
 });
-function N(s, o) {
-  return z(`${s.as ?? "div"}`, o.attrs, o.slots);
+function N(o, a) {
+  return P(`${o.as ?? "div"}`, a.attrs, a.slots);
 }
 N.props = {
   as: {
@@ -308,20 +282,21 @@ N.props = {
     default: "div"
   }
 };
-function H(s, { slots: o, attrs: e }) {
-  return z("label", { ...e, for: s.id }, o.default());
+function q(o, { slots: a, attrs: e }) {
+  return P("label", { ...e, for: o.id }, a.default());
 }
-H.props = {
+q.props = {
   id: {
     type: String,
     default: null
   }
 };
-const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
+const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
   __name: "RadioInput",
   props: {
     options: { default: () => [] },
     loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
     modelValue: {},
     error: { default: void 0 },
     helpText: { default: void 0 },
@@ -330,30 +305,31 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     rules: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = (l) => {
-      o("update:modelValue", l);
+  setup(o, { emit: a }) {
+    const e = a, n = (l) => {
+      e("update:modelValue", l);
     };
-    return (l, a) => (n(!0), i(M, null, A(l.options, (u, r) => (n(), i("div", {
-      key: `option_${r}`
+    return (l, r) => (i(!0), p(A, null, F(l.options, (s, u) => (i(), p("div", {
+      key: `option_${u}`
     }, [
       S("label", null, [
-        S("input", F(l.$props, {
-          checked: u.value === l.modelValue,
-          value: u.value,
+        S("input", G(l.$props, {
+          checked: s.value === l.modelValue,
+          value: s.value,
           type: "radio",
-          onChange: (v) => e(u.value)
-        }), null, 16, ke),
-        O(" " + w(u.label), 1)
+          onChange: (_) => n(s.value)
+        }), null, 16, be),
+        O(" " + T(s.label), 1)
       ])
     ]))), 128));
   }
-}), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], $e = ["value"], ye = ["value"], _e = /* @__PURE__ */ g({
+}), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], ye = ["value"], _e = ["value"], $e = /* @__PURE__ */ w({
   __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 },
@@ -362,53 +338,54 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s, l = D(() => e.modelValue, o), a = Object.keys(e.optionGroups).length > 0, u = y(() => e.options.map((r) => typeof r == "object" ? r : {
-      label: r,
-      value: r
+  setup(o, { emit: a }) {
+    const e = o, l = U(() => e.modelValue, a), r = Object.keys(e.optionGroups).length > 0, s = y(() => e.options.map((u) => typeof u == "object" ? u : {
+      label: u,
+      value: u
     }));
-    return (r, v) => L((n(), i("select", {
-      id: r.id,
-      "onUpdate:modelValue": v[0] || (v[0] = (p) => R(l) ? l.value = p : null),
-      disabled: r.disabled,
-      name: r.name,
-      placeholder: r.placeholder
+    return (u, _) => L((i(), p("select", {
+      id: u.id,
+      "onUpdate:modelValue": _[0] || (_[0] = (d) => R(l) ? l.value = d : null),
+      disabled: u.disabled,
+      name: u.name,
+      placeholder: u.placeholder
     }, [
-      a ? (n(!0), i(M, { key: 0 }, A(r.optionGroups, (p, m) => (n(), i("optgroup", {
+      r ? (i(!0), p(A, { key: 0 }, F(u.optionGroups, (d, m) => (i(), p("optgroup", {
         key: `optGroup_${m}`,
         label: m
       }, [
-        (n(!0), i(M, null, A(p, (t, k) => (n(), i("option", {
+        (i(!0), p(A, null, F(d, (t, b) => (i(), p("option", {
           key: `option_${t}`,
-          value: k
-        }, w(t), 9, $e))), 128))
-      ], 8, Ce))), 128)) : (n(!0), i(M, { key: 1 }, A(u.value, (p, m) => (n(), i("option", {
+          value: b
+        }, T(t), 9, ye))), 128))
+      ], 8, Ce))), 128)) : (i(!0), p(A, { key: 1 }, F(s.value, (d, m) => (i(), p("option", {
         key: `option_${m}`,
-        value: p.value
-      }, w(p.label), 9, ye))), 128))
+        value: d.value
+      }, T(d.label), 9, _e))), 128))
     ], 8, he)), [
-      [le, f(l)]
+      [te, v(l)]
     ]);
   }
-}), Ve = ["id"], ge = /* @__PURE__ */ g({
+}), Ve = ["id"], ge = /* @__PURE__ */ w({
   __name: "TextAreaInput",
   props: {
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s, l = D(() => e.modelValue, o);
-    return (a, u) => L((n(), i("textarea", F({
-      id: a.id,
-      "onUpdate:modelValue": u[0] || (u[0] = (r) => R(l) ? l.value = r : null)
-    }, { ...a.$props, ...a.$attrs }), null, 16, Ve)), [
-      [te, f(l)]
+  setup(o, { emit: a }) {
+    const e = o, l = U(() => e.modelValue, a);
+    return (r, s) => L((i(), p("textarea", G({
+      id: r.id,
+      "onUpdate:modelValue": s[0] || (s[0] = (u) => R(l) ? l.value = u : null)
+    }, { ...r.$props, ...r.$attrs }), null, 16, Ve)), [
+      [ae, v(l)]
     ]);
   }
-}), Be = ["type"], h = /* @__PURE__ */ g({
+}), Be = ["type"], h = /* @__PURE__ */ w({
   __name: "BasicInput",
   props: {
     loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
     modelValue: {},
     error: { default: void 0 },
     helpText: { default: void 0 },
@@ -417,16 +394,16 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: o }) {
-    const e = s, l = D(() => e.modelValue, o);
-    return (a, u) => L((n(), i("input", F({
-      "onUpdate:modelValue": u[0] || (u[0] = (r) => R(l) ? l.value = r : null),
-      type: a.type
-    }, { ...a.$props, ...a.$attrs }), null, 16, Be)), [
-      [ae, f(l)]
+  setup(o, { emit: a }) {
+    const e = o, l = U(() => e.modelValue, a);
+    return (r, s) => L((i(), p("input", G({
+      "onUpdate:modelValue": s[0] || (s[0] = (u) => R(l) ? l.value = u : null),
+      type: r.type
+    }, { ...r.$props, ...r.$attrs }), null, 16, Be)), [
+      [oe, v(l)]
     ]);
   }
-}), P = {
+}), x = {
   classes: {
     "form-row": "form-maker-row",
     "form-column": "form-maker-column",
@@ -455,26 +432,26 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     "form-maker-input-range": h,
     "form-maker-input-file": ce,
     "form-maker-input-textarea": ge,
-    "form-maker-input-select": _e,
+    "form-maker-input-select": $e,
     "form-maker-input-checkbox": fe,
-    "form-maker-input-radio": be,
+    "form-maker-input-radio": ke,
     "form-maker-label": ve,
     "form-maker-help": N,
     "form-maker-error": N
   }
 }, we = {
-  install: (s, o = {}) => {
+  install: (o, a = {}) => {
     const e = {
-      classes: { ...P.classes, ...o.classes },
+      classes: { ...x.classes, ...a.classes },
       components: {
-        ...P.components,
-        ...o.components
+        ...x.components,
+        ...a.components
       }
     };
-    s.component("FormMaker", ue), s.component("FormMakerInput", me), Object.keys(e.classes).forEach((l) => {
-      s.provide(l, e.classes[l]);
-    }), Object.keys(e.components).forEach((l) => {
-      s.component(l, e.components[l]);
+    o.component("FormMaker", ue), o.component("FormMakerInput", de), Object.keys(e.classes).forEach((n) => {
+      o.provide(n, e.classes[n]);
+    }), Object.keys(e.components).forEach((n) => {
+      o.component(n, e.components[n]);
     });
   }
 };

package/dist/index.umd.cjs

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

package/lib/components/FormMakerInput.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import RuleEvaluator from './RuleEvaluator.vue';
 import useFormClasses from '../composables/useFormClasses';
 import useValidator from '../composables/useValidator';
 import useVModel from '../composables/useVModel';
@@ -41,7 +40,7 @@ const {
 const hasLabel = computed(() => Boolean(props.label));
 const hasHelpText = computed(() => Boolean(props.helpText));
 
-const validationError = useValidator(value, props.rules); // ref(null);
+const validationError = useValidator(value, props.rules);
 
 const hasErrors = computed(() => Boolean(props.error) || Boolean(validationError.value));
 
@@ -75,7 +74,6 @@ const realError = computed(() => {
           :is="`form-maker-input-${type}`"
           v-bind="{ ...$props, ...$attrs}"
           :class="[type !== 'checkbox' && inputClass, hasErrors && inputErrorClass]"
-          :label="label"
           v-model="value"
         />
         <slot name="after" />
@@ -96,12 +94,6 @@ const realError = computed(() => {
       >
         {{ realError }}
       </form-maker-error>
-      <rule-evaluator
-        v-if="rules.length"
-        :rules="rules"
-        :value="modelValue"
-        v-model="validationError"
-      />
     </slot>
   </div>
 </template>

package/lib/components/inputs/CheckboxInput.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { computed, type ComputedRef } from 'vue';
-import type { FormMakerInputProps, SelectOption } from 'lib/model';
+import type { FormMakerInputProps, RuleValidator, SelectOption } from 'lib/model';
 
 interface CheckInputProps extends /* @vue-ignore */ FormMakerInputProps {
   options?: boolean | SelectOption[]
+  loading?: boolean | undefined
+  disabled?: boolean | undefined
+  modelValue: any
+  error?: string | undefined
+  helpText?: string | undefined
+  label?: string | undefined
+  type?: string
+  rules?: RuleValidator[]
 }
 
 const props = withDefaults(defineProps<CheckInputProps>(), {
@@ -19,6 +27,7 @@ const props = withDefaults(defineProps<CheckInputProps>(), {
 });
 const emit = defineEmits(['update:modelValue'])
 
+
 const isBinary = computed(() => {
   return Array.isArray(props.options) && props.options.length === 0
 })

package/lib/components/inputs/RadioInput.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import type { FormMakerInputProps, SelectOption } from 'lib/model';
+import type { FormMakerInputProps, RuleValidator, SelectOption } from 'lib/model';
 
 interface RadioInputProps extends FormMakerInputProps {
   options?: SelectOption[]
+  loading?: boolean | undefined
+  disabled?: boolean | undefined
+  modelValue: any
+  error?: string | undefined
+  helpText?: string | undefined
+  label?: string | undefined
+  type?: string
+  rules?: RuleValidator[]
 }
 
 withDefaults(defineProps<RadioInputProps>(), {

package/lib/composables/{useValidator.js → useValidator.ts}

@@ -1,8 +1,9 @@
-import { ref, toRaw, watch } from 'vue';
+import type { RuleValidator } from '@/model';
+import { ref, toRaw, watch, type WritableComputedRef } from 'vue';
 
-const useValidator = (propValue, rulesArr) => {
+const useValidator = (propValue: WritableComputedRef<any>, rulesArr: Array<RuleValidator> = []) => {
   const rules = toRaw(rulesArr);
-  const error = ref(null);
+  const error = ref<string | null>(null);
 
   watch(
     propValue,

package/lib/model.d.ts

@@ -39,6 +39,7 @@ export interface FormMakerProps {
 
 export interface FormMakerInputProps extends /* @vue-ignore */ InputHTMLAttributes{
   loading?: boolean | undefined
+  disabled?: boolean | undefined
   modelValue: any,
   error?: string | undefined
   helpText?: string | undefined
@@ -55,4 +56,4 @@ export interface SelectOption {
 export interface RuleValidator {
   message: string
   validator: (val: any) => boolean
-}
+}

package/package.json

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

package/lib/components/RuleEvaluator.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { RuleValidator } from 'lib/model';
-import { watch } from 'vue';
-
-interface RuleEvaluatorProps {
-  rules?: RuleValidator[]
-  modelValue: any
-}
-
-const props = withDefaults(defineProps<RuleEvaluatorProps>(), {
-  rules: () => ([]),
-  modelValue: undefined,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-watch(
-  props.modelValue,
-  (newVal) => {
-    let error = null;
-    const nRules = props.rules?.length ?? 0;
-
-    for (let i = 0; i < nRules; i += 1) {
-      const rule = props.rules[i];
-      const validator = rule.validator(newVal);
-      if (!validator) {
-        error = rule.message;
-        break;
-      }
-    }
-    emit('update:modelValue', error);
-  },
-  { immediate: true }
-)
-
-</script>