@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
231 lines (230 loc) • 6.87 kB
JavaScript
import { defineComponent as _, ref as m, computed as c, provide as J, reactive as K, toRef as s, watch as b, onMounted as Q, nextTick as W, createVNode as d, renderSlot as X } from "vue";
import "../menu-item/index.mjs";
import "../menu-group/index.mjs";
import "../overflow/index.mjs";
import { useProps as Y, useNameHelper as Z, emitEvent as g } from "@vexip-ui/config";
import { isDefined as ee, callIfFunc as M } from "@vexip-ui/utils";
import k from "./menu-rest.mjs";
import { menuProps as te } from "./props.mjs";
import { MENU_STATE as re } from "./symbol.mjs";
import w from "./menu-item.mjs";
import I from "./menu-group.mjs";
import S from "../overflow/overflow.mjs";
const ne = Object.freeze(["top", "right", "bottom", "left", "none"]), ve = /* @__PURE__ */ _({
name: "Menu",
components: {
MenuRest: k,
MenuItem: w,
MenuGroup: I,
Overflow: S
},
props: te,
emits: ["update:active"],
setup(A, {
slots: F,
emit: G,
expose: N
}) {
const t = Y("menu", A, {
active: {
default: null,
static: !0
},
accordion: !1,
markerType: {
default: "right",
validator: (e) => ne.includes(e)
},
reduced: !1,
horizontal: !1,
transfer: !1,
trigger: "hover",
groupType: {
default: "collapse",
validator: (e) => ["collapse", "dropdown"].includes(e)
},
tooltipReverse: null,
options: {
default: () => [],
static: !0
},
router: null,
manualRoute: !1,
indent: null
}), a = Z("menu"), i = /* @__PURE__ */ new Set(), l = m(t.active), p = m(!1), h = m(), q = m(), y = c(() => t.horizontal && (t.markerType === "left" || t.markerType === "right") ? "bottom" : !t.horizontal && (t.markerType === "top" || t.markerType === "bottom") ? "right" : t.markerType ?? (t.horizontal ? "bottom" : "right")), L = c(() => [a.b(), a.bs("vars"), a.bm(`marker-${y.value}`), {
[a.bm("inherit")]: t.inherit,
[a.bm("reduced")]: p.value,
[a.bm("dropdown")]: t.groupType === "dropdown",
[a.bm("horizontal")]: t.horizontal
}]), P = c(() => {
const e = {};
return ee(t.indent) && (e[a.cv("indent-width")] = typeof t.indent == "number" ? `${t.indent}px` : t.indent), e;
}), E = c(() => {
var r, n;
if ((r = t.options) != null && r.length)
return t.options;
const e = (n = t.router) == null ? void 0 : n.options.routes;
return e != null && e.length ? O(e) : [];
}), v = c(() => {
var e;
return (e = t.router) == null ? void 0 : e.currentRoute.value;
});
J(re, K({
currentActive: l,
isReduced: p,
horizontal: s(t, "horizontal"),
accordion: s(t, "accordion"),
groupType: s(t, "groupType"),
tooltipReverse: s(t, "tooltipReverse"),
transfer: s(t, "transfer"),
trigger: s(t, "trigger"),
markerType: y,
handleSelect: C,
handleExpand: D,
increaseItem: $,
decreaseItem: j,
doForEachItem: B
})), b(() => t.active, (e) => {
e !== l.value && (l.value = e);
}), b(() => t.reduced, (e) => {
t.horizontal || (e ? T() : H());
}), b(v, (e) => {
var r;
!t.manualRoute && e && (l.value = ((r = e.meta) == null ? void 0 : r.label) ?? e.path);
}), Q(() => {
var e;
if (W(() => {
!t.horizontal && t.reduced && T();
}), t.router && !t.manualRoute && !l.value) {
const r = v.value;
r && (l.value = ((e = r.meta) == null ? void 0 : e.label) ?? v.value.path);
}
}), N({
expandItemByLabel: U
});
function O(e) {
const r = {
label: "",
children: []
}, n = Array.from(e).map((o) => ({
parent: r,
route: o
}));
for (; n.length; ) {
const {
parent: o,
route: u
} = n.shift(), f = u.meta || {};
if (f.menu === !1)
continue;
const z = {
...f,
route: u,
label: f.label || u.path,
name: f.name || u.name
};
o.children || (o.children = []), o.children.push(z), u.children && n.push(...u.children.map((V) => ({
parent: z,
route: V
})));
}
return r.children;
}
function $(e) {
i.add(e);
}
function j(e) {
i.delete(e);
}
function B(e) {
for (const r of i)
e(r);
}
function C(e, r, n) {
l.value !== e && (l.value = e, G("update:active", e), g(t.onSelect, e, r), !t.manualRoute && t.router && n && t.router.push(n));
}
function D(e, r, n) {
r ? g(t.onExpand, e, n) : g(t.onReduce, e, n);
}
function T() {
if (t.horizontal) return;
let e = null;
for (const r of i)
r.cachedExpanded = r.showGroup, !e && r.showGroup && (e = r), r.toggleGroupExpanded(!1);
p.value = !0;
}
function H() {
if (!t.horizontal && (p.value = !1, h.value)) {
const e = h.value, r = () => {
requestAnimationFrame(() => {
e.removeEventListener("transitionend", r);
const n = Array.from(i).find((o) => o.label === l.value);
requestAnimationFrame(() => {
requestAnimationFrame(() => {
for (const o of i)
o.groupExpanded = o.cachedExpanded;
if (n) {
let o = n.parentState;
for (; o; )
o.groupExpanded = !0, o = o.parentState;
}
});
});
});
};
e.addEventListener("transitionend", r);
}
}
function U(e) {
for (const r of i)
r.label === e && r.toggleGroupExpanded(!0, !0);
}
function x(e) {
return d(w, {
label: e.label,
icon: e.icon,
"icon-props": e.iconProps,
disabled: e.disabled,
children: e.children,
route: e.route,
meta: e.meta
}, {
default: () => [e.name ? M(e.name) : e.label]
});
}
function R() {
return E.value.map((e) => e.group ? d(I, {
key: e.label,
label: e.name ? M(e.name) : e.label
}, {
default: () => {
var r;
return [(r = e.children) != null && r.length ? e.children.map(x) : null];
}
}) : x(e));
}
return () => d("ul", {
ref: h,
class: L.value,
role: "menu",
tabindex: -1,
style: P.value
}, [X(F, "default", {}, () => t.horizontal ? [d(S, {
class: a.be("overflow"),
inherit: !0,
key: 0
}, {
default: R,
counter: ({
count: e
}) => d(k, {
ref: q,
menus: E.value.slice(-e)
}, null)
})] : R())]);
}
});
export {
ve as default
};
//# sourceMappingURL=menu.mjs.map