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

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",

example/App.vue

@@ -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 {

package.json

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

src/components/Chrome.vue

@@ -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 ++

src/components/Sketch.vue

@@ -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/Slider.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/index.js

@@ -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/mixin/color.js

@@ -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,