@element-plus/nightly 0.0.20260720 → 0.0.20260721

package/lib/components/menu/src/sub-menu.d.ts

@@ -1,6 +1,7 @@
 import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import * as _$vue from "vue";
-import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
+import { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from "vue";
 
 //#region ../../packages/components/menu/src/sub-menu.d.ts
 declare const subMenuProps: {
@@ -12,13 +13,8 @@ declare const subMenuProps: {
   };
   readonly showTimeout: NumberConstructor;
   readonly hideTimeout: NumberConstructor;
-  readonly popperClass: StringConstructor;
-  readonly popperStyle: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly disabled: BooleanConstructor;
   readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly popperOffset: NumberConstructor;
@@ -58,13 +54,8 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
   };
   readonly showTimeout: NumberConstructor;
   readonly hideTimeout: NumberConstructor;
-  readonly popperClass: StringConstructor;
-  readonly popperStyle: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly disabled: BooleanConstructor;
   readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly popperOffset: NumberConstructor;
@@ -103,13 +94,8 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
   };
   readonly showTimeout: NumberConstructor;
   readonly hideTimeout: NumberConstructor;
-  readonly popperClass: StringConstructor;
-  readonly popperStyle: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, undefined, boolean>;
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly disabled: BooleanConstructor;
   readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly popperOffset: NumberConstructor;
@@ -138,8 +124,10 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
-  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly disabled: boolean;
+  readonly popperClass: ClassValue;
+  readonly popperStyle: StyleValue;
+  readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { SubMenuProps, SubMenuPropsPublic, _default as default, subMenuProps };

package/lib/components/menu/src/sub-menu.js

