@josercl/form-maker 1.3.1-beta2 → 1.3.1-beta4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.iife.js +1 -1
  2. package/dist/index.js +87 -87
  3. package/dist/index.umd.cjs +1 -1
  4. package/lib/components/inputs/SelectInput.vue +4 -4
  5. package/lib/index.ts +1 -1
  6. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -1 +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 f=o;return Array.isArray(o)||(f=[o]),f.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 f=o.split(".");let k=l.modelValue;for(let C=0;C<f.length-1;C+=1){const h=k[f[C]];if(!h)break;k=h}return k},m=o=>{const f=o.split(".");return f[f.length-1]};return(o,f)=>{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(),f=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},()=>[f.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,f)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${f}`},[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=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o.value}`,value:o.value},e.toDisplayString(o.label),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"],u=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":u,"form-maker-input-date":u,"form-maker-input-email":u,"form-maker-input-month":u,"form-maker-input-number":u,"form-maker-input-password":u,"form-maker-input-search":u,"form-maker-input-tel":u,"form-maker-input-time":u,"form-maker-input-text":u,"form-maker-input-url":u,"form-maker-input-week":u,"form-maker-input-range":u,"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);
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);
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- 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 k, 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";
2
- const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ */ g({
1
+ 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";
2
+ const oe = ["onSubmit"], re = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ */ g({
3
3
  __name: "FormMaker",
4
4
  props: {
5
5
  loading: { type: Boolean, default: !1 },
@@ -20,10 +20,10 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
20
20
  submitButtonText: { default: "Submit" }
21
21
  },
22
22
  emits: ["submit", "update:modelValue"],
23
- setup(s, { emit: r }) {
24
- const e = s, l = () => r("submit"), a = y(() => e.fields.length > 0 ? e.fields.map((t) => {
25
- let b = t;
26
- return Array.isArray(t) || (b = [t]), b.map((C) => C.id ? C : {
23
+ setup(s, { emit: o }) {
24
+ const e = s, l = () => o("submit"), a = y(() => e.fields.length > 0 ? e.fields.map((t) => {
25
+ let k = t;
26
+ return Array.isArray(t) || (k = [t]), k.map((C) => C.id ? C : {
27
27
  ...C,
28
28
  id: `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${C.name}`
29
29
  });
@@ -35,39 +35,39 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
35
35
  }
36
36
  ]));
37
37
  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"));
38
- const u = e.rowClass || c("form-row"), o = e.columnClass || c("form-column"), v = e.submitButtonClass || c("submit-button"), p = (t) => {
39
- const b = t.split(".");
38
+ const u = e.rowClass || c("form-row"), r = e.columnClass || c("form-column"), v = e.submitButtonClass || c("submit-button"), p = (t) => {
39
+ const k = t.split(".");
40
40
  let C = e.modelValue;
41
- for (let $ = 0; $ < b.length - 1; $ += 1) {
42
- const _ = C[b[$]];
41
+ for (let $ = 0; $ < k.length - 1; $ += 1) {
42
+ const _ = C[k[$]];
43
43
  if (!_)
44
44
  break;
45
45
  C = _;
46
46
  }
47
47
  return C;
48
48
  }, m = (t) => {
49
- const b = t.split(".");
50
- return b[b.length - 1];
49
+ const k = t.split(".");
50
+ return k[k.length - 1];
51
51
  };
52
- return (t, b) => {
52
+ return (t, k) => {
53
53
  const C = j("form-maker-input");
54
54
  return n(), i("form", {
55
55
  class: "form-maker",
56
56
  onSubmit: X(l, ["prevent"])
57
57
  }, [
58
- t.loading ? k(t.$slots, "loading", { key: 0 }, () => [
58
+ t.loading ? b(t.$slots, "loading", { key: 0 }, () => [
59
59
  O(" Loading... ")
60
60
  ]) : B("", !0),
61
- k(t.$slots, "default", {}, () => [
61
+ b(t.$slots, "default", {}, () => [
62
62
  (n(!0), i(M, null, A(a.value, ($, _) => (n(), i("div", {
63
63
  class: T(f(u)),
64
64
  key: `fieldRow_${_}`
65
65
  }, [
66
66
  (n(!0), i(M, null, A($, (V, d) => (n(), i("div", {
67
- class: T([f(o), V.columnClass]),
67
+ class: T([f(r), V.columnClass]),
68
68
  key: `field_${_}_${d}`
69
69
  }, [
70
- k(t.$slots, `${V.name}`, { field: V }, () => [
70
+ b(t.$slots, `${V.name}`, { field: V }, () => [
71
71
  Y(C, F({
72
72
  modelValue: p(V.name)[m(V.name)],
73
73
  "onUpdate:modelValue": (G) => p(V.name)[m(V.name)] = G
@@ -76,21 +76,21 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
76
76
  ], 2))), 128))
77
77
  ], 2))), 128))
78
78
  ]),
79
- k(t.$slots, "extra"),
80
- k(t.$slots, "divider", {}, () => [
81
- t.hasActions && !t.hideDivider ? (n(), i("hr", oe)) : B("", !0)
79
+ b(t.$slots, "extra"),
80
+ b(t.$slots, "divider", {}, () => [
81
+ t.hasActions && !t.hideDivider ? (n(), i("hr", re)) : B("", !0)
82
82
  ]),
83
- t.hasActions ? k(t.$slots, "actions", { key: 1 }, () => [
84
- k(t.$slots, "submit-button", {}, () => [
83
+ t.hasActions ? b(t.$slots, "actions", { key: 1 }, () => [
84
+ b(t.$slots, "submit-button", {}, () => [
85
85
  S("button", {
86
86
  class: T(f(v)),
87
87
  disabled: t.loading,
88
88
  type: "submit"
89
89
  }, w(t.submitButtonText), 11, se)
90
90
  ]),
91
- k(t.$slots, "extra-buttons")
91
+ b(t.$slots, "extra-buttons")
92
92
  ]) : B("", !0)
93
- ], 40, re);
93
+ ], 40, oe);
94
94
  };
95
95
  }
96
96
  }), ne = /* @__PURE__ */ g({
@@ -100,14 +100,14 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
100
100
  modelValue: { default: void 0 }
101
101
  },
102
102
  emits: ["update:modelValue"],
103
- setup(s, { emit: r }) {
103
+ setup(s, { emit: o }) {
104
104
  const e = s;
105
105
  return q(
106
106
  e.modelValue,
107
107
  (l) => {
108
- var o;
108
+ var r;
109
109
  let a = null;
110
- const u = ((o = e.rules) == null ? void 0 : o.length) ?? 0;
110
+ const u = ((r = e.rules) == null ? void 0 : r.length) ?? 0;
111
111
  for (let v = 0; v < u; v += 1) {
112
112
  const p = e.rules[v];
113
113
  if (!p.validator(l)) {
@@ -115,31 +115,31 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
115
115
  break;
116
116
  }
117
117
  }
118
- r("update:modelValue", a);
118
+ o("update:modelValue", a);
119
119
  },
120
120
  { immediate: !0 }
121
121
  ), () => {
122
122
  };
123
123
  }
124
124
  }), pe = () => {
125
- const s = c("labelClass", null), r = c("inputClass", null), e = c("inputWrapperClass", null), l = c("inputGroupClass", null), a = c("inputErrorClass", null), u = c("errorClass", null), o = c("helpTextClass", null);
125
+ 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);
126
126
  return {
127
127
  labelClass: s,
128
- inputClass: r,
128
+ inputClass: o,
129
129
  inputWrapperClass: e,
130
130
  inputGroupClass: l,
131
131
  inputErrorClass: a,
132
132
  errorClass: u,
133
- helpTextClass: o
133
+ helpTextClass: r
134
134
  };
135
- }, ie = (s, r) => {
136
- const e = Z(r), l = x(null);
135
+ }, ie = (s, o) => {
136
+ const e = Z(o), l = x(null);
137
137
  return q(
138
138
  s,
139
139
  (a, u) => {
140
140
  if (l.value = null, a !== u)
141
- for (let o = 0; o < e.length; o += 1) {
142
- const v = e[o];
141
+ for (let r = 0; r < e.length; r += 1) {
142
+ const v = e[r];
143
143
  if (!v.validator(a)) {
144
144
  l.value = v.message;
145
145
  break;
@@ -149,11 +149,11 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
149
149
  { immediate: !0 }
150
150
  ), l;
151
151
  };
152
- function D(s, r, e) {
152
+ function D(s, o, e) {
153
153
  const l = e ?? "modelValue";
154
154
  return y({
155
155
  get: () => s(),
156
- set: (a) => r(`update:${l}`, a)
156
+ set: (a) => o(`update:${l}`, a)
157
157
  });
158
158
  }
159
159
  const me = /* @__PURE__ */ g({
@@ -169,23 +169,23 @@ const me = /* @__PURE__ */ g({
169
169
  rules: { default: () => [] }
170
170
  },
171
171
  emits: ["update:modelValue"],
172
- setup(s, { emit: r }) {
173
- const e = s, l = D(() => e.modelValue, r), {
172
+ setup(s, { emit: o }) {
173
+ const e = s, l = D(() => e.modelValue, o), {
174
174
  labelClass: a,
175
175
  inputClass: u,
176
- inputWrapperClass: o,
176
+ inputWrapperClass: r,
177
177
  inputGroupClass: v,
178
178
  inputErrorClass: p,
179
179
  errorClass: m,
180
180
  helpTextClass: t
181
- } = pe(), b = y(() => !!e.label), C = y(() => !!e.helpText), $ = ie(l, e.rules), _ = y(() => !!e.error || !!$.value), V = y(() => e.error ? e.error : $.value);
181
+ } = pe(), k = y(() => !!e.label), C = y(() => !!e.helpText), $ = ie(l, e.rules), _ = y(() => !!e.error || !!$.value), V = y(() => e.error ? e.error : $.value);
182
182
  return (d, G) => {
183
183
  const J = j("form-maker-label"), K = j("form-maker-help"), Q = j("form-maker-error");
184
184
  return n(), i("div", {
185
- class: T([_.value && f(p), f(o)])
185
+ class: T([_.value && f(p), f(r)])
186
186
  }, [
187
- d.type !== "checkbox" ? k(d.$slots, "label", { key: 0 }, () => [
188
- b.value ? (n(), I(J, {
187
+ d.type !== "checkbox" ? b(d.$slots, "label", { key: 0 }, () => [
188
+ k.value ? (n(), I(J, {
189
189
  key: 0,
190
190
  id: d.id,
191
191
  class: T(f(a))
@@ -196,21 +196,21 @@ const me = /* @__PURE__ */ g({
196
196
  _: 1
197
197
  }, 8, ["id", "class"])) : B("", !0)
198
198
  ]) : B("", !0),
199
- k(d.$slots, "default", {}, () => [
199
+ b(d.$slots, "default", {}, () => [
200
200
  S("div", {
201
201
  class: T([f(v), _.value && f(p)])
202
202
  }, [
203
- k(d.$slots, "before"),
203
+ b(d.$slots, "before"),
204
204
  (n(), I(ee(`form-maker-input-${d.type}`), F({ ...d.$props, ...d.$attrs }, {
205
205
  class: [d.type !== "checkbox" && f(u), _.value && f(p)],
206
206
  label: d.label,
207
207
  modelValue: f(l),
208
208
  "onUpdate:modelValue": G[0] || (G[0] = (U) => R(l) ? l.value = U : null)
209
209
  }), null, 16, ["class", "label", "modelValue"])),
210
- k(d.$slots, "after")
210
+ b(d.$slots, "after")
211
211
  ], 2)
212
212
  ]),
213
- k(d.$slots, "help", {}, () => [
213
+ b(d.$slots, "help", {}, () => [
214
214
  C.value ? (n(), I(K, {
215
215
  key: 0,
216
216
  class: T(f(t))
@@ -221,7 +221,7 @@ const me = /* @__PURE__ */ g({
221
221
  _: 1
222
222
  }, 8, ["class"])) : B("", !0)
223
223
  ]),
224
- k(d.$slots, "errors", {}, () => [
224
+ b(d.$slots, "errors", {}, () => [
225
225
  _.value ? (n(), I(Q, {
226
226
  key: 0,
227
227
  class: T(f(m))
@@ -248,18 +248,18 @@ const me = /* @__PURE__ */ g({
248
248
  options: { type: [Boolean, Array], default: () => [] }
249
249
  },
250
250
  emits: ["update:modelValue"],
251
- setup(s, { emit: r }) {
252
- 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)), o = y(() => l.value ? [
251
+ setup(s, { emit: o }) {
252
+ 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 ? [
253
253
  {
254
254
  label: e.label,
255
255
  value: !0
256
256
  }
257
257
  ] : e.options), v = (p) => {
258
258
  let m = [...u.value];
259
- m.indexOf(p) === -1 ? m.push(p) : m = m.filter((t) => t !== p), l.value ? r("update:modelValue", m.length > 0) : r("update:modelValue", m);
259
+ 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);
260
260
  };
261
- return (p, m) => (n(!0), i(M, null, A(o.value, (t, b) => (n(), i("div", {
262
- key: `option_${b}`
261
+ return (p, m) => (n(!0), i(M, null, A(r.value, (t, k) => (n(), i("div", {
262
+ key: `option_${k}`
263
263
  }, [
264
264
  S("label", null, [
265
265
  S("input", F(p.$props, {
@@ -284,12 +284,12 @@ const me = /* @__PURE__ */ g({
284
284
  rules: { default: () => [] }
285
285
  },
286
286
  emits: ["update:modelValue"],
287
- setup(s, { emit: r }) {
287
+ setup(s, { emit: o }) {
288
288
  const e = (l) => {
289
289
  const a = l.currentTarget;
290
290
  if (a.files && a.files.length) {
291
291
  const u = a.files[0];
292
- r("update:modelValue", u);
292
+ o("update:modelValue", u);
293
293
  }
294
294
  };
295
295
  return (l, a) => (n(), i("input", F(l.$props, {
@@ -298,8 +298,8 @@ const me = /* @__PURE__ */ g({
298
298
  }), null, 16));
299
299
  }
300
300
  });
301
- function N(s, r) {
302
- return z(`${s.as ?? "div"}`, r.attrs, r.slots);
301
+ function N(s, o) {
302
+ return z(`${s.as ?? "div"}`, o.attrs, o.slots);
303
303
  }
304
304
  N.props = {
305
305
  as: {
@@ -308,8 +308,8 @@ N.props = {
308
308
  default: "div"
309
309
  }
310
310
  };
311
- function H(s, { slots: r, attrs: e }) {
312
- return z("label", { ...e, for: s.id }, r.default());
311
+ function H(s, { slots: o, attrs: e }) {
312
+ return z("label", { ...e, for: s.id }, o.default());
313
313
  }
314
314
  H.props = {
315
315
  id: {
@@ -330,12 +330,12 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
330
330
  rules: {}
331
331
  },
332
332
  emits: ["update:modelValue"],
333
- setup(s, { emit: r }) {
333
+ setup(s, { emit: o }) {
334
334
  const e = (l) => {
335
- r("update:modelValue", l);
335
+ o("update:modelValue", l);
336
336
  };
337
- return (l, a) => (n(!0), i(M, null, A(l.options, (u, o) => (n(), i("div", {
338
- key: `option_${o}`
337
+ return (l, a) => (n(!0), i(M, null, A(l.options, (u, r) => (n(), i("div", {
338
+ key: `option_${r}`
339
339
  }, [
340
340
  S("label", null, [
341
341
  S("input", F(l.$props, {
@@ -362,26 +362,26 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
362
362
  rules: { default: () => [] }
363
363
  },
364
364
  emits: ["update:modelValue"],
365
- setup(s, { emit: r }) {
366
- const e = s, l = D(() => e.modelValue, r), a = Object.keys(e.optionGroups).length > 0, u = y(() => e.options.map((o) => typeof o == "object" ? o : {
367
- label: o,
368
- value: o
365
+ setup(s, { emit: o }) {
366
+ 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 : {
367
+ label: r,
368
+ value: r
369
369
  }));
370
- return (o, v) => L((n(), i("select", {
371
- id: o.id,
370
+ return (r, v) => L((n(), i("select", {
371
+ id: r.id,
372
372
  "onUpdate:modelValue": v[0] || (v[0] = (p) => R(l) ? l.value = p : null),
373
- disabled: o.disabled,
374
- name: o.name,
375
- placeholder: o.placeholder
373
+ disabled: r.disabled,
374
+ name: r.name,
375
+ placeholder: r.placeholder
376
376
  }, [
377
- a ? (n(!0), i(M, { key: 0 }, A(o.optionGroups, (p, m) => (n(), i("optgroup", {
377
+ a ? (n(!0), i(M, { key: 0 }, A(r.optionGroups, (p, m) => (n(), i("optgroup", {
378
378
  key: `optGroup_${m}`,
379
379
  label: m
380
380
  }, [
381
- (n(!0), i(M, null, A(p, (t) => (n(), i("option", {
382
- key: `option_${t.value}`,
383
- value: t.value
384
- }, w(t.label), 9, $e))), 128))
381
+ (n(!0), i(M, null, A(p, (t, k) => (n(), i("option", {
382
+ key: `option_${t}`,
383
+ value: k
384
+ }, w(t), 9, $e))), 128))
385
385
  ], 8, Ce))), 128)) : (n(!0), i(M, { key: 1 }, A(u.value, (p, m) => (n(), i("option", {
386
386
  key: `option_${m}`,
387
387
  value: p.value
@@ -396,11 +396,11 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
396
396
  modelValue: {}
397
397
  },
398
398
  emits: ["update:modelValue"],
399
- setup(s, { emit: r }) {
400
- const e = s, l = D(() => e.modelValue, r);
399
+ setup(s, { emit: o }) {
400
+ const e = s, l = D(() => e.modelValue, o);
401
401
  return (a, u) => L((n(), i("textarea", F({
402
402
  id: a.id,
403
- "onUpdate:modelValue": u[0] || (u[0] = (o) => R(l) ? l.value = o : null)
403
+ "onUpdate:modelValue": u[0] || (u[0] = (r) => R(l) ? l.value = r : null)
404
404
  }, { ...a.$props, ...a.$attrs }), null, 16, Ve)), [
405
405
  [te, f(l)]
406
406
  ]);
@@ -417,10 +417,10 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
417
417
  rules: { default: () => [] }
418
418
  },
419
419
  emits: ["update:modelValue"],
420
- setup(s, { emit: r }) {
421
- const e = s, l = D(() => e.modelValue, r);
420
+ setup(s, { emit: o }) {
421
+ const e = s, l = D(() => e.modelValue, o);
422
422
  return (a, u) => L((n(), i("input", F({
423
- "onUpdate:modelValue": u[0] || (u[0] = (o) => R(l) ? l.value = o : null),
423
+ "onUpdate:modelValue": u[0] || (u[0] = (r) => R(l) ? l.value = r : null),
424
424
  type: a.type
425
425
  }, { ...a.$props, ...a.$attrs }), null, 16, Be)), [
426
426
  [ae, f(l)]
@@ -463,12 +463,12 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
463
463
  "form-maker-error": N
464
464
  }
465
465
  }, we = {
466
- install: (s, r) => {
466
+ install: (s, o = {}) => {
467
467
  const e = {
468
- classes: { ...P.classes, ...r.classes },
468
+ classes: { ...P.classes, ...o.classes },
469
469
  components: {
470
470
  ...P.components,
471
- ...r.components
471
+ ...o.components
472
472
  }
473
473
  };
474
474
  s.component("FormMaker", ue), s.component("FormMakerInput", me), Object.keys(e.classes).forEach((l) => {
package/dist/index.umd.cjs CHANGED
@@ -1 +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 f=o;return Array.isArray(o)||(f=[o]),f.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 f=o.split(".");let k=l.modelValue;for(let C=0;C<f.length-1;C+=1){const h=k[f[C]];if(!h)break;k=h}return k},m=o=>{const f=o.split(".");return f[f.length-1]};return(o,f)=>{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(),f=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},()=>[f.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,f)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${f}`},[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=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o.value}`,value:o.value},e.toDisplayString(o.label),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"],u=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":u,"form-maker-input-date":u,"form-maker-input-email":u,"form-maker-input-month":u,"form-maker-input-number":u,"form-maker-input-password":u,"form-maker-input-search":u,"form-maker-input-tel":u,"form-maker-input-time":u,"form-maker-input-text":u,"form-maker-input-url":u,"form-maker-input-week":u,"form-maker-input-range":u,"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])})}}});
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])})}}});
package/lib/components/inputs/SelectInput.vue CHANGED
@@ -54,11 +54,11 @@ const fixedOptions = computed(() => props.options.map(o => {
54
54
  :label="key"
55
55
  >
56
56
  <option
57
- v-for="opt in opts"
58
- :key="`option_${opt.value}`"
59
- :value="opt.value"
57
+ v-for="(opt, optKey) in opts"
58
+ :key="`option_${opt}`"
59
+ :value="optKey"
60
60
  >
61
- {{ opt.label }}
61
+ {{ opt }}
62
62
  </option>
63
63
  </optgroup>
64
64
  </template>
package/lib/index.ts CHANGED
@@ -54,7 +54,7 @@ const defaultOptions: FormMakerPluginOptions = {
54
54
  };
55
55
 
56
56
  const FormMaker: Plugin = {
57
- install: (app: App, extraOptions: FormMakerPluginOptions) => {
57
+ install: (app: App, extraOptions: FormMakerPluginOptions = <FormMakerPluginOptions>{}) => {
58
58
  const options = {
59
59
  classes: { ...defaultOptions.classes, ...extraOptions.classes },
60
60
  components: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@josercl/form-maker",
3
- "version": "1.3.1-beta2",
3
+ "version": "1.3.1-beta4",
4
4
  "type": "module",
5
5
  "description": "Form generator using vue 3",
6
6
  "author": "Jose Carrero <josercl@gmail.com>",