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

package/lib/components/FormMakerInput.vue

@@ -1,12 +1,20 @@
 <script setup>
+import { ref, computed } from 'vue';
 import setupVModel from '../utils';
+import RuleEvaluator from './RuleEvaluator.vue';
+
 import {
   FormInputMixin,
-  injectFormClasses,
-  getFormInputComputeds
+  injectFormClasses
 } from './inputs/FormInputMixin';
 
-const props = defineProps(FormInputMixin.props);
+const props = defineProps({
+  ...FormInputMixin.props,
+  rules: {
+    type: Array,
+    default: () => ([]),
+  },
+});
 const emit = defineEmits(FormInputMixin.emits);
 
 const value = setupVModel(props, emit);
@@ -21,11 +29,20 @@ const {
   helpTextClass,
 } = injectFormClasses();
 
-const {
-  hasErrors,
-  hasLabel,
-  hasHelpText,
-} = getFormInputComputeds(props);
+const hasLabel = computed(() => Boolean(props.label));
+const hasHelpText = computed(() => Boolean(props.helpText));
+
+const validationError = ref(null);
+
+const hasErrors = computed(() => Boolean(props.error) || Boolean(validationError.value));
+
+const realError = computed(() => {
+  if (props.error) {
+    return props.error;
+  }
+  return validationError.value;
+});
+
 </script>
 <script>
 export default {
@@ -73,8 +90,14 @@ export default {
         v-if="hasErrors"
         :class="errorClass"
       >
-        {{ error }}
+        {{ realError }}
       </form-maker-error>
+      <rule-evaluator
+        v-if="rules.length"
+        :rules="rules"
+        :value="modelValue"
+        v-model="validationError"
+      />
     </slot>
   </div>
 </template>

package/lib/components/RuleEvaluator.vue

@@ -0,0 +1,37 @@
+<script>
+import { watch } from 'vue';
+
+export default {
+  emits: [ 'update:modelValue' ],
+  props: {
+    rules: {
+      type: Array,
+      default: () => ([]),
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: null,
+    },
+  },
+  setup(props, ctx) {
+    watch(props, newVal => {
+      let error = null;
+      for (let i = 0; i < props.rules.length; i += 1) {
+        const rule = props.rules[i];
+        const validator = rule.validator(newVal.value);
+        if (!validator) {
+          error = rule.message;
+          break;
+        }
+      }
+      ctx.emit('update:modelValue', error);
+    }, { immediate: true });
+
+    return {};
+  },
+};
+</script>

package/lib/components/inputs/FormInputMixin.js

@@ -1,4 +1,4 @@
-import { computed, toRefs, inject } from 'vue';
+import { inject } from 'vue';
 
 export const injectFormClasses = () => {
   const labelClass = inject('labelClass', null);
@@ -20,20 +20,6 @@ export const injectFormClasses = () => {
   };
 };
 
-export const getFormInputComputeds = props => {
-  const { label, error, helpText } = toRefs(props);
-
-  const hasErrors = computed(() => Boolean(error.value));
-  const hasLabel = computed(() => Boolean(label.value));
-  const hasHelpText = computed(() => Boolean(helpText.value));
-
-  return {
-    hasErrors,
-    hasLabel,
-    hasHelpText,
-  };
-};
-
 export const FormInputMixin = {
   emits: [ 'update:modelValue' ],
   props: {

package/lib/components/inputs/SelectInput.vue

@@ -30,8 +30,6 @@ const fixedOptions = computed(() => props.options.map(o => {
     value: o,
   };
 }));
-
-console.log(fixedOptions.value);
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.1.0-beta03",
+  "version": "1.1.0-beta04",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
   "scripts": {

package/umd/index.umd.js

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