Merge pull request #139 from alvarosaburido/feature/color-input

feat(input): added color picker input

Author: alvarosabu

dev/typescript/App.vue

@@ -58,6 +58,7 @@ import {
   InputBase,
   email,
   pattern,
+  ColorInput,
 } from '../../src';
 
 export default defineComponent({
@@ -142,6 +143,11 @@ export default defineComponent({
           label: 'Custom Field',
           name: 'customField1',
         }),
+        new ColorInput({
+          label: 'Color',
+          name: 'color',
+          value: '#4DBA87',
+        }),
       ],
     });
     function handleSubmit(values) {

dev/typescript/main.ts

@@ -4,7 +4,8 @@ import App from './App.vue';
 import './styles/main.scss';
 
 import { createDynamicForms } from '../../src';
-//import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
+
+// import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
 
 const VueDynamicForms = createDynamicForms({
   autoValidate: true,

dev/vue/App.vue

@@ -37,6 +37,7 @@ import {
   email,
   pattern,
   TextAreaInput,
+  ColorInput,
 } from '../../src';
 
 export default defineComponent({
@@ -89,6 +90,10 @@ export default defineComponent({
           cols: 20,
           rows: 5,
         }),
+        new ColorInput({
+          label: 'Color',
+          value: '#4DBA87',
+        }),
       ],
     });
     function handleSubmit(values) {

src/components/dynamic-input/DynamicInput.vue

@@ -135,6 +135,7 @@ export default defineComponent({
         case 'email':
         case 'password':
         case 'url':
+        case 'color':
           component = h(TextInput, attributes.value);
           break;
         case 'select':

src/core/models.ts

@@ -91,6 +91,10 @@ export class RadioInput extends InputBase<boolean> {
   type = 'radio';
 }
 
+export class ColorInput extends InputBase<string> {
+  type = 'color';
+}
+
 export class FormControl<T> extends InputBase<T> {
   valid = true;
   invalid = false;