Merge pull request #185 from asigloo/feature/factory-functions-for-typed-form-fields-next

feat(models): Added new factory functions for fields.

Author: alvarosabu

dev/typescript/App.vue

@@ -49,19 +49,18 @@
 import { mockAsync } from '@/core/utils/helpers';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import {
-  TextInput,
-  SelectInput,
-  EmailInput,
   FormValidation,
-  PasswordInput,
-  CheckboxInput,
-  RadioInput,
   email,
   pattern,
-  ColorInput,
-  NumberInput,
-  CustomInput,
-  BindingObject,
+  TextField,
+  SelectField,
+  EmailField,
+  PasswordField,
+  NumberField,
+  CheckboxField,
+  RadioField,
+  CustomField,
+  ColorField,
 } from '../../src';
 /* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
@@ -100,34 +99,28 @@ export default defineComponent({
         'readonly',
       ],
       fields: {
-        name: {
+        name: TextField({
           label: 'Name',
-          type: 'text',
-          value: 'Alvaro',
           required: true,
-        } as TextInput,
-        email: {
+        }),
+        email: EmailField({
           label: 'Email',
-          type: 'email',
           validations: [emailValidator],
           customClass: {
             active: true,
             'text-blue': true,
           },
-        } as EmailInput,
-        password: {
+        }),
+        password: PasswordField({
           label: 'Password',
-          type: 'password',
           autocomplete: 'current-password',
           validations: [passwordValidator],
-        } as PasswordInput,
-        stock: {
+        }),
+        stock: NumberField({
           label: 'Stock',
-          type: 'number',
-        } as NumberInput,
-        games: {
+        }),
+        games: SelectField({
           label: 'Games',
-          type: 'select',
           customClass: 'w-1/2',
           value: 'the-last-of-us',
           options: [
@@ -144,28 +137,23 @@ export default defineComponent({
               value: 'Nier Automata',
             },
           ],
-        } as SelectInput,
-        console: {
+        }),
+        console: SelectField({
           label: 'Console (Async Options)',
-          type: 'select',
           customClass: 'w-1/2',
-          options: [],
-        } as SelectInput,
-        steps: {
+        }),
+        steps: NumberField({
           label: 'Number',
-          type: 'number',
           min: 5,
           max: 60,
           step: 5,
           value: 5,
-        } as NumberInput,
-        awesomeness: {
+        }),
+        awesomeness: CheckboxField({
           label: "Check  if you're awesome",
-          type: 'checkbox',
-        } as CheckboxInput,
-        character: {
+        }),
+        character: RadioField({
           label: 'Select one option',
-          type: 'radio',
           options: [
             {
               key: 'mario',
@@ -185,30 +173,26 @@ export default defineComponent({
               disabled: true,
             },
           ],
-        } as RadioInput,
-        customField1: {
-          type: 'custom-field',
+        }),
+        customField1: CustomField({
           label: 'Custom Field',
-        } as CustomInput,
-        color: {
+        }),
+        color: ColorField({
           label: 'Color',
-          type: 'color',
           value: '#4DBA87',
-        } as ColorInput,
-        customStyles: {
+        }),
+        customStyles: TextField({
           label: 'Custom Styles',
-          type: 'text',
           required: true,
           customStyles: {
             border: '1px solid teal',
           },
-        } as TextInput,
-        readonly: {
+        }),
+        readonly: TextField({
           label: 'Readonly',
-          type: 'text',
           value: 'Alvaro',
           readonly: true,
-        } as TextInput,
+        }),
       },
     });
 

dev/vue/App.vue

@@ -47,7 +47,7 @@
 <script lang="ts">
 import { mockAsync } from '@/core/utils/helpers';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
-import { email, pattern } from '../../src';
+import { email, FieldTypes, pattern } from '../../src';
 
 export default defineComponent({
   name: 'app',
@@ -86,26 +86,26 @@ export default defineComponent({
       fields: {
         name: {
           label: 'Name',
-          type: 'text',
+          type: FieldTypes.TEXT,
           value: 'Alvaro',
         },
         email: {
           label: 'Email',
-          type: 'email',
+          type: FieldTypes.EMAIL,
           validations: [emailValidator],
         },
         password: {
           label: 'Password',
-          type: 'password',
+          type: FieldTypes.PASSWORD,
           validations: [passwordValidator],
         },
         stock: {
           label: 'Stock',
-          type: 'number',
+          type: FieldTypes.NUMBER,
         },
         games: {
           label: 'Games',
-          type: 'select',
+          type: FieldTypes.SELECT,
           customClass: 'w-1/2',
           value: 'the-last-of-us',
           options: [
@@ -125,25 +125,25 @@ export default defineComponent({
         },
         console: {
           label: 'Console (Async Options)',
-          type: 'select',
+          type: FieldTypes.SELECT,
           customClass: 'w-1/2',
           options: [],
         },
         steps: {
           label: 'Number',
-          type: 'number',
+          type: FieldTypes.NUMBER,
           min: 5,
           max: 60,
           step: 5,
           value: 5,
         },
         awesomeness: {
           label: "Check  if you're awesome",
-          type: 'checkbox',
+          type: FieldTypes.CHECKBOX,
         },
         character: {
           label: 'Select one option',
-          type: 'radio',
+          type: FieldTypes.RADIO,
           options: [
             {
               key: 'mario',
@@ -165,12 +165,12 @@ export default defineComponent({
           ],
         },
         customField1: {
-          type: 'custom-field',
+          type: FieldTypes.CUSTOM,
           label: 'Custom Field',
         },
         color: {
           label: 'Color',
-          type: 'color',
+          type: FieldTypes.COLOR,
           value: '#4DBA87',
         },
       },

src/components/dynamic-form/DynamicForm.vue

@@ -49,7 +49,7 @@ import {
 import { DynamicForm } from './form';
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
-import { FormControl, InputType } from '@/core/models';
+import { FieldTypes, FormControl, InputType } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
 import { removeEmpty } from '@/core/utils/helpers';
 
@@ -215,7 +215,7 @@ export default defineComponent({
           ? controls.value.reduce((prev, curr) => {
               const obj = {};
               obj[curr.name] =
-                curr.type === 'number'
+                curr.type === FieldTypes.NUMBER
                   ? parseFloat(`${curr.value}`)
                   : curr.value;
               return {

src/components/dynamic-input/DynamicInput.vue

@@ -23,6 +23,7 @@ import {
   TextAreaInput,
   InputType,
   BindingObject,
+  FieldTypes,
 } from '@/core/models';
 
 import {
@@ -88,7 +89,7 @@ export default defineComponent({
         'dynamic-input',
         'form-group',
         {
-          'form-group--inline': props?.control?.type === 'checkbox',
+          'form-group--inline': props?.control?.type === FieldTypes.CHECKBOX,
         },
         {
           'form-group--error': showErrors.value,
@@ -185,7 +186,7 @@ export default defineComponent({
 
     return () => {
       switch (props?.control?.type) {
-        case 'text':
+        case FieldTypes.TEXT:
           component = h(
             TextInputComponent,
             attributes.value as ControlAttribute<TextInput>,