@josercl/form-maker 1.3.0 → 1.3.1-beta2

package/dist/index.iife.js

@@ -0,0 +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);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, computed as $, provide as E, inject as c, resolveComponent as j, openBlock as u, 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";
+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";
 const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ */ g({
   __name: "FormMaker",
   props: {
@@ -20,8 +20,8 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
     submitButtonText: { default: "Submit" }
   },
   emits: ["submit", "update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = () => a("submit"), r = $(() => e.fields.length > 0 ? e.fields.map((t) => {
+  setup(s, { emit: r }) {
+    const e = s, l = () => r("submit"), a = y(() => e.fields.length > 0 ? e.fields.map((t) => {
       let b = t;
       return Array.isArray(t) || (b = [t]), b.map((C) => C.id ? C : {
         ...C,
@@ -35,11 +35,11 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
       }
     ]));
     E("labelClass", e.labelClass || c("form-label")), E("inputGroupClass", e.inputGroupClass || c("input-group")), E("inputWrapperClass", e.inputWrapperClass || c("input-wrapper")), E("inputErrorClass", e.inputErrorClass || c("input-error")), E("inputClass", e.inputClass || c("input")), E("errorClass", e.errorClass || c("error")), E("helpTextClass", e.helpTextClass || c("help-text"));
-    const n = e.rowClass || c("form-row"), o = e.columnClass || c("form-column"), v = e.submitButtonClass || c("submit-button"), p = (t) => {
+    const u = e.rowClass || c("form-row"), o = e.columnClass || c("form-column"), v = e.submitButtonClass || c("submit-button"), p = (t) => {
       const b = t.split(".");
       let C = e.modelValue;
-      for (let y = 0; y < b.length - 1; y += 1) {
-        const _ = C[b[y]];
+      for (let $ = 0; $ < b.length - 1; $ += 1) {
+        const _ = C[b[$]];
         if (!_)
           break;
         C = _;
@@ -51,7 +51,7 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
     };
     return (t, b) => {
       const C = j("form-maker-input");
-      return u(), i("form", {
+      return n(), i("form", {
         class: "form-maker",
         onSubmit: X(l, ["prevent"])
       }, [
@@ -59,11 +59,11 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
           O(" Loading... ")
         ]) : B("", !0),
         k(t.$slots, "default", {}, () => [
-          (u(!0), i(M, null, A(r.value, (y, _) => (u(), i("div", {
-            class: T(f(n)),
+          (n(!0), i(M, null, A(a.value, ($, _) => (n(), i("div", {
+            class: T(f(u)),
             key: `fieldRow_${_}`
           }, [
-            (u(!0), i(M, null, A(y, (V, d) => (u(), i("div", {
+            (n(!0), i(M, null, A($, (V, d) => (n(), i("div", {
               class: T([f(o), V.columnClass]),
               key: `field_${_}_${d}`
             }, [
@@ -78,7 +78,7 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
         ]),
         k(t.$slots, "extra"),
         k(t.$slots, "divider", {}, () => [
-          t.hasActions && !t.hideDivider ? (u(), i("hr", oe)) : B("", !0)
+          t.hasActions && !t.hideDivider ? (n(), i("hr", oe)) : B("", !0)
         ]),
         t.hasActions ? k(t.$slots, "actions", { key: 1 }, () => [
           k(t.$slots, "submit-button", {}, () => [
@@ -100,47 +100,47 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
     modelValue: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
+  setup(s, { emit: r }) {
     const e = s;
     return q(
       e.modelValue,
       (l) => {
         var o;
-        let r = null;
-        const n = ((o = e.rules) == null ? void 0 : o.length) ?? 0;
-        for (let v = 0; v < n; v += 1) {
+        let a = null;
+        const u = ((o = e.rules) == null ? void 0 : o.length) ?? 0;
+        for (let v = 0; v < u; v += 1) {
           const p = e.rules[v];
           if (!p.validator(l)) {
-            r = p.message;
+            a = p.message;
             break;
           }
         }
-        a("update:modelValue", r);
+        r("update:modelValue", a);
       },
       { immediate: !0 }
     ), () => {
     };
   }
 }), pe = () => {
-  const s = c("labelClass", null), a = c("inputClass", null), e = c("inputWrapperClass", null), l = c("inputGroupClass", null), r = c("inputErrorClass", null), n = c("errorClass", null), o = c("helpTextClass", null);
+  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);
   return {
     labelClass: s,
-    inputClass: a,
+    inputClass: r,
     inputWrapperClass: e,
     inputGroupClass: l,
-    inputErrorClass: r,
-    errorClass: n,
+    inputErrorClass: a,
+    errorClass: u,
     helpTextClass: o
   };
-}, ie = (s, a) => {
-  const e = Z(a), l = x(null);
+}, ie = (s, r) => {
+  const e = Z(r), l = x(null);
   return q(
     s,
-    (r, n) => {
-      if (l.value = null, r !== n)
+    (a, u) => {
+      if (l.value = null, a !== u)
         for (let o = 0; o < e.length; o += 1) {
           const v = e[o];
-          if (!v.validator(r)) {
+          if (!v.validator(a)) {
             l.value = v.message;
             break;
           }
@@ -149,11 +149,11 @@ const re = ["onSubmit"], oe = { key: 0 }, se = ["disabled"], ue = /* @__PURE__ *
     { immediate: !0 }
   ), l;
 };
-function D(s, a, e) {
+function D(s, r, e) {
   const l = e ?? "modelValue";
-  return $({
+  return y({
     get: () => s(),
-    set: (r) => a(`update:${l}`, r)
+    set: (a) => r(`update:${l}`, a)
   });
 }
 const me = /* @__PURE__ */ g({
@@ -169,26 +169,26 @@ const me = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = D(() => e.modelValue, a), {
-      labelClass: r,
-      inputClass: n,
+  setup(s, { emit: r }) {
+    const e = s, l = D(() => e.modelValue, r), {
+      labelClass: a,
+      inputClass: u,
       inputWrapperClass: o,
       inputGroupClass: v,
       inputErrorClass: p,
       errorClass: m,
       helpTextClass: t
-    } = pe(), b = $(() => !!e.label), C = $(() => !!e.helpText), y = ie(l, e.rules), _ = $(() => !!e.error || !!y.value), V = $(() => e.error ? e.error : y.value);
+    } = pe(), b = y(() => !!e.label), C = y(() => !!e.helpText), $ = ie(l, e.rules), _ = y(() => !!e.error || !!$.value), V = y(() => e.error ? e.error : $.value);
     return (d, G) => {
       const J = j("form-maker-label"), K = j("form-maker-help"), Q = j("form-maker-error");
-      return u(), i("div", {
+      return n(), i("div", {
         class: T([_.value && f(p), f(o)])
       }, [
         d.type !== "checkbox" ? k(d.$slots, "label", { key: 0 }, () => [
-          b.value ? (u(), I(J, {
+          b.value ? (n(), I(J, {
             key: 0,
             id: d.id,
-            class: T(f(r))
+            class: T(f(a))
           }, {
             default: W(() => [
               O(w(d.label), 1)
@@ -201,18 +201,17 @@ const me = /* @__PURE__ */ g({
             class: T([f(v), _.value && f(p)])
           }, [
             k(d.$slots, "before"),
-            (u(), I(ee(`form-maker-input-${d.type}`), F({
+            (n(), I(ee(`form-maker-input-${d.type}`), F({ ...d.$props, ...d.$attrs }, {
+              class: [d.type !== "checkbox" && f(u), _.value && f(p)],
+              label: d.label,
               modelValue: f(l),
               "onUpdate:modelValue": G[0] || (G[0] = (U) => R(l) ? l.value = U : null)
-            }, { ...d.$props, ...d.$attrs }, {
-              class: [d.type !== "checkbox" && f(n), _.value && f(p)],
-              label: d.label
-            }), null, 16, ["modelValue", "class", "label"])),
+            }), null, 16, ["class", "label", "modelValue"])),
             k(d.$slots, "after")
           ], 2)
         ]),
         k(d.$slots, "help", {}, () => [
-          C.value ? (u(), I(K, {
+          C.value ? (n(), I(K, {
             key: 0,
             class: T(f(t))
           }, {
@@ -223,7 +222,7 @@ const me = /* @__PURE__ */ g({
           }, 8, ["class"])) : B("", !0)
         ]),
         k(d.$slots, "errors", {}, () => [
-          _.value ? (u(), I(Q, {
+          _.value ? (n(), I(Q, {
             key: 0,
             class: T(f(m))
           }, {
@@ -232,12 +231,12 @@ const me = /* @__PURE__ */ g({
             ]),
             _: 1
           }, 8, ["class"])) : B("", !0),
-          d.rules.length ? (u(), I(ne, {
+          d.rules.length ? (n(), I(ne, {
             key: 1,
             rules: d.rules,
             value: d.modelValue,
-            modelValue: f(y),
-            "onUpdate:modelValue": G[1] || (G[1] = (U) => R(y) ? y.value = U : null)
+            modelValue: f($),
+            "onUpdate:modelValue": G[1] || (G[1] = (U) => R($) ? $.value = U : null)
           }, null, 8, ["rules", "value", "modelValue"])) : B("", !0)
         ])
       ], 2);
@@ -249,22 +248,22 @@ const me = /* @__PURE__ */ g({
     options: { type: [Boolean, Array], default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = $(() => Array.isArray(e.options) && e.options.length === 0), r = $(() => e.modelValue), n = $(() => (Array.isArray(r.value) ? r.value : [r.value]).filter((m) => !!m)), o = $(() => l.value ? [
+  setup(s, { emit: r }) {
+    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 ? [
       {
         label: e.label,
         value: !0
       }
     ] : e.options), v = (p) => {
-      let m = [...n.value];
-      m.indexOf(p) === -1 ? m.push(p) : m = m.filter((t) => t !== p), l.value ? a("update:modelValue", m.length > 0) : a("update:modelValue", m);
+      let m = [...u.value];
+      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);
     };
-    return (p, m) => (u(!0), i(M, null, A(o.value, (t, b) => (u(), i("div", {
+    return (p, m) => (n(!0), i(M, null, A(o.value, (t, b) => (n(), i("div", {
       key: `option_${b}`
     }, [
       S("label", null, [
         S("input", F(p.$props, {
-          checked: n.value.indexOf(t.value) !== -1,
+          checked: u.value.indexOf(t.value) !== -1,
           value: t.value,
           type: "checkbox",
           onClick: () => v(t.value)
@@ -285,21 +284,22 @@ const me = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
+  setup(s, { emit: r }) {
     const e = (l) => {
-      if (l.target.files.length) {
-        const r = l.target.files[0];
-        a("update:modelValue", r);
+      const a = l.currentTarget;
+      if (a.files && a.files.length) {
+        const u = a.files[0];
+        r("update:modelValue", u);
       }
     };
-    return (l, r) => (u(), i("input", F(l.$props, {
+    return (l, a) => (n(), i("input", F(l.$props, {
       type: "file",
       onChange: e
     }), null, 16));
   }
 });
-function N(s, a) {
-  return z(s.as, a.attrs, a.slots);
+function N(s, r) {
+  return z(`${s.as ?? "div"}`, r.attrs, r.slots);
 }
 N.props = {
   as: {
@@ -308,8 +308,8 @@ N.props = {
     default: "div"
   }
 };
-function H(s, { slots: a, attrs: e }) {
-  return z("label", { ...e, for: s.id }, a.default());
+function H(s, { slots: r, attrs: e }) {
+  return z("label", { ...e, for: s.id }, r.default());
 }
 H.props = {
   id: {
@@ -327,28 +327,28 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     helpText: { default: void 0 },
     label: { default: void 0 },
     type: {},
-    rules: { default: () => [] }
+    rules: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
+  setup(s, { emit: r }) {
     const e = (l) => {
-      a("update:modelValue", l);
+      r("update:modelValue", l);
     };
-    return (l, r) => (u(!0), i(M, null, A(l.options, (n, o) => (u(), i("div", {
+    return (l, a) => (n(!0), i(M, null, A(l.options, (u, o) => (n(), i("div", {
       key: `option_${o}`
     }, [
       S("label", null, [
         S("input", F(l.$props, {
-          checked: n.value === l.modelValue,
-          value: n.value,
+          checked: u.value === l.modelValue,
+          value: u.value,
           type: "radio",
-          onChange: (v) => e(n.value)
+          onChange: (v) => e(u.value)
         }), null, 16, ke),
-        O(" " + w(n.label), 1)
+        O(" " + w(u.label), 1)
       ])
     ]))), 128));
   }
-}), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], ye = ["value"], $e = ["value"], _e = /* @__PURE__ */ g({
+}), he = ["id", "disabled", "name", "placeholder"], Ce = ["label"], $e = ["value"], ye = ["value"], _e = /* @__PURE__ */ g({
   __name: "SelectInput",
   props: {
     options: { default: () => [] },
@@ -362,30 +362,30 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = D(() => e.modelValue, a), r = Object.keys(e.optionGroups).length > 0, n = $(() => e.options.map((o) => typeof o == "object" ? o : {
+  setup(s, { emit: r }) {
+    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 : {
       label: o,
       value: o
     }));
-    return (o, v) => L((u(), i("select", {
+    return (o, v) => L((n(), i("select", {
       id: o.id,
       "onUpdate:modelValue": v[0] || (v[0] = (p) => R(l) ? l.value = p : null),
       disabled: o.disabled,
       name: o.name,
       placeholder: o.placeholder
     }, [
-      r ? (u(!0), i(M, { key: 0 }, A(o.optionGroups, (p, m) => (u(), i("optgroup", {
+      a ? (n(!0), i(M, { key: 0 }, A(o.optionGroups, (p, m) => (n(), i("optgroup", {
         key: `optGroup_${m}`,
         label: m
       }, [
-        (u(!0), i(M, null, A(p, (t) => (u(), i("option", {
+        (n(!0), i(M, null, A(p, (t) => (n(), i("option", {
           key: `option_${t.value}`,
           value: t.value
-        }, w(t.label), 9, ye))), 128))
-      ], 8, Ce))), 128)) : (u(!0), i(M, { key: 1 }, A(n.value, (p, m) => (u(), i("option", {
+        }, w(t.label), 9, $e))), 128))
+      ], 8, Ce))), 128)) : (n(!0), i(M, { key: 1 }, A(u.value, (p, m) => (n(), i("option", {
         key: `option_${m}`,
         value: p.value
-      }, w(p.label), 9, $e))), 128))
+      }, w(p.label), 9, ye))), 128))
     ], 8, he)), [
       [le, f(l)]
     ]);
@@ -396,12 +396,12 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = D(() => e.modelValue, a);
-    return (r, n) => L((u(), i("textarea", F({
-      id: r.id,
-      "onUpdate:modelValue": n[0] || (n[0] = (o) => R(l) ? l.value = o : null)
-    }, { ...r.$props, ...r.$attrs }), null, 16, Ve)), [
+  setup(s, { emit: r }) {
+    const e = s, l = D(() => e.modelValue, r);
+    return (a, u) => L((n(), i("textarea", F({
+      id: a.id,
+      "onUpdate:modelValue": u[0] || (u[0] = (o) => R(l) ? l.value = o : null)
+    }, { ...a.$props, ...a.$attrs }), null, 16, Ve)), [
       [te, f(l)]
     ]);
   }
@@ -417,12 +417,12 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     rules: { default: () => [] }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: a }) {
-    const e = s, l = D(() => e.modelValue, a);
-    return (r, n) => L((u(), i("input", F({
-      "onUpdate:modelValue": n[0] || (n[0] = (o) => R(l) ? l.value = o : null),
-      type: r.type
-    }, { ...r.$props, ...r.$attrs }), null, 16, Be)), [
+  setup(s, { emit: r }) {
+    const e = s, l = D(() => e.modelValue, r);
+    return (a, u) => L((n(), i("input", F({
+      "onUpdate:modelValue": u[0] || (u[0] = (o) => R(l) ? l.value = o : null),
+      type: a.type
+    }, { ...a.$props, ...a.$attrs }), null, 16, Be)), [
       [ae, f(l)]
     ]);
   }
@@ -463,12 +463,12 @@ const ve = H, ke = ["checked", "value", "onChange"], be = /* @__PURE__ */ g({
     "form-maker-error": N
   }
 }, we = {
-  install: (s, a = {}) => {
+  install: (s, r) => {
     const e = {
-      classes: { ...P.classes, ...a.classes },
+      classes: { ...P.classes, ...r.classes },
       components: {
         ...P.components,
-        ...a.components
+        ...r.components
       }
     };
     s.component("FormMaker", ue), s.component("FormMakerInput", me), Object.keys(e.classes).forEach((l) => {

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,V){typeof exports=="object"&&typeof module<"u"?module.exports=V(require("vue")):typeof define=="function"&&define.amd?define(["vue"],V):(e=typeof globalThis<"u"?globalThis:e||self,e.FormMaker=V(e.Vue))})(this,function(e){"use strict";const V=["onSubmit"],S={key:0},T=["disabled"],j=e.defineComponent({__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{default:()=>({})},fields:{default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{default:null},columnClass:{default:null},labelClass:{default:null},inputGroupClass:{default:null},inputWrapperClass:{default:null},inputErrorClass:{default:null},inputClass:{default:null},errorClass:{default:null},helpTextClass:{default:null},submitButtonClass:{default:null},submitButtonText:{default:"Submit"}},emits:["submit","update:modelValue"],setup(s,{emit:r}){const l=s,t=()=>r("submit"),n=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(n.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:r}){const l=s;return e.watch(l.modelValue,t=>{var a;let n=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)){n=p.message;break}}r("update:modelValue",n)},{immediate:!0}),()=>{}}}),N=()=>{const s=e.inject("labelClass",null),r=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),t=e.inject("inputGroupClass",null),n=e.inject("inputErrorClass",null),i=e.inject("errorClass",null),a=e.inject("helpTextClass",null);return{labelClass:s,inputClass:r,inputWrapperClass:l,inputGroupClass:t,inputErrorClass:n,errorClass:i,helpTextClass:a}},F=(s,r)=>{const l=e.toRaw(r),t=e.ref(null);return e.watch(s,(n,i)=>{if(t.value=null,n!==i)for(let a=0;a<l.length;a+=1){const c=l[a];if(!c.validator(n)){t.value=c.message;break}}},{immediate:!0}),t};function y(s,r,l){const t=l??"modelValue";return e.computed({get:()=>s(),set:n=>r(`update:${t}`,n)})}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:r}){const l=s,t=y(()=>l.modelValue,r),{labelClass:n,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(n))},{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({modelValue:e.unref(t),"onUpdate:modelValue":B[0]||(B[0]=$=>e.isRef(t)?t.value=$:null)},{...d.$props,...d.$attrs},{class:[d.type!=="checkbox"&&e.unref(i),h.value&&e.unref(p)],label:d.label}),null,16,["modelValue","class","label"])),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:r}){const l=s,t=e.computed(()=>Array.isArray(l.options)&&l.options.length===0),n=e.computed(()=>l.modelValue),i=e.computed(()=>(Array.isArray(n.value)?n.value:[n.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?r("update:modelValue",m.length>0):r("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:r}){const l=t=>{if(t.target.files.length){const n=t.target.files[0];r("update:modelValue",n)}};return(t,n)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:l}),null,16))}});function g(s,r){return e.h(s.as,r.attrs,r.slots)}g.props={as:{type:String,required:!1,default:"div"}};function _(s,{slots:r,attrs:l}){return e.h("label",{...l,for:s.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},modelValue:{},error:{default:void 0},helpText:{default:void 0},label:{default:void 0},type:{},rules:{default:()=>[]}},emits:["update:modelValue"],setup(s,{emit:r}){const l=t=>{r("update:modelValue",t)};return(t,n)=>(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:r}){const l=s,t=y(()=>l.modelValue,r),n=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},[n?(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:r}){const l=s,t=y(()=>l.modelValue,r);return(n,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:n.id,"onUpdate:modelValue":i[0]||(i[0]=a=>e.isRef(t)?t.value=a:null)},{...n.$props,...n.$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:r}){const l=s,t=y(()=>l.modelValue,r);return(n,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:n.type},{...n.$props,...n.$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,r={})=>{const l={classes:{...E.classes,...r.classes},components:{...E.components,...r.components}};s.component("FormMaker",j),s.component("FormMakerInput",D),Object.keys(l.classes).forEach(t=>{s.provide(t,l.classes[t])}),Object.keys(l.components).forEach(t=>{s.component(t,l.components[t])})}}});
+(function(e,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])})}}});

package/lib/components/FormMakerInput.vue

@@ -21,7 +21,10 @@ const props = withDefaults(defineProps<FormMakerInputProps>(), {
   rules: () => [],
   type: 'text'
 })
-const emit = defineEmits([ 'update:modelValue' ]);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue' | string, val: any): void
+}>();
 
 const value = useVModel(() => props.modelValue, emit);
 
@@ -70,10 +73,10 @@ const realError = computed(() => {
         <slot name="before" />
         <component
           :is="`form-maker-input-${type}`"
-          v-model="value"
           v-bind="{ ...$props, ...$attrs}"
           :class="[type !== 'checkbox' && inputClass, hasErrors && inputErrorClass]"
           :label="label"
+          v-model="value"
         />
         <slot name="after" />
       </div>

package/lib/components/SimpleComponent.ts

@@ -9,7 +9,7 @@ function SimpleComponent(
   props: SimpleComponentProps,
   context: SetupContext
 ) {
-  return h(props.as, context.attrs, context.slots);
+  return h(`${props.as ?? 'div'}`, context.attrs, context.slots);
 }
 
 SimpleComponent.props = {

package/lib/components/inputs/BasicInput.vue

@@ -13,7 +13,10 @@ const props = withDefaults(defineProps<FormMakerInputProps>(), {
   rules: () => [],
   type: 'text'
 });
-const emit = defineEmits(['update:modelValue']);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue' | string, val: any): void
+}>();
 
 const value = useVModel(() => props.modelValue, emit);
 </script>

package/lib/components/inputs/CheckboxInput.vue

@@ -42,7 +42,7 @@ const fieldOptions: ComputedRef<SelectOption[]> = computed(() => {
   ];
 });
 
-const handleClick = clickVal => {
+const handleClick = (clickVal: any) => {
   let selOptions = [ ...selectedOptions.value ];
   if (selOptions.indexOf(clickVal) === -1) {
     selOptions.push(clickVal);

package/lib/components/inputs/FileInput.vue

@@ -12,11 +12,14 @@ withDefaults(defineProps<FormMakerInputProps>(), {
   placeholder: undefined,
   rules: () => [],
 });
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (event: 'update:modelValue' | string, val: any): void
+}>();
 
-const handleFileSelect = event => {
-  if (event.target.files.length) {
-    const file = event.target.files[0];
+const handleFileSelect = (event: Event) => {
+  const el = event.currentTarget as HTMLInputElement
+  if (el.files && el.files.length) {
+    const file = el.files[0];
     emit('update:modelValue', file);
   }
 };

package/lib/components/inputs/RadioInput.vue

@@ -14,7 +14,7 @@ withDefaults(defineProps<RadioInputProps>(), {
   label: undefined,
   placeholder: undefined,
   options: () => [],
-  rules: () => [],
+
 });
 const emit = defineEmits(['update:modelValue'])
 

package/lib/components/inputs/SelectInput.vue

@@ -20,7 +20,9 @@ const props = withDefaults(defineProps<SelectInputProps>(), {
   optionGroups: () => ({}),
   rules: () => [],
 });
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (event: 'update:modelValue' | string, val: any): void
+}>();
 
 const value = useVModel(() => props.modelValue, emit);
 

package/lib/components/inputs/TextAreaInput.vue

@@ -11,7 +11,9 @@ const props = withDefaults(defineProps<TextAreaProps>(), {
   id: undefined,
   placeholder: undefined,
 });
-const emit = defineEmits([ 'update:modelValue' ]);
+const emit = defineEmits<{
+  (event: 'update:modelValue' | string, val: any): void
+}>();
 
 const value = useVModel(() => props.modelValue, emit);
 </script>

package/lib/{index.js → index.ts}

@@ -9,8 +9,10 @@ import RadioInput from './components/inputs/RadioInput.vue';
 import SelectInput from './components/inputs/SelectInput.vue';
 import TextAreaInput from './components/inputs/TextAreaInput.vue';
 import BasicInput from './components/inputs/BasicInput.vue';
+import type { FormMakerPluginOptions } from './model';
+import type { App, Plugin } from 'vue';
 
-const defaultOptions = {
+const defaultOptions: FormMakerPluginOptions = {
   classes: {
     'form-row': 'form-maker-row',
     'form-column': 'form-maker-column',
@@ -51,8 +53,8 @@ const defaultOptions = {
   },
 };
 
-const FormMaker = {
-  install: (app, extraOptions = {}) => {
+const FormMaker: Plugin = {
+  install: (app: App, extraOptions: FormMakerPluginOptions) => {
     const options = {
       classes: { ...defaultOptions.classes, ...extraOptions.classes },
       components: {

package/lib/model.d.ts

@@ -1,4 +1,14 @@
-import type {InputHTMLAttributes} from "vue";
+import type {Component, FunctionalComponent, InputHTMLAttributes} from "vue";
+
+declare module '@josercl/form-maker' {
+  import FormMaker from ".";
+  export default FormMaker
+}
+
+export interface FormMakerPluginOptions {
+  classes?: Record<string, string>,
+  components?: Record<string, Component | FunctionalComponent | VNode>
+}
 
 export interface InputType {
   id?: string | null
@@ -38,7 +48,7 @@ export interface FormMakerInputProps extends /* @vue-ignore */ InputHTMLAttribut
 }
 
 export interface SelectOption {
-  label: string
+  label: string | undefined
   value: any
 }
 

package/lib/shims-vue.d.ts

@@ -0,0 +1 @@
+declare module '*.vue'

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.3.0",
+  "version": "1.3.1-beta2",
   "type": "module",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
+  "types": "./lib/model.d.ts",
   "files": [
     "dist",
     "lib"