From 69339465c27231e7e1e2685ad9a73e0b9eb9b413 Mon Sep 17 00:00:00 2001
From: Adrien Fourel <ad.fourel@gmail.com>
Date: Thu, 19 Jul 2018 15:51:53 +0200
Subject: [PATCH] fix: support for color chosen with lowercased palette #150

---
 src/components/Compact.vue   | 4 ++--
 src/components/Grayscale.vue | 4 ++--
 src/mixin/color.js           | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Compact.vue b/src/components/Compact.vue
index 8197754..6e2e8d2 100644
--- a/src/components/Compact.vue
+++ b/src/components/Compact.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vc-compact">
     <ul class="vc-compact-colors">
-      <li class="vc-compact-color-item" v-for="c in palette" :key="c"
+      <li class="vc-compact-color-item" v-for="c in paletteUpperCase(palette)" :key="c"
         :aria-label="'color:' + c"
         @click="handlerClick(c)"
         :class="{'vc-compact-color-item--white': c === '#FFFFFF' }"
@@ -41,7 +41,7 @@ export default {
   },
   computed: {
     pick () {
-      return this.colors.hex
+      return this.colors.hex.toUpperCase()
     }
   },
   methods: {
diff --git a/src/components/Grayscale.vue b/src/components/Grayscale.vue
index c6b6174..5c97697 100644
--- a/src/components/Grayscale.vue
+++ b/src/components/Grayscale.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vc-grayscale">
     <ul class="vc-grayscale-colors">
-      <li class="vc-grayscale-color-item" v-for="c in palette" :key="c"
+      <li class="vc-grayscale-color-item" v-for="c in paletteUpperCase(palette)" :key="c"
         :aria-label="'color:' + c"
         @click="handlerClick(c)"
         :class="{'vc-grayscale-color-item--white': c == '#FFFFFF'}"
@@ -37,7 +37,7 @@ export default {
   },
   computed: {
     pick () {
-      return this.colors.hex
+      return this.colors.hex.toUpperCase()
     }
   },
   methods: {
diff --git a/src/mixin/color.js b/src/mixin/color.js
index c29242c..8105e87 100644
--- a/src/mixin/color.js
+++ b/src/mixin/color.js
@@ -99,6 +99,9 @@ export default {
       if (checked === passed) {
         return data
       }
+    },
+    paletteUpperCase (palette) {
+      return palette.map(c => c.toUpperCase())
     }
   }
 }