2022-11-14 03:59:26 +00:00
|
|
|
import { w as withInstall } from "../badge/index2.js";
|
|
|
|
|
import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, onMounted, watch, computed, createBlock, withCtx, normalizeStyle, unref, createVNode, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
|
|
|
|
|
import { _ as _sfc_main$2 } from "../dropdown/index2.js";
|
|
|
|
|
import { _ as _export_sfc } from "../dropdownMenu/index2.js";
|
|
|
|
|
import { d as useEyeDropper } from "../_chunks/@vueuse/index.js";
|
|
|
|
|
var index = /* @__PURE__ */ (() => ".layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}.layui-color-picker{position:relative;user-select:none;width:320px;background:#fff;padding:8px}.saturation-value{cursor:pointer;width:100%;height:200px;position:relative;margin-bottom:10px;box-shadow:1px 1px 1px #0000001a}.saturation-value>div{position:absolute;top:0;left:0;width:100%;height:100%}.point{box-sizing:border-box;width:6px;height:6px;background-color:transparent;border:2px solid #ccc;border-radius:50%;transform:translate(-50%,-50%);position:absolute;z-index:9}.saturation-value-2{background:linear-gradient(to right,white,#ffffff00)}.saturation-value-3{background:linear-gradient(to top,black,#ffffff00)}.layui-color-picker-middle{width:100%;display:flex;margin-bottom:10px}.hue-slider{position:relative;margin-bottom:6px;height:10px;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);box-shadow:1px 1px 1px #0000001a}.alpha-slider{position:relative;height:10px;box-shadow:1px 1px 1px #0000001a;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);background-size:10px 10px}.slider{position:absolute;box-shadow:0 0 2px #0009;box-sizing:border-box;width:6px;height:100%;background-color:#fff}.color-diamond{position:relative;margin-left:5px;width:26px;height:26px;border-radius:2px;overflow:hidden;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);background-size:10px 10px}.layui-colorpicker>span{width:26px;height:26px;display:block;border-radius:var(--global-border-radius);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);background-size:10px 10px}.color-value{width:100%;display:flex;justify-content:space-between}.color-value div{padding:0 3px;text-align:center}.color-value input{font-size:12px;box-sizing:border-box;width:34px;height:24px;padding:0;margin:0;outline:none;text-align:center;border-radius:2px;border:1px solid #eee}.color-value p{font-size:12px;margin:3px 0 0}.color-value .rgba-a{padding-right:0}.color-value .hex{flex:1;padding-left:0}.color-value .hex input{width:100%;height:24px}.preset{width:100%;padding:0;margin:10px 0 0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start}.preset li{width:20px;height:20px;padding:0;margin-right:6px;margin-bottom:6px;border:1px solid #eee;border-radius:2px}.layui-colorpicker{border:1px solid var(--global-neutral-color-3);padding:5px;border-radius:var(--global-border-radius);line-height:24px;display:inline-block;cursor:po
|
|
|
|
|
const _sfc_main$1 = {};
|
|
|
|
|
const _hoisted_1$1 = {
|
|
|
|
|
t: "1651169382813",
|
|
|
|
|
class: "icon",
|
|
|
|
|
viewBox: "0 0 1024 1024",
|
|
|
|
|
version: "1.1",
|
|
|
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
|
|
|
"p-id": "2529",
|
|
|
|
|
width: "27",
|
|
|
|
|
height: "27"
|
|
|
|
|
};
|
|
|
|
|
const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M769.3 409.1c-4.3-16.2-14.7-29.7-29.2-38l-51.3-29.6-10 17.3c-3.7 6.4-10.4 10-17.3 10-3.4 0-6.8-0.9-10-2.7l68.6 39.6c5.2 3 9 7.9 10.5 13.7 1.6 5.8 0.8 11.9-2.3 17.2l-6.6 11.5c-6.2 10.8-20.1 14.5-30.9 8.3L441 312.2c-5.2-3-9-7.9-10.5-13.7-1.6-5.8-0.8-11.9 2.3-17.2l6.6-11.5c3-5.2 7.9-9 13.7-10.5 1.9-0.5 3.9-0.8 5.9-0.8 3.9 0 7.8 1 11.3 3l69.3 40c-9.6-5.5-12.8-17.8-7.3-27.3l10-17.3-52-30c-14.5-8.4-31.4-10.6-47.5-6.3-16.2 4.3-29.7 14.7-38 29.2l-6.6 11.5c-8.4 14.5-10.6 31.4-6.3 47.5 4.3 16.2 14.7 29.7 29.2 38l52 30 10-17.3c5.5-9.6 17.8-12.8 27.3-7.3 9.6 5.5 12.8 17.8 7.3 27.3l-10 17.3 77.2 44.6 10-17.3c5.5-9.6 17.8-12.8 27.3-7.3 9.6 5.5 12.8 17.8 7.3 27.3l-10 17.3 51.3 29.6c9.8 5.7 20.6 8.4 31.2 8.4 21.7 0 42.7-11.2 54.3-31.3l6.6-11.5c8.5-14.5 10.7-31.4 6.4-47.5z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2530"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M644.2 338.8l10-17.3-77.2-44.6-10 17.3c-5.5 9.6-17.8 12.8-27.3 7.3l111.8 64.6c-9.6-5.5-12.9-17.8-7.3-27.3zM539.6 301.5zM651.5 366.1z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2531"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M624.1 195.2c12.3-21.3 39.6-28.6 60.9-16.3 10.3 6 17.7 15.6 20.8 27.1s1.5 23.5-4.5 33.8l-47.2 81.7 34.6 20 47.2-81.7c11.3-19.6 14.3-42.4 8.5-64.2-5.8-21.8-19.8-40.1-39.4-51.4-40.4-23.3-92.2-9.4-115.5 31l-47.2 81.7 34.6 20 47.2-81.7z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2532"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M644.2 338.8c-5.5 9.6-2.2 21.8 7.3 27.3 3.1 1.8 6.6 2.7 10 2.7 6.9 0 13.6-3.6 17.3-10l10-17.3-34.6-20-10 17.3zM539.6 301.5c9.6 5.5 21.8 2.2 27.3-7.3l10-17.3-34.6-20-10 17.3c-5.5 9.6-2.2 21.8 7.3 27.3z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2533"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_6$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M395.4 769.6c-2.6 4.4-6.5 7.6-11 9-2.3 0.7-6.9 1.5-11.3-1-9.6-5.5-21.8-2.2-27.3 7.3l-23.1 40c-1.7 2.9-4.2 5-7.1 5.8-1.7 0.5-4.1 0.8-6.5-0.5-2.4-1.4-3.3-3.7-3.7-5.4-0.7-2.9-0.1-6.2 1.5-9l22.9-39.7c5.6-9.7 2.3-22.2-7.4-27.8-7.3-4.2-9.2-14.7-4.2-23.3l189.5-328.2-34.6-20L283.6 705c-12.4 21.4-10.1 47.2 3.7 64.8l-15 26c-6.7 11.6-8.8 25.1-5.9 37.9 3 13.4 11.1 24.4 22.7 31.1 7.3 4.2 15.4 6.4 23.7 6.4 4.9 0 9.8-0.7 14.6-2.2 12.6-3.9 23.2-12.4 29.9-24.1l15-26c7.8 1.1 15.9 0.4 23.8-2 14.2-4.4 26.2-14.1 33.8-27.3l189.5-328.2-34.6-20-189.4 328.2z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2534"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("path", {
|
|
|
|
|
d: "M622.2 416.8c-9.6-5.5-21.8-2.2-27.3 7.3l-10 17.3 34.6 20 10-17.3c5.6-9.6 2.3-21.8-7.3-27.3zM517.7 379.5c5.5-9.6 2.2-21.8-7.3-27.3-9.6-5.5-21.8-2.2-27.3 7.3l-10 17.3 34.6 20 10-17.3z",
|
|
|
|
|
fill: "#515151",
|
|
|
|
|
"p-id": "2535"
|
|
|
|
|
}, null, -1);
|
|
|
|
|
const _hoisted_8$1 = [
|
|
|
|
|
_hoisted_2$1,
|
|
|
|
|
_hoisted_3$1,
|
|
|
|
|
_hoisted_4$1,
|
|
|
|
|
_hoisted_5$1,
|
|
|
|
|
_hoisted_6$1,
|
|
|
|
|
_hoisted_7$1
|
|
|
|
|
];
|
|
|
|
|
function _sfc_render(_ctx, _cache) {
|
|
|
|
|
return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_8$1);
|
|
|
|
|
}
|
|
|
|
|
var EyeDropper = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
|
|
|
|
|
const _hoisted_1 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-colorpicker-trigger-i layui-icon-down" }, null, -1);
|
|
|
|
|
const _hoisted_2 = [
|
|
|
|
|
_hoisted_1
|
|
|
|
|
];
|
|
|
|
|
const _hoisted_3 = { class: "layui-color-picker" };
|
|
|
|
|
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "saturation-value-2" }, null, -1);
|
|
|
|
|
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "saturation-value-3" }, null, -1);
|
|
|
|
|
const _hoisted_6 = { class: "layui-color-picker-middle" };
|
|
|
|
|
const _hoisted_7 = { style: { "flex": "auto" } };
|
|
|
|
|
const _hoisted_8 = { class: "color-diamond" };
|
|
|
|
|
const _hoisted_9 = { class: "color-value" };
|
|
|
|
|
const _hoisted_10 = { class: "hex" };
|
|
|
|
|
const _hoisted_11 = ["value"];
|
|
|
|
|
const _hoisted_12 = { class: "rgba-r" };
|
|
|
|
|
const _hoisted_13 = ["value"];
|
|
|
|
|
const _hoisted_14 = { class: "rgba-g" };
|
|
|
|
|
const _hoisted_15 = ["value"];
|
|
|
|
|
const _hoisted_16 = { class: "rgba-b" };
|
|
|
|
|
const _hoisted_17 = ["value"];
|
|
|
|
|
const _hoisted_18 = { class: "rgba-a" };
|
|
|
|
|
const _hoisted_19 = ["value"];
|
|
|
|
|
const _hoisted_20 = { class: "preset" };
|
|
|
|
|
const _hoisted_21 = ["onClick"];
|
|
|
|
|
const __default__ = {
|
|
|
|
|
name: "LayColorPicker"
|
|
|
|
|
};
|
|
|
|
|
const _sfc_main = defineComponent({
|
|
|
|
|
...__default__,
|
|
|
|
|
props: {
|
|
|
|
|
modelValue: { default: { r: 255, g: 255, b: 255, a: 1 } },
|
|
|
|
|
preset: { default: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"] },
|
|
|
|
|
disabled: { type: Boolean, default: false },
|
|
|
|
|
eyeDropper: { type: Boolean },
|
|
|
|
|
contentClass: null,
|
|
|
|
|
contentStyle: null
|
|
|
|
|
},
|
|
|
|
|
emits: ["update:modelValue"],
|
|
|
|
|
setup(__props, { emit }) {
|
|
|
|
|
const props = __props;
|
|
|
|
|
const saturationValue = ref(null);
|
|
|
|
|
const hueSlider = ref(null);
|
|
|
|
|
const alphaSlider = ref(null);
|
|
|
|
|
const { isSupported, open, sRGBHex } = useEyeDropper();
|
|
|
|
|
let pointStyle = ref("top: 25%;left: 80%;");
|
|
|
|
|
let hueSliderStyle = ref("left: 0;");
|
|
|
|
|
let alphaSliderStyle = ref("left: calc(100% - 6px);");
|
|
|
|
|
let hue = ref(0);
|
|
|
|
|
let saturation = ref(1);
|
|
|
|
|
let value = ref(1);
|
|
|
|
|
let red = ref(255);
|
|
|
|
|
let green = ref(0);
|
|
|
|
|
let blue = ref(0);
|
|
|
|
|
let alpha = ref(1);
|
|
|
|
|
const openEyeDropper = function() {
|
|
|
|
|
if (isSupported) {
|
|
|
|
|
open();
|
|
|
|
|
} else {
|
|
|
|
|
console.warn("LayColorPicker: Eye dropper not supported by your browser!");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
let { r, g, b, a } = parseColor(props.modelValue);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
alpha.value = a;
|
|
|
|
|
});
|
|
|
|
|
watch(sRGBHex, (sRGBHex2) => {
|
|
|
|
|
let { r, g, b, a } = hex2rgba(sRGBHex2);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
alpha.value = a;
|
|
|
|
|
});
|
|
|
|
|
watch([red, green, blue], (newValue) => {
|
2024-09-24 09:04:44 +00:00
|
|
|
emit(
|
|
|
|
|
"update:modelValue",
|
|
|
|
|
rgba2hex(red.value, green.value, blue.value, alpha.value)
|
|
|
|
|
);
|
2022-11-14 03:59:26 +00:00
|
|
|
let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
|
|
|
|
|
hue.value = h;
|
|
|
|
|
saturation.value = s;
|
|
|
|
|
value.value = v;
|
|
|
|
|
pointStyle.value = `top: ${100 - v * 100}%;left: ${s * 100}%;`;
|
|
|
|
|
hueSliderStyle.value = `left: ${hue.value / 360 * 100}%;`;
|
|
|
|
|
});
|
|
|
|
|
watch(alpha, () => {
|
2024-09-24 09:04:44 +00:00
|
|
|
emit(
|
|
|
|
|
"update:modelValue",
|
|
|
|
|
rgba2hex(red.value, green.value, blue.value, alpha.value)
|
|
|
|
|
);
|
2022-11-14 03:59:26 +00:00
|
|
|
alphaSliderStyle.value = `left: ${alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"};`;
|
|
|
|
|
});
|
|
|
|
|
let colorObj = computed(() => {
|
|
|
|
|
let r = red.value;
|
|
|
|
|
let g = green.value;
|
|
|
|
|
let b = blue.value;
|
|
|
|
|
let a = alpha.value;
|
|
|
|
|
let h = hue.value;
|
|
|
|
|
let s = saturation.value;
|
|
|
|
|
let v = value.value;
|
|
|
|
|
return {
|
|
|
|
|
rgb: `rgba(${r},${g},${b})`,
|
|
|
|
|
rgba: `rgba(${r},${g},${b},${a})`,
|
|
|
|
|
hex6: rgba2hex(r, g, b),
|
|
|
|
|
hex8: rgba2hex(r, g, b, a),
|
|
|
|
|
hsv: `hsv(${h},${s},${v})`,
|
|
|
|
|
hsl: ``
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
function hexChange(e) {
|
|
|
|
|
let v = e.target.value;
|
|
|
|
|
if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(v)) {
|
|
|
|
|
let { r, g, b, a } = hex2rgba(v);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
alpha.value = a;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function redChange(e) {
|
|
|
|
|
let v = e.target.value;
|
|
|
|
|
if (v !== "") {
|
|
|
|
|
v > 255 && (red.value = 255);
|
|
|
|
|
v < 0 && (red.value = 0);
|
|
|
|
|
v >= 0 && v <= 255 && (red.value = parseInt(v));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function greenChange(e) {
|
|
|
|
|
let v = e.target.value;
|
|
|
|
|
if (v !== "") {
|
|
|
|
|
v > 255 && (green.value = 255);
|
|
|
|
|
v < 0 && (green.value = 0);
|
|
|
|
|
v >= 0 && v <= 255 && (green.value = parseInt(v));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function blueChange(e) {
|
|
|
|
|
let v = e.target.value;
|
|
|
|
|
if (v !== "") {
|
|
|
|
|
v > 255 && (blue.value = 255);
|
|
|
|
|
v < 0 && (blue.value = 0);
|
|
|
|
|
v >= 0 && v <= 255 && (blue.value = parseInt(v));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function alphaChange(e) {
|
|
|
|
|
let v = e.target.value;
|
|
|
|
|
if (v !== "") {
|
|
|
|
|
v = parseFloat(v);
|
|
|
|
|
alpha.value = v;
|
|
|
|
|
v > 1 && (alpha.value = 1);
|
|
|
|
|
v < 0 && (alpha.value = 0);
|
|
|
|
|
v >= 0 && v <= 1 && (alpha.value = v);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function presetChange(item) {
|
|
|
|
|
if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(item)) {
|
|
|
|
|
let { r, g, b, a } = hex2rgba(item);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
alpha.value = a;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function handleChangeSV(e) {
|
|
|
|
|
let w = saturationValue.value.clientWidth;
|
|
|
|
|
let h = saturationValue.value.clientHeight;
|
|
|
|
|
let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
|
|
|
|
|
let y = e.pageY - saturationValue.value.getBoundingClientRect().top;
|
|
|
|
|
x = x < w && x > 0 ? x : x > w ? w : 0;
|
|
|
|
|
y = y < h && y > 0 ? y : y > h ? h : 0;
|
|
|
|
|
saturation.value = Math.floor(x / w * 100 + 0.5) / 100;
|
|
|
|
|
value.value = Math.floor((1 - y / h) * 100 + 0.5) / 100;
|
|
|
|
|
let { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
pointStyle.value = `top: ${y}px;left: ${x}px;`;
|
|
|
|
|
}
|
|
|
|
|
function mousedownSV(e) {
|
|
|
|
|
handleChangeSV(e);
|
|
|
|
|
window.addEventListener("mousemove", handleChangeSV);
|
|
|
|
|
window.addEventListener("mouseup", mouseupSV);
|
|
|
|
|
}
|
|
|
|
|
function mouseupSV(e) {
|
|
|
|
|
window.removeEventListener("mousemove", handleChangeSV);
|
|
|
|
|
window.removeEventListener("mouseup", mouseupSV);
|
|
|
|
|
}
|
|
|
|
|
function handleChangeHue(e) {
|
|
|
|
|
let w = hueSlider.value.clientWidth;
|
|
|
|
|
let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
|
|
|
|
|
x = x < w && x > 0 ? x : x > w ? w : 0;
|
|
|
|
|
hue.value = Math.floor(x / w * 360 + 0.5);
|
|
|
|
|
let { r, g, b } = hsv2rgb(hue.value, saturation.value, value.value);
|
|
|
|
|
red.value = r;
|
|
|
|
|
green.value = g;
|
|
|
|
|
blue.value = b;
|
|
|
|
|
hueSliderStyle.value = `left: ${x >= w - 6 ? w - 6 : x}px;`;
|
|
|
|
|
}
|
|
|
|
|
function mousedownHue(e) {
|
|
|
|
|
handleChangeHue(e);
|
|
|
|
|
window.addEventListener("mousemove", handleChangeHue);
|
|
|
|
|
window.addEventListener("mouseup", mouseupHue);
|
|
|
|
|
}
|
|
|
|
|
function mouseupHue(e) {
|
|
|
|
|
window.removeEventListener("mousemove", handleChangeHue);
|
|
|
|
|
window.removeEventListener("mouseup", mouseupHue);
|
|
|
|
|
}
|
|
|
|
|
function handleChangeAlpha(e) {
|
|
|
|
|
let w = alphaSlider.value.clientWidth;
|
|
|
|
|
let x = e.pageX - saturationValue.value.getBoundingClientRect().left;
|
|
|
|
|
x = x < w && x > 0 ? x : x > w ? w : 0;
|
|
|
|
|
alpha.value = Math.floor(x / w * 100 + 0.5) / 100;
|
|
|
|
|
alphaSliderStyle.value = `left: ${x >= w - 6 ? w - 6 : x}px;`;
|
|
|
|
|
}
|
|
|
|
|
function mousedownAlpha(e) {
|
|
|
|
|
handleChangeAlpha(e);
|
|
|
|
|
window.addEventListener("mousemove", handleChangeAlpha);
|
|
|
|
|
window.addEventListener("mouseup", mouseupAlpha);
|
|
|
|
|
}
|
|
|
|
|
function mouseupAlpha(e) {
|
|
|
|
|
window.removeEventListener("mousemove", handleChangeAlpha);
|
|
|
|
|
window.removeEventListener("mouseup", mouseupAlpha);
|
|
|
|
|
}
|
|
|
|
|
function parseColor(color) {
|
|
|
|
|
if (color) {
|
|
|
|
|
let r, g, b, a;
|
|
|
|
|
if (typeof color === "string") {
|
2024-09-24 09:04:44 +00:00
|
|
|
if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
|
|
|
|
|
color
|
|
|
|
|
)) {
|
2022-11-14 03:59:26 +00:00
|
|
|
return hex2rgba(color);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
r = color.r > 255 ? 255 : color.r < 0 ? 0 : color.r;
|
|
|
|
|
g = color.g > 255 ? 255 : color.g < 0 ? 0 : color.g;
|
|
|
|
|
b = color.b > 255 ? 255 : color.b < 0 ? 0 : color.b;
|
|
|
|
|
a = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a;
|
|
|
|
|
return { r, g, b, a };
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function hsv2rgb(h, s, v) {
|
|
|
|
|
h === 360 && (h = 0);
|
|
|
|
|
let i = Math.floor(h / 60) % 6;
|
|
|
|
|
let f = h / 60 - i;
|
|
|
|
|
let p = v * (1 - s);
|
|
|
|
|
let q = v * (1 - s * f);
|
|
|
|
|
let t = v * (1 - s * (1 - f));
|
|
|
|
|
let r, g, b;
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
r = v;
|
|
|
|
|
g = t;
|
|
|
|
|
b = p;
|
|
|
|
|
} else if (i === 1) {
|
|
|
|
|
r = q;
|
|
|
|
|
g = v;
|
|
|
|
|
b = p;
|
|
|
|
|
} else if (i === 2) {
|
|
|
|
|
r = p;
|
|
|
|
|
g = v;
|
|
|
|
|
b = t;
|
|
|
|
|
} else if (i === 3) {
|
|
|
|
|
r = p;
|
|
|
|
|
g = q;
|
|
|
|
|
b = v;
|
|
|
|
|
} else if (i === 4) {
|
|
|
|
|
r = t;
|
|
|
|
|
g = p;
|
|
|
|
|
b = v;
|
|
|
|
|
} else if (i === 5) {
|
|
|
|
|
r = v;
|
|
|
|
|
g = p;
|
|
|
|
|
b = q;
|
|
|
|
|
}
|
|
|
|
|
r = Math.floor(r * 255 + 0.5);
|
|
|
|
|
g = Math.floor(g * 255 + 0.5);
|
|
|
|
|
b = Math.floor(b * 255 + 0.5);
|
|
|
|
|
return { r, g, b };
|
|
|
|
|
}
|
|
|
|
|
function rgb2hsv(r, g, b) {
|
|
|
|
|
let r1 = r / 255;
|
|
|
|
|
let g1 = g / 255;
|
|
|
|
|
let b1 = b / 255;
|
|
|
|
|
let cmax = Math.max(r1, g1, b1);
|
|
|
|
|
let cmin = Math.min(r1, g1, b1);
|
|
|
|
|
let d = cmax - cmin;
|
|
|
|
|
let h, s, v;
|
|
|
|
|
if (d === 0) {
|
|
|
|
|
h = 0;
|
|
|
|
|
} else if (cmax === r1) {
|
|
|
|
|
h = (60 * (g1 - b1) / d + 360) % 360;
|
|
|
|
|
} else if (cmax === g1) {
|
|
|
|
|
h = 60 * ((b1 - r1) / d + 2);
|
|
|
|
|
} else if (cmax === b1) {
|
|
|
|
|
h = 60 * ((r1 - g1) / d + 4);
|
|
|
|
|
}
|
|
|
|
|
if (cmax === 0) {
|
|
|
|
|
s = 0;
|
|
|
|
|
} else {
|
|
|
|
|
s = d / cmax;
|
|
|
|
|
}
|
|
|
|
|
v = cmax;
|
|
|
|
|
h = Math.floor(h + 0.5);
|
|
|
|
|
s = Math.floor(s * 100 + 0.5) / 100;
|
|
|
|
|
v = Math.floor(v * 100 + 0.5) / 100;
|
|
|
|
|
return { h, s, v };
|
|
|
|
|
}
|
|
|
|
|
function rgba2hex(r, g, b, a = 1) {
|
|
|
|
|
r = parseInt(r);
|
|
|
|
|
let r1 = r.toString(16).length !== 2 ? "0" + r.toString(16) : r.toString(16);
|
|
|
|
|
g = parseInt(g);
|
|
|
|
|
let g1 = g.toString(16).length !== 2 ? "0" + g.toString(16) : g.toString(16);
|
|
|
|
|
b = parseInt(b);
|
|
|
|
|
let b1 = b.toString(16).length !== 2 ? "0" + b.toString(16) : b.toString(16);
|
|
|
|
|
a = parseFloat(a);
|
|
|
|
|
let a1 = "";
|
|
|
|
|
if (a !== 1) {
|
|
|
|
|
let temp = Math.floor(256 * a);
|
|
|
|
|
a1 = temp.toString(16).length !== 2 ? "0" + temp.toString(16) : temp.toString(16);
|
|
|
|
|
}
|
|
|
|
|
return `#${r1}${g1}${b1}${a1}`.toUpperCase();
|
|
|
|
|
}
|
|
|
|
|
function hex2rgba(s) {
|
|
|
|
|
if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
|
|
|
|
|
let b = s.substring(s.length - 1, s.length);
|
|
|
|
|
let g = s.substring(s.length - 2, s.length - 1);
|
|
|
|
|
let r = s.substring(s.length - 3, s.length - 2);
|
|
|
|
|
return hex2rgba(`${r + r}${g + g}${b + b}`);
|
|
|
|
|
}
|
|
|
|
|
if (/^#?[0-9a-fA-F]{4}$/.test(s)) {
|
|
|
|
|
let a = s.substring(s.length - 1, s.length);
|
|
|
|
|
let b = s.substring(s.length - 2, s.length - 1);
|
|
|
|
|
let g = s.substring(s.length - 3, s.length - 2);
|
|
|
|
|
let r = s.substring(s.length - 4, s.length - 3);
|
|
|
|
|
return hex2rgba(`${r + r}${g + g}${b + b}${a + a}`);
|
|
|
|
|
}
|
|
|
|
|
if (/^#?[0-9a-fA-F]{6}$/.test(s)) {
|
|
|
|
|
let b = parseInt("0x" + s.substring(s.length - 2, s.length));
|
|
|
|
|
let g = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
|
|
|
|
|
let r = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
|
|
|
|
|
return { r, g, b, a: 1 };
|
|
|
|
|
}
|
|
|
|
|
if (/^#?[0-9a-fA-F]{8}$/.test(s)) {
|
|
|
|
|
let a = parseInt("0x" + s.substring(s.length - 2, s.length));
|
|
|
|
|
a = a / 255;
|
|
|
|
|
let b = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
|
|
|
|
|
let g = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
|
|
|
|
|
let r = parseInt("0x" + s.substring(s.length - 8, s.length - 6));
|
|
|
|
|
return { r, g, b, a };
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return (_ctx, _cache) => {
|
|
|
|
|
return openBlock(), createBlock(_sfc_main$2, {
|
|
|
|
|
disabled: __props.disabled,
|
|
|
|
|
contentClass: __props.contentClass,
|
|
|
|
|
contentStyle: __props.contentStyle,
|
|
|
|
|
updateAtScroll: ""
|
|
|
|
|
}, {
|
|
|
|
|
content: withCtx(() => [
|
|
|
|
|
createElementVNode("div", _hoisted_3, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "saturation-value",
|
|
|
|
|
ref_key: "saturationValue",
|
|
|
|
|
ref: saturationValue,
|
|
|
|
|
onMousedown: mousedownSV
|
|
|
|
|
}, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
style: normalizeStyle(`background-color: hsl(${unref(hue)}, 100%, 50%);`)
|
|
|
|
|
}, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "point",
|
|
|
|
|
style: normalizeStyle(unref(pointStyle))
|
|
|
|
|
}, null, 4)
|
|
|
|
|
], 4),
|
|
|
|
|
_hoisted_4,
|
|
|
|
|
_hoisted_5
|
|
|
|
|
], 544),
|
|
|
|
|
createElementVNode("div", _hoisted_6, [
|
|
|
|
|
createElementVNode("div", _hoisted_7, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "hue-slider",
|
|
|
|
|
ref_key: "hueSlider",
|
|
|
|
|
ref: hueSlider,
|
|
|
|
|
onMousedown: mousedownHue
|
|
|
|
|
}, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "slider",
|
|
|
|
|
style: normalizeStyle(unref(hueSliderStyle))
|
|
|
|
|
}, null, 4)
|
|
|
|
|
], 544),
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "alpha-slider",
|
|
|
|
|
ref_key: "alphaSlider",
|
|
|
|
|
ref: alphaSlider,
|
|
|
|
|
onMousedown: mousedownAlpha
|
|
|
|
|
}, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: "slider",
|
|
|
|
|
style: normalizeStyle(unref(alphaSliderStyle))
|
|
|
|
|
}, null, 4),
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
style: normalizeStyle(`background: linear-gradient(to right, rgba(0,0,0,0), ${unref(colorObj).rgb});width: 100%;height: 100%`)
|
|
|
|
|
}, null, 4)
|
|
|
|
|
], 544)
|
|
|
|
|
]),
|
|
|
|
|
__props.eyeDropper ? (openBlock(), createElementBlock("div", {
|
|
|
|
|
key: 0,
|
|
|
|
|
onClick: openEyeDropper,
|
|
|
|
|
style: { "margin-left": "5px" }
|
|
|
|
|
}, [
|
|
|
|
|
createVNode(EyeDropper)
|
|
|
|
|
])) : createCommentVNode("", true),
|
|
|
|
|
createElementVNode("div", _hoisted_8, [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
style: normalizeStyle(`background-color: ${unref(colorObj).rgba};width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);`)
|
|
|
|
|
}, null, 4)
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("div", _hoisted_9, [
|
|
|
|
|
createElementVNode("div", _hoisted_10, [
|
|
|
|
|
createElementVNode("label", null, [
|
|
|
|
|
createElementVNode("input", {
|
|
|
|
|
value: unref(colorObj).hex8,
|
|
|
|
|
onInput: hexChange,
|
|
|
|
|
spellcheck: "false"
|
|
|
|
|
}, null, 40, _hoisted_11)
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("div", _hoisted_12, [
|
|
|
|
|
createElementVNode("label", null, [
|
|
|
|
|
createElementVNode("input", {
|
|
|
|
|
value: unref(red),
|
|
|
|
|
onInput: redChange
|
|
|
|
|
}, null, 40, _hoisted_13)
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("div", _hoisted_14, [
|
|
|
|
|
createElementVNode("label", null, [
|
|
|
|
|
createElementVNode("input", {
|
|
|
|
|
value: unref(green),
|
|
|
|
|
onInput: greenChange
|
|
|
|
|
}, null, 40, _hoisted_15)
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("div", _hoisted_16, [
|
|
|
|
|
createElementVNode("label", null, [
|
|
|
|
|
createElementVNode("input", {
|
|
|
|
|
value: unref(blue),
|
|
|
|
|
onInput: blueChange
|
|
|
|
|
}, null, 40, _hoisted_17)
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("div", _hoisted_18, [
|
|
|
|
|
createElementVNode("label", null, [
|
|
|
|
|
createElementVNode("input", {
|
|
|
|
|
value: unref(alpha),
|
|
|
|
|
onInput: alphaChange
|
|
|
|
|
}, null, 40, _hoisted_19)
|
|
|
|
|
])
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
createElementVNode("ul", _hoisted_20, [
|
|
|
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.preset, (item) => {
|
|
|
|
|
return openBlock(), createElementBlock("li", {
|
|
|
|
|
key: item,
|
|
|
|
|
style: normalizeStyle(`background-color: ${item}`),
|
|
|
|
|
onClick: ($event) => presetChange(item)
|
|
|
|
|
}, null, 12, _hoisted_21);
|
|
|
|
|
}), 128))
|
|
|
|
|
])
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
default: withCtx(() => [
|
|
|
|
|
createElementVNode("div", {
|
|
|
|
|
class: normalizeClass(["layui-unselect layui-colorpicker", [{ "layui-colorpicker-disabled": __props.disabled }]])
|
|
|
|
|
}, [
|
|
|
|
|
createElementVNode("span", null, [
|
|
|
|
|
createElementVNode("span", {
|
|
|
|
|
class: "layui-colorpicker-trigger-span",
|
|
|
|
|
"lay-type": "",
|
|
|
|
|
style: normalizeStyle(`background-color: ${unref(colorObj).rgba}`)
|
|
|
|
|
}, _hoisted_2, 4)
|
|
|
|
|
])
|
|
|
|
|
], 2)
|
|
|
|
|
]),
|
|
|
|
|
_: 1
|
|
|
|
|
}, 8, ["disabled", "contentClass", "contentStyle"]);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const component = withInstall(_sfc_main);
|
|
|
|
|
export { component as default };
|
