@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
574 lines (573 loc) • 19.5 kB
JavaScript
import { defineComponent as sl, useSlots as ul, toRef as Y, ref as v, computed as b, watch as _, nextTick as il, createElementBlock as g, openBlock as d, withKeys as T, withModifiers as K, unref as l, normalizeClass as i, createElementVNode as F, createVNode as h, renderSlot as N, withCtx as C, createCommentVNode as x, normalizeStyle as B, createBlock as L, normalizeProps as $e, mergeProps as Z, createTextVNode as ee, toDisplayString as le, Transition as cl, guardReactiveProps as fl, Fragment as dl, renderList as vl } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../input/index.mjs";
import "../popper/index.mjs";
import "../renderer/index.mjs";
import "../form/index.mjs";
import pl from "./color-palette.vue.mjs";
import bl from "./color-hue.vue.mjs";
import hl from "./color-alpha.vue.mjs";
import { usePopper as ml, placementWhileList as gl, useClickOutside as yl, useHover as kl } from "@vexip-ui/hooks";
import { useNameHelper as Cl, useProps as xl, createIconProp as ae, createStateProp as wl, createSizeProp as El, useIcons as $l, useLocale as Sl, emitEvent as $ } from "@vexip-ui/config";
import { hsvToRgb as Pl, rgbaToHex as Se, rgbToHex as Pe, parseColorToRgba as te, rgbToHsv as oe, toFixed as V, hsvToHsl as Tl, isClient as Fl, isElement as Ll, getLast as zl, toAttrValue as Te } from "@vexip-ui/utils";
import { colorPickerProps as Al } from "./props.mjs";
import { defaultShortcuts as Vl, getDefaultHsv as Hl } from "./symbol.mjs";
import { useFieldStore as Il } from "../form/helper.mjs";
import M from "../renderer/renderer.mjs";
import z from "../icon/icon.mjs";
import Dl from "../popper/popper.vue.mjs";
import _l from "../input/input.mjs";
import Fe from "../button/button.mjs";
const Kl = ["id", "aria-disabled", "aria-expanded", "aria-labelledby", "onKeydown"], Nl = ["aria-label"], Bl = ["onClick"], ia = /* @__PURE__ */ sl({
name: "ColorPicker",
__name: "color-picker",
props: Al,
emits: ["update:value", "update:visible"],
setup(Le, { expose: ze, emit: Ae }) {
const {
idFor: re,
labelId: Ve,
state: He,
disabled: Ie,
loading: De,
size: _e,
validateField: Ke,
clearField: Ne,
getFieldValue: Be,
setFieldValue: Me
} = Il(() => {
var e;
return (e = y.value) == null ? void 0 : e.focus();
}), o = Cl("color-picker"), a = xl("colorPicker", Le, {
size: El(_e),
state: wl(He),
locale: null,
value: {
default: () => Be(),
static: !0
},
visible: !1,
format: {
default: "rgb",
validator: (e) => ["rgb", "hsl", "hsv", "hex"].includes(e)
},
alpha: !1,
disabled: () => Ie.value,
transitionName: () => o.ns("drop"),
noInput: !1,
shortcut: !1,
placement: {
default: "bottom",
validator: (e) => gl.includes(e)
},
transfer: !1,
outsideClose: !0,
clearable: !1,
cancelText: null,
confirmText: null,
prefix: ae(),
prefixColor: "",
suffix: ae(),
suffixColor: "",
noSuffix: !1,
staticSuffix: !1,
loading: () => De.value,
loadingIcon: ae(),
loadingLock: !1,
loadingEffect: null,
popperAlive: null,
showLabel: !1,
labelFormat: null,
slots: () => ({})
}), R = Ae, Re = ul(), S = $l(), O = Sl("colorPicker", Y(a, "locale")), m = v(!0), c = v(a.visible), s = v(null), u = v(1), U = v(!1), Oe = Y(a, "placement"), Ue = Y(a, "transfer"), w = v(0), W = v(!1);
Q(a.value);
const ne = v(null), se = v(null), ue = v(null), ie = v(null), ce = v(null), fe = v(null), de = v(null), j = yl(Xe), q = v(), { reference: y, transferTo: ve, updatePopper: We } = ml({
placement: Oe,
transfer: Ue,
wrapper: j,
popper: b(() => {
var e;
return (e = q.value) == null ? void 0 : e.wrapper;
}),
isDrop: !0
}), { isHover: je } = kl(y), qe = b(() => [
ne.value,
se.value,
ue.value,
ie.value,
ce.value,
fe.value,
de.value
].filter(Boolean)), H = v({
...s.value,
a: u.value,
format: "hsva"
}), Ge = b(() => ({
[o.b()]: !0,
[o.ns("input-vars")]: !0,
[o.bs("vars")]: !0,
[o.bm("inherit")]: a.inherit,
[o.bm("empty")]: m.value && !c.value,
[o.bm("focused")]: c.value,
[o.bm("disabled")]: a.disabled,
[o.bm("alpha")]: a.alpha,
[o.bm(a.size)]: a.size !== "default",
[o.bm(a.state)]: a.state !== "default"
})), A = b(() => a.loading && a.loadingLock), Je = b(() => {
const e = o.be("selector");
return {
[e]: !0,
[`${e}--disabled`]: a.disabled,
[`${e}--readonly`]: A.value,
[`${e}--loading`]: a.loading,
[`${e}--${a.size}`]: a.size !== "default",
[`${e}--focused`]: c.value,
[`${e}--${a.state}`]: a.state !== "default"
};
}), p = b(() => {
const { h: e, s: t, v: r } = s.value && c.value ? s.value : H.value ?? { h: 0, s: 0, v: 0 };
return Pl(e, t, r);
}), pe = b(() => {
const { r: e, g: t, b: r } = p.value;
return a.alpha ? Se(e, t, r, u.value) : Pe(e, t, r);
}), G = b(() => a.shortcut ? Array.isArray(a.shortcut) ? a.shortcut : Vl : []), Qe = b(() => !!(Re.prefix || a.prefix || a.slots.prefix)), be = b(() => !a.disabled && !A.value && a.clearable && je.value && !m.value), J = b(() => he(a.format)), I = b(() => {
var e;
return (e = a.labelFormat ? he(a.labelFormat) : J.value) == null ? void 0 : e.toString();
});
_(
() => a.visible,
(e) => {
c.value = e;
}
), _(c, (e) => {
e && We();
}), _(
() => a.value,
(e) => {
Q(e), H.value = { ...s.value, a: u.value, format: "hsva" };
}
), _(
() => a.disabled,
(e) => {
e && k(!1);
}
), ze({
idFor: re,
isEmpty: m,
currentVisible: c,
currentValue: s,
currentAlpha: u,
rgb: p,
hex: pe,
labelColor: I,
wrapper: j,
reference: y,
popper: q,
toggleVisible: me,
focus: rl,
blur: nl
});
function Q(e) {
if (e) {
const { r: t, g: r, b: n, a: f } = te(e);
m.value = !1, s.value = oe(t, r, n), u.value = f;
} else
m.value = !0, s.value = Hl(), u.value = 1;
}
function k(e) {
c.value !== e && (c.value = e, R("update:visible", e), $(a.onToggle, e));
}
function he(e) {
let t;
if (e === "hex") {
const { r, g: n, b: f } = p.value;
a.alpha ? t = Se(r, n, f, u.value) : t = Pe(r, n, f);
} else {
switch (e) {
case "rgb": {
t = { ...p.value }, t.r = Math.round(t.r), t.g = Math.round(t.g), t.b = Math.round(t.b);
break;
}
case "hsl": {
const { h: r, s: n, v: f } = s.value;
t = Tl(r, n, f), t.h = Math.round(t.h), t.s = V(t.s, 3), t.l = V(t.l, 3);
break;
}
default:
t = { ...s.value }, t.h = Math.round(t.h), t.s = V(t.s, 3), t.v = V(t.v, 3);
}
t.a = V(u.value, 3);
}
return t;
}
function Xe() {
U.value || ($(a.onClickOutside), a.outsideClose && c.value && (k(!1), $(a.onOutsideClose)));
}
function me() {
a.disabled || A.value || k(!c.value);
}
function ge() {
a.disabled || A.value || a.clearable && (k(!1), R("update:value", ""), $(a.onChange, ""), il(() => {
Q(null), Ne(), $(a.onClear);
}));
}
function ye() {
a.disabled || A.value || (H.value = { ...s.value, a: u.value, format: "hsva" }, m.value = !1, k(!1), Ye());
}
function Ye() {
const e = J.value;
R("update:value", e), Me(e), $(a.onChange, e), Ke();
}
function Ze({ s: e, v: t }) {
s.value.s = e, s.value.v = t;
}
function el(e) {
s.value.h = e;
}
function ll(e) {
u.value = e;
}
function al(e) {
const { r: t, g: r, b: n, a: f } = te(e);
s.value = oe(t, r, n), u.value = f;
}
function ke(e) {
const { r: t, g: r, b: n, a: f } = te(e);
s.value = oe(t, r, n), u.value = f, $(a.onShortcut, J.value);
}
function P(e) {
e ? U.value = !0 : setTimeout(() => {
U.value = !1;
}, 0);
}
function Ce(e) {
var t;
if (Fl && c.value) {
const r = document && document.activeElement;
if (!r) return;
e.preventDefault();
const n = e.shiftKey, f = Array.from(qe.value), D = f.findIndex((X) => {
const Ee = Ll(X) ? X : X.$el;
return Ee === r || Ee.contains(r);
});
let E;
~D ? (n ? !D : D === f.length - 1) ? E = y.value : E = f[D + (n ? -1 : 1)] : E = n ? zl(f) : f[0], E && (typeof E.focus == "function" ? E.focus() : (t = E.$el) == null || t.focus());
}
}
function tl() {
w.value = 0, W.value = !0;
}
function ol(e) {
const t = e.code || e.key, r = G.value.length;
switch (t) {
case "ArrowUp":
case "ArrowLeft": {
w.value--;
break;
}
case "ArrowDown":
case "ArrowRight": {
w.value++;
break;
}
case "Enter":
case "Space":
case " ": {
const n = G.value[w.value];
n && ke(n);
break;
}
}
w.value = (w.value + r) % r;
}
function xe(e) {
var t;
a.disabled ? k(!1) : (e.preventDefault(), c.value ? (ye(), (t = y.value) == null || t.focus()) : k(!0));
}
function we() {
var e;
k(!1), (e = y.value) == null || e.focus();
}
function rl(e) {
var t;
(t = y.value) == null || t.focus(e);
}
function nl() {
var e;
(e = y.value) == null || e.blur();
}
return (e, t) => (d(), g("div", {
id: l(re),
ref_key: "wrapper",
ref: j,
class: i(Ge.value),
role: "group",
"aria-disabled": l(Te)(l(a).disabled),
"aria-expanded": l(Te)(c.value),
"aria-haspopup": "listbox",
"aria-labelledby": l(Ve),
onClick: me,
onKeydown: [
T(K(Ce, ["stop"]), ["tab"]),
T(xe, ["space"]),
T(we, ["escape"])
]
}, [
F("div", {
ref_key: "reference",
ref: y,
class: i(Je.value),
tabindex: "0"
}, [
N(e.$slots, "control", {
color: p.value,
alpha: u.value,
empty: m.value
}, () => [
h(l(M), {
renderer: l(a).slots.control,
data: { color: p.value, alpha: u.value, empty: m.value }
}, {
default: C(() => [
Qe.value ? (d(), g("div", {
key: 0,
class: i([l(o).be("icon"), l(o).be("prefix")]),
style: B({ color: l(a).prefixColor })
}, [
N(e.$slots, "prefix", {}, () => [
h(l(M), {
renderer: l(a).slots.prefix
}, {
default: C(() => [
h(l(z), {
icon: l(a).prefix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : x("", !0),
F("div", {
class: i(l(o).be("control"))
}, [
F("div", {
class: i([l(o).be("marker"), e.showLabel && l(o).bem("marker", "with-label")])
}, [
!c.value && m.value ? (d(), L(l(z), $e(Z({ key: 0 }, l(S).close)), null, 16)) : (d(), g("div", {
key: 1,
style: B({
width: "100%",
height: "100%",
backgroundColor: `rgba(${p.value.r}, ${p.value.g}, ${p.value.b}, ${c.value ? u.value : H.value.a})`
})
}, null, 4))
], 2),
e.showLabel ? (d(), g("div", {
key: 0,
class: i(l(o).be("label"))
}, [
N(e.$slots, "label", {
color: p.value,
alpha: u.value,
empty: m.value,
label: I.value
}, () => [
h(l(M), {
renderer: l(a).slots.label,
data: { color: p.value, alpha: u.value, empty: m.value, label: I.value }
}, {
default: C(() => [
ee(le(I.value), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)) : x("", !0)
], 2),
l(a).noSuffix ? l(a).clearable || l(a).loading ? (d(), g("div", {
key: 2,
class: i([l(o).be("icon"), l(o).bem("icon", "placeholder"), l(o).be("suffix")])
}, null, 2)) : x("", !0) : (d(), g("div", {
key: 1,
class: i([l(o).be("icon"), l(o).be("suffix")]),
style: B({
color: l(a).suffixColor,
opacity: be.value || l(a).loading ? "0%" : ""
})
}, [
N(e.$slots, "suffix", {}, () => [
h(l(M), {
renderer: l(a).slots.suffix
}, {
default: C(() => [
l(a).suffix ? (d(), L(l(z), {
key: 0,
icon: l(a).suffix,
class: i({
[l(o).be("arrow")]: !l(a).staticSuffix
})
}, null, 8, ["icon", "class"])) : (d(), L(l(z), Z({ key: 1 }, l(S).angleDown, {
class: l(o).be("arrow")
}), null, 16, ["class"]))
]),
_: 1
}, 8, ["renderer"])
])
], 6)),
h(cl, {
name: l(o).ns("fade"),
appear: ""
}, {
default: C(() => [
be.value ? (d(), g("button", {
key: 0,
class: i([l(o).be("icon"), l(o).be("clear")]),
type: "button",
tabindex: "-1",
"aria-label": l(O).ariaLabel.clear,
onClick: K(ge, ["stop"])
}, [
h(l(z), $e(fl(l(S).clear)), null, 16)
], 10, Nl)) : l(a).loading ? (d(), g("div", {
key: 1,
class: i([l(o).be("icon"), l(o).be("loading")])
}, [
h(l(z), Z(l(S).loading, {
effect: l(a).loadingEffect || l(S).loading.effect,
icon: l(a).loadingIcon || l(S).loading.icon
}), null, 16, ["effect", "icon"])
], 2)) : x("", !0)
]),
_: 1
}, 8, ["name"])
]),
_: 3
}, 8, ["renderer", "data"])
])
], 2),
h(l(Dl), {
ref_key: "popper",
ref: q,
class: i([l(o).be("popper"), l(o).bs("vars")]),
visible: c.value,
to: l(ve),
transition: l(a).transitionName,
alive: l(a).popperAlive ?? !l(ve),
onClick: t[7] || (t[7] = K(() => {
}, ["stop"])),
onKeydown: [
T(K(Ce, ["stop"]), ["tab"]),
T(xe, ["space"]),
T(we, ["escape"])
]
}, {
default: C(() => [
F("div", {
class: i(l(o).be("panel"))
}, [
F("div", {
class: i(l(o).be("section"))
}, [
h(pl, {
ref_key: "palette",
ref: ne,
hue: s.value.h,
saturation: s.value.s,
value: s.value.v,
onEditStart: t[0] || (t[0] = (r) => P(!0)),
onEditEnd: t[1] || (t[1] = (r) => P(!1)),
onChange: Ze
}, null, 8, ["hue", "saturation", "value"]),
h(bl, {
ref_key: "hue",
ref: se,
hue: s.value.h,
onEditStart: t[2] || (t[2] = (r) => P(!0)),
onEditEnd: t[3] || (t[3] = (r) => P(!1)),
onChange: el
}, null, 8, ["hue"]),
l(a).alpha ? (d(), L(hl, {
key: 0,
ref_key: "alphaEl",
ref: ue,
rgb: p.value,
alpha: u.value,
onEditStart: t[4] || (t[4] = (r) => P(!0)),
onEditEnd: t[5] || (t[5] = (r) => P(!1)),
onChange: ll
}, null, 8, ["rgb", "alpha"])) : x("", !0),
l(a).shortcut ? (d(), g("div", {
key: 1,
ref_key: "shortcutEl",
ref: ie,
class: i(l(o).be("shortcuts")),
tabindex: "-1",
onFocus: tl,
onBlur: t[6] || (t[6] = (r) => W.value = !1),
onKeydown: ol
}, [
(d(!0), g(dl, null, vl(G.value, (r, n) => (d(), g("div", {
key: n,
class: i({
[l(o).be("shortcut-item")]: !0,
[l(o).bem("shortcut-item", "hitting")]: W.value && w.value === n
}),
style: B({ backgroundColor: r }),
onClick: (f) => ke(r)
}, null, 14, Bl))), 128))
], 34)) : x("", !0)
], 2),
F("div", {
class: i(l(o).be("action"))
}, [
l(a).noInput ? x("", !0) : (d(), L(l(_l), {
key: 0,
ref_key: "input",
ref: ce,
inherit: "",
class: i(l(o).be("input")),
size: "small",
value: pe.value.toUpperCase(),
respond: !1,
onChange: al
}, null, 8, ["class", "value"])),
l(a).clearable ? (d(), L(l(Fe), {
key: 1,
ref_key: "cancel",
ref: fe,
inherit: "",
text: "",
size: "small",
onClick: ge
}, {
default: C(() => [
ee(le(l(a).cancelText || l(O).cancel), 1)
]),
_: 1
}, 512)) : x("", !0),
h(l(Fe), {
ref_key: "confirm",
ref: de,
inherit: "",
type: "primary",
size: "small",
onClick: ye
}, {
default: C(() => [
ee(le(l(a).confirmText || l(O).confirm), 1)
]),
_: 1
}, 512)
], 2)
], 2)
]),
_: 1
}, 8, ["class", "visible", "to", "transition", "alive", "onKeydown"])
], 42, Kl));
}
});
export {
ia as default
};
//# sourceMappingURL=color-picker.vue2.mjs.map