element-ps 2.0.30 → 2.0.33

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, 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);
@@ -19298,8 +19334,8 @@
       const opened = vue.computed(() => rootMenu.openedMenus.includes(props.index));
       const active = vue.computed(() => {
         let isActive = false;
-        Object.values(items.value).forEach((item) => {
-          if (item.active) {
+        Object.values(items.value).forEach((item2) => {
+          if (item2.active) {
             isActive = true;
           }
         });
@@ -19314,6 +19350,11 @@
       const activeTextColor = vue.computed(() => rootMenu.props.activeTextColor || "");
       const textColor = vue.computed(() => rootMenu.props.textColor || "");
       const mode = vue.computed(() => rootMenu.props.mode);
+      const item = vue.reactive({
+        index: props.index,
+        indexPath,
+        active
+      });
       const titleStyle = vue.computed(() => {
         if (mode.value !== "horizontal") {
           return {
@@ -19325,14 +19366,41 @@
           color: active.value ? activeTextColor.value : textColor.value
         };
       });
+      const doDestroy = () => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
+      };
+      const handleCollapseToggle = (value) => {
+        if (!value) {
+          doDestroy();
+        }
+      };
+      vue.watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
       {
+        const addSubMenu = (item2) => {
+          subMenus.value[item2.index] = item2;
+        };
+        const removeSubMenu = (item2) => {
+          delete subMenus.value[item2.index];
+        };
         vue.provide(`subMenu:${instance.uid}`, {
-          mouseInChild
+          addSubMenu,
+          removeSubMenu,
+          mouseInChild,
+          level: subMenu.level + 1
         });
       }
       expose({
         opened
       });
+      vue.onMounted(() => {
+        rootMenu.addSubMenu(item);
+        subMenu.addSubMenu(item);
+      });
+      vue.onBeforeUnmount(() => {
+        subMenu.removeSubMenu(item);
+        rootMenu.removeSubMenu(item);
+      });
       return () => {
         var _a;
         const titleTag = [
@@ -19341,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,
@@ -19360,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: [
@@ -19375,7 +19447,6 @@
           default: () => vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ]
@@ -19384,7 +19455,6 @@
           vue.h("div", {
             class: nsSubMenu.e("title"),
             style: [
-              paddingStyle.value,
               titleStyle.value,
               { backgroundColor: backgroundColor.value }
             ],
@@ -19448,13 +19518,15 @@
     ellipsis: {
       type: Boolean,
       default: true
-    }
+    },
+    widget: String
   });
   var Menu = vue.defineComponent({
     name: "PsMenu",
     props: menuProps,
-    setup(props, { slots }) {
+    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");
@@ -19469,18 +19541,82 @@
         const activeItem = activeIndex.value && items.value[activeIndex.value];
         if (!activeItem || props.mode === "horizontal" || props.collapse)
           return;
+        const indexPath = activeItem.indexPath;
+        indexPath.forEach((index) => {
+          const subMenu = subMenus.value[index];
+          subMenu && openMenu(index, subMenu.indexPath);
+        });
+      };
+      const openMenu = (index, indexPath) => {
+        if (openedMenus.value.includes(index))
+          return;
+        if (props.uniqueOpened) {
+          openedMenus.value = openedMenus.value.filter((index2) => indexPath.includes(index2));
+        }
+        openedMenus.value.push(index);
       };
+      const closeMenu = (index, indexPath) => {
+        const i = openedMenus.value.indexOf(index);
+        if (i !== -1) {
+          openedMenus.value.splice(i, 1);
+        }
+      };
+      const updateActiveIndex = (val) => {
+        const itemsInData = items.value;
+        const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive];
+        if (item) {
+          activeIndex.value = item.index;
+          initMenu();
+        } else {
+          activeIndex.value = val;
+        }
+      };
+      const handleResize = () => {
+        vue.nextTick(() => instance.proxy.$forceUpdate());
+      };
+      vue.watch(() => props.defaultActive, (currentActive) => {
+        if (!items.value[currentActive]) {
+          activeIndex.value = "";
+        }
+        updateActiveIndex(currentActive);
+      });
+      vue.watch(items.value, () => initMenu());
+      vue.watch(() => props.collapse, (value) => {
+        if (value)
+          openedMenus.value = [];
+      });
       {
+        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];
+        };
         vue.provide("rootMenu", vue.reactive({
           props,
           openedMenus,
           items,
           subMenus,
           activeIndex,
-          isMenuPopup
+          isMenuPopup,
+          addMenuItem,
+          removeMenuItem,
+          addSubMenu,
+          removeSubMenu,
+          openMenu,
+          closeMenu
         }));
         vue.provide(`subMenu:${instance.uid}`, {
-          mouseInChild: vue.ref(false)
+          addSubMenu,
+          removeSubMenu,
+          mouseInChild: vue.ref(false),
+          level: 0
         });
       }
       vue.onMounted(() => {
@@ -19489,6 +19625,17 @@
           new Menubar(instance.vnode.el, nsMenu.namespace.value);
         }
       });
+      {
+        const open = (index) => {
+          const { indexPath } = subMenus.value[index];
+          indexPath.forEach((i) => openMenu(i, indexPath));
+        };
+        expose({
+          open,
+          close: closeMenu,
+          handleResize
+        });
+      }
       const flattedChildren = (children) => {
         const vnodes = Array.isArray(children) ? children : [children];
         const result = [];
@@ -19501,7 +19648,7 @@
         });
         return result;
       };
-      const useVNodeResize = (vnode) => vnode;
+      const useVNodeResize = (vnode) => props.mode === "horizontal" ? vue.withDirectives(vnode, [[Resize, handleResize]]) : vnode;
       return () => {
         var _a, _b, _c, _d;
         let slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [];
@@ -19536,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),
@@ -19545,9 +19692,10 @@
           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);
@@ -19574,6 +19722,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 }) {
@@ -19583,28 +19734,47 @@
       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");
       const active = vue.computed(() => props.index === rootMenu.activeIndex);
-      vue.reactive({
+      const item = vue.reactive({
         index: props.index,
         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);
+      });
+      vue.onBeforeUnmount(() => {
+        subMenu.removeSubMenu(item);
+        rootMenu.removeMenuItem(item);
+      });
       return {
         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(),
@@ -19613,18 +19783,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"]]);
 
@@ -19637,26 +19820,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
       };
     }
@@ -19666,13 +19831,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")
       ])