element-ps 2.0.30 → 2.0.33

package/dist/index.full.mjs

@@ -4292,6 +4292,22 @@ const useNamespace = (block) => {
     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,
@@ -4301,7 +4317,11 @@ const useNamespace = (block) => {
     em,
     bm,
     bem,
-    is
+    is,
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
   };
 };
 
@@ -19134,17 +19154,59 @@ class Menu$1 {
 var Menubar = Menu$1;
 
 const _sfc_main$U = 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 renderSlot(_ctx.$slots, "default");
+  return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, _ctx.listeners), {
+    default: withCtx(() => [
+      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 = inject("rootMenu");
-  if (!rootMenu)
-    throwError("useMenu", "can not inject root menu");
   const indexPath = computed(() => {
     let parent = instance.parent;
     const path = [currentIndex.value];
@@ -19163,26 +19225,8 @@ function useMenu(instance, currentIndex) {
     }
     return parent;
   });
-  const paddingStyle = 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
   };
 }
@@ -19199,15 +19243,17 @@ function useMenuColor(props) {
   return menuBarColor;
 }
 
-const useMenuCssVar = (props) => {
+const useMenuCssVar = (props, level) => {
+  const ns = useNamespace("menu");
   return 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}`
+    });
   });
 };
 
@@ -19241,7 +19287,7 @@ var SubMenu = defineComponent({
   props: subMenuProps,
   setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
-    const { paddingStyle, parentMenu } = useMenu(instance, computed(() => props.index));
+    const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
     const rootMenu = inject("rootMenu");
@@ -19260,17 +19306,7 @@ var SubMenu = defineComponent({
       return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? arrowDown : arrowRight;
     });
     const isFirstLevel = 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 = computed(() => {
       return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
@@ -19294,8 +19330,8 @@ var SubMenu = defineComponent({
     const opened = computed(() => rootMenu.openedMenus.includes(props.index));
     const active = computed(() => {
       let isActive = false;
-      Object.values(items.value).forEach((item) => {
-        if (item.active) {
+      Object.values(items.value).forEach((item2) => {
+        if (item2.active) {
           isActive = true;
         }
       });
@@ -19310,6 +19346,11 @@ var SubMenu = defineComponent({
     const activeTextColor = computed(() => rootMenu.props.activeTextColor || "");
     const textColor = computed(() => rootMenu.props.textColor || "");
     const mode = computed(() => rootMenu.props.mode);
+    const item = reactive({
+      index: props.index,
+      indexPath,
+      active
+    });
     const titleStyle = computed(() => {
       if (mode.value !== "horizontal") {
         return {
@@ -19321,14 +19362,41 @@ var SubMenu = defineComponent({
         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();
+      }
+    };
+    watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
     {
+      const addSubMenu = (item2) => {
+        subMenus.value[item2.index] = item2;
+      };
+      const removeSubMenu = (item2) => {
+        delete subMenus.value[item2.index];
+      };
       provide(`subMenu:${instance.uid}`, {
-        mouseInChild
+        addSubMenu,
+        removeSubMenu,
+        mouseInChild,
+        level: subMenu.level + 1
       });
     }
     expose({
       opened
     });
+    onMounted(() => {
+      rootMenu.addSubMenu(item);
+      subMenu.addSubMenu(item);
+    });
+    onBeforeUnmount(() => {
+      subMenu.removeSubMenu(item);
+      rootMenu.removeSubMenu(item);
+    });
     return () => {
       var _a;
       const titleTag = [
@@ -19337,7 +19405,7 @@ var SubMenu = defineComponent({
           class: nsSubMenu.e("icon-arrow")
         }, { default: () => h$1(subMenuTitleIcon.value) })
       ];
-      const ulStyle = useMenuCssVar(rootMenu.props);
+      const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
       const child = rootMenu.isMenuPopup ? h$1(PsTooltip, {
         ref: vPopper,
         visible: opened.value,
@@ -19356,7 +19424,11 @@ var SubMenu = defineComponent({
         content: () => {
           var _a2;
           return h$1("div", {
-            class: [nsMenu.m(mode.value), props.popperClass]
+            class: [
+              nsMenu.m(mode.value),
+              nsMenu.m("popup-container"),
+              props.popperClass
+            ]
           }, [
             h$1("ul", {
               class: [
@@ -19371,7 +19443,6 @@ var SubMenu = defineComponent({
         default: () => h$1("div", {
           class: nsSubMenu.e("title"),
           style: [
-            paddingStyle.value,
             titleStyle.value,
             { backgroundColor: backgroundColor.value }
           ]
@@ -19380,7 +19451,6 @@ var SubMenu = defineComponent({
         h$1("div", {
           class: nsSubMenu.e("title"),
           style: [
-            paddingStyle.value,
             titleStyle.value,
             { backgroundColor: backgroundColor.value }
           ],
@@ -19444,13 +19514,15 @@ const menuProps = buildProps({
   ellipsis: {
     type: Boolean,
     default: true
-  }
+  },
+  widget: String
 });
 var Menu = defineComponent({
   name: "PsMenu",
   props: menuProps,
-  setup(props, { slots }) {
+  setup(props, { slots, expose }) {
     const instance = getCurrentInstance();
+    instance.appContext.config.globalProperties.$router;
     const menu = ref();
     const nsMenu = useNamespace("menu");
     const nsSubMenu = useNamespace("sub-menu");
@@ -19465,18 +19537,82 @@ var Menu = defineComponent({
       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 = () => {
+      nextTick(() => instance.proxy.$forceUpdate());
+    };
+    watch(() => props.defaultActive, (currentActive) => {
+      if (!items.value[currentActive]) {
+        activeIndex.value = "";
+      }
+      updateActiveIndex(currentActive);
+    });
+    watch(items.value, () => initMenu());
+    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];
+      };
       provide("rootMenu", reactive({
         props,
         openedMenus,
         items,
         subMenus,
         activeIndex,
-        isMenuPopup
+        isMenuPopup,
+        addMenuItem,
+        removeMenuItem,
+        addSubMenu,
+        removeSubMenu,
+        openMenu,
+        closeMenu
       }));
       provide(`subMenu:${instance.uid}`, {
-        mouseInChild: ref(false)
+        addSubMenu,
+        removeSubMenu,
+        mouseInChild: ref(false),
+        level: 0
       });
     }
     onMounted(() => {
@@ -19485,6 +19621,17 @@ var Menu = defineComponent({
         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 = [];
@@ -19497,7 +19644,7 @@ var Menu = defineComponent({
       });
       return result;
     };
-    const useVNodeResize = (vnode) => vnode;
+    const useVNodeResize = (vnode) => props.mode === "horizontal" ? 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 : [];
@@ -19532,7 +19679,7 @@ var Menu = defineComponent({
           }));
         }
       }
-      const ulStyle = useMenuCssVar(props);
+      const ulStyle = useMenuCssVar(props, 0);
       const resizeMenu = (vNode) => props.ellipsis ? useVNodeResize(vNode) : vNode;
       const vMenu = resizeMenu(h$1("ul", {
         key: String(props.collapse),
@@ -19541,9 +19688,10 @@ var Menu = defineComponent({
         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 h$1(PsMenuCollapseTransition, () => vMenu);
@@ -19570,6 +19718,9 @@ const menuItemEmits = {
 const COMPONENT_NAME$8 = "PsMenuItem";
 const _sfc_main$T = defineComponent({
   name: COMPONENT_NAME$8,
+  components: {
+    PsTooltip
+  },
   props: menuItemProps,
   emits: menuItemEmits,
   setup(props, { emit }) {
@@ -19579,28 +19730,47 @@ const _sfc_main$T = defineComponent({
     const nsMenuItem = useNamespace("menu-item");
     if (!rootMenu)
       throwError(COMPONENT_NAME$8, "can not inject root menu");
-    const { parentMenu, paddingStyle, indexPath } = useMenu(instance, toRef(props, "index"));
+    const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
     const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
     if (!subMenu)
       throwError(COMPONENT_NAME$8, "can not inject sub menu");
     const active = computed(() => props.index === rootMenu.activeIndex);
-    reactive({
+    const item = 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);
+      }
+    };
+    onMounted(() => {
+      subMenu.addSubMenu(item);
+      rootMenu.addMenuItem(item);
+    });
+    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 = resolveComponent("ps-tooltip");
   return openBlock(), createElementBlock("li", {
     class: normalizeClass([
       _ctx.nsMenuItem.b(),
@@ -19609,18 +19779,31 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     role: "menuitem",
     tabindex: "-1",
-    style: 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 ? (openBlock(), createElementBlock("div", {
+    _ctx.parentMenu.type.name === "PsMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_ps_tooltip, {
       key: 0,
-      class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      effect: _ctx.Effect.DARK,
+      placement: "right",
+      "fallback-placements": ["left"],
+      persistent: ""
+    }, {
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "title")
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["effect"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
       renderSlot(_ctx.$slots, "default"),
       renderSlot(_ctx.$slots, "title")
     ], 64))
-  ], 6);
+  ], 2);
 }
 var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$A], ["__file", "menu-item.vue"]]);
 
@@ -19633,26 +19816,8 @@ const _sfc_main$S = defineComponent({
   name: COMPONENT_NAME$7,
   props: menuItemGroupProps,
   setup() {
-    const instance = getCurrentInstance();
-    const menu = inject("rootMenu");
-    if (!menu)
-      throwError(COMPONENT_NAME$7, "can not inject root menu");
     const ns = useNamespace("menu-item-group");
-    const levelPadding = 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
     };
   }
@@ -19662,13 +19827,12 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.ns.b())
   }, [
     createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.e("title")),
-      style: normalizeStyle({ paddingLeft: `${_ctx.levelPadding}px` })
+      class: normalizeClass(_ctx.ns.e("title"))
     }, [
       !_ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         createTextVNode(toDisplayString(_ctx.title), 1)
       ], 2112)) : renderSlot(_ctx.$slots, "title", { key: 1 })
-    ], 6),
+    ], 2),
     createElementVNode("ul", null, [
       renderSlot(_ctx.$slots, "default")
     ])

package/es/components/affix/index.d.ts

@@ -26,6 +26,10 @@ export declare const PsAffix: import("element-ps/es/utils").SFCWithInstall<impor
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
     };
     target: import("vue").ShallowRef<HTMLElement | undefined>;
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;

package/es/components/affix/src/affix.vue.d.ts

@@ -27,6 +27,10 @@ declare const _default: import("vue").DefineComponent<{
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
     };
     target: import("vue").ShallowRef<HTMLElement | undefined>;
     root: import("vue").ShallowRef<HTMLDivElement | undefined>;

package/es/components/alert/index.d.ts

@@ -37,6 +37,10 @@ export declare const PsAlert: import("element-ps/es/utils").SFCWithInstall<impor
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
     };
     visible: import("vue").Ref<boolean>;
     iconComponent: import("vue").ComputedRef<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
@@ -69,6 +73,10 @@ export declare const PsAlert: import("element-ps/es/utils").SFCWithInstall<impor
                 (name: string, state: boolean | undefined): string;
                 (name: string): string;
             };
+            cssVar: (object: Record<string, string>) => Record<string, string>;
+            cssVarName: (name: string) => string;
+            cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+            cssVarBlockName: (name: string) => string;
         };
         style: import("vue").ComputedRef<import("vue").CSSProperties>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/components/alert/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import Alert from './src/alert2.mjs';
-export { alertEffects, alertProps } from './src/alert.mjs';
+import Alert from './src/alert.mjs';
+export { alertEffects, alertProps } from './src/alert2.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const PsAlert = withInstall(Alert);