@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, useSlots as Z, inject as S, ref as k, reactive as ee, computed as n, watch as d, onMounted as le, onBeforeUnmount as ae, openBlock as L, createElementBlock as _, unref as s, normalizeClass as b, normalizeStyle as oe, createElementVNode as F, withModifiers as P, renderSlot as te, createTextVNode as ne, toDisplayString as se, createCommentVNode as ce } from "vue";
import "../form/index.mjs";
import { useProps as re, createSizeProp as ie, createStateProp 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: ie(w),
state: de(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])
}, [
te(l.$slots, "default", {}, () => [
ne(se(s(a).label), 1)
])
], 2)) : ce("", !0)
], 14, ke));
}
});
export {
Fe as default
};
//# sourceMappingURL=checkbox.vue2.mjs.map