Refactor to support option by value #24

package.json

@@ -28,17 +28,17 @@
     "@vue/cli-plugin-unit-jest": "^3.3.0",
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-plugin-lodash": "^3.3.4",
-    "codecov": "^3.1.0",
-    "eslint-plugin-jest": "^21.25.1",
+    "codecov": "^3.2.0",
+    "eslint-plugin-jest": "^21.27.2",
     "eslint-plugin-vue": "^5.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.5.21",
-    "webpack-bundle-analyzer": "^3.0.3"
+    "webpack-bundle-analyzer": "^3.0.4"
   }
 }

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <v-app id="app">
-    <VColorPickerInput v-model="color"></VColorPickerInput>
+    <VColorPickerInput v-model="color"
+                       return-type="value"
+                       @change="showColor">
+    </VColorPickerInput>
   </v-app>
 </template>
 
@@ -14,12 +17,18 @@ export default {
   },
   data() {
     return {
-      color: 'red darken-2',
+      color: null,
     };
   },
+  methods: {
+    showColor(value) {
+      console.log('selected =>', JSON.stringify(value));
+    },
+  },
   mounted() {
     setTimeout(() => {
-      this.color = null;
+      this.color = '#f44336';
+      console.log('setting color =>', JSON.stringify(this.color));
     }, 5000);
   },
 };

src/components/VColorPaletteMaterial.vue

@@ -18,19 +18,24 @@
 
 <script>
 import {
+  clone,
   each,
   find,
   isNil,
+  isEmpty,
+  isObject,
   sortBy,
+  startsWith,
 } from 'lodash';
+
 import materialColors from 'vuetify/es5/util/colors';
 import { toKebabCase } from '../utility';
 
 export default {
   name: 'VColorPaletteMaterial',
   props: {
     value: {
-      type: String,
+      type: [Object, String],
     },
   },
   data() {
@@ -91,13 +96,20 @@ export default {
       this.sendColorChange();
     },
     setColorFromInput() {
-      if (isNil(this.value)) {
+      if (isNil(this.value) || isEmpty(this.value)) {
         this.color = null;
+      } else if (isObject(this.value)) {
+        this.color = clone(this.value);
       } else {
-        this.color = find(this.colors, { name: this.value });
+        const isHex = startsWith(this.value, '#');
+        if (isHex) {
+          this.color = find(this.colors, { value: this.value });
+        } else {
+          this.color = find(this.colors, { name: this.value });
+        }
+
+        this.sendColorChange();
       }
-
-      this.sendColorChange();
     },
     setColors() {
       const colors = [];
@@ -151,12 +163,7 @@ export default {
       this.colorGroups = colorGroups;
     },
     sendColorChange() {
-      if (this.color) {
-        this.$emit('input', {
-          name: this.color.name,
-          value: this.color.value,
-        });
-      }
+      this.$emit('input', this.color);
     },
   },
   mounted() {

src/components/VColorPicker.vue

@@ -34,7 +34,7 @@ export default {
       default: false,
     },
     value: {
-      type: String,
+      type: [Object, String],
     },
     returnType: {
       type: String,
@@ -56,15 +56,21 @@ export default {
   },
   methods: {
     getColorByReturnType() {
-      return this.returnType === 'color' ? this.color : this.color[this.returnType];
+      if (this.color) {
+        return this.returnType === 'color' ? this.color : this.color[this.returnType];
+      }
+
+      return null;
     },
     setPalleteIndex(index) {
       this.activePaletteIndex = index;
     },
-    setColor(value) {
-      this.color = value;
-      this.$emit('input', this.color.name);
-      this.$emit('change', this.getColorByReturnType());
+    setColor(color) {
+      this.color = color;
+      const value = this.getColorByReturnType();
+
+      this.$emit('input', this.color);
+      this.$emit('change', value);
     },
   },
 };

src/components/VColorPickerInput.vue

@@ -14,8 +14,9 @@
                     @input="clearColor">
       </v-text-field>
       <VColorPicker :hide-tabs="hideTabs"
-                    :value="colorName"
-                    @change="setColor">
+                    :value="value"
+                    :return-type="returnType"
+                    @input="setColor">
       </VColorPicker>
     </v-menu>
     <div class="color-box-preview"
@@ -28,6 +29,13 @@
 </template>
 
 <script>
+import {
+  isString,
+  isObject,
+  isNil,
+  startsWith,
+} from 'lodash';
+
 import VColorPicker from './VColorPicker';
 
 export default {
@@ -45,7 +53,7 @@ export default {
       default: 'Color',
     },
     value: {
-      type: String,
+      type: [Object, String],
     },
     returnType: {
       type: String,
@@ -64,7 +72,7 @@ export default {
   },
   computed: {
     colorName() {
-      return this.color ? this.color.name : this.value;
+      return isObject(this.color) && !isNil(this.color) ? this.color.name : null;
     },
     colorStyle() {
       return {
@@ -81,13 +89,25 @@ export default {
       return null;
     },
     setChange() {
-      this.$emit('input', this.color ? this.color.name : null);
-      this.$emit('change', this.returnType === 'color' ? this.color : this.getColorType());
+      const value = this.returnType === 'color' ? this.color : this.getColorType();
+
+      this.$emit('change', value);
     },
-    setColor(color) {
-      if (this.color && color) {
-        Object.assign(this.color, color);
+    setColor(value) {
+      if (isObject(value)) {
+        this.color = value;
       } else {
+        let color;
+        if (startsWith(value, '#')) {
+          color = {
+            value,
+          };
+        } else {
+          color = {
+            name: value,
+          };
+        }
+
         this.color = color;
       }
 
@@ -105,10 +125,16 @@ export default {
   watch: {
     value: {
       handler(value) {
-        if (typeof value === 'string') {
-          this.setColor({
-            name: value,
-          });
+        if (isString(value)) {
+          if (startsWith(value, '#')) {
+            this.setColor({
+              value,
+            });
+          } else {
+            this.setColor({
+              name: value,
+            });
+          }
         } else {
           this.setColor(value);
         }

vue.config.js

@@ -1,10 +1,10 @@
 // eslint-disable-next-line
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 const plugins = [];
 
 if (process.env.NODE_ENV !== 'production') {
-  plugins.push(new BundleAnalyzerPlugin());
+  // plugins.push(new BundleAnalyzerPlugin());
 }
 
 module.exports = {