@josercl/form-maker 1.0.0-alpha19 → 1.1.0-beta03

package/index.js

@@ -1,14 +1,14 @@
-import FormMakerComponent from './lib/components/FormMaker';
-import FormMakerInput from './lib/components/FormMakerInput';
-import CheckboxInput from './lib/components/inputs/CheckboxInput';
-import FileInput from './lib/components/inputs/FileInput';
-import FormMakerInputError from './lib/components/inputs/FormMakerInputError';
-import FormMakerInputHelp from './lib/components/inputs/FormMakerInputHelp';
-import FormMakerInputLabel from './lib/components/inputs/FormMakerInputLabel';
-import RadioInput from './lib/components/inputs/RadioInput';
-import SelectInput from './lib/components/inputs/SelectInput';
-import TextAreaInput from './lib/components/inputs/TextAreaInput';
-import TextInput from './lib/components/inputs/TextInput';
+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/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 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,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"
@@ -8,8 +43,9 @@
         v-if="hasLabel"
         :id="id"
         :class="labelClass"
-        :text="label"
-      />
+      >
+        {{ label }}
+      </form-maker-label>
     </slot>
     <slot>
       <div :class="[inputGroupClass, hasErrors && inputErrorClass]">
@@ -28,55 +64,17 @@
       <form-maker-help
         v-if="hasHelpText"
         :class="helpTextClass"
-        :text="helpText"
-      />
+      >
+        {{ helpText }}
+      </form-maker-help>
     </slot>
     <slot name="errors">
       <form-maker-error
         v-if="hasErrors"
         :class="errorClass"
-        :text="error"
-      />
+      >
+        {{ error }}
+      </form-maker-error>
     </slot>
   </div>
 </template>
-
-<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>