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

package/index.js

@@ -8,7 +8,7 @@ import FormMakerInputLabel from './lib/components/inputs/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';
-import TextInput from './lib/components/inputs/TextInput.vue';
+import BasicInput from './lib/components/inputs/BasicInput.vue';
 
 const defaultOptions = {
   classes: {
@@ -26,19 +26,19 @@ const defaultOptions = {
     'submit-button': 'form-maker-submit',
   },
   components: {
-    'form-maker-input-color': TextInput,
-    'form-maker-input-date': TextInput,
-    'form-maker-input-email': TextInput,
-    'form-maker-input-month': TextInput,
-    'form-maker-input-number': TextInput,
-    'form-maker-input-password': TextInput,
-    'form-maker-input-search': TextInput,
-    'form-maker-input-tel': TextInput,
-    'form-maker-input-time': TextInput,
-    'form-maker-input-text': TextInput,
-    'form-maker-input-url': TextInput,
-    'form-maker-input-week': TextInput,
-    'form-maker-input-range': TextInput,
+    'form-maker-input-color': BasicInput,
+    'form-maker-input-date': BasicInput,
+    'form-maker-input-email': BasicInput,
+    'form-maker-input-month': BasicInput,
+    'form-maker-input-number': BasicInput,
+    'form-maker-input-password': BasicInput,
+    'form-maker-input-search': BasicInput,
+    'form-maker-input-tel': BasicInput,
+    'form-maker-input-time': BasicInput,
+    'form-maker-input-text': BasicInput,
+    'form-maker-input-url': BasicInput,
+    'form-maker-input-week': BasicInput,
+    'form-maker-input-range': BasicInput,
     'form-maker-input-file': FileInput,
     'form-maker-input-textarea': TextAreaInput,
     'form-maker-input-select': SelectInput,
@@ -63,13 +63,15 @@ const FormMaker = {
     app.component('FormMaker', FormMakerComponent);
     app.component('FormMakerInput', FormMakerInput);
 
-    Object.keys(options.classes).forEach(key => {
-      app.provide(key, options.classes[key]);
-    });
+    Object.keys(options.classes)
+      .forEach(key => {
+        app.provide(key, options.classes[key]);
+      });
 
-    Object.keys(options.components).forEach(key => {
-      app.component(key, options.components[key]);
-    });
+    Object.keys(options.components)
+      .forEach(key => {
+        app.component(key, options.components[key]);
+      });
   },
 };
 export default FormMaker;

package/lib/components/FormMaker.vue

@@ -1,3 +1,135 @@
+<script setup>
+import {
+  computed, inject, provide, toRefs
+} from 'vue';
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  hasActions: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+  fields: {
+    type: Array,
+    default: () => [],
+  },
+  hideDivider: {
+    type: Boolean,
+    default: false,
+  },
+  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',
+  },
+});
+
+const emit = defineEmits([ 'submit', 'update:modelValue' ]);
+
+const handleSubmit = () => emit('submit');
+
+const formFields = computed(() => {
+  if (props.fields.length > 0) {
+    return props.fields.map(row => {
+      let newRow = row;
+      if (!Array.isArray(row)) {
+        newRow = [ row ];
+      }
+      return newRow.map(fieldSpec => {
+        if (!fieldSpec.id) {
+          return {
+            ...fieldSpec,
+            id: `formMaker_${new Date().getTime()}_${fieldSpec.name}`,
+          };
+        }
+        return fieldSpec;
+      });
+    });
+  }
+
+  return Object.keys(props.modelValue)
+    .map(key => [
+      {
+        name: key,
+        label: key,
+        id: `formMaker_${key}`,
+      },
+    ]);
+});
+
+const {
+  rowClass,
+  columnClass,
+  labelClass,
+  inputGroupClass,
+  inputWrapperClass,
+  inputErrorClass,
+  inputClass,
+  errorClass,
+  helpTextClass,
+  submitButtonClass,
+  modelValue,
+} = toRefs(props);
+
+provide('labelClass', labelClass.value || inject('form-label'));
+provide('inputGroupClass', inputGroupClass.value || inject('input-group'));
+provide('inputWrapperClass', inputWrapperClass.value || inject('input-wrapper'));
+provide('inputErrorClass', inputErrorClass.value || inject('input-error'));
+provide('inputClass', inputClass.value || inject('input'));
+provide('errorClass', errorClass.value || inject('error'));
+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');
+</script>
+
 <template>
   <form
     class="form-maker"
@@ -25,14 +157,13 @@
             :name="`${field.name}`"
           >
             <form-maker-input
