element-ps 2.0.28 → 2.0.31

package/dist/index.full.js

@@ -2215,6 +2215,9 @@
   const isFunction = (val) => typeof val === "function";
   const isString = (val) => typeof val === "string";
   const isObject$1 = (val) => val !== null && typeof val === "object";
+  const isPromise = (val) => {
+    return isObject$1(val) && isFunction(val.then) && isFunction(val.catch);
+  };
   const objectToString = Object.prototype.toString;
   const toTypeString = (value) => objectToString.call(value);
   const toRawType = (value) => {
@@ -19242,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");
@@ -19295,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;
           }
         });
@@ -19311,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 {
@@ -19322,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 = [
@@ -19445,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");
@@ -19466,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)
         });
       }
@@ -19486,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 = [];
@@ -19498,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 : [];
@@ -19544,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);
@@ -19585,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,
@@ -31739,7 +31857,8 @@
               if (closable && (ev.code === EVENT_CODE.delete || ev.code === EVENT_CODE.backspace)) {
                 props.onTabRemove(pane, ev);
               }
-            }
+            },
+            "widget": pane.props.widget ? "tab-pane:label:" + pane.props.widget.split(":")[1] : void 0
           }, [...[tabLabelContent, btnClose]]);
         });
         return vue.createVNode("div", {
@@ -31855,8 +31974,38 @@
           panes.value = [];
         }
       };
+      const changeCurrentName = (value) => {
+        currentName.value = value;
+        emit(INPUT_EVENT, value);
+        emit(UPDATE_MODEL_EVENT, value);
+        emit("tab-change", value);
+      };
+      const setCurrentName = (value) => {
+        var _a;
+        if (currentName.value === value)
+          return;
+        const canLeave = (_a = props.beforeLeave) == null ? void 0 : _a.call(props, value, currentName.value);
+        if (isPromise(canLeave)) {
+          canLeave.then(() => {
+            var _a2, _b;
+            changeCurrentName(value);
+            (_b = (_a2 = nav$.value) == null ? void 0 : _a2.removeFocus) == null ? void 0 : _b.call(_a2);
+          }, NOOP);
+        } else if (canLeave !== false) {
+          changeCurrentName(value);
+        }
+      };
       vue.onUpdated(() => updatePaneInstances());
       vue.onMounted(() => updatePaneInstances());
+      vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
+      vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
+      vue.watch(currentName, async () => {
+        var _a, _b;
+        updatePaneInstances(true);
+        await vue.nextTick();
+        await ((_a = nav$.value) == null ? void 0 : _a.$nextTick());
+        (_b = nav$.value) == null ? void 0 : _b.scrollToActiveTab();
+      });
       vue.provide(tabsRootContextKey, {
         props,
         currentName,
@@ -31908,10 +32057,11 @@
     },
     closable: Boolean,
     disabled: Boolean,
-    lazy: Boolean
+    lazy: Boolean,
+    widget: String
   });
 
-  const _hoisted_1$6 = ["id", "aria-hidden", "aria-labelledby"];
+  const _hoisted_1$6 = ["id", "aria-hidden", "aria-labelledby", "widget"];
   const __default__$9 = {
     name: "PsTabPane"
   };
@@ -31952,7 +32102,8 @@
           class: vue.normalizeClass(vue.unref(ns).b()),
           role: "tabpanel",
           "aria-hidden": !vue.unref(active),
-          "aria-labelledby": `tab-${vue.unref(paneName)}`
+          "aria-labelledby": `tab-${vue.unref(paneName)}`,
+          widget: _ctx.widget ? "tab-pane:default:" + _ctx.widget.split(":")[1] : void 0
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ], 10, _hoisted_1$6)), [