element-plus 1.2.0-beta.2 → 1.2.0-beta.6

package/es/components/menu/src/menu-item-group2.mjs

@@ -1,6 +1,6 @@
-import script from './menu-item-group.vue_vue&type=script&lang.mjs';
-export { default } from './menu-item-group.vue_vue&type=script&lang.mjs';
-import { render } from './menu-item-group.vue_vue&type=template&id=67a2995d&lang.mjs';
+import script from './menu-item-group.vue_vue_type_script_lang.mjs';
+export { default } from './menu-item-group.vue_vue_type_script_lang.mjs';
+import { render } from './menu-item-group.vue_vue_type_template_id_67a2995d_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/menu/src/menu-item-group.vue";

package/es/components/menu/src/menu-item.vue_vue_type_script_lang.mjs

@@ -0,0 +1,62 @@
+import { defineComponent, getCurrentInstance, inject, toRef, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
+import _Tooltip from '../../tooltip/index.mjs';
+import '../../popper/index.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import useMenu from './use-menu.mjs';
+import { menuItemProps, menuItemEmits } from './menu-item.mjs';
+import { Effect } from '../../popper/src/use-popper/defaults.mjs';
+
+const COMPONENT_NAME = "ElMenuItem";
+var script = defineComponent({
+  name: COMPONENT_NAME,
+  components: {
+    ElTooltip: _Tooltip
+  },
+  props: menuItemProps,
+  emits: menuItemEmits,
+  setup(props, { emit }) {
+    const instance = getCurrentInstance();
+    const rootMenu = inject("rootMenu");
+    if (!rootMenu)
+      throwError(COMPONENT_NAME, "can not inject root menu");
+    const { parentMenu, paddingStyle, indexPath } = useMenu(instance, toRef(props, "index"));
+    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    if (!subMenu)
+      throwError(COMPONENT_NAME, "can not inject sub menu");
+    const active = computed(() => props.index === rootMenu.activeIndex);
+    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,
+      handleClick
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=menu-item.vue_vue_type_script_lang.mjs.map

package/es/components/menu/src/menu-item.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["ElTooltip"],"mappings":";;;;;;;;AAiEA,MAAM,iBAAiB;AACvB,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,eACVA;AAAA;AAAA,EAGF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,WAAW;AACjB,UAAM,WAAW,OAAqB;AACtC,QAAI,CAAC;AAAU,iBAAW,gBAAgB;AAE1C,UAAM,EAAE,YAAY,cAAc,cAAc,QAC9C,UACA,MAAM,OAAO;AAGf,UAAM,UAAU,OAAwB,WAAW,WAAW,MAAM;AACpE,QAAI,CAAC;AAAS,iBAAW,gBAAgB;AAEzC,UAAM,SAAS,SAAS,MAAM,MAAM,UAAU,SAAS;AACvD,UAAM,OAA2B,SAAS;AAAA,MACxC,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA;AAGF,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAU;AACnB,iBAAS,oBAAoB;AAAA,UAC3B,OAAO,MAAM;AAAA,UACb,WAAW,UAAU;AAAA,UACrB,OAAO,MAAM;AAAA;AAEf,aAAK,SAAS;AAAA;AAAA;AAIlB,cAAU,MAAM;AACd,cAAQ,WAAW;AACnB,eAAS,YAAY;AAAA;AAGvB,oBAAgB,MAAM;AACpB,cAAQ,cAAc;AACtB,eAAS,eAAe;AAAA;AAG1B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}

package/es/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.mjs

@@ -0,0 +1,47 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createBlock, withCtx, renderSlot, createElementVNode, Fragment } from 'vue';
+
+const _hoisted_1 = { style: {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  height: "100%",
+  width: "100%",
+  display: "inline-block",
+  boxSizing: "border-box",
+  padding: "0 20px"
+} };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["el-menu-item", {
+      "is-active": _ctx.active,
+      "is-disabled": _ctx.disabled
+    }]),
+    role: "menuitem",
+    tabindex: "-1",
+    style: normalizeStyle(_ctx.paddingStyle),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    _ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_el_tooltip, {
+      key: 0,
+      effect: _ctx.Effect.DARK,
+      placement: "right"
+    }, {
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "title")
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["effect"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      renderSlot(_ctx.$slots, "default"),
+      renderSlot(_ctx.$slots, "title")
+    ], 64))
+  ], 6);
+}
+
+export { render };
+//# sourceMappingURL=menu-item.vue_vue_type_template_id_aa755baa_lang.mjs.map

package/es/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.vue_vue_type_template_id_aa755baa_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue?vue&type=template&id=aa755baa&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"paddingStyle\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled,\n    }\"\n    @click=\"handleClick\"\n  >\n    <el-tooltip\n      v-if=\"\n        parentMenu.type.name === 'ElMenu' &&\n        rootMenu.props.collapse &&\n        $slots.title\n      \"\n      :effect=\"Effect.DARK\"\n      placement=\"right\"\n    >\n      <template #content>\n        <slot name=\"title\" />\n      </template>\n      <div\n        :style=\"{\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          height: '100%',\n          width: '100%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          padding: '0 20px',\n        }\"\n      >\n        <slot />\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot />\n      <slot name=\"title\" />\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  getCurrentInstance,\n  toRef,\n  reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n\n  props: menuItemProps,\n  emits: menuItemEmits,\n\n  setup(props, { emit }) {\n    const instance = getCurrentInstance()!\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const { parentMenu, paddingStyle, indexPath } = useMenu(\n      instance,\n      toRef(props, 'index')\n    )\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n    if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n    const active = computed(() => props.index === rootMenu.activeIndex)\n    const item: MenuItemRegistered = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const handleClick = () => {\n      if (!props.disabled) {\n        rootMenu.handleMenuItemClick({\n          index: props.index,\n          indexPath: indexPath.value,\n          route: props.route,\n        })\n        emit('click', item)\n      }\n    }\n\n    onMounted(() => {\n      subMenu.addSubMenu(item)\n      rootMenu.addMenuItem(item)\n    })\n\n    onBeforeUnmount(() => {\n      subMenu.removeSubMenu(item)\n      rootMenu.removeMenuItem(item)\n    })\n\n    return {\n      Effect,\n      parentMenu,\n      rootMenu,\n      paddingStyle,\n      active,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_renderSlot","_createElementVNode"],"mappings":";;qBAyBS,OAAO;AAAA;;;;;;;;;;;sBAxBdA;IACE,uBAAM;;;;IACN,MAAK;AAAA,IACL,UAAS;AAAA,IACR,sBAAO;IAKP,gDAAO;;gHAERC;;MAMG,QAAQ,YAAO;AAAA,MAChB,WAAU;AAAA;MAEC,iBACT;QAAAC;;uBAEF;QAAAC,0BAAA;UAYED;;;;uCAGJF;MACEE;MACAA;;;;;;;"}

package/es/components/menu/src/menu-item2.mjs

@@ -1,6 +1,6 @@
-import script from './menu-item.vue_vue&type=script&lang.mjs';
-export { default } from './menu-item.vue_vue&type=script&lang.mjs';
-import { render } from './menu-item.vue_vue&type=template&id=aa755baa&lang.mjs';
+import script from './menu-item.vue_vue_type_script_lang.mjs';
+export { default } from './menu-item.vue_vue_type_script_lang.mjs';
+import { render } from './menu-item.vue_vue_type_template_id_aa755baa_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/menu/src/menu-item.vue";

