@josercl/form-maker 1.1.0-beta02 → 1.1.0-beta03

package/index.js

@@ -2,9 +2,9 @@ import FormMakerComponent from './lib/components/FormMaker.vue';
 import FormMakerInput from './lib/components/FormMakerInput.vue';
 import CheckboxInput from './lib/components/inputs/CheckboxInput.vue';
 import FileInput from './lib/components/inputs/FileInput.vue';
-import FormMakerInputError from './lib/components/inputs/FormMakerInputError.vue';
-import FormMakerInputHelp from './lib/components/inputs/FormMakerInputHelp.vue';
-import FormMakerInputLabel from './lib/components/inputs/FormMakerInputLabel.vue';
+import FormMakerInputError from './lib/components/texts/FormMakerInputError.vue';
+import FormMakerInputHelp from './lib/components/texts/FormMakerInputHelp.vue';
+import FormMakerInputLabel from './lib/components/texts/FormMakerInputLabel.vue';
 import RadioInput from './lib/components/inputs/RadioInput.vue';
 import SelectInput from './lib/components/inputs/SelectInput.vue';
 import TextAreaInput from './lib/components/inputs/TextAreaInput.vue';

package/lib/components/FormMaker.vue

@@ -93,14 +93,13 @@ const formFields = computed(() => {
     });
   }
 
