@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
79 lines (78 loc) • 2.29 kB
JavaScript
import { defineComponent as T, inject as d, ref as g, computed as f, provide as N, reactive as S, renderSlot as y, createVNode as l } from "vue";
import "../menu-item/index.mjs";
import { useProps as U, useNameHelper as s } from "@vexip-ui/config";
import { callIfFunc as b } from "@vexip-ui/utils";
import { MENU_STATE as _, MENU_ITEM_STATE as A, MENU_GROUP_STATE as G } from "./symbol.mjs";
import P from "./menu-item.mjs";
const I = /* @__PURE__ */ T({
name: "MenuGroup",
props: {
label: String,
children: Array
},
setup(m, {
slots: n
}) {
const u = U("menuGroup", m, {
label: {
default: "",
static: !0
},
children: {
default: () => [],
static: !0
}
}), o = d(_, null), r = d(A, null), a = s("menu-group"), h = s("menu"), c = g(1);
r && (c.value = r.indent + 1);
const v = f(() => ({
paddingLeft: r != null && r.isUsePopper ? void 0 : `calc(${h.gcv("indent-width")} * ${c.value})`
})), E = f(() => (o == null ? void 0 : o.horizontal) && !r);
N(G, S({
indent: c
}));
function M() {
return y(n, "default", {}, () => {
var i;
if (!((i = u.children) != null && i.length))
return [];
const t = (e) => l(P, {
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 ? b(e.name) : e.label]
});
return u.children.map((e) => e.group ? l(I, {
key: e.label,
label: e.name ? b(e.name) : e.label
}, {
default: () => {
var p;
return [(p = e.children) == null ? void 0 : p.map(t)];
}
}) : t(e));
});
}
return () => {
var t;
return E.value ? (t = n.default) == null ? void 0 : t.call(n) : l("li", {
class: a.b()
}, [l("div", {
class: a.be("label")
}, [l("span", {
class: a.be("title"),
style: v.value
}, [n.label ? n.label() : u.label])]), l("ul", {
class: a.be("list")
}, [M()])]);
};
}
});
export {
I as default
};
//# sourceMappingURL=menu-group.mjs.map