package/es/components/menu/src/menu.d.ts

@@ -65,8 +65,8 @@ declare const _default: import("vue").DefineComponent<{
     uniqueOpened: boolean;
     router: boolean;
 } & {
-    backgroundColor?: string | undefined;
     textColor?: string | undefined;
+    backgroundColor?: string | undefined;
     activeTextColor?: string | undefined;
 }> & {
     onClose?: ((index: string, indexPath: string[]) => any) | undefined;

package/es/components/menu/src/menu.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, getCurrentInstance, ref, computed, nextTick, watch, provide, reactive, onMounted, withDirectives, h } from 'vue';
 import '../../../directives/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
-import { More } from '@element-plus/icons';
+import { More } from '@element-plus/icons-vue';
 import Menu$1 from '../../../utils/menu/menu-bar.mjs';
 import { buildProps, definePropType, mutable } from '../../../utils/props.mjs';
 import '../../../utils/util.mjs';
@@ -10,7 +10,7 @@ import SubMenu from './sub-menu.mjs';
 import { useMenuCssVar } from './use-menu-css-var.mjs';
 import { isString, isObject } from '@vue/shared';
 import Resize from '../../../directives/resize/index.mjs';
-import script from './menu-collapse-transition.vue_vue&type=script&lang.mjs';
+import script from './menu-collapse-transition.vue_vue_type_script_lang.mjs';
 
 const menuProps = buildProps({
   mode: {

package/es/components/menu/src/menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","sources":["../../../../../../packages/components/menu/src/menu.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  watch,\n  computed,\n  ref,\n  provide,\n  onMounted,\n  h,\n  withDirectives,\n  reactive,\n  nextTick,\n} from 'vue'\nimport { Resize } from '@element-plus/directives'\nimport ElIcon from '@element-plus/components/icon'\nimport { More } from '@element-plus/icons'\nimport Menubar from '@element-plus/utils/menu/menu-bar'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isString, isObject } from '@element-plus/utils/util'\nimport ElMenuCollapseTransition from './menu-collapse-transition.vue'\nimport ElSubMenu from './sub-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\n\nimport type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'\nimport type { NavigationFailure, Router } from 'vue-router'\nimport type { VNode, ExtractPropTypes, VNodeNormalizedChildren } from 'vue'\n\nexport const menuProps = buildProps({\n  mode: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'vertical',\n  },\n  defaultActive: {\n    type: String,\n    default: '',\n  },\n  defaultOpeneds: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  uniqueOpened: Boolean,\n  router: Boolean,\n  menuTrigger: {\n    type: String,\n    values: ['hover', 'click'],\n    default: 'hover',\n  },\n  collapse: Boolean,\n  backgroundColor: String,\n  textColor: String,\n  activeTextColor: String,\n  collapseTransition: {\n    type: Boolean,\n    default: true,\n  },\n  ellipsis: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type MenuProps = ExtractPropTypes<typeof menuProps>\n\nconst checkIndexPath = (indexPath: unknown): indexPath is string[] =>\n  Array.isArray(indexPath) && indexPath.every((path) => isString(path))\n\nexport const menuEmits = {\n  close: (index: string, indexPath: string[]) =>\n    isString(index) && checkIndexPath(indexPath),\n\n  open: (index: string, indexPath: string[]) =>\n    isString(index) && checkIndexPath(indexPath),\n\n  select: (\n    index: string,\n    indexPath: string[],\n    item: MenuItemClicked,\n    routerResult?: Promise<void | NavigationFailure>\n  ) =>\n    isString(index) &&\n    checkIndexPath(indexPath) &&\n    isObject(item) &&\n    (routerResult === undefined || routerResult instanceof Promise),\n}\nexport type MenuEmits = typeof menuEmits\n\nexport default defineComponent({\n  name: 'ElMenu',\n\n  props: menuProps,\n  emits: menuEmits,\n\n  setup(props, { emit, slots, expose }) {\n    const instance = getCurrentInstance()!\n    const router = instance.appContext.config.globalProperties.$router as Router\n    const menu = ref<HTMLUListElement>()\n\n    // data\n    const openedMenus = ref<MenuProvider['openedMenus']>(\n      props.defaultOpeneds && !props.collapse\n        ? props.defaultOpeneds.slice(0)\n        : []\n    )\n    const activeIndex = ref<MenuProvider['activeIndex']>(props.defaultActive)\n    const items = ref<MenuProvider['items']>({})\n    const subMenus = ref<MenuProvider['subMenus']>({})\n\n    const alteredCollapse = ref(false)\n\n    // computed\n    const isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {\n      return (\n        props.mode === 'horizontal' ||\n        (props.mode === 'vertical' && props.collapse)\n      )\n    })\n\n    // methods\n    const initMenu = () => {\n      const activeItem = activeIndex.value && items.value[activeIndex.value]\n      if (!activeItem || props.mode === 'horizontal' || props.collapse) return\n\n      const indexPath = activeItem.indexPath\n\n      // 展开该菜单项的路径上所有子菜单\n      // expand all subMenus of the menu item\n      indexPath.forEach((index) => {\n        const subMenu = subMenus.value[index]\n        subMenu && openMenu(index, subMenu.indexPath)\n      })\n    }\n\n    const openMenu: MenuProvider['openMenu'] = (index, indexPath) => {\n      if (openedMenus.value.includes(index)) return\n      // 将不在该菜单路径下的其余菜单收起\n      // collapse all menu that are not under current menu item\n      if (props.uniqueOpened) {\n        openedMenus.value = openedMenus.value.filter((index: string) =>\n          indexPath.includes(index)\n        )\n      }\n      openedMenus.value.push(index)\n      emit('open', index, indexPath)\n    }\n\n    const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {\n      const i = openedMenus.value.indexOf(index)\n      if (i !== -1) {\n        openedMenus.value.splice(i, 1)\n      }\n      emit('close', index, indexPath)\n    }\n\n    const handleSubMenuClick: MenuProvider['handleSubMenuClick'] = ({\n      index,\n      indexPath,\n    }) => {\n      const isOpened = openedMenus.value.includes(index)\n\n      if (isOpened) {\n        closeMenu(index, indexPath)\n      } else {\n        openMenu(index, indexPath)\n      }\n    }\n\n    const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (\n      menuItem\n    ) => {\n      if (props.mode === 'horizontal' || props.collapse) {\n        openedMenus.value = []\n      }\n\n      const { index, indexPath } = menuItem\n      if (index === undefined || indexPath === undefined) return\n\n      if (props.router && router) {\n        const route = menuItem.route || index\n        const routerResult = router.push(route).then((res) => {\n          if (!res) activeIndex.value = index\n          return res\n        })\n        emit(\n          'select',\n          index,\n          indexPath,\n          { index, indexPath, route },\n          routerResult\n        )\n      } else {\n        activeIndex.value = index\n        emit('select', index, indexPath, { index, indexPath })\n      }\n    }\n\n    const updateActiveIndex = (val: string) => {\n      const itemsInData = items.value\n      const item =\n        itemsInData[val] ||\n        (activeIndex.value && itemsInData[activeIndex.value]) ||\n        itemsInData[props.defaultActive]\n\n      if (item) {\n        activeIndex.value = item.index\n        initMenu()\n      } else {\n        // Can't find item when collapsing\n        // and activeIndex shouldn't be changed when 'collapse' was changed.\n        // Then reset 'alteredCollapse' immediately.\n        if (!alteredCollapse.value) {\n          activeIndex.value = undefined\n        } else {\n          alteredCollapse.value = false\n        }\n      }\n    }\n    const handleResize = () => {\n      nextTick(() => instance.proxy!.$forceUpdate())\n    }\n\n    watch(\n      () => props.defaultActive,\n      (currentActive) => {\n        if (!items.value[currentActive]) {\n          activeIndex.value = ''\n        }\n        updateActiveIndex(currentActive)\n      }\n    )\n\n    watch(items.value, () => initMenu())\n\n    watch(\n      () => props.collapse,\n      (value, prev) => {\n        if (value !== prev) {\n          alteredCollapse.value = true\n        }\n        if (value) openedMenus.value = []\n      }\n    )\n\n    // provide\n    {\n      const addSubMenu: MenuProvider['addSubMenu'] = (item) => {\n        subMenus.value[item.index] = item\n      }\n\n      const removeSubMenu: MenuProvider['removeSubMenu'] = (item) => {\n        delete subMenus.value[item.index]\n      }\n\n      const addMenuItem: MenuProvider['addMenuItem'] = (item) => {\n        items.value[item.index] = item\n      }\n\n      const removeMenuItem: MenuProvider['removeMenuItem'] = (item) => {\n        delete items.value[item.index]\n      }\n      provide<MenuProvider>(\n        'rootMenu',\n        reactive({\n          props,\n          openedMenus,\n          items,\n          subMenus,\n          activeIndex,\n          isMenuPopup,\n\n          addMenuItem,\n          removeMenuItem,\n          addSubMenu,\n          removeSubMenu,\n          openMenu,\n          closeMenu,\n          handleMenuItemClick,\n          handleSubMenuClick,\n        })\n      )\n      provide<SubMenuProvider>(`subMenu:${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n      })\n    }\n\n    // lifecycle\n    onMounted(() => {\n      initMenu()\n      if (props.mode === 'horizontal') {\n        new Menubar(instance.vnode.el!)\n      }\n    })\n\n    {\n      const open = (index: string) => {\n        const { indexPath } = subMenus.value[index]\n        indexPath.forEach((i) => openMenu(i, indexPath))\n      }\n      expose({\n        open,\n        close: closeMenu,\n        handleResize,\n      })\n    }\n\n    const flattedChildren = (children: VNodeNormalizedChildren) => {\n      const vnodes = Array.isArray(children) ? children : [children]\n      const result: any[] = []\n      vnodes.forEach((child: any) => {\n        if (Array.isArray(child.children)) {\n          result.push(...flattedChildren(child.children))\n        } else {\n          result.push(child)\n        }\n      })\n      return result\n    }\n\n    const useVNodeResize = (vnode: VNode) =>\n      props.mode === 'horizontal'\n        ? withDirectives(vnode, [[Resize, handleResize]])\n        : vnode\n    return () => {\n      let slot = slots.default?.() ?? []\n      const vShowMore: VNode[] = []\n\n      if (props.mode === 'horizontal' && menu.value) {\n        const items = Array.from(menu.value?.childNodes ?? []).filter(\n          (item) => item.nodeName !== '#text' || item.nodeValue\n        ) as HTMLElement[]\n        const originalSlot = flattedChildren(slot)\n        const moreItemWidth = 64\n        const paddingLeft = parseInt(\n          getComputedStyle(menu.value).paddingLeft,\n          10\n        )\n        const paddingRight = parseInt(\n          getComputedStyle(menu.value).paddingRight,\n          10\n        )\n        const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight\n        let calcWidth = 0\n        let sliceIndex = 0\n        items.forEach((item, index) => {\n          calcWidth += item.offsetWidth || 0\n          if (calcWidth <= menuWidth - moreItemWidth) {\n            sliceIndex = index + 1\n          }\n        })\n        const slotDefault = originalSlot.slice(0, sliceIndex)\n        const slotMore = originalSlot.slice(sliceIndex)\n        if (slotMore?.length && props.ellipsis) {\n          slot = slotDefault\n          vShowMore.push(\n            h(\n              ElSubMenu,\n              {\n                index: 'sub-menu-more',\n                class: 'el-sub-menu__hide-arrow',\n              },\n              {\n                title: () =>\n                  h(\n                    ElIcon,\n                    {\n                      class: ['el-sub-menu__icon-more'],\n                    },\n                    { default: () => h(More) }\n                  ),\n                default: () => slotMore,\n              }\n            )\n          )\n        }\n      }\n\n      const ulStyle = useMenuCssVar(props)\n\n      const resizeMenu = (vNode: VNode) =>\n        props.ellipsis ? useVNodeResize(vNode) : vNode\n\n      const vMenu = resizeMenu(\n        h(\n          'ul',\n          {\n            key: String(props.collapse),\n            role: 'menubar',\n            ref: menu,\n            style: ulStyle.value,\n            class: {\n              'el-menu': true,\n              'el-menu--horizontal': props.mode === 'horizontal',\n              'el-menu--collapse': props.collapse,\n            },\n          },\n          [...slot.map((vnode) => resizeMenu(vnode)), ...vShowMore]\n        )\n      )\n\n      if (props.collapseTransition && props.mode === 'vertical') {\n        return h(ElMenuCollapseTransition, () => vMenu)\n      }\n\n      return vMenu\n    }\n  },\n})\n"],"names":["Menubar","ElSubMenu","ElMenuCollapseTransition"],"mappings":"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"}
+{"version":3,"file":"menu.mjs","sources":["../../../../../../packages/components/menu/src/menu.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  watch,\n  computed,\n  ref,\n  provide,\n  onMounted,\n  h,\n  withDirectives,\n  reactive,\n  nextTick,\n} from 'vue'\nimport { Resize } from '@element-plus/directives'\nimport ElIcon from '@element-plus/components/icon'\nimport { More } from '@element-plus/icons-vue'\nimport Menubar from '@element-plus/utils/menu/menu-bar'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isString, isObject } from '@element-plus/utils/util'\nimport ElMenuCollapseTransition from './menu-collapse-transition.vue'\nimport ElSubMenu from './sub-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\n\nimport type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'\nimport type { NavigationFailure, Router } from 'vue-router'\nimport type { VNode, ExtractPropTypes, VNodeNormalizedChildren } from 'vue'\n\nexport const menuProps = buildProps({\n  mode: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'vertical',\n  },\n  defaultActive: {\n    type: String,\n    default: '',\n  },\n  defaultOpeneds: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  uniqueOpened: Boolean,\n  router: Boolean,\n  menuTrigger: {\n    type: String,\n    values: ['hover', 'click'],\n    default: 'hover',\n  },\n  collapse: Boolean,\n  backgroundColor: String,\n  textColor: String,\n  activeTextColor: String,\n  collapseTransition: {\n    type: Boolean,\n    default: true,\n  },\n  ellipsis: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type MenuProps = ExtractPropTypes<typeof menuProps>\n\nconst checkIndexPath = (indexPath: unknown): indexPath is string[] =>\n  Array.isArray(indexPath) && indexPath.every((path) => isString(path))\n\nexport const menuEmits = {\n  close: (index: string, indexPath: string[]) =>\n    isString(index) && checkIndexPath(indexPath),\n\n  open: (index: string, indexPath: string[]) =>\n    isString(index) && checkIndexPath(indexPath),\n\n  select: (\n    index: string,\n    indexPath: string[],\n    item: MenuItemClicked,\n    routerResult?: Promise<void | NavigationFailure>\n  ) =>\n    isString(index) &&\n    checkIndexPath(indexPath) &&\n    isObject(item) &&\n    (routerResult === undefined || routerResult instanceof Promise),\n}\nexport type MenuEmits = typeof menuEmits\n\nexport default defineComponent({\n  name: 'ElMenu',\n\n  props: menuProps,\n  emits: menuEmits,\n\n  setup(props, { emit, slots, expose }) {\n    const instance = getCurrentInstance()!\n    const router = instance.appContext.config.globalProperties.$router as Router\n    const menu = ref<HTMLUListElement>()\n\n    // data\n    const openedMenus = ref<MenuProvider['openedMenus']>(\n      props.defaultOpeneds && !props.collapse\n        ? props.defaultOpeneds.slice(0)\n        : []\n    )\n    const activeIndex = ref<MenuProvider['activeIndex']>(props.defaultActive)\n    const items = ref<MenuProvider['items']>({})\n    const subMenus = ref<MenuProvider['subMenus']>({})\n\n    const alteredCollapse = ref(false)\n\n    // computed\n    const isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {\n      return (\n        props.mode === 'horizontal' ||\n        (props.mode === 'vertical' && props.collapse)\n      )\n    })\n\n    // methods\n    const initMenu = () => {\n      const activeItem = activeIndex.value && items.value[activeIndex.value]\n      if (!activeItem || props.mode === 'horizontal' || props.collapse) return\n\n      const indexPath = activeItem.indexPath\n\n      // 展开该菜单项的路径上所有子菜单\n      // expand all subMenus of the menu item\n      indexPath.forEach((index) => {\n        const subMenu = subMenus.value[index]\n        subMenu && openMenu(index, subMenu.indexPath)\n      })\n    }\n\n    const openMenu: MenuProvider['openMenu'] = (index, indexPath) => {\n      if (openedMenus.value.includes(index)) return\n      // 将不在该菜单路径下的其余菜单收起\n      // collapse all menu that are not under current menu item\n      if (props.uniqueOpened) {\n        openedMenus.value = openedMenus.value.filter((index: string) =>\n          indexPath.includes(index)\n        )\n      }\n      openedMenus.value.push(index)\n      emit('open', index, indexPath)\n    }\n\n    const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {\n      const i = openedMenus.value.indexOf(index)\n      if (i !== -1) {\n        openedMenus.value.splice(i, 1)\n      }\n      emit('close', index, indexPath)\n    }\n\n    const handleSubMenuClick: MenuProvider['handleSubMenuClick'] = ({\n      index,\n      indexPath,\n    }) => {\n      const isOpened = openedMenus.value.includes(index)\n\n      if (isOpened) {\n        closeMenu(index, indexPath)\n      } else {\n        openMenu(index, indexPath)\n      }\n    }\n\n    const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (\n      menuItem\n    ) => {\n      if (props.mode === 'horizontal' || props.collapse) {\n        openedMenus.value = []\n      }\n\n      const { index, indexPath } = menuItem\n      if (index === undefined || indexPath === undefined) return\n\n      if (props.router && router) {\n        const route = menuItem.route || index\n        const routerResult = router.push(route).then((res) => {\n          if (!res) activeIndex.value = index\n          return res\n        })\n        emit(\n          'select',\n          index,\n          indexPath,\n          { index, indexPath, route },\n          routerResult\n        )\n      } else {\n        activeIndex.value = index\n        emit('select', index, indexPath, { index, indexPath })\n      }\n    }\n\n    const updateActiveIndex = (val: string) => {\n      const itemsInData = items.value\n      const item =\n        itemsInData[val] ||\n        (activeIndex.value && itemsInData[activeIndex.value]) ||\n        itemsInData[props.defaultActive]\n\n      if (item) {\n        activeIndex.value = item.index\n        initMenu()\n      } else {\n        // Can't find item when collapsing\n        // and activeIndex shouldn't be changed when 'collapse' was changed.\n        // Then reset 'alteredCollapse' immediately.\n        if (!alteredCollapse.value) {\n          activeIndex.value = undefined\n        } else {\n          alteredCollapse.value = false\n        }\n      }\n    }\n    const handleResize = () => {\n      nextTick(() => instance.proxy!.$forceUpdate())\n    }\n\n    watch(\n      () => props.defaultActive,\n      (currentActive) => {\n        if (!items.value[currentActive]) {\n          activeIndex.value = ''\n        }\n        updateActiveIndex(currentActive)\n      }\n    )\n\n    watch(items.value, () => initMenu())\n\n    watch(\n      () => props.collapse,\n      (value, prev) => {\n        if (value !== prev) {\n          alteredCollapse.value = true\n        }\n        if (value) openedMenus.value = []\n      }\n    )\n\n    // provide\n    {\n      const addSubMenu: MenuProvider['addSubMenu'] = (item) => {\n        subMenus.value[item.index] = item\n      }\n\n      const removeSubMenu: MenuProvider['removeSubMenu'] = (item) => {\n        delete subMenus.value[item.index]\n      }\n\n      const addMenuItem: MenuProvider['addMenuItem'] = (item) => {\n        items.value[item.index] = item\n      }\n\n      const removeMenuItem: MenuProvider['removeMenuItem'] = (item) => {\n        delete items.value[item.index]\n      }\n      provide<MenuProvider>(\n        'rootMenu',\n        reactive({\n          props,\n          openedMenus,\n          items,\n          subMenus,\n          activeIndex,\n          isMenuPopup,\n\n          addMenuItem,\n          removeMenuItem,\n          addSubMenu,\n          removeSubMenu,\n          openMenu,\n          closeMenu,\n          handleMenuItemClick,\n          handleSubMenuClick,\n        })\n      )\n      provide<SubMenuProvider>(`subMenu:${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n      })\n    }\n\n    // lifecycle\n    onMounted(() => {\n      initMenu()\n      if (props.mode === 'horizontal') {\n        new Menubar(instance.vnode.el!)\n      }\n    })\n\n    {\n      const open = (index: string) => {\n        const { indexPath } = subMenus.value[index]\n        indexPath.forEach((i) => openMenu(i, indexPath))\n      }\n      expose({\n        open,\n        close: closeMenu,\n        handleResize,\n      })\n    }\n\n    const flattedChildren = (children: VNodeNormalizedChildren) => {\n      const vnodes = Array.isArray(children) ? children : [children]\n      const result: any[] = []\n      vnodes.forEach((child: any) => {\n        if (Array.isArray(child.children)) {\n          result.push(...flattedChildren(child.children))\n        } else {\n          result.push(child)\n        }\n      })\n      return result\n    }\n\n    const useVNodeResize = (vnode: VNode) =>\n      props.mode === 'horizontal'\n        ? withDirectives(vnode, [[Resize, handleResize]])\n        : vnode\n    return () => {\n      let slot = slots.default?.() ?? []\n      const vShowMore: VNode[] = []\n\n      if (props.mode === 'horizontal' && menu.value) {\n        const items = Array.from(menu.value?.childNodes ?? []).filter(\n          (item) => item.nodeName !== '#text' || item.nodeValue\n        ) as HTMLElement[]\n        const originalSlot = flattedChildren(slot)\n        const moreItemWidth = 64\n        const paddingLeft = parseInt(\n          getComputedStyle(menu.value).paddingLeft,\n          10\n        )\n        const paddingRight = parseInt(\n          getComputedStyle(menu.value).paddingRight,\n          10\n        )\n        const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight\n        let calcWidth = 0\n        let sliceIndex = 0\n        items.forEach((item, index) => {\n          calcWidth += item.offsetWidth || 0\n          if (calcWidth <= menuWidth - moreItemWidth) {\n            sliceIndex = index + 1\n          }\n        })\n        const slotDefault = originalSlot.slice(0, sliceIndex)\n        const slotMore = originalSlot.slice(sliceIndex)\n        if (slotMore?.length && props.ellipsis) {\n          slot = slotDefault\n          vShowMore.push(\n            h(\n              ElSubMenu,\n              {\n                index: 'sub-menu-more',\n                class: 'el-sub-menu__hide-arrow',\n              },\n              {\n                title: () =>\n                  h(\n                    ElIcon,\n                    {\n                      class: ['el-sub-menu__icon-more'],\n                    },\n                    { default: () => h(More) }\n                  ),\n                default: () => slotMore,\n              }\n            )\n          )\n        }\n      }\n\n      const ulStyle = useMenuCssVar(props)\n\n      const resizeMenu = (vNode: VNode) =>\n        props.ellipsis ? useVNodeResize(vNode) : vNode\n\n      const vMenu = resizeMenu(\n        h(\n          'ul',\n          {\n            key: String(props.collapse),\n            role: 'menubar',\n            ref: menu,\n            style: ulStyle.value,\n            class: {\n              'el-menu': true,\n              'el-menu--horizontal': props.mode === 'horizontal',\n              'el-menu--collapse': props.collapse,\n            },\n          },\n          [...slot.map((vnode) => resizeMenu(vnode)), ...vShowMore]\n        )\n      )\n\n      if (props.collapseTransition && props.mode === 'vertical') {\n        return h(ElMenuCollapseTransition, () => vMenu)\n      }\n\n      return vMenu\n    }\n  },\n})\n"],"names":["Menubar","ElSubMenu","ElMenuCollapseTransition"],"mappings":"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"}

package/es/components/menu/src/sub-menu.mjs

@@ -4,7 +4,7 @@ import _CollapseTransition from '../../collapse-transition/index.mjs';
 import _Popper from '../../popper/index.mjs';
 import { buildProps } from '../../../utils/props.mjs';
 import { throwError } from '../../../utils/error.mjs';
-import { ArrowDown, ArrowRight } from '@element-plus/icons';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import { ElIcon } from '../../icon/index.mjs';
 import useMenu from './use-menu.mjs';
 import { useMenuCssVar } from './use-menu-css-var.mjs';

package/es/components/menu/src/sub-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.mjs","sources":["../../../../../../packages/components/menu/src/sub-menu.ts"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  ref,\n  provide,\n  inject,\n  getCurrentInstance,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n  withDirectives,\n  Fragment,\n  vShow,\n  h,\n  reactive,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElPopper from '@element-plus/components/popper'\nimport { buildProps } from '@element-plus/utils/props'\nimport { throwError } from '@element-plus/utils/error'\nimport { ArrowDown, ArrowRight } from '@element-plus/icons'\nimport { ElIcon } from '@element-plus/components/icon'\nimport useMenu from './use-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { ExtractPropTypes, VNodeArrayChildren, CSSProperties } from 'vue'\nimport type { MenuProvider, SubMenuProvider } from './types'\n\nexport const subMenuProps = buildProps({\n  index: {\n    type: String,\n    required: true,\n  },\n  showTimeout: {\n    type: Number,\n    default: 300,\n  },\n  hideTimeout: {\n    type: Number,\n    default: 300,\n  },\n  popperClass: String,\n  disabled: Boolean,\n  popperAppendToBody: {\n    type: Boolean,\n    default: undefined,\n  },\n} as const)\nexport type SubMenuProps = ExtractPropTypes<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 { paddingStyle, indexPath, parentMenu } = useMenu(\n      instance,\n      computed(() => props.index)\n    )\n\n    // inject\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value!.uid}`)\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 currentPlacement = ref<Placement | ''>('')\n    const mouseInChild = ref(false)\n    const verticalTitleRef = ref<HTMLDivElement>()\n    const vPopper = ref()\n\n    // computed\n    const subMenuTitleIcon = computed(() => {\n      return (mode.value === 'horizontal' && isFirstLevel.value) ||\n        (mode.value === 'vertical' && !rootMenu.props.collapse)\n        ? ArrowDown\n        : ArrowRight\n    })\n    const isFirstLevel = computed(() => {\n      let isFirstLevel = true\n      let parent = instance.parent\n      while (parent && parent.type.name !== 'ElMenu') {\n        if (['ElSubMenu', 'ElMenuItemGroup'].includes(parent.type.name!)) {\n          isFirstLevel = false\n          break\n        } else {\n          parent = parent.parent\n        }\n      }\n      return isFirstLevel\n    })\n    const appendToBody = computed(() => {\n      return props.popperAppendToBody === undefined\n        ? isFirstLevel.value\n        : Boolean(props.popperAppendToBody)\n    })\n    const menuTransitionName = computed(() =>\n      rootMenu.props.collapse ? 'el-zoom-in-left' : 'el-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            '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      let isActive = false\n\n      Object.values(items.value).forEach((item) => {\n        if (item.active) {\n          isActive = true\n        }\n      })\n\n      Object.values(subMenus.value).forEach((subItem) => {\n        if (subItem.active) {\n          isActive = true\n        }\n      })\n\n      return isActive\n    })\n\n    const backgroundColor = computed(() => rootMenu.props.backgroundColor || '')\n    const activeTextColor = computed(() => rootMenu.props.activeTextColor || '')\n    const textColor = computed(() => rootMenu.props.textColor || '')\n    const mode = computed(() => rootMenu.props.mode)\n    const item = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const titleStyle = computed<CSSProperties>(() => {\n      if (mode.value !== 'horizontal') {\n        return {\n          color: textColor.value,\n        }\n      }\n      return {\n        borderBottomColor: active.value\n          ? rootMenu.props.activeTextColor\n            ? activeTextColor.value\n            : ''\n          : 'transparent',\n        color: active.value ? activeTextColor.value : textColor.value,\n      }\n    })\n\n    // methods\n    const doDestroy = () => vPopper.value?.doDestroy()\n\n    const handleCollapseToggle = (value: boolean) => {\n      if (value) {\n        updatePlacement()\n      } else {\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 = props.showTimeout\n    ) => {\n      if (event.type === 'focus' && !event.relatedTarget) {\n        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        return\n      }\n      mouseInChild.value = true\n\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(\n        () => rootMenu.openMenu(props.index, indexPath.value),\n        showTimeout\n      ))\n\n      if (appendToBody.value) {\n        parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'))\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        return\n      }\n      mouseInChild.value = false\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(\n        () =>\n          !mouseInChild.value &&\n          rootMenu.closeMenu(props.index, indexPath.value),\n        props.hideTimeout\n      ))\n\n      if (appendToBody.value && deepDispatch) {\n        if (instance.parent?.type.name === 'ElSubMenu') {\n          subMenu.handleMouseleave?.(true)\n        }\n      }\n    }\n\n    const updatePlacement = () => {\n      currentPlacement.value =\n        mode.value === 'horizontal' && isFirstLevel.value\n          ? 'bottom-start'\n          : 'right-start'\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>(`subMenu:${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        handleMouseleave,\n      })\n    }\n\n    // expose\n    expose({\n      opened,\n    })\n\n    // lifecycle\n    onMounted(() => {\n      rootMenu.addSubMenu(item)\n      subMenu.addSubMenu(item)\n      updatePlacement()\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: ['el-sub-menu__icon-arrow'],\n          },\n          { default: () => h(subMenuTitleIcon.value) }\n        ),\n      ]\n\n      const ulStyle = useMenuCssVar(rootMenu.props)\n\n      // this render function is only used for bypass `Vue`'s compiler caused patching issue.\n      // temporarily mark ElPopper as any due to type inconsistency.\n      const child = rootMenu.isMenuPopup\n        ? h(\n            // TODO: correct popper's type.\n            ElPopper as any,\n            {\n              ref: vPopper,\n              manualMode: true,\n              visible: opened.value,\n              effect: 'light',\n              pure: true,\n              offset: 6,\n              showArrow: false,\n              popperClass: props.popperClass,\n              placement: currentPlacement.value,\n              appendToBody: appendToBody.value,\n              fallbackPlacements: fallbackPlacements.value,\n              transition: menuTransitionName.value,\n              gpuAcceleration: false,\n            },\n            {\n              default: () =>\n                h(\n                  'div',\n                  {\n                    class: [`el-menu--${mode.value}`, props.popperClass],\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                          'el-menu el-menu--popup',\n                          `el-menu--popup-${currentPlacement.value}`,\n                        ],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                  ]\n                ),\n              trigger: () =>\n                h(\n                  'div',\n                  {\n                    class: 'el-sub-menu__title',\n                    style: [\n                      paddingStyle.value,\n                      titleStyle.value,\n                      { backgroundColor: backgroundColor.value },\n                    ],\n                    onClick: handleClick,\n                  },\n                  titleTag\n                ),\n            }\n          )\n        : h(Fragment, {}, [\n            h(\n              'div',\n              {\n                class: 'el-sub-menu__title',\n                style: [\n                  paddingStyle.value,\n                  titleStyle.value,\n                  { backgroundColor: backgroundColor.value },\n                ],\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: 'el-menu el-menu--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            'el-sub-menu',\n            {\n              'is-active': active.value,\n              'is-opened': opened.value,\n              'is-disabled': props.disabled,\n            },\n          ],\n          role: 'menuitem',\n          ariaHaspopup: true,\n          ariaExpanded: opened.value,\n          onMouseenter: handleMouseenter,\n          onMouseleave: () => handleMouseleave(true),\n          onFocus: handleMouseenter,\n        },\n        [child]\n      )\n    }\n  },\n})\n"],"names":["ElPopper","ElCollapseTransition"],"mappings":"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"}
+{"version":3,"file":"sub-menu.mjs","sources":["../../../../../../packages/components/menu/src/sub-menu.ts"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  ref,\n  provide,\n  inject,\n  getCurrentInstance,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n  withDirectives,\n  Fragment,\n  vShow,\n  h,\n  reactive,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElPopper from '@element-plus/components/popper'\nimport { buildProps } from '@element-plus/utils/props'\nimport { throwError } from '@element-plus/utils/error'\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'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { ExtractPropTypes, VNodeArrayChildren, CSSProperties } from 'vue'\nimport type { MenuProvider, SubMenuProvider } from './types'\n\nexport const subMenuProps = buildProps({\n  index: {\n    type: String,\n    required: true,\n  },\n  showTimeout: {\n    type: Number,\n    default: 300,\n  },\n  hideTimeout: {\n    type: Number,\n    default: 300,\n  },\n  popperClass: String,\n  disabled: Boolean,\n  popperAppendToBody: {\n    type: Boolean,\n    default: undefined,\n  },\n} as const)\nexport type SubMenuProps = ExtractPropTypes<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 { paddingStyle, indexPath, parentMenu } = useMenu(\n      instance,\n      computed(() => props.index)\n    )\n\n    // inject\n    const rootMenu = inject<MenuProvider>('rootMenu')\n    if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n    const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value!.uid}`)\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 currentPlacement = ref<Placement | ''>('')\n    const mouseInChild = ref(false)\n    const verticalTitleRef = ref<HTMLDivElement>()\n    const vPopper = ref()\n\n    // computed\n    const subMenuTitleIcon = computed(() => {\n      return (mode.value === 'horizontal' && isFirstLevel.value) ||\n        (mode.value === 'vertical' && !rootMenu.props.collapse)\n        ? ArrowDown\n        : ArrowRight\n    })\n    const isFirstLevel = computed(() => {\n      let isFirstLevel = true\n      let parent = instance.parent\n      while (parent && parent.type.name !== 'ElMenu') {\n        if (['ElSubMenu', 'ElMenuItemGroup'].includes(parent.type.name!)) {\n          isFirstLevel = false\n          break\n        } else {\n          parent = parent.parent\n        }\n      }\n      return isFirstLevel\n    })\n    const appendToBody = computed(() => {\n      return props.popperAppendToBody === undefined\n        ? isFirstLevel.value\n        : Boolean(props.popperAppendToBody)\n    })\n    const menuTransitionName = computed(() =>\n      rootMenu.props.collapse ? 'el-zoom-in-left' : 'el-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            '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      let isActive = false\n\n      Object.values(items.value).forEach((item) => {\n        if (item.active) {\n          isActive = true\n        }\n      })\n\n      Object.values(subMenus.value).forEach((subItem) => {\n        if (subItem.active) {\n          isActive = true\n        }\n      })\n\n      return isActive\n    })\n\n    const backgroundColor = computed(() => rootMenu.props.backgroundColor || '')\n    const activeTextColor = computed(() => rootMenu.props.activeTextColor || '')\n    const textColor = computed(() => rootMenu.props.textColor || '')\n    const mode = computed(() => rootMenu.props.mode)\n    const item = reactive({\n      index: props.index,\n      indexPath,\n      active,\n    })\n\n    const titleStyle = computed<CSSProperties>(() => {\n      if (mode.value !== 'horizontal') {\n        return {\n          color: textColor.value,\n        }\n      }\n      return {\n        borderBottomColor: active.value\n          ? rootMenu.props.activeTextColor\n            ? activeTextColor.value\n            : ''\n          : 'transparent',\n        color: active.value ? activeTextColor.value : textColor.value,\n      }\n    })\n\n    // methods\n    const doDestroy = () => vPopper.value?.doDestroy()\n\n    const handleCollapseToggle = (value: boolean) => {\n      if (value) {\n        updatePlacement()\n      } else {\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 = props.showTimeout\n    ) => {\n      if (event.type === 'focus' && !event.relatedTarget) {\n        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        return\n      }\n      mouseInChild.value = true\n\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(\n        () => rootMenu.openMenu(props.index, indexPath.value),\n        showTimeout\n      ))\n\n      if (appendToBody.value) {\n        parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'))\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        return\n      }\n      mouseInChild.value = false\n      timeout?.()\n      ;({ stop: timeout } = useTimeoutFn(\n        () =>\n          !mouseInChild.value &&\n          rootMenu.closeMenu(props.index, indexPath.value),\n        props.hideTimeout\n      ))\n\n      if (appendToBody.value && deepDispatch) {\n        if (instance.parent?.type.name === 'ElSubMenu') {\n          subMenu.handleMouseleave?.(true)\n        }\n      }\n    }\n\n    const updatePlacement = () => {\n      currentPlacement.value =\n        mode.value === 'horizontal' && isFirstLevel.value\n          ? 'bottom-start'\n          : 'right-start'\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>(`subMenu:${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        handleMouseleave,\n      })\n    }\n\n    // expose\n    expose({\n      opened,\n    })\n\n    // lifecycle\n    onMounted(() => {\n      rootMenu.addSubMenu(item)\n      subMenu.addSubMenu(item)\n      updatePlacement()\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: ['el-sub-menu__icon-arrow'],\n          },\n          { default: () => h(subMenuTitleIcon.value) }\n        ),\n      ]\n\n      const ulStyle = useMenuCssVar(rootMenu.props)\n\n      // this render function is only used for bypass `Vue`'s compiler caused patching issue.\n      // temporarily mark ElPopper as any due to type inconsistency.\n      const child = rootMenu.isMenuPopup\n        ? h(\n            // TODO: correct popper's type.\n            ElPopper as any,\n            {\n              ref: vPopper,\n              manualMode: true,\n              visible: opened.value,\n              effect: 'light',\n              pure: true,\n              offset: 6,\n              showArrow: false,\n              popperClass: props.popperClass,\n              placement: currentPlacement.value,\n              appendToBody: appendToBody.value,\n              fallbackPlacements: fallbackPlacements.value,\n              transition: menuTransitionName.value,\n              gpuAcceleration: false,\n            },\n            {\n              default: () =>\n                h(\n                  'div',\n                  {\n                    class: [`el-menu--${mode.value}`, props.popperClass],\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                          'el-menu el-menu--popup',\n                          `el-menu--popup-${currentPlacement.value}`,\n                        ],\n                        style: ulStyle.value,\n                      },\n                      [slots.default?.()]\n                    ),\n                  ]\n                ),\n              trigger: () =>\n                h(\n                  'div',\n                  {\n                    class: 'el-sub-menu__title',\n                    style: [\n                      paddingStyle.value,\n                      titleStyle.value,\n                      { backgroundColor: backgroundColor.value },\n                    ],\n                    onClick: handleClick,\n                  },\n                  titleTag\n                ),\n            }\n          )\n        : h(Fragment, {}, [\n            h(\n              'div',\n              {\n                class: 'el-sub-menu__title',\n                style: [\n                  paddingStyle.value,\n                  titleStyle.value,\n                  { backgroundColor: backgroundColor.value },\n                ],\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: 'el-menu el-menu--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            'el-sub-menu',\n            {\n              'is-active': active.value,\n              'is-opened': opened.value,\n              'is-disabled': props.disabled,\n            },\n          ],\n          role: 'menuitem',\n          ariaHaspopup: true,\n          ariaExpanded: opened.value,\n          onMouseenter: handleMouseenter,\n          onMouseleave: () => handleMouseleave(true),\n          onFocus: handleMouseenter,\n        },\n        [child]\n      )\n    }\n  },\n})\n"],"names":["ElPopper","ElCollapseTransition"],"mappings":"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"}

package/es/components/menu/src/use-menu-css-var.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from './menu';
 export declare const useMenuCssVar: (props: MenuProps) => import("vue").ComputedRef<{
     '--el-menu-text-color': string;
     '--el-menu-hover-text-color': string;
-    '--el-menu-background-color': string;
-    '--el-menu-hover-background-color': string;
+    '--el-menu-bg-color': string;
+    '--el-menu-hover-bg-color': string;
     '--el-menu-active-color': string;
 }>;

package/es/components/menu/src/use-menu-css-var.mjs

@@ -6,8 +6,8 @@ const useMenuCssVar = (props) => {
     return {
       "--el-menu-text-color": props.textColor || "",
       "--el-menu-hover-text-color": props.textColor || "",
-      "--el-menu-background-color": props.backgroundColor || "",
-      "--el-menu-hover-background-color": useMenuColor(props).value || "",
+      "--el-menu-bg-color": props.backgroundColor || "",
+      "--el-menu-hover-bg-color": useMenuColor(props).value || "",
       "--el-menu-active-color": props.activeTextColor || ""
     };
   });

package/es/components/menu/src/use-menu-css-var.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-menu-css-var.mjs","sources":["../../../../../../packages/components/menu/src/use-menu-css-var.ts"],"sourcesContent":["import { computed } from 'vue'\nimport useMenuColor from './use-menu-color'\n\nimport type { MenuProps } from './menu'\n\nexport const useMenuCssVar = (props: MenuProps) => {\n  return computed(() => {\n    return {\n      '--el-menu-text-color': props.textColor || '',\n      '--el-menu-hover-text-color': props.textColor || '',\n      '--el-menu-background-color': props.backgroundColor || '',\n      '--el-menu-hover-background-color': useMenuColor(props).value || '',\n      '--el-menu-active-color': props.activeTextColor || '',\n    }\n  })\n}\n"],"names":[],"mappings":";;;MAKa,gBAAgB,CAAC,UAAqB;AACjD,SAAO,SAAS,MAAM;AACpB,WAAO;AAAA,MACL,wBAAwB,MAAM,aAAa;AAAA,MAC3C,8BAA8B,MAAM,aAAa;AAAA,MACjD,8BAA8B,MAAM,mBAAmB;AAAA,MACvD,oCAAoC,aAAa,OAAO,SAAS;AAAA,MACjE,0BAA0B,MAAM,mBAAmB;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"use-menu-css-var.mjs","sources":["../../../../../../packages/components/menu/src/use-menu-css-var.ts"],"sourcesContent":["import { computed } from 'vue'\nimport useMenuColor from './use-menu-color'\n\nimport type { MenuProps } from './menu'\n\nexport const useMenuCssVar = (props: MenuProps) => {\n  return computed(() => {\n    return {\n      '--el-menu-text-color': props.textColor || '',\n      '--el-menu-hover-text-color': props.textColor || '',\n      '--el-menu-bg-color': props.backgroundColor || '',\n      '--el-menu-hover-bg-color': useMenuColor(props).value || '',\n      '--el-menu-active-color': props.activeTextColor || '',\n    }\n  })\n}\n"],"names":[],"mappings":";;;MAKa,gBAAgB,CAAC,UAAqB;AACjD,SAAO,SAAS,MAAM;AACpB,WAAO;AAAA,MACL,wBAAwB,MAAM,aAAa;AAAA,MAC3C,8BAA8B,MAAM,aAAa;AAAA,MACjD,sBAAsB,MAAM,mBAAmB;AAAA,MAC/C,4BAA4B,aAAa,OAAO,SAAS;AAAA,MACzD,0BAA0B,MAAM,mBAAmB;AAAA;AAAA;AAAA;;;;"}

package/es/components/message/src/message-method.mjs

@@ -5,7 +5,7 @@ import isServer from '../../../utils/isServer.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
 import './message2.mjs';
 import { messageTypes } from './message.mjs';
-import script from './message.vue_vue&type=script&lang.mjs';
+import script from './message.vue_vue_type_script_lang.mjs';
 
 const instances = [];
 let seed = 1;

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

@@ -12,7 +12,7 @@ export declare const messageProps: {
     }>>, "", unknown, unknown, unknown>;
     readonly onClose: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<() => void>, unknown, false, unknown, unknown>;
     readonly showClose: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "error" | "info", unknown>;
+    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
     readonly offset: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly grouping: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>, "", unknown, unknown, unknown>;
     readonly onClose: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<() => void>, unknown, false, unknown, unknown>;
     readonly showClose: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "error" | "info", unknown>;
+    readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
     readonly offset: import("../../../utils/props").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
     readonly zIndex: import("../../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly grouping: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     iconComponent: import("vue").ComputedRef<import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>>;
     customStyle: import("vue").ComputedRef<CSSProperties>;
     visible: import("vue").Ref<boolean>;
+    badgeType: import("vue").Ref<import("../../../utils/props").BuildPropType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
     close: () => void;
     clearTimer: () => void;
     startTimer: () => void;
@@ -42,18 +43,18 @@ declare const _default: import("vue").DefineComponent<{
     readonly grouping?: unknown;
     readonly repeatNum?: unknown;
 } & {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "error" | "info", unknown>;
+    type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     zIndex: number;
+    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>, unknown, unknown>;
     offset: number;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     id: string;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     duration: number;
-    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>>, unknown, unknown>;
     dangerouslyUseHTMLString: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     grouping: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     repeatNum: number;
@@ -62,19 +63,19 @@ declare const _default: import("vue").DefineComponent<{
 }> & {
     onDestroy?: (() => any) | undefined;
 }, {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "error" | "info", unknown>;
+    type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     zIndex: number;
+    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>, unknown, unknown>;
     offset: number;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     onClose: () => void;
     id: string;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     duration: number;
-    message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>>, unknown, unknown>;
     dangerouslyUseHTMLString: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     grouping: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     repeatNum: number;

package/es/components/message/src/message.vue_vue_type_script_lang.mjs

@@ -0,0 +1,80 @@
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { useTimeoutFn, useEventListener } from '@vueuse/core';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import { ElBadge } from '../../badge/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { TypeComponents, TypeComponentsMap } from '../../../utils/icon.mjs';
+import { messageProps, messageEmits } from './message.mjs';
+
+var script = defineComponent({
+  name: "ElMessage",
+  components: {
+    ElBadge,
+    ElIcon,
+    ...TypeComponents
+  },
+  props: messageProps,
+  emits: messageEmits,
+  setup(props) {
+    const visible = ref(false);
+    const badgeType = ref(props.type ? props.type === "error" ? "danger" : props.type : "info");
+    let stopTimer = void 0;
+    const typeClass = computed(() => {
+      const type = props.type;
+      return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : "";
+    });
+    const iconComponent = computed(() => {
+      return props.icon || TypeComponentsMap[props.type] || "";
+    });
+    const customStyle = computed(() => ({
+      top: `${props.offset}px`,
+      zIndex: props.zIndex
+    }));
+    function startTimer() {
+      if (props.duration > 0) {
+        ;
+        ({ stop: stopTimer } = useTimeoutFn(() => {
+          if (visible.value)
+            close();
+        }, props.duration));
+      }
+    }
+    function clearTimer() {
+      stopTimer == null ? void 0 : stopTimer();
+    }
+    function close() {
+      visible.value = false;
+    }
+    function keydown({ code }) {
+      if (code === EVENT_CODE.esc) {
+        if (visible.value) {
+          close();
+        }
+      } else {
+        startTimer();
+      }
+    }
+    onMounted(() => {
+      startTimer();
+      visible.value = true;
+    });
+    watch(() => props.repeatNum, () => {
+      clearTimer();
+      startTimer();
+    });
+    useEventListener(document, "keydown", keydown);
+    return {
+      typeClass,
+      iconComponent,
+      customStyle,
+      visible,
+      badgeType,
+      close,
+      clearTimer,
+      startTimer
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=message.vue_vue_type_script_lang.mjs.map

package/es/components/message/src/message.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"el-message-fade\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[\n        'el-message',\n        type && !icon ? `el-message--${type}` : '',\n        center ? 'is-center' : '',\n        showClose ? 'is-closable' : '',\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"badgeType\"\n        class=\"el-message__badge\"\n      >\n      </el-badge>\n      <el-icon v-if=\"iconComponent\" class=\"el-message__icon\" :class=\"typeClass\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" class=\"el-message__content\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else class=\"el-message__content\" v-html=\"message\"></p>\n      </slot>\n      <el-icon\n        v-if=\"showClose\"\n        class=\"el-message__closeBtn\"\n        @click.stop=\"close\"\n      >\n        <close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport ElBadge from '@element-plus/components/badge'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport { messageEmits, messageProps } from './message'\nimport type { BadgeProps } from '@element-plus/components/badge'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMessage',\n\n  components: {\n    ElBadge,\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: messageProps,\n  emits: messageEmits,\n\n  setup(props) {\n    const visible = ref(false)\n    const badgeType = ref<BadgeProps['type']>(\n      props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'\n    )\n    let stopTimer: (() => void) | undefined = undefined\n\n    const typeClass = computed(() => {\n      const type = props.type\n      return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : ''\n    })\n\n    const iconComponent = computed(() => {\n      return props.icon || TypeComponentsMap[props.type] || ''\n    })\n\n    const customStyle = computed<CSSProperties>(() => ({\n      top: `${props.offset}px`,\n      zIndex: props.zIndex,\n    }))\n\n    function startTimer() {\n      if (props.duration > 0) {\n        ;({ stop: stopTimer } = useTimeoutFn(() => {\n          if (visible.value) close()\n        }, props.duration))\n      }\n    }\n\n    function clearTimer() {\n      stopTimer?.()\n    }\n\n    function close() {\n      visible.value = false\n    }\n\n    function keydown({ code }: KeyboardEvent) {\n      if (code === EVENT_CODE.esc) {\n        // press esc to close the message\n        if (visible.value) {\n          close()\n        }\n      } else {\n        startTimer() // resume timer\n      }\n    }\n\n    onMounted(() => {\n      startTimer()\n      visible.value = true\n    })\n\n    watch(\n      () => props.repeatNum,\n      () => {\n        clearTimer()\n        startTimer()\n      }\n    )\n\n    useEventListener(document, 'keydown', keydown)\n\n    return {\n      typeClass,\n      iconComponent,\n      customStyle,\n      visible,\n      badgeType,\n\n      close,\n      clearTimer,\n      startTimer,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AA6DA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,OACG;AAAA;AAAA,EAGL,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAU,IAAI;AACpB,UAAM,YAAY,IAChB,MAAM,OAAQ,MAAM,SAAS,UAAU,WAAW,MAAM,OAAQ;AAElE,QAAI,YAAsC;AAE1C,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQ,kBAAkB,QAAQ,oBAAoB,SAAS;AAAA;AAGxE,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,MAAM,QAAQ,kBAAkB,MAAM,SAAS;AAAA;AAGxD,UAAM,cAAc,SAAwB;AAAO,MACjD,KAAK,GAAG,MAAM;AAAA,MACd,QAAQ,MAAM;AAAA;AAGhB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,cAAc,aAAa,MAAM;AACzC,cAAI,QAAQ;AAAO;AAAA,WAClB,MAAM;AAAA;AAAA;AAIb,0BAAsB;AACpB;AAAA;AAGF,qBAAiB;AACf,cAAQ,QAAQ;AAAA;AAGlB,qBAAiB,EAAE,QAAuB;AACxC,UAAI,SAAS,WAAW,KAAK;AAE3B,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAIJ,cAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,UACE,MAAM,MAAM,WACZ,MAAM;AACJ;AACA;AAAA;AAIJ,qBAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}