@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
271 lines (270 loc) • 9.89 kB
JavaScript
import { defineAsyncComponent as fe, defineComponent as pe, inject as G, ref as m, computed as u, reactive as ve, toRef as be, provide as he, watch as g, nextTick as V, onBeforeUnmount as me, createVNode as t, renderSlot as E, mergeProps as W, withDirectives as ge, vShow as Ee } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import "../popper/index.mjs";
import "../tooltip/index.mjs";
import { useProps as Te, createIconProp as ye, useNameHelper as Pe, useIcons as Me, useHoverDelay as we, emitEvent as ke } from "@vexip-ui/config";
import { useRtl as xe, useClickOutside as Ue, usePopper as Ne, useSetTimeout as Re } from "@vexip-ui/hooks";
import { callIfFunc as q } from "@vexip-ui/utils";
import { menuItemProps as Ae } from "./props.mjs";
import { MENU_STATE as Ce, MENU_ITEM_STATE as J, MENU_GROUP_STATE as $e } from "./symbol.mjs";
import Ge from "../tooltip/tooltip.mjs";
import Q from "../icon/icon.mjs";
import De from "../collapse/collapse-transition.mjs";
import Le from "../popper/popper.vue.mjs";
const ze = fe(() => import("./menu-group.mjs")), _e = /* @__PURE__ */ pe({
name: "MenuItem",
props: Ae,
emits: [],
setup(X, {
slots: c,
expose: Y
}) {
const r = Te("menuItem", X, {
label: {
default: null,
static: !0
},
icon: ye(),
iconProps: null,
disabled: !1,
transfer: null,
trigger: null,
transitionName: null,
meta: null,
children: {
default: () => [],
static: !0
},
route: null
}), e = G(Ce, null), l = G(J, null), U = G($e, null), a = Pe("menu"), Z = Me(), D = we(), {
isRtl: N
} = xe(), p = a.be("item"), L = m(N.value ? "left-start" : "right-start"), i = m(!1), T = m(!1), R = m(!1), v = m(!1), z = u(() => ((l == null ? void 0 : l.indent) ?? 0) + 1), _ = u(() => r.transfer ?? (e == null ? void 0 : e.transfer) ?? !1), F = u(() => l ? l.transfer : !1), I = u(() => !F.value && _.value), S = u(() => (e == null ? void 0 : e.markerType) || "right"), A = Ue(se), H = m(), {
reference: ee,
transferTo: O,
updatePopper: le
} = Ne({
placement: L,
transfer: I,
wrapper: A,
popper: u(() => {
var o;
return (o = H.value) == null ? void 0 : o.wrapper;
}),
shift: {
crossAxis: !0
}
}), d = u(() => {
var o;
return !!(c.group || (o = r.children) != null && o.length);
}), b = u(() => d.value && i.value), oe = u(() => ({
[p]: !0,
[`${p}--disabled`]: r.disabled,
[`${p}--group-visible`]: b.value,
[`${p}--selected`]: T.value,
[`${p}--no-icon`]: !r.icon,
[`${p}--son-selected`]: R.value
})), re = u(() => {
if (e != null && e.horizontal || l != null && l.isUsePopper)
return {};
const o = a.gcv("indent-width"), s = z.value + (e != null && e.isReduced ? 0 : (U == null ? void 0 : U.indent) ?? 0) * 0.25;
return {
paddingInlineStart: l && l.isUsePopper ? void 0 : `calc(${o} * ${s})`
};
}), f = u(() => e && (e.horizontal || e.groupType === "dropdown") || d.value && (e == null ? void 0 : e.isReduced) && !l || !!(l != null && l.isUsePopper)), ne = u(() => d.value || !!(l != null && l.isUsePopper || e && !e.isReduced)), ae = u(() => !!(e != null && e.tooltipReverse)), y = u(() => (e == null ? void 0 : e.horizontal) && !l), ue = u(() => r.transitionName ?? y.value ? a.ns("drop") : a.ns("zoom")), P = u(() => r.trigger || (e == null ? void 0 : e.trigger) || "hover"), C = ve({
el: A,
label: be(r, "label"),
indent: z,
groupExpanded: i,
showGroup: b,
isUsePopper: f,
parentState: l,
transfer: u(() => F.value || _.value),
cachedExpanded: i.value,
updateSonSelected: ie,
toggleGroupExpanded: K,
handleMouseEnter: k,
handleMouseLeave: x
});
he(J, C), g(b, (o) => {
o && f.value && (v.value = !0, le());
}, {
immediate: !0
}), g(T, (o) => {
o && ke(r.onSelect), e == null || e.doForEachItem((s) => s.updateSonSelected(!1, !1)), o && V(() => {
l == null || l.updateSonSelected(o);
});
}), g(i, (o) => {
typeof (e == null ? void 0 : e.handleExpand) == "function" && e.handleExpand(r.label, o, r.meta || {});
}), g(y, (o) => {
L.value = o ? "bottom" : N.value ? "left-start" : "right-start";
}, {
immediate: !0
}), e && (g([() => r.label, () => e.currentActive], () => {
T.value = r.label === e.currentActive;
}, {
immediate: !0
}), typeof e.increaseItem == "function" && e.increaseItem(C)), me(() => {
typeof (e == null ? void 0 : e.decreaseItem) == "function" && e.decreaseItem(C);
}), Y({
groupExpanded: i,
isGroup: d,
showGroup: b,
isUsePopper: f,
handleSelect: M,
handleMouseEnter: k,
handleMouseLeave: x
});
function ie(o, s = !0) {
R.value = o, s && (l == null || l.updateSonSelected(o));
}
const {
timer: h
} = Re();
function M() {
if (clearTimeout(h.hover), !r.disabled)
if (d.value) {
if (f.value && P.value !== "click") return;
e == null || e.doForEachItem((o) => {
e.accordion && (o.groupExpanded = !1);
}), i.value = !i.value;
} else
f.value && K(!1, !0), e && e.handleSelect(r.label, r.meta || {}, r.route), T.value = !0;
}
function K(o, s = !1) {
clearTimeout(h.hover), e == null || e.doForEachItem((n) => {
e.accordion && (n.groupExpanded = !1);
}), i.value = o, s && typeof (l == null ? void 0 : l.toggleGroupExpanded) == "function" && l.toggleGroupExpanded(o, s);
}
let w = !1, $ = !1;
function k() {
if (clearTimeout(h.hover), !(w || !f.value || P.value !== "hover")) {
if (!i.value && v.value) {
$ = !0;
return;
}
typeof (l == null ? void 0 : l.handleMouseEnter) == "function" && l.handleMouseEnter(), !(r.disabled || !d.value) && (h.hover = setTimeout(() => {
i.value = !0;
}, D.value));
}
}
function x() {
clearTimeout(h.hover), !(w || !v.value || !f.value || P.value !== "hover") && (typeof (l == null ? void 0 : l.handleMouseLeave) == "function" && l.handleMouseLeave(), !(r.disabled || !d.value) && (h.hover = setTimeout(() => {
i.value = !1;
}, D.value)));
}
function se() {
f.value && P.value === "click" && V(() => {
i.value = !1;
});
}
function te() {
if (v.value = !1, i.value = !1, $) {
if ($ = !1, typeof (l == null ? void 0 : l.handleMouseEnter) == "function" && l.handleMouseEnter(), r.disabled || !d.value) return;
i.value = !0;
}
}
function ce(o) {
const s = o.code || o.key;
s === "Enter" || s === "NumpadEnter" ? (o.stopPropagation(), M()) : s === "Space" && (o.stopPropagation(), o.preventDefault(), M());
}
function j() {
var s;
if (!((s = r.children) != null && s.length))
return null;
const o = (n) => t(_e, {
label: n.label,
icon: n.icon,
"icon-props": n.iconProps,
disabled: n.disabled,
children: n.children,
route: n.route,
meta: n.meta
}, {
default: () => [n.name ? q(n.name) : n.label]
});
return r.children.map((n) => n.group ? t(ze, {
key: n.label,
label: n.name ? q(n.name) : n.label
}, {
default: () => {
var B;
return [(B = n.children) == null ? void 0 : B.map(o)];
}
}) : o(n));
}
function de() {
return t(Ge, {
placement: N.value ? "left" : "right",
reverse: ae.value,
shift: !0,
transfer: !0,
disabled: ne.value
}, {
trigger: () => t("div", {
ref: ee,
class: {
[a.be("label")]: !0,
[a.bem("label", `marker-${S.value}`)]: !0,
[a.bem("label", "in-popper")]: l == null ? void 0 : l.isUsePopper
},
role: "menuitem",
tabindex: 0,
"aria-disabled": r.disabled ? "true" : void 0,
style: re.value,
onClick: M,
onKeydown: ce,
onMouseenter: k,
onMouseleave: x
}, [(c.icon || r.icon) && t("div", {
class: a.be("icon")
}, [c.icon ? E(c, "icon") : t(Q, W(r.iconProps, {
icon: r.icon
}), null)]), t("span", {
class: {
[a.be("title")]: !0,
[a.bem("title", "in-group")]: !y.value && d.value
}
}, [c.default ? E(c, "default") : r.label]), d.value && t(Q, W(Z.value.angleDown, {
class: {
[a.be("arrow")]: !0,
[a.bem("arrow", "visible")]: i.value,
[a.bem("arrow", "")]: R.value
}
}), null)]),
default: () => t("span", {
class: a.be("tooltip-title")
}, [c.default ? E(c, "default") : r.label])
});
}
return () => t("li", {
ref: A,
class: oe.value,
role: "none"
}, [de(), t(De, {
appear: !0
}, {
default: () => [d.value && !f.value && ge(t("ul", {
class: a.be("list")
}, [c.group ? E(c, "group") : j()]), [[Ee, b.value]])]
}), d.value && f.value && t(Le, {
ref: H,
class: [a.be("popper"), a.bs("vars"), y.value && a.bem("popper", "drop")],
visible: v.value && b.value,
alive: !O.value || v.value,
to: O.value,
transition: ue.value,
onAfterLeave: te,
onMouseenter: () => (w = !0, k()),
onMouseleave: () => (w = !1, x())
}, {
default: () => [t("ul", {
class: a.be("list")
}, [c.group ? E(c, "group") : j()])]
})]);
}
});
export {
_e as default
};
//# sourceMappingURL=menu-item.mjs.map