@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
479 lines (478 loc) • 17.6 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, onMounted, watch, computed, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, unref, createElementBlock, Fragment, renderList } from "vue";
import { _ as _sfc_main$1 } from "../index3.js";
import "../index4.js";
var index = "";
const _hoisted_1 = { class: "layui-unselect layui-colorpicker" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-colorpicker-trigger-i layui-icon-down" }, null, -1);
const _hoisted_3 = [
_hoisted_2
];
const _hoisted_4 = { class: "layui-color-picker" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "saturation-value-2" }, null, -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "saturation-value-3" }, null, -1);
const _hoisted_7 = { class: "layui-color-picker-middle" };
const _hoisted_8 = { style: { "flex": "auto" } };
const _hoisted_9 = { class: "color-diamond" };
const _hoisted_10 = { class: "color-value" };
const _hoisted_11 = { class: "hex" };
const _hoisted_12 = ["value"];
const _hoisted_13 = { class: "rgba-r" };
const _hoisted_14 = ["value"];
const _hoisted_15 = { class: "rgba-g" };
const _hoisted_16 = ["value"];
const _hoisted_17 = { class: "rgba-b" };
const _hoisted_18 = ["value"];
const _hoisted_19 = { class: "rgba-a" };
const _hoisted_20 = ["value"];
const _hoisted_21 = { class: "preset" };
const _hoisted_22 = ["onClick"];
const __default__ = {
name: "LayColorPicker"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
modelValue: { default: { r: 255, g: 255, b: 255, a: 1 } },
preset: { default: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"] }
},
emits: ["update:modelValue"],
setup(__props, { emit }) {
const props = __props;
const saturationValue = ref(null);
const hueSlider = ref(null);
const alphaSlider = ref(null);
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);
onMounted(() => {
let { r, g, b, a } = parseColor(props.modelValue);
red.value = r;
green.value = g;
blue.value = b;
alpha.value = a;
});
watch([red, green, blue], (newValue) => {
emit("update:modelValue", rgba2hex(red.value, green.value, blue.value, alpha.value));
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, () => {
emit("update:modelValue", rgba2hex(red.value, green.value, blue.value, alpha.value));
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") {
if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)) {
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$1, null, {
content: withCtx(() => [
createElementVNode("div", _hoisted_4, [
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_5,
_hoisted_6
], 544),
createElementVNode("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
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)
]),
createElementVNode("div", _hoisted_9, [
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_10, [
createElementVNode("div", _hoisted_11, [
createElementVNode("label", null, [
createElementVNode("input", {
value: unref(colorObj).hex8,
onInput: hexChange,
spellcheck: "false"
}, null, 40, _hoisted_12)
])
]),
createElementVNode("div", _hoisted_13, [
createElementVNode("label", null, [
createElementVNode("input", {
value: unref(red),
onInput: redChange
}, null, 40, _hoisted_14)
])
]),
createElementVNode("div", _hoisted_15, [
createElementVNode("label", null, [
createElementVNode("input", {
value: unref(green),
onInput: greenChange
}, null, 40, _hoisted_16)
])
]),
createElementVNode("div", _hoisted_17, [
createElementVNode("label", null, [
createElementVNode("input", {
value: unref(blue),
onInput: blueChange
}, null, 40, _hoisted_18)
])
]),
createElementVNode("div", _hoisted_19, [
createElementVNode("label", null, [
createElementVNode("input", {
value: unref(alpha),
onInput: alphaChange
}, null, 40, _hoisted_20)
])
])
]),
createElementVNode("ul", _hoisted_21, [
(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_22);
}), 128))
])
])
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("span", null, [
createElementVNode("span", {
class: "layui-colorpicker-trigger-span",
"lay-type": "",
style: normalizeStyle(`background-color: ${unref(colorObj).rgba}`)
}, _hoisted_3, 4)
])
])
]),
_: 1
});
};
}
}));
_sfc_main.install = (app) => {
app.component("LayColorPicker", _sfc_main);
};
export { _sfc_main as default };