@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, openBlock as d, createElementBlock as b, unref as s, normalizeClass as le, renderSlot as ne, createBlock as m, withCtx as g, createTextVNode as v, toDisplayString as k, createCommentVNode as re, Fragment as A, renderList as ce } from "vue";
import "../form/index.mjs";
import "./index.mjs";
import { useProps as se, createSizeProp as ie, createStateProp 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: ie(V),
state: de(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