@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
189 lines (188 loc) • 6.12 kB
JavaScript
import { defineComponent as Y, ref as k, useSlots as Z, inject as S, reactive as ee, computed as n, watch as d, onMounted as le, onBeforeUnmount as ae, createElementBlock as L, openBlock as _, unref as s, normalizeStyle as oe, normalizeClass as b, createElementVNode as F, createCommentVNode as te, withModifiers as P, renderSlot as ne, createTextVNode as se, toDisplayString as ce } from "vue";
import "../form/index.mjs";
import { useProps as re, createStateProp as ie, createSizeProp as de, useNameHelper as ue, emitEvent as E } from "@vexip-ui/config";
import { parseColorToRgba as be, adjustAlpha as me, isDefined as fe, isFunction as C } from "@vexip-ui/utils";
import { checkboxProps as ve } from "./props.mjs";
import { GROUP_STATE as pe } from "./symbol.mjs";
import { useFieldStore as he } from "../form/helper.mjs";
const ke = ["id", "aria-disabled", "aria-labelledby"], Ce = ["checked", "disabled", "tabindex", "name"], Fe = /* @__PURE__ */ Y({
name: "Checkbox",
__name: "checkbox",
props: ve,
emits: ["update:checked"],
setup(N, { expose: M, emit: T }) {
const {
idFor: x,
labelId: y,
state: B,
disabled: D,
loading: j,
size: w,
validateField: A,
getFieldValue: R,
setFieldValue: U
} = he(() => {
var l;
return (l = r.value) == null ? void 0 : l.focus();
}), a = re("checkbox", N, {
size: de(w),
state: ie(B),
checked: {
default: () => R(),
static: !0
},
label: null,
value: {
default: null,
static: !0
},
labelClass: null,
disabled: () => D.value,
border: !1,
control: !1,
partial: !1,
tabIndex: 0,
loading: () => j.value,
loadingLock: !1,
name: {
default: "",
static: !0
},
color: null,
stateColor: !1
}), $ = T, G = Z(), e = S(pe, null), t = ue("checkbox"), c = k(a.checked ?? !1), m = k(a.partial), r = k(), f = ee({
checked: c,
partial: m
}), g = n(() => (e == null ? void 0 : e.size) || a.size), V = n(() => (e == null ? void 0 : e.state) || a.state), u = n(() => (e == null ? void 0 : e.disabled) || a.disabled), v = n(() => (e == null ? void 0 : e.loading) || a.loading), H = n(() => (e == null ? void 0 : e.loadingLock) || a.loadingLock), O = n(() => (e == null ? void 0 : e.stateColor) || a.stateColor), p = n(() => v.value && H.value), q = n(() => [
t.b(),
t.bs("vars"),
{
[t.bm("inherit")]: a.inherit,
[t.bm("checked")]: c.value,
[t.bm("disabled")]: u.value,
[t.bm("readonly")]: p.value,
[t.bm("loading")]: v.value,
[t.bm(g.value)]: g.value !== "default",
[t.bm("border")]: a.border,
[t.bm("partial")]: a.control && m.value,
[t.bm(V.value)]: V.value !== "default"
}
]), z = n(() => {
if (!a.color) return e == null ? void 0 : e.colorMap;
const l = be(a.color);
return {
base: l.toString(),
opacity6: me(l, 0.4).toString()
};
}), J = n(() => {
if (!z.value) return {};
const { base: l, opacity6: o } = z.value;
return t.cvm({
"label-color-checked": l,
"b-color": O.value ? l : void 0,
"b-color-hover": l,
"b-color-checked": l,
"signal-bg-color-checked": l,
"s-color-focus": o
});
}), K = n(() => fe(a.label) && a.label !== ""), i = n(() => a.value ?? a.label);
if (d(
() => a.checked,
(l) => {
h(l);
}
), d(
() => a.partial,
(l) => {
m.value = l;
}
), e) {
let l = !1;
d(i, (o, I) => {
C(e.replaceValue) && e.replaceValue(I, o);
}), d(
() => a.control,
(o) => {
o ? (l && (e.decreaseItem(i.value, r), l = !1), e.increaseControl(f)) : e.decreaseControl(f);
},
{ immediate: !0 }
), d(
() => e.currentValues,
(o) => {
a.control || h(o.includes(i.value));
},
{ immediate: !0 }
), le(() => {
a.control || (e.increaseItem(i.value, c.value, r), l = !0);
}), ae(() => {
a.control ? e.decreaseControl(f) : e.decreaseItem(i.value, r);
});
}
M({
idFor: x,
labelId: y,
currentChecked: c,
input: r,
focus: (l) => {
var o;
return (o = r.value) == null ? void 0 : o.focus(l);
},
blur: () => {
var l;
return (l = r.value) == null ? void 0 : l.blur();
}
});
function Q() {
const l = c.value;
$("update:checked", l), U(l), E(a.onChange, l);
}
function h(l) {
a.control && C(e == null ? void 0 : e.handleControlChange) ? e.handleControlChange() : c.value !== l && (c.value = l, Q());
}
function W(l) {
u.value || p.value || (h(l), !a.control && e && C(e.setItemChecked) && e.setItemChecked(i.value, l), e || A());
}
function X(l) {
E(a.onClick, l);
}
return (l, o) => (_(), L("label", {
id: s(x),
class: b(q.value),
style: oe(J.value),
"aria-disabled": u.value,
"aria-labelledby": s(y),
onClick: X
}, [
F("input", {
ref_key: "input",
ref: r,
type: "checkbox",
class: b(s(t).be("input")),
checked: c.value,
disabled: u.value || p.value,
tabindex: s(a).tabIndex,
name: s(a).name,
onSubmit: o[0] || (o[0] = P(() => {
}, ["prevent"])),
onChange: o[1] || (o[1] = (I) => W(!c.value)),
onClick: o[2] || (o[2] = P(() => {
}, ["stop"]))
}, null, 42, Ce),
F("span", {
class: b([s(t).be("signal"), v.value && s(t).bem("signal", "active")])
}, null, 2),
K.value || G.default ? (_(), L("span", {
key: 0,
class: b([s(t).be("label"), s(a).labelClass])
}, [
ne(l.$slots, "default", {}, () => [
se(ce(s(a).label), 1)
])
], 2)) : te("", !0)
], 14, ke));
}
});
export {
Fe as default
};
//# sourceMappingURL=checkbox.vue2.mjs.map