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