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