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

Author: alvarosabu

dev/typescript/App.vue

@@ -62,6 +62,15 @@ import {
   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 +109,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 +147,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 +183,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,
+        }),
       },
     });
 

src/core/models.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 export type InputTypeKeys =
   | 'text'
   | 'email'
@@ -59,63 +60,63 @@ export interface InputBase {
 }
 
 export type TextInput = InputBase & {
-  type: 'text';
-  value: string;
+  type: string;
+  value?: string;
 };
 
 export type NumberInput = InputBase & {
-  type: 'number';
+  type: string;
   value: number;
-  min?: number;
-  max?: number;
-  step?: number;
+  min: number;
+  max: number;
+  step: number;
 };
 
 export type SelectInput<T = boolean | string> = InputBase & {
-  type: 'select';
+  type: string;
   value: T;
   options?: { key: string; value: string; disabled?: boolean }[];
 };
 
 export type TextAreaInput = InputBase & {
-  type: 'textarea';
+  type: string;
   value: string;
   cols?: number;
   rows?: number;
 };
 
 export type CheckboxInput = InputBase & {
-  type: 'checkbox';
+  type: string;
   value: boolean;
 };
 
 export type CustomInput = InputBase & {
-  type: 'custom-field';
+  type: string;
   value: boolean | string | number;
 };
 
 export type EmailInput = InputBase & {
-  type: 'email';
+  type: string;
   value: string;
 };
 
 export type PasswordInput = InputBase & {
-  type: 'password';
+  type: string;
   value: string;
 };
 
 export type ColorInput = InputBase & {
-  type: 'color';
+  type: string;
   value: string;
 };
 
 export type UrlInput = InputBase & {
-  type: 'url';
+  type: string;
   value: string;
 };
 
 export type RadioInput = InputBase & {
-  type: 'radio';
+  type: string;
   value: string;
   options?: { key: string; value: string; disabled?: boolean }[];
 };
@@ -136,3 +137,123 @@ export interface FormOptions {
   netlifyHoneypot?: string;
   autocomplete?: boolean;
 }
+
+export const fieldTypes = {
+  TEXT: 'text',
+  TEXTAREA: 'textarea',
+  SELECT: 'select',
+  NUMBER: 'number',
+  EMAIL: 'email',
+  URL: 'url',
+  PASSWORD: 'password',
+  CHECKBOX: 'checkbox',
+  RADIO: 'radio',
+  CUSTOM: 'custom-field',
+  COLOR: 'color',
+};
+
+// Factory Functions
+
+export const FieldBase = ({
+  value = null,
+  validations = [],
+  label = null,
+  ariaLabel = null,
+  ariaLabelledBy = null,
+  customClass = null,
+  customStyles = null,
+  disabled = false,
+  placeholder = null,
+  inline = false,
+  required = false,
+  autocomplete = null,
+  readonly = false,
+} = {}): InputBase =>
+  ({
+    value,
+    validations,
+    label,
+    ariaLabel,
+    ariaLabelledBy,
+    customClass,
+    customStyles,
+    disabled,
+    placeholder,
+    inline,
+    required,
+    autocomplete,
+    readonly,
+  } as InputBase);
+
+export const TextField = ({ value = null, ...rest }): TextInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.TEXT,
+});
+
+export const EmailField = ({ value = null, ...rest }): EmailInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.EMAIL,
+});
+
+export const PasswordField = ({ value = null, ...rest }): PasswordInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.PASSWORD,
+});
+
+export const CheckboxField = ({ value = null, ...rest }): CheckboxInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.CHECKBOX,
+});
+
+export const ColorField = ({ value = null, ...rest }): ColorInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.COLOR,
+});
+
+export const RadioField = ({
+  options = [],
+  value = null,
+  ...rest
+}): RadioInput => ({
+  ...FieldBase(rest),
+  value,
+  options,
+  type: fieldTypes.RADIO,
+});
+
+export const NumberField = ({
+  value = null,
+  min = 0,
+  max = 100,
+  step = 1,
+  ...rest
+}): NumberInput => ({
+  ...FieldBase(rest),
+  value,
+  min,
+  max,
+  step,
+  type: fieldTypes.NUMBER,
+});
+
+export const SelectField = ({
+  options = [],
+  value = null,
+  ...rest
+}): SelectInput => ({
+  ...FieldBase(rest),
+  value,
+  options,
+  type: fieldTypes.SELECT,
+});
+
+export const CustomField = ({ value = null, ...rest }): CustomInput => ({
+  ...FieldBase(rest),
+  value,
+  type: fieldTypes.CUSTOM,
+});