vue-color-kit
Version:
Vue color picker
1,127 lines (1,088 loc) • 37.1 kB
JavaScript
/*!
* vue-color-kit v1.0.6
* (c) 2023
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
function setColorValue(color) {
let rgba = { r: 0, g: 0, b: 0, a: 1 };
if (/#/.test(color)) {
rgba = hex2rgb(color);
}
else if (/rgb/.test(color)) {
rgba = rgb2rgba(color);
}
else if (typeof color === 'string') {
rgba = rgb2rgba(`rgba(${color})`);
}
else if (Object.prototype.toString.call(color) === '[object Object]') {
rgba = color;
}
const { r, g, b, a } = rgba;
const { h, s, v } = rgb2hsv(rgba);
return { r, g, b, a: a === undefined ? 1 : a, h, s, v };
}
function createAlphaSquare(size) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const doubleSize = size * 2;
canvas.width = doubleSize;
canvas.height = doubleSize;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, doubleSize, doubleSize);
ctx.fillStyle = '#ccd5db';
ctx.fillRect(0, 0, size, size);
ctx.fillRect(size, size, size, size);
return canvas;
}
function createLinearGradient(direction, ctx, width, height, color1, color2) {
// l horizontal p vertical
const isL = direction === 'l';
const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height);
gradient.addColorStop(0.01, color1);
gradient.addColorStop(0.99, color2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
}
function rgb2hex({ r, g, b }, toUpper) {
const change = (val) => ('0' + Number(val).toString(16)).slice(-2);
const color = `#${change(r)}${change(g)}${change(b)}`;
return toUpper ? color.toUpperCase() : color;
}
function hex2rgb(hex) {
hex = hex.slice(1);
const change = (val) => parseInt(val, 16) || 0; // Avoid NaN situations
return {
r: change(hex.slice(0, 2)),
g: change(hex.slice(2, 4)),
b: change(hex.slice(4, 6)),
};
}
function rgb2rgba(rgba) {
if (typeof rgba === 'string') {
rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',');
return {
r: Number(rgba[0]) || 0,
g: Number(rgba[1]) || 0,
b: Number(rgba[2]) || 0,
a: Number(rgba[3] ? rgba[3] : 1),
};
}
else {
return rgba;
}
}
function rgb2hsv({ r, g, b }) {
r = r / 255;
g = g / 255;
b = b / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0;
if (max === min) {
h = 0;
}
else if (max === r) {
if (g >= b) {
h = (60 * (g - b)) / delta;
}
else {
h = (60 * (g - b)) / delta + 360;
}
}
else if (max === g) {
h = (60 * (b - r)) / delta + 120;
}
else if (max === b) {
h = (60 * (r - g)) / delta + 240;
}
h = Math.floor(h);
let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2));
let v = parseFloat(max.toFixed(2));
return { h, s, v };
}
var script = vue.defineComponent({
props: {
color: {
type: String,
default: '#000000',
},
hsv: {
type: Object,
default: null,
},
size: {
type: Number,
default: 152,
},
},
emits: ['selectSaturation'],
data() {
return {
slideSaturationStyle: {},
};
},
// Can’t monitor, otherwise the color will change when you change yourself
// watch: {
// color() {
// this.renderColor()
// }
// },
mounted() {
this.renderColor();
this.renderSlide();
},
methods: {
renderColor() {
const canvas = this.$refs.canvasSaturation;
const size = this.size;
const ctx = canvas.getContext('2d');
canvas.width = size;
canvas.height = size;
ctx.fillStyle = this.color;
ctx.fillRect(0, 0, size, size);
createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
},
renderSlide() {
this.slideSaturationStyle = {
left: this.hsv.s * this.size - 5 + 'px',
top: (1 - this.hsv.v) * this.size - 5 + 'px',
};
},
selectSaturation(e) {
const { top: saturationTop, left: saturationLeft, } = this.$el.getBoundingClientRect();
const ctx = e.target.getContext('2d');
const mousemove = (e) => {
let x = e.clientX - saturationLeft;
let y = e.clientY - saturationTop;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > this.size) {
x = this.size;
}
if (y > this.size) {
y = this.size;
}
// Do not modify the dom by monitoring data changes, otherwise when the color is #ffffff, the slide will go to the lower left corner
this.slideSaturationStyle = {
left: x - 5 + 'px',
top: y - 5 + 'px',
};
// If you use the maximum value, the selected pixel will be empty, and the empty default is black
const imgData = ctx.getImageData(Math.min(x, this.size - 1), Math.min(y, this.size - 1), 1, 1);
const [r, g, b] = imgData.data;
this.$emit('selectSaturation', { r, g, b });
};
mousemove(e);
const mouseup = () => {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
};
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
},
},
});
const _hoisted_1 = { ref: "canvasSaturation" };
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", {
class: "saturation",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers((...args) => (_ctx.selectSaturation && _ctx.selectSaturation(...args)), ["prevent","stop"]))
}, [
vue.createVNode("canvas", _hoisted_1, null, 512 /* NEED_PATCH */),
vue.createVNode("div", {
style: _ctx.slideSaturationStyle,
class: "slide"
}, null, 4 /* STYLE */)
], 32 /* HYDRATE_EVENTS */))
}
script.render = render;
script.__file = "src/color/Saturation.vue";
var script$1 = vue.defineComponent({
props: {
hsv: {
type: Object,
default: null,
},
width: {
type: Number,
default: 15,
},
height: {
type: Number,
default: 152,
},
},
emits: ['selectHue'],
data() {
return {
slideHueStyle: {},
};
},
mounted() {
this.renderColor();
this.renderSlide();
},
methods: {
renderColor() {
const canvas = this.$refs.canvasHue;
const width = this.width;
const height = this.height;
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, '#FF0000'); // red
gradient.addColorStop(0.17 * 1, '#FF00FF'); // purple
gradient.addColorStop(0.17 * 2, '#0000FF'); // blue
gradient.addColorStop(0.17 * 3, '#00FFFF'); // green
gradient.addColorStop(0.17 * 4, '#00FF00'); // green
gradient.addColorStop(0.17 * 5, '#FFFF00'); // yellow
gradient.addColorStop(1, '#FF0000'); // red
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
},
renderSlide() {
this.slideHueStyle = {
top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
};
},
selectHue(e) {
const { top: hueTop } = this.$el.getBoundingClientRect();
const ctx = e.target.getContext('2d');
const mousemove = (e) => {
let y = e.clientY - hueTop;
if (y < 0) {
y = 0;
}
if (y > this.height) {
y = this.height;
}
this.slideHueStyle = {
top: y - 2 + 'px',
};
// If you use the maximum value, the selected pixel will be empty, and the empty default is black
const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1);
const [r, g, b] = imgData.data;
this.$emit('selectHue', { r, g, b });
};
mousemove(e);
const mouseup = () => {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
};
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
},
},
});
const _hoisted_1$1 = { ref: "canvasHue" };
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", {
class: "hue",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers((...args) => (_ctx.selectHue && _ctx.selectHue(...args)), ["prevent","stop"]))
}, [
vue.createVNode("canvas", _hoisted_1$1, null, 512 /* NEED_PATCH */),
vue.createVNode("div", {
style: _ctx.slideHueStyle,
class: "slide"
}, null, 4 /* STYLE */)
], 32 /* HYDRATE_EVENTS */))
}
script$1.render = render$1;
script$1.__file = "src/color/Hue.vue";
var script$2 = vue.defineComponent({
props: {
color: {
type: String,
default: '#000000',
},
rgba: {
type: Object,
default: null,
},
width: {
type: Number,
default: 15,
},
height: {
type: Number,
default: 152,
},
},
emits: ['selectAlpha'],
data() {
return {
slideAlphaStyle: {},
alphaSize: 5,
};
},
watch: {
color() {
this.renderColor();
},
'rgba.a'() {
this.renderSlide();
},
},
mounted() {
this.renderColor();
this.renderSlide();
},
methods: {
renderColor() {
const canvas = this.$refs.canvasAlpha;
const width = this.width;
const height = this.height;
const size = this.alphaSize;
const canvasSquare = createAlphaSquare(size);
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
ctx.fillRect(0, 0, width, height);
createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
},
renderSlide() {
this.slideAlphaStyle = {
top: this.rgba.a * this.height - 2 + 'px',
};
},
selectAlpha(e) {
const { top: hueTop } = this.$el.getBoundingClientRect();
const mousemove = (e) => {
let y = e.clientY - hueTop;
if (y < 0) {
y = 0;
}
if (y > this.height) {
y = this.height;
}
let a = parseFloat((y / this.height).toFixed(2));
this.$emit('selectAlpha', a);
};
mousemove(e);
const mouseup = () => {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
};
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
},
},
});
const _hoisted_1$2 = { ref: "canvasAlpha" };
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", {
class: "color-alpha",
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers((...args) => (_ctx.selectAlpha && _ctx.selectAlpha(...args)), ["prevent","stop"]))
}, [
vue.createVNode("canvas", _hoisted_1$2, null, 512 /* NEED_PATCH */),
vue.createVNode("div", {
style: _ctx.slideAlphaStyle,
class: "slide"
}, null, 4 /* STYLE */)
], 32 /* HYDRATE_EVENTS */))
}
script$2.render = render$2;
script$2.__file = "src/color/Alpha.vue";
var script$3 = vue.defineComponent({
props: {
color: {
type: String,
default: '#000000',
},
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 30,
},
},
data() {
return {
alphaSize: 5,
};
},
watch: {
color() {
this.renderColor();
},
},
mounted() {
this.renderColor();
},
methods: {
renderColor() {
const canvas = this.$el;
const width = this.width;
const height = this.height;
const size = this.alphaSize;
const canvasSquare = createAlphaSquare(size);
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = this.color;
ctx.fillRect(0, 0, width, height);
},
},
});
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("canvas"))
}
script$3.render = render$3;
script$3.__file = "src/color/Preview.vue";
// import imgSucker from '../img/sucker.png'
var script$4 = vue.defineComponent({
props: {
suckerCanvas: {
type: Object,
default: null,
},
suckerArea: {
type: Array,
default: () => [],
},
},
data() {
return {
isOpenSucker: false,
suckerPreview: null,
isSucking: false,
};
},
watch: {
suckerCanvas(newVal) {
this.isSucking = false;
this.suckColor(newVal);
// newVal.style.cursor = `url('../img/sucker.png') 0 32, default`
//TODO
},
},
methods: {
openSucker() {
if (!this.isOpenSucker) {
this.isOpenSucker = true;
this.isSucking = true;
this.$emit('openSucker', true);
document.addEventListener('keydown', this.keydownHandler);
}
else {
// The processing logic is the same as pressing the esc key
this.keydownHandler({ keyCode: 27 });
}
},
keydownHandler(e) {
// esc
if (e.keyCode === 27) {
this.isOpenSucker = false;
this.isSucking = false;
this.$emit('openSucker', false);
document.removeEventListener('keydown', this.keydownHandler);
document.removeEventListener('mousemove', this.mousemoveHandler);
document.removeEventListener('mouseup', this.mousemoveHandler);
if (this.suckerPreview) {
// @ts-ignore
document.body.removeChild(this.suckerPreview);
this.suckerPreview = null;
}
}
},
mousemoveHandler(e) {
const { clientX, clientY } = e;
const { top: domTop, left: domLeft, width, height, } = this.suckerCanvas.getBoundingClientRect();
const x = clientX - domLeft;
const y = clientY - domTop;
const ctx = this.suckerCanvas.getContext('2d');
const imgData = ctx.getImageData(Math.min(x, width - 1), Math.min(y, height - 1), 1, 1);
let [r, g, b, a] = imgData.data;
a = parseFloat((a / 255).toFixed(2));
// @ts-ignore
const style = this.suckerPreview.style;
Object.assign(style, {
position: 'absolute',
left: clientX + 20 + 'px',
top: clientY - 36 + 'px',
width: '24px',
height: '24px',
borderRadius: '50%',
border: '2px solid #fff',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.16)',
background: `rgba(${r}, ${g}, ${b}, ${a})`,
zIndex: 95,
});
if (this.suckerArea.length &&
// @ts-ignore
clientX >= this.suckerArea[0] &&
// @ts-ignore
clientY >= this.suckerArea[1] &&
// @ts-ignore
clientX <= this.suckerArea[2] &&
// @ts-ignore
clientY <= this.suckerArea[3]) {
// @ts-ignore
style.display = '';
}
else {
// @ts-ignore
style.display = 'none';
}
},
suckColor(dom) {
if (dom && dom.tagName !== 'CANVAS') {
return;
}
// @ts-ignore
this.suckerPreview = document.createElement('div');
// @ts-ignore
if (this.suckerPreview)
document.body.appendChild(this.suckerPreview);
document.addEventListener('mousemove', this.mousemoveHandler);
document.addEventListener('mouseup', this.mousemoveHandler);
dom.addEventListener('click', (e) => {
const { clientX, clientY } = e;
const { top, left, width, height } = dom.getBoundingClientRect();
const x = clientX - left;
const y = clientY - top;
const ctx = dom.getContext('2d');
const imgData = ctx.getImageData(Math.min(x, width - 1), Math.min(y, height - 1), 1, 1);
let [r, g, b, a] = imgData.data;
a = parseFloat((a / 255).toFixed(2));
this.$emit('selectSucker', { r, g, b, a });
});
},
},
});
const _hoisted_1$3 = /*#__PURE__*/vue.createVNode("path", { d: "M13.1,8.2l5.6,5.6c0.4,0.4,0.5,1.1,0.1,1.5s-1.1,0.5-1.5,0.1c0,0-0.1,0-0.1-0.1l-1.4-1.4l-7.7,7.7C7.9,21.9,7.6,22,7.3,22H3.1C2.5,22,2,21.5,2,20.9l0,0v-4.2c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8C8.5,9.7,9.2,9.6,9.7,10s0.5,1.1,0.1,1.5c0,0,0,0.1-0.1,0.1l-5.5,5.5v2.7h2.7l7.4-7.4L8.7,6.8c-0.5-0.4-0.5-1-0.1-1.5s1.1-0.5,1.5-0.1c0,0,0.1,0,0.1,0.1l1.4,1.4l3.5-3.5c1.6-1.6,4.1-1.6,5.8-0.1c1.6,1.6,1.6,4.1,0.1,5.8L20.9,9l-3.6,3.6c-0.4,0.4-1.1,0.5-1.5,0.1" }, null, -1 /* HOISTED */);
const _hoisted_2 = {
key: 1,
class: "sucker",
viewBox: "-16 -16 68 68",
xmlns: "http://www.w3.org/2000/svg",
stroke: "#9099a4"
};
const _hoisted_3 = /*#__PURE__*/vue.createVNode("g", {
fill: "none",
"fill-rule": "evenodd"
}, [
/*#__PURE__*/vue.createVNode("g", {
transform: "translate(1 1)",
"stroke-width": "4"
}, [
/*#__PURE__*/vue.createVNode("circle", {
"stroke-opacity": ".5",
cx: "18",
cy: "18",
r: "18"
}),
/*#__PURE__*/vue.createVNode("path", { d: "M36 18c0-9.94-8.06-18-18-18" }, [
/*#__PURE__*/vue.createVNode("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
})
])
])
], -1 /* HOISTED */);
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", null, [
(!_ctx.isSucking)
? (vue.openBlock(), vue.createBlock("svg", {
key: 0,
class: [{ active: _ctx.isOpenSucker }, "sucker"],
xmlns: "http://www.w3.org/2000/svg",
viewBox: "-12 -12 48 48",
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.openSucker && _ctx.openSucker(...args)))
}, [
_hoisted_1$3
], 2 /* CLASS */))
: vue.createCommentVNode("v-if", true),
(_ctx.isSucking)
? (vue.openBlock(), vue.createBlock("svg", _hoisted_2, [
_hoisted_3
]))
: vue.createCommentVNode("v-if", true)
]))
}
script$4.render = render$4;
script$4.__file = "src/color/Sucker.vue";
var script$5 = vue.defineComponent({
props: {
name: {
type: String,
default: '',
},
color: {
type: String,
default: '',
},
},
emits: ['inputColor', 'inputFocus', 'inputBlur'],
setup(props, { emit }) {
const modelColor = vue.computed({
get() {
return props.color || '';
},
set(val) {
emit('inputColor', val);
},
});
// Functions for handling focus events
const handleFocus = (event) => {
emit('inputFocus', event);
};
const handleBlur = (event) => {
emit('inputBlur', event);
};
return {
modelColor,
handleFocus,
handleBlur,
};
},
});
const _hoisted_1$4 = { class: "color-type" };
const _hoisted_2$1 = { class: "name" };
function render$5(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", _hoisted_1$4, [
vue.createVNode("span", _hoisted_2$1, vue.toDisplayString(_ctx.name), 1 /* TEXT */),
vue.withDirectives(vue.createVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_ctx.modelColor = $event)),
class: "value",
onFocus: _cache[2] || (_cache[2] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))),
onBlur: _cache[3] || (_cache[3] = (...args) => (_ctx.handleBlur && _ctx.handleBlur(...args)))
}, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
[vue.vModelText, _ctx.modelColor]
])
]))
}
script$5.render = render$5;
script$5.__file = "src/color/Box.vue";
var script$6 = vue.defineComponent({
name: 'ColorPicker',
props: {
color: {
type: String,
default: '#000000',
},
colorsDefault: {
type: Array,
default: () => [],
},
colorsHistoryKey: {
type: String,
default: '',
},
},
emits: ['selectColor'],
setup(props, { emit }) {
const color = vue.ref();
const colorsHistory = vue.ref([]);
const imgAlphaBase64 = vue.ref();
if (props.colorsHistoryKey && localStorage) {
colorsHistory.value =
JSON.parse(localStorage.getItem(props.colorsHistoryKey)) || [];
}
imgAlphaBase64.value = createAlphaSquare(4).toDataURL();
vue.onUnmounted(() => {
setColorsHistory(color.value);
});
function setColorsHistory(color) {
if (!color) {
return;
}
const colors = colorsHistory.value || [];
// @ts-ignore
const index = colors.indexOf(color);
if (index >= 0) {
colors.splice(index, 1);
}
if (colors.length >= 8) {
colors.length = 7;
}
// @ts-ignore
colors.unshift(color);
colorsHistory.value = colors || [];
if (localStorage && props.colorsHistoryKey)
localStorage.setItem(props.colorsHistoryKey, JSON.stringify(colors));
}
function selectColor(color) {
emit('selectColor', color);
}
return {
setColorsHistory,
colorsHistory,
color,
imgAlphaBase64,
selectColor,
};
},
});
const _hoisted_1$5 = { class: "colors" };
const _hoisted_2$2 = {
key: 0,
class: "colors history"
};
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", null, [
vue.createVNode("ul", _hoisted_1$5, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.colorsDefault, (item) => {
return (vue.openBlock(), vue.createBlock("li", {
key: item,
class: "item",
onClick: $event => (_ctx.selectColor(item))
}, [
vue.createVNode("div", {
style: { background: `url(${_ctx.imgAlphaBase64})` },
class: "alpha"
}, null, 4 /* STYLE */),
vue.createVNode("div", {
style: { background: item },
class: "color"
}, null, 4 /* STYLE */)
], 8 /* PROPS */, ["onClick"]))
}), 128 /* KEYED_FRAGMENT */))
]),
(_ctx.colorsHistory.length)
? (vue.openBlock(), vue.createBlock("ul", _hoisted_2$2, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.colorsHistory, (item) => {
return (vue.openBlock(), vue.createBlock("li", {
key: item,
class: "item",
onClick: $event => (_ctx.selectColor(item))
}, [
vue.createVNode("div", {
style: { background: `url(${_ctx.imgAlphaBase64})` },
class: "alpha"
}, null, 4 /* STYLE */),
vue.createVNode("div", {
style: { background: item },
class: "color"
}, null, 4 /* STYLE */)
], 8 /* PROPS */, ["onClick"]))
}), 128 /* KEYED_FRAGMENT */))
]))
: vue.createCommentVNode("v-if", true)
]))
}
script$6.render = render$6;
script$6.__file = "src/color/Colors.vue";
var script$7 = vue.defineComponent({
components: {
Saturation: script,
Hue: script$1,
Alpha: script$2,
Preview: script$3,
Sucker: script$4,
Box: script$5,
Colors: script$6,
},
emits: ['changeColor', 'openSucker', 'inputFocus', 'inputBlur'],
props: {
color: {
type: String,
default: '#000000',
},
theme: {
type: String,
default: 'dark',
},
suckerHide: {
type: Boolean,
default: true,
},
suckerCanvas: {
type: null,
default: null,
},
suckerArea: {
type: Array,
default: () => [],
},
colorsDefault: {
type: Array,
default: () => [
'#000000',
'#FFFFFF',
'#FF1900',
'#F47365',
'#FFB243',
'#FFE623',
'#6EFF2A',
'#1BC7B1',
'#00BEFF',
'#2E81FF',
'#5D61FF',
'#FF89CF',
'#FC3CAD',
'#BF3DCE',
'#8E00A7',
'rgba(0,0,0,0)',
],
},
colorsHistoryKey: {
type: String,
default: 'vue-colorpicker-history',
},
},
data() {
return {
hueWidth: 15,
hueHeight: 152,
previewHeight: 30,
modelRgba: '',
modelHex: '',
r: 0,
g: 0,
b: 0,
a: 1,
h: 0,
s: 0,
v: 0,
};
},
computed: {
isLightTheme() {
return this.theme === 'light';
},
totalWidth() {
return this.hueHeight + (this.hueWidth + 8) * 2;
},
previewWidth() {
return this.totalWidth - (this.suckerHide ? 0 : this.previewHeight);
},
rgba() {
return {
r: this.r,
g: this.g,
b: this.b,
a: this.a,
};
},
hsv() {
return {
h: this.h,
s: this.s,
v: this.v,
};
},
rgbString() {
return `rgb(${this.r}, ${this.g}, ${this.b})`;
},
rgbaStringShort() {
return `${this.r}, ${this.g}, ${this.b}, ${this.a}`;
},
rgbaString() {
return `rgba(${this.rgbaStringShort})`;
},
hexString() {
return rgb2hex(this.rgba, true);
},
},
created() {
Object.assign(this, setColorValue(this.color));
this.setText();
this.$watch('rgba', () => {
this.$emit('changeColor', {
rgba: this.rgba,
hsv: this.hsv,
hex: this.modelHex,
});
});
},
methods: {
selectSaturation(color) {
const { r, g, b, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, h, s, v });
this.setText();
},
handleFocus(event) {
this.$emit('inputFocus', event);
},
handleBlur(event) {
this.$emit('inputBlur', event);
},
selectHue(color) {
const { r, g, b, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, h, s, v });
this.setText();
this.$nextTick(() => {
// @ts-ignore
this.$refs.saturation.renderColor();
// @ts-ignore
this.$refs.saturation.renderSlide();
});
},
selectAlpha(a) {
this.a = a;
this.setText();
},
inputHex(color) {
const { r, g, b, a, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, a, h, s, v });
this.modelHex = color;
this.modelRgba = this.rgbaStringShort;
this.$nextTick(() => {
// @ts-ignore
this.$refs.saturation.renderColor();
// @ts-ignore
this.$refs.saturation.renderSlide();
// @ts-ignore
this.$refs.hue.renderSlide();
});
},
inputRgba(color) {
const { r, g, b, a, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, a, h, s, v });
this.modelHex = this.hexString;
this.modelRgba = color;
this.$nextTick(() => {
// @ts-ignore
this.$refs.saturation.renderColor();
// @ts-ignore
this.$refs.saturation.renderSlide();
// @ts-ignore
this.$refs.hue.renderSlide();
});
},
setText() {
this.modelHex = this.hexString;
this.modelRgba = this.rgbaStringShort;
},
openSucker(isOpen) {
this.$emit('openSucker', isOpen);
},
selectSucker(color) {
const { r, g, b, a, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, a, h, s, v });
this.setText();
this.$nextTick(() => {
// @ts-ignore
this.$refs.saturation.renderColor();
// @ts-ignore
this.$refs.saturation.renderSlide();
// @ts-ignore
this.$refs.hue.renderSlide();
});
},
selectColor(color) {
const { r, g, b, a, h, s, v } = setColorValue(color);
Object.assign(this, { r, g, b, a, h, s, v });
this.setText();
this.$nextTick(() => {
// @ts-ignore
this.$refs.saturation.renderColor();
// @ts-ignore
this.$refs.saturation.renderSlide();
// @ts-ignore
this.$refs.hue.renderSlide();
});
},
},
});
const _hoisted_1$6 = { class: "color-set" };
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Saturation = vue.resolveComponent("Saturation");
const _component_Hue = vue.resolveComponent("Hue");
const _component_Alpha = vue.resolveComponent("Alpha");
const _component_Preview = vue.resolveComponent("Preview");
const _component_Sucker = vue.resolveComponent("Sucker");
const _component_Box = vue.resolveComponent("Box");
const _component_Colors = vue.resolveComponent("Colors");
return (vue.openBlock(), vue.createBlock("div", {
class: ["hu-color-picker", { light: _ctx.isLightTheme }],
style: { width: _ctx.totalWidth + 'px' }
}, [
vue.createVNode("div", _hoisted_1$6, [
vue.createVNode(_component_Saturation, {
ref: "saturation",
color: _ctx.rgbString,
hsv: _ctx.hsv,
size: _ctx.hueHeight,
onSelectSaturation: _ctx.selectSaturation
}, null, 8 /* PROPS */, ["color", "hsv", "size", "onSelectSaturation"]),
vue.createVNode(_component_Hue, {
ref: "hue",
hsv: _ctx.hsv,
width: _ctx.hueWidth,
height: _ctx.hueHeight,
onSelectHue: _ctx.selectHue
}, null, 8 /* PROPS */, ["hsv", "width", "height", "onSelectHue"]),
vue.createVNode(_component_Alpha, {
ref: "alpha",
color: _ctx.rgbString,
rgba: _ctx.rgba,
width: _ctx.hueWidth,
height: _ctx.hueHeight,
onSelectAlpha: _ctx.selectAlpha
}, null, 8 /* PROPS */, ["color", "rgba", "width", "height", "onSelectAlpha"])
]),
vue.createVNode("div", {
style: { height: _ctx.previewHeight + 'px' },
class: "color-show"
}, [
vue.createVNode(_component_Preview, {
color: _ctx.rgbaString,
width: _ctx.previewWidth,
height: _ctx.previewHeight
}, null, 8 /* PROPS */, ["color", "width", "height"]),
(!_ctx.suckerHide)
? (vue.openBlock(), vue.createBlock(_component_Sucker, {
key: 0,
"sucker-canvas": _ctx.suckerCanvas,
"sucker-area": _ctx.suckerArea,
onOpenSucker: _ctx.openSucker,
onSelectSucker: _ctx.selectSucker
}, null, 8 /* PROPS */, ["sucker-canvas", "sucker-area", "onOpenSucker", "onSelectSucker"]))
: vue.createCommentVNode("v-if", true)
], 4 /* STYLE */),
vue.createVNode(_component_Box, {
name: "HEX",
color: _ctx.modelHex,
onInputColor: _ctx.inputHex,
onInputFocus: _ctx.handleFocus,
onInputBlur: _ctx.handleBlur
}, null, 8 /* PROPS */, ["color", "onInputColor", "onInputFocus", "onInputBlur"]),
vue.createVNode(_component_Box, {
name: "RGBA",
color: _ctx.modelRgba,
onInputColor: _ctx.inputRgba,
onInputFocus: _ctx.handleFocus,
onInputBlur: _ctx.handleBlur
}, null, 8 /* PROPS */, ["color", "onInputColor", "onInputFocus", "onInputBlur"]),
vue.createVNode(_component_Colors, {
color: _ctx.rgbaString,
"colors-default": _ctx.colorsDefault,
"colors-history-key": _ctx.colorsHistoryKey,
onSelectColor: _ctx.selectColor
}, null, 8 /* PROPS */, ["color", "colors-default", "colors-history-key", "onSelectColor"]),
vue.createCommentVNode(" custom options "),
vue.renderSlot(_ctx.$slots, "default")
], 6 /* CLASS, STYLE */))
}
script$7.render = render$7;
script$7.__file = "src/color/ColorPicker.vue";
script$7.install = (Vue) => {
Vue.component(script$7.name, script$7);
};
function install(Vue) {
Vue.component(script$7.name, script$7);
}
var index = { install };
exports.ColorPicker = script$7;
exports.default = index;