Merge pull request #24 from endorfin/master

color picker for fallback input
saintplay · Aug 9, 2019 · 18e5a8d · 18e5a8d
2 parents 4d407e3 + 180d18f
commit 18e5a8d
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 2 deletions.
diff --git a/documentation/_api/_props.pug b/documentation/_api/_props.pug
@@ -132,6 +132,18 @@ h2.typo__h2#sub-props(data-section) Props
                 li: kbd 'OK'
             td.table__td Sets the text for the fallback button
 
+          tr.table__tr
+            td.table__td: strong fallbackInputType
+            td.table__td #[kbd String]
+            td.table__td: kbd 'text'
+            td.table__td
+              ul
+                li: kbd 'text'
+                li: kbd 'color'
+            td.table__td
+              | Sets the input type for the fallback input
+              | Use #[kbd 'text'] or #[kbd 'color']
+
           tr.table__tr
             td.table__td: strong inline
             td.table__td #[kbd Boolean]

diff --git a/documentation/_examples/FallbackInputType.vue b/documentation/_examples/FallbackInputType.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="form__field">
+    <div class="form__label">
+      <strong>Please choose a color:</strong>
+    </div>
+    <div class="form__input">
+      <swatches
+        v-model="color"
+
+        show-fallback
+        fallback-input-type="color"
+
+        popover-to="left"
+      ></swatches>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swatches from 'vue-swatches'
+
+export default {
+  components: {
+    Swatches
+  },
+  data () {
+    return {
+      color: '#A463BF',
+    }
+  }
+}
+</script>
diff --git a/documentation/_examples/_examples.pug b/documentation/_examples/_examples.pug
@@ -42,3 +42,8 @@
     :markdown-it
       If your user wants to use its own color you can use a fallback input and customizing it with `fallback-input-class`, `fallback-ok-class` and '`fallback-ok-text`'
     +example('FallbackInput')
+
+  +subsection('Fallback Input + ColorPicker')
+    :markdown-it
+      You can set the fallback input type to `color` and get a visual color picker interface
+    +example('FallbackInputType')
diff --git a/documentation/_examples/index.js b/documentation/_examples/index.js
@@ -7,6 +7,7 @@ import InlineSimple from './InlineSimple'
 import InlineAdvanced from './InlineAdvanced'
 import Exceptions from './Exceptions'
 import FallbackInput from './FallbackInput'
+import FallbackInputType from './FallbackInputType'
 
 export {
   Simple,
@@ -17,5 +18,6 @@ export {
   InlineSimple,
   InlineAdvanced,
   Exceptions,
-  FallbackInput
+  FallbackInput,
+  FallbackInputType
 }
diff --git a/src/Swatches.vue b/src/Swatches.vue
@@ -81,9 +81,9 @@
         <div v-if="showFallback" class="vue-swatches__fallback__wrapper" :style="computedFallbackWrapperStyles">
           <span class="vue-swatches__fallback__input--wrapper">
             <input
-              type="text"
               ref="fallbackInput"
               class="vue-swatches__fallback__input"
+              :type="fallbackInputType"
               :class="fallbackInputClass"
               :value="internalValue"
               @input="e => updateSwatch(e.target.value, { fromFallbackInput: true })"
@@ -155,6 +155,13 @@ export default {
       type: String,
       default: 'Ok'
     },
+    fallbackInputType: {
+      type: String,
+      default: () => 'text',
+      validator (value) {
+        return ['text', 'color'].indexOf(value) !== -1
+      }
+    },
     inline: {
       type: Boolean,
       default: false

diff --git a/test/unit/specs/props.spec.js b/test/unit/specs/props.spec.js
@@ -668,6 +668,39 @@ describe('Props', () => {
     })
   })
 
+  describe('fallback-type-prop', () => {
+    test('default fallback input type is set to text', () => {
+      const componentWrapper = mount(Swatches, {
+        propsData: {
+          showFallback: true
+        }
+      })
+      const input = componentWrapper.find('.vue-swatches__fallback__input')
+
+      return Vue.nextTick()
+      .then(() => {
+        expect(input.attributes().type)
+        .toBe('text')
+      })
+    })
+
+    test('fallback input type is set to color', () => {
+      const componentWrapper = mount(Swatches, {
+        propsData: {
+          showFallback: true,
+          fallbackInputType: 'color'
+        }
+      })
+      const input = componentWrapper.find('.vue-swatches__fallback__input')
+
+      return Vue.nextTick()
+      .then(() => {
+        expect(input.attributes().type)
+        .toBe('color')
+      })
+    })
+  })
+
   describe('inline', () => {
     test('inline default is set to false', () => {
       const noInlineComponent = mount(Swatches, {