vue-devui
Version:
DevUI components based on Vite and Vue3
958 lines (957 loc) • 33.2 kB
JavaScript
import { ref, defineComponent, getCurrentInstance, inject, toRefs, computed, createVNode, watch, onMounted, Transition, withDirectives, vShow, watchEffect, provide, reactive } from "vue";
import "clipboard";
function createBem(namespace, element, modifier) {
let cls = namespace;
if (element) {
cls += `__${element}`;
}
if (modifier) {
cls += `--${modifier}`;
}
return cls;
}
function useNamespace(block, needDot = false) {
const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
const b = () => createBem(namespace);
const e = (element) => element ? createBem(namespace, element) : "";
const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
return {
b,
e,
m,
em
};
}
const elements = [];
let parents = [];
const defaultIndent = ref(24);
const ns$5 = useNamespace("menu");
const subNs$2 = useNamespace("submenu");
const menuClass = ns$5.b();
const menuItemHorizontalWrapper = `${ns$5.b()}-item-horizontal-wrapper`;
const menuItemSelect$1 = `${ns$5.b()}-item-select`;
const menuActiveParent = `${ns$5.b()}-active-parent`;
function setDefaultIndent(indent) {
defaultIndent.value = indent;
}
function pushElement(element) {
elements.push(element);
}
function addLayer() {
parents = [];
elements.forEach((val) => {
parents.push(val.el.parentElement);
});
const stack = [...parents];
const getLayerFromClass = (className) => {
var _a;
return (_a = /layer_(\d*)/gim.exec(className)) == null ? void 0 : _a[1];
};
while (stack.length) {
const shiftItem = stack.shift();
if (shiftItem == null ? void 0 : shiftItem.classList.contains(menuClass)) {
const children = shiftItem.children;
stack.unshift(...Array.from(children));
continue;
} else {
if (shiftItem.tagName === "DIV") {
if (shiftItem.classList.contains(`${ns$5.b()}-item-vertical-wrapper`) || shiftItem.classList.contains(`${subNs$2.b()}-menu-item-vertical-wrapper`)) {
const parent = shiftItem.parentElement;
stack.unshift(...Array.from(shiftItem.children));
if (parent == null ? void 0 : parent.classList.contains(menuClass)) {
shiftItem.classList.add("layer_1");
} else {
let layer = getLayerFromClass((parent == null ? void 0 : parent.classList.value) || "");
layer = Number(layer);
shiftItem.classList.add(`layer_${layer}`);
}
} else {
const parent = shiftItem.parentElement;
let layer = getLayerFromClass((parent == null ? void 0 : parent.classList.value) || "");
layer = Number(layer);
shiftItem.classList.add(`layer_${layer}`);
shiftItem.style.paddingLeft = `${(layer === 2 ? 1 : layer - 1) * defaultIndent.value}px`;
}
}
if (shiftItem.tagName === "UL") {
const parent = shiftItem.parentElement;
const children = shiftItem.children;
for (let i = 0; i < children.length; i++) {
stack.unshift(children[i]);
}
const classList = (parent == null ? void 0 : parent.classList.value) || "";
let layer = getLayerFromClass(classList);
if (parent == null ? void 0 : parent.classList.contains(menuClass)) {
layer = 1;
shiftItem.classList.add(`layer_${2}`);
} else {
shiftItem.classList.add(`layer_${Number(layer) + 1}`);
layer = Number(layer) + 1;
}
}
if (shiftItem.tagName === "LI") {
const parent = shiftItem.parentElement;
const parentClassList = (parent == null ? void 0 : parent.classList.value) || "";
let layer = getLayerFromClass(parentClassList);
getLayerFromClass(parentClassList);
layer = Number(layer);
shiftItem.style.padding = `0 ${layer * defaultIndent.value}px`;
}
}
}
}
function getRoot(path) {
var _a;
const paths = path;
let rootElement = null;
for (let i = 0; i < paths.length; i++) {
const p = paths[i];
if ((_a = p == null ? void 0 : p.classList) == null ? void 0 : _a.contains(`${ns$5.b()}-horizontal`)) {
rootElement = p;
}
}
return rootElement;
}
function clearSelect_isHorizontal(ele, event) {
let element = event.target;
let stack = [];
const root = getRoot(event.composedPath());
stack = [...Array.from(root.children)];
if (element.tagName === "SPAN") {
element = element.parentElement;
}
while (stack.length) {
const shiftItem = stack.shift();
if ((shiftItem == null ? void 0 : shiftItem.tagName) === "UL" || (shiftItem == null ? void 0 : shiftItem.classList.contains(menuItemHorizontalWrapper))) {
const children = shiftItem == null ? void 0 : shiftItem.children;
stack.unshift(...Array.from(children));
}
if (shiftItem !== element) {
shiftItem == null ? void 0 : shiftItem.classList.remove(menuItemSelect$1);
shiftItem == null ? void 0 : shiftItem.classList.remove(menuActiveParent);
}
}
}
function clearSelect_notHorizontal(ele, event) {
const stack = [];
const path = event.path || event.composedPath && event.composedPath();
for (let i = 0; i < path.length; i++) {
const e = path[i];
if (!e.classList.contains(menuClass)) {
stack.push(...Array.from(e.children));
} else {
stack.push(...Array.from(e.children));
break;
}
}
while (stack.length) {
const shiftItem = stack.shift();
if ((shiftItem == null ? void 0 : shiftItem.tagName) === "UL" || (shiftItem == null ? void 0 : shiftItem.classList.contains(menuItemHorizontalWrapper))) {
stack.push(...Array.from(shiftItem == null ? void 0 : shiftItem.children));
}
if (shiftItem !== ele) {
if ((shiftItem == null ? void 0 : shiftItem.tagName) === "DIV") {
stack.unshift(...Array.from(shiftItem == null ? void 0 : shiftItem.children));
}
shiftItem == null ? void 0 : shiftItem.classList.remove(menuItemSelect$1);
shiftItem == null ? void 0 : shiftItem.classList.remove(menuActiveParent);
}
}
}
function clearSelect(ele, event, isHorizontal = false) {
if (isHorizontal) {
clearSelect_isHorizontal(ele, event);
} else {
clearSelect_notHorizontal(ele, event);
}
}
function getLayer(el) {
var _a;
const getLayerReg = /layer_(\d{1,})/gim;
const className = el.className;
return (_a = getLayerReg.exec(className)) == null ? void 0 : _a[1];
}
const menuItemProps = {
disabled: {
type: Boolean,
default: false
},
href: {
type: String,
default: ""
},
route: {
type: [String, Object]
}
};
const ns$4 = useNamespace("menu");
function initSelect(defaultSelectKeys, keys, isMultiple, disabled) {
const isSelect = ref(false);
if (!isMultiple) {
if (defaultSelectKeys[0] === keys && !disabled.value) {
isSelect.value = true;
} else {
isSelect.value = false;
}
} else {
if (defaultSelectKeys.includes(keys)) {
isSelect.value = true;
} else {
isSelect.value = false;
}
}
return isSelect.value;
}
function addActiveParent(ele) {
var _a, _b;
let cur = ele.parentElement;
while (!cur.classList.contains(ns$4.b())) {
if (((_a = cur.firstElementChild) == null ? void 0 : _a.tagName) === "DIV") {
(_b = cur == null ? void 0 : cur.firstElementChild) == null ? void 0 : _b.classList.add(`${ns$4.b()}-active-parent`);
}
cur = cur.parentElement;
}
return cur;
}
function changeRoute(props, router, useRouter, key) {
if (useRouter && router) {
const route = props.route || key;
const routerResult = router.push(route).then((res) => {
return res;
});
return { route, routerResult };
}
return void 0;
}
const ns$3 = useNamespace("menu");
function useClick(e) {
const paths = e.composedPath();
for (let i = 0; i < paths.length; i++) {
const path = paths[i];
if (path.classList.contains(`${ns$3.b()}-horizontal`)) {
break;
} else if (path.classList.contains(`${ns$3.b()}-item-horizontal-wrapper`)) {
continue;
} else {
if (path.tagName !== "SPAN") {
path.classList.add(`${ns$3.b()}-item-select`);
}
}
}
}
const ns$2 = useNamespace("menu");
const menuItemSelect = `${ns$2.b()}-item-select`;
const menuItemDisabled = `${ns$2.b()}-item-disabled`;
var MenuItem = defineComponent({
name: "DMenuItem",
props: menuItemProps,
setup(props, ctx) {
var _a, _b;
const instance = getCurrentInstance();
const key = String(instance == null ? void 0 : instance.vnode.key);
const menuStore = inject("menuStore");
const mode = inject("mode");
const multiple = inject("multiple");
const indent = inject("defaultIndent");
const isCollapsed = inject("isCollapsed");
const defaultSelectKey = inject("defaultSelectKey");
const {
disabled
} = toRefs(props);
const isSelect = ref(initSelect(defaultSelectKey.value, key, multiple, disabled));
const isLayer1 = ref(true);
const rootMenuEmit = inject("rootMenuEmit");
const useRouter = inject("useRouter");
const router = instance == null ? void 0 : instance.appContext.config.globalProperties.$router;
const classObject = computed(() => ({
[`${ns$2.b()}-item`]: true,
[`${ns$2.b()}-item-isCollapsed`]: isCollapsed.value,
[menuItemSelect]: isSelect.value,
[menuItemDisabled]: disabled.value
}));
menuStore.on("menuItem:clear:select", () => {
isSelect.value = false;
});
const onClick = (e) => {
var _a2;
e.stopPropagation();
const ele = e.currentTarget;
let changeRouteResult = void 0;
props.disabled && e.preventDefault();
if (!props.disabled) {
if (!multiple) {
menuStore.emit("menuItem:clear:select");
clearSelect(ele, e, mode.value === "horizontal");
if (mode.value === "horizontal") {
useClick(e);
}
isSelect.value = true;
changeRouteResult = changeRoute(props, router, useRouter.value, key);
} else {
if (ele.classList.contains(menuItemSelect)) {
rootMenuEmit("deselect", {
type: "deselect",
key,
el: ele,
e
});
isSelect.value = false;
return;
} else {
isSelect.value = true;
ele.classList.add(menuItemSelect);
}
}
if (changeRouteResult === void 0) {
rootMenuEmit("select", {
type: "select",
key,
el: ele,
e
});
} else {
rootMenuEmit("select", {
type: "select",
key,
el: ele,
e,
route: changeRouteResult
});
}
}
if (mode.value === "vertical") {
const target = e.currentTarget;
addActiveParent(target);
}
if (mode.value === "horizontal") {
const ul = (_a2 = ele.parentElement) == null ? void 0 : _a2.parentElement;
ul == null ? void 0 : ul.classList.add(`${ns$2.b()}-active-parent`);
}
};
const icons = createVNode("span", {
"class": `${ns$2.b()}-icon`
}, [(_b = (_a = ctx.slots).icon) == null ? void 0 : _b.call(_a)]);
const menuItems = ref(null);
watch(disabled, () => {
if (!multiple) {
classObject.value[menuItemSelect] = false;
}
});
watch(() => [...defaultSelectKey.value], (n) => {
isSelect.value = initSelect(n, key, multiple, disabled);
classObject.value[menuItemSelect] = isSelect.value;
});
onMounted(() => {
var _a2, _b2;
let oldPadding = "";
const ele = menuItems.value;
if (mode.value === "vertical") {
if ((_b2 = (_a2 = ele.parentElement) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.classList.contains(ns$2.b())) {
isLayer1.value = true;
if (isLayer1.value) {
ele.style.paddingRight = ``;
ele.style.paddingLeft = `${indent}px`;
}
watch(isCollapsed, (val) => {
if (val) {
if (ele.style.padding !== "0") {
oldPadding = ele.style.padding;
}
setTimeout(() => {
ele.style.padding = "0";
ele.style.width = "";
ele.style.textAlign = `center`;
}, 300);
ele.style.display = `block`;
} else {
ele.style.padding = `${oldPadding}`;
ele.style.textAlign = ``;
ele.style.display = `flex`;
}
});
} else {
isLayer1.value = false;
}
}
});
return () => {
return mode.value === "vertical" ? createVNode("div", {
"class": `${ns$2.b()}-item-vertical-wrapper`
}, [createVNode("li", {
"class": classObject.value,
"onClick": onClick,
"ref": menuItems
}, [ctx.slots.icon !== void 0 && icons, props.href === "" ? createVNode(Transition, {
"name": "fade"
}, {
default: () => {
var _a2, _b2;
return [withDirectives(createVNode("span", null, [(_b2 = (_a2 = ctx.slots).default) == null ? void 0 : _b2.call(_a2)]), [[vShow, !isCollapsed.value]])];
}
}) : createVNode("a", {
"href": props.href
}, [createVNode(Transition, {
"name": "fade"
}, {
default: () => {
var _a2, _b2;
return [(_b2 = (_a2 = ctx.slots).default) == null ? void 0 : _b2.call(_a2)];
}
})])])]) : createVNode("li", {
"class": classObject.value,
"onClick": onClick,
"ref": menuItems
}, [ctx.slots.icon !== void 0 && icons, props.href === "" ? createVNode(Transition, {
"name": "fade"
}, {
default: () => {
var _a2, _b2;
return [withDirectives(createVNode("span", null, [(_b2 = (_a2 = ctx.slots).default) == null ? void 0 : _b2.call(_a2)]), [[vShow, !isCollapsed.value]])];
}
}) : createVNode("a", {
"href": props.href
}, [createVNode(Transition, {
"name": "fade"
}, {
default: () => {
var _a2, _b2;
return [(_b2 = (_a2 = ctx.slots).default) == null ? void 0 : _b2.call(_a2)];
}
})])]);
};
}
});
function randomId(n = 8) {
const str = "abcdefghijklmnopqrstuvwxyz0123456789";
let result = "";
for (let i = 0; i < n; i++) {
result += str[parseInt((Math.random() * str.length).toString())];
}
return result;
}
function useNearestMenuElement(ele) {
while (ele && ele.tagName !== "LI" && ele.tagName !== "UL") {
ele = ele.parentElement;
}
return ele;
}
const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const TransitionObj = {
"before-enter"(el) {
el.style.transition = elTransition;
el.setAttribute("data-oldPadding", el.style.padding);
el.setAttribute("data-oldMargin", el.style.margin);
el.style.height = "0";
el.style.padding = "0";
el.style.margin = "0";
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + "px";
} else {
el.style.height = "";
}
el.style.padding = el.getAttribute("data-oldPadding");
el.style.margin = el.getAttribute("data-oldMargin");
el.style.overflow = "hidden";
},
"after-enter"(el) {
el.style.transition = "";
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.getAttribute("data-overflow");
},
"before-leave"(el) {
if (!el.dataset) {
el.dataset = {};
}
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + "px";
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition;
el.style.height = "0";
el.style.paddingTop = "0";
el.style.paddingBottom = "0";
}
},
"after-leave"(el) {
el.style.transition = "";
el.style.height = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
var MenuTransition = defineComponent({
name: "DMenuTransition",
setup(prop, ctx) {
return () => {
return createVNode(Transition, {
"onBeforeEnter": (e) => TransitionObj["before-enter"](e),
"onBeforeLeave": (e) => TransitionObj["before-leave"](e),
"onEnter": (e) => TransitionObj["enter"](e),
"onAfterEnter": (e) => TransitionObj["after-enter"](e),
"onLeave": (e) => TransitionObj["leave"](e),
"onAfterLeave": (e) => TransitionObj["after-leave"](e)
}, {
default: () => {
var _a, _b;
return [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)];
}
});
};
}
});
const subMenuProps = {
title: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
}
};
const ns$1 = useNamespace("menu");
const subNs$1 = useNamespace("submenu");
const menuItemHorizontalWrapperHidden = `${ns$1.b()}-item-horizontal-wrapper-hidden`;
const menuItemHorizontalWrapperShow = `${ns$1.b()}-item-horizontal-wrapper-show`;
function useShowSubMenu(eventName, e, wrapper) {
const target = e.currentTarget;
const targetParent = target.parentElement;
const wrapperChildren = wrapper.children;
wrapper.style.padding = `0 20px !important`;
if (eventName === "mouseenter") {
if ((targetParent == null ? void 0 : targetParent.tagName) === "DIV") {
wrapper.classList.add(`${ns$1.b()}-item-horizontal-wrapper-level`);
const { width } = target.getClientRects()[0];
wrapper.style.top = `0px`;
wrapper.style.left = `${width}px`;
} else {
wrapper.style.top = `26px`;
wrapper.style.left = `0px`;
}
wrapper.classList.remove(menuItemHorizontalWrapperHidden);
wrapper.classList.add(menuItemHorizontalWrapperShow);
for (let i = 0; i < wrapperChildren.length; i++) {
const ul = wrapperChildren[i];
if (ul.tagName === "UL" && ul.classList.contains(subNs$1.b())) {
const levelUlWrapper = ul.getElementsByClassName(`${ns$1.b()}-item-horizontal-wrapper`)[0];
ul.addEventListener("mouseenter", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseenter", ev, levelUlWrapper);
levelUlWrapper.classList.remove(menuItemHorizontalWrapperHidden);
levelUlWrapper.classList.add(menuItemHorizontalWrapperShow);
});
ul.addEventListener("mouseleave", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseleave", ev, levelUlWrapper);
levelUlWrapper.classList.remove(menuItemHorizontalWrapperShow);
levelUlWrapper.classList.add(menuItemHorizontalWrapperHidden);
});
}
}
}
if (eventName === "mouseleave") {
wrapper.classList.remove(menuItemHorizontalWrapperShow);
wrapper.classList.add(menuItemHorizontalWrapperHidden);
}
}
function SelectArrowIcon() {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16",
"version": "1.1",
"xmlns": "http://www.w3.org/2000/svg"
}, [createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661
L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661
C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534
C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339
C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z`
}, null)])]);
}
const ns = useNamespace("menu");
const subNs = useNamespace("submenu");
const subMenuClass = subNs.b();
var SubMenu = defineComponent({
name: "DSubMenu",
props: subMenuProps,
setup(props, ctx) {
const isShow = ref(true);
const {
vnode: {
key
}
} = getCurrentInstance();
let key_ = String(key);
const defaultOpenKeys = inject("openKeys");
const isOpen = ref(defaultOpenKeys.value.includes(key_));
const indent = inject("defaultIndent");
const isCollapsed = inject("isCollapsed");
const mode = inject("mode");
const subMenuItemContainer = ref(null);
const parentEmit = inject("rootMenuEmit");
const isHorizontal = mode.value === "horizontal";
if (key_ === "null") {
console.warn(`[devui][menu]: Key can not be null`);
key_ = `randomKey-${randomId(16)}`;
}
const clickHandle = (e) => {
e.stopPropagation();
const ele = useNearestMenuElement(e.target);
if (ele.classList.contains(subMenuClass) && isHorizontal) {
return;
}
if (isHorizontal) {
clearSelect(ele, e, true);
useClick(e);
}
if (!props.disabled && mode.value !== "horizontal") {
const cur = useNearestMenuElement(e.target);
const idx = defaultOpenKeys.value.indexOf(key_);
if (idx >= 0 && cur.tagName === "UL") {
defaultOpenKeys.value.splice(idx, 1);
} else {
if (cur.tagName === "UL") {
defaultOpenKeys.value.push(key_);
}
}
isOpen.value = defaultOpenKeys.value.indexOf(key_) >= 0;
parentEmit("submenu-change", {
type: "submenu-change",
state: isOpen.value,
key: key_,
el: ele
});
}
};
const wrapper = ref(null);
let wrapperDom;
const subMenu = ref(null);
const title = ref(null);
let oldPadding = "";
const class_layer = ref("");
watchEffect(() => {
wrapperDom = wrapper.value;
pushElement({
el: subMenu.value
});
}, {
flush: "post"
});
watch(() => defaultOpenKeys, (n) => {
if (n.value.includes(key_)) {
isOpen.value = true;
} else {
isOpen.value = false;
}
}, {
deep: true
});
onMounted(() => {
var _a;
const subMenuTitle = title.value;
const subMenuWrapper = subMenu.value;
addLayer();
class_layer.value = `layer_${(_a = Array.from(subMenuWrapper.classList).at(-1)) == null ? void 0 : _a.replace("layer_", "")}`;
if (isHorizontal && !props.disabled) {
subMenu.value.addEventListener("mouseenter", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseenter", ev, wrapperDom);
});
subMenu.value.addEventListener("mouseleave", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseleave", ev, wrapperDom);
});
}
watch(isCollapsed, (newValue) => {
const layer = Number(getLayer(subMenuWrapper));
if (!Number.isNaN(layer)) {
layer > 2 && (isShow.value = !isCollapsed.value);
}
if (newValue) {
subMenuTitle.style.padding !== "0" && (oldPadding = subMenuTitle.style.padding);
setTimeout(() => {
subMenuTitle.style.padding = "0";
subMenuTitle.style.width = "";
subMenuTitle.style.textAlign = `center`;
}, 300);
subMenuTitle.style.display = `block`;
} else {
subMenuTitle.style.padding = `${oldPadding}`;
subMenuTitle.style.textAlign = ``;
subMenuTitle.style.display = `flex`;
}
});
});
return () => {
var _a, _b, _c, _d;
return withDirectives(createVNode("ul", {
"onClick": clickHandle,
"class": [subMenuClass, class_layer.value, props["disabled"] && `${subMenuClass}-disabled`],
"ref": subMenu
}, [createVNode("div", {
"class": [`${subMenuClass}-title`],
"style": `padding: 0 ${indent}px`,
"ref": title
}, [createVNode("span", {
"class": `${ns.b()}-icon`
}, [(_b = (_a = ctx.slots) == null ? void 0 : _a.icon) == null ? void 0 : _b.call(_a)]), withDirectives(createVNode("span", {
"class": `${subMenuClass}-title-content`
}, [props.title]), [[vShow, !isCollapsed.value]]), withDirectives(createVNode(SelectArrowIcon, {
"class": [ns.e("arrow-icon"), {
"is-opened": isOpen.value
}]
}, null), [[vShow, !isCollapsed.value && key !== "overflowContainer" && class_layer.value !== `layer_${subMenuClass}`]]), withDirectives(createVNode("i", {
"class": {
"icon icon-chevron-up": false,
"icon icon-chevron-right": class_layer.value === `layer_${subMenuClass}`,
"is-opened": isOpen.value
}
}, null), [[vShow, !isCollapsed.value && key !== "overflowContainer"]])]), isHorizontal ? withDirectives(createVNode("div", {
"class": `${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`,
"ref": wrapper
}, [(_d = (_c = ctx.slots).default) == null ? void 0 : _d.call(_c)]), [[vShow, !props.disabled]]) : createVNode(MenuTransition, null, {
default: () => {
var _a2, _b2;
return [withDirectives(createVNode("div", {
"class": [`${subMenuClass}-menu-item-vertical-wrapper`],
"ref": subMenuItemContainer
}, [(_b2 = (_a2 = ctx.slots).default) == null ? void 0 : _b2.call(_a2)]), [[vShow, isOpen.value]])];
}
})]), [[vShow, isShow.value]]);
};
}
});
const menuProps = {
width: {
type: String,
default: ""
},
collapsed: {
type: Boolean,
default: false
},
collapsedIndent: {
type: Number,
default: 24
},
indentSize: {
type: Number,
default: 24
},
multiple: {
type: Boolean,
default: false
},
openKeys: {
type: Array,
default: []
},
defaultSelectKeys: {
type: Array,
default: []
},
mode: {
type: String,
default: "vertical"
},
router: {
type: Boolean,
default: false
},
disableOverflowStyle: {
type: Boolean,
default: false
}
};
var menu = "";
const recordTable = {};
class Store {
constructor(rootName) {
this.rootMenuName = rootName;
}
on(eventName, fn) {
var _a;
if (!((_a = recordTable == null ? void 0 : recordTable[this.rootMenuName]) == null ? void 0 : _a[eventName])) {
Reflect.set(recordTable[this.rootMenuName], eventName, []);
}
recordTable[this.rootMenuName][eventName].push(fn);
}
emit(eventName, ...args) {
recordTable[this.rootMenuName][eventName].forEach((fn) => fn(...args));
}
off(eventName, fn) {
const idx = recordTable[this.rootMenuName][eventName].indexOf(fn);
if (idx >= 0) {
recordTable[this.rootMenuName][eventName].splice(idx, 1);
}
}
}
function useStore(rootName) {
if (!recordTable[rootName]) {
Reflect.set(recordTable, rootName, {});
}
return new Store(rootName);
}
var Menu = defineComponent({
name: "DMenu",
props: menuProps,
emits: ["select", "deselect", "submenu-change"],
setup(props, ctx) {
const ns2 = useNamespace("menu");
const {
openKeys,
mode,
collapsed,
defaultSelectKeys,
router
} = toRefs(props);
const menuId = randomId(16);
const store = useStore(menuId);
provide("menuStore", store);
provide("isCollapsed", collapsed);
provide("defaultIndent", props["indentSize"]);
provide("multiple", props["multiple"]);
provide("openKeys", openKeys);
provide("defaultSelectKey", defaultSelectKeys);
provide("mode", mode);
provide("collapsedIndent", props["collapsedIndent"]);
provide("rootMenuEmit", ctx.emit);
provide("useRouter", router);
setDefaultIndent(props["indentSize"]);
const menuRoot = ref(null);
const overflowItemLength = ref(0);
const overflowContainer = ref(null);
const selectClassName = `${ns2.b()}-item-select`;
const rootClassName = computed(() => ({
[`${ns2.b()}`]: true,
[`${ns2.b()}-vertical`]: mode.value === "vertical",
[`${ns2.b()}-horizontal`]: mode.value === "horizontal",
[`${ns2.b()}-collapsed`]: collapsed.value
}));
const overflowContainerClassName = reactive({
[selectClassName]: false,
[`${ns2.b()}-overflow-container`]: true
});
const resetOverflowContainerSelectState = (e) => {
const children = Array.from(e.children);
for (const item of children) {
if (item.classList.contains(selectClassName)) {
overflowContainerClassName[selectClassName] = true;
break;
} else {
overflowContainerClassName[selectClassName] = false;
}
}
};
onMounted(() => {
var _a;
if (props["mode"] === "horizontal") {
let flag = false;
const overflowContainerElement = (_a = overflowContainer.value) == null ? void 0 : _a.$el;
const root = menuRoot.value;
const children = root.children;
const container = overflowContainerElement.children[1];
const ob = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting && !props.disableOverflowStyle) {
const cloneNode = entry.target.cloneNode(true);
if (entry.target.classList.contains(`${ns2.b()}-overflow-container`)) {
if (flag && entry.target.previousElementSibling && container.children.length) {
root.appendChild(entry.target.previousElementSibling);
} else {
flag = true;
}
} else {
overflowItemLength.value += 1;
entry.target.style.visibility = "hidden";
if (overflowContainerElement.nextSibling) {
root.insertBefore(entry.target, overflowContainerElement.nextSibling);
} else {
root.appendChild(entry.target);
}
container.appendChild(cloneNode);
resetOverflowContainerSelectState(container);
}
} else {
if (!entry.target.classList.contains(`${ns2.b()}-overflow-container`) && entry.target.style.visibility === "hidden") {
ob.unobserve(entry.target);
root.insertBefore(entry.target, overflowContainerElement);
entry.target.style.visibility = "";
const obItem = overflowContainerElement.previousElementSibling;
const canObAgin = obItem && entry.boundingClientRect.width % entry.target.getBoundingClientRect().width === 0;
if (canObAgin) {
ob.observe(obItem);
}
if (obItem == null ? void 0 : obItem.classList.contains("devui-submenu")) {
const sub = obItem;
const wrapper = obItem.children[1];
sub.addEventListener("mouseenter", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseenter", ev, wrapper);
});
sub.addEventListener("mouseleave", (ev) => {
ev.stopPropagation();
useShowSubMenu("mouseleave", ev, wrapper);
});
}
overflowItemLength.value -= 1;
ob.observe(entry.target);
if (container.lastChild) {
container.removeChild(container.lastChild);
}
resetOverflowContainerSelectState(container);
}
}
});
}, {
root,
threshold: 1,
rootMargin: "8px"
});
for (let i = 0; i < children.length; i++) {
ob.observe(children[i]);
}
}
});
return () => {
var _a, _b;
return createVNode("ul", {
"ref": menuRoot,
"class": rootClassName.value,
"style": [props["collapsed"] ? `width:${props["collapsedIndent"] * 2}px` : `width: ${props["width"]}`]
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a), withDirectives(createVNode(SubMenu, {
"ref": overflowContainer,
"key": "overflowContainer",
"title": "...",
"class": overflowContainerClassName
}, null), [[vShow, overflowItemLength.value > 0 && mode.value === "horizontal" && !props.disableOverflowStyle]])]);
};
}
});
var index = {
title: "Menu \u83DC\u5355",
category: "\u5BFC\u822A",
status: "100%",
install(app) {
app.component(Menu.name, Menu);
app.component(MenuItem.name, MenuItem);
app.component(SubMenu.name, SubMenu);
}
};
export { Menu, MenuItem, SubMenu, index as default };