-              v-model="value[field.name]"
+              v-model="modelValue[field.name]"
               v-bind="field"
             />
           </slot>
         </div>
       </div>
     </slot>
-
     <slot name="extra" />
     <slot name="divider">
       <hr v-if="hasActions && !hideDivider">
@@ -54,148 +185,3 @@
     </slot>
   </form>
 </template>
-
-<script>
-import {
-  computed, inject, provide, toRefs
-} from 'vue';
-// import setupVModel from '../utils';
-
-export default {
-  name: 'FormMaker',
-  emits: [ 'submit', 'update:modelValue' ],
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    hasActions: {
-      type: Boolean,
-      default: true,
-    },
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-    },
-    fields: {
-      type: Array,
-      default: () => [],
-    },
-    hideDivider: {
-      type: Boolean,
-      default: false,
-    },
-    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',
-    },
-  },
-  setup(props, { emit }) {
-    const handleSubmit = () => emit('submit');
-
-    const formFields = computed(() => {
-      if (props.fields.length > 0) {
-        return props.fields.map(row => {
-          let newRow = row;
-          if (!Array.isArray(row)) {
-            newRow = [ row ];
-          }
-          return newRow.map(fieldSpec => {
-            if (!fieldSpec.id) {
-              return {
-                ...fieldSpec,
-                id: `formMaker_${new Date().getTime()}_${fieldSpec.name}`,
-              };
-            }
-            return fieldSpec;
-          });
-        });
-      }
-
-      return Object.keys(props.modelValue)
-        .map(key => [
-          {
-            name: key,
-            label: key,
-            id: `formMaker_${key}`,
-          },
-        ]);
-    });
-
-    const {
-      rowClass,
-      columnClass,
-      labelClass,
-      inputGroupClass,
-      inputWrapperClass,
-      inputErrorClass,
-      inputClass,
-      errorClass,
-      helpTextClass,
-      submitButtonClass,
-      modelValue,
-    } = toRefs(props);
-
-    provide('labelClass', labelClass.value || inject('form-label'));
-    provide('inputGroupClass', inputGroupClass.value || inject('input-group'));
-    provide('inputWrapperClass', inputWrapperClass.value || inject('input-wrapper'));
-    provide('inputErrorClass', inputErrorClass.value || inject('input-error'));
-    provide('inputClass', inputClass.value || inject('input'));
-    provide('errorClass', errorClass.value || inject('error'));
-    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');
-
-    return {
-      value: modelValue,
-      formFields,
-      realColumnClass,
-      realRowClass,
-      realSubmitButtonClass,
-      handleSubmit,
-    };
-  },
-};
-</script>

package/lib/components/FormMakerInput.vue

@@ -1,5 +1,40 @@
+<script setup>
+import setupVModel from '../utils';
+import {
+  FormInputMixin,
+  injectFormClasses,
+  getFormInputComputeds
+} from './inputs/FormInputMixin';
+
+const props = defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+
+const {
+  labelClass,
+  inputClass,
+  inputWrapperClass,
+  inputGroupClass,
+  inputErrorClass,
+  errorClass,
+  helpTextClass,
+} = injectFormClasses();
+
+const {
+  hasErrors,
+  hasLabel,
+  hasHelpText,
+} = getFormInputComputeds(props);
+</script>
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <template>
-  <div :class="[ hasErrors && inputErrorClass ]">
+  <div :class="[ hasErrors && inputErrorClass, inputWrapperClass ]">
     <slot
       v-if="type !== 'checkbox'"
       name="label"
@@ -40,43 +75,3 @@
     </slot>
   </div>
 </template>
-
-<script>
-import setupVModel from '../utils';
-import { FormInputMixin, injectFormClasses, getFormInputComputeds } from './inputs/FormInputMixin';
-
-export default {
-  name: 'FormMakerInput',
-  mixins: [ FormInputMixin ],
-  inheritAttrs: false,
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    const {
-      labelClass,
-      inputClass,
-      inputWrapperClass,
-      inputGroupClass,
-      inputErrorClass,
-      errorClass,
-      helpTextClass,
-    } = injectFormClasses();
-
-    const { hasErrors, hasLabel, hasHelpText } = getFormInputComputeds(props);
-
-    return {
-      value,
-      labelClass,
-      inputClass,
-      inputErrorClass,
-      inputGroupClass,
-      inputWrapperClass,
-      errorClass,
-      helpTextClass,
-      hasErrors,
-      hasLabel,
-      hasHelpText,
-    };
-  },
-};
-</script>

package/lib/components/inputs/{TextInput.vue → BasicInput.vue}

@@ -1,3 +1,13 @@
+<script setup>
+import setupVModel from '../../utils';
+import { FormInputMixin } from './FormInputMixin';
+
+const props = defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+</script>
+
 <template>
   <input
     v-model="value"
