element-plus
Version:
> TODO: description
970 lines (947 loc) • 30.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var mitt = require('mitt');
var Menubar = require('../../utils/menu/menu-bar');
var dom = require('../../utils/dom');
var ElTooltip = require('../tooltip');
var ElCollapseTransition = require('../collapse-transition');
var ElPopper = require('../popper');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
var Menubar__default = /*#__PURE__*/_interopDefaultLegacy(Menubar);
var ElTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ElTooltip);
var ElCollapseTransition__default = /*#__PURE__*/_interopDefaultLegacy(ElCollapseTransition);
var ElPopper__default = /*#__PURE__*/_interopDefaultLegacy(ElPopper);
var script = vue.defineComponent({
name: "ElMenuCollapseTransition",
setup() {
return {
on: {
beforeEnter(el) {
el.style.opacity = "0.2";
},
enter(el, done) {
dom.addClass(el, "el-opacity-transition");
el.style.opacity = "1";
done();
},
afterEnter(el) {
dom.removeClass(el, "el-opacity-transition");
el.style.opacity = "";
},
beforeLeave(el) {
if (!el.dataset) {
el.dataset = {};
}
if (dom.hasClass(el, "el-menu--collapse")) {
dom.removeClass(el, "el-menu--collapse");
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
dom.addClass(el, "el-menu--collapse");
} else {
dom.addClass(el, "el-menu--collapse");
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
dom.removeClass(el, "el-menu--collapse");
}
el.style.width = el.scrollWidth + "px";
el.style.overflow = "hidden";
},
leave(el) {
dom.addClass(el, "horizontal-collapse-transition");
el.style.width = el.dataset.scrollWidth + "px";
}
}
};
}
});
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, vue.toHandlers(_ctx.on)), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16);
}
script.render = render;
script.__file = "packages/components/menu/src/menu-collapse-transition.vue";
function useMenuColor(props) {
const menuBarColor = vue.computed(() => {
const color = props.backgroundColor;
if (!color) {
return "";
} else {
return mixColor(color);
}
});
function calcColorChannels(c) {
let rawColor = c.replace("#", "");
if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
const color = rawColor.split("");
for (let i = 2; i >= 0; i--) {
color.splice(i, 0, color[i]);
}
rawColor = color.join("");
}
if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
return {
red: parseInt(rawColor.slice(0, 2), 16),
green: parseInt(rawColor.slice(2, 4), 16),
blue: parseInt(rawColor.slice(4, 6), 16)
};
} else {
return {
red: 255,
green: 255,
blue: 255
};
}
}
function mixColor(color, percent = 0.2) {
let { red, green, blue } = calcColorChannels(color);
if (percent > 0) {
red *= 1 - percent;
green *= 1 - percent;
blue *= 1 - percent;
} else {
red += (255 - red) * percent;
green += (255 - green) * percent;
blue += (255 - blue) * percent;
}
return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
}
return menuBarColor;
}
var script$1 = vue.defineComponent({
name: "ElMenu",
componentName: "ElMenu",
components: {
ElMenuCollapseTransition: script
},
props: {
mode: {
type: String,
default: "vertical"
},
defaultActive: {
type: String,
default: ""
},
defaultOpeneds: Array,
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
default: "hover"
},
collapse: Boolean,
backgroundColor: { type: String },
textColor: { type: String },
activeTextColor: { type: String },
collapseTransition: {
type: Boolean,
default: true
}
},
emits: ["close", "open", "select"],
setup(props, ctx) {
const openedMenus = vue.ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
const instance = vue.getCurrentInstance();
const activeIndex = vue.ref(props.defaultActive);
const items = vue.ref({});
const submenus = vue.ref({});
const alteredCollapse = vue.ref(false);
const rootMenuEmitter = mitt__default['default']();
const router = instance.appContext.config.globalProperties.$router;
const hoverBackground = useMenuColor(props);
const isMenuPopup = vue.computed(() => {
return props.mode === "horizontal" || props.mode === "vertical" && props.collapse;
});
const initializeMenu = () => {
const index = activeIndex.value;
const activeItem = items.value[index];
if (!activeItem || props.mode === "horizontal" || props.collapse)
return;
let indexPath = activeItem.indexPath;
indexPath.forEach((index2) => {
let submenu = submenus.value[index2];
submenu && openMenu(index2, submenu == null ? void 0 : submenu.indexPath);
});
};
const addSubMenu = (item) => {
submenus.value[item.index] = item;
};
const removeSubMenu = (item) => {
delete submenus.value[item.index];
};
const addMenuItem = (item) => {
items.value[item.index] = item;
};
const removeMenuItem = (item) => {
delete items.value[item.index];
};
const openMenu = (index, indexPath) => {
if (openedMenus.value.includes(index))
return;
if (props.uniqueOpened) {
openedMenus.value = openedMenus.value.filter((index2) => {
return (vue.isRef(indexPath) ? indexPath.value : indexPath).indexOf(index2) !== -1;
});
}
openedMenus.value.push(index);
};
const closeMenu = (index) => {
const i = openedMenus.value.indexOf(index);
if (i !== -1) {
openedMenus.value.splice(i, 1);
}
};
const open = (index) => {
const { indexPath } = submenus.value[index.toString()];
indexPath.forEach((i) => openMenu(i, indexPath));
};
const close = (index) => {
closeMenu(index);
};
const handleSubMenuClick = (submenu) => {
const { index, indexPath } = submenu;
let isOpened = openedMenus.value.includes(index);
if (isOpened) {
closeMenu(index);
ctx.emit("close", index, indexPath.value);
} else {
openMenu(index, indexPath);
ctx.emit("open", index, indexPath.value);
}
};
const handleItemClick = (item) => {
const { index, indexPath } = item;
const hasIndex = item.index !== null;
const emitParams = [index, indexPath.value, item];
if (props.mode === "horizontal" || props.collapse) {
openedMenus.value = [];
}
if (!hasIndex) {
return;
}
if (props.router && router) {
let route = item.route || item.index;
const routerResult = router.push(route).then((navigationResult) => {
if (!navigationResult) {
activeIndex.value = item.index;
}
return navigationResult;
});
ctx.emit("select", ...emitParams.concat(routerResult));
} else {
activeIndex.value = item.index;
ctx.emit("select", ...emitParams);
}
};
const updateActiveIndex = (val) => {
const itemsInData = items.value;
const item = itemsInData[val] || itemsInData[activeIndex.value] || itemsInData[props.defaultActive];
if (item) {
activeIndex.value = item.index;
initializeMenu();
} else {
if (!alteredCollapse.value) {
activeIndex.value = null;
} else {
alteredCollapse.value = false;
}
}
};
vue.watch(() => props.defaultActive, (currentActive) => {
if (!items.value[currentActive]) {
activeIndex.value = "";
}
updateActiveIndex(currentActive);
});
vue.watch(items.value, () => {
updateActiveIndex();
});
vue.watch(() => props.collapse, (value, prev) => {
if (value !== prev) {
alteredCollapse.value = true;
}
if (value)
openedMenus.value = [];
rootMenuEmitter.emit("rootMenu:toggle-collapse", Boolean(props.collapse));
});
vue.provide("rootMenu", {
props,
openedMenus,
items,
submenus,
hoverBackground,
activeIndex,
isMenuPopup,
methods: {
addMenuItem,
removeMenuItem,
addSubMenu,
removeSubMenu,
openMenu,
closeMenu
},
rootMenuEmit: rootMenuEmitter.emit,
rootMenuOn: rootMenuEmitter.on
});
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu
});
vue.onMounted(() => {
initializeMenu();
rootMenuEmitter.on("menuItem:item-click", handleItemClick);
rootMenuEmitter.on("submenu:submenu-click", handleSubMenuClick);
if (props.mode === "horizontal") {
new Menubar__default['default'](instance.vnode.el);
}
});
return {
hoverBackground,
isMenuPopup,
props,
open,
close
};
}
});
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_menu_collapse_transition = vue.resolveComponent("el-menu-collapse-transition");
return _ctx.collapseTransition ? (vue.openBlock(), vue.createBlock(_component_el_menu_collapse_transition, { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("ul", {
key: +_ctx.collapse,
role: "menubar",
style: vue.normalizeStyle({ backgroundColor: _ctx.backgroundColor || "" }),
class: vue.normalizeClass({
"el-menu": true,
"el-menu--horizontal": _ctx.mode === "horizontal",
"el-menu--collapse": _ctx.collapse
})
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6))
]),
_: 3
})) : (vue.openBlock(), vue.createElementBlock("ul", {
key: +_ctx.collapse,
role: "menubar",
style: vue.normalizeStyle({ backgroundColor: _ctx.backgroundColor || "" }),
class: vue.normalizeClass({
"el-menu": true,
"el-menu--horizontal": _ctx.mode === "horizontal",
"el-menu--collapse": _ctx.collapse
})
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6));
}
script$1.render = render$1;
script$1.__file = "packages/components/menu/src/menu.vue";
function useMenu(instance, currentIndex) {
const rootMenu = vue.inject("rootMenu");
const indexPath = vue.computed(() => {
let parent = instance.parent;
const path = [currentIndex];
while (parent.type.name !== "ElMenu") {
if (parent.props.index) {
path.unshift(parent.props.index);
}
parent = parent.parent;
}
return path;
});
const parentMenu = vue.computed(() => {
let parent = instance.parent;
while (parent && ["ElMenu", "ElSubMenu"].indexOf(parent.type.name) === -1) {
parent = parent.parent;
}
return parent;
});
const paddingStyle = vue.computed(() => {
let parent = instance.parent;
if (rootMenu.props.mode !== "vertical")
return {};
let padding = 20;
if (rootMenu.props.collapse) {
padding = 20;
} else {
while (parent && parent.type.name !== "ElMenu") {
if (parent.type.name === "ElSubMenu") {
padding += 20;
}
parent = parent.parent;
}
}
return { paddingLeft: padding + "px" };
});
return { parentMenu, paddingStyle, indexPath };
}
var script$2 = vue.defineComponent({
name: "ElMenuItem",
components: { ElTooltip: ElTooltip__default['default'] },
props: {
index: {
type: String,
default: null
},
route: [String, Object],
disabled: Boolean
},
emits: ["click"],
setup(props, { emit, slots }) {
const instance = vue.getCurrentInstance();
const rootMenu = vue.inject("rootMenu");
const { parentMenu, paddingStyle, indexPath } = useMenu(instance, props.index);
const { addSubMenu, removeSubMenu } = vue.inject(`subMenu:${parentMenu.value.uid}`);
const active = vue.computed(() => {
return props.index === rootMenu.activeIndex.value;
});
const hoverBackground = vue.computed(() => {
return rootMenu.hoverBackground.value;
});
const backgroundColor = vue.computed(() => {
return rootMenu.props.backgroundColor || "";
});
const activeTextColor = vue.computed(() => {
return rootMenu.props.activeTextColor || "";
});
const textColor = vue.computed(() => {
return rootMenu.props.textColor || "";
});
const mode = vue.computed(() => {
return rootMenu.props.mode;
});
const isNested = vue.computed(() => {
return parentMenu.value.type.name !== "ElMenu";
});
const itemStyle = vue.computed(() => {
const style = {
color: active.value ? activeTextColor.value : textColor.value,
borderBottomColor: ""
};
if (mode.value === "horizontal" && !isNested.value) {
style.borderBottomColor = active.value ? rootMenu.props.activeTextColor ? activeTextColor.value : "" : "transparent";
}
return style;
});
const onMouseEnter = () => {
if (mode.value === "horizontal" && !rootMenu.props.backgroundColor)
return;
instance.vnode.el.style.backgroundColor = hoverBackground.value;
};
const onMouseLeave = () => {
if (mode.value === "horizontal" && !rootMenu.props.backgroundColor)
return;
instance.vnode.el.style.backgroundColor = backgroundColor.value;
};
const handleClick = () => {
if (!props.disabled) {
rootMenu.rootMenuEmit("menuItem:item-click", {
index: props.index,
indexPath,
route: props.route
});
emit("click", {
index: props.index,
indexPath: indexPath.value
});
}
};
vue.onMounted(() => {
addSubMenu({ index: props.index, indexPath, active });
rootMenu.methods.addMenuItem({ index: props.index, indexPath, active });
});
vue.onBeforeUnmount(() => {
removeSubMenu({ index: props.index, indexPath, active });
rootMenu.methods.removeMenuItem({ index: props.index, indexPath, active });
});
return {
parentMenu,
rootMenu,
slots,
paddingStyle,
itemStyle,
backgroundColor,
active,
handleClick,
onMouseEnter,
onMouseLeave
};
}
});
const _hoisted_1 = { style: { "position": "absolute", "left": "0", "top": "0", "height": "100%", "width": "100%", "display": "inline-block", "box-sizing": "border-box", "padding": "0 20px" } };
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass(["el-menu-item", {
"is-active": _ctx.active,
"is-disabled": _ctx.disabled
}]),
role: "menuitem",
tabindex: "-1",
style: vue.normalizeStyle([_ctx.paddingStyle, _ctx.itemStyle, { backgroundColor: _ctx.backgroundColor }]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
onMouseleave: _cache[4] || (_cache[4] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args))
}, [
_ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.slots.title ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 0,
effect: "dark",
placement: "right"
}, {
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title")
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "default")
])
]),
_: 3
})) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.renderSlot(_ctx.$slots, "default"),
vue.renderSlot(_ctx.$slots, "title")
], 64))
], 38);
}
script$2.render = render$2;
script$2.__file = "packages/components/menu/src/menuItem.vue";
var script$3 = vue.defineComponent({
name: "ElMenuItemGroup",
componentName: "ElMenuItemGroup",
props: {
title: {
type: String
}
},
setup(props, { slots }) {
const data = vue.reactive({
paddingLeft: 20
});
const instance = vue.getCurrentInstance();
const levelPadding = vue.computed(() => {
let padding = 20;
let parent = instance.parent;
if (rootProps.collapse)
return 20;
while (parent && parent.type.name !== "ElMenu") {
if (parent.type.name === "ElSubMenu") {
padding += 20;
}
parent = parent.parent;
}
return padding;
});
const { props: rootProps } = vue.inject("rootMenu");
return {
data,
levelPadding,
props,
slots
};
}
});
const _hoisted_1$1 = { class: "el-menu-item-group" };
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$1, [
vue.createElementVNode("div", {
class: "el-menu-item-group__title",
style: vue.normalizeStyle({ paddingLeft: _ctx.levelPadding + "px" })
}, [
!_ctx.slots.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
], 2112)) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
], 4),
vue.createElementVNode("ul", null, [
vue.renderSlot(_ctx.$slots, "default")
])
]);
}
script$3.render = render$3;
script$3.__file = "packages/components/menu/src/menuItemGroup.vue";
var script$4 = vue.defineComponent({
name: "ElSubMenu",
componentName: "ElSubMenu",
props: {
index: {
type: String,
required: true
},
showTimeout: {
type: Number,
default: 300
},
hideTimeout: {
type: Number,
default: 300
},
popperClass: String,
disabled: Boolean,
popperAppendToBody: {
type: Boolean,
default: void 0
}
},
setup(props) {
const data = vue.reactive({
popperJS: null,
timeout: null,
items: {},
submenus: {},
currentPlacement: "",
mouseInChild: false,
opened: false
});
const verticalTitleRef = vue.ref(null);
const popperVnode = vue.ref(null);
const instance = vue.getCurrentInstance();
const { paddingStyle, indexPath, parentMenu } = useMenu(instance, props.index);
const {
openedMenus,
isMenuPopup,
hoverBackground: rootHoverBackground,
methods: rootMethods,
props: rootProps,
methods: { closeMenu },
rootMenuOn,
rootMenuEmit
} = vue.inject("rootMenu");
const {
addSubMenu: parentAddSubMenu,
removeSubMenu: parentRemoveSubMenu,
handleMouseleave: parentHandleMouseleave
} = vue.inject(`subMenu:${parentMenu.value.uid}`);
const submenuTitleIcon = vue.computed(() => {
return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootProps.collapse ? "el-icon-arrow-down" : "el-icon-arrow-right";
});
const isFirstLevel = vue.computed(() => {
let isFirstLevel2 = true;
let parent = instance.parent;
while (parent && parent.type.name !== "ElMenu") {
if (["ElSubMenu", "ElMenuItemGroup"].includes(parent.type.name)) {
isFirstLevel2 = false;
break;
} else {
parent = parent.parent;
}
}
return isFirstLevel2;
});
const appendToBody = vue.computed(() => {
return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
});
const menuTransitionName = vue.computed(() => {
return rootProps.collapse ? "el-zoom-in-left" : "el-zoom-in-top";
});
const opened = vue.computed(() => {
return openedMenus.value.includes(props.index);
});
const active = vue.computed(() => {
let isActive = false;
const submenus = data.submenus;
const items = data.items;
Object.keys(items).forEach((index) => {
if (items[index].active) {
isActive = true;
}
});
Object.keys(submenus).forEach((index) => {
if (submenus[index].active) {
isActive = true;
}
});
return isActive;
});
const backgroundColor = vue.computed(() => {
return rootProps.backgroundColor || "";
});
const activeTextColor = vue.computed(() => {
return rootProps.activeTextColor || "";
});
const textColor = vue.computed(() => {
return rootProps.textColor || "";
});
const mode = vue.computed(() => {
return rootProps.mode;
});
const titleStyle = vue.computed(() => {
if (mode.value !== "horizontal") {
return {
color: textColor.value
};
}
return {
borderBottomColor: active.value ? rootProps.activeTextColor ? activeTextColor.value : "" : "transparent",
color: active.value ? activeTextColor.value : textColor.value
};
});
const subMenuEmitter = mitt__default['default']();
const doDestroy = () => {
var _a;
(_a = popperVnode.value) == null ? void 0 : _a.doDestroy();
};
const handleCollapseToggle = (value) => {
if (value) {
updatePlacement();
} else {
doDestroy();
}
};
const addItem = (item) => {
data.items[item.index] = item;
};
const removeItem = (item) => {
delete data.items[item.index];
};
const addSubMenu = (item) => {
data.submenus[item.index] = item;
};
const removeSubMenu = (item) => {
delete data.submenus[item.index];
};
const handleClick = () => {
const disabled = props.disabled;
if (rootProps.menuTrigger === "hover" && rootProps.mode === "horizontal" || rootProps.collapse && rootProps.mode === "vertical" || disabled) {
return;
}
rootMenuEmit("submenu:submenu-click", { index: props.index, indexPath });
};
const handleMouseenter = (event, showTimeout = props.showTimeout) => {
if (!("ActiveXObject" in window) && event.type === "focus" && !event.relatedTarget) {
return;
}
const disabled = props.disabled;
if (rootProps.menuTrigger === "click" && rootProps.mode === "horizontal" || !rootProps.collapse && rootProps.mode === "vertical" || disabled) {
return;
}
subMenuEmitter.emit("submenu:mouse-enter-child");
clearTimeout(data.timeout);
data.timeout = setTimeout(() => {
rootMethods.openMenu(props.index, indexPath);
}, showTimeout);
if (appendToBody.value) {
parentMenu.value.vnode.el.dispatchEvent(new MouseEvent("mouseenter"));
}
};
const handleMouseleave = (deepDispatch = false) => {
if (rootProps.menuTrigger === "click" && rootProps.mode === "horizontal" || !rootProps.collapse && rootProps.mode === "vertical") {
return;
}
subMenuEmitter.emit("submenu:mouse-leave-child");
clearTimeout(data.timeout);
data.timeout = setTimeout(() => {
!data.mouseInChild && closeMenu(props.index);
}, props.hideTimeout);
if (appendToBody.value && deepDispatch) {
if (instance.parent.type.name === "ElSubMenu") {
parentHandleMouseleave(true);
}
}
};
const handleTitleMouseenter = () => {
var _a;
if (mode.value === "horizontal" && !rootProps.backgroundColor)
return;
const title = ((_a = popperVnode.value) == null ? void 0 : _a.triggerRef) || verticalTitleRef.value;
title && (title.style.backgroundColor = rootHoverBackground.value);
};
const handleTitleMouseleave = () => {
var _a;
if (mode.value === "horizontal" && !rootProps.backgroundColor)
return;
const title = ((_a = popperVnode.value) == null ? void 0 : _a.triggerRef) || verticalTitleRef.value;
title && (title.style.backgroundColor = rootProps.backgroundColor || "");
};
const updatePlacement = () => {
data.currentPlacement = mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start";
};
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
handleMouseleave
});
vue.onBeforeMount(() => {
rootMenuOn("rootMenu:toggle-collapse", (val) => {
handleCollapseToggle(val);
});
subMenuEmitter.on("submenu:mouse-enter-child", () => {
data.mouseInChild = true;
clearTimeout(data.timeout);
});
subMenuEmitter.on("submenu:mouse-leave-child", () => {
data.mouseInChild = false;
clearTimeout(data.timeout);
});
});
vue.onMounted(() => {
rootMethods.addSubMenu({
index: props.index,
indexPath,
active
});
parentAddSubMenu({
index: props.index,
indexPath,
active
});
updatePlacement();
});
vue.onBeforeUnmount(() => {
parentRemoveSubMenu({
index: props.index,
indexPath,
active
});
rootMethods.removeSubMenu({
index: props.index,
indexPath,
active
});
});
return {
data,
props,
mode,
active,
isMenuPopup,
opened,
paddingStyle,
titleStyle,
backgroundColor,
rootProps,
menuTransitionName,
submenuTitleIcon,
appendToBody,
handleClick,
handleMouseenter,
handleMouseleave,
handleTitleMouseenter,
handleTitleMouseleave,
addItem,
removeItem,
addSubMenu,
removeSubMenu,
popperVnode,
verticalTitleRef
};
},
render() {
var _a, _b;
const titleTag = [
(_b = (_a = this.$slots).title) == null ? void 0 : _b.call(_a),
vue.h("i", {
class: ["el-sub-menu__icon-arrow", this.submenuTitleIcon]
}, null)
];
const ulStyle = {
backgroundColor: this.rootProps.backgroundColor || ""
};
const child = this.isMenuPopup ? vue.h(ElPopper__default['default'], {
ref: "popperVNode",
manualMode: true,
visible: this.opened,
"onUpdate:visible": (val) => this.opened = val,
effect: "light",
pure: true,
offset: 6,
showArrow: false,
popperClass: this.popperClass,
placement: this.data.currentPlacement,
appendToBody: this.appendToBody,
transition: this.menuTransitionName,
gpuAcceleration: false
}, {
default: () => {
var _a2, _b2;
return vue.h("div", {
ref: "menu",
class: [
`el-menu--${this.mode}`,
this.popperClass
],
onMouseenter: ($event) => this.handleMouseenter($event, 100),
onMouseleave: () => this.handleMouseleave(true),
onFocus: ($event) => this.handleMouseenter($event, 100)
}, [
vue.h("ul", {
class: [
"el-menu el-menu--popup",
`el-menu--popup-${this.data.currentPlacement}`
],
style: ulStyle
}, [(_b2 = (_a2 = this.$slots).default) == null ? void 0 : _b2.call(_a2)])
]);
},
trigger: () => vue.h("div", {
class: "el-sub-menu__title",
style: [this.paddingStyle, this.titleStyle, { backgroundColor: this.backgroundColor }],
onClick: this.handleClick,
onMouseenter: this.handleTitleMouseenter,
onMouseleave: this.handleTitleMouseleave
}, titleTag)
}) : vue.h(vue.Fragment, {}, [
vue.h("div", {
class: "el-sub-menu__title",
style: [this.paddingStyle, this.titleStyle, { backgroundColor: this.backgroundColor }],
ref: "verticalTitleRef",
onClick: this.handleClick,
onMouseenter: this.handleTitleMouseenter,
onMouseleave: this.handleTitleMouseleave
}, titleTag),
vue.h(ElCollapseTransition__default['default'], {}, {
default: () => {
var _a2, _b2;
return vue.withDirectives(vue.h("ul", {
role: "menu",
class: "el-menu el-menu--inline",
style: ulStyle
}, [(_b2 = (_a2 = this.$slots).default) == null ? void 0 : _b2.call(_a2)]), [[vue.vShow, this.opened]]);
}
})
]);
return vue.h("li", {
class: [
"el-sub-menu",
{
"is-active": this.active,
"is-opened": this.opened,
"is-disabled": this.disabled
}
],
role: "menuitem",
ariaHaspopup: true,
ariaExpanded: this.opened,
onMouseenter: this.handleMouseenter,
onMouseleave: () => this.handleMouseleave(true),
onFocus: this.handleMouseenter
}, [child]);
}
});
script$4.__file = "packages/components/menu/src/submenu.vue";
script$1.install = (app) => {
app.component(script$1.name, script$1);
app.component(script$2.name, script$2);
app.component(script$3.name, script$3);
app.component(script$4.name, script$4);
};
script$1.MenuItem = script$2;
script$1.MenuItemGroup = script$3;
script$1.SubMenu = script$4;
const _Menu = script$1;
const ElMenu = _Menu;
const ElMenuItem = script$2;
const ElMenuItemGroup = script$3;
const ElSubMenu = script$4;
exports.ElMenu = ElMenu;
exports.ElMenuItem = ElMenuItem;
exports.ElMenuItemGroup = ElMenuItemGroup;
exports.ElSubMenu = ElSubMenu;
exports.default = _Menu;