@@ -39,11 +39,27 @@ const subMenuProps = require_runtime$1.buildProps({
 	/**
 	* @description custom class name for the popup menu
 	*/
-	popperClass: String,
+	popperClass: {
+		type: require_runtime$1.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
+		default: void 0
+	},
 	/**
 	* @description custom style for the popup menu
 	*/
-	popperStyle: { type: require_runtime$1.definePropType([String, Object]) },
+	popperStyle: {
+		type: require_runtime$1.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
+		default: void 0
+	},
 	/**
 	* @description whether the sub-menu is disabled
 	*/

package/lib/components/menu/src/sub-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.js","names":["buildProps","definePropType","iconPropType","useMenu","useNamespace","MENU_INJECTION_KEY","SUB_MENU_INJECTION_KEY","ArrowDown","ArrowRight","isUndefined","useMenuCssVar","ElIcon","ElTooltip","Fragment","ElCollapseTransition","vShow"],"sources":["../../../../../../packages/components/menu/src/sub-menu.ts"],"sourcesContent":["import {\n  Fragment,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  buildProps,\n  definePropType,\n  focusElement,\n  iconPropType,\n  isString,\n  isUndefined,\n  throwError,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ArrowDown, ArrowRight } from '@element-plus/icons-vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport useMenu from './use-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type {\n  CSSProperties,\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  VNodeArrayChildren,\n} from 'vue'\nimport type { MenuProvider, SubMenuProvider } from './types'\n\nexport const subMenuProps = buildProps({\n  /**\n   * @description unique identification\n   */\n  index: {\n    type: String,\n    required: true,\n  },\n  /**\n   * @description timeout before showing a sub-menu(inherit `show-timeout` of the menu by default.)\n   */\n  showTimeout: Number,\n  /**\n   * @description timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.)\n   */\n  hideTimeout: Number,\n  /**\n   * @description custom class name for the popup menu\n   */\n  popperClass: String,\n  /**\n   * @description custom style for the popup menu\n   */\n  popperStyle: {\n    type: definePropType<string | CSSProperties>([String, Object]),\n  },\n  /**\n   * @description whether the sub-menu is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description whether popup menu is teleported to the body\n   */\n  teleported: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description offset of the popper (overrides the `popper` of menu)\n   */\n  popperOffset: Number,\n  /**\n   * @description Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect\n   */\n  expandCloseIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect\n   */\n  expandOpenIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect\n   */\n  collapseCloseIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect\n   */\n  collapseOpenIcon: {\n    type: iconPropType,\n  },\n} as const)\nexport type SubMenuProps = ExtractPropTypes<typeof subMenuProps>\nexport type SubMenuPropsPublic = ExtractPublicPropTypes<typeof subMenuProps>\n\nconst COMPONENT_NAME = 'ElSubMenu'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: subMenuProps,\n\n  setup(props, { slots, expose }) {\n    const instance = getCurrentInstance()!\n    const { indexPath, parentMenu } = useMenu(\n      instance,\n      computed(() => props.index)\n    )\n    const nsMenu = useNamespace('menu')\n    const nsSubMenu = useNamespace('sub-menu')\n\n    // inject\n    const rootMenu = inject<MenuProvider>(MENU_INJECTION_KEY)\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const subMenu = inject<SubMenuProvider>(\n      `${SUB_MENU_INJECTION_KEY}${parentMenu.value!.uid}`\n    )\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const items = ref<MenuProvider['items']>({})\n    const subMenus = ref<MenuProvider['subMenus']>({})\n\n    let timeout: (() => void) | undefined\n    const mouseInChild = ref(false)\n    const verticalTitleRef = ref<HTMLDivElement>()\n    const vPopper = ref<TooltipInstance>()\n\n    // computed\n    const isFirstLevel = computed(() => subMenu.level === 0)\n    const currentPlacement = computed<Placement>(() =>\n      mode.value === 'horizontal' && isFirstLevel.value\n        ? 'bottom-start'\n        : 'right-start'\n    )\n    const subMenuTitleIcon = computed(() => {\n      const isExpandedMode =\n        (mode.value === 'horizontal' && isFirstLevel.value) ||\n        (mode.value === 'vertical' && !rootMenu.props.collapse)\n\n      if (isExpandedMode) {\n        if (props.expandCloseIcon && props.expandOpenIcon) {\n          return opened.value ? props.expandOpenIcon : props.expandCloseIcon\n        }\n        return ArrowDown\n      } else {\n        if (props.collapseCloseIcon && props.collapseOpenIcon) {\n          return opened.value ? props.collapseOpenIcon : props.collapseCloseIcon\n        }\n        return ArrowRight\n      }\n    })\n\n    const appendToBody = computed(() => {\n      const value = props.teleported\n      return isUndefined(value) ? isFirstLevel.value : value\n    })\n    const menuTransitionName = computed(() =>\n      rootMenu.props.collapse\n        ? `${nsMenu.namespace.value}-zoom-in-left`\n        : `${nsMenu.namespace.value}-zoom-in-top`\n    )\n    const fallbackPlacements = computed<Placement[]>(() =>\n      mode.value === 'horizontal' && isFirstLevel.value\n        ? [\n            'bottom-start',\n            'bottom-end',\n            'top-start',\n            'top-end',\n            'right-start',\n            'left-start',\n          ]\n        : [\n            'right-start',\n            'right',\n            'right-end',\n            'left-start',\n            'bottom-start',\n            'bottom-end',\n            'top-start',\n            'top-end',\n          ]\n    )\n    const opened = computed(() => rootMenu.openedMenus.includes(props.index))\n    const active = computed(() =>\n      [...Object.values(items.value), ...Object.values(subMenus.value)].some(\n        ({ active }) => active\n      )\n    )\n\n    const mode = computed(() => rootMenu.props.mode)\n    const persistent = computed(() => rootMenu.props.persistent)\n    const item = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)\n\n    const subMenuPopperOffset = computed(\n      () => props.popperOffset ?? rootMenu.props.popperOffset\n    )\n\n    const subMenuPopperClass = computed(\n      () => props.popperClass ?? rootMenu.props.popperClass\n    )\n\n    const subMenuPopperStyle = computed(\n      () => props.popperStyle ?? rootMenu.props.popperStyle\n    )\n\n    const subMenuShowTimeout = computed(\n      () => props.showTimeout ?? rootMenu.props.showTimeout\n    )\n\n    const subMenuHideTimeout = computed(\n      () => props.hideTimeout ?? rootMenu.props.hideTimeout\n    )\n\n    // methods\n    const doDestroy = () =>\n      vPopper.value?.popperRef?.popperInstanceRef?.destroy()\n\n    const handleCollapseToggle = (value: boolean) => {\n      if (!value) {\n        doDestroy()\n      }\n    }\n\n    const handleClick = () => {\n      if (\n        (rootMenu.props.menuTrigger === 'hover' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||\n        props.disabled\n      )\n        return\n\n      rootMenu.handleSubMenuClick({\n        index: props.index,\n        indexPath: indexPath.value,\n        active: active.value,\n      })\n    }\n\n    const handleMouseenter = (\n      event: MouseEvent | FocusEvent,\n      showTimeout = subMenuShowTimeout.value\n    ) => {\n      if (event.type === 'focus') return\n\n      if (\n        (rootMenu.props.menuTrigger === 'click' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||\n        props.disabled\n      ) {\n        subMenu.mouseInChild.value = true\n        return\n      }\n      subMenu.mouseInChild.value = true\n\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(() => {\n        rootMenu.openMenu(props.index, indexPath.value)\n      }, showTimeout))\n\n      if (appendToBody.value) {\n        parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'))\n      }\n\n      if (event.type === 'mouseenter' && event.target) {\n        nextTick(() => {\n          focusElement(event.target as HTMLElement, { preventScroll: true })\n        })\n      }\n    }\n\n    const handleMouseleave = (deepDispatch = false) => {\n      if (\n        (rootMenu.props.menuTrigger === 'click' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical')\n      ) {\n        subMenu.mouseInChild.value = false\n        return\n      }\n      timeout?.()\n      subMenu.mouseInChild.value = false\n      ;({ stop: timeout } = useTimeoutFn(\n        () =>\n          !mouseInChild.value &&\n          rootMenu.closeMenu(props.index, indexPath.value),\n        subMenuHideTimeout.value\n      ))\n\n      if (appendToBody.value && deepDispatch) {\n        subMenu.handleMouseleave?.(true)\n      }\n    }\n\n    watch(\n      () => rootMenu.props.collapse,\n      (value) => handleCollapseToggle(Boolean(value))\n    )\n\n    // provide\n    {\n      const addSubMenu: SubMenuProvider['addSubMenu'] = (item) => {\n        subMenus.value[item.index] = item\n      }\n      const removeSubMenu: SubMenuProvider['removeSubMenu'] = (item) => {\n        delete subMenus.value[item.index]\n      }\n      provide<SubMenuProvider>(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        handleMouseleave,\n        mouseInChild,\n        level: subMenu.level + 1,\n      })\n    }\n\n    // expose\n    expose({\n      opened,\n    })\n\n    // lifecycle\n    onMounted(() => {\n      rootMenu.addSubMenu(item)\n      subMenu.addSubMenu(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeSubMenu(item)\n    })\n\n    return () => {\n      const titleTag: VNodeArrayChildren = [\n        slots.title?.(),\n        h(\n          ElIcon,\n          {\n            class: nsSubMenu.e('icon-arrow'),\n            style: {\n              transform: opened.value\n                ? (props.expandCloseIcon && props.expandOpenIcon) ||\n                  (props.collapseCloseIcon &&\n                    props.collapseOpenIcon &&\n                    rootMenu.props.collapse)\n                  ? 'none'\n                  : 'rotateZ(180deg)'\n                : 'none',\n            },\n          },\n          {\n            default: () =>\n              isString(subMenuTitleIcon.value)\n                ? h(instance.appContext.components[subMenuTitleIcon.value])\n                : h(subMenuTitleIcon.value),\n          }\n        ),\n      ]\n\n      // this render function is only used for bypass `Vue`'s compiler caused patching issue.\n      const child = rootMenu.isMenuPopup\n        ? h(\n            ElTooltip,\n            {\n              ref: vPopper,\n              visible: opened.value,\n              effect: 'light',\n              pure: true,\n              offset: subMenuPopperOffset.value,\n              showArrow: false,\n              persistent: persistent.value,\n              popperClass: subMenuPopperClass.value,\n              popperStyle: subMenuPopperStyle.value,\n              placement: currentPlacement.value,\n              teleported: appendToBody.value,\n              fallbackPlacements: fallbackPlacements.value,\n              transition: menuTransitionName.value,\n              gpuAcceleration: false,\n            },\n            {\n              content: () =>\n                h(\n                  'div',\n                  {\n                    class: [\n                      nsMenu.m(mode.value),\n                      nsMenu.m('popup-container'),\n                      subMenuPopperClass.value,\n                    ],\n                    onMouseenter: (evt: MouseEvent) =>\n                      handleMouseenter(evt, 100),\n                    onMouseleave: () => handleMouseleave(true),\n                    onFocus: (evt: FocusEvent) => handleMouseenter(evt, 100),\n                  },\n                  [\n                    h(\n                      'ul',\n                      {\n                        class: [\n                          nsMenu.b(),\n                          nsMenu.m('popup'),\n                          nsMenu.m(`popup-${currentPlacement.value}`),\n                        ],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                  ]\n                ),\n              default: () =>\n                h(\n                  'div',\n                  {\n                    class: nsSubMenu.e('title'),\n                    onClick: handleClick,\n                  },\n                  titleTag\n                ),\n            }\n          )\n        : h(Fragment, {}, [\n            h(\n              'div',\n              {\n                class: nsSubMenu.e('title'),\n                ref: verticalTitleRef,\n                onClick: handleClick,\n              },\n              titleTag\n            ),\n            h(\n              ElCollapseTransition,\n              {},\n              {\n                default: () =>\n                  withDirectives(\n                    h(\n                      'ul',\n                      {\n                        role: 'menu',\n                        class: [nsMenu.b(), nsMenu.m('inline')],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                    [[vShow, opened.value]]\n                  ),\n              }\n            ),\n          ])\n\n      return h(\n        'li',\n        {\n          class: [\n            nsSubMenu.b(),\n            nsSubMenu.is('active', active.value),\n            nsSubMenu.is('opened', opened.value),\n            nsSubMenu.is('disabled', props.disabled),\n          ],\n          role: 'menuitem',\n          ariaHaspopup: true,\n          ariaExpanded: opened.value,\n          onMouseenter: handleMouseenter,\n          onMouseleave: () => handleMouseleave(),\n          onFocus: handleMouseenter,\n        },\n        [child]\n      )\n    }\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"sub-menu.js","names":["buildProps","definePropType","iconPropType","useMenu","useNamespace","MENU_INJECTION_KEY","SUB_MENU_INJECTION_KEY","ArrowDown","ArrowRight","isUndefined","useMenuCssVar","ElIcon","ElTooltip","Fragment","ElCollapseTransition","vShow"],"sources":["../../../../../../packages/components/menu/src/sub-menu.ts"],"sourcesContent":["import {\n  Fragment,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  buildProps,\n  definePropType,\n  focusElement,\n  iconPropType,\n  isString,\n  isUndefined,\n  throwError,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ArrowDown, ArrowRight } from '@element-plus/icons-vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport useMenu from './use-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { ClassValue } from '@element-plus/utils'\nimport type { Placement } from '@element-plus/components/popper'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type {\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  StyleValue,\n  VNodeArrayChildren,\n} from 'vue'\nimport type { MenuProvider, SubMenuProvider } from './types'\n\nexport const subMenuProps = buildProps({\n  /**\n   * @description unique identification\n   */\n  index: {\n    type: String,\n    required: true,\n  },\n  /**\n   * @description timeout before showing a sub-menu(inherit `show-timeout` of the menu by default.)\n   */\n  showTimeout: Number,\n  /**\n   * @description timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.)\n   */\n  hideTimeout: Number,\n  /**\n   * @description custom class name for the popup menu\n   */\n  popperClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: undefined,\n  },\n  /**\n   * @description custom style for the popup menu\n   */\n  popperStyle: {\n    type: definePropType<StyleValue>([String, Array, Object, Boolean]),\n    default: undefined,\n  },\n  /**\n   * @description whether the sub-menu is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description whether popup menu is teleported to the body\n   */\n  teleported: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description offset of the popper (overrides the `popper` of menu)\n   */\n  popperOffset: Number,\n  /**\n   * @description Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect\n   */\n  expandCloseIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect\n   */\n  expandOpenIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect\n   */\n  collapseCloseIcon: {\n    type: iconPropType,\n  },\n  /**\n   * @description Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect\n   */\n  collapseOpenIcon: {\n    type: iconPropType,\n  },\n} as const)\nexport type SubMenuProps = ExtractPropTypes<typeof subMenuProps>\nexport type SubMenuPropsPublic = ExtractPublicPropTypes<typeof subMenuProps>\n\nconst COMPONENT_NAME = 'ElSubMenu'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: subMenuProps,\n\n  setup(props, { slots, expose }) {\n    const instance = getCurrentInstance()!\n    const { indexPath, parentMenu } = useMenu(\n      instance,\n      computed(() => props.index)\n    )\n    const nsMenu = useNamespace('menu')\n    const nsSubMenu = useNamespace('sub-menu')\n\n    // inject\n    const rootMenu = inject<MenuProvider>(MENU_INJECTION_KEY)\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const subMenu = inject<SubMenuProvider>(\n      `${SUB_MENU_INJECTION_KEY}${parentMenu.value!.uid}`\n    )\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const items = ref<MenuProvider['items']>({})\n    const subMenus = ref<MenuProvider['subMenus']>({})\n\n    let timeout: (() => void) | undefined\n    const mouseInChild = ref(false)\n    const verticalTitleRef = ref<HTMLDivElement>()\n    const vPopper = ref<TooltipInstance>()\n\n    // computed\n    const isFirstLevel = computed(() => subMenu.level === 0)\n    const currentPlacement = computed<Placement>(() =>\n      mode.value === 'horizontal' && isFirstLevel.value\n        ? 'bottom-start'\n        : 'right-start'\n    )\n    const subMenuTitleIcon = computed(() => {\n      const isExpandedMode =\n        (mode.value === 'horizontal' && isFirstLevel.value) ||\n        (mode.value === 'vertical' && !rootMenu.props.collapse)\n\n      if (isExpandedMode) {\n        if (props.expandCloseIcon && props.expandOpenIcon) {\n          return opened.value ? props.expandOpenIcon : props.expandCloseIcon\n        }\n        return ArrowDown\n      } else {\n        if (props.collapseCloseIcon && props.collapseOpenIcon) {\n          return opened.value ? props.collapseOpenIcon : props.collapseCloseIcon\n        }\n        return ArrowRight\n      }\n    })\n\n    const appendToBody = computed(() => {\n      const value = props.teleported\n      return isUndefined(value) ? isFirstLevel.value : value\n    })\n    const menuTransitionName = computed(() =>\n      rootMenu.props.collapse\n        ? `${nsMenu.namespace.value}-zoom-in-left`\n        : `${nsMenu.namespace.value}-zoom-in-top`\n    )\n    const fallbackPlacements = computed<Placement[]>(() =>\n      mode.value === 'horizontal' && isFirstLevel.value\n        ? [\n            'bottom-start',\n            'bottom-end',\n            'top-start',\n            'top-end',\n            'right-start',\n            'left-start',\n          ]\n        : [\n            'right-start',\n            'right',\n            'right-end',\n            'left-start',\n            'bottom-start',\n            'bottom-end',\n            'top-start',\n            'top-end',\n          ]\n    )\n    const opened = computed(() => rootMenu.openedMenus.includes(props.index))\n    const active = computed(() =>\n      [...Object.values(items.value), ...Object.values(subMenus.value)].some(\n        ({ active }) => active\n      )\n    )\n\n    const mode = computed(() => rootMenu.props.mode)\n    const persistent = computed(() => rootMenu.props.persistent)\n    const item = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)\n\n    const subMenuPopperOffset = computed(\n      () => props.popperOffset ?? rootMenu.props.popperOffset\n    )\n\n    const subMenuPopperClass = computed(\n      () => props.popperClass ?? rootMenu.props.popperClass\n    )\n\n    const subMenuPopperStyle = computed(\n      () => props.popperStyle ?? rootMenu.props.popperStyle\n    )\n\n    const subMenuShowTimeout = computed(\n      () => props.showTimeout ?? rootMenu.props.showTimeout\n    )\n\n    const subMenuHideTimeout = computed(\n      () => props.hideTimeout ?? rootMenu.props.hideTimeout\n    )\n\n    // methods\n    const doDestroy = () =>\n      vPopper.value?.popperRef?.popperInstanceRef?.destroy()\n\n    const handleCollapseToggle = (value: boolean) => {\n      if (!value) {\n        doDestroy()\n      }\n    }\n\n    const handleClick = () => {\n      if (\n        (rootMenu.props.menuTrigger === 'hover' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||\n        props.disabled\n      )\n        return\n\n      rootMenu.handleSubMenuClick({\n        index: props.index,\n        indexPath: indexPath.value,\n        active: active.value,\n      })\n    }\n\n    const handleMouseenter = (\n      event: MouseEvent | FocusEvent,\n      showTimeout = subMenuShowTimeout.value\n    ) => {\n      if (event.type === 'focus') return\n\n      if (\n        (rootMenu.props.menuTrigger === 'click' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical') ||\n        props.disabled\n      ) {\n        subMenu.mouseInChild.value = true\n        return\n      }\n      subMenu.mouseInChild.value = true\n\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(() => {\n        rootMenu.openMenu(props.index, indexPath.value)\n      }, showTimeout))\n\n      if (appendToBody.value) {\n        parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'))\n      }\n\n      if (event.type === 'mouseenter' && event.target) {\n        nextTick(() => {\n          focusElement(event.target as HTMLElement, { preventScroll: true })\n        })\n      }\n    }\n\n    const handleMouseleave = (deepDispatch = false) => {\n      if (\n        (rootMenu.props.menuTrigger === 'click' &&\n          rootMenu.props.mode === 'horizontal') ||\n        (!rootMenu.props.collapse && rootMenu.props.mode === 'vertical')\n      ) {\n        subMenu.mouseInChild.value = false\n        return\n      }\n      timeout?.()\n      subMenu.mouseInChild.value = false\n      ;({ stop: timeout } = useTimeoutFn(\n        () =>\n          !mouseInChild.value &&\n          rootMenu.closeMenu(props.index, indexPath.value),\n        subMenuHideTimeout.value\n      ))\n\n      if (appendToBody.value && deepDispatch) {\n        subMenu.handleMouseleave?.(true)\n      }\n    }\n\n    watch(\n      () => rootMenu.props.collapse,\n      (value) => handleCollapseToggle(Boolean(value))\n    )\n\n    // provide\n    {\n      const addSubMenu: SubMenuProvider['addSubMenu'] = (item) => {\n        subMenus.value[item.index] = item\n      }\n      const removeSubMenu: SubMenuProvider['removeSubMenu'] = (item) => {\n        delete subMenus.value[item.index]\n      }\n      provide<SubMenuProvider>(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        handleMouseleave,\n        mouseInChild,\n        level: subMenu.level + 1,\n      })\n    }\n\n    // expose\n    expose({\n      opened,\n    })\n\n    // lifecycle\n    onMounted(() => {\n      rootMenu.addSubMenu(item)\n      subMenu.addSubMenu(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeSubMenu(item)\n    })\n\n    return () => {\n      const titleTag: VNodeArrayChildren = [\n        slots.title?.(),\n        h(\n          ElIcon,\n          {\n            class: nsSubMenu.e('icon-arrow'),\n            style: {\n              transform: opened.value\n                ? (props.expandCloseIcon && props.expandOpenIcon) ||\n                  (props.collapseCloseIcon &&\n                    props.collapseOpenIcon &&\n                    rootMenu.props.collapse)\n                  ? 'none'\n                  : 'rotateZ(180deg)'\n                : 'none',\n            },\n          },\n          {\n            default: () =>\n              isString(subMenuTitleIcon.value)\n                ? h(instance.appContext.components[subMenuTitleIcon.value])\n                : h(subMenuTitleIcon.value),\n          }\n        ),\n      ]\n\n      // this render function is only used for bypass `Vue`'s compiler caused patching issue.\n      const child = rootMenu.isMenuPopup\n        ? h(\n            ElTooltip,\n            {\n              ref: vPopper,\n              visible: opened.value,\n              effect: 'light',\n              pure: true,\n              offset: subMenuPopperOffset.value,\n              showArrow: false,\n              persistent: persistent.value,\n              popperClass: subMenuPopperClass.value,\n              popperStyle: subMenuPopperStyle.value,\n              placement: currentPlacement.value,\n              teleported: appendToBody.value,\n              fallbackPlacements: fallbackPlacements.value,\n              transition: menuTransitionName.value,\n              gpuAcceleration: false,\n            },\n            {\n              content: () =>\n                h(\n                  'div',\n                  {\n                    class: [\n                      nsMenu.m(mode.value),\n                      nsMenu.m('popup-container'),\n                      subMenuPopperClass.value,\n                    ],\n                    onMouseenter: (evt: MouseEvent) =>\n                      handleMouseenter(evt, 100),\n                    onMouseleave: () => handleMouseleave(true),\n                    onFocus: (evt: FocusEvent) => handleMouseenter(evt, 100),\n                  },\n                  [\n                    h(\n                      'ul',\n                      {\n                        class: [\n                          nsMenu.b(),\n                          nsMenu.m('popup'),\n                          nsMenu.m(`popup-${currentPlacement.value}`),\n                        ],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                  ]\n                ),\n              default: () =>\n                h(\n                  'div',\n                  {\n                    class: nsSubMenu.e('title'),\n                    onClick: handleClick,\n                  },\n                  titleTag\n                ),\n            }\n          )\n        : h(Fragment, {}, [\n            h(\n              'div',\n              {\n                class: nsSubMenu.e('title'),\n                ref: verticalTitleRef,\n                onClick: handleClick,\n              },\n              titleTag\n            ),\n            h(\n              ElCollapseTransition,\n              {},\n              {\n                default: () =>\n                  withDirectives(\n                    h(\n                      'ul',\n                      {\n                        role: 'menu',\n                        class: [nsMenu.b(), nsMenu.m('inline')],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                    [[vShow, opened.value]]\n                  ),\n              }\n            ),\n          ])\n\n      return h(\n        'li',\n        {\n          class: [\n            nsSubMenu.b(),\n            nsSubMenu.is('active', active.value),\n            nsSubMenu.is('opened', opened.value),\n            nsSubMenu.is('disabled', props.disabled),\n          ],\n          role: 'menuitem',\n          ariaHaspopup: true,\n          ariaExpanded: opened.value,\n          onMouseenter: handleMouseenter,\n          onMouseleave: () => handleMouseleave(),\n          onFocus: handleMouseenter,\n        },\n        [child]\n      )\n    }\n  },\n})\n"],"mappings":"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"}

package/lib/components/message/src/instance.d.ts

@@ -11,7 +11,7 @@ type MessageContext = {
   vm: ComponentInternalInstance;
   props: Mutable<MessageProps>;
 };
-declare const placementInstances: _$vue.ShallowReactive<Record<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", MessageContext[]>>;
+declare const placementInstances: _$vue.ShallowReactive<Record<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right", MessageContext[]>>;
 declare const getOrCreatePlacementInstances: (placement: MessagePlacement) => MessageContext[];
 declare const getInstance: (id: string, placement: MessagePlacement) => {
   current: MessageContext;

package/lib/components/message/src/message.d.ts

@@ -1,6 +1,6 @@
 import { IconPropType } from "../../../utils/vue/icon.js";
 import { EpPropFinalized } from "../../../utils/vue/props/types.js";
-import { Mutable } from "../../../utils/typescript.js";
+import { ClassValue, Mutable } from "../../../utils/typescript.js";
 import _default from "./message.vue.js";
 import * as _$vue from "vue";
 import { AppContext, ExtractPublicPropTypes, VNode } from "vue";
@@ -10,7 +10,7 @@ interface MessageProps {
   /**
    * @description custom class name for Message
    */
-  customClass?: string;
+  customClass?: ClassValue;
   /**
    * @description whether `message` is treated as HTML string
    */
@@ -106,7 +106,7 @@ declare const messageDefaults: Mutable<{
  * @deprecated Removed after 3.0.0, Use `MessageProps` instead.
  */
 declare const messageProps: {
-  readonly customClass: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+  readonly customClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, "", boolean>;
   readonly dangerouslyUseHTMLString: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly duration: EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
   readonly icon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, undefined, boolean>;
@@ -130,10 +130,10 @@ declare const messageProps: {
     readonly prototype: any;
   }) | null)[], unknown, unknown, undefined, boolean>;
   readonly showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-  readonly type: EpPropFinalized<StringConstructor, "error" | "info" | "primary" | "success" | "warning", unknown, "info", boolean>;
+  readonly type: EpPropFinalized<StringConstructor, "primary" | "success" | "warning" | "info" | "error", unknown, "info", boolean>;
   readonly plain: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
-  readonly placement: EpPropFinalized<StringConstructor, "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
+  readonly placement: EpPropFinalized<StringConstructor, "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
   readonly zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   readonly grouping: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly repeatNum: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;

package/lib/components/message/src/message.js

@@ -47,7 +47,12 @@ const messageProps = require_runtime$1.buildProps({
 	* @description custom class name for Message
 	*/
 	customClass: {
-		type: String,
+		type: require_runtime$1.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
 		default: messageDefaults.customClass
 	},
 	/**

package/lib/components/message/src/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","names":["mutable","isClient","buildProps","iconPropType","definePropType"],"sources":["../../../../../../packages/components/message/src/message.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isClient,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { AppContext, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { IconPropType, Mutable } from '@element-plus/utils'\nimport type MessageConstructor from './message.vue'\n\nexport interface MessageProps {\n  /**\n   * @description custom class name for Message\n   */\n  customClass?: string\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString?: boolean\n  /**\n   * @description display duration, millisecond. If set to 0, it will not turn off automatically\n   */\n  duration?: number\n  /**\n   * @description custom icon component, overrides `type`\n   */\n  icon?: IconPropType\n  /**\n   * @description message dom id\n   */\n  id?: string\n  /**\n   * @description message text\n   */\n  message?: string | VNode | (() => VNode)\n  /**\n   * @description callback function when closed with the message instance as the parameter\n   */\n  onClose?: () => void\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description message type\n   */\n  type?: MessageType\n  /**\n   * @description whether message is plain\n   */\n  plain?: boolean\n  /**\n   * @description set the distance to the top of viewport\n   */\n  offset?: number\n  /**\n   * @description message placement position\n   */\n  placement?: MessagePlacement\n  /**\n   * @description message element zIndex value\n   */\n  zIndex?: number\n  /**\n   * @description merge messages with the same content, type of VNode message is not supported\n   */\n  grouping?: boolean\n  /**\n   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`\n   */\n  repeatNum?: number\n}\n\nexport const messageTypes = [\n  'primary',\n  'success',\n  'info',\n  'warning',\n  'error',\n] as const\n\nexport const messagePlacement = [\n  'top',\n  'top-left',\n  'top-right',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n] as const\n\nexport const MESSAGE_DEFAULT_PLACEMENT = 'top'\n\nexport type MessageType = (typeof messageTypes)[number]\nexport type MessagePlacement = (typeof messagePlacement)[number]\n/** @deprecated please use `MessageType` instead */\nexport type messageType = MessageType // will be removed in 3.0.0.\n\nexport interface MessageConfigContext {\n  max?: number\n  grouping?: boolean\n  duration?: number\n  offset?: number\n  showClose?: boolean\n  plain?: boolean\n  placement?: string\n}\n\nexport const messageDefaults = mutable({\n  customClass: '',\n  dangerouslyUseHTMLString: false,\n  duration: 3000,\n  icon: undefined,\n  id: '',\n  message: '',\n  onClose: undefined,\n  showClose: false,\n  type: 'info',\n  plain: false,\n  offset: 16,\n  placement: undefined,\n  zIndex: 0,\n  grouping: false,\n  repeatNum: 1,\n  appendTo: isClient ? document.body : (undefined as never),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `MessageProps` instead.\n */\nexport const messageProps = buildProps({\n  /**\n   * @description custom class name for Message\n   */\n  customClass: {\n    type: String,\n    default: messageDefaults.customClass,\n  },\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString: {\n    type: Boolean,\n    default: messageDefaults.dangerouslyUseHTMLString,\n  },\n  /**\n   * @description display duration, millisecond. If set to 0, it will not turn off automatically\n   */\n  duration: {\n    type: Number,\n    default: messageDefaults.duration,\n  },\n  /**\n   * @description custom icon component, overrides `type`\n   */\n  icon: {\n    type: iconPropType,\n    default: messageDefaults.icon,\n  },\n  /**\n   * @description message dom id\n   */\n  id: {\n    type: String,\n    default: messageDefaults.id,\n  },\n  /**\n   * @description message text\n   */\n  message: {\n    type: definePropType<string | VNode | (() => VNode)>([\n      String,\n      Object,\n      Function,\n    ]),\n    default: messageDefaults.message,\n  },\n  /**\n   * @description callback function when closed with the message instance as the parameter\n   */\n  onClose: {\n    type: definePropType<() => void>(Function),\n    default: messageDefaults.onClose,\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: messageDefaults.showClose,\n  },\n  /**\n   * @description message type\n   */\n  type: {\n    type: String,\n    values: messageTypes,\n    default: messageDefaults.type,\n  },\n  /**\n   * @description whether message is plain\n   */\n  plain: {\n    type: Boolean,\n    default: messageDefaults.plain,\n  },\n  /**\n   * @description set the distance to the top of viewport\n   */\n  offset: {\n    type: Number,\n    default: messageDefaults.offset,\n  },\n  /**\n   * @description message placement position\n   */\n  placement: {\n    type: String,\n    values: messagePlacement,\n    default: messageDefaults.placement,\n  },\n  /**\n   * @description message element zIndex value\n   */\n  zIndex: {\n    type: Number,\n    default: messageDefaults.zIndex,\n  },\n  /**\n   * @description merge messages with the same content, type of VNode message is not supported\n   */\n  grouping: {\n    type: Boolean,\n    default: messageDefaults.grouping,\n  },\n  /**\n   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`\n   */\n  repeatNum: {\n    type: Number,\n    default: messageDefaults.repeatNum,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `MessageProps` instead.\n */\nexport type MessagePropsPublic = ExtractPublicPropTypes<typeof messageProps>\n\nexport const messageEmits = {\n  destroy: () => true,\n}\nexport type MessageEmits = typeof messageEmits\n\nexport type MessageInstance = InstanceType<typeof MessageConstructor> & unknown\n\nexport type MessageOptions = Partial<\n  Mutable<\n    Omit<MessageProps, 'id'> & {\n      appendTo?: HTMLElement | string\n    }\n  >\n>\nexport type MessageParams = MessageOptions | MessageOptions['message']\nexport type MessageParamsNormalized = Omit<MessageProps, 'id'> & {\n  /**\n   * @description set the root element for the message, default to `document.body`\n   */\n  appendTo: HTMLElement\n}\nexport type MessageOptionsWithType = Omit<MessageOptions, 'type'>\nexport type MessageParamsWithType =\n  | MessageOptionsWithType\n  | MessageOptions['message']\n\nexport interface MessageHandler {\n  /**\n   * @description close the Message\n   */\n  close: () => void\n}\n\nexport type MessageFn = {\n  (options?: MessageParams, appContext?: null | AppContext): MessageHandler\n  closeAll(type?: MessageType): void\n  closeAllByPlacement(position: MessagePlacement): void\n}\nexport type MessageTypedFn = (\n  options?: MessageParamsWithType,\n  appContext?: null | AppContext\n) => MessageHandler\n\nexport type Message = MessageFn & {\n  primary: MessageTypedFn\n  success: MessageTypedFn\n  warning: MessageTypedFn\n  info: MessageTypedFn\n  error: MessageTypedFn\n}\n"],"mappings":";;;;;;;AA2EA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,4BAA4B;AAiBzC,MAAa,kBAAkBA,mBAAAA,QAAQ;CACrC,aAAa;CACb,0BAA0B;CAC1B,UAAU;CACV,MAAM,KAAA;CACN,IAAI;CACJ,SAAS;CACT,SAAS,KAAA;CACT,WAAW;CACX,MAAM;CACN,OAAO;CACP,QAAQ;CACR,WAAW,KAAA;CACX,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAUC,aAAAA,WAAW,SAAS,OAAQ,KAAA;CACvC,CAAU;;;;AAKX,MAAa,eAAeC,kBAAAA,WAAW;;;;CAIrC,aAAa;EACX,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,0BAA0B;EACxB,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,MAAM;EACJ,MAAMC,aAAAA;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,IAAI;EACF,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,SAAS;EACP,MAAMC,kBAAAA,eAA+C;GACnD;GACA;GACA;GACD,CAAC;EACF,SAAS,gBAAgB;EAC1B;;;;CAID,SAAS;EACP,MAAMA,kBAAAA,eAA2B,SAAS;EAC1C,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,SAAS,gBAAgB;EAC1B;;;;CAID,OAAO;EACL,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,QAAQ;EACR,SAAS,gBAAgB;EAC1B;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS,gBAAgB;EAC1B;CACF,CAAU;AAOX,MAAa,eAAe,EAC1B,eAAe,MAChB"}
+{"version":3,"file":"message.js","names":["mutable","isClient","buildProps","definePropType","iconPropType"],"sources":["../../../../../../packages/components/message/src/message.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  iconPropType,\n  isClient,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { AppContext, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ClassValue, IconPropType, Mutable } from '@element-plus/utils'\nimport type MessageConstructor from './message.vue'\n\nexport interface MessageProps {\n  /**\n   * @description custom class name for Message\n   */\n  customClass?: ClassValue\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString?: boolean\n  /**\n   * @description display duration, millisecond. If set to 0, it will not turn off automatically\n   */\n  duration?: number\n  /**\n   * @description custom icon component, overrides `type`\n   */\n  icon?: IconPropType\n  /**\n   * @description message dom id\n   */\n  id?: string\n  /**\n   * @description message text\n   */\n  message?: string | VNode | (() => VNode)\n  /**\n   * @description callback function when closed with the message instance as the parameter\n   */\n  onClose?: () => void\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description message type\n   */\n  type?: MessageType\n  /**\n   * @description whether message is plain\n   */\n  plain?: boolean\n  /**\n   * @description set the distance to the top of viewport\n   */\n  offset?: number\n  /**\n   * @description message placement position\n   */\n  placement?: MessagePlacement\n  /**\n   * @description message element zIndex value\n   */\n  zIndex?: number\n  /**\n   * @description merge messages with the same content, type of VNode message is not supported\n   */\n  grouping?: boolean\n  /**\n   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`\n   */\n  repeatNum?: number\n}\n\nexport const messageTypes = [\n  'primary',\n  'success',\n  'info',\n  'warning',\n  'error',\n] as const\n\nexport const messagePlacement = [\n  'top',\n  'top-left',\n  'top-right',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n] as const\n\nexport const MESSAGE_DEFAULT_PLACEMENT = 'top'\n\nexport type MessageType = (typeof messageTypes)[number]\nexport type MessagePlacement = (typeof messagePlacement)[number]\n/** @deprecated please use `MessageType` instead */\nexport type messageType = MessageType // will be removed in 3.0.0.\n\nexport interface MessageConfigContext {\n  max?: number\n  grouping?: boolean\n  duration?: number\n  offset?: number\n  showClose?: boolean\n  plain?: boolean\n  placement?: string\n}\n\nexport const messageDefaults = mutable({\n  customClass: '',\n  dangerouslyUseHTMLString: false,\n  duration: 3000,\n  icon: undefined,\n  id: '',\n  message: '',\n  onClose: undefined,\n  showClose: false,\n  type: 'info',\n  plain: false,\n  offset: 16,\n  placement: undefined,\n  zIndex: 0,\n  grouping: false,\n  repeatNum: 1,\n  appendTo: isClient ? document.body : (undefined as never),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `MessageProps` instead.\n */\nexport const messageProps = buildProps({\n  /**\n   * @description custom class name for Message\n   */\n  customClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: messageDefaults.customClass,\n  },\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString: {\n    type: Boolean,\n    default: messageDefaults.dangerouslyUseHTMLString,\n  },\n  /**\n   * @description display duration, millisecond. If set to 0, it will not turn off automatically\n   */\n  duration: {\n    type: Number,\n    default: messageDefaults.duration,\n  },\n  /**\n   * @description custom icon component, overrides `type`\n   */\n  icon: {\n    type: iconPropType,\n    default: messageDefaults.icon,\n  },\n  /**\n   * @description message dom id\n   */\n  id: {\n    type: String,\n    default: messageDefaults.id,\n  },\n  /**\n   * @description message text\n   */\n  message: {\n    type: definePropType<string | VNode | (() => VNode)>([\n      String,\n      Object,\n      Function,\n    ]),\n    default: messageDefaults.message,\n  },\n  /**\n   * @description callback function when closed with the message instance as the parameter\n   */\n  onClose: {\n    type: definePropType<() => void>(Function),\n    default: messageDefaults.onClose,\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: messageDefaults.showClose,\n  },\n  /**\n   * @description message type\n   */\n  type: {\n    type: String,\n    values: messageTypes,\n    default: messageDefaults.type,\n  },\n  /**\n   * @description whether message is plain\n   */\n  plain: {\n    type: Boolean,\n    default: messageDefaults.plain,\n  },\n  /**\n   * @description set the distance to the top of viewport\n   */\n  offset: {\n    type: Number,\n    default: messageDefaults.offset,\n  },\n  /**\n   * @description message placement position\n   */\n  placement: {\n    type: String,\n    values: messagePlacement,\n    default: messageDefaults.placement,\n  },\n  /**\n   * @description message element zIndex value\n   */\n  zIndex: {\n    type: Number,\n    default: messageDefaults.zIndex,\n  },\n  /**\n   * @description merge messages with the same content, type of VNode message is not supported\n   */\n  grouping: {\n    type: Boolean,\n    default: messageDefaults.grouping,\n  },\n  /**\n   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`\n   */\n  repeatNum: {\n    type: Number,\n    default: messageDefaults.repeatNum,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `MessageProps` instead.\n */\nexport type MessagePropsPublic = ExtractPublicPropTypes<typeof messageProps>\n\nexport const messageEmits = {\n  destroy: () => true,\n}\nexport type MessageEmits = typeof messageEmits\n\nexport type MessageInstance = InstanceType<typeof MessageConstructor> & unknown\n\nexport type MessageOptions = Partial<\n  Mutable<\n    Omit<MessageProps, 'id'> & {\n      appendTo?: HTMLElement | string\n    }\n  >\n>\nexport type MessageParams = MessageOptions | MessageOptions['message']\nexport type MessageParamsNormalized = Omit<MessageProps, 'id'> & {\n  /**\n   * @description set the root element for the message, default to `document.body`\n   */\n  appendTo: HTMLElement\n}\nexport type MessageOptionsWithType = Omit<MessageOptions, 'type'>\nexport type MessageParamsWithType =\n  MessageOptionsWithType | MessageOptions['message']\n\nexport interface MessageHandler {\n  /**\n   * @description close the Message\n   */\n  close: () => void\n}\n\nexport type MessageFn = {\n  (options?: MessageParams, appContext?: null | AppContext): MessageHandler\n  closeAll(type?: MessageType): void\n  closeAllByPlacement(position: MessagePlacement): void\n}\nexport type MessageTypedFn = (\n  options?: MessageParamsWithType,\n  appContext?: null | AppContext\n) => MessageHandler\n\nexport type Message = MessageFn & {\n  primary: MessageTypedFn\n  success: MessageTypedFn\n  warning: MessageTypedFn\n  info: MessageTypedFn\n  error: MessageTypedFn\n}\n"],"mappings":";;;;;;;AA2EA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,4BAA4B;AAiBzC,MAAa,kBAAkBA,mBAAAA,QAAQ;CACrC,aAAa;CACb,0BAA0B;CAC1B,UAAU;CACV,MAAM,KAAA;CACN,IAAI;CACJ,SAAS;CACT,SAAS,KAAA;CACT,WAAW;CACX,MAAM;CACN,OAAO;CACP,QAAQ;CACR,WAAW,KAAA;CACX,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAUC,aAAAA,WAAW,SAAS,OAAQ,KAAA;CACvC,CAAU;;;;AAKX,MAAa,eAAeC,kBAAAA,WAAW;;;;CAIrC,aAAa;EACX,MAAMC,kBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS,gBAAgB;EAC1B;;;;CAID,0BAA0B;EACxB,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,MAAM;EACJ,MAAMC,aAAAA;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,IAAI;EACF,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,SAAS;EACP,MAAMD,kBAAAA,eAA+C;GACnD;GACA;GACA;GACD,CAAC;EACF,SAAS,gBAAgB;EAC1B;;;;CAID,SAAS;EACP,MAAMA,kBAAAA,eAA2B,SAAS;EAC1C,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,SAAS,gBAAgB;EAC1B;;;;CAID,OAAO;EACL,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,QAAQ;EACR,SAAS,gBAAgB;EAC1B;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,gBAAgB;EAC1B;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS,gBAAgB;EAC1B;CACF,CAAU;AAOX,MAAa,eAAe,EAC1B,eAAe,MAChB"}

package/lib/components/message/src/message.vue.d.ts

@@ -1,4 +1,5 @@
 import { IconPropType } from "../../../utils/vue/icon.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import { MessagePlacement, MessageProps, MessageType } from "./message.js";
 import * as _$vue from "vue";
 
@@ -17,18 +18,18 @@ declare const __VLS_base: _$vue.DefineComponent<MessageProps, {
 }, string, _$vue.PublicProps, Readonly<MessageProps> & Readonly<{
   onDestroy?: (() => any) | undefined;
 }>, {
+  id: string;
   type: MessageType;
+  icon: IconPropType;
+  zIndex: number;
   offset: number;
   placement: MessagePlacement;
-  id: string;
-  zIndex: number;
-  onClose: () => void;
-  icon: IconPropType;
-  plain: boolean;
   message: string | _$vue.VNode | (() => _$vue.VNode);
   showClose: boolean;
+  onClose: () => void;
+  plain: boolean;
   duration: number;
-  customClass: string;
+  customClass: string | false | Record<string, any> | ClassValue[] | null;
   dangerouslyUseHTMLString: boolean;
   grouping: boolean;
   repeatNum: number;

package/lib/components/message/src/method.js.map

@@ -1 +1 @@
-{"version":3,"file":"method.js","names":["isElement","messageConfig","messagePlacement","messageDefaults","isBoolean","isNumber","placementInstances","MessageConstructor","isClient","getOrCreatePlacementInstances","messageTypes"],"sources":["../../../../../../packages/components/message/src/method.ts"],"sourcesContent":["import { createVNode, isVNode, render } from 'vue'\nimport {\n  debugWarn,\n  hasOwn,\n  isBoolean,\n  isClient,\n  isElement,\n  isFunction,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { messageConfig } from '@element-plus/components/config-provider'\nimport MessageConstructor from './message.vue'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messagePlacement,\n  messageTypes,\n} from './message'\nimport { getOrCreatePlacementInstances, placementInstances } from './instance'\n\nimport type { MessageContext } from './instance'\nimport type { AppContext } from 'vue'\nimport type {\n  Message,\n  MessageFn,\n  MessageHandler,\n  MessageOptions,\n  MessageParams,\n  MessageParamsNormalized,\n  MessagePlacement,\n  MessageType,\n} from './message'\n\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst normalizeAppendTo = (normalized: MessageOptions) => {\n  const appendTo = normalized.appendTo\n  if (!appendTo) {\n    normalized.appendTo = document.body\n  } else if (isString(normalized.appendTo)) {\n    let appendTo = document.querySelector<HTMLElement>(normalized.appendTo)\n\n    // should fallback to default value with a warning\n    if (!isElement(appendTo)) {\n      debugWarn(\n        'ElMessage',\n        'the appendTo option is not an HTMLElement. Falling back to document.body.'\n      )\n      appendTo = document.body\n    }\n    normalized.appendTo = appendTo\n  }\n}\n\nconst normalizePlacement = (normalized: MessageOptions) => {\n  // if placement is not passed and global has config, use global config\n  if (\n    !normalized.placement &&\n    isString(messageConfig.placement) &&\n    messageConfig.placement\n  ) {\n    normalized.placement = messageConfig.placement as\n      | MessagePlacement\n      | undefined\n  }\n  // if placement is not passed and global has no config, use default config\n  if (!normalized.placement) {\n    normalized.placement = MESSAGE_DEFAULT_PLACEMENT\n  }\n  // if placement is not valid, use default config\n  if (!messagePlacement.includes(normalized.placement!)) {\n    debugWarn(\n      'ElMessage',\n      `Invalid placement: ${normalized.placement}. Falling back to '${MESSAGE_DEFAULT_PLACEMENT}'.`\n    )\n    normalized.placement = MESSAGE_DEFAULT_PLACEMENT\n  }\n}\n\nconst normalizeOptions = (params?: MessageParams) => {\n  const options: MessageOptions =\n    !params || isString(params) || isVNode(params) || isFunction(params)\n      ? { message: params }\n      : params\n\n  const normalized: MessageOptions = {\n    ...messageDefaults,\n    ...options,\n  }\n\n  normalizeAppendTo(normalized)\n  normalizePlacement(normalized)\n\n  // When grouping is configured globally,\n  // if grouping is manually set when calling message individually and it is not equal to the default value,\n  // the global configuration cannot override the current setting. default => false\n  if (isBoolean(messageConfig.grouping) && !normalized.grouping) {\n    normalized.grouping = messageConfig.grouping\n  }\n  if (isNumber(messageConfig.duration) && normalized.duration === 3000) {\n    normalized.duration = messageConfig.duration\n  }\n  if (isNumber(messageConfig.offset) && normalized.offset === 16) {\n    normalized.offset = messageConfig.offset\n  }\n  if (isBoolean(messageConfig.showClose) && !normalized.showClose) {\n    normalized.showClose = messageConfig.showClose\n  }\n  if (isBoolean(messageConfig.plain) && !normalized.plain) {\n    normalized.plain = messageConfig.plain\n  }\n\n  return normalized as MessageParamsNormalized\n}\n\nconst closeMessage = (instance: MessageContext) => {\n  const placement = instance.props.placement || MESSAGE_DEFAULT_PLACEMENT\n  const instances = placementInstances[placement]\n\n  const idx = instances.indexOf(instance)\n  if (idx === -1) return\n  instances.splice(idx, 1)\n  const { handler } = instance\n  handler.close()\n}\n\nconst createMessage = (\n  { appendTo, ...options }: MessageParamsNormalized,\n  context?: AppContext | null\n): MessageContext => {\n  const id = `message_${seed++}`\n  const userOnClose = options.onClose\n\n  const container = document.createElement('div')\n\n  const props = {\n    ...options,\n    // now the zIndex will be used inside the message.vue component instead of here.\n    // zIndex: nextIndex() + options.zIndex\n    id,\n    onClose: () => {\n      userOnClose?.()\n      closeMessage(instance)\n    },\n\n    // clean message element preventing mem leak\n    onDestroy: () => {\n      // since the element is destroy, then the VNode should be collected by GC as well\n      // we do not want cause any mem leak because we have returned vm as a reference to users\n      // so that we manually set it to false.\n      render(null, container)\n    },\n  }\n  const vnode = createVNode(\n    MessageConstructor,\n    props,\n    isFunction(props.message) || isVNode(props.message)\n      ? {\n          default: isFunction(props.message)\n            ? props.message\n            : () => props.message,\n        }\n      : null\n  )\n  vnode.appContext = context || message._context\n\n  render(vnode, container)\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  appendTo.appendChild(container.firstElementChild!)\n\n  const vm = vnode.component!\n\n  const handler: MessageHandler = {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () => {\n      vm.exposed!.close()\n    },\n  }\n\n  const instance: MessageContext = {\n    id,\n    vnode,\n    vm,\n    handler,\n    props: (vnode.component as any).props,\n  }\n\n  return instance\n}\n\nconst message: MessageFn &\n  Partial<Message> & { _context: AppContext | null } = (\n  options = {},\n  context\n) => {\n  if (!isClient) return { close: () => undefined }\n\n  const normalized = normalizeOptions(options)\n  const instances = getOrCreatePlacementInstances(\n    normalized.placement || MESSAGE_DEFAULT_PLACEMENT\n  )\n\n  if (normalized.grouping && instances.length) {\n    const instance = instances.find(\n      ({ vnode: vm }) => vm.props?.message === normalized.message\n    )\n    if (instance) {\n      instance.props.repeatNum! += 1\n      instance.props.type = normalized.type\n      return instance.handler\n    }\n  }\n\n  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n    return { close: () => undefined }\n  }\n\n  const instance = createMessage(normalized, context)\n\n  instances.push(instance)\n  return instance.handler\n}\n\nmessageTypes.forEach((type) => {\n  message[type] = (options = {}, appContext) => {\n    const normalized = normalizeOptions(options)\n    return message({ ...normalized, type }, appContext)\n  }\n})\n\nexport function closeAll(type?: MessageType): void {\n  for (const placement in placementInstances) {\n    if (hasOwn(placementInstances, placement)) {\n      // Create a copy of instances to avoid modification during iteration\n      const instances: MessageContext[] = [...placementInstances[placement]]\n      for (const instance of instances) {\n        if (!type || type === instance.props.type) {\n          instance.handler.close()\n        }\n      }\n    }\n  }\n}\n\nexport function closeAllByPlacement(placement: MessagePlacement) {\n  if (!placementInstances[placement]) return\n  // Create a copy of instances to avoid modification during iteration\n  const instances = [...placementInstances[placement]]\n  instances.forEach((instance) => instance.handler.close())\n}\n\nmessage.closeAll = closeAll\nmessage.closeAllByPlacement = closeAllByPlacement\nmessage._context = null\n\nexport default message as Message\n"],"mappings":"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"}
+{"version":3,"file":"method.js","names":["isElement","messageConfig","messagePlacement","messageDefaults","isBoolean","isNumber","placementInstances","MessageConstructor","isClient","getOrCreatePlacementInstances","messageTypes"],"sources":["../../../../../../packages/components/message/src/method.ts"],"sourcesContent":["import { createVNode, isVNode, render } from 'vue'\nimport {\n  debugWarn,\n  hasOwn,\n  isBoolean,\n  isClient,\n  isElement,\n  isFunction,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { messageConfig } from '@element-plus/components/config-provider'\nimport MessageConstructor from './message.vue'\nimport {\n  MESSAGE_DEFAULT_PLACEMENT,\n  messageDefaults,\n  messagePlacement,\n  messageTypes,\n} from './message'\nimport { getOrCreatePlacementInstances, placementInstances } from './instance'\n\nimport type { MessageContext } from './instance'\nimport type { AppContext } from 'vue'\nimport type {\n  Message,\n  MessageFn,\n  MessageHandler,\n  MessageOptions,\n  MessageParams,\n  MessageParamsNormalized,\n  MessagePlacement,\n  MessageType,\n} from './message'\n\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst normalizeAppendTo = (normalized: MessageOptions) => {\n  const appendTo = normalized.appendTo\n  if (!appendTo) {\n    normalized.appendTo = document.body\n  } else if (isString(normalized.appendTo)) {\n    let appendTo = document.querySelector<HTMLElement>(normalized.appendTo)\n\n    // should fallback to default value with a warning\n    if (!isElement(appendTo)) {\n      debugWarn(\n        'ElMessage',\n        'the appendTo option is not an HTMLElement. Falling back to document.body.'\n      )\n      appendTo = document.body\n    }\n    normalized.appendTo = appendTo\n  }\n}\n\nconst normalizePlacement = (normalized: MessageOptions) => {\n  // if placement is not passed and global has config, use global config\n  if (\n    !normalized.placement &&\n    isString(messageConfig.placement) &&\n    messageConfig.placement\n  ) {\n    normalized.placement = messageConfig.placement as\n      MessagePlacement | undefined\n  }\n  // if placement is not passed and global has no config, use default config\n  if (!normalized.placement) {\n    normalized.placement = MESSAGE_DEFAULT_PLACEMENT\n  }\n  // if placement is not valid, use default config\n  if (!messagePlacement.includes(normalized.placement!)) {\n    debugWarn(\n      'ElMessage',\n      `Invalid placement: ${normalized.placement}. Falling back to '${MESSAGE_DEFAULT_PLACEMENT}'.`\n    )\n    normalized.placement = MESSAGE_DEFAULT_PLACEMENT\n  }\n}\n\nconst normalizeOptions = (params?: MessageParams) => {\n  const options: MessageOptions =\n    !params || isString(params) || isVNode(params) || isFunction(params)\n      ? { message: params }\n      : params\n\n  const normalized: MessageOptions = {\n    ...messageDefaults,\n    ...options,\n  }\n\n  normalizeAppendTo(normalized)\n  normalizePlacement(normalized)\n\n  // When grouping is configured globally,\n  // if grouping is manually set when calling message individually and it is not equal to the default value,\n  // the global configuration cannot override the current setting. default => false\n  if (isBoolean(messageConfig.grouping) && !normalized.grouping) {\n    normalized.grouping = messageConfig.grouping\n  }\n  if (isNumber(messageConfig.duration) && normalized.duration === 3000) {\n    normalized.duration = messageConfig.duration\n  }\n  if (isNumber(messageConfig.offset) && normalized.offset === 16) {\n    normalized.offset = messageConfig.offset\n  }\n  if (isBoolean(messageConfig.showClose) && !normalized.showClose) {\n    normalized.showClose = messageConfig.showClose\n  }\n  if (isBoolean(messageConfig.plain) && !normalized.plain) {\n    normalized.plain = messageConfig.plain\n  }\n\n  return normalized as MessageParamsNormalized\n}\n\nconst closeMessage = (instance: MessageContext) => {\n  const placement = instance.props.placement || MESSAGE_DEFAULT_PLACEMENT\n  const instances = placementInstances[placement]\n\n  const idx = instances.indexOf(instance)\n  if (idx === -1) return\n  instances.splice(idx, 1)\n  const { handler } = instance\n  handler.close()\n}\n\nconst createMessage = (\n  { appendTo, ...options }: MessageParamsNormalized,\n  context?: AppContext | null\n): MessageContext => {\n  const id = `message_${seed++}`\n  const userOnClose = options.onClose\n\n  const container = document.createElement('div')\n\n  const props = {\n    ...options,\n    // now the zIndex will be used inside the message.vue component instead of here.\n    // zIndex: nextIndex() + options.zIndex\n    id,\n    onClose: () => {\n      userOnClose?.()\n      closeMessage(instance)\n    },\n\n    // clean message element preventing mem leak\n    onDestroy: () => {\n      // since the element is destroy, then the VNode should be collected by GC as well\n      // we do not want cause any mem leak because we have returned vm as a reference to users\n      // so that we manually set it to false.\n      render(null, container)\n    },\n  }\n  const vnode = createVNode(\n    MessageConstructor,\n    props,\n    isFunction(props.message) || isVNode(props.message)\n      ? {\n          default: isFunction(props.message)\n            ? props.message\n            : () => props.message,\n        }\n      : null\n  )\n  vnode.appContext = context || message._context\n\n  render(vnode, container)\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  appendTo.appendChild(container.firstElementChild!)\n\n  const vm = vnode.component!\n\n  const handler: MessageHandler = {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () => {\n      vm.exposed!.close()\n    },\n  }\n\n  const instance: MessageContext = {\n    id,\n    vnode,\n    vm,\n    handler,\n    props: (vnode.component as any).props,\n  }\n\n  return instance\n}\n\nconst message: MessageFn &\n  Partial<Message> & { _context: AppContext | null } = (\n  options = {},\n  context\n) => {\n  if (!isClient) return { close: () => undefined }\n\n  const normalized = normalizeOptions(options)\n  const instances = getOrCreatePlacementInstances(\n    normalized.placement || MESSAGE_DEFAULT_PLACEMENT\n  )\n\n  if (normalized.grouping && instances.length) {\n    const instance = instances.find(\n      ({ vnode: vm }) => vm.props?.message === normalized.message\n    )\n    if (instance) {\n      instance.props.repeatNum! += 1\n      instance.props.type = normalized.type\n      return instance.handler\n    }\n  }\n\n  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n    return { close: () => undefined }\n  }\n\n  const instance = createMessage(normalized, context)\n\n  instances.push(instance)\n  return instance.handler\n}\n\nmessageTypes.forEach((type) => {\n  message[type] = (options = {}, appContext) => {\n    const normalized = normalizeOptions(options)\n    return message({ ...normalized, type }, appContext)\n  }\n})\n\nexport function closeAll(type?: MessageType): void {\n  for (const placement in placementInstances) {\n    if (hasOwn(placementInstances, placement)) {\n      // Create a copy of instances to avoid modification during iteration\n      const instances: MessageContext[] = [...placementInstances[placement]]\n      for (const instance of instances) {\n        if (!type || type === instance.props.type) {\n          instance.handler.close()\n        }\n      }\n    }\n  }\n}\n\nexport function closeAllByPlacement(placement: MessagePlacement) {\n  if (!placementInstances[placement]) return\n  // Create a copy of instances to avoid modification during iteration\n  const instances = [...placementInstances[placement]]\n  instances.forEach((instance) => instance.handler.close())\n}\n\nmessage.closeAll = closeAll\nmessage.closeAllByPlacement = closeAllByPlacement\nmessage._context = null\n\nexport default message as Message\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,IAAI,OAAO;AAIX,MAAM,qBAAqB,eAA+B;CAExD,IAAI,CADa,WAAW,UAE1B,WAAW,WAAW,SAAS;MAC1B,KAAA,GAAA,YAAA,UAAa,WAAW,SAAS,EAAE;EACxC,IAAI,WAAW,SAAS,cAA2B,WAAW,SAAS;EAGvE,IAAI,CAACA,cAAAA,UAAU,SAAS,EAAE;GACxB,cAAA,UACE,aACA,4EACD;GACD,WAAW,SAAS;;EAEtB,WAAW,WAAW;;;AAI1B,MAAM,sBAAsB,eAA+B;CAEzD,IACE,CAAC,WAAW,cAAA,GAAA,YAAA,UACHC,wBAAAA,cAAc,UAAU,IACjCA,wBAAAA,cAAc,WAEd,WAAW,YAAYA,wBAAAA,cAAc;CAIvC,IAAI,CAAC,WAAW,WACd,WAAW,YAAA;CAGb,IAAI,CAACC,gBAAAA,iBAAiB,SAAS,WAAW,UAAW,EAAE;EACrD,cAAA,UACE,aACA,sBAAsB,WAAW,UAAU,0BAC5C;EACD,WAAW,YAAA;;;AAIf,MAAM,oBAAoB,WAA2B;CACnD,MAAM,UACJ,CAAC,WAAA,GAAA,YAAA,UAAmB,OAAO,KAAA,GAAA,IAAA,SAAY,OAAO,KAAA,GAAA,YAAA,YAAe,OAAO,GAChE,EAAE,SAAS,QAAQ,GACnB;CAEN,MAAM,aAA6B;EACjC,GAAGC,gBAAAA;EACH,GAAG;EACJ;CAED,kBAAkB,WAAW;CAC7B,mBAAmB,WAAW;CAK9B,IAAIC,cAAAA,UAAUH,wBAAAA,cAAc,SAAS,IAAI,CAAC,WAAW,UACnD,WAAW,WAAWA,wBAAAA,cAAc;CAEtC,IAAII,cAAAA,SAASJ,wBAAAA,cAAc,SAAS,IAAI,WAAW,aAAa,KAC9D,WAAW,WAAWA,wBAAAA,cAAc;CAEtC,IAAII,cAAAA,SAASJ,wBAAAA,cAAc,OAAO,IAAI,WAAW,WAAW,IAC1D,WAAW,SAASA,wBAAAA,cAAc;CAEpC,IAAIG,cAAAA,UAAUH,wBAAAA,cAAc,UAAU,IAAI,CAAC,WAAW,WACpD,WAAW,YAAYA,wBAAAA,cAAc;CAEvC,IAAIG,cAAAA,UAAUH,wBAAAA,cAAc,MAAM,IAAI,CAAC,WAAW,OAChD,WAAW,QAAQA,wBAAAA,cAAc;CAGnC,OAAO;;AAGT,MAAM,gBAAgB,aAA6B;CAEjD,MAAM,YAAYK,iBAAAA,mBADA,SAAS,MAAM,aAAA;CAGjC,MAAM,MAAM,UAAU,QAAQ,SAAS;CACvC,IAAI,QAAQ,IAAI;CAChB,UAAU,OAAO,KAAK,EAAE;CACxB,MAAM,EAAE,YAAY;CACpB,QAAQ,OAAO;;AAGjB,MAAM,iBACJ,EAAE,UAAU,GAAG,WACf,YACmB;CACnB,MAAM,KAAK,WAAW;CACtB,MAAM,cAAc,QAAQ;CAE5B,MAAM,YAAY,SAAS,cAAc,MAAM;CAE/C,MAAM,QAAQ;EACZ,GAAG;EAGH;EACA,eAAe;GACb,eAAe;GACf,aAAa,SAAS;;EAIxB,iBAAiB;GAIf,CAAA,GAAA,IAAA,QAAO,MAAM,UAAU;;EAE1B;CACD,MAAM,SAAA,GAAA,IAAA,aACJC,kBAAAA,SACA,QAAA,GAAA,YAAA,YACW,MAAM,QAAQ,KAAA,GAAA,IAAA,SAAY,MAAM,QAAQ,GAC/C,EACE,UAAA,GAAA,YAAA,YAAoB,MAAM,QAAQ,GAC9B,MAAM,gBACA,MAAM,SACjB,GACD,KACL;CACD,MAAM,aAAa,WAAW,QAAQ;CAEtC,CAAA,GAAA,IAAA,QAAO,OAAO,UAAU;CAExB,SAAS,YAAY,UAAU,kBAAmB;CAElD,MAAM,KAAK,MAAM;CAUjB,MAAM,WAA2B;EAC/B;EACA;EACA;EACA,SAAA,EATA,aAAa;GACX,GAAG,QAAS,OAAO;KAQd;EACP,OAAQ,MAAM,UAAkB;EACjC;CAED,OAAO;;AAGT,MAAM,WAEJ,UAAU,EAAE,EACZ,YACG;CACH,IAAI,CAACC,aAAAA,UAAU,OAAO,EAAE,aAAa,KAAA,GAAW;CAEhD,MAAM,aAAa,iBAAiB,QAAQ;CAC5C,MAAM,YAAYC,iBAAAA,8BAChB,WAAW,aAAA,MACZ;CAED,IAAI,WAAW,YAAY,UAAU,QAAQ;EAC3C,MAAM,WAAW,UAAU,MACxB,EAAE,OAAO,SAAS,GAAG,OAAO,YAAY,WAAW,QACrD;EACD,IAAI,UAAU;GACZ,SAAS,MAAM,aAAc;GAC7B,SAAS,MAAM,OAAO,WAAW;GACjC,OAAO,SAAS;;;CAIpB,IAAIJ,cAAAA,SAASJ,wBAAAA,cAAc,IAAI,IAAI,UAAU,UAAUA,wBAAAA,cAAc,KACnE,OAAO,EAAE,aAAa,KAAA,GAAW;CAGnC,MAAM,WAAW,cAAc,YAAY,QAAQ;CAEnD,UAAU,KAAK,SAAS;CACxB,OAAO,SAAS;;AAGlBS,gBAAAA,aAAa,SAAS,SAAS;CAC7B,QAAQ,SAAS,UAAU,EAAE,EAAE,eAAe;EAE5C,OAAO,QAAQ;GAAE,GADE,iBAAiB,QACN;GAAE;GAAM,EAAE,WAAW;;EAErD;AAEF,SAAgB,SAAS,MAA0B;CACjD,KAAK,MAAM,aAAaJ,iBAAAA,oBACtB,KAAA,GAAA,YAAA,QAAWA,iBAAAA,oBAAoB,UAAU,EAAE;EAEzC,MAAM,YAA8B,CAAC,GAAGA,iBAAAA,mBAAmB,WAAW;EACtE,KAAK,MAAM,YAAY,WACrB,IAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,MACnC,SAAS,QAAQ,OAAO;;;AAOlC,SAAgB,oBAAoB,WAA6B;CAC/D,IAAI,CAACA,iBAAAA,mBAAmB,YAAY;CAGpC,CADmB,GAAGA,iBAAAA,mBAAmB,WAChC,CAAC,SAAS,aAAa,SAAS,QAAQ,OAAO,CAAC;;AAG3D,QAAQ,WAAW;AACnB,QAAQ,sBAAsB;AAC9B,QAAQ,WAAW"}