From 1ef1639d49442fa053f8ac4461a54e8960f279c0 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Tue, 29 Sep 2020 07:50:36 +0200
Subject: [PATCH] feat(input): added color picker input

---
 dev/typescript/App.vue                        | 6 ++++++
 dev/typescript/main.ts                        | 4 ++--
 dev/vue/App.vue                               | 5 +++++
 src/components/dynamic-input/DynamicInput.vue | 1 +
 src/core/models.ts                            | 4 ++++
 5 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/dev/typescript/App.vue b/dev/typescript/App.vue
index 316dd9f..0e745b7 100644
--- a/dev/typescript/App.vue
+++ b/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) {
diff --git a/dev/typescript/main.ts b/dev/typescript/main.ts
index b442634..2a74d4b 100644
--- a/dev/typescript/main.ts
+++ b/dev/typescript/main.ts
@@ -3,8 +3,8 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './styles/main.scss';
 
-// import { createDynamicForms } from '../../src';
-import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
+import { createDynamicForms } from '../../src';
+// import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
 
 const VueDynamicForms = createDynamicForms({
   autoValidate: true,
diff --git a/dev/vue/App.vue b/dev/vue/App.vue
index 8e6781f..f8c002d 100644
--- a/dev/vue/App.vue
+++ b/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) {
diff --git a/src/components/dynamic-input/DynamicInput.vue b/src/components/dynamic-input/DynamicInput.vue
index 6422e0d..9dd81b2 100644
--- a/src/components/dynamic-input/DynamicInput.vue
+++ b/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':
diff --git a/src/core/models.ts b/src/core/models.ts
index afbcb11..5db1770 100644
--- a/src/core/models.ts
+++ b/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;