-  return Object.keys(props.modelValue)
-    .map(key => [
-      {
-        name: key,
-        label: key,
-        id: `formMaker_${key}`,
-      },
-    ]);
+  return Object.keys(props.modelValue).map(key => [
+    {
+      name: key,
+      label: key,
+      id: `formMaker_${key}`,
+    },
+  ]);
 });
 
 const {
@@ -128,6 +127,25 @@ provide('helpTextClass', helpTextClass.value || inject('help-text'));
 const realRowClass = rowClass.value || inject('form-row');
 const realColumnClass = columnClass.value || inject('form-column');
 const realSubmitButtonClass = submitButtonClass.value || inject('submit-button');
+
+const getObject = fieldName => {
+  const fields = fieldName.split('.');
+  let result = modelValue.value;
+  for (let i = 0; i < fields.length - 1; i += 1) {
+    const candidate = result[fields[i]];
+    if (!candidate) {
+      break;
+    }
+    result = candidate;
+  }
+  return result;
+};
+
+const getProp = fieldName => {
+  const fields = fieldName.split('.');
+  return fields[fields.length - 1];
+};
+
 </script>
 
 <template>
@@ -148,7 +166,7 @@ const realSubmitButtonClass = submitButtonClass.value || inject('submit-button')
         :key="`fieldRow_${i}`"
       >
         <div
-          v-for="(field,j) in fieldRow"
+          v-for="(field, j) in fieldRow"
           :class="[realColumnClass, field.columnClass]"
           :key="`field_${i}_${j}`"
         >
@@ -157,7 +175,7 @@ const realSubmitButtonClass = submitButtonClass.value || inject('submit-button')
             :name="`${field.name}`"
           >
             <form-maker-input
-              v-model="modelValue[field.name]"
+              v-model="getObject(field.name)[getProp(field.name)]"
               v-bind="field"
             />
           </slot>

package/lib/components/FormMakerInput.vue

@@ -43,8 +43,9 @@ export default {
         v-if="hasLabel"
         :id="id"
         :class="labelClass"
-        :text="label"
-      />
+      >
+        {{ label }}
+      </form-maker-label>
     </slot>
     <slot>
       <div :class="[inputGroupClass, hasErrors && inputErrorClass]">
@@ -63,15 +64,17 @@ export default {
       <form-maker-help
         v-if="hasHelpText"
         :class="helpTextClass"
-        :text="helpText"
-      />
+      >
+        {{ helpText }}
+      </form-maker-help>
     </slot>
     <slot name="errors">
       <form-maker-error
         v-if="hasErrors"
         :class="errorClass"
-        :text="error"
-      />
+      >
+        {{ error }}
+      </form-maker-error>
     </slot>
   </div>
 </template>

package/lib/components/texts/FormMakerInputError.vue

@@ -0,0 +1,5 @@
+<script>
+import { simpleComponent } from '../../utils';
+
+export default simpleComponent();
+</script>

package/lib/components/texts/FormMakerInputHelp.vue

@@ -0,0 +1,5 @@
+<script>
+import { simpleComponent } from '../../utils';
+
+export default simpleComponent();
+</script>

package/lib/components/texts/FormMakerInputLabel.vue

@@ -0,0 +1,15 @@
+<script>
+import { h } from 'vue';
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return () => h('label', { ...attrs, for: props.id }, slots.default());
+  },
+};
+</script>

package/lib/utils.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, h } from 'vue';
 
 const setupVModel = (props, emit, propName = 'modelValue') => computed({
   get: () => props[propName],
@@ -6,3 +6,9 @@ const setupVModel = (props, emit, propName = 'modelValue') => computed({
 });
 
 export default setupVModel;
+
+export const simpleComponent = () => ({
+  setup(props, { slots, attrs }) {
+    return () => h('div', attrs, slots.default());
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.1.0-beta02",
+  "version": "1.1.0-beta03",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
   "scripts": {
@@ -9,7 +9,7 @@
     "build": "vite build",
     "build-docs": "vite -c docs.config.js build",
     "preview": "vite -c docs.config.js preview --port 5050",
-    "lint": "eslint --ext .vue,.js lib/ docs/ dev/ index.js"
+    "lint": "eslint --ext .vue,.js lib/ docs/ dev/ index.js --fix"
   },
   "files": [
     "index.js",

package/umd/index.umd.js

@@ -1 +1 @@
-var ae=Object.defineProperty,pe=Object.defineProperties;var ie=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var M=(e,i,k)=>i in e?ae(e,i,{enumerable:!0,configurable:!0,writable:!0,value:k}):e[i]=k,y=(e,i)=>{for(var k in i||(i={}))me.call(i,k)&&M(e,k,i[k]);if(N)for(var k of N(i))ce.call(i,k)&&M(e,k,i[k]);return e},E=(e,i)=>pe(e,ie(i));(function(e,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(e=typeof globalThis!="undefined"?globalThis:e||self,e.FormMaker=i(e.Vue))})(this,function(e){"use strict";const i=["onSubmit"],k=e.createTextVNode(" Loading... "),O={key:0},A=["disabled"],G={props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{type:Object,default:()=>({})},fields:{type:Array,default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{type:String,default:null},columnClass:{type:String,default:null},labelClass:{type:String,default:null},inputGroupClass:{type:String,default:null},inputWrapperClass:{type:String,default:null},inputErrorClass:{type:String,default:null},inputClass:{type:String,default:null},errorClass:{type:String,default:null},helpTextClass:{type:String,default:null},submitButtonClass:{type:String,default:null},submitButtonText:{type:String,default:"Submit"}},emits:["submit","update:modelValue"],setup(l,{emit:o}){const r=l,t=()=>o("submit"),s=e.computed(()=>r.fields.length>0?r.fields.map(c=>{let w=c;return Array.isArray(c)||(w=[c]),w.map(g=>g.id?g:E(y({},g),{id:`formMaker_${new Date().getTime()}_${g.name}`}))}):Object.keys(r.modelValue).map(c=>[{name:c,label:c,id:`formMaker_${c}`}])),{rowClass:a,columnClass:n,labelClass:B,inputGroupClass:u,inputWrapperClass:C,inputErrorClass:h,inputClass:p,errorClass:b,helpTextClass:S,submitButtonClass:m,modelValue:_}=e.toRefs(r);e.provide("labelClass",B.value||e.inject("form-label")),e.provide("inputGroupClass",u.value||e.inject("input-group")),e.provide("inputWrapperClass",C.value||e.inject("input-wrapper")),e.provide("inputErrorClass",h.value||e.inject("input-error")),e.provide("inputClass",p.value||e.inject("input")),e.provide("errorClass",b.value||e.inject("error")),e.provide("helpTextClass",S.value||e.inject("help-text"));const j=a.value||e.inject("form-row"),x=n.value||e.inject("form-column"),T=m.value||e.inject("submit-button");return(c,w)=>{const g=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(t,["prevent"])},[l.loading?e.renderSlot(c.$slots,"loading",{key:0},()=>[k]):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(oe,D)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(j)),key:`fieldRow_${D}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(oe,($,ne)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(x),$.columnClass]),key:`field_${D}_${ne}`},[e.renderSlot(c.$slots,`${$.name}`,{field:$},()=>[e.createVNode(g,e.mergeProps({modelValue:e.unref(_)[$.name],"onUpdate:modelValue":se=>e.unref(_)[$.name]=se},$),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(c.$slots,"extra"),e.renderSlot(c.$slots,"divider",{},()=>[l.hasActions&&!l.hideDivider?(e.openBlock(),e.createElementBlock("hr",O)):e.createCommentVNode("",!0)]),l.hasActions?e.renderSlot(c.$slots,"actions",{key:1},()=>[e.renderSlot(c.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(T)),disabled:l.loading,type:"submit"},e.toDisplayString(l.submitButtonText),11,A)]),e.renderSlot(c.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,i)}}},V=(l,o,r="modelValue")=>e.computed({get:()=>l[r],set:t=>o(`update:${r}`,t)}),L=()=>{const l=e.inject("labelClass",null),o=e.inject("inputClass",null),r=e.inject("inputWrapperClass",null),t=e.inject("inputGroupClass",null),s=e.inject("inputErrorClass",null),a=e.inject("errorClass",null),n=e.inject("helpTextClass",null);return{labelClass:l,inputClass:o,inputWrapperClass:r,inputGroupClass:t,inputErrorClass:s,errorClass:a,helpTextClass:n}},R=l=>{const{label:o,error:r,helpText:t}=e.toRefs(l),s=e.computed(()=>Boolean(r.value)),a=e.computed(()=>Boolean(o.value)),n=e.computed(()=>Boolean(t.value));return{hasErrors:s,hasLabel:a,hasHelpText:n}},d={emits:["update:modelValue"],props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{default:null},error:{type:String,default:null},helpText:{type:String,default:null},id:{type:String,default:null},label:{type:String,default:null},name:{type:String,default:null},placeholder:{type:String,default:null},type:{type:String,default:"text"}}},z=Object.assign({inheritAttrs:!1},{props:d.props,emits:d.emits,setup(l,{emit:o}){const r=l,t=V(r,o),{labelClass:s,inputClass:a,inputWrapperClass:n,inputGroupClass:B,inputErrorClass:u,errorClass:C,helpTextClass:h}=L(),{hasErrors:p,hasLabel:b,hasHelpText:S}=R(r);return(m,_)=>{const j=e.resolveComponent("form-maker-label"),x=e.resolveComponent("form-maker-help"),T=e.resolveComponent("form-maker-error");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(p)&&e.unref(u),e.unref(n)])},[m.type!=="checkbox"?e.renderSlot(m.$slots,"label",{key:0},()=>[e.unref(b)?(e.openBlock(),e.createBlock(j,{key:0,id:m.id,class:e.normalizeClass(e.unref(s)),text:m.label},null,8,["id","class","text"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(m.$slots,"default",{},()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(B),e.unref(p)&&e.unref(u)])},[e.renderSlot(m.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${m.type}`),e.mergeProps({modelValue:e.unref(t),"onUpdate:modelValue":_[0]||(_[0]=c=>e.isRef(t)?t.value=c:null)},y(y({},m.$props),m.$attrs),{class:[m.type!=="checkbox"&&e.unref(a),e.unref(p)&&e.unref(u)],label:m.label}),null,16,["modelValue","class","label"])),e.renderSlot(m.$slots,"after")],2)]),e.renderSlot(m.$slots,"help",{},()=>[e.unref(S)?(e.openBlock(),e.createBlock(x,{key:0,class:e.normalizeClass(e.unref(h)),text:m.helpText},null,8,["class","text"])):e.createCommentVNode("",!0)]),e.renderSlot(m.$slots,"errors",{},()=>[e.unref(p)?(e.openBlock(),e.createBlock(T,{key:0,class:e.normalizeClass(e.unref(C)),text:m.error},null,8,["class","text"])):e.createCommentVNode("",!0)])],2)}}}),P=["checked","value","onClick"],U={props:E(y({},d.props),{options:{type:Array,default:()=>[]}}),emits:d.emits,setup(l,{emit:o}){const r=l,{options:t,label:s}=e.toRefs(r),a=e.computed(()=>t.value.length===0),n=e.computed(()=>r.modelValue),B=e.computed(()=>(Array.isArray(n.value)?n.value:[n.value]).filter(p=>!!p)),u=e.computed(()=>a.value?[{label:s.value,value:!0}]:t.value),C=h=>{let p=[...B.value];p.indexOf(h)===-1?p.push(h):p=p.filter(b=>b!==h),a.value?o("update:modelValue",p.length>0):o("update:modelValue",p)};return(h,p)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),(b,S)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${S}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(h.$props,{checked:e.unref(B).indexOf(b.value)!==-1,value:b.value,type:"checkbox",onClick:()=>C(b.value)}),null,16,P),e.createTextVNode(" "+e.toDisplayString(b.label),1)])]))),128))}},W={props:d.props,emits:d.emits,setup(l,{emit:o}){const r=t=>{if(t.target.files.length){const s=t.target.files[0];o("update:modelValue",s)}};return(t,s)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:r}),null,16))}},I={props:{text:{type:String,default:null}},setup(l){return(o,r)=>(e.openBlock(),e.createElementBlock("div",null,e.toDisplayString(l.text),1))}},H={props:{text:{type:String,default:null}},setup(l){return(o,r)=>(e.openBlock(),e.createElementBlock("div",null,e.toDisplayString(l.text),1))}},q=["for"],J={props:{text:{type:String,default:null},id:{type:String,default:null}},setup(l){return(o,r)=>(e.openBlock(),e.createElementBlock("label",{for:l.id},e.toDisplayString(l.text),9,q))}},K=["checked","value"],Q={props:E(y({},d.props),{options:{type:Array,default:()=>[]}}),emits:d.emits,setup(l,{emit:o}){const r=t=>o("update:modelValue",t.target.value);return(t,s)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(a,n)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${n}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:a.value===t.modelValue,value:a.value,type:"radio",onChange:r}),null,16,K),e.createTextVNode(" "+e.toDisplayString(a.label),1)])]))),128))}},X=["id","disabled","name","placeholder"],Y=["label"],Z=["value"],v=["value"],ee={props:E(y({},d.props),{options:{type:Array,default:()=>[]},optionGroups:{type:Object,default:()=>({})}}),emits:d.emits,setup(l,{emit:o}){const r=l,t=V(r,o),s=Object.keys(r.optionGroups).length>0,a=e.computed(()=>r.options.map(n=>typeof n=="object"?n:{label:n,value:n}));return console.log(a.value),(n,B)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:n.id,"onUpdate:modelValue":B[0]||(B[0]=u=>e.isRef(t)?t.value=u:null),disabled:n.disabled,name:n.name,placeholder:n.placeholder},[s?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.optionGroups,(u,C)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${C}`,label:C},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u,(h,p)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${p}`,value:p},e.toDisplayString(h),9,Z))),128))],8,Y))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(e.unref(a),(u,C)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${C}`,value:u.value},e.toDisplayString(u.label),9,v))),128))],8,X)),[[e.vModelSelect,e.unref(t)]])}},te=["id","disabled","name","placeholder"],le={props:d.props,emits:d.emits,setup(l,{emit:o}){const t=V(l,o);return(s,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",{id:s.id,"onUpdate:modelValue":a[0]||(a[0]=n=>e.isRef(t)?t.value=n:null),disabled:s.disabled,name:s.name,placeholder:s.placeholder},null,8,te)),[[e.vModelText,e.unref(t)]])}},re=["type"],f={props:d.props,emits:d.emits,setup(l,{emit:o}){const t=V(l,o);return(s,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":a[0]||(a[0]=n=>e.isRef(t)?t.value=n:null),type:s.type},s.$props),null,16,re)),[[e.vModelDynamic,e.unref(t)]])}},F={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":W,"form-maker-input-textarea":le,"form-maker-input-select":ee,"form-maker-input-checkbox":U,"form-maker-input-radio":Q,"form-maker-label":J,"form-maker-help":H,"form-maker-error":I}};return{install:(l,o={})=>{const r={classes:y(y({},F.classes),o.classes),components:y(y({},F.components),o.components)};l.component("FormMaker",G),l.component("FormMakerInput",z),Object.keys(r.classes).forEach(t=>{l.provide(t,r.classes[t])}),Object.keys(r.components).forEach(t=>{l.component(t,r.components[t])})}}});
+var ie=Object.defineProperty,me=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable;var L=(e,m,k)=>m in e?ie(e,m,{enumerable:!0,configurable:!0,writable:!0,value:k}):e[m]=k,C=(e,m)=>{for(var k in m||(m={}))de.call(m,k)&&L(e,k,m[k]);if(G)for(var k of G(m))ue.call(m,k)&&L(e,k,m[k]);return e},V=(e,m)=>me(e,ce(m));(function(e,m){typeof exports=="object"&&typeof module!="undefined"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(e=typeof globalThis!="undefined"?globalThis:e||self,e.FormMaker=m(e.Vue))})(this,function(e){"use strict";const m=["onSubmit"],k=e.createTextVNode(" Loading... "),R={key:0},z=["disabled"],P={props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{type:Object,default:()=>({})},fields:{type:Array,default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{type:String,default:null},columnClass:{type:String,default:null},labelClass:{type:String,default:null},inputGroupClass:{type:String,default:null},inputWrapperClass:{type:String,default:null},inputErrorClass:{type:String,default:null},inputClass:{type:String,default:null},errorClass:{type:String,default:null},helpTextClass:{type:String,default:null},submitButtonClass:{type:String,default:null},submitButtonText:{type:String,default:"Submit"}},emits:["submit","update:modelValue"],setup(r,{emit:o}){const l=r,t=()=>o("submit"),s=e.computed(()=>l.fields.length>0?l.fields.map(p=>{let $=p;return Array.isArray(p)||($=[p]),$.map(g=>g.id?g:V(C({},g),{id:`formMaker_${new Date().getTime()}_${g.name}`}))}):Object.keys(l.modelValue).map(p=>[{name:p,label:p,id:`formMaker_${p}`}])),{rowClass:a,columnClass:n,labelClass:B,inputGroupClass:u,inputWrapperClass:b,inputErrorClass:h,inputClass:i,errorClass:y,helpTextClass:_,submitButtonClass:c,modelValue:w}=e.toRefs(l);e.provide("labelClass",B.value||e.inject("form-label")),e.provide("inputGroupClass",u.value||e.inject("input-group")),e.provide("inputWrapperClass",b.value||e.inject("input-wrapper")),e.provide("inputErrorClass",h.value||e.inject("input-error")),e.provide("inputClass",i.value||e.inject("input")),e.provide("errorClass",y.value||e.inject("error")),e.provide("helpTextClass",_.value||e.inject("help-text"));const F=a.value||e.inject("form-row"),D=n.value||e.inject("form-column"),O=c.value||e.inject("submit-button"),N=p=>{const $=p.split(".");let g=w.value;for(let E=0;E<$.length-1;E+=1){const j=g[$[E]];if(!j)break;g=j}return g},x=p=>{const $=p.split(".");return $[$.length-1]};return(p,$)=>{const g=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(t,["prevent"])},[r.loading?e.renderSlot(p.$slots,"loading",{key:0},()=>[k]):e.createCommentVNode("",!0),e.renderSlot(p.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(E,j)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(F)),key:`fieldRow_${j}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E,(S,ae)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(D),S.columnClass]),key:`field_${j}_${ae}`},[e.renderSlot(p.$slots,`${S.name}`,{field:S},()=>[e.createVNode(g,e.mergeProps({modelValue:N(S.name)[x(S.name)],"onUpdate:modelValue":pe=>N(S.name)[x(S.name)]=pe},S),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(p.$slots,"extra"),e.renderSlot(p.$slots,"divider",{},()=>[r.hasActions&&!r.hideDivider?(e.openBlock(),e.createElementBlock("hr",R)):e.createCommentVNode("",!0)]),r.hasActions?e.renderSlot(p.$slots,"actions",{key:1},()=>[e.renderSlot(p.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(O)),disabled:r.loading,type:"submit"},e.toDisplayString(r.submitButtonText),11,z)]),e.renderSlot(p.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,m)}}},T=(r,o,l="modelValue")=>e.computed({get:()=>r[l],set:t=>o(`update:${l}`,t)}),M=()=>({setup(r,{slots:o,attrs:l}){return()=>e.h("div",l,o.default())}}),U=()=>{const r=e.inject("labelClass",null),o=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),t=e.inject("inputGroupClass",null),s=e.inject("inputErrorClass",null),a=e.inject("errorClass",null),n=e.inject("helpTextClass",null);return{labelClass:r,inputClass:o,inputWrapperClass:l,inputGroupClass:t,inputErrorClass:s,errorClass:a,helpTextClass:n}},W=r=>{const{label:o,error:l,helpText:t}=e.toRefs(r),s=e.computed(()=>Boolean(l.value)),a=e.computed(()=>Boolean(o.value)),n=e.computed(()=>Boolean(t.value));return{hasErrors:s,hasLabel:a,hasHelpText:n}},d={emits:["update:modelValue"],props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{default:null},error:{type:String,default:null},helpText:{type:String,default:null},id:{type:String,default:null},label:{type:String,default:null},name:{type:String,default:null},placeholder:{type:String,default:null},type:{type:String,default:"text"}}},I=Object.assign({inheritAttrs:!1},{props:d.props,emits:d.emits,setup(r,{emit:o}){const l=r,t=T(l,o),{labelClass:s,inputClass:a,inputWrapperClass:n,inputGroupClass:B,inputErrorClass:u,errorClass:b,helpTextClass:h}=U(),{hasErrors:i,hasLabel:y,hasHelpText:_}=W(l);return(c,w)=>{const F=e.resolveComponent("form-maker-label"),D=e.resolveComponent("form-maker-help"),O=e.resolveComponent("form-maker-error");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(i)&&e.unref(u),e.unref(n)])},[c.type!=="checkbox"?e.renderSlot(c.$slots,"label",{key:0},()=>[e.unref(y)?(e.openBlock(),e.createBlock(F,{key:0,id:c.id,class:e.normalizeClass(e.unref(s))},{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(B),e.unref(i)&&e.unref(u)])},[e.renderSlot(c.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${c.type}`),e.mergeProps({modelValue:e.unref(t),"onUpdate:modelValue":w[0]||(w[0]=N=>e.isRef(t)?t.value=N:null)},C(C({},c.$props),c.$attrs),{class:[c.type!=="checkbox"&&e.unref(a),e.unref(i)&&e.unref(u)],label:c.label}),null,16,["modelValue","class","label"])),e.renderSlot(c.$slots,"after")],2)]),e.renderSlot(c.$slots,"help",{},()=>[e.unref(_)?(e.openBlock(),e.createBlock(D,{key:0,class:e.normalizeClass(e.unref(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(c.$slots,"errors",{},()=>[e.unref(i)?(e.openBlock(),e.createBlock(O,{key:0,class:e.normalizeClass(e.unref(b))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.error),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)])],2)}}}),H=["checked","value","onClick"],q={props:V(C({},d.props),{options:{type:Array,default:()=>[]}}),emits:d.emits,setup(r,{emit:o}){const l=r,{options:t,label:s}=e.toRefs(l),a=e.computed(()=>t.value.length===0),n=e.computed(()=>l.modelValue),B=e.computed(()=>(Array.isArray(n.value)?n.value:[n.value]).filter(i=>!!i)),u=e.computed(()=>a.value?[{label:s.value,value:!0}]:t.value),b=h=>{let i=[...B.value];i.indexOf(h)===-1?i.push(h):i=i.filter(y=>y!==h),a.value?o("update:modelValue",i.length>0):o("update:modelValue",i)};return(h,i)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),(y,_)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${_}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(h.$props,{checked:e.unref(B).indexOf(y.value)!==-1,value:y.value,type:"checkbox",onClick:()=>b(y.value)}),null,16,H),e.createTextVNode(" "+e.toDisplayString(y.label),1)])]))),128))}},J={props:d.props,emits:d.emits,setup(r,{emit:o}){const l=t=>{if(t.target.files.length){const s=t.target.files[0];o("update:modelValue",s)}};return(t,s)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:l}),null,16))}},K=M(),Q=M(),X={props:{id:{type:String,default:null}},setup(r,{slots:o,attrs:l}){return()=>e.h("label",V(C({},l),{for:r.id}),o.default())}},Y=["checked","value"],Z={props:V(C({},d.props),{options:{type:Array,default:()=>[]}}),emits:d.emits,setup(r,{emit:o}){const l=t=>o("update:modelValue",t.target.value);return(t,s)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(a,n)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${n}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:a.value===t.modelValue,value:a.value,type:"radio",onChange:l}),null,16,Y),e.createTextVNode(" "+e.toDisplayString(a.label),1)])]))),128))}},v=["id","disabled","name","placeholder"],ee=["label"],te=["value"],le=["value"],re={props:V(C({},d.props),{options:{type:Array,default:()=>[]},optionGroups:{type:Object,default:()=>({})}}),emits:d.emits,setup(r,{emit:o}){const l=r,t=T(l,o),s=Object.keys(l.optionGroups).length>0,a=e.computed(()=>l.options.map(n=>typeof n=="object"?n:{label:n,value:n}));return console.log(a.value),(n,B)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:n.id,"onUpdate:modelValue":B[0]||(B[0]=u=>e.isRef(t)?t.value=u:null),disabled:n.disabled,name:n.name,placeholder:n.placeholder},[s?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(r.optionGroups,(u,b)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${b}`,label:b},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u,(h,i)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${i}`,value:i},e.toDisplayString(h),9,te))),128))],8,ee))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(e.unref(a),(u,b)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${b}`,value:u.value},e.toDisplayString(u.label),9,le))),128))],8,v)),[[e.vModelSelect,e.unref(t)]])}},oe=["id","disabled","name","placeholder"],ne={props:d.props,emits:d.emits,setup(r,{emit:o}){const t=T(r,o);return(s,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",{id:s.id,"onUpdate:modelValue":a[0]||(a[0]=n=>e.isRef(t)?t.value=n:null),disabled:s.disabled,name:s.name,placeholder:s.placeholder},null,8,oe)),[[e.vModelText,e.unref(t)]])}},se=["type"],f={props:d.props,emits:d.emits,setup(r,{emit:o}){const t=T(r,o);return(s,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":a[0]||(a[0]=n=>e.isRef(t)?t.value=n:null),type:s.type},s.$props),null,16,se)),[[e.vModelDynamic,e.unref(t)]])}},A={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":J,"form-maker-input-textarea":ne,"form-maker-input-select":re,"form-maker-input-checkbox":q,"form-maker-input-radio":Z,"form-maker-label":X,"form-maker-help":Q,"form-maker-error":K}};return{install:(r,o={})=>{const l={classes:C(C({},A.classes),o.classes),components:C(C({},A.components),o.components)};r.component("FormMaker",P),r.component("FormMakerInput",I),Object.keys(l.classes).forEach(t=>{r.provide(t,l.classes[t])}),Object.keys(l.components).forEach(t=>{r.component(t,l.components[t])})}}});

package/lib/components/inputs/FormMakerInputError.vue

@@ -1,12 +0,0 @@
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    default: null,
-  },
-});
-</script>
-
-<template>
-  <div>{{ text }}</div>
-</template>

package/lib/components/inputs/FormMakerInputHelp.vue

@@ -1,12 +0,0 @@
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    default: null,
-  },
-});
-</script>
-
-<template>
-  <div>{{ text }}</div>
-</template>

package/lib/components/inputs/FormMakerInputLabel.vue

@@ -1,16 +0,0 @@
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    default: null,
-  },
-  id: {
-    type: String,
-    default: null,
-  },
-});
-</script>
-
-<template>
-  <label :for="id">{{ text }}</label>
-</template>