@@ -5,20 +15,3 @@
     v-bind="$props"
   >
 </template>
-
-<script>
-import setupVModel from '../../utils';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'TextInput',
-  mixins: [ FormInputMixin ],
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    return {
-      value,
-    };
-  },
-};
-</script>

package/lib/components/inputs/CheckboxInput.vue

@@ -1,3 +1,52 @@
+<script setup>
+import { computed, toRefs } from 'vue';
+import { FormInputMixin } from './FormInputMixin';
+
+const props = defineProps({
+  ...FormInputMixin.props,
+  options: { type: Array, default: () => [] },
+});
+const emit = defineEmits(FormInputMixin.emits);
+
+const { options, label } = toRefs(props);
+
+const isBinary = computed(() => options.value.length === 0);
+
+const val = computed(() => props.modelValue);
+
+const selectedOptions = computed(() => {
+  const arr = Array.isArray(val.value) ? val.value : [ val.value ];
+  return arr.filter(x => !!x);
+});
+
+const fieldOptions = computed(() => {
+  if (!isBinary.value) {
+    return options.value;
+  }
+  return [
+    {
+      label: label.value,
+      value: true,
+    },
+  ];
+});
+
+const handleClick = clickVal => {
+  let selOptions = [ ...selectedOptions.value ];
+  if (selOptions.indexOf(clickVal) === -1) {
+    selOptions.push(clickVal);
+  } else {
+    selOptions = selOptions.filter(x => x !== clickVal);
+  }
+
+  if (isBinary.value) {
+    emit('update:modelValue', selOptions.length > 0);
+  } else {
+    emit('update:modelValue', selOptions);
+  }
+};
+</script>
+
 <template>
   <div
     v-for="(option,i) in fieldOptions"
@@ -15,66 +64,3 @@
     </label>
   </div>
 </template>
-
-<script>
-import { computed, toRefs } from 'vue';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'CheckInput',
-  mixins: [ FormInputMixin ],
-  emits: [ 'update:modelValue' ],
-  props: {
-    label: {
-      type: String,
-      default: null,
-    },
-  },
-  setup(props, { emit }) {
-    const { options, label } = toRefs(props);
-
-    const isBinary = computed(() => options.value.length === 0);
-
-    const val = computed(() => props.modelValue);
-
-    const selectedOptions = computed(() => {
-      const arr = Array.isArray(val.value) ? val.value : [ val.value ];
-      return arr.filter(x => !!x);
-    });
-
-    const fieldOptions = computed(() => {
-      if (!isBinary.value) {
-        return options.value;
-      }
-      return [
-        {
-          label: label.value,
-          value: true,
-        },
-      ];
-    });
-
-    const handleClick = clickVal => {
-      let selOptions = [ ...selectedOptions.value ];
-      if (selOptions.indexOf(clickVal) === -1) {
-        selOptions.push(clickVal);
-      } else {
-        selOptions = selOptions.filter(x => x !== clickVal);
-      }
-
-      if (isBinary.value) {
-        emit('update:modelValue', selOptions.length > 0);
-      } else {
-        emit('update:modelValue', selOptions);
-      }
-    };
-
-    return {
-      fieldOptions,
-      isBinary,
-      selectedOptions,
-      handleClick,
-    };
-  },
-};
-</script>

package/lib/components/inputs/FileInput.vue

@@ -1,3 +1,17 @@
+<script setup>
+import { FormInputMixin } from './FormInputMixin';
+
+defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const handleFileSelect = event => {
+  if (event.target.files.length) {
+    const file = event.target.files[0];
+    emit('update:modelValue', file);
+  }
+};
+</script>
+
 <template>
   <input
     v-bind="$props"
@@ -5,25 +19,3 @@
     @change="handleFileSelect"
   >
 </template>
-
-<script>
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'FileInput',
-  mixins: [ FormInputMixin ],
-  emits: [ 'update:modelValue' ],
-  setup(props, { emit }) {
-    const handleFileSelect = event => {
-      if (event.target.files.length) {
-        const file = event.target.files[0];
-        emit('update:modelValue', file);
-      }
-    };
-
-    return {
-      handleFileSelect,
-    };
-  },
-};
-</script>

package/lib/components/inputs/FormInputMixin.js

@@ -23,9 +23,9 @@ export const injectFormClasses = () => {
 export const getFormInputComputeds = props => {
   const { label, error, helpText } = toRefs(props);
 
-  const hasErrors = computed(() => !!error.value);
-  const hasLabel = computed(() => !!label.value);
-  const hasHelpText = computed(() => !!helpText.value);
+  const hasErrors = computed(() => Boolean(error.value));
+  const hasLabel = computed(() => Boolean(label.value));
+  const hasHelpText = computed(() => Boolean(helpText.value));
 
   return {
     hasErrors,
@@ -47,7 +47,5 @@ export const FormInputMixin = {
     name: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },
-    options: { type: Array, default: () => [] },
-    optionGroups: { type: Object, default: () => ({}) },
   },
 };

package/lib/components/inputs/FormMakerInputError.vue

@@ -1,15 +1,12 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
 <template>
   <div>{{ text }}</div>
 </template>
-
-<script>
-export default {
-  name: 'FormMakerInputError',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>

package/lib/components/inputs/FormMakerInputHelp.vue

@@ -1,15 +1,12 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
 <template>
   <div>{{ text }}</div>
 </template>
-
-<script>
-export default {
-  name: 'FormMakerInputHelp',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>

package/lib/components/inputs/FormMakerInputLabel.vue

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

package/lib/components/inputs/RadioInput.vue

@@ -1,3 +1,19 @@
+<script setup>
+import { FormInputMixin } from './FormInputMixin';
+
+defineProps({
+  ...FormInputMixin.props,
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(FormInputMixin.emits);
+
+const handleClick = e => emit('update:modelValue', e.target.value);
+</script>
+
 <template>
   <div
     v-for="(option, i) in options"
@@ -15,26 +31,3 @@
     </label>
   </div>
 </template>
-
-<script>
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'RadioInput',
-  emits: [ 'update:modelValue' ],
-  mixins: [ FormInputMixin ],
-  props: {
-    label: {
-      type: String,
-      default: null,
-    },
-  },
-  setup(props, { emit }) {
-    const handleClick = e => emit('update:modelValue', e.target.value);
-
-    return {
-      handleClick,
-    };
-  },
-};
-</script>

package/lib/components/inputs/SelectInput.vue

@@ -1,3 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+import { FormInputMixin } from './FormInputMixin';
+import setupVModel from '../../utils';
+
+const props = defineProps({
+  ...FormInputMixin.props,
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  optionGroups: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+
+const hasGroups = Object.keys(props.optionGroups).length > 0;
+
+const fixedOptions = computed(() => props.options.map(o => {
+  if (typeof o === 'object') {
+    return o;
+  }
+  return {
+    label: o,
+    value: o,
+  };
+}));
+
+console.log(fixedOptions.value);
+</script>
+
 <template>
   <select
     :id="id"
@@ -22,7 +58,7 @@
       </optgroup>
     </template>
     <option
-      v-for="(option,i) in options"
+      v-for="(option,i) in fixedOptions"
       v-else
       :key="`option_${i}`"
       :value="option.value"
@@ -31,23 +67,3 @@
     </option>
   </select>
 </template>
-
-<script>
-import setupVModel from '../../utils';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'SelectInput',
-  mixins: [ FormInputMixin ],
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    const hasGroups = Object.keys(props.optionGroups).length > 0;
-
-    return {
-      value,
-      hasGroups,
-    };
-  },
-};
-</script>

package/lib/components/inputs/TextAreaInput.vue

@@ -1,3 +1,13 @@
+<script setup>
+import setupVModel from '../../utils';
+import { FormInputMixin } from './FormInputMixin';
+
+const props = defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+</script>
+
 <template>
   <textarea
     :id="id"
@@ -7,20 +17,3 @@
     :placeholder="placeholder"
   />
 </template>
-
-<script>
-import setupVModel from '../../utils';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'TextAreaInput',
-  mixins: [ FormInputMixin ],
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    return {
-      value,
-    };
-  },
-};
-</script>

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.1.0-beta01",
+  "version": "1.1.0-beta02",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
   "scripts": {
-    "dev": "vite -c docs.config.js dev",
+    "docs": "vite -c docs.config.js dev --port 9090",
+    "dev": "vite -c dev.config.js dev",
     "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/ index.js"
+    "lint": "eslint --ext .vue,.js lib/ docs/ dev/ index.js"
   },
   "files": [
     "index.js",
@@ -26,13 +27,16 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-2",
-    "@tailwindcss/typography": "^0.2.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.2",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vue/eslint-config-airbnb": "^6.0.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.10.0",
     "eslint-plugin-vue": "^8.5.0",
     "highlight.js": "^10.2.1",
-    "tailwindcss": "^1.9.6",
+    "postcss": "^8.4.7",
+    "tailwindcss": "^3.0.23",
     "vite": "^2.8.4",
     "vue-router": "^4.0.12"
   },

package/umd/index.umd.js

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