@element-plus/nightly 0.0.20220511 → 0.0.20220512

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220511 */
+/*! Element Plus v0.0.20220512 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11185,7 +11185,7 @@
     return [recordCursor, setCursor];
   }
 
-  const version$1 = "0.0.20220511";
+  const version$1 = "0.0.20220512";
 
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   const makeInstaller = (components = []) => {
@@ -31135,9 +31135,6 @@
   var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$C], ["__file", "menu-collapse-transition.vue"]]);
 
   function useMenu(instance, currentIndex) {
-    const rootMenu = vue.inject("rootMenu");
-    if (!rootMenu)
-      throwError("useMenu", "can not inject root menu");
     const indexPath = vue.computed(() => {
       let parent = instance.parent;
       const path = [currentIndex.value];
@@ -31156,26 +31153,8 @@
       }
       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
     };
   }
@@ -31192,7 +31171,7 @@
     return menuBarColor;
   }
 
-  const useMenuCssVar = (props) => {
+  const useMenuCssVar = (props, level) => {
     const ns = useNamespace("menu");
     return vue.computed(() => {
       return ns.cssVarBlock({
@@ -31200,7 +31179,8 @@
         "hover-text-color": props.textColor || "",
         "bg-color": props.backgroundColor || "",
         "hover-bg-color": useMenuColor(props).value || "",
-        "active-color": props.activeTextColor || ""
+        "active-color": props.activeTextColor || "",
+        level: `${level}`
       });
     });
   };
@@ -31235,7 +31215,7 @@
     props: subMenuProps,
     setup(props, { slots, expose }) {
       const instance = vue.getCurrentInstance();
-      const { paddingStyle, indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
+      const { indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
       const nsMenu = useNamespace("menu");
       const nsSubMenu = useNamespace("sub-menu");
       const rootMenu = vue.inject("rootMenu");
@@ -31255,17 +31235,7 @@
         return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? arrowDown : arrowRight;
       });
       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;
+        return subMenu.level === 0;
       });
       const appendToBody = vue.computed(() => {
         return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
@@ -31382,7 +31352,8 @@
           addSubMenu,
           removeSubMenu,
           handleMouseleave,
-          mouseInChild
+          mouseInChild,
+          level: subMenu.level + 1
         });
       }
       expose({
@@ -31404,7 +31375,7 @@
             class: nsSubMenu.e("icon-arrow")
           }, { default: () => vue.h(subMenuTitleIcon.value) })
         ];
-        const ulStyle = useMenuCssVar(rootMenu.props);
+        const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
         const child = rootMenu.isMenuPopup ? vue.h(ElTooltip, {
           ref: vPopper,
           visible: opened.value,
@@ -31423,7 +31394,11 @@
           content: () => {
             var _a2;
             return vue.h("div", {
-              class: [nsMenu.m(mode.value), props.popperClass],
+              class: [
+                nsMenu.m(mode.value),
+                nsMenu.m("popup-container"),
+                props.popperClass
+              ],
               onMouseenter: (evt) => handleMouseenter(evt, 100),
               onMouseleave: () => handleMouseleave(true),
               onFocus: (evt) => handleMouseenter(evt, 100)
@@ -31441,7 +31416,6 @@
           default: () => vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ],
@@ -31451,7 +31425,6 @@
           vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ],
@@ -31657,7 +31630,8 @@
         vue.provide(`subMenu:${instance.uid}`, {
           addSubMenu,
           removeSubMenu,
-          mouseInChild: vue.ref(false)
+          mouseInChild: vue.ref(false),
+          level: 0
         });
       }
       vue.onMounted(() => {
@@ -31724,7 +31698,7 @@
             }));
           }
         }
-        const ulStyle = useMenuCssVar(props);
+        const ulStyle = useMenuCssVar(props, 0);
         const resizeMenu = (vNode) => props.ellipsis ? useVNodeResize(vNode) : vNode;
         const vMenu = resizeMenu(vue.h("ul", {
           key: String(props.collapse),
@@ -31733,7 +31707,7 @@
           style: ulStyle.value,
           class: {
             [nsMenu.b()]: true,
-            [nsMenu.m("horizontal")]: props.mode === "horizontal",
+            [nsMenu.m(props.mode)]: true,
             [nsMenu.m("collapse")]: props.collapse
           }
         }, [...slot, ...vShowMore]));
@@ -31774,7 +31748,7 @@
       const nsMenuItem = useNamespace("menu-item");
       if (!rootMenu)
         throwError(COMPONENT_NAME$a, "can not inject root menu");
-      const { parentMenu, paddingStyle, indexPath } = useMenu(instance, vue.toRef(props, "index"));
+      const { parentMenu, indexPath } = useMenu(instance, vue.toRef(props, "index"));
       const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
       if (!subMenu)
         throwError(COMPONENT_NAME$a, "can not inject sub menu");
@@ -31806,7 +31780,6 @@
         Effect,
         parentMenu,
         rootMenu,
-        paddingStyle,
         active,
         nsMenu,
         nsMenuItem,
@@ -31824,7 +31797,6 @@
       ]),
       role: "menuitem",
       tabindex: "-1",
-      style: vue.normalizeStyle(_ctx.paddingStyle),
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     }, [
       _ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
@@ -31849,7 +31821,7 @@
         vue.renderSlot(_ctx.$slots, "default"),
         vue.renderSlot(_ctx.$slots, "title")
       ], 64))
-    ], 6);
+    ], 2);
   }
   var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$B], ["__file", "menu-item.vue"]]);
 
@@ -31862,26 +31834,8 @@
     name: COMPONENT_NAME$9,
     props: menuItemGroupProps,
     setup() {
-      const instance = vue.getCurrentInstance();
-      const menu = vue.inject("rootMenu");
-      if (!menu)
-        throwError(COMPONENT_NAME$9, "can not inject root menu");
       const ns = useNamespace("menu-item-group");
-      const levelPadding = vue.computed(() => {
-        if (menu.props.collapse)
-          return 20;
-        let padding = 20;
-        let parent = instance.parent;
-        while (parent && parent.type.name !== "ElMenu") {
-          if (parent.type.name === "ElSubMenu") {
-            padding += 20;
-          }
-          parent = parent.parent;
-        }
-        return padding;
-      });
       return {
-        levelPadding,
         ns
       };
     }
@@ -31891,13 +31845,12 @@
       class: vue.normalizeClass(_ctx.ns.b())
     }, [
       vue.createElementVNode("div", {
-        class: vue.normalizeClass(_ctx.ns.e("title")),
-        style: vue.normalizeStyle({ paddingLeft: `${_ctx.levelPadding}px` })
+        class: vue.normalizeClass(_ctx.ns.e("title"))
       }, [
         !_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 })
-      ], 6),
+      ], 2),
       vue.createElementVNode("ul", null, [
         vue.renderSlot(_ctx.$slots, "default")
       ])