element-ps 2.0.31 → 2.0.32

package/dist/index.full.js

@@ -4296,6 +4296,22 @@
       const state = args.length >= 1 ? args[0] : true;
       return name && state ? `${statePrefix}${name}` : "";
     };
+    const cssVar = (object) => {
+      const styles = {};
+      for (const key in object) {
+        styles[`--${namespace.value}-${key}`] = object[key];
+      }
+      return styles;
+    };
+    const cssVarBlock = (object) => {
+      const styles = {};
+      for (const key in object) {
+        styles[`--${namespace.value}-${block}-${key}`] = object[key];
+      }
+      return styles;
+    };
+    const cssVarName = (name) => `--${namespace.value}-${name}`;
+    const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
     return {
       namespace,
       b,
@@ -4305,7 +4321,11 @@
       em,
       bm,
       bem,
-      is
+      is,
+      cssVar,
+      cssVarName,
+      cssVarBlock,
+      cssVarBlockName
     };
   };
 
@@ -19138,17 +19158,59 @@
   var Menubar = Menu$1;
 
   const _sfc_main$U = vue.defineComponent({
-    name: "PsMenuCollapseTransition"
+    name: "PsMenuCollapseTransition",
+    setup() {
+      const ns = useNamespace("menu");
+      const listeners = {
+        onBeforeEnter: (el) => el.style.opacity = "0.2",
+        onEnter(el, done) {
+          addClass(el, `${ns.namespace.value}-opacity-transition`);
+          el.style.opacity = "1";
+          done();
+        },
+        onAfterEnter(el) {
+          removeClass(el, `${ns.namespace.value}-opacity-transition`);
+          el.style.opacity = "";
+        },
+        onBeforeLeave(el) {
+          if (!el.dataset) {
+            el.dataset = {};
+          }
+          if (hasClass(el, ns.m("collapse"))) {
+            removeClass(el, ns.m("collapse"));
+            el.dataset.oldOverflow = el.style.overflow;
+            el.dataset.scrollWidth = el.clientWidth.toString();
+            addClass(el, ns.m("collapse"));
+          } else {
+            addClass(el, ns.m("collapse"));
+            el.dataset.oldOverflow = el.style.overflow;
+            el.dataset.scrollWidth = el.clientWidth.toString();
+            removeClass(el, ns.m("collapse"));
+          }
+          el.style.width = `${el.scrollWidth}px`;
+          el.style.overflow = "hidden";
+        },
+        onLeave(el) {
+          addClass(el, "horizontal-collapse-transition");
+          el.style.width = `${el.dataset.scrollWidth}px`;
+        }
+      };
+      return {
+        listeners
+      };
+    }
   });
   function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.renderSlot(_ctx.$slots, "default");
+    return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, _ctx.listeners), {
+      default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3
+    }, 16);
   }
   var PsMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$B], ["__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];
@@ -19167,26 +19229,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 !== "PsMenu") {
-          if (parent.type.name === "PsSubMenu") {
-            padding += 20;
-          }
-          parent = parent.parent;
-        }
-      }
-      return { paddingLeft: `${padding}px` };
-    });
     return {
       parentMenu,
-      paddingStyle,
       indexPath
     };
   }
@@ -19203,15 +19247,17 @@
     return menuBarColor;
   }
 
-  const useMenuCssVar = (props) => {
+  const useMenuCssVar = (props, level) => {
+    const ns = useNamespace("menu");
     return vue.computed(() => {
-      return {
-        "--el-menu-text-color": props.textColor || "",
-        "--el-menu-hover-text-color": props.textColor || "",
-        "--el-menu-bg-color": props.backgroundColor || "",
-        "--el-menu-hover-bg-color": useMenuColor(props).value || "",
-        "--el-menu-active-color": props.activeTextColor || ""
-      };
+      return ns.cssVarBlock({
+        "text-color": props.textColor || "",
+        "hover-text-color": props.textColor || "",
+        "bg-color": props.backgroundColor || "",
+        "hover-bg-color": useMenuColor(props).value || "",
+        "active-color": props.activeTextColor || "",
+        level: `${level}`
+      });
     });
   };
 
@@ -19245,7 +19291,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");
@@ -19264,17 +19310,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 !== "PsMenu") {
-          if (["PsSubMenu", "PsMenuItemGroup"].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);
@@ -19350,7 +19386,8 @@
         vue.provide(`subMenu:${instance.uid}`, {
           addSubMenu,
           removeSubMenu,
-          mouseInChild
+          mouseInChild,
+          level: subMenu.level + 1
         });
       }
       expose({
@@ -19372,7 +19409,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(PsTooltip, {
           ref: vPopper,
           visible: opened.value,
@@ -19391,7 +19428,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
+              ]
             }, [
               vue.h("ul", {
                 class: [
@@ -19406,7 +19447,6 @@
           default: () => vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ]
@@ -19415,7 +19455,6 @@
           vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ],
@@ -19487,6 +19526,7 @@
     props: menuProps,
     setup(props, { slots, expose }) {
       const instance = vue.getCurrentInstance();
+      instance.appContext.config.globalProperties.$router;
       const menu = vue.ref();
       const nsMenu = useNamespace("menu");
       const nsSubMenu = useNamespace("sub-menu");
@@ -19575,7 +19615,8 @@
         vue.provide(`subMenu:${instance.uid}`, {
           addSubMenu,
           removeSubMenu,
-          mouseInChild: vue.ref(false)
+          mouseInChild: vue.ref(false),
+          level: 0
         });
       }
       vue.onMounted(() => {
@@ -19642,7 +19683,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),
@@ -19651,10 +19692,9 @@
           style: ulStyle.value,
           class: {
             [nsMenu.b()]: true,
-            [nsMenu.m("horizontal")]: props.mode === "horizontal",
+            [nsMenu.m(props.mode)]: true,
             [nsMenu.m("collapse")]: props.collapse
-          },
-          widget: props.widget
+          }
         }, [...slot, ...vShowMore]));
         if (props.collapseTransition && props.mode === "vertical") {
           return vue.h(PsMenuCollapseTransition, () => vMenu);
@@ -19681,6 +19721,9 @@
   const COMPONENT_NAME$8 = "PsMenuItem";
   const _sfc_main$T = vue.defineComponent({
     name: COMPONENT_NAME$8,
+    components: {
+      PsTooltip
+    },
     props: menuItemProps,
     emits: menuItemEmits,
     setup(props, { emit }) {
@@ -19690,7 +19733,7 @@
       const nsMenuItem = useNamespace("menu-item");
       if (!rootMenu)
         throwError(COMPONENT_NAME$8, "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$8, "can not inject sub menu");
@@ -19700,6 +19743,16 @@
         indexPath,
         active
       });
+      const handleClick = () => {
+        if (!props.disabled) {
+          rootMenu.handleMenuItemClick({
+            index: props.index,
+            indexPath: indexPath.value,
+            route: props.route
+          });
+          emit("click", item);
+        }
+      };
       vue.onMounted(() => {
         subMenu.addSubMenu(item);
         rootMenu.addMenuItem(item);
@@ -19712,14 +19765,15 @@
         Effect,
         parentMenu,
         rootMenu,
-        paddingStyle,
         active,
         nsMenu,
-        nsMenuItem
+        nsMenuItem,
+        handleClick
       };
     }
   });
   function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_ps_tooltip = vue.resolveComponent("ps-tooltip");
     return vue.openBlock(), vue.createElementBlock("li", {
       class: vue.normalizeClass([
         _ctx.nsMenuItem.b(),
@@ -19728,18 +19782,31 @@
       ]),
       role: "menuitem",
       tabindex: "-1",
-      style: vue.normalizeStyle(_ctx.paddingStyle)
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     }, [
-      _ctx.parentMenu.type.name === "PsMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
+      _ctx.parentMenu.type.name === "PsMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createBlock(_component_ps_tooltip, {
         key: 0,
-        class: vue.normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+        effect: _ctx.Effect.DARK,
+        placement: "right",
+        "fallback-placements": ["left"],
+        persistent: ""
+      }, {
+        content: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "title")
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["effect"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         vue.renderSlot(_ctx.$slots, "default"),
         vue.renderSlot(_ctx.$slots, "title")
       ], 64))
-    ], 6);
+    ], 2);
   }
   var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$A], ["__file", "menu-item.vue"]]);
 
@@ -19752,26 +19819,8 @@
     name: COMPONENT_NAME$7,
     props: menuItemGroupProps,
     setup() {
-      const instance = vue.getCurrentInstance();
-      const menu = vue.inject("rootMenu");
-      if (!menu)
-        throwError(COMPONENT_NAME$7, "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 !== "PsMenu") {
-          if (parent.type.name === "PsSubMenu") {
-            padding += 20;
-          }
-          parent = parent.parent;
-        }
-        return padding;
-      });
       return {
-        levelPadding,
         ns
       };
     }
@@ -19781,13 +19830,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")
       ])