Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@uscreentv/v-color
Advanced tools
@uscreentv/v-color - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -1,1017 +0,1 @@ | ||
| import clamp$1 from 'lodash/clamp'; | ||
| import debounce from 'lodash/debounce'; | ||
| import isEqual from 'lodash/isEqual'; | ||
| import throttle from 'lodash/throttle'; | ||
| /** | ||
| * Copyright (c) 2013-present, Facebook, Inc. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
| var invariant = function(condition, format, a, b, c, d, e, f) { | ||
| if (!condition) { | ||
| var error; | ||
| if (format === undefined) { | ||
| error = new Error( | ||
| 'Minified exception occurred; use the non-minified dev environment ' + | ||
| 'for the full error message and additional helpful warnings.' | ||
| ); | ||
| } else { | ||
| var args = [a, b, c, d, e, f]; | ||
| var argIndex = 0; | ||
| error = new Error( | ||
| format.replace(/%s/g, function() { return args[argIndex++]; }) | ||
| ); | ||
| error.name = 'Invariant Violation'; | ||
| } | ||
| error.framesToPop = 1; // we don't care about invariant's own frame | ||
| throw error; | ||
| } | ||
| }; | ||
| var invariant_1 = invariant; | ||
| /* | ||
| object-assign | ||
| (c) Sindre Sorhus | ||
| @license MIT | ||
| */ | ||
| /* eslint-disable no-unused-vars */ | ||
| var getOwnPropertySymbols = Object.getOwnPropertySymbols; | ||
| var hasOwnProperty = Object.prototype.hasOwnProperty; | ||
| var propIsEnumerable = Object.prototype.propertyIsEnumerable; | ||
| function toObject(val) { | ||
| if (val === null || val === undefined) { | ||
| throw new TypeError('Object.assign cannot be called with null or undefined'); | ||
| } | ||
| return Object(val); | ||
| } | ||
| function shouldUseNative() { | ||
| try { | ||
| if (!Object.assign) { | ||
| return false; | ||
| } | ||
| // Detect buggy property enumeration order in older V8 versions. | ||
| // https://bugs.chromium.org/p/v8/issues/detail?id=4118 | ||
| var test1 = new String('abc'); // eslint-disable-line no-new-wrappers | ||
| test1[5] = 'de'; | ||
| if (Object.getOwnPropertyNames(test1)[0] === '5') { | ||
| return false; | ||
| } | ||
| // https://bugs.chromium.org/p/v8/issues/detail?id=3056 | ||
| var test2 = {}; | ||
| for (var i = 0; i < 10; i++) { | ||
| test2['_' + String.fromCharCode(i)] = i; | ||
| } | ||
| var order2 = Object.getOwnPropertyNames(test2).map(function (n) { | ||
| return test2[n]; | ||
| }); | ||
| if (order2.join('') !== '0123456789') { | ||
| return false; | ||
| } | ||
| // https://bugs.chromium.org/p/v8/issues/detail?id=3056 | ||
| var test3 = {}; | ||
| 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { | ||
| test3[letter] = letter; | ||
| }); | ||
| if (Object.keys(Object.assign({}, test3)).join('') !== | ||
| 'abcdefghijklmnopqrst') { | ||
| return false; | ||
| } | ||
| return true; | ||
| } catch (err) { | ||
| // We don't expect any of the above to throw, but better to be safe. | ||
| return false; | ||
| } | ||
| } | ||
| var objectAssign = shouldUseNative() ? Object.assign : function (target, source) { | ||
| var from; | ||
| var to = toObject(target); | ||
| var symbols; | ||
| for (var s = 1; s < arguments.length; s++) { | ||
| from = Object(arguments[s]); | ||
| for (var key in from) { | ||
| if (hasOwnProperty.call(from, key)) { | ||
| to[key] = from[key]; | ||
| } | ||
| } | ||
| if (getOwnPropertySymbols) { | ||
| symbols = getOwnPropertySymbols(from); | ||
| for (var i = 0; i < symbols.length; i++) { | ||
| if (propIsEnumerable.call(from, symbols[i])) { | ||
| to[symbols[i]] = from[symbols[i]]; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return to; | ||
| }; | ||
| var component = /-?\d+(\.\d+)?%?/g; | ||
| function extractComponents(color) { | ||
| return color.match(component); | ||
| } | ||
| var extractComponents_1 = extractComponents; | ||
| function clamp(val, min, max) { | ||
| return Math.min(Math.max(val, min), max); | ||
| } | ||
| var clamp_1 = clamp; | ||
| function parseHslComponent(component, i) { | ||
| component = parseFloat(component); | ||
| switch(i) { | ||
| case 0: | ||
| return clamp_1(component, 0, 360); | ||
| case 1: | ||
| case 2: | ||
| return clamp_1(component, 0, 100); | ||
| case 3: | ||
| return clamp_1(component, 0, 1); | ||
| } | ||
| } | ||
| function hsl(color) { | ||
| return extractComponents_1(color).map(parseHslComponent); | ||
| } | ||
| var hsl_1 = hsl; | ||
| function expand(hex) { | ||
| var result = "#"; | ||
| for (var i = 1; i < hex.length; i++) { | ||
| var val = hex.charAt(i); | ||
| result += val + val; | ||
| } | ||
| return result; | ||
| } | ||
| function hex(hex) { | ||
| // #RGB or #RGBA | ||
| if(hex.length === 4 || hex.length === 5) { | ||
| hex = expand(hex); | ||
| } | ||
| var rgb = [ | ||
| parseInt(hex.substring(1,3), 16), | ||
| parseInt(hex.substring(3,5), 16), | ||
| parseInt(hex.substring(5,7), 16) | ||
| ]; | ||
| // #RRGGBBAA | ||
| if (hex.length === 9) { | ||
| var alpha = parseFloat((parseInt(hex.substring(7,9), 16) / 255).toFixed(2)); | ||
| rgb.push(alpha); | ||
| } | ||
| return rgb; | ||
| } | ||
| var hex_1 = hex; | ||
| function parseRgbComponent(component, i) { | ||
| if (i < 3) { | ||
| if (component.indexOf('%') != -1) { | ||
| return Math.round(255 * clamp_1(parseInt(component, 10), 0, 100)/100); | ||
| } else { | ||
| return clamp_1(parseInt(component, 10), 0, 255); | ||
| } | ||
| } else { | ||
| return clamp_1(parseFloat(component), 0, 1); | ||
| } | ||
| } | ||
| function rgb(color) { | ||
| return extractComponents_1(color).map(parseRgbComponent); | ||
| } | ||
| var rgb_1 = rgb; | ||
| function hsl2rgb(hsl) { | ||
| var h = hsl[0] / 360, | ||
| s = hsl[1] / 100, | ||
| l = hsl[2] / 100, | ||
| t1, t2, t3, rgb, val; | ||
| if (s == 0) { | ||
| val = l * 255; | ||
| return [val, val, val]; | ||
| } | ||
| if (l < 0.5) | ||
| t2 = l * (1 + s); | ||
| else | ||
| t2 = l + s - l * s; | ||
| t1 = 2 * l - t2; | ||
| rgb = [0, 0, 0]; | ||
| for (var i = 0; i < 3; i++) { | ||
| t3 = h + 1 / 3 * - (i - 1); | ||
| t3 < 0 && t3++; | ||
| t3 > 1 && t3--; | ||
| if (6 * t3 < 1) | ||
| val = t1 + (t2 - t1) * 6 * t3; | ||
| else if (2 * t3 < 1) | ||
| val = t2; | ||
| else if (3 * t3 < 2) | ||
| val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; | ||
| else | ||
| val = t1; | ||
| rgb[i] = val * 255; | ||
| } | ||
| return rgb; | ||
| } | ||
| var hsl2rgb_1 = hsl2rgb; | ||
| function hsl2rgbParse(color) { | ||
| var h = hsl_1(color); | ||
| var r = hsl2rgb_1(h); | ||
| // handle alpha since hsl2rgb doesn't know (or care!) about it | ||
| if(h.length === 4) { | ||
| r.push(h[3]); | ||
| } | ||
| return r; | ||
| } | ||
| var space2parser = { | ||
| "#" : hex_1, | ||
| "hsl" : hsl2rgbParse, | ||
| "rgb" : rgb_1 | ||
| }; | ||
| function parse(color) { | ||
| for(var scheme in space2parser) { | ||
| if(color.indexOf(scheme) === 0) { | ||
| return space2parser[scheme](color); | ||
| } | ||
| } | ||
| } | ||
| parse.rgb = rgb_1; | ||
| parse.hsl = hsl_1; | ||
| parse.hex = hex_1; | ||
| var parse_1 = parse; | ||
| function rgb2hsv(rgb) { | ||
| var r = rgb[0], | ||
| g = rgb[1], | ||
| b = rgb[2], | ||
| min = Math.min(r, g, b), | ||
| max = Math.max(r, g, b), | ||
| delta = max - min, | ||
| h, s, v; | ||
| if (max == 0) | ||
| s = 0; | ||
| else | ||
| s = (delta/max * 1000)/10; | ||
| if (max == min) | ||
| h = 0; | ||
| else if (r == max) | ||
| h = (g - b) / delta; | ||
| else if (g == max) | ||
| h = 2 + (b - r) / delta; | ||
| else if (b == max) | ||
| h = 4 + (r - g) / delta; | ||
| h = Math.min(h * 60, 360); | ||
| if (h < 0) | ||
| h += 360; | ||
| v = ((max / 255) * 1000) / 10; | ||
| return [h, s, v]; | ||
| } | ||
| var rgb2hsv_1 = rgb2hsv; | ||
| function componentToHex(c) { | ||
| var value = Math.round(clamp_1(c, 0, 255)); | ||
| var hex = value.toString(16); | ||
| return hex.length == 1 ? "0" + hex : hex; | ||
| } | ||
| function rgb2hex(rgb) { | ||
| var alpha = rgb.length === 4 ? componentToHex(rgb[3] * 255) : ""; | ||
| return "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]) + alpha; | ||
| } | ||
| var rgb2hex_1 = rgb2hex; | ||
| function hsv2hsl(hsv) { | ||
| var h = hsv[0], | ||
| s = hsv[1] / 100, | ||
| v = hsv[2] / 100, | ||
| sl, l; | ||
| l = (2 - s) * v; | ||
| sl = s * v; | ||
| sl /= (l <= 1) ? l : 2 - l; | ||
| sl = sl || 0; | ||
| l /= 2; | ||
| return [h, sl * 100, l * 100]; | ||
| } | ||
| var hsv2hsl_1 = hsv2hsl; | ||
| function hsv2rgb(hsv) { | ||
| var h = hsv[0] / 60, | ||
| s = hsv[1] / 100, | ||
| v = hsv[2] / 100, | ||
| hi = Math.floor(h) % 6; | ||
| var f = h - Math.floor(h), | ||
| p = 255 * v * (1 - s), | ||
| q = 255 * v * (1 - (s * f)), | ||
| t = 255 * v * (1 - (s * (1 - f))), | ||
| v = 255 * v; | ||
| switch(hi) { | ||
| case 0: | ||
| return [v, t, p]; | ||
| case 1: | ||
| return [q, v, p]; | ||
| case 2: | ||
| return [p, v, t]; | ||
| case 3: | ||
| return [p, q, v]; | ||
| case 4: | ||
| return [t, p, v]; | ||
| case 5: | ||
| return [v, p, q]; | ||
| } | ||
| } | ||
| var hsv2rgb_1 = hsv2rgb; | ||
| var toPrecision = function (num, precision) { | ||
| var p = precision | 0; | ||
| return p > 0 ? parseFloat(num.toFixed(p)) : num | ||
| }; | ||
| var VueCtrlComponent = { | ||
| name: 'v-ctrl', | ||
| abstract: true, | ||
| props: { | ||
| direction: { | ||
| type: String, | ||
| default: 'h', | ||
| validator: function validator (val) { | ||
| return ['v', 'h', 'vh', 'hv'].indexOf(val) > -1 | ||
| } | ||
| }, | ||
| throttle: { | ||
| type: Number, | ||
| default: 80 | ||
| }, | ||
| precision: { | ||
| type: Number | ||
| } | ||
| }, | ||
| methods: { | ||
| msdown: function msdown (e) { | ||
| e.preventDefault(); | ||
| document.addEventListener('mousemove', this.msmove); | ||
| document.addEventListener('mouseup', this.msup); | ||
| this.next(e); | ||
| }, | ||
| msmove: function msmove (e) { | ||
| e.preventDefault(); | ||
| this.next(e); | ||
| }, | ||
| msup: function msup (e) { | ||
| this.next(e); | ||
| document.removeEventListener('mousemove', this.msmove); | ||
| document.removeEventListener('mouseup', this.msup); | ||
| }, | ||
| notify: function notify (val) { | ||
| if (isEqual(this.memo, val) === false) { | ||
| this.memo = val; | ||
| this.$emit('change', val); | ||
| } | ||
| }, | ||
| next: function next (ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var clientX = ref.clientX; if ( clientX === void 0 ) clientX = 0; | ||
| var clientY = ref.clientY; if ( clientY === void 0 ) clientY = 0; | ||
| var ref$1 = this; | ||
| var direction = ref$1.direction; | ||
| var adjust = ref$1.adjust; | ||
| var rect = this.$el.getBoundingClientRect(); | ||
| var left = rect.left; | ||
| var width = rect.width; | ||
| var deltaX = clientX - left; | ||
| var x = adjust(deltaX / width); | ||
| if (direction === 'h') { | ||
| return this.notify(x) | ||
| } | ||
| var top = rect.top; | ||
| var height = rect.height; | ||
| var deltaY = clientY - top; | ||
| var y = adjust(deltaY / height); | ||
| if (direction === 'v') { | ||
| return this.notify(y) | ||
| } | ||
| // both direction | ||
| this.notify([x, y]); | ||
| }, | ||
| adjust: function adjust (num) { | ||
| return toPrecision(clamp$1(num, 0, 1), this.precision) | ||
| } | ||
| }, | ||
| render: function render (h) { | ||
| return this.$slots.default[0] | ||
| }, | ||
| created: function created () { | ||
| var ref = this; | ||
| var msdown = ref.msdown; | ||
| var msmove = ref.msmove; | ||
| this.msdown = msdown.bind(this); | ||
| this.msmove = throttle(msmove.bind(this), this.throttle); | ||
| this.memo = null; | ||
| }, | ||
| mounted: function mounted () { | ||
| this.$el.addEventListener('mousedown', this.msdown); | ||
| }, | ||
| destroyed: function destroyed () { | ||
| this.$el.removeEventListener('mousedown', this.msdown); | ||
| }, | ||
| install: function install () { | ||
| Vue.component(VueCtrlComponent.name, VueCtrlComponent); | ||
| } | ||
| }; | ||
| if (typeof window !== 'undefined' && window.Vue) { | ||
| Vue.use(VueCtrlComponent); | ||
| } | ||
| var index = { VueCtrlComponent: VueCtrlComponent }; | ||
| // | ||
| const colorModes = Object.freeze({ | ||
| rgba: ['r', 'g', 'b', 'a'], | ||
| hsla: ['h', 's', 'l', 'a'], | ||
| hex: ['hex'] | ||
| }); | ||
| function toPercent (n, precision = 3) { | ||
| // eslint-disable-next-line | ||
| const num = (n * 100).toPrecision(precision | 0); | ||
| return `${num}%` | ||
| } | ||
| function getColorType (color) { | ||
| if (color[0] === '#') { | ||
| return 'hex' | ||
| } | ||
| if (color.indexOf('rgb') === 0) { | ||
| return 'rgba' | ||
| } | ||
| if (color.indexOf('hsl') === 0) { | ||
| return 'hsla' | ||
| } | ||
| invariant_1(false, `${color} is not valid color value!`); | ||
| } | ||
| function simplifyHex (val) { | ||
| return val.replace(/#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3([0-9a-f]?)\4$/, '#$1$2$3$4') | ||
| } | ||
| var script = { | ||
| name: 'ColorPicker', | ||
| props: { | ||
| value: { | ||
| type: String, | ||
| default: '#ff0000', | ||
| }, | ||
| withSuggestions: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| }, | ||
| components: { | ||
| 'v-ctrl': index.VueCtrlComponent | ||
| }, | ||
| data () { | ||
| const { value } = this; | ||
| const commonNumber = { | ||
| type: 'number', | ||
| maxlength: 3, | ||
| }; | ||
| const percentValue = { | ||
| type: 'string', | ||
| maxlength: 4 | ||
| }; | ||
| return { | ||
| ...this.digestProp(value), | ||
| suggestions: [], | ||
| currentMode: getColorType(value), | ||
| colorModes, | ||
| colorModel: { | ||
| hex: '', | ||
| r: '', | ||
| g: '', | ||
| b: '', | ||
| h: '', | ||
| s: '', | ||
| l: '', | ||
| a: '' | ||
| }, | ||
| constrains: { | ||
| r: commonNumber, | ||
| g: commonNumber, | ||
| b: commonNumber, | ||
| h: commonNumber, | ||
| s: percentValue, | ||
| l: percentValue, | ||
| a: { | ||
| type: 'number', | ||
| maxlength: 4 | ||
| }, | ||
| hex: { | ||
| type: 'string', | ||
| maxlength: 9 | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| watch: { | ||
| value: { | ||
| immediate: true, | ||
| handler (val, oldVal) { | ||
| if (val === oldVal) return | ||
| objectAssign(this, this.digestProp(val)); | ||
| } | ||
| }, | ||
| }, | ||
| computed: { | ||
| hsva () { | ||
| const { hue, alpha, saturation: { x, y } } = this; | ||
| return [ | ||
| hue * 360, | ||
| x * 100, | ||
| (1 - y) * 100, | ||
| alpha | ||
| ] | ||
| }, | ||
| rgba () { | ||
| const { alpha, hsva } = this; | ||
| const [r, g, b] = hsv2rgb_1(hsva); | ||
| return [ | ||
| Math.round(r), | ||
| Math.round(g), | ||
| Math.round(b), | ||
| alpha | ||
| ] | ||
| }, | ||
| hsla () { | ||
| const { alpha, hsva } = this; | ||
| const [h, s, l] = hsv2hsl_1(hsva); | ||
| return [ | ||
| Math.round(h), | ||
| `${Math.round(s)}%`, | ||
| `${Math.round(l)}%`, | ||
| alpha | ||
| ] | ||
| }, | ||
| hex () { | ||
| return rgb2hex_1(this.rgba) | ||
| }, | ||
| previewBorderColor () { | ||
| const [r, g, b] = this.rgba; | ||
| if ((r + g + b) / 3 > 235) { | ||
| return `rgba(160,160,160,0.8)` | ||
| } | ||
| return 'transparent' | ||
| }, | ||
| styles () { | ||
| const { rgba, alpha, hue, saturation } = this; | ||
| const strRGB = rgba.slice(0, 3).join(', '); | ||
| const strHueRGB = hsl2rgb_1([hue * 360, 100, 50]) | ||
| .map(v => Math.round(v)) | ||
| .join(', '); | ||
| return { | ||
| preview: { | ||
| backgroundColor: `rgba(${rgba.join(', ')})`, | ||
| borderColor: this.previewBorderColor | ||
| }, | ||
| saturationPane: { | ||
| backgroundColor: `rgb(${strHueRGB})` | ||
| }, | ||
| saturationThumb: { | ||
| left: toPercent(saturation.x), | ||
| top: toPercent(saturation.y) | ||
| }, | ||
| alphaTrack: { | ||
| backgroundImage: `linear-gradient(to right, ` + | ||
| `rgba(${strRGB}, 0) 0%, rgb(${strRGB}) 100%)` | ||
| }, | ||
| alphaThumb: { | ||
| left: toPercent(alpha) | ||
| }, | ||
| hueThumb: { | ||
| left: toPercent(1 - hue) | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| digestProp(val) { | ||
| const rgba = parse_1(val); | ||
| const alpha = rgba[3] == null ? 1 : rgba[3]; | ||
| const [hue, saturation, value] = rgb2hsv_1(rgba); | ||
| // format of alpha: `.2f` | ||
| // according to Chrome DevTool | ||
| const _alpha = parseFloat(alpha.toFixed(2)); | ||
| return { | ||
| alpha: _alpha, | ||
| hue: hue / 360, | ||
| saturation: { | ||
| x: saturation / 100, | ||
| y: 1 - value / 100 | ||
| } | ||
| } | ||
| }, | ||
| onSaturationChange ([x, y]) { | ||
| this.saturation = { x, y }; | ||
| this.emitChange(); | ||
| }, | ||
| onHueChange (e) { | ||
| this.hue = 1 - e; | ||
| this.emitChange(); | ||
| }, | ||
| onAlphaChange (e) { | ||
| // format of alpha: `.2f` | ||
| // according to Chrome DevTool | ||
| this.alpha = parseFloat(e.toFixed(2)); | ||
| this.emitChange(); | ||
| }, | ||
| emitChange () { | ||
| const { hex, rgba, hsla, currentMode } = this; | ||
| this.updateColorModel(); | ||
| if (currentMode === 'hex') { | ||
| this.updateSuggestions(hex); | ||
| this.$emit('input', hex); | ||
| } else if (currentMode === 'hsla') { | ||
| const color = `hsla(${hsla.join(',')})`; | ||
| this.updateSuggestions(color); | ||
| this.$emit('input', color); | ||
| } else if (currentMode === 'rgba') { | ||
| const color = `rgba(${rgba.join(',')})`; | ||
| this.updateSuggestions(color); | ||
| this.$emit('input', color); | ||
| } | ||
| }, | ||
| onClickColor(color) { | ||
| this.$emit('input', color); | ||
| }, | ||
| handleInput (type, event) { | ||
| const { currentMode, colorModel } = this; | ||
| const { target: { value } } = event; | ||
| let num = Number(value); | ||
| let changed = false; | ||
| switch (type) { | ||
| case 'a': | ||
| if (colorModel[type] !== num && !isNaN(num)) { | ||
| colorModel[type] = clamp$1(num, 0, 1); | ||
| changed = true; | ||
| } | ||
| break | ||
| case 'r': | ||
| case 'g': | ||
| case 'b': | ||
| if (colorModel[type] !== num && !isNaN(num)) { | ||
| colorModel[type] = clamp$1(num, 0, 255) | 0; | ||
| changed = true; | ||
| } | ||
| break | ||
| case 'h': | ||
| if (colorModel[type] !== num && !isNaN(num)) { | ||
| colorModel[type] = clamp$1(num, 0, 360) | 0; | ||
| changed = true; | ||
| } | ||
| break | ||
| case 's': | ||
| case 'l': | ||
| if (value.slice(-1) === '%' && colorModel[type] !== value) { | ||
| num = parseFloat(value); | ||
| colorModel[type] = `${ clamp$1(num, 0, 360) | 0 }%`; | ||
| changed = true; | ||
| } | ||
| break | ||
| case 'hex': | ||
| if (value[0] === '#') { | ||
| if (colorModel[type] !== value && parse_1(value).every(i => !isNaN(i))) { | ||
| colorModel[type] = simplifyHex(value); | ||
| changed = true; | ||
| } | ||
| } | ||
| break | ||
| } | ||
| if (!changed) return | ||
| const { h, s, l, r, g, b, a, hex } = colorModel; | ||
| let literal = hex; | ||
| if (currentMode === 'rgba') { | ||
| literal = `rgba(${ [r, g, b, a] })`; | ||
| } else if (currentMode === 'hsla') { | ||
| literal = `hsla(${ [h, s, l, a] })`; | ||
| } | ||
| objectAssign(this, this.digestProp(literal)); | ||
| this.emitChange(); | ||
| }, | ||
| updateColorModel() { | ||
| const { hsla, rgba, hex, alpha } = this; | ||
| const [h, s, l] = hsla; | ||
| const [r, g, b] = rgba; | ||
| const hexVal = simplifyHex( | ||
| alpha === 1 ? hex.slice(0, 7) : hex | ||
| ); | ||
| objectAssign(this.colorModel, { | ||
| r, g, b, h, s, l, | ||
| a: alpha, | ||
| hex: hexVal, | ||
| }); | ||
| }, | ||
| loadSuggestions() { | ||
| const suggestions = localStorage.getItem('V_COLOR_PICKER_SUGGESTIONS'); | ||
| if (!suggestions) return [] | ||
| this.suggestions = JSON.parse(suggestions); | ||
| }, | ||
| updateSuggestions(color) { | ||
| if (this.suggestions.includes(color)) return | ||
| let updatedSuggestions; | ||
| if (this.suggestions.length < 7) { | ||
| updatedSuggestions = this.suggestions.concat(color); | ||
| } else { | ||
| updatedSuggestions = this.suggestions.slice(1, 7).concat(color); | ||
| } | ||
| this.suggestions = updatedSuggestions; | ||
| localStorage.setItem('V_COLOR_PICKER_SUGGESTIONS', JSON.stringify(updatedSuggestions)); | ||
| } | ||
| }, | ||
| created () { | ||
| this.handleInput = debounce(this.handleInput.bind(this), 250); | ||
| this.emitChange = debounce(this.emitChange.bind(this), 250); | ||
| this.updateColorModel(); | ||
| this.loadSuggestions(); | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } | ||
| // Vue.extend constructor export interop. | ||
| const options = typeof script === 'function' ? script.options : script; | ||
| // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; | ||
| // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } | ||
| // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| let hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function (context) { | ||
| // 2.3 injection | ||
| context = | ||
| context || // cached call | ||
| (this.$vnode && this.$vnode.ssrContext) || // stateful | ||
| (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } | ||
| // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } | ||
| // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; | ||
| // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } | ||
| else if (style) { | ||
| hook = shadowMode | ||
| ? function (context) { | ||
| style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); | ||
| } | ||
| : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| const originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } | ||
| else { | ||
| // inject component registration as beforeCreate hook | ||
| const existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| const isOldIE = typeof navigator !== 'undefined' && | ||
| /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); | ||
| function createInjector(context) { | ||
| return (id, style) => addStyle(id, style); | ||
| } | ||
| let HEAD; | ||
| const styles = {}; | ||
| function addStyle(id, css) { | ||
| const group = isOldIE ? css.media || 'default' : id; | ||
| const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); | ||
| if (!style.ids.has(id)) { | ||
| style.ids.add(id); | ||
| let code = css.source; | ||
| if (css.map) { | ||
| // https://developer.chrome.com/devtools/docs/javascript-debugging | ||
| // this makes source maps inside style tags work properly in Chrome | ||
| code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; | ||
| // http://stackoverflow.com/a/26603875 | ||
| code += | ||
| '\n/*# sourceMappingURL=data:application/json;base64,' + | ||
| btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + | ||
| ' */'; | ||
| } | ||
| if (!style.element) { | ||
| style.element = document.createElement('style'); | ||
| style.element.type = 'text/css'; | ||
| if (css.media) | ||
| style.element.setAttribute('media', css.media); | ||
| if (HEAD === undefined) { | ||
| HEAD = document.head || document.getElementsByTagName('head')[0]; | ||
| } | ||
| HEAD.appendChild(style.element); | ||
| } | ||
| if ('styleSheet' in style.element) { | ||
| style.styles.push(code); | ||
| style.element.styleSheet.cssText = style.styles | ||
| .filter(Boolean) | ||
| .join('\n'); | ||
| } | ||
| else { | ||
| const index = style.ids.size - 1; | ||
| const textNode = document.createTextNode(code); | ||
| const nodes = style.element.childNodes; | ||
| if (nodes[index]) | ||
| style.element.removeChild(nodes[index]); | ||
| if (nodes.length) | ||
| style.element.insertBefore(textNode, nodes[index]); | ||
| else | ||
| style.element.appendChild(textNode); | ||
| } | ||
| } | ||
| } | ||
| /* script */ | ||
| const __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"wrapper"},[_c('v-ctrl',{attrs:{"direction":"vh","precision":2,"throttle":80},on:{"change":_vm.onSaturationChange}},[_c('div',{staticClass:"saturation"},[_c('div',{staticClass:"mask hue",style:(_vm.styles.saturationPane)}),_vm._v(" "),_c('div',{staticClass:"mask white"}),_vm._v(" "),_c('div',{staticClass:"mask black"}),_vm._v(" "),_c('p',{staticClass:"thumb",style:(_vm.styles.saturationThumb)})])]),_vm._v(" "),_c('section',{staticClass:"controls"},[_c('section',{staticClass:"sliders"},[_c('v-ctrl',{attrs:{"direction":"h","precision":2,"throttle":80},on:{"change":_vm.onHueChange}},[_c('div',{staticClass:"slider bar hue"},[_c('div',{staticClass:"thumb",style:(_vm.styles.hueThumb)})])]),_vm._v(" "),_c('v-ctrl',{attrs:{"direction":"h","precision":2,"throttle":80},on:{"change":_vm.onAlphaChange}},[_c('div',{staticClass:"slider alpha"},[_c('div',{staticClass:"thumb",style:(_vm.styles.alphaThumb)}),_vm._v(" "),_c('div',{staticClass:"bar",style:(_vm.styles.alphaTrack)})])])],1),_vm._v(" "),_c('section',{staticClass:"modes"},[_c('select',{directives:[{name:"model",rawName:"v-model",value:(_vm.currentMode),expression:"currentMode"}],staticClass:"mode-input select",on:{"change":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return val}); _vm.currentMode=$event.target.multiple ? $$selectedVal : $$selectedVal[0];}}},_vm._l((_vm.colorModes),function(_,key){return _c('option',{key:key,domProps:{"value":key}},[_vm._v("\n "+_vm._s(key)+"\n ")])}),0),_vm._v(" "),_vm._l((_vm.colorModes[_vm.currentMode]),function(k){return _c('input',{key:k,staticClass:"mode-input",attrs:{"type":_vm.constrains[k].type,"maxlength":_vm.constrains[k].maxlength},domProps:{"value":_vm.colorModel[k]},on:{"input":function($event){return _vm.handleInput(k, $event)}}})})],2)]),_vm._v(" "),(_vm.withSuggestions && _vm.suggestions.length > 0)?_c('section',{staticClass:"suggestions"},[_c('p',[_vm._v("Previously used colors")]),_vm._v(" "),_c('ul',_vm._l((_vm.suggestions),function(color){return _c('li',{key:color},[_c('button',{staticClass:"suggestion",style:({ backgroundColor: color }),attrs:{"type":"button"},on:{"click":function($event){return _vm.onClickColor(color)}}})])}),0)]):_vm._e()],1)}; | ||
| var __vue_staticRenderFns__ = []; | ||
| /* style */ | ||
| const __vue_inject_styles__ = function (inject) { | ||
| if (!inject) return | ||
| inject("data-v-a803f7f4_0", { source: ".wrapper[data-v-a803f7f4]{width:260px;margin:0;background:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);user-select:none}.slider[data-v-a803f7f4]{position:relative;margin-bottom:16px}.slider.hue[data-v-a803f7f4]{background:linear-gradient(-90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.slider.alpha[data-v-a803f7f4]{margin-top:8px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center}.bar[data-v-a803f7f4]{height:8px;border-radius:4px}.controls[data-v-a803f7f4]{padding:20px 16px;padding-bottom:16px}.modes[data-v-a803f7f4]{display:flex;align-items:center}.mode-input[data-v-a803f7f4]{width:100%;appearance:none;-webkit-appearance:none;font-size:12px;line-height:1.5;text-align:center;text-transform:uppercase;border:none;padding:0;font-family:Inter,Helvetica,Arial,sans-serif;color:#1a202c}.mode-input.select[data-v-a803f7f4]{flex:0 0 42px;margin-right:10px;background-repeat:no-repeat;background-size:6px;background-position:center right;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxLjQ3MzM5TDQgNC41MjY2Nkw3IDEuNDczMzkiIHN0cm9rZT0iIzlFQjVDOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=)}.thumb[data-v-a803f7f4]{position:absolute;width:12px;height:12px;top:0;border-radius:50%;margin-top:-1px;transform:translateX(-50%);background-color:#f8f8f8;box-shadow:0 1px 4px 0 rgba(0,0,0,.368627);cursor:default}.saturation[data-v-a803f7f4]{position:relative;width:100%;padding-bottom:55%;overflow:hidden}.saturation>div[data-v-a803f7f4]{position:absolute;top:0;left:0;right:0;bottom:0;margin:0}.saturation>.thumb[data-v-a803f7f4]{background-color:transparent;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4)}.mask.white[data-v-a803f7f4]{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.mask.black[data-v-a803f7f4]{background:linear-gradient(0deg,#000,transparent)}.suggestions[data-v-a803f7f4]{border-top:1px solid #e2e8f0;padding:20px 16px;padding-top:16px}.suggestions p[data-v-a803f7f4]{margin-top:0;margin-bottom:10px;font-family:Inter,Helvetica,Arial,sans-serif;font-size:12px;line-height:1.5;color:#1a202c}.suggestions ul[data-v-a803f7f4]{display:flex;align-items:center;margin:0;padding:0;list-style:none}.suggestion[data-v-a803f7f4]{width:24px;height:24px;margin:4px;border:1px solid #e2e8f0;border-radius:50%}", map: undefined, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| const __vue_scope_id__ = "data-v-a803f7f4"; | ||
| /* module identifier */ | ||
| const __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| const __vue_is_functional_template__ = false; | ||
| /* style inject SSR */ | ||
| /* style inject shadow dom */ | ||
| const __vue_component__ = /*#__PURE__*/normalizeComponent( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| false, | ||
| createInjector, | ||
| undefined, | ||
| undefined | ||
| ); | ||
| __vue_component__.install = Vue => { | ||
| Vue.config.devtools = "production" !== 'production'; | ||
| Vue.component(__vue_component__.name, __vue_component__); | ||
| }; | ||
| export default __vue_component__; | ||
| import t from"lodash/clamp";import e from"lodash/debounce";import a from"lodash/isEqual";import n from"lodash/throttle";var r=function(t,e,a,n,r,i,s,o){if(!t){var l;if(void 0===e)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var d=[a,n,r,i,s,o],u=0;(l=new Error(e.replace(/%s/g,(function(){return d[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}},i=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function l(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},a=0;a<10;a++)e["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(e).map((function(t){return e[t]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(t){n[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var a,n,r=l(t),d=1;d<arguments.length;d++){for(var u in a=Object(arguments[d]))s.call(a,u)&&(r[u]=a[u]);if(i){n=i(a);for(var c=0;c<n.length;c++)o.call(a,n[c])&&(r[n[c]]=a[n[c]])}}return r},u=/-?\d+(\.\d+)?%?/g;var c=function(t){return t.match(u)};var h=function(t,e,a){return Math.min(Math.max(t,e),a)};function p(t,e){switch(t=parseFloat(t),e){case 0:return h(t,0,360);case 1:case 2:return h(t,0,100);case 3:return h(t,0,1)}}var f=function(t){return c(t).map(p)};var g=function(t){4!==t.length&&5!==t.length||(t=function(t){for(var e="#",a=1;a<t.length;a++){var n=t.charAt(a);e+=n+n}return e}(t));var e=[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)];if(9===t.length){var a=parseFloat((parseInt(t.substring(7,9),16)/255).toFixed(2));e.push(a)}return e};function m(t,e){return e<3?-1!=t.indexOf("%")?Math.round(255*h(parseInt(t,10),0,100)/100):h(parseInt(t,10),0,255):h(parseFloat(t),0,1)}var v=function(t){return c(t).map(m)};var b=function(t){var e,a,n,r,i,s=t[0]/360,o=t[1]/100,l=t[2]/100;if(0==o)return[i=255*l,i,i];e=2*l-(a=l<.5?l*(1+o):l+o-l*o),r=[0,0,0];for(var d=0;d<3;d++)(n=s+1/3*-(d-1))<0&&n++,n>1&&n--,i=6*n<1?e+6*(a-e)*n:2*n<1?a:3*n<2?e+(a-e)*(2/3-n)*6:e,r[d]=255*i;return r};var x={"#":g,hsl:function(t){var e=f(t),a=b(e);return 4===e.length&&a.push(e[3]),a},rgb:v};function y(t){for(var e in x)if(0===t.indexOf(e))return x[e](t)}y.rgb=v,y.hsl=f,y.hex=g;var C=y;var w=function(t){var e,a,n=t[0],r=t[1],i=t[2],s=Math.min(n,r,i),o=Math.max(n,r,i),l=o-s;return a=0==o?0:l/o*1e3/10,o==s?e=0:n==o?e=(r-i)/l:r==o?e=2+(i-n)/l:i==o&&(e=4+(n-r)/l),(e=Math.min(60*e,360))<0&&(e+=360),[e,a,o/255*1e3/10]};function k(t){var e=Math.round(h(t,0,255)).toString(16);return 1==e.length?"0"+e:e}var _=function(t){var e=4===t.length?k(255*t[3]):"";return"#"+k(t[0])+k(t[1])+k(t[2])+e};var O=function(t){var e,a,n=t[0],r=t[1]/100,i=t[2]/100;return e=r*i,[n,100*(e=(e/=(a=(2-r)*i)<=1?a:2-a)||0),100*(a/=2)]};var A=function(t){var e=t[0]/60,a=t[1]/100,n=t[2]/100,r=Math.floor(e)%6,i=e-Math.floor(e),s=255*n*(1-a),o=255*n*(1-a*i),l=255*n*(1-a*(1-i));switch(n*=255,r){case 0:return[n,l,s];case 1:return[o,n,s];case 2:return[s,n,l];case 3:return[s,o,n];case 4:return[l,s,n];case 5:return[n,s,o]}},M={name:"v-ctrl",abstract:!0,props:{direction:{type:String,default:"h",validator:function(t){return["v","h","vh","hv"].indexOf(t)>-1}},throttle:{type:Number,default:80},precision:{type:Number}},methods:{msdown:function(t){t.preventDefault(),document.addEventListener("mousemove",this.msmove),document.addEventListener("mouseup",this.msup),this.next(t)},msmove:function(t){t.preventDefault(),this.next(t)},msup:function(t){this.next(t),document.removeEventListener("mousemove",this.msmove),document.removeEventListener("mouseup",this.msup)},notify:function(t){!1===a(this.memo,t)&&(this.memo=t,this.$emit("change",t))},next:function(t){void 0===t&&(t={});var e=t.clientX;void 0===e&&(e=0);var a=t.clientY;void 0===a&&(a=0);var n=this.direction,r=this.adjust,i=this.$el.getBoundingClientRect(),s=r((e-i.left)/i.width);if("h"===n)return this.notify(s);var o=r((a-i.top)/i.height);if("v"===n)return this.notify(o);this.notify([s,o])},adjust:function(e){return function(t,e){var a=0|e;return a>0?parseFloat(t.toFixed(a)):t}(t(e,0,1),this.precision)}},render:function(t){return this.$slots.default[0]},created:function(){var t=this.msdown,e=this.msmove;this.msdown=t.bind(this),this.msmove=n(e.bind(this),this.throttle),this.memo=null},mounted:function(){this.$el.addEventListener("mousedown",this.msdown)},destroyed:function(){this.$el.removeEventListener("mousedown",this.msdown)},install:function(){Vue.component(M.name,M)}};"undefined"!=typeof window&&window.Vue&&Vue.use(M);var I={VueCtrlComponent:M};const S=Object.freeze({rgba:["r","g","b","a"],hsla:["h","s","l","a"],hex:["hex"]});function T(t,e=3){return(100*t).toPrecision(0|e)+"%"}function P(t){return t.replace(/#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3([0-9a-f]?)\4$/,"#$1$2$3$4")}var N={name:"VColorPicker",props:{value:{type:String,default:"#ff0000"},withSuggestions:{type:Boolean,default:!0}},components:{"v-ctrl":I.VueCtrlComponent},data(){const{value:t}=this,e={type:"number",maxlength:3},a={type:"string",maxlength:4};return{...this.digestProp(t),suggestions:[],currentMode:(n=t,"#"===n[0]?"hex":0===n.indexOf("rgb")?"rgba":0===n.indexOf("hsl")?"hsla":void r(!1,n+" is not valid color value!")),colorModes:S,colorModel:{hex:"",r:"",g:"",b:"",h:"",s:"",l:"",a:""},constrains:{r:e,g:e,b:e,h:e,s:a,l:a,a:{type:"number",maxlength:4},hex:{type:"string",maxlength:9}}};var n},watch:{value:{immediate:!0,handler(t,e){t!==e&&d(this,this.digestProp(t))}}},computed:{hsva(){const{hue:t,alpha:e,saturation:{x:a,y:n}}=this;return[360*t,100*a,100*(1-n),e]},rgba(){const{alpha:t,hsva:e}=this,[a,n,r]=A(e);return[Math.round(a),Math.round(n),Math.round(r),t]},hsla(){const{alpha:t,hsva:e}=this,[a,n,r]=O(e);return[Math.round(a),Math.round(n)+"%",Math.round(r)+"%",t]},hex(){return _(this.rgba)},previewBorderColor(){const[t,e,a]=this.rgba;return(t+e+a)/3>235?"rgba(160,160,160,0.8)":"transparent"},styles(){const{rgba:t,alpha:e,hue:a,saturation:n}=this,r=t.slice(0,3).join(", "),i=b([360*a,100,50]).map((t=>Math.round(t))).join(", ");return{preview:{backgroundColor:`rgba(${t.join(", ")})`,borderColor:this.previewBorderColor},saturationPane:{backgroundColor:`rgb(${i})`},saturationThumb:{left:T(n.x),top:T(n.y)},alphaTrack:{backgroundImage:`linear-gradient(to right, rgba(${r}, 0) 0%, rgb(${r}) 100%)`},alphaThumb:{left:T(e)},hueThumb:{left:T(1-a)}}}},methods:{digestProp(t){const e=C(t),a=null==e[3]?1:e[3],[n,r,i]=w(e);return{alpha:parseFloat(a.toFixed(2)),hue:n/360,saturation:{x:r/100,y:1-i/100}}},onSaturationChange([t,e]){this.saturation={x:t,y:e},this.emitChange()},onHueChange(t){this.hue=1-t,this.emitChange()},onAlphaChange(t){this.alpha=parseFloat(t.toFixed(2)),this.emitChange()},emitChange(){const{hex:t,rgba:e,hsla:a,currentMode:n}=this;if(this.updateColorModel(),"hex"===n)this.updateSuggestions(t),this.$emit("input",t);else if("hsla"===n){const t=`hsla(${a.join(",")})`;this.updateSuggestions(t),this.$emit("input",t)}else if("rgba"===n){const t=`rgba(${e.join(",")})`;this.updateSuggestions(t),this.$emit("input",t)}},onClickColor(t){this.$emit("input",t)},handleInput(e,a){const{currentMode:n,colorModel:r}=this,{target:{value:i}}=a;let s=Number(i),o=!1;switch(e){case"a":r[e]===s||isNaN(s)||(r[e]=t(s,0,1),o=!0);break;case"r":case"g":case"b":r[e]===s||isNaN(s)||(r[e]=0|t(s,0,255),o=!0);break;case"h":r[e]===s||isNaN(s)||(r[e]=0|t(s,0,360),o=!0);break;case"s":case"l":"%"===i.slice(-1)&&r[e]!==i&&(s=parseFloat(i),r[e]=(0|t(s,0,360))+"%",o=!0);break;case"hex":"#"===i[0]&&r[e]!==i&&C(i).every((t=>!isNaN(t)))&&(r[e]=P(i),o=!0)}if(!o)return;const{h:l,s:u,l:c,r:h,g:p,b:f,a:g,hex:m}=r;let v=m;"rgba"===n?v=`rgba(${[h,p,f,g]})`:"hsla"===n&&(v=`hsla(${[l,u,c,g]})`),d(this,this.digestProp(v)),this.emitChange()},updateColorModel(){const{hsla:t,rgba:e,hex:a,alpha:n}=this,[r,i,s]=t,[o,l,u]=e,c=P(1===n?a.slice(0,7):a);d(this.colorModel,{r:o,g:l,b:u,h:r,s:i,l:s,a:n,hex:c})},loadSuggestions(){const t=localStorage.getItem("V_COLOR_PICKER_SUGGESTIONS");if(!t)return[];this.suggestions=JSON.parse(t)},updateSuggestions(t){if(this.suggestions.includes(t))return;let e;e=this.suggestions.length<7?this.suggestions.concat(t):this.suggestions.slice(1,7).concat(t),this.suggestions=e,localStorage.setItem("V_COLOR_PICKER_SUGGESTIONS",JSON.stringify(e))}},created(){this.handleInput=e(this.handleInput.bind(this),250),this.emitChange=e(this.emitChange.bind(this),250),this.updateColorModel(),this.loadSuggestions()}};function j(t,e,a,n,r,i,s,o,l,d){"boolean"!=typeof s&&(l=o,o=s,s=!1);const u="function"==typeof a?a.options:a;let c;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,r&&(u.functional=!0)),n&&(u._scopeId=n),i?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(i)},u._ssrRegister=c):e&&(c=s?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),c)if(u.functional){const t=u.render;u.render=function(e,a){return c.call(a),t(e,a)}}else{const t=u.beforeCreate;u.beforeCreate=t?[].concat(t,c):[c]}return a}const E="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function $(t){return(t,e)=>function(t,e){const a=E?e.media||"default":t,n=B[a]||(B[a]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);let a=e.source;if(e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",e.media&&n.element.setAttribute("media",e.media),void 0===R&&(R=document.head||document.getElementsByTagName("head")[0]),R.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(a),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const t=n.ids.size-1,e=document.createTextNode(a),r=n.element.childNodes;r[t]&&n.element.removeChild(r[t]),r.length?n.element.insertBefore(e,r[t]):n.element.appendChild(e)}}}(t,e)}let R;const B={};const V=j({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"wrapper"},[a("v-ctrl",{attrs:{direction:"vh",precision:2,throttle:80},on:{change:t.onSaturationChange}},[a("div",{staticClass:"saturation"},[a("div",{staticClass:"mask hue",style:t.styles.saturationPane}),t._v(" "),a("div",{staticClass:"mask white"}),t._v(" "),a("div",{staticClass:"mask black"}),t._v(" "),a("p",{staticClass:"thumb",style:t.styles.saturationThumb})])]),t._v(" "),a("section",{staticClass:"controls"},[a("section",{staticClass:"sliders"},[a("v-ctrl",{attrs:{direction:"h",precision:2,throttle:80},on:{change:t.onHueChange}},[a("div",{staticClass:"slider bar hue"},[a("div",{staticClass:"thumb",style:t.styles.hueThumb})])]),t._v(" "),a("v-ctrl",{attrs:{direction:"h",precision:2,throttle:80},on:{change:t.onAlphaChange}},[a("div",{staticClass:"slider alpha"},[a("div",{staticClass:"thumb",style:t.styles.alphaThumb}),t._v(" "),a("div",{staticClass:"bar",style:t.styles.alphaTrack})])])],1),t._v(" "),a("section",{staticClass:"modes"},[a("select",{directives:[{name:"model",rawName:"v-model",value:t.currentMode,expression:"currentMode"}],staticClass:"mode-input select",on:{change:function(e){var a=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){return"_value"in t?t._value:t.value}));t.currentMode=e.target.multiple?a:a[0]}}},t._l(t.colorModes,(function(e,n){return a("option",{key:n,domProps:{value:n}},[t._v("\n "+t._s(n)+"\n ")])})),0),t._v(" "),t._l(t.colorModes[t.currentMode],(function(e){return a("input",{key:e,staticClass:"mode-input",attrs:{type:t.constrains[e].type,maxlength:t.constrains[e].maxlength},domProps:{value:t.colorModel[e]},on:{input:function(a){return t.handleInput(e,a)}}})}))],2)]),t._v(" "),t.withSuggestions&&t.suggestions.length>0?a("section",{staticClass:"suggestions"},[a("p",[t._v("Previously used colors")]),t._v(" "),a("ul",t._l(t.suggestions,(function(e){return a("li",{key:e},[a("button",{staticClass:"suggestion",style:{backgroundColor:e},attrs:{type:"button"},on:{click:function(a){return t.onClickColor(e)}}})])})),0)]):t._e()],1)},staticRenderFns:[]},(function(t){t&&t("data-v-5afd4161_0",{source:".wrapper[data-v-5afd4161]{width:260px;margin:0;background:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);user-select:none}.slider[data-v-5afd4161]{position:relative;margin-bottom:16px}.slider.hue[data-v-5afd4161]{background:linear-gradient(-90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.slider.alpha[data-v-5afd4161]{margin-top:8px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center}.bar[data-v-5afd4161]{height:8px;border-radius:4px}.controls[data-v-5afd4161]{padding:20px 16px;padding-bottom:16px}.modes[data-v-5afd4161]{display:flex;align-items:center}.mode-input[data-v-5afd4161]{width:100%;appearance:none;-webkit-appearance:none;font-size:12px;line-height:1.5;text-align:center;text-transform:uppercase;border:none;padding:0;font-family:Inter,Helvetica,Arial,sans-serif;color:#1a202c}.mode-input.select[data-v-5afd4161]{flex:0 0 42px;margin-right:10px;background-repeat:no-repeat;background-size:6px;background-position:center right;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxLjQ3MzM5TDQgNC41MjY2Nkw3IDEuNDczMzkiIHN0cm9rZT0iIzlFQjVDOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=)}.thumb[data-v-5afd4161]{position:absolute;width:12px;height:12px;top:0;border-radius:50%;margin-top:-1px;transform:translateX(-50%);background-color:#f8f8f8;box-shadow:0 1px 4px 0 rgba(0,0,0,.368627);cursor:default}.saturation[data-v-5afd4161]{position:relative;width:100%;padding-bottom:55%;overflow:hidden}.saturation>div[data-v-5afd4161]{position:absolute;top:0;left:0;right:0;bottom:0;margin:0}.saturation>.thumb[data-v-5afd4161]{background-color:transparent;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4)}.mask.white[data-v-5afd4161]{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.mask.black[data-v-5afd4161]{background:linear-gradient(0deg,#000,transparent)}.suggestions[data-v-5afd4161]{border-top:1px solid #e2e8f0;padding:20px 16px;padding-top:16px}.suggestions p[data-v-5afd4161]{margin-top:0;margin-bottom:10px;font-family:Inter,Helvetica,Arial,sans-serif;font-size:12px;line-height:1.5;color:#1a202c}.suggestions ul[data-v-5afd4161]{display:flex;align-items:center;margin:0;padding:0;list-style:none}.suggestion[data-v-5afd4161]{width:24px;height:24px;margin:4px;border:1px solid #e2e8f0;border-radius:50%}",map:void 0,media:void 0})}),N,"data-v-5afd4161",false,undefined,!1,$,void 0,void 0),L={BOTTOM:"bottom",LEFT:"left",RIGHT:"right",TOP:"top"};const F=j({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{ref:"root",staticClass:"popover"},[a("button",{staticClass:"trigger",attrs:{type:"text"},on:{click:t.onToggle}},[a("span",{staticClass:"preview",style:{"background-color":t.value}}),t._v(" "),t.withLabel?[t._v("\n "+t._s(t.value)+"\n ")]:t._e()],2),t._v(" "),a("transition",{attrs:{name:t.currentTransitionName}},[t.isVisible?a("div",{staticClass:"frame",class:t.framePositionClass},[a("color-picker",{attrs:{value:t.value},on:{input:t.onInput}})],1):t._e()])],1)},staticRenderFns:[]},(function(t){t&&t("data-v-47fb1e12_0",{source:".popover[data-v-47fb1e12]{position:relative}.trigger[data-v-47fb1e12]{flex:0 0 auto;display:flex;align-items:center;padding:0;background:0 0;border:none;cursor:pointer;line-height:1.71;font-family:Inter,Helvetica,Arial,sans-serif;font-size:14px}.preview[data-v-47fb1e12]{flex:1 1 auto;display:inline-block;vertical-align:middle;width:32px;height:32px;margin-right:8px;border:1px solid #e2e8f0;border-radius:50%}.frame[data-v-47fb1e12]{position:absolute;z-index:10}.frame.bottom[data-v-47fb1e12]{left:0;top:calc(100% + 12px)}.frame.top[data-v-47fb1e12]{left:0;bottom:calc(100% + 12px)}.frame.left[data-v-47fb1e12]{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.frame.right[data-v-47fb1e12]{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.slide-down-enter-active[data-v-47fb1e12]{animation:slideDown-data-v-47fb1e12 .25s}.slide-down-leave-to[data-v-47fb1e12]{animation:slideDown-data-v-47fb1e12 .25s reverse}@keyframes slideDown-data-v-47fb1e12{from{transform:translateY(15px);opacity:0}}.slide-up-enter-active[data-v-47fb1e12]{animation:slideUp-data-v-47fb1e12 .25s}.slide-up-leave-to[data-v-47fb1e12]{animation:slideUp-data-v-47fb1e12 .25s reverse}@keyframes slideUp-data-v-47fb1e12{from{transform:translateY(-15px);opacity:0}}.slide-left-enter-active[data-v-47fb1e12]{animation:slideLeft-data-v-47fb1e12 .25s}.slide-left-leave-to[data-v-47fb1e12]{animation:slideLeft-data-v-47fb1e12 .25s reverse}@keyframes slideLeft-data-v-47fb1e12{from{transform:translateX(-15px) translateY(-50%);opacity:0}}.slide-right-enter-active[data-v-47fb1e12]{animation:slideRight-data-v-47fb1e12 .25s}.slide-right-leave-to[data-v-47fb1e12]{animation:slideRight-data-v-47fb1e12 .25s reverse}@keyframes slideRight-data-v-47fb1e12{from{transform:translateX(15px) translateY(-50%);opacity:0}}",map:void 0,media:void 0})}),{name:"VColorPopover",components:{ColorPicker:V},props:{value:{type:String,default:"#ff0000"},withSuggestions:{type:Boolean,default:!0},position:{type:String,default:L.BOTTOM,validator:t=>Object.values(L).includes(t)},withLabel:{type:Boolean,default:!0}},data:()=>({isVisible:!1}),computed:{currentTransitionName(){switch(this.position){case L.BOTTOM:return"slide-down";case L.LEFT:return"slide-left";case L.RIGHT:return"slide-right";case L.TOP:return"slide-up"}},framePositionClass(){switch(this.position){case L.BOTTOM:return"bottom";case L.LEFT:return"left";case L.RIGHT:return"right";case L.TOP:return"top"}}},watch:{isVisible(t){t?document.body.addEventListener("click",this.onClickOutside):document.body.removeEventListener("click",this.onClickOutside)}},methods:{onToggle(){this.isVisible=!this.isVisible},onClickOutside(t){t.path.includes(this.$refs.root)||(this.isVisible=!1)},onInput(t){this.$emit("input",t)}}},"data-v-47fb1e12",false,undefined,!1,$,void 0,void 0);export{V as VColorPicker,F as VColorPopover}; |
| { | ||
| "name": "@uscreentv/v-color", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "main": "dist/index.js", | ||
@@ -43,2 +43,3 @@ "module": "dist/index.esm.js", | ||
| "rollup": "^2.32.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-vue": "^5.1.9", | ||
@@ -57,9 +58,8 @@ "vue-template-compiler": "^2.6.12" | ||
| "type": "git", | ||
| "url": "https://github.com/v-comp/v-color.git" | ||
| "url": "https://github.com/Uscreen-video/v-color.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/v-comp/v-color/issues" | ||
| "url": "https://github.com/Uscreen-video/v-color/issues" | ||
| }, | ||
| "homepage": "https://github.com/v-comp/v-color#readme", | ||
| "author": "wemlion <angusfu1126@qq.com>", | ||
| "homepage": "https://github.com/Uscreen-video/v-color", | ||
| "publishConfig": { | ||
@@ -66,0 +66,0 @@ "access": "public" |
@@ -26,4 +26,12 @@ # v-color | ||
| ## Props | ||
| ## Components | ||
| ### `VColorPicker` | ||
| This is the main component, which just represents color picker as is. | ||
| **Props** | ||
| --- | ||
| **`value`** – Color string in `hex`, `rgba` or `hsla` format | ||
@@ -43,4 +51,53 @@ | ||
| ## Events | ||
| **Events** | ||
| --- | ||
| **`input`** – Emits on each color change | ||
| ### `VColorPopover` | ||
| It includes `VColorPicker`, but wrapped into popover component with control button and | ||
| current color preview. Use it when you need to save visual space. | ||
| **Props** | ||
| --- | ||
| **`value`** – Color string in `hex`, `rgba` or `hsla` format | ||
| _type_: `string` | ||
| _default value_: `''` | ||
| --- | ||
| **`withSuggestions`** – Enables colors suggestions which stores in local storage. Picker remembers 7 last colors | ||
| _type_: `boolean` | ||
| _default value_: `true` | ||
| --- | ||
| **`position`** – Popover's position after appearing | ||
| _type_: `string` | ||
| _possible values_: `bottom|left|top|right` | ||
| _default value_: `bottom` | ||
| --- | ||
| **`withLabel`** – Controls color label rendering near the color preview | ||
| _type_: `boolean` | ||
| _default value_: `true` | ||
| **Events** | ||
| --- | ||
| **`input`** – Emits on each color change |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.21%
479405
- Number of package files
- increased by66.67%
10
- Number of lines in readme file
- increased by126.67%
102
Worsened metrics
- Dev dependency count
- increased by7.69%
14
- Lines of code
- decreased by-44.04%
4217
- Number of low maintenance alerts
- increased byInfinity%
1
- Number of low supply chain risk alerts
- increased by400%
5
No dependency changes