element-ps 2.0.30 → 2.0.31

package/dist/index.full.js

@@ -19245,7 +19245,7 @@
     props: subMenuProps,
     setup(props, { slots, expose }) {
       const instance = vue.getCurrentInstance();
-      const { paddingStyle, parentMenu } = useMenu(instance, vue.computed(() => props.index));
+      const { paddingStyle, indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
       const nsMenu = useNamespace("menu");
       const nsSubMenu = useNamespace("sub-menu");
       const rootMenu = vue.inject("rootMenu");
@@ -19298,8 +19298,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 +19314,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 +19330,40 @@
           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}`, {
+          addSubMenu,
+          removeSubMenu,
           mouseInChild
         });
       }
       expose({
         opened
       });
+      vue.onMounted(() => {
+        rootMenu.addSubMenu(item);
+        subMenu.addSubMenu(item);
+      });
+      vue.onBeforeUnmount(() => {
+        subMenu.removeSubMenu(item);
+        rootMenu.removeSubMenu(item);
+      });
       return () => {
         var _a;
         const titleTag = [
@@ -19448,12 +19479,13 @@
     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();
       const menu = vue.ref();
       const nsMenu = useNamespace("menu");
@@ -19469,17 +19501,80 @@
         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}`, {
+          addSubMenu,
+          removeSubMenu,
           mouseInChild: vue.ref(false)
         });
       }
@@ -19489,6 +19584,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 +19607,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 : [];
@@ -19547,7 +19653,8 @@
             [nsMenu.b()]: true,
             [nsMenu.m("horizontal")]: props.mode === "horizontal",
             [nsMenu.m("collapse")]: props.collapse
-          }
+          },
+          widget: props.widget
         }, [...slot, ...vShowMore]));
         if (props.collapseTransition && props.mode === "vertical") {
           return vue.h(PsMenuCollapseTransition, () => vMenu);
@@ -19588,11 +19695,19 @@
       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
       });
+      vue.onMounted(() => {
+        subMenu.addSubMenu(item);
+        rootMenu.addMenuItem(item);
+      });
+      vue.onBeforeUnmount(() => {
+        subMenu.removeSubMenu(item);
+        rootMenu.removeMenuItem(item);
+      });
       return {
         Effect,
         parentMenu,