vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
67 lines (66 loc) • 1.72 kB
JavaScript
import { computed as x, ref as m, provide as z, watch as C, onMounted as M, onBeforeUnmount as O } from "vue";
import { Utils as U } from "@vuux/utils";
const S = (e, r, s) => {
const v = x(() => ({
"app-menu": !0,
["is-" + e.mode]: !0,
["is-" + e.theme]: !0,
"is-shadow": e.shadow
})), l = m(e.selectedKey), t = m([]), h = (n, c) => {
if (c && !t.value.includes(n))
t.value.push(n);
else if (!c) {
const o = t.value.indexOf(n);
o !== -1 && t.value.splice(o, 1);
}
}, y = (n) => {
l.value = n;
}, u = (n) => {
if (e.mode === "horizontal")
return;
const c = (g, a) => {
for (const i of g) {
if (i[e.skey] === a)
return [i[e.skey]];
if (i.children) {
const f = c(i.children, a);
if (f)
return [i[e.skey], ...f];
}
}
return null;
}, o = c(e.data, n);
t.value = o || [];
}, d = () => {
t.value = [], l.value = "";
}, K = (n) => {
s("change", n);
}, k = (n) => {
s("select", n);
};
return z("menuContext", {
props: e,
openKeys: t,
selectKeys: l,
onOpenKeys: h,
onSelectKey: y
}), C(
() => e.selectedKey,
(n) => {
l.value = n, n ? u(n) : t.value = [];
}
), U.useClickOutside(r, () => {
e.mode == "horizontal" && (t.value = []);
}), M(() => {
e.selectedKey && u(e.selectedKey), e.trigger === "click" && e.mode === "horizontal" && document.addEventListener("click", d, !1);
}), O(() => {
e.trigger === "click" && e.mode === "horizontal" && document.removeEventListener("click", d, !1);
}), {
classNames: v,
onChange: K,
onSelect: k
};
};
export {
S as useMenu
};