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