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

package/index.js

@@ -2,13 +2,13 @@ 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';
-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,153 @@
+<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');
+
+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>
   <form
     class="form-maker"
@@ -16,7 +166,7 @@
         :key="`fieldRow_${i}`"
       >
         <div
-          v-for="(field,j) in fieldRow"
+          v-for="(field, j) in fieldRow"
           :class="[realColumnClass, field.columnClass]"
           :key="`field_${i}_${j}`"
         >
@@ -25,14 +175,13 @@
             :name="`${field.name}`"
           >
             <form-maker-input
-              v-model="value[field.name]"
+              v-model="getObject(field.name)[getProp(field.name)]"
               v-bind="field"
             />
           </slot>
         </div>
       </div>
     </slot>
-
     <slot name="extra" />
     <slot name="divider">
       <hr v-if="hasActions && !hideDivider">
@@ -54,148 +203,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,57 @@
+<script setup>
+import { ref, computed } from 'vue';
+import setupVModel from '../utils';
+import RuleEvaluator from './RuleEvaluator.vue';
+
+import {
+  FormInputMixin,
+  injectFormClasses
+} from './inputs/FormInputMixin';
+
+const props = defineProps({
+  ...FormInputMixin.props,
+  rules: {
+    type: Array,
+    default: () => ([]),
+  },
+});
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+
+const {
+  labelClass,
+  inputClass,
+  inputWrapperClass,
+  inputGroupClass,
+  inputErrorClass,
+  errorClass,
+  helpTextClass,
+} = injectFormClasses();
+
+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 {
+  inheritAttrs: false,
+};
+</script>
+
 <template>
-  <div :class="[ hasErrors && inputErrorClass ]">
+  <div :class="[ hasErrors && inputErrorClass, inputWrapperClass ]">
     <slot
       v-if="type !== 'checkbox'"
       name="label"
@@ -8,8 +60,9 @@
         v-if="hasLabel"
         :id="id"
         :class="labelClass"
-        :text="label"
-      />
+      >
+        {{ label }}
+      </form-maker-label>
     </slot>
     <slot>
       <div :class="[inputGroupClass, hasErrors && inputErrorClass]">
@@ -28,55 +81,23 @@
       <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"
+      >
+        {{ realError }}
+      </form-maker-error>
+      <rule-evaluator
+        v-if="rules.length"
+        :rules="rules"
+        :value="modelValue"
+        v-model="validationError"
       />
     </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/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/{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

@@ -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(() => !!error.value);
-  const hasLabel = computed(() => !!label.value);
-  const hasHelpText = computed(() => !!helpText.value);
-
-  return {
-    hasErrors,
-    hasLabel,
-    hasHelpText,
-  };
-};
-
 export const FormInputMixin = {
   emits: [ 'update:modelValue' ],
   props: {
@@ -47,7 +33,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/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,37 @@
+<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,
+  };
+}));
+</script>
+
 <template>
   <select
     :id="id"
@@ -22,7 +56,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 +65,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/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,14 +1,15 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.1.0-beta01",
+  "version": "1.1.0-beta04",
   "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 --fix"
   },
   "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 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])})}}});

package/lib/components/inputs/FormMakerInputError.vue

@@ -1,15 +0,0 @@
-<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 +0,0 @@
-<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 +0,0 @@
-<template>
-  <label :for="id">{{ text }}</label>
-</template>
-
-<script>
-export default {
-  name: 'FormMakerInputLabel',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    id: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>