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 f, computed as y, watchEffect as g, createElementBlock as o, openBlock as u, mergeProps as $, unref as h, Fragment as z, renderList as F, normalizeClass as v, createElementVNode as b, createCommentVNode as m, renderSlot as C, createTextVNode as I, toDisplayString as L, nextTick as w } from "vue";
import { useInject as q, useSlotsExist as G } from "../utils/index.js";
const H = ["onClick"], J = ["onAnimationend"], K = { class: "checkbox-label" }, M = {
key: 0,
class: "checkbox-label"
}, U = /* @__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(c, { emit: V }) {
const t = c, i = f(!1), s = f([]), d = f(!1), n = f([]), { colorPalettes: p } = q("Checkbox"), r = V, E = G(["default"]), A = y(() => t.options.length), B = y(() => !t.vertical && Array.isArray(t.gap) ? `${t.gap[1]}px ${t.gap[0]}px` : `${t.gap}px`);
g(() => {
i.value = t.checked;
}), g(() => {
s.value = t.value;
});
function k(e) {
return e === void 0 ? t.disabled : e;
}
function W() {
O(), i.value = !i.value, r("update:checked", i.value), r("change", i.value);
}
function N(e) {
if (D(e), s.value.includes(e)) {
const a = s.value.filter((l) => l !== e);
s.value = a, r("update:value", a), r("change", a);
} else {
const a = [...s.value, e];
s.value = a, r("update:value", a), r("change", a);
}
}
function O() {
d.value ? (d.value = !1, w(() => {
d.value = !0;
})) : d.value = !0;
}
function S() {
d.value = !1;
}
function D(e) {
n.value.includes(e) ? (n.value = n.value.filter((a) => a !== e), w(() => {
n.value.push(e);
})) : n.value.push(e);
}
function P(e) {
n.value = n.value.filter((a) => a !== e);
}
return (e, a) => A.value ? (u(), o("div", $({
key: 0,
class: ["checkbox-wrap", { "checkbox-vertical": c.vertical }],
style: `--checkbox-gap: ${B.value}; --checkbox-primary-color: ${h(p)[5]};`
}, e.$attrs), [
(u(!0), o(z, null, F(c.options, (l, x) => (u(), o("div", {
class: v(["checkbox-container", { "checkbox-disabled": k(l.disabled) }]),
key: x,
onClick: (T) => k(l.disabled) ? () => !1 : N(l.value)
}, [
b("span", {
class: v(["checkbox-box", { "checkbox-checked": s.value.includes(l.value) }])
}, [
k(l.disabled) ? m("", !0) : (u(), o("span", {
key: 0,
class: v(["checkbox-wave", { "wave-active": n.value.includes(l.value) }]),
onAnimationend: (T) => P(l.value)
}, null, 42, J))
], 2),
b("span", K, [
C(e.$slots, "default", {
option: l,
label: l.label,
index: x
}, () => [
I(L(l.label), 1)
], !0)
])
], 10, H))), 128))
], 16)) : (u(), o("div", $({
key: 1,
class: ["checkbox-container", { "checkbox-disabled": c.disabled }],
style: `--checkbox-primary-color: ${h(p)[5]};`,
onClick: a[0] || (a[0] = (l) => c.disabled ? () => !1 : W())
}, e.$attrs), [
b("span", {
class: v(["checkbox-box", {
"checkbox-checked": i.value && !c.indeterminate,
"checkbox-indeterminate": c.indeterminate
}])
}, [
c.disabled ? m("", !0) : (u(), o("span", {
key: 0,
class: v(["checkbox-wave", { "wave-active": d.value }]),
onAnimationend: S
}, null, 34))
], 2),
h(E).default ? (u(), o("span", M, [
C(e.$slots, "default", {}, void 0, !0)
])) : m("", !0)
], 16));
}
});
export {
U as default
};