@josercl/form-maker 1.3.3 → 1.3.4

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 (7) hide show
  1. package/dist/index.iife.js +1 -1
  2. package/dist/index.js +54 -48
  3. package/dist/index.umd.cjs +1 -1
  4. package/lib/components/FormMaker.vue +4 -7
  5. package/lib/components/FormMakerInput.vue +1 -0
  6. package/lib/model.d.ts +1 -0
  7. 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(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);
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(a,{emit:r}){const t=a,i=r,l=()=>i("submit"),n=e.computed(()=>t.fields.length>0?t.fields.map(o=>{let u=o;return Array.isArray(o)||(u=[o]),u.map(k=>({...k,id:k.id||`formMaker_${new Date().getTime()}_${k.name}`}))}):Object.keys(t.modelValue).map(o=>[{name:o,label:o,id:`formMaker_${o}`}]));e.provide("labelClass",t.labelClass||e.inject("form-label")),e.provide("inputGroupClass",t.inputGroupClass||e.inject("input-group")),e.provide("inputWrapperClass",t.inputWrapperClass||e.inject("input-wrapper")),e.provide("inputErrorClass",t.inputErrorClass||e.inject("input-error")),e.provide("inputClass",t.inputClass||e.inject("input")),e.provide("errorClass",t.errorClass||e.inject("error")),e.provide("helpTextClass",t.helpTextClass||e.inject("help-text"));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 b=k[u[B]];if(!b)break;k=b}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(n.value,(B,b)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s)),key:`fieldRow_${b}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B,(h,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(p),h.columnClass]),key:`field_${b}_${c}`},[e.renderSlot(o.$slots,`${h.name}`,{field:h},()=>[e.createVNode(k,e.mergeProps({modelValue:m(h.name)[d(h.name)],"onUpdate:modelValue":V=>m(h.name)[d(h.name)]=V},h),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 a=e.inject("labelClass",null),r=e.inject("inputClass",null),t=e.inject("inputWrapperClass",null),i=e.inject("inputGroupClass",null),l=e.inject("inputErrorClass",null),n=e.inject("errorClass",null),s=e.inject("helpTextClass",null);return{labelClass:a,inputClass:r,inputWrapperClass:t,inputGroupClass:i,inputErrorClass:l,errorClass:n,helpTextClass:s}},N=(a,r=[])=>{const t=e.toRaw(r),i=e.ref(null);return e.watch(a,(l,n)=>{if(i.value=null,l!==n)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(a,r,t){const i=t??"modelValue";return e.computed({get:()=>a(),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},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(a,{emit:r}){const t=a,l=y(()=>t.modelValue,r),{labelClass:n,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),b=e.computed(()=>!!t.error||!!B.value),h=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([b.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(n)),label:c.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{},()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(C),b.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),b.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",{},()=>[b.value?(e.openBlock(),e.createBlock(K,{key:0,class:e.normalizeClass(e.unref(d))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(h.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(a,{emit:r}){const t=a,i=r,l=e.computed(()=>Array.isArray(t.options)&&t.options.length===0),n=e.computed(()=>t.modelValue),s=e.computed(()=>(Array.isArray(n.value)?n.value:[n.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},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(a,{emit:r}){const t=r,i=l=>{const n=l.currentTarget;if(n.files&&n.files.length){const s=n.files[0];t("update:modelValue",s)}};return(l,n)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(l.$props,{type:"file",onChange:i}),null,16))}});function g(a,r){return e.h(`${a.as??"div"}`,r.attrs,r.slots)}g.props={as:{type:String,required:!1,default:"div"}};function $(a,{slots:r,attrs:t}){return e.h("label",{...t,for:a.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:{},id:{default:void 0}},emits:["update:modelValue"],setup(a,{emit:r}){const t=r,i=l=>{t("update:modelValue",l)};return(l,n)=>(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))}}),I=["id","disabled","name","placeholder"],P=["label"],R=["value"],x=["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},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(a,{emit:r}){const t=a,l=y(()=>t.modelValue,r),n=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},[n?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.optionGroups,(m,d)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${d}`,label:d},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,R))),128))],8,P))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(m,d)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${d}`,value:m.value},e.toDisplayString(m.label),9,x))),128))],8,I)),[[e.vModelSelect,e.unref(l)]])}}),U=["id"],W=e.defineComponent({__name:"TextAreaInput",props:{modelValue:{}},emits:["update:modelValue"],setup(a,{emit:r}){const t=a,l=y(()=>t.modelValue,r);return(n,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:n.id,"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(l)?l.value=p:null)},{...n.$props,...n.$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},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(a,{emit:r}){const t=a,l=y(()=>t.modelValue,r);return(n,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:n.type},{...n.$props,...n.$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:(a,r={})=>{const t={classes:{..._.classes,...r.classes},components:{..._.components,...r.components}};a.component("FormMaker",j),a.component("FormMakerInput",F),Object.keys(t.classes).forEach(i=>{a.provide(i,t.classes[i])}),Object.keys(t.components).forEach(i=>{a.component(i,t.components[i])})}}}(Vue);
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- 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";
1
+ import { defineComponent as w, computed as y, provide as E, inject as c, 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 x, withDirectives as L, vModelSelect as te, vModelText as ae, vModelDynamic as oe } from "vue";
2
2
  const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ */ w({
3
3
  __name: "FormMaker",
4
4
  props: {
@@ -23,10 +23,10 @@ const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ *
23
23
  setup(o, { emit: a }) {
24
24
  const e = o, n = a, l = () => n("submit"), r = y(() => e.fields.length > 0 ? e.fields.map((t) => {
25
25
  let b = t;
26
- return Array.isArray(t) || (b = [t]), b.map((C) => C.id ? C : {
26
+ return Array.isArray(t) || (b = [t]), b.map((C) => ({
27
27
  ...C,
28
- id: `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${C.name}`
29
- });
28
+ id: C.id || `formMaker_${(/* @__PURE__ */ new Date()).getTime()}_${C.name}`
29
+ }));
30
30
  }) : Object.keys(e.modelValue).map((t) => [
31
31
  {
32
32
  name: t,
@@ -34,15 +34,15 @@ const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ *
34
34
  id: `formMaker_${t}`
35
35
  }
36
36
  ]));
37
- 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"));
38
- const s = e.rowClass || f("form-row"), u = e.columnClass || f("form-column"), _ = e.submitButtonClass || f("submit-button"), d = (t) => {
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 s = e.rowClass || c("form-row"), u = e.columnClass || c("form-column"), $ = e.submitButtonClass || c("submit-button"), d = (t) => {
39
39
  const b = t.split(".");
40
40
  let C = e.modelValue;
41
41
  for (let g = 0; g < b.length - 1; g += 1) {
42
- const $ = C[b[g]];
43
- if (!$)
42
+ const _ = C[b[g]];
43
+ if (!_)
44
44
  break;
45
- C = $;
45
+ C = _;
46
46
  }
47
47
  return C;
48
48
  }, m = (t) => {
@@ -59,13 +59,13 @@ const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ *
59
59
  O(" Loading... ")
60
60
  ]) : M("", !0),
61
61
  k(t.$slots, "default", {}, () => [
62
- (i(!0), p(A, null, F(r.value, (g, $) => (i(), p("div", {
62
+ (i(!0), p(A, null, F(r.value, (g, _) => (i(), p("div", {
63
63
  class: B(v(s)),
64
- key: `fieldRow_${$}`
64
+ key: `fieldRow_${_}`
65
65
  }, [
66
- (i(!0), p(A, null, F(g, (V, c) => (i(), p("div", {
66
+ (i(!0), p(A, null, F(g, (V, f) => (i(), p("div", {
67
67
  class: B([v(u), V.columnClass]),
68
- key: `field_${$}_${c}`
68
+ key: `field_${_}_${f}`
69
69
  }, [
70
70
  k(t.$slots, `${V.name}`, { field: V }, () => [
71
71
  X(C, G({
@@ -83,7 +83,7 @@ const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ *
83
83
  t.hasActions ? k(t.$slots, "actions", { key: 1 }, () => [
84
84
  k(t.$slots, "submit-button", {}, () => [
85
85
  S("button", {
86
- class: B(v(_)),
86
+ class: B(v($)),
87
87
  disabled: t.loading,
88
88
  type: "submit"
89
89
  }, T(t.submitButtonText), 11, ne)
@@ -94,7 +94,7 @@ const re = ["onSubmit"], se = { key: 0 }, ne = ["disabled"], ue = /* @__PURE__ *
94
94
  };
95
95
  }
96
96
  }), ie = () => {
97
- 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);
97
+ const o = c("labelClass", null), a = c("inputClass", null), e = c("inputWrapperClass", null), n = c("inputGroupClass", null), l = c("inputErrorClass", null), r = c("errorClass", null), s = c("helpTextClass", null);
98
98
  return {
99
99
  labelClass: o,
100
100
  inputClass: a,
@@ -138,6 +138,7 @@ const de = /* @__PURE__ */ w({
138
138
  error: { default: void 0 },
139
139
  helpText: { default: void 0 },
140
140
  label: { default: void 0 },
141
+ id: { default: void 0 },
141
142
  type: { default: "text" },
142
143
  rules: { default: () => [] }
143
144
  },
@@ -147,54 +148,55 @@ const de = /* @__PURE__ */ w({
147
148
  labelClass: r,
148
149
  inputClass: s,
149
150
  inputWrapperClass: u,
150
- inputGroupClass: _,
151
+ inputGroupClass: $,
151
152
  inputErrorClass: d,
152
153
  errorClass: m,
153
154
  helpTextClass: t
154
- } = 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);
155
- return (c, I) => {
155
+ } = 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);
156
+ return (f, I) => {
156
157
  const z = D("form-maker-label"), H = D("form-maker-help"), J = D("form-maker-error");
157
158
  return i(), p("div", {
158
- class: B([$.value && v(d), v(u)])
159
+ class: B([_.value && v(d), v(u)])
159
160
  }, [
160
- c.type !== "checkbox" ? k(c.$slots, "label", { key: 0 }, () => [
161
+ f.type !== "checkbox" ? k(f.$slots, "label", { key: 0 }, () => [
161
162
  b.value ? (i(), j(z, {
162
163
  key: 0,
163
- id: c.id,
164
- class: B(v(r))
164
+ id: f.id,
165
+ class: B(v(r)),
166
+ label: f.label
165
167
  }, {
166
168
  default: W(() => [
167
- O(T(c.label), 1)
169
+ O(T(f.label), 1)
168
170
  ]),
169
171
  _: 1
170
- }, 8, ["id", "class"])) : M("", !0)
172
+ }, 8, ["id", "class", "label"])) : M("", !0)
171
173
  ]) : M("", !0),
172
- k(c.$slots, "default", {}, () => [
174
+ k(f.$slots, "default", {}, () => [
173
175
  S("div", {
174
- class: B([v(_), $.value && v(d)])
176
+ class: B([v($), _.value && v(d)])
175
177
  }, [
176
- k(c.$slots, "before"),
177
- (i(), j(le(`form-maker-input-${c.type}`), G({ ...c.$props, ...c.$attrs }, {
178
- class: [c.type !== "checkbox" && v(s), $.value && v(d)],
178
+ k(f.$slots, "before"),
179
+ (i(), j(le(`form-maker-input-${f.type}`), G({ ...f.$props, ...f.$attrs }, {
180
+ class: [f.type !== "checkbox" && v(s), _.value && v(d)],
179
181
  modelValue: v(l),
180
182
  "onUpdate:modelValue": I[0] || (I[0] = (K) => R(l) ? l.value = K : null)
181
183
  }), null, 16, ["class", "modelValue"])),
182
- k(c.$slots, "after")
184
+ k(f.$slots, "after")
183
185
  ], 2)
184
186
  ]),
185
- k(c.$slots, "help", {}, () => [
187
+ k(f.$slots, "help", {}, () => [
186
188
  C.value ? (i(), j(H, {
187
189
  key: 0,
188
190
  class: B(v(t))
189
191
  }, {
190
192
  default: W(() => [
191
- O(T(c.helpText), 1)
193
+ O(T(f.helpText), 1)
192
194
  ]),
193
195
  _: 1
194
196
  }, 8, ["class"])) : M("", !0)
195
197
  ]),
196
- k(c.$slots, "errors", {}, () => [
197
- $.value ? (i(), j(J, {
198
+ k(f.$slots, "errors", {}, () => [
199
+ _.value ? (i(), j(J, {
198
200
  key: 0,
199
201
  class: B(v(m))
200
202
  }, {
@@ -227,7 +229,7 @@ const de = /* @__PURE__ */ w({
227
229
  label: e.label,
228
230
  value: !0
229
231
  }
230
- ] : e.options), _ = (d) => {
232
+ ] : e.options), $ = (d) => {
231
233
  let m = [...s.value];
232
234
  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);
233
235
  };
@@ -239,7 +241,7 @@ const de = /* @__PURE__ */ w({
239
241
  checked: s.value.indexOf(t.value) !== -1,
240
242
  value: t.value,
241
243
  type: "checkbox",
242
- onClick: () => _(t.value)
244
+ onClick: () => $(t.value)
243
245
  }), null, 16, me),
244
246
  O(" " + T(t.label), 1)
245
247
  ])
@@ -254,6 +256,7 @@ const de = /* @__PURE__ */ w({
254
256
  error: { default: void 0 },
255
257
  helpText: { default: void 0 },
256
258
  label: { default: void 0 },
259
+ id: { default: void 0 },
257
260
  type: {},
258
261
  rules: { default: () => [] }
259
262
  },
@@ -273,7 +276,7 @@ const de = /* @__PURE__ */ w({
273
276
  }
274
277
  });
275
278
  function N(o, a) {
276
- return P(`${o.as ?? "div"}`, a.attrs, a.slots);
279
+ return x(`${o.as ?? "div"}`, a.attrs, a.slots);
277
280
  }
278
281
  N.props = {
279
282
  as: {
@@ -283,7 +286,7 @@ N.props = {
283
286
  }
284
287
  };
285
288
  function q(o, { slots: a, attrs: e }) {
286
- return P("label", { ...e, for: o.id }, a.default());
289
+ return x("label", { ...e, for: o.id }, a.default());
287
290
  }
288
291
  q.props = {
289
292
  id: {
@@ -302,7 +305,8 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
302
305
  helpText: { default: void 0 },
303
306
  label: { default: void 0 },
304
307
  type: {},
305
- rules: {}
308
+ rules: {},
309
+ id: { default: void 0 }
306
310
  },
307
311
  emits: ["update:modelValue"],
308
312
  setup(o, { emit: a }) {
@@ -317,13 +321,13 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
317
321
  checked: s.value === l.modelValue,
318
322
  value: s.value,
319
323
  type: "radio",
320
- onChange: (_) => n(s.value)
324
+ onChange: ($) => n(s.value)
321
325
  }), null, 16, be),
322
326
  O(" " + T(s.label), 1)
323
327
  ])
324
328
  ]))), 128));
325
329
  }
326
- }), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], ye = ["value"], _e = ["value"], $e = /* @__PURE__ */ w({
330
+ }), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], ye = ["value"], $e = ["value"], _e = /* @__PURE__ */ w({
327
331
  __name: "SelectInput",
328
332
  props: {
329
333
  options: { default: () => [] },
@@ -334,6 +338,7 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
334
338
  error: { default: void 0 },
335
339
  helpText: { default: void 0 },
336
340
  label: { default: void 0 },
341
+ id: { default: void 0 },
337
342
  type: {},
338
343
  rules: { default: () => [] }
339
344
  },
@@ -343,9 +348,9 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
343
348
  label: u,
344
349
  value: u
345
350
  }));
346
- return (u, _) => L((i(), p("select", {
351
+ return (u, $) => L((i(), p("select", {
347
352
  id: u.id,
348
- "onUpdate:modelValue": _[0] || (_[0] = (d) => R(l) ? l.value = d : null),
353
+ "onUpdate:modelValue": $[0] || ($[0] = (d) => R(l) ? l.value = d : null),
349
354
  disabled: u.disabled,
350
355
  name: u.name,
351
356
  placeholder: u.placeholder
@@ -361,7 +366,7 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
361
366
  ], 8, Ce))), 128)) : (i(!0), p(A, { key: 1 }, F(s.value, (d, m) => (i(), p("option", {
362
367
  key: `option_${m}`,
363
368
  value: d.value
364
- }, T(d.label), 9, _e))), 128))
369
+ }, T(d.label), 9, $e))), 128))
365
370
  ], 8, he)), [
366
371
  [te, v(l)]
367
372
  ]);
@@ -390,6 +395,7 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
390
395
  error: { default: void 0 },
391
396
  helpText: { default: void 0 },
392
397
  label: { default: void 0 },
398
+ id: { default: void 0 },
393
399
  type: { default: "text" },
394
400
  rules: { default: () => [] }
395
401
  },
@@ -403,7 +409,7 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
403
409
  [oe, v(l)]
404
410
  ]);
405
411
  }
406
- }), x = {
412
+ }), P = {
407
413
  classes: {
408
414
  "form-row": "form-maker-row",
409
415
  "form-column": "form-maker-column",
@@ -432,7 +438,7 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
432
438
  "form-maker-input-range": h,
433
439
  "form-maker-input-file": ce,
434
440
  "form-maker-input-textarea": ge,
435
- "form-maker-input-select": $e,
441
+ "form-maker-input-select": _e,
436
442
  "form-maker-input-checkbox": fe,
437
443
  "form-maker-input-radio": ke,
438
444
  "form-maker-label": ve,
@@ -442,9 +448,9 @@ const ve = q, be = ["checked", "value", "onChange"], ke = /* @__PURE__ */ w({
442
448
  }, we = {
443
449
  install: (o, a = {}) => {
444
450
  const e = {
445
- classes: { ...x.classes, ...a.classes },
451
+ classes: { ...P.classes, ...a.classes },
446
452
  components: {
447
- ...x.components,
453
+ ...P.components,
448
454
  ...a.components
449
455
  }
450
456
  };
package/dist/index.umd.cjs CHANGED
@@ -1 +1 @@
1
- (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])})}}});
1
+ (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.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"),d=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},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(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:d(b.name)[m(b.name)],"onUpdate:modelValue":g=>d(b.name)[m(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},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r),{labelClass:a,inputClass:s,inputWrapperClass:p,inputGroupClass:C,inputErrorClass:d,errorClass:m,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(d),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)),label:c.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:1},8,["id","class","label"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{},()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(C),h.value&&e.unref(d)])},[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(d)],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(m))},{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(m=>!!m)),p=e.computed(()=>l.value?[{label:t.label,value:!0}]:t.options),C=d=>{let m=[...s.value];m.indexOf(d)===-1?m.push(d):m=m.filter(o=>o!==d),l.value?i("update:modelValue",m.length>0):i("update:modelValue",m)};return(d,m)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${u}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(d.$props,{checked: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},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=r,i=l=>{const a=l.currentTarget;if(a.files&&a.files.length){const s=a.files[0];t("update:modelValue",s)}};return(l,a)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(l.$props,{type:"file",onChange:i}),null,16))}});function $(n,r){return e.h(`${n.as??"div"}`,r.attrs,r.slots)}$.props={as:{type:String,required:!1,default:"div"}};function _(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"],x=e.defineComponent({__name:"RadioInput",props:{options:{default:()=>[]},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{},id:{default:void 0}},emits:["update:modelValue"],setup(n,{emit:r}){const t=r,i=l=>{t("update:modelValue",l)};return(l,a)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(s,p)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${p}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(l.$props,{checked:s.value===l.modelValue,value:s.value,type:"radio",onChange:C=>i(s.value)}),null,16,O),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},id:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r),a=Object.keys(t.optionGroups).length>0,s=e.computed(()=>t.options.map(p=>typeof p=="object"?p:{label:p,value:p}));return(p,C)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:p.id,"onUpdate:modelValue":C[0]||(C[0]=d=>e.isRef(l)?l.value=d:null),disabled:p.disabled,name:p.name,placeholder:p.placeholder},[a?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(p.optionGroups,(d,m)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${m}`,label:m},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d,(o,u)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${o}`,value:u},e.toDisplayString(o),9,P))),128))],8,I))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(d,m)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${m}`,value:d.value},e.toDisplayString(d.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},id:{default:void 0},type:{default:"text"},rules:{default:()=>[]}},emits:["update:modelValue"],setup(n,{emit:r}){const t=n,l=V(()=>t.modelValue,r);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":s[0]||(s[0]=p=>e.isRef(l)?l.value=p:null),type:a.type},{...a.$props,...a.$attrs}),null,16,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":x,"form-maker-label":G,"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/FormMaker.vue CHANGED
@@ -38,13 +38,10 @@ const formFields: ComputedRef<InputType[][]> = computed(() => {
38
38
  newRow = [row];
39
39
  }
40
40
  return newRow.map((fieldSpec: InputType) => {
41
- if (!fieldSpec.id) {
42
- return {
43
- ...fieldSpec,
44
- id: `formMaker_${new Date().getTime()}_${fieldSpec.name}`,
45
- };
46
- }
47
- return fieldSpec;
41
+ return {
42
+ ...fieldSpec,
43
+ id: fieldSpec.id || `formMaker_${new Date().getTime()}_${fieldSpec.name}`,
44
+ };
48
45
  });
49
46
  });
50
47
  }
package/lib/components/FormMakerInput.vue CHANGED
@@ -63,6 +63,7 @@ const realError = computed(() => {
63
63
  v-if="hasLabel"
64
64
  :id="id"
65
65
  :class="labelClass"
66
+ :label="label"
66
67
  >
67
68
  {{ label }}
68
69
  </form-maker-label>
package/lib/model.d.ts CHANGED
@@ -44,6 +44,7 @@ export interface FormMakerInputProps extends /* @vue-ignore */ InputHTMLAttribut
44
44
  error?: string | undefined
45
45
  helpText?: string | undefined
46
46
  label?: string | undefined
47
+ id?: string | undefined
47
48
  type?: string,
48
49
  rules?: RuleValidator[]
49
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@josercl/form-maker",
3
- "version": "1.3.3",
3
+ "version": "1.3.4",
4
4
  "type": "module",
5
5
  "description": "Form generator using vue 3",
6
6
  "author": "Jose Carrero <josercl@gmail.com>",