@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
112 lines (111 loc) • 3.63 kB
JavaScript
import { defineComponent as S, reactive as m, ref as _, computed as P, provide as T, toRef as C, watchEffect as k, onMounted as z, nextTick as D, watch as I, openBlock as L, createElementBlock as M, normalizeClass as N, renderSlot as B } from "vue";
import { useProps as $, useNameHelper as q, emitEvent as H } from "@vexip-ui/config";
import { useModifier as K } from "@vexip-ui/hooks";
import { debounceMinor as O, isNull as R, removeArrayItem as j } from "@vexip-ui/utils";
import { collapseProps as F } from "./props.mjs";
import { COLLAPSE_STATE as G } from "./symbol.mjs";
const Z = /* @__PURE__ */ S({
name: "Collapse",
__name: "collapse",
props: F,
emits: ["update:expanded"],
setup(v, { expose: h, emit: x }) {
const t = $("collapse", v, {
expanded: {
default: null,
static: !0
},
card: !1,
accordion: !1,
arrowType: {
default: "right",
validator: (e) => ["right", "left", "none"].includes(e)
},
ghost: !1
}), g = x, o = q("collapse"), s = m(/* @__PURE__ */ new Set()), a = _([]), { target: i } = K({
passive: !1,
onKeyDown: (e, r) => {
if (r.left || r.right) {
if (!i.value || ![...s].find(({ tab: l }) => l === e.target)) return;
const n = Array.from(i.value.querySelectorAll(o.cbe("header")));
if (n.length < 1) return;
e.preventDefault(), e.stopPropagation();
const p = document.activeElement ? n.findIndex((l) => l === document.activeElement) : -1;
if (~p) {
const l = n[(p + (r.left ? -1 : 1) + n.length) % n.length];
l == null || l.focus();
}
} else r.escape && (e.preventDefault(), e.stopPropagation(), A());
}
}), y = P(() => [
o.b(),
o.bs("vars"),
o.bm(`arrow-${t.arrowType}`),
{
[o.bm("inherit")]: t.inherit,
[o.bm("card")]: t.card,
[o.bm("ghost")]: !t.card && t.ghost
}
]), u = O(() => {
if (Array.from(s.values()).forEach((e, r) => {
R(e.label) && (e.label = r + 1);
}), s.size)
for (const e of s)
a.value.includes(e.label) ? e.expanded = !0 : e.expanded && f(e.label, !0);
});
T(
G,
m({
arrowType: C(t, "arrowType"),
registerPanel: E,
unregisterPanel: b,
expandPanel: f,
refreshLabels: u
})
), k(() => {
const e = t.expanded, r = t.accordion && Array.isArray(e) ? e[0] : e || e === 0 ? e : [];
a.value = Array.isArray(r) ? Array.from(r) : [r];
}), z(() => {
D(c), I(a, (e, r) => {
w(e, r) || c();
});
}), h({ currentExpanded: a, wrapper: i });
function E(e) {
s.add(e), u();
}
function b(e) {
s.delete(e), f(e.label, !1), u();
}
function w(e, r) {
const n = new Set(e);
return n.size !== new Set(r).size ? !1 : r.every((p) => n.has(p));
}
function f(e, r) {
!e && e !== 0 || (t.accordion ? a.value = r ? [e] : [] : r ? a.value.push(e) : j(a.value, e), d(), c());
}
function A() {
a.value.length && (a.value = [], d(), c());
}
function d() {
g("update:expanded", a.value), H(t.onChange, a.value);
}
function c() {
s.forEach((e) => {
e.setExpanded(a.value.includes(e.label));
});
}
return (e, r) => (L(), M("div", {
ref_key: "wrapper",
ref: i,
class: N(y.value),
role: "tablist",
tabindex: "-1"
}, [
B(e.$slots, "default")
], 2));
}
});
export {
Z as default
};
//# sourceMappingURL=collapse.vue2.mjs.map