dk-plus
Version:
107 lines (106 loc) • 3.99 kB
JavaScript
import { defineComponent as _, ref as b, reactive as U, computed as s, watch as j } from "vue";
import { dkColorPickerPanelProps as q } from "./index3.js";
import { colorPickerPanelEmits as z } from "./index4.js";
import { hsvaToRgba as y, rgbaToCss as x, formatColor as G, parseToRgba as E, rgbaToHsva as L, rgbaToHex as J } from "./index5.js";
const v = (n, r, l) => Math.min(l, Math.max(r, n)), S = (n) => {
var r, l;
if ("touches" in n) {
const a = n.touches[0] || n.changedTouches[0];
return { x: (r = a == null ? void 0 : a.clientX) != null ? r : 0, y: (l = a == null ? void 0 : a.clientY) != null ? l : 0 };
}
return { x: n.clientX, y: n.clientY };
}, W = _({
name: "DkColorPickerPanel",
props: q,
emits: z,
setup(n, { emit: r }) {
const l = b(null), a = b(null), d = b(null), o = U({
hsva: { h: 0, s: 100, v: 100, a: 1 },
inputText: ""
}), m = s(() => y(o.hsva)), k = s(() => ({ background: x(m.value) })), C = s(() => {
const e = y({ h: o.hsva.h, s: 100, v: 100, a: 1 });
return `rgb(${e.r}, ${e.g}, ${e.b})`;
}), P = s(() => ({ background: C.value })), D = s(() => {
const e = y({ ...o.hsva, a: 1 });
return {
background: `linear-gradient(to right, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgba(${e.r}, ${e.g}, ${e.b}, 1))`
};
}), R = s(() => ({
left: `${v(o.hsva.s, 0, 100)}%`,
top: `${100 - v(o.hsva.v, 0, 100)}%`
})), B = s(() => ({ left: `${v(o.hsva.h, 0, 360) / 360 * 100}%` })), M = s(() => ({ left: `${v(o.hsva.a, 0, 1) * 100}%` })), V = s(() => G(m.value, n.format, n.showAlpha)), g = () => {
o.inputText = n.showAlpha ? x(m.value) : J(m.value);
}, h = (e = !1) => {
const t = V.value;
r("update:modelValue", t), r("active-change", t), r("update:rgba", m.value), e && r("change", t), g();
}, A = (e) => {
const t = E(e);
if (!t) {
g();
return;
}
o.hsva = L(t), g();
};
j(
() => n.modelValue,
(e) => {
A(e);
},
{ immediate: !0 }
);
const w = (e, t, i) => {
const f = e.getBoundingClientRect(), { x: c } = S(t), u = v((c - f.left) / f.width, 0, 1);
i === "hue" ? o.hsva.h = u * 360 : o.hsva.a = u, h(!1);
}, T = (e) => {
if (!l.value)
return;
const t = l.value.getBoundingClientRect(), { x: i, y: f } = S(e), c = v((i - t.left) / t.width, 0, 1), u = v((f - t.top) / t.height, 0, 1);
o.hsva.s = c * 100, o.hsva.v = (1 - u) * 100, h(!1);
}, p = (e, t, i) => {
if (n.disabled)
return;
e.preventDefault();
const c = ($) => {
$.preventDefault(), t($);
}, u = () => {
window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", u), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", u), i == null || i();
};
window.addEventListener("mousemove", c), window.addEventListener("mouseup", u), window.addEventListener("touchmove", c, { passive: !1 }), window.addEventListener("touchend", u);
}, H = (e) => {
n.disabled || (T(e), p(e, T, () => h(!0)));
}, F = (e) => {
!a.value || n.disabled || (w(a.value, e, "hue"), p(e, (t) => a.value && w(a.value, t, "hue"), () => h(!0)));
}, I = (e) => {
!d.value || n.disabled || (w(d.value, e, "alpha"), p(e, (t) => d.value && w(d.value, t, "alpha"), () => h(!0)));
}, X = () => {
if (n.disabled)
return;
const e = E(o.inputText);
if (!e) {
g();
return;
}
o.hsva = L(e), h(!0);
}, Y = s(() => ({ width: n.width }));
return {
svRef: l,
hueRef: a,
alphaRef: d,
state: o,
rootStyle: Y,
svBgStyle: P,
svThumbStyle: R,
hueThumbStyle: B,
alphaThumbStyle: M,
alphaBgStyle: D,
previewStyle: k,
onSvDown: H,
onHueDown: F,
onAlphaDown: I,
onInputBlur: X
};
}
});
export {
W as default
};