vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
112 lines (111 loc) • 4.05 kB
JavaScript
import { defineComponent as j, ref as v, computed as x, watchEffect as y, createElementBlock as s, openBlock as o, mergeProps as g, unref as k, Fragment as z, renderList as F, normalizeClass as d, createElementVNode as h, createCommentVNode as p, renderSlot as $, createTextVNode as I, toDisplayString as L, nextTick as C } from "vue";
import { useInject as _, useSlotsExist as q } from "../utils/index.js";
const G = ["onClick"], H = ["onAnimationend"], J = { class: "checkbox-label" }, K = {
key: 0,
class: "checkbox-label"
}, R = /* @__PURE__ */ j({
__name: "Checkbox",
props: {
options: { default: () => [] },
disabled: { type: Boolean, default: !1 },
vertical: { type: Boolean, default: !1 },
value: { default: () => [] },
gap: { default: 8 },
indeterminate: { type: Boolean, default: !1 },
checked: { type: Boolean, default: !1 }
},
emits: ["update:value", "update:checked", "change"],
setup(w, { emit: V }) {
const t = w, u = v(!1), c = v([]), i = v(!1), n = v([]), { colorPalettes: b } = _("Checkbox"), r = V, E = q(["default"]), A = x(() => t.options.length), B = x(() => !t.vertical && Array.isArray(t.gap) ? `${t.gap[1]}px ${t.gap[0]}px` : `${t.gap}px`);
y(() => {
u.value = t.checked;
}), y(() => {
c.value = t.value;
});
function f(e) {
return e === void 0 ? t.disabled : e;
}
function W() {
O(), u.value = !u.value, r("update:checked", u.value), r("change", u.value);
}
function N(e) {
if (D(e), c.value.includes(e)) {
const a = c.value.filter((l) => l !== e);
c.value = a, r("update:value", a), r("change", a);
} else {
const a = [...c.value, e];
c.value = a, r("update:value", a), r("change", a);
}
}
function O() {
i.value ? (i.value = !1, C(() => {
i.value = !0;
})) : i.value = !0;
}
function S() {
i.value = !1;
}
function D(e) {
n.value.includes(e) ? (n.value = n.value.filter((a) => a !== e), C(() => {
n.value.push(e);
})) : n.value.push(e);
}
function P(e) {
n.value = n.value.filter((a) => a !== e);
}
return (e, a) => A.value ? (o(), s("div", g({
key: 0,
class: ["checkbox-wrap", { "checkbox-vertical": e.vertical }],
style: `--checkbox-gap: ${B.value}; --checkbox-primary-color: ${k(b)[5]};`
}, e.$attrs), [
(o(!0), s(z, null, F(e.options, (l, m) => (o(), s("div", {
class: d(["checkbox-container", { "checkbox-disabled": f(l.disabled) }]),
key: m,
onClick: (T) => f(l.disabled) ? () => !1 : N(l.value)
}, [
h("span", {
class: d(["checkbox-box", { "checkbox-checked": c.value.includes(l.value) }])
}, [
f(l.disabled) ? p("", !0) : (o(), s("span", {
key: 0,
class: d(["checkbox-wave", { "wave-active": n.value.includes(l.value) }]),
onAnimationend: (T) => P(l.value)
}, null, 42, H))
], 2),
h("span", J, [
$(e.$slots, "default", {
option: l,
label: l.label,
index: m
}, () => [
I(L(l.label), 1)
], !0)
])
], 10, G))), 128))
], 16)) : (o(), s("div", g({
key: 1,
class: ["checkbox-container", { "checkbox-disabled": e.disabled }],
style: `--checkbox-primary-color: ${k(b)[5]};`,
onClick: a[0] || (a[0] = (l) => e.disabled ? () => !1 : W())
}, e.$attrs), [
h("span", {
class: d(["checkbox-box", {
"checkbox-checked": u.value && !e.indeterminate,
"checkbox-indeterminate": e.indeterminate
}])
}, [
e.disabled ? p("", !0) : (o(), s("span", {
key: 0,
class: d(["checkbox-wave", { "wave-active": i.value }]),
onAnimationend: S
}, null, 34))
], 2),
k(E).default ? (o(), s("span", K, [
$(e.$slots, "default", {}, void 0, !0)
])) : p("", !0)
], 16));
}
});
export {
R as default
};