comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
180 lines (179 loc) • 6.65 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = require("../../tooltip/index.js");
const menu = require("../utils/menu.js");
const core = require("@vueuse/core");
const index = require("../../transition-collapse/index.js");
const menuPopper_vue_vue_type_script_setup_true_lang = require("./menu-popper.vue.js");
const submenu_props = require("./submenu.props.js");
const type = require("./type.js");
require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = ["tooltip-disabled"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuSubMenu"
},
__name: "submenu",
props: submenu_props.submenuProps,
setup(__props, { expose: __expose }) {
var _a, _b;
const vMenuTooltip = index$1.useTooltip();
const props = __props;
const instance = vue.getCurrentInstance();
const submenuKey = props.index ?? instance.uid.toString();
const submenuRef = vue.ref(null);
var timer = null, clearEnter = null, clearLeave = null, clearClick = null;
const unfold = vue.ref(false);
const menus = vue.reactive({});
const { props: injectProps, style } = vue.inject(type.MENU_PROVIDE);
const { parentMenu } = menu.useMenu(instance);
const parentProvideKey = "submenu:provide" + ((_b = (_a = parentMenu.value) == null ? void 0 : _a.exposed) == null ? void 0 : _b.submenuKey);
const submenu = vue.inject(parentProvideKey, void 0);
const deptOffset = vue.computed(() => {
return submenu ? submenu.offset : 2;
});
const teleportDisabled = vue.computed(() => {
return !!submenu;
});
const active = vue.computed(() => {
return Object.values(menus).some((v) => v.active);
});
const tooltipDisabled = vue.computed(() => {
return !(!injectProps.collapse && props.showEllipsis);
});
const float = vue.computed(() => {
return injectProps.mode === "horizontal" || injectProps.collapse;
});
function initListener() {
if (float.value) {
clearEnter = core.useEventListener(submenuRef, "mouseenter", onmouseenter);
clearLeave = core.useEventListener(submenuRef, "mouseleave", createTimes);
} else {
clearClick = core.useEventListener(submenuRef, "click", headHandleClick);
}
}
initListener();
function headHandleClick() {
unfold.value = !unfold.value;
}
function onmouseenter() {
clearTimes();
unfold.value = true;
}
function clearTimes() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function createTimes() {
if (!timer) {
timer = setTimeout(() => {
closeMenu();
}, 150);
}
}
function closeMenu(deep) {
unfold.value = false;
clearTimes();
if (deep) {
submenu == null ? void 0 : submenu.closeMenu(deep);
}
}
function setMenu(item) {
menus[item.idx] = item;
}
function removeMenu(idx) {
delete menus[idx];
}
vue.watch(float, () => {
clearEnter == null ? void 0 : clearEnter();
clearLeave == null ? void 0 : clearLeave();
clearClick == null ? void 0 : clearClick();
unfold.value = false;
initListener();
});
vue.provide("submenu:provide" + submenuKey, {
closeMenu,
setMenu,
removeMenu,
offset: deptOffset.value + 1
});
__expose({ submenuKey });
vue.onMounted(() => {
submenu == null ? void 0 : submenu.setMenu({
idx: submenuKey,
active
});
});
vue.onBeforeUnmount(() => {
submenu == null ? void 0 : submenu.removeMenu(submenuKey);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass(["cu-sub-menu", { "is-active": active.value }])
}, [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: "cu-sub-menu__head",
ref_key: "submenuRef",
ref: submenuRef,
"tooltip-disabled": tooltipDisabled.value
}, [
vue.unref(typescript.isVueComponent)(_ctx.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), {
key: 0,
class: "cu-menu__icon"
})) : vue.createCommentVNode("", true),
vue.withDirectives(vue.createElementVNode("span", null, [
vue.renderSlot(_ctx.$slots, "label", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 512), [
[vue.vShow, !vue.unref(injectProps).collapse || vue.unref(submenu)]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(injectProps).mode === "horizontal" ? vue.unref(components.Down) : vue.unref(components.Right)), {
class: vue.normalizeClass(["suffix-icon", { unfold: unfold.value }])
}, null, 8, ["class"])), [
[vue.vShow, !vue.unref(injectProps).collapse || vue.unref(submenu)]
])
], 8, _hoisted_1)), [
[vue.unref(vMenuTooltip), props.label, "right-center"]
]),
float.value ? (vue.openBlock(), vue.createBlock(menuPopper_vue_vue_type_script_setup_true_lang.default, {
key: 0,
trigger: submenuRef.value,
show: unfold.value,
fixed: !teleportDisabled.value,
onMouseIn: clearTimes,
onMouseOut: createTimes
}, {
default: vue.withCtx(() => [
vue.createElementVNode("ul", {
class: "cu-sub-menu__content",
style: vue.normalizeStyle(vue.unref(style))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 4)
]),
_: 3
}, 8, ["trigger", "show", "fixed"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.CuTransitionCollapse), { key: 1 }, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("ul", {
class: "cu-sub-menu__content",
style: vue.normalizeStyle({ "--cu-menu-padding": deptOffset.value * 20 + "px" })
}, [
vue.renderSlot(_ctx.$slots, "default")
], 4), [
[vue.vShow, unfold.value]
])
]),
_: 3
}))
], 2);
};
}
});
exports.default = _sfc_main;