element-plus
Version:
A Component Library for Vue3.0
1,056 lines (1,032 loc) • 36.9 kB
JavaScript
import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted, openBlock, createBlock, createVNode, watchEffect, Fragment, renderList, inject, reactive, nextTick, provide, resolveComponent, resolveDirective, withCtx, withDirectives, createCommentVNode, withKeys, createTextVNode, toDisplayString, vShow } from 'vue';
import { ClickOutside } from '../directives';
import isServer from '../utils/isServer';
import { on, off } from '../utils/dom';
import ElPopper from '../el-popper';
import ElButton from '../el-button';
import ElInput from '../el-input';
import { t } from '../locale';
import { UPDATE_MODEL_EVENT } from '../utils/constants';
import { useGlobalConfig } from '../utils/util';
import { isValidComponentSize } from '../utils/validators';
import { elFormKey, elFormItemKey } from '../el-form';
import debounce from 'lodash/debounce';
const hsv2hsl = function (hue, sat, val) {
return [
hue,
(sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
hue / 2,
];
};
const isOnePointZero = function (n) {
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};
const isPercentage = function (n) {
return typeof n === 'string' && n.indexOf('%') !== -1;
};
const bound01 = function (value, max) {
if (isOnePointZero(value))
value = '100%';
const processPercent = isPercentage(value);
value = Math.min(max, Math.max(0, parseFloat(value + '')));
if (processPercent) {
value = parseInt((value * max) + '', 10) / 100;
}
if ((Math.abs(value - max) < 0.000001)) {
return 1;
}
return (value % max) / parseFloat(max);
};
const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
const toHex = function ({ r, g, b }) {
const hexOne = function (value) {
value = Math.min(Math.round(value), 255);
const high = Math.floor(value / 16);
const low = value % 16;
return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
};
if (isNaN(r) || isNaN(g) || isNaN(b))
return '';
return '#' + hexOne(r) + hexOne(g) + hexOne(b);
};
const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
const parseHexChannel = function (hex) {
if (hex.length === 2) {
return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
}
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
const hsl2hsv = function (hue, sat, light) {
sat = sat / 100;
light = light / 100;
let smin = sat;
const lmin = Math.max(light, 0.01);
light *= 2;
sat *= (light <= 1) ? light : 2 - light;
smin *= lmin <= 1 ? lmin : 2 - lmin;
const v = (light + sat) / 2;
const sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
return {
h: hue,
s: sv * 100,
v: v * 100,
};
};
const rgb2hsv = function (r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h;
const v = max;
const d = max - min;
const s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
}
else {
switch (max) {
case r: {
h = (g - b) / d + (g < b ? 6 : 0);
break;
}
case g: {
h = (b - r) / d + 2;
break;
}
case b: {
h = (r - g) / d + 4;
break;
}
}
h /= 6;
}
return { h: h * 360, s: s * 100, v: v * 100 };
};
const hsv2rgb = function (h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
const i = Math.floor(h);
const f = h - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [v, q, p, p, t, v][mod];
const g = [t, v, v, q, p, p][mod];
const b = [p, p, t, v, v, q][mod];
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255),
};
};
class Color {
constructor(options) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this._alpha = 100;
this.enableAlpha = false;
this.format = 'hex';
this.value = '';
options = options || {};
for (const option in options) {
if (options.hasOwnProperty(option)) {
this[option] = options[option];
}
}
this.doOnChange();
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === 'object') {
for (const p in prop) {
if (prop.hasOwnProperty(p)) {
this.set(p, prop[p]);
}
}
return;
}
this['_' + prop] = value;
this.doOnChange();
}
get(prop) {
return this['_' + prop];
}
toRgb() {
return hsv2rgb(this._hue, this._saturation, this._value);
}
fromString(value) {
if (!value) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this.doOnChange();
return;
}
const fromHSV = (h, s, v) => {
this._hue = Math.max(0, Math.min(360, h));
this._saturation = Math.max(0, Math.min(100, s));
this._value = Math.max(0, Math.min(100, v));
this.doOnChange();
};
if (value.indexOf('hsl') !== -1) {
const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
.split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
}
else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
}
else if (value.indexOf('hsv') !== -1) {
const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
.split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
}
else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
fromHSV(parts[0], parts[1], parts[2]);
}
}
else if (value.indexOf('rgb') !== -1) {
const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
.split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
}
else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
}
else if (value.indexOf('#') !== -1) {
const hex = value.replace('#', '').trim();
if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex))
return;
let r, g, b;
if (hex.length === 3) {
r = parseHexChannel(hex[0] + hex[0]);
g = parseHexChannel(hex[1] + hex[1]);
b = parseHexChannel(hex[2] + hex[2]);
}
else if (hex.length === 6 || hex.length === 8) {
r = parseHexChannel(hex.substring(0, 2));
g = parseHexChannel(hex.substring(2, 4));
b = parseHexChannel(hex.substring(4, 6));
}
if (hex.length === 8) {
this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
}
else if (hex.length === 3 || hex.length === 6) {
this._alpha = 100;
}
const { h, s, v } = rgb2hsv(r, g, b);
fromHSV(h, s, v);
}
}
compare(color) {
return Math.abs(color._hue - this._hue) < 2 &&
Math.abs(color._saturation - this._saturation) < 1 &&
Math.abs(color._value - this._value) < 1 &&
Math.abs(color._alpha - this._alpha) < 1;
}
doOnChange() {
const { _hue, _saturation, _value, _alpha, format } = this;
if (this.enableAlpha) {
switch (format) {
case 'hsl': {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${_alpha / 100})`;
break;
}
case 'hsv': {
this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${_alpha / 100})`;
break;
}
default: {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgba(${r}, ${g}, ${b}, ${_alpha / 100})`;
}
}
}
else {
switch (format) {
case 'hsl': {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
break;
}
case 'hsv': {
this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
break;
}
case 'rgb': {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgb(${r}, ${g}, ${b})`;
break;
}
default: {
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
}
}
let isDragging = false;
function draggable (element, options) {
if (isServer)
return;
const moveFn = function (event) {
var _a;
(_a = options.drag) === null || _a === void 0 ? void 0 : _a.call(options, event);
};
const upFn = function (event) {
var _a;
off(document, 'mousemove', moveFn);
off(document, 'mouseup', upFn);
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
(_a = options.end) === null || _a === void 0 ? void 0 : _a.call(options, event);
};
on(element, 'mousedown', function (event) {
var _a;
if (isDragging)
return;
document.onselectstart = () => false;
document.ondragstart = () => false;
on(document, 'mousemove', moveFn);
on(document, 'mouseup', upFn);
isDragging = true;
(_a = options.start) === null || _a === void 0 ? void 0 : _a.call(options, event);
});
}
var script = defineComponent({
name: 'ElSlPanel',
props: {
color: {
type: Object,
required: true,
},
},
setup(props) {
const instance = getCurrentInstance();
const cursorTop = ref(0);
const cursorLeft = ref(0);
const background = ref('hsl(0, 100%, 50%)');
const colorValue = computed(() => {
const hue = props.color.get('hue');
const value = props.color.get('value');
return { hue, value };
});
function update() {
const saturation = props.color.get('saturation');
const value = props.color.get('value');
const el = instance.vnode.el;
let { clientWidth: width, clientHeight: height } = el;
cursorLeft.value = saturation * width / 100;
cursorTop.value = (100 - value) * height / 100;
background.value = 'hsl(' + props.color.get('hue') + ', 100%, 50%)';
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
let left = event.clientX - rect.left;
let top = event.clientY - rect.top;
left = Math.max(0, left);
left = Math.min(left, rect.width);
top = Math.max(0, top);
top = Math.min(top, rect.height);
cursorLeft.value = left;
cursorTop.value = top;
props.color.set({
saturation: left / rect.width * 100,
value: 100 - top / rect.height * 100,
});
}
watch(() => colorValue.value, () => {
update();
});
onMounted(() => {
draggable(instance.vnode.el, {
drag: event => {
handleDrag(event);
},
end: event => {
handleDrag(event);
},
});
update();
});
return {
cursorTop,
cursorLeft,
background,
colorValue,
handleDrag,
update,
};
},
});
const _hoisted_1 = /*#__PURE__*/createVNode("div", { class: "el-color-svpanel__white" }, null, -1 /* HOISTED */);
const _hoisted_2 = /*#__PURE__*/createVNode("div", { class: "el-color-svpanel__black" }, null, -1 /* HOISTED */);
const _hoisted_3 = /*#__PURE__*/createVNode("div", null, null, -1 /* HOISTED */);
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: "el-color-svpanel",
style: {
backgroundColor: _ctx.background
}
}, [
_hoisted_1,
_hoisted_2,
createVNode("div", {
class: "el-color-svpanel__cursor",
style: {
top: _ctx.cursorTop + 'px',
left: _ctx.cursorLeft + 'px'
}
}, [
_hoisted_3
], 4 /* STYLE */)
], 4 /* STYLE */))
}
script.render = render;
script.__file = "packages/color-picker/src/components/sv-panel.vue";
var script$1 = defineComponent({
name: 'ElColorHueSlider',
props: {
color: {
type: Object,
required: true,
},
vertical: Boolean,
},
setup(props) {
const instance = getCurrentInstance();
const thumb = ref(null);
const bar = ref(null);
const thumbLeft = ref(0);
const thumbTop = ref(0);
const hueValue = computed(() => {
return props.color.get('hue');
});
watch(() => hueValue.value, () => {
update();
});
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
let hue;
if (!props.vertical) {
let left = event.clientX - rect.left;
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
left = Math.max(thumb.value.offsetWidth / 2, left);
hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
}
else {
let top = event.clientY - rect.top;
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
top = Math.max(thumb.value.offsetHeight / 2, top);
hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
}
props.color.set('hue', hue);
}
function getThumbLeft() {
const el = instance.vnode.el;
if (props.vertical)
return 0;
const hue = props.color.get('hue');
if (!el)
return 0;
return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360);
}
function getThumbTop() {
const el = instance.vnode.el;
if (!props.vertical)
return 0;
const hue = props.color.get('hue');
if (!el)
return 0;
return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360);
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
}
onMounted(() => {
const dragConfig = {
drag: event => {
handleDrag(event);
},
end: event => {
handleDrag(event);
},
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
bar,
thumb,
thumbLeft,
thumbTop,
hueValue,
handleClick,
update,
};
},
});
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: ["el-color-hue-slider", { 'is-vertical': _ctx.vertical }]
}, [
createVNode("div", {
ref: "bar",
class: "el-color-hue-slider__bar",
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
}, null, 512 /* NEED_PATCH */),
createVNode("div", {
ref: "thumb",
class: "el-color-hue-slider__thumb",
style: {
left: _ctx.thumbLeft + 'px',
top: _ctx.thumbTop + 'px'
}
}, null, 4 /* STYLE */)
], 2 /* CLASS */))
}
script$1.render = render$1;
script$1.__file = "packages/color-picker/src/components/hue-slider.vue";
var script$2 = defineComponent({
name: 'ElColorAlphaSlider',
props: {
color: {
type: Object,
required: true,
},
vertical: {
type: Boolean,
default: false,
},
},
setup(props) {
const instance = getCurrentInstance();
const thumb = ref(null);
const bar = ref(null);
const thumbLeft = ref(0);
const thumbTop = ref(0);
const background = ref(null);
watch(() => props.color.get('alpha'), () => {
update();
});
watch(() => props.color.value, () => {
update();
});
function getThumbLeft() {
if (props.vertical)
return 0;
const el = instance.vnode.el;
const alpha = props.color.get('alpha');
if (!el)
return 0;
return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100);
}
function getThumbTop() {
const el = instance.vnode.el;
if (!props.vertical)
return 0;
const alpha = props.color.get('alpha');
if (!el)
return 0;
return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100);
}
function getBackground() {
if (props.color && props.color.value) {
const { r, g, b } = props.color.toRgb();
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
}
return null;
}
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
if (!props.vertical) {
let left = event.clientX - rect.left;
left = Math.max(thumb.value.offsetWidth / 2, left);
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
props.color.set('alpha', Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100));
}
else {
let top = event.clientY - rect.top;
top = Math.max(thumb.value.offsetHeight / 2, top);
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
props.color.set('alpha', Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
}
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
background.value = getBackground();
}
onMounted(() => {
const dragConfig = {
drag: event => {
handleDrag(event);
},
end: event => {
handleDrag(event);
},
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
thumb,
bar,
thumbLeft,
thumbTop,
background,
handleClick,
update,
};
},
});
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: ["el-color-alpha-slider", { 'is-vertical': _ctx.vertical }]
}, [
createVNode("div", {
ref: "bar",
class: "el-color-alpha-slider__bar",
style: {
background: _ctx.background
},
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
}, null, 4 /* STYLE */),
createVNode("div", {
ref: "thumb",
class: "el-color-alpha-slider__thumb",
style: {
left: _ctx.thumbLeft + 'px',
top: _ctx.thumbTop + 'px'
}
}, null, 4 /* STYLE */)
], 2 /* CLASS */))
}
script$2.render = render$2;
script$2.__file = "packages/color-picker/src/components/alpha-slider.vue";
var script$3 = defineComponent({
props: {
colors: { type: Array, required: true },
color: {
type: Object,
required: true,
},
},
setup(props) {
const { currentColor } = useOptions();
const rgbaColors = ref(parseColors(props.colors, props.color));
watch(() => currentColor.value, val => {
const color = new Color();
color.fromString(val);
rgbaColors.value.forEach(item => {
item.selected = color.compare(item);
});
});
watchEffect(() => {
rgbaColors.value = parseColors(props.colors, props.color);
});
function handleSelect(index) {
props.color.fromString(props.colors[index]);
}
function parseColors(colors, color) {
return colors.map(value => {
const c = new Color();
c.enableAlpha = true;
c.format = 'rgba';
c.fromString(value);
c.selected = c.value === color.value;
return c;
});
}
return {
rgbaColors,
handleSelect,
};
},
});
const _hoisted_1$1 = { class: "el-color-predefine" };
const _hoisted_2$1 = { class: "el-color-predefine__colors" };
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", _hoisted_1$1, [
createVNode("div", _hoisted_2$1, [
(openBlock(true), createBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index) => {
return (openBlock(), createBlock("div", {
key: _ctx.colors[index],
class: ["el-color-predefine__color-selector", {selected: item.selected, 'is-alpha': item._alpha < 100}],
onClick: $event => (_ctx.handleSelect(index))
}, [
createVNode("div", {
style: {'background-color': item.value}
}, null, 4 /* STYLE */)
], 10 /* CLASS, PROPS */, ["onClick"]))
}), 128 /* KEYED_FRAGMENT */))
])
]))
}
script$3.render = render$3;
script$3.__file = "packages/color-picker/src/components/predefine.vue";
const OPTIONS_KEY = Symbol();
const useOptions = () => {
return inject(OPTIONS_KEY);
};
var script$4 = defineComponent({
name: 'ElColorPicker',
components: {
ElPopper,
ElInput,
SvPanel: script,
HueSlider: script$1,
AlphaSlider: script$2,
ElButton,
Predefine: script$3,
},
directives: {
ClickOutside,
},
props: {
modelValue: String,
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: {
type: String,
validator: isValidComponentSize,
},
popperClass: String,
predefine: Array,
},
emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
setup(props, { emit }) {
const ELEMENT = useGlobalConfig();
const elForm = inject(elFormKey, {});
const elFormItem = inject(elFormItemKey, {});
const hue = ref(null);
const svPanel = ref(null);
const alpha = ref(null);
const popper = ref(null);
const color = reactive(new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
}));
const showPicker = ref(false);
const showPanelColor = ref(false);
const customInput = ref('');
const displayedColor = computed(() => {
if (!props.modelValue && !showPanelColor.value) {
return 'transparent';
}
return displayedRgb(color, props.showAlpha);
});
const colorSize = computed(() => {
return props.size || elFormItem.size || ELEMENT.size;
});
const colorDisabled = computed(() => {
return props.disabled || elForm.disabled;
});
const currentColor = computed(() => {
return !props.modelValue && !showPanelColor.value ? '' : color.value;
});
watch(() => props.modelValue, newVal => {
if (!newVal) {
showPanelColor.value = false;
}
else if (newVal && newVal !== color.value) {
color.fromString(newVal);
}
});
watch(() => currentColor.value, val => {
customInput.value = val;
emit('active-change', val);
});
watch(() => color.value, () => {
if (!props.modelValue && !showPanelColor.value) {
showPanelColor.value = true;
}
});
function displayedRgb(color, showAlpha) {
if (!(color instanceof Color)) {
throw Error('color should be instance of _color Class');
}
const { r, g, b } = color.toRgb();
return showAlpha
? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`
: `rgb(${r}, ${g}, ${b})`;
}
function setShowPicker(value) {
showPicker.value = value;
}
const debounceSetShowPicker = debounce(setShowPicker, 100);
function hide() {
debounceSetShowPicker(false);
resetColor();
}
function resetColor() {
nextTick(() => {
if (props.modelValue) {
color.fromString(props.modelValue);
}
else {
showPanelColor.value = false;
}
});
}
function handleTrigger() {
if (colorDisabled.value)
return;
debounceSetShowPicker(!showPicker.value);
}
function handleConfirm() {
color.fromString(customInput.value);
}
function confirmValue() {
var _a;
const value = color.value;
emit(UPDATE_MODEL_EVENT, value);
emit('change', value);
(_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.change', value);
debounceSetShowPicker(false);
nextTick(() => {
const newColor = new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat,
});
newColor.fromString(props.modelValue);
if (!color.compare(newColor)) {
resetColor();
}
});
}
function clear() {
var _a;
debounceSetShowPicker(false);
emit(UPDATE_MODEL_EVENT, null);
emit('change', null);
if (props.modelValue !== null) {
(_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.change', null);
}
resetColor();
}
onMounted(() => {
if (props.modelValue) {
color.fromString(props.modelValue);
customInput.value = currentColor.value;
}
});
watch(() => showPicker.value, () => {
nextTick(() => {
var _a, _b, _c;
(_a = hue.value) === null || _a === void 0 ? void 0 : _a.update();
(_b = svPanel.value) === null || _b === void 0 ? void 0 : _b.update();
(_c = alpha.value) === null || _c === void 0 ? void 0 : _c.update();
});
});
provide(OPTIONS_KEY, {
currentColor,
});
return {
color,
colorDisabled,
colorSize,
displayedColor,
showPanelColor,
showPicker,
customInput,
handleConfirm,
hide,
handleTrigger,
clear,
confirmValue,
t,
hue,
svPanel,
alpha,
popper,
};
},
});
const _hoisted_1$2 = { class: "el-color-dropdown__main-wrapper" };
const _hoisted_2$2 = { class: "el-color-dropdown__btns" };
const _hoisted_3$1 = { class: "el-color-dropdown__value" };
const _hoisted_4 = {
key: 0,
class: "el-color-picker__mask"
};
const _hoisted_5 = {
key: 0,
class: "el-color-picker__empty el-icon-close"
};
const _hoisted_6 = { class: "el-color-picker__icon el-icon-arrow-down" };
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hue_slider = resolveComponent("hue-slider");
const _component_sv_panel = resolveComponent("sv-panel");
const _component_alpha_slider = resolveComponent("alpha-slider");
const _component_predefine = resolveComponent("predefine");
const _component_el_input = resolveComponent("el-input");
const _component_el_button = resolveComponent("el-button");
const _component_el_popper = resolveComponent("el-popper");
const _directive_click_outside = resolveDirective("click-outside");
return (openBlock(), createBlock(_component_el_popper, {
ref: "popper",
visible: _ctx.showPicker,
"onUpdate:visible": _cache[3] || (_cache[3] = $event => (_ctx.showPicker = $event)),
effect: "light",
"manual-mode": "",
trigger: "click",
"show-arrow": false,
offset: 0,
transition: "el-zoom-in-top",
"gpu-acceleration": false,
"popper-class": `el-color-picker__panel el-color-dropdown ${_ctx.popperClass}`,
"stop-popper-mouse-event": false
}, {
default: withCtx(() => [
withDirectives(createVNode("div", null, [
createVNode("div", _hoisted_1$2, [
createVNode(_component_hue_slider, {
ref: "hue",
class: "hue-slider",
color: _ctx.color,
vertical: ""
}, null, 8 /* PROPS */, ["color"]),
createVNode(_component_sv_panel, {
ref: "svPanel",
color: _ctx.color
}, null, 8 /* PROPS */, ["color"])
]),
(_ctx.showAlpha)
? (openBlock(), createBlock(_component_alpha_slider, {
key: 0,
ref: "alpha",
color: _ctx.color
}, null, 8 /* PROPS */, ["color"]))
: createCommentVNode("v-if", true),
(_ctx.predefine)
? (openBlock(), createBlock(_component_predefine, {
key: 1,
ref: "predefine",
color: _ctx.color,
colors: _ctx.predefine
}, null, 8 /* PROPS */, ["color", "colors"]))
: createCommentVNode("v-if", true),
createVNode("div", _hoisted_2$2, [
createVNode("span", _hoisted_3$1, [
createVNode(_component_el_input, {
modelValue: _ctx.customInput,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_ctx.customInput = $event)),
"validate-event": false,
size: "mini",
onKeyup: withKeys(_ctx.handleConfirm, ["enter"]),
onBlur: _ctx.handleConfirm
}, null, 8 /* PROPS */, ["modelValue", "onKeyup", "onBlur"])
]),
createVNode(_component_el_button, {
size: "mini",
type: "text",
class: "el-color-dropdown__link-btn",
onClick: _ctx.clear
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.t('el.colorpicker.clear')), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]),
createVNode(_component_el_button, {
plain: "",
size: "mini",
class: "el-color-dropdown__btn",
onClick: _ctx.confirmValue
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.t('el.colorpicker.confirm')), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"])
])
], 512 /* NEED_PATCH */), [
[_directive_click_outside, _ctx.hide]
])
]),
trigger: withCtx(() => [
createVNode("div", {
class: [
'el-color-picker',
_ctx.colorDisabled ? 'is-disabled' : '',
_ctx.colorSize ? `el-color-picker--${ _ctx.colorSize }` : ''
]
}, [
(_ctx.colorDisabled)
? (openBlock(), createBlock("div", _hoisted_4))
: createCommentVNode("v-if", true),
createVNode("div", {
class: "el-color-picker__trigger",
onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.handleTrigger && _ctx.handleTrigger(...args)))
}, [
createVNode("span", {
class: ["el-color-picker__color", { 'is-alpha': _ctx.showAlpha }]
}, [
createVNode("span", {
class: "el-color-picker__color-inner",
style: {
backgroundColor: _ctx.displayedColor
}
}, null, 4 /* STYLE */),
(!_ctx.modelValue && !_ctx.showPanelColor)
? (openBlock(), createBlock("span", _hoisted_5))
: createCommentVNode("v-if", true)
], 2 /* CLASS */),
withDirectives(createVNode("span", _hoisted_6, null, 512 /* NEED_PATCH */), [
[vShow, _ctx.modelValue || _ctx.showPanelColor]
])
])
], 2 /* CLASS */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["visible", "popper-class"]))
}
script$4.render = render$4;
script$4.__file = "packages/color-picker/src/index.vue";
script$4.install = (app) => {
app.component(script$4.name, script$4);
};
const _ColorPicker = script$4;
export default _ColorPicker;