@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
198 lines (197 loc) • 5.88 kB
JavaScript
import { defineComponent as ee, toRef as i, ref as oe, computed as p, provide as te, reactive as ae, watch as F, createElementBlock as b, openBlock as d, unref as s, normalizeClass as le, renderSlot as ne, createBlock as m, createCommentVNode as re, withCtx as g, createTextVNode as v, toDisplayString as k, Fragment as A, renderList as ce } from "vue";
import "../form/index.mjs";
import "./index.mjs";
import { useProps as se, createStateProp as ie, createSizeProp as de, useNameHelper as ue, useLocale as fe, emitEvent as pe } from "@vexip-ui/config";
import { parseColorToRgba as he, adjustAlpha as be, debounceMinor as P, isDefined as C, isClient as me, isObject as ge } from "@vexip-ui/utils";
import { checkboxGroupProps as ve } from "./props.mjs";
import { GROUP_STATE as ke } from "./symbol.mjs";
import { useFieldStore as Ce } from "../form/helper.mjs";
import y from "./checkbox.vue2.mjs";
const ye = ["id", "aria-labelledby"], Ge = /* @__PURE__ */ ee({
name: "CheckboxGroup",
__name: "checkbox-group",
props: ve,
emits: ["update:value"],
setup(w, { expose: G, emit: I }) {
const {
idFor: _,
labelId: S,
state: M,
disabled: N,
loading: T,
size: V,
validateField: B,
getFieldValue: R,
setFieldValue: j
} = Ce(L), o = se("checkboxGroup", w, {
size: de(V),
state: ie(M),
locale: null,
value: {
default: () => R(),
static: !0
},
vertical: !1,
disabled: () => N.value,
border: !1,
options: {
default: () => [],
static: !0
},
loading: () => T.value,
control: null,
loadingLock: !1,
color: null,
stateColor: !1
}), D = I, n = ue("checkbox-group"), O = fe("checkbox", i(o, "locale")), l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), r = oe(o.value || []), $ = p(() => o.loading && o.loadingLock), H = p(() => [
n.b(),
n.ns("checkbox-vars"),
{
[n.bm("inherit")]: o.inherit,
[n.bm("vertical")]: o.vertical,
[n.bm("disabled")]: o.disabled,
[n.bm("readonly")]: $.value,
[n.bm("loading")]: o.loading,
[n.bm(o.size)]: o.size !== "default",
[n.bm("border")]: o.border,
[n.bm(o.state)]: o.state !== "default"
}
]), U = p(() => typeof o.control == "string" ? o.control : O.value.all), q = p(() => {
if (!o.color) return null;
const e = he(o.color);
return {
base: e.toString(),
opacity6: be(e, 0.4).toString()
};
}), x = P(() => {
r.value = [], l.forEach((e, t) => {
e && r.value.push(t);
}), X(r.value);
}), f = P(() => {
const e = r.value.length, t = e === l.size, a = e > 0 && !t;
h.forEach((c) => {
c.checked = t, c.partial = a;
});
});
te(
ke,
ae({
currentValues: r,
size: i(o, "size"),
state: i(o, "state"),
disabled: i(o, "disabled"),
loading: i(o, "loading"),
loadingLock: i(o, "loadingLock"),
colorMap: q,
stateColor: i(o, "stateColor"),
increaseItem: J,
decreaseItem: K,
increaseControl: z,
decreaseControl: E,
handleControlChange: W,
setItemChecked: Q,
replaceValue: Y
})
), F(
() => o.value,
(e) => {
const t = new Set(e), a = Array.from(l.keys());
r.value = [], a.forEach((c) => {
const Z = t.has(c);
l.set(c, t.has(c)), Z && r.value.push(c);
});
}
), F(r, () => {
f();
});
function J(e, t, a) {
l.set(e, t), u.add(a);
}
function K(e, t) {
l.delete(e), u.delete(t);
}
function z(e) {
h.add(e), f();
}
function E(e) {
h.delete(e);
}
function Q(e, t) {
!C(e) || !l.has(e) || (l.set(e, t), x(), f());
}
function W() {
const e = Array.from(l.keys()), t = r.value.length !== e.length;
e.forEach((a) => {
l.set(a, t);
}), x(), f();
}
function X(e) {
D("update:value", e), j(e), pe(o.onChange, e), B();
}
function Y(e, t) {
C(e) && C(t) && e !== t && l.has(e) && (l.set(t, l.get(e)), l.delete(e));
}
function L(e) {
var a;
const t = (a = Array.from(u)[0]) == null ? void 0 : a.value;
me && t && document.activeElement !== t && t.focus(e);
}
return G({
idFor: _,
labelId: S,
increaseControl: z,
decreaseControl: E,
focus: L,
blur: () => {
var e;
for (const t of u)
(e = t.value) == null || e.blur();
}
}), (e, t) => (d(), b("div", {
id: s(_),
class: le(H.value),
role: "group",
"aria-labelledby": s(S)
}, [
ne(e.$slots, "default", {}, () => [
s(o).control ? (d(), m(s(y), {
key: 0,
inherit: "",
control: ""
}, {
default: g(() => [
v(k(U.value), 1)
]),
_: 1
})) : re("", !0),
(d(!0), b(A, null, ce(s(o).options, (a, c) => (d(), b(A, { key: c }, [
s(ge)(a) ? (d(), m(s(y), {
key: 0,
inherit: "",
value: a.value,
control: a.control,
disabled: a.disabled
}, {
default: g(() => [
v(k(a.label || a.value), 1)
]),
_: 2
}, 1032, ["value", "control", "disabled"])) : (d(), m(s(y), {
key: 1,
inherit: "",
value: a
}, {
default: g(() => [
v(k(a), 1)
]),
_: 2
}, 1032, ["value"]))
], 64))), 128))
])
], 10, ye));
}
});
export {
Ge as default
};
//# sourceMappingURL=checkbox-group.vue2.mjs.map