Merge remote-tracking branch 'origin/feat/2.6.0'

Author: linx4200

dist/vue-color.js

@@ -516,6 +516,7 @@ function _colorChange(data, oldHue) {
   return {
     hsl: hsl,
     hex: color.toHexString().toUpperCase(),
+    hex8: color.toHex8String().toUpperCase(),
     rgba: color.toRgb(),
     hsv: hsv,
     oldHue: data.h || oldHue || hsl.h,
@@ -927,7 +928,7 @@ var _color2 = _interopRequireDefault(_color);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var VueColor = {
-  version: '2.5.0',
+  version: '2.6.0',
   Compact: _Compact2.default,
   Grayscale: _Grayscale2.default,
   Material: _Material2.default,
@@ -3071,7 +3072,7 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n.vc-slider {\n  position: relative;\n  width: 410px;\n}\n.vc-slider-hue-warp {\n  height: 12px;\n  position: relative;\n}\n.vc-slider-hue-warp .vc-hue-picker {\n  width: 14px;\n  height: 14px;\n  border-radius: 6px;\n  transform: translate(-7px, -2px);\n  background-color: rgb(248, 248, 248);\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-slider-swatches {\n  display: flex;\n  margin-top: 20px;\n}\n.vc-slider-swatch {\n  margin-right: 1px;\n  flex: 1;\n  width: 20%;\n}\n.vc-slider-swatch:first-child {\n  margin-right: 1px;\n}\n.vc-slider-swatch:first-child .vc-slider-swatch-picker {\n  border-radius: 2px 0px 0px 2px;\n}\n.vc-slider-swatch:last-child {\n  margin-right: 0;\n}\n.vc-slider-swatch:last-child .vc-slider-swatch-picker {\n  border-radius: 0px 2px 2px 0px;\n}\n.vc-slider-swatch-picker {\n  cursor: pointer;\n  height: 12px;\n}\n.vc-slider-swatch-picker--active {\n  transform: scaleY(1.8);\n  border-radius: 3.6px/2px;\n}\n", ""]);
+exports.push([module.i, "\n.vc-slider {\n  position: relative;\n  width: 410px;\n}\n.vc-slider-hue-warp {\n  height: 12px;\n  position: relative;\n}\n.vc-slider-hue-warp .vc-hue-picker {\n  width: 14px;\n  height: 14px;\n  border-radius: 6px;\n  transform: translate(-7px, -2px);\n  background-color: rgb(248, 248, 248);\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-slider-swatches {\n  display: flex;\n  margin-top: 20px;\n}\n.vc-slider-swatch {\n  margin-right: 1px;\n  flex: 1;\n  width: 20%;\n}\n.vc-slider-swatch:first-child {\n  margin-right: 1px;\n}\n.vc-slider-swatch:first-child .vc-slider-swatch-picker {\n  border-radius: 2px 0px 0px 2px;\n}\n.vc-slider-swatch:last-child {\n  margin-right: 0;\n}\n.vc-slider-swatch:last-child .vc-slider-swatch-picker {\n  border-radius: 0px 2px 2px 0px;\n}\n.vc-slider-swatch-picker {\n  cursor: pointer;\n  height: 12px;\n}\n.vc-slider-swatch-picker--active {\n  transform: scaleY(1.8);\n  border-radius: 3.6px/2px;\n}\n.vc-slider-swatch-picker--white {\n  box-shadow: inset 0 0 0 1px #ddd;\n}\n.vc-slider-swatch-picker--active.vc-slider-swatch-picker--white {\n  box-shadow: inset 0 0 0 0.6px #ddd;\n}\n", ""]);
 
 // exports
 
@@ -3101,25 +3102,32 @@ exports.default = {
   name: 'Slider',
   mixins: [_color2.default],
   props: {
-    direction: String
+    swatches: {
+      type: Array,
+      default: function _default() {
+        return ['.80', '.65', '.50', '.35', '.20'];
+      }
+    }
   },
   components: {
     hue: _Hue2.default
   },
   computed: {
     activeOffset: function activeOffset() {
-      if (Math.round(this.colors.hsl.s * 100) / 100 === 0.50) {
-        return Math.round(this.colors.hsl.l * 100) / 100;
+      var hasBlack = this.swatches.includes('0');
+      var hasWhite = this.swatches.includes('1');
+      var hsl = this.colors.hsl;
+
+      if (Math.round(hsl.s * 100) / 100 === 0.50) {
+        return Math.round(hsl.l * 100) / 100;
+      } else if (hasBlack && hsl.l === 0) {
+        return 0;
+      } else if (hasWhite && hsl.l === 1) {
+        return 1;
       }
-      return 0;
+      return -1;
     }
   },
-  data: function data() {
-    return {
-      swatches: ['.80', '.65', '.50', '.35', '.20']
-    };
-  },
-
   methods: {
     hueChange: function hueChange(data) {
       this.colorChange(data);
@@ -3394,7 +3402,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
     }, [_c('div', {
       staticClass: "vc-slider-swatch-picker",
       class: {
-        'vc-slider-swatch-picker--active': offset == _vm.activeOffset
+        'vc-slider-swatch-picker--active': offset == _vm.activeOffset, 'vc-slider-swatch-picker--white': offset === '1'
       },
       style: ({
         background: 'hsl(' + _vm.colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'
@@ -5218,7 +5226,7 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n.vc-sketch {\n  position: relative;\n  width: 200px;\n  padding: 10px 10px 0;\n  box-sizing: initial;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);\n}\n.vc-sketch-saturation-wrap {\n  width: 100%;\n  padding-bottom: 75%;\n  position: relative;\n  overflow: hidden;\n}\n.vc-sketch-controls {\n  display: flex;\n}\n.vc-sketch-sliders {\n  padding: 4px 0;\n  flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n  border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n  position: relative;\n  height: 10px;\n}\n.vc-sketch-alpha-wrap {\n  position: relative;\n  height: 10px;\n  margin-top: 4px;\n  overflow: hidden;\n}\n.vc-sketch-color-wrap {\n  width: 24px;\n  height: 24px;\n  position: relative;\n  margin-top: 4px;\n  margin-left: 4px;\n  border-radius: 3px;\n}\n.vc-sketch-active-color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);\n  z-index: 2;\n}\n.vc-sketch-color-wrap .vc-checkerboard {\n  background-size: auto;\n}\n.vc-sketch-field {\n  display: flex;\n  padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n  width: 80%;\n  padding: 4px 10% 3px;\n  border: none;\n  box-shadow: inset 0 0 0 1px #ccc;\n  font-size: 11px;\n}\n.vc-sketch-field .vc-input__label {\n  display: block;\n  text-align: center;\n  font-size: 11px;\n  color: #222;\n  padding-top: 3px;\n  padding-bottom: 4px;\n  text-transform: capitalize;\n}\n.vc-sketch-field--single {\n  flex: 1;\n  padding-left: 6px;\n}\n.vc-sketch-field--double {\n  flex: 2;\n}\n.vc-sketch-presets {\n  margin-right: -10px;\n  margin-left: -10px;\n  padding-left: 10px;\n  padding-top: 10px;\n  border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n  border-radius: 3px;\n  overflow: hidden;\n  position: relative;\n  display: inline-block;\n  margin: 0 10px 10px 0;\n  vertical-align: top;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n}\n.vc-sketch-presets-color .vc-checkerboard {\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n  border-radius: 3px;\n}\n.vc-sketch__disable-alpha .vc-sketch-color-wrap {\n  height: 10px;\n}\n", ""]);
+exports.push([module.i, "\n.vc-sketch {\n  position: relative;\n  width: 200px;\n  padding: 10px 10px 0;\n  box-sizing: initial;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);\n}\n.vc-sketch-saturation-wrap {\n  width: 100%;\n  padding-bottom: 75%;\n  position: relative;\n  overflow: hidden;\n}\n.vc-sketch-controls {\n  display: flex;\n}\n.vc-sketch-sliders {\n  padding: 4px 0;\n  flex: 1;\n}\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n  border-radius: 2px;\n}\n.vc-sketch-hue-wrap {\n  position: relative;\n  height: 10px;\n}\n.vc-sketch-alpha-wrap {\n  position: relative;\n  height: 10px;\n  margin-top: 4px;\n  overflow: hidden;\n}\n.vc-sketch-color-wrap {\n  width: 24px;\n  height: 24px;\n  position: relative;\n  margin-top: 4px;\n  margin-left: 4px;\n  border-radius: 3px;\n}\n.vc-sketch-active-color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);\n  z-index: 2;\n}\n.vc-sketch-color-wrap .vc-checkerboard {\n  background-size: auto;\n}\n.vc-sketch-field {\n  display: flex;\n  padding-top: 4px;\n}\n.vc-sketch-field .vc-input__input {\n  width: 90%;\n  padding: 4px 0 3px 10%;\n  border: none;\n  box-shadow: inset 0 0 0 1px #ccc;\n  font-size: 10px;\n}\n.vc-sketch-field .vc-input__label {\n  display: block;\n  text-align: center;\n  font-size: 11px;\n  color: #222;\n  padding-top: 3px;\n  padding-bottom: 4px;\n  text-transform: capitalize;\n}\n.vc-sketch-field--single {\n  flex: 1;\n  padding-left: 6px;\n}\n.vc-sketch-field--double {\n  flex: 2;\n}\n.vc-sketch-presets {\n  margin-right: -10px;\n  margin-left: -10px;\n  padding-left: 10px;\n  padding-top: 10px;\n  border-top: 1px solid #eee;\n}\n.vc-sketch-presets-color {\n  border-radius: 3px;\n  overflow: hidden;\n  position: relative;\n  display: inline-block;\n  margin: 0 10px 10px 0;\n  vertical-align: top;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n}\n.vc-sketch-presets-color .vc-checkerboard {\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n  border-radius: 3px;\n}\n.vc-sketch__disable-alpha .vc-sketch-color-wrap {\n  height: 10px;\n}\n", ""]);
 
 // exports
 
@@ -5290,7 +5298,13 @@ exports.default = {
   },
   computed: {
     hex: function hex() {
-      return this.colors.hex.replace('#', '');
+      var hex = void 0;
+      if (this.colors.a < 1) {
+        hex = this.colors.hex8;
+      } else {
+        hex = this.colors.hex;
+      }
+      return hex.replace('#', '');
     },
     activeColor: function activeColor() {
       var rgba = this.colors.rgba;
@@ -5667,24 +5681,12 @@ exports.default = {
     activeColor: function activeColor() {
       var rgba = this.colors.rgba;
       return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')';
-    }
-  },
-  watch: {
-    colors: function colors(newVal) {
-      var a = newVal.a;
-
-      if (a < 1 && this.fieldsIndex === 0) {
-        this.fieldsIndex = 1;
-      }
+    },
+    hasAlpha: function hasAlpha() {
+      return this.colors.a < 1;
     }
   },
   methods: {
-    handlePreset: function handlePreset(c) {
-      this.colorChange({
-        hex: c,
-        source: 'hex'
-      });
-    },
     childChange: function childChange(data) {
       this.colorChange(data);
     },
@@ -5719,7 +5721,7 @@ exports.default = {
     },
     toggleViews: function toggleViews() {
       if (this.fieldsIndex >= 2) {
-        this.fieldsIndex = this.colors.a < 1 ? 1 : 0;
+        this.fieldsIndex = 0;
         return;
       }
       this.fieldsIndex++;
@@ -5808,15 +5810,23 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
     staticClass: "vc-chrome-fields"
   }, [_c('div', {
     staticClass: "vc-chrome-field"
-  }, [_c('ed-in', {
+  }, [(!_vm.hasAlpha) ? _c('ed-in', {
     attrs: {
       "label": "hex",
       "value": _vm.colors.hex
     },
     on: {
       "change": _vm.inputChange
     }
-  })], 1)]), _vm._v(" "), _c('div', {
+  }) : _vm._e(), _vm._v(" "), (_vm.hasAlpha) ? _c('ed-in', {
+    attrs: {
+      "label": "hex",
+      "value": _vm.colors.hex8
+    },
+    on: {
+      "change": _vm.inputChange
+    }
+  }) : _vm._e()], 1)]), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",

dist/vue-color.min.js

@@ -69,26 +69,26 @@ import chrome from '../src/components/Chrome.vue'
 import photoshop from '../src/components/Photoshop.vue'
 
 let defaultProps = {
-  hex: '#194d33',
+  hex: '#194d33e6',
   hsl: {
     h: 150,
     s: 0.5,
     l: 0.2,
-    a: 1
+    a: 0.9
   },
   hsv: {
     h: 150,
     s: 0.66,
     v: 0.30,
-    a: 1
+    a: 0.9
   },
   rgba: {
     r: 25,
     g: 77,
     b: 51,
-    a: 1
+    a: 0.9
   },
-  a: 1
+  a: 0.9
 }
 
 export default {

example/App.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue-color",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Color of Vue Components",
   "keywords": [
     "color",

package-lock.json

@@ -24,7 +24,8 @@
         <div class="vc-chrome-fields" v-show="fieldsIndex === 0">
           <!-- hex -->
           <div class="vc-chrome-field">
-            <ed-in label="hex" :value="colors.hex" @change="inputChange"></ed-in>  
+            <ed-in v-if="!hasAlpha" label="hex" :value="colors.hex" @change="inputChange"></ed-in>
+            <ed-in v-if="hasAlpha" label="hex" :value="colors.hex8" @change="inputChange"></ed-in>  
           </div>
         </div>
         <div class="vc-chrome-fields" v-show="fieldsIndex === 1">
@@ -121,23 +122,12 @@ export default {
     activeColor () {
       const rgba = this.colors.rgba
       return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')'
-    }
-  },
-  watch: {
-    colors (newVal) {
-      const { a } = newVal
-      if (a < 1 && this.fieldsIndex === 0) {
-        this.fieldsIndex = 1
-      }
+    },
+    hasAlpha () {
+      return this.colors.a < 1
     }
   },
   methods: {
-    handlePreset (c) {
-      this.colorChange({
-        hex: c,
-        source: 'hex'
-      })
-    },
     childChange (data) {
       this.colorChange(data)
     },
@@ -172,7 +162,7 @@ export default {
     },
     toggleViews () {
       if (this.fieldsIndex >= 2) {
-        this.fieldsIndex = this.colors.a < 1 ? 1 : 0
+        this.fieldsIndex = 0
         return
       }
       this.fieldsIndex ++

package.json

@@ -101,7 +101,13 @@ export default {
   },
   computed: {
     hex () {
-      return this.colors.hex.replace('#', '')
+      let hex
+      if (this.colors.a < 1) {
+        hex = this.colors.hex8
+      } else {
+        hex = this.colors.hex
+      }
+      return hex.replace('#', '')
     },
     activeColor () {
       var rgba = this.colors.rgba
@@ -215,11 +221,11 @@ export default {
 }
 
 .vc-sketch-field .vc-input__input {
-  width: 80%;
-  padding: 4px 10% 3px;
+  width: 90%;
+  padding: 4px 0 3px 10%;
   border: none;
   box-shadow: inset 0 0 0 1px #ccc;
-  font-size: 11px;
+  font-size: 10px;
 }
 
 .vc-sketch-field .vc-input__label {

src/components/Chrome.vue

@@ -9,7 +9,7 @@
         <div
           class="vc-slider-swatch-picker"
           :aria-label="'color:' + 'hsl(' + colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'"
-          :class="{'vc-slider-swatch-picker--active': offset == activeOffset}"
+          :class="{'vc-slider-swatch-picker--active': offset == activeOffset, 'vc-slider-swatch-picker--white': offset === '1'}"
           :style="{background: 'hsl(' + colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'}"
         ></div>
       </div>
@@ -25,22 +25,30 @@ export default {
   name: 'Slider',
   mixins: [colorMixin],
   props: {
-    direction: String
+    swatches: {
+      type: Array,
+      default () {
+        return ['.80', '.65', '.50', '.35', '.20']
+      }
+    }
   },
   components: {
     hue
   },
   computed: {
     activeOffset () {
-      if (Math.round(this.colors.hsl.s * 100) / 100 === 0.50) {
-        return Math.round(this.colors.hsl.l * 100) / 100
+      const hasBlack = this.swatches.includes('0')
+      const hasWhite = this.swatches.includes('1')
+      const hsl = this.colors.hsl
+
+      if (Math.round(hsl.s * 100) / 100 === 0.50) {
+        return Math.round(hsl.l * 100) / 100
+      } else if (hasBlack && hsl.l === 0) {
+        return 0
+      } else if (hasWhite && hsl.l === 1) {
+        return 1
       }
-      return 0
-    }
-  },
-  data () {
-    return {
-      swatches: ['.80', '.65', '.50', '.35', '.20']
+      return -1
     }
   },
   methods: {
@@ -105,4 +113,10 @@ export default {
   transform: scaleY(1.8);
   border-radius: 3.6px/2px;
 }
+.vc-slider-swatch-picker--white {
+  box-shadow: inset 0 0 0 1px #ddd;
+}
+.vc-slider-swatch-picker--active.vc-slider-swatch-picker--white {
+  box-shadow: inset 0 0 0 0.6px #ddd;
+}
 </style>

src/components/Sketch.vue

@@ -14,7 +14,7 @@ import Saturation from './components/common/Saturation.vue'
 import ColorMixin from './mixin/color.js'
 
 const VueColor = {
-  version: '2.5.0',
+  version: '2.6.0',
   Compact,
   Grayscale,
   Material,

src/components/Slider.vue

@@ -42,6 +42,7 @@ function _colorChange (data, oldHue) {
   return {
     hsl: hsl,
     hex: color.toHexString().toUpperCase(),
+    hex8: color.toHex8String().toUpperCase(),
     rgba: color.toRgb(),
     hsv: hsv,
     oldHue: data.h || oldHue || hsl.h,