npm - element-plus - Versions diffs - 1.2.0-beta.5 → 1.2.0-beta.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (984) hide show

package/lib/components/loading/src/service.js ADDED Viewed

@@ -0,0 +1,105 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var vue = require('vue');
+var shared = require('@vue/shared');
+var core = require('@vueuse/core');
+var dom = require('../../../utils/dom.js');
+var popupManager = require('../../../utils/popup-manager.js');
+var loading = require('./loading.js');
+let fullscreenInstance = void 0;
+const Loading = function(options = {}) {
+  if (!core.isClient)
+    return void 0;
+  const resolved = resolveOptions(options);
+  if (resolved.fullscreen && fullscreenInstance) {
+    fullscreenInstance.close();
+  }
+  const instance = loading.createLoadingComponent({
+    ...resolved,
+    closed: () => {
+      var _a;
+      (_a = resolved.closed) == null ? void 0 : _a.call(resolved);
+      if (resolved.fullscreen)
+        fullscreenInstance = void 0;
+    }
+  });
+  addStyle(resolved, resolved.parent, instance);
+  addClassList(resolved, resolved.parent, instance);
+  resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance);
+  let loadingNumber = resolved.parent.getAttribute("loading-number");
+  if (!loadingNumber) {
+    loadingNumber = "1";
+  } else {
+    loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
+  }
+  resolved.parent.setAttribute("loading-number", loadingNumber);
+  resolved.parent.appendChild(instance.$el);
+  vue.nextTick(() => instance.visible.value = resolved.visible);
+  if (resolved.fullscreen) {
+    fullscreenInstance = instance;
+  }
+  return instance;
+};
+const resolveOptions = (options) => {
+  var _a, _b, _c, _d;
+  let target;
+  if (shared.isString(options.target)) {
+    target = (_a = document.querySelector(options.target)) != null ? _a : document.body;
+  } else {
+    target = options.target || document.body;
+  }
+  return {
+    parent: target === document.body || options.body ? document.body : target,
+    background: options.background || "",
+    svg: options.svg || "",
+    svgViewBox: options.svgViewBox || "",
+    spinner: options.spinner || false,
+    text: options.text || "",
+    fullscreen: target === document.body && ((_b = options.fullscreen) != null ? _b : true),
+    lock: (_c = options.lock) != null ? _c : false,
+    customClass: options.customClass || "",
+    visible: (_d = options.visible) != null ? _d : true,
+    target
+  };
+};
+const addStyle = async (options, parent, instance) => {
+  const maskStyle = {};
+  if (options.fullscreen) {
+    instance.originalPosition.value = dom.getStyle(document.body, "position");
+    instance.originalOverflow.value = dom.getStyle(document.body, "overflow");
+    maskStyle.zIndex = popupManager["default"].nextZIndex();
+  } else if (options.parent === document.body) {
+    instance.originalPosition.value = dom.getStyle(document.body, "position");
+    await vue.nextTick();
+    for (const property of ["top", "left"]) {
+      const scroll = property === "top" ? "scrollTop" : "scrollLeft";
+      maskStyle[property] = `${options.target.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] - parseInt(dom.getStyle(document.body, `margin-${property}`), 10)}px`;
+    }
+    for (const property of ["height", "width"]) {
+      maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`;
+    }
+  } else {
+    instance.originalPosition.value = dom.getStyle(parent, "position");
+  }
+  for (const [key, value] of Object.entries(maskStyle)) {
+    instance.$el.style[key] = value;
+  }
+};
+const addClassList = (options, parent, instance) => {
+  if (instance.originalPosition.value !== "absolute" && instance.originalPosition.value !== "fixed") {
+    dom.addClass(parent, "el-loading-parent--relative");
+  } else {
+    dom.removeClass(parent, "el-loading-parent--relative");
+  }
+  if (options.fullscreen && options.lock) {
+    dom.addClass(parent, "el-loading-parent--hidden");
+  } else {
+    dom.removeClass(parent, "el-loading-parent--hidden");
+  }
+};
+exports.Loading = Loading;
+//# sourceMappingURL=service.js.map

package/lib/components/loading/src/service.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"service.js","sources":["../../../../../../packages/components/loading/src/service.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { isClient } from '@vueuse/core'\nimport { addClass, getStyle, removeClass } from '@element-plus/utils/dom'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { createLoadingComponent } from './loading'\nimport type { LoadingInstance } from './loading'\nimport type { LoadingOptionsResolved } from '..'\nimport type { LoadingOptions } from './types'\nimport type { CSSProperties } from 'vue'\n\nlet fullscreenInstance: LoadingInstance | undefined = undefined\n\nexport const Loading = function (\n options: LoadingOptions = {}\n): LoadingInstance {\n if (!isClient) return undefined as any\n\n const resolved = resolveOptions(options)\n\n if (resolved.fullscreen && fullscreenInstance) {\n fullscreenInstance.close()\n }\n\n const instance = createLoadingComponent({\n ...resolved,\n closed: () => {\n resolved.closed?.()\n if (resolved.fullscreen) fullscreenInstance = undefined\n },\n })\n\n addStyle(resolved, resolved.parent, instance)\n addClassList(resolved, resolved.parent, instance)\n\n resolved.parent.vLoadingAddClassList = () =>\n addClassList(resolved, resolved.parent, instance)\n\n /**\n * add loading-number to parent.\n * because if a fullscreen loading is triggered when somewhere\n * a v-loading.body was triggered before and it's parent is\n * document.body which with a margin , the fullscreen loading's\n * destroySelf function will remove 'el-loading-parent--relative',\n * and then the position of v-loading.body will be error.\n */\n let loadingNumber: string | null =\n resolved.parent.getAttribute('loading-number')\n if (!loadingNumber) {\n loadingNumber = '1'\n } else {\n loadingNumber = `${Number.parseInt(loadingNumber) + 1}`\n }\n resolved.parent.setAttribute('loading-number', loadingNumber)\n\n resolved.parent.appendChild(instance.$el)\n\n // after instance render, then modify visible to trigger transition\n nextTick(() => (instance.visible.value = resolved.visible))\n\n if (resolved.fullscreen) {\n fullscreenInstance = instance\n }\n return instance\n}\n\nconst resolveOptions = (options: LoadingOptions): LoadingOptionsResolved => {\n let target: HTMLElement\n if (isString(options.target)) {\n target =\n document.querySelector<HTMLElement>(options.target) ?? document.body\n } else {\n target = options.target || document.body\n }\n return {\n parent: target === document.body || options.body ? document.body : target,\n background: options.background || '',\n svg: options.svg || '',\n svgViewBox: options.svgViewBox || '',\n spinner: options.spinner || false,\n text: options.text || '',\n fullscreen: target === document.body && (options.fullscreen ?? true),\n lock: options.lock ?? false,\n customClass: options.customClass || '',\n visible: options.visible ?? true,\n target,\n }\n}\n\nconst addStyle = async (\n options: LoadingOptionsResolved,\n parent: HTMLElement,\n instance: LoadingInstance\n) => {\n const maskStyle: CSSProperties = {}\n if (options.fullscreen) {\n instance.originalPosition.value = getStyle(document.body, 'position')\n instance.originalOverflow.value = getStyle(document.body, 'overflow')\n maskStyle.zIndex = PopupManager.nextZIndex()\n } else if (options.parent === document.body) {\n instance.originalPosition.value = getStyle(document.body, 'position')\n /**\n * await dom render when visible is true in init,\n * because some component's height maybe 0.\n * e.g. el-table.\n */\n await nextTick()\n for (const property of ['top', 'left']) {\n const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft'\n maskStyle[property] = `${\n (options.target as HTMLElement).getBoundingClientRect()[property] +\n document.body[scroll] +\n document.documentElement[scroll] -\n parseInt(getStyle(document.body, `margin-${property}`), 10)\n }px`\n }\n for (const property of ['height', 'width']) {\n maskStyle[property] = `${\n (options.target as HTMLElement).getBoundingClientRect()[property]\n }px`\n }\n } else {\n instance.originalPosition.value = getStyle(parent, 'position')\n }\n for (const [key, value] of Object.entries(maskStyle)) {\n instance.$el.style[key] = value\n }\n}\n\nconst addClassList = (\n options: LoadingOptions,\n parent: HTMLElement,\n instance: LoadingInstance\n) => {\n if (\n instance.originalPosition.value !== 'absolute' &&\n instance.originalPosition.value !== 'fixed'\n ) {\n addClass(parent, 'el-loading-parent--relative')\n } else {\n removeClass(parent, 'el-loading-parent--relative')\n }\n if (options.fullscreen && options.lock) {\n addClass(parent, 'el-loading-parent--hidden')\n } else {\n removeClass(parent, 'el-loading-parent--hidden')\n }\n}\n"],"names":["isClient","createLoadingComponent","isString","getStyle","PopupManager","nextTick"],"mappings":";;;;;;;;;;;AAWA,IAAI,qBAAkD;MAEzC,UAAU,SACrB,UAA0B,IACT;AACjB,MAAI,CAACA;AAAU,WAAO;AAEtB,QAAM,WAAW,eAAe;AAEhC,MAAI,SAAS,cAAc,oBAAoB;AAC7C,uBAAmB;AAAA;AAGrB,QAAM,WAAWC,+BAAuB;AAAA,OACnC;AAAA,IACH,QAAQ,MAAM;AA1BlB;AA2BM,qBAAS,WAAT;AACA,UAAI,SAAS;AAAY,6BAAqB;AAAA;AAAA;AAIlD,WAAS,UAAU,SAAS,QAAQ;AACpC,eAAa,UAAU,SAAS,QAAQ;AAExC,WAAS,OAAO,uBAAuB,MACrC,aAAa,UAAU,SAAS,QAAQ;AAU1C,MAAI,gBACF,SAAS,OAAO,aAAa;AAC/B,MAAI,CAAC,eAAe;AAClB,oBAAgB;AAAA,SACX;AACL,oBAAgB,GAAG,OAAO,SAAS,iBAAiB;AAAA;AAEtD,WAAS,OAAO,aAAa,kBAAkB;AAE/C,WAAS,OAAO,YAAY,SAAS;AAGrC,eAAS,MAAO,SAAS,QAAQ,QAAQ,SAAS;AAElD,MAAI,SAAS,YAAY;AACvB,yBAAqB;AAAA;AAEvB,SAAO;AAAA;AAGT,MAAM,iBAAiB,CAAC,YAAoD;AAlE5E;AAmEE,MAAI;AACJ,MAAIC,gBAAS,QAAQ,SAAS;AAC5B,aACE,eAAS,cAA2B,QAAQ,YAA5C,YAAuD,SAAS;AAAA,SAC7D;AACL,aAAS,QAAQ,UAAU,SAAS;AAAA;AAEtC,SAAO;AAAA,IACL,QAAQ,WAAW,SAAS,QAAQ,QAAQ,OAAO,SAAS,OAAO;AAAA,IACnE,YAAY,QAAQ,cAAc;AAAA,IAClC,KAAK,QAAQ,OAAO;AAAA,IACpB,YAAY,QAAQ,cAAc;AAAA,IAClC,SAAS,QAAQ,WAAW;AAAA,IAC5B,MAAM,QAAQ,QAAQ;AAAA,IACtB,YAAY,WAAW,SAAS,uBAAiB,eAAR,YAAsB;AAAA,IAC/D,MAAM,cAAQ,SAAR,YAAgB;AAAA,IACtB,aAAa,QAAQ,eAAe;AAAA,IACpC,SAAS,cAAQ,YAAR,YAAmB;AAAA,IAC5B;AAAA;AAAA;AAIJ,MAAM,WAAW,OACf,SACA,QACA,aACG;AACH,QAAM,YAA2B;AACjC,MAAI,QAAQ,YAAY;AACtB,aAAS,iBAAiB,QAAQC,aAAS,SAAS,MAAM;AAC1D,aAAS,iBAAiB,QAAQA,aAAS,SAAS,MAAM;AAC1D,cAAU,SAASC,wBAAa;AAAA,aACvB,QAAQ,WAAW,SAAS,MAAM;AAC3C,aAAS,iBAAiB,QAAQD,aAAS,SAAS,MAAM;AAM1D,UAAME;AACN,eAAW,YAAY,CAAC,OAAO,SAAS;AACtC,YAAM,SAAS,aAAa,QAAQ,cAAc;AAClD,gBAAU,YAAY,GACnB,QAAQ,OAAuB,wBAAwB,YACxD,SAAS,KAAK,UACd,SAAS,gBAAgB,UACzB,SAASF,aAAS,SAAS,MAAM,UAAU,aAAa;AAAA;AAG5D,eAAW,YAAY,CAAC,UAAU,UAAU;AAC1C,gBAAU,YAAY,GACnB,QAAQ,OAAuB,wBAAwB;AAAA;AAAA,SAGvD;AACL,aAAS,iBAAiB,QAAQA,aAAS,QAAQ;AAAA;AAErD,aAAW,CAAC,KAAK,UAAU,OAAO,QAAQ,YAAY;AACpD,aAAS,IAAI,MAAM,OAAO;AAAA;AAAA;AAI9B,MAAM,eAAe,CACnB,SACA,QACA,aACG;AACH,MACE,SAAS,iBAAiB,UAAU,cACpC,SAAS,iBAAiB,UAAU,SACpC;AACA,iBAAS,QAAQ;AAAA,SACZ;AACL,oBAAY,QAAQ;AAAA;AAEtB,MAAI,QAAQ,cAAc,QAAQ,MAAM;AACtC,iBAAS,QAAQ;AAAA,SACZ;AACL,oBAAY,QAAQ;AAAA;AAAA;;;;"}

package/lib/components/loading/src/types.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { MaybeRef } from '@vueuse/core';
+export declare type LoadingOptionsResolved = {
+    parent: LoadingParentElement;
+    background: MaybeRef<string>;
+    svg: MaybeRef<string>;
+    svgViewBox: MaybeRef<string>;
+    spinner: MaybeRef<boolean | string>;
+    text: MaybeRef<string>;
+    fullscreen: boolean;
+    lock: boolean;
+    customClass: MaybeRef<string>;
+    visible: boolean;
+    target: HTMLElement;
+    beforeClose?: () => boolean;
+    closed?: () => void;
+};
+export declare type LoadingOptions = Partial<Omit<LoadingOptionsResolved, 'parent' | 'target'> & {
+    target: HTMLElement | string;
+    body: boolean;
+}>;
+export interface LoadingParentElement extends HTMLElement {
+    vLoadingAddClassList?: () => void;
+}

package/lib/components/loading/src/types.js ADDED Viewed

@@ -0,0 +1,3 @@
+'use strict';
+//# sourceMappingURL=types.js.map

package/lib/components/loading/src/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/components/menu/src/menu.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 require('../../../directives/index.js');
 var index$1 = require('../../icon/index.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var menuBar = require('../../../utils/menu/menu-bar.js');
 var props = require('../../../utils/props.js');
 require('../../../utils/util.js');
@@ -253,7 +253,7 @@ var Menu = vue.defineComponent({
           }, {
             title: () => vue.h(index$1.ElIcon, {
               class: ["el-sub-menu__icon-more"]
-            }, { default: () => vue.h(icons.More) }),
+            }, { default: () => vue.h(iconsVue.More) }),
             default: () => slotMore
           }));
         }

package/lib/components/menu/src/menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.js","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":["buildProps","definePropType","mutable","isString","isObject","defineComponent","getCurrentInstance","ref","computed","reactive","Menubar","withDirectives","Resize","h","ElSubMenu","ElIcon","More","useMenuCssVar","ElMenuCollapseTransition"],"mappings":";;;;;;;;;;;;;;;;;;MA2Ba,YAAYA,iBAAW;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,cAAc;AAAA,IACvB,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,gBAAgB;AAAA,IACd,MAAMC,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ,CAAC,SAAS;AAAA,IAClB,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;AAKb,MAAM,iBAAiB,CAAC,cACtB,MAAM,QAAQ,cAAc,UAAU,MAAM,CAAC,SAASC,gBAAS;MAEpD,YAAY;AAAA,EACvB,OAAO,CAAC,OAAe,cACrBA,gBAAS,UAAU,eAAe;AAAA,EAEpC,MAAM,CAAC,OAAe,cACpBA,gBAAS,UAAU,eAAe;AAAA,EAEpC,QAAQ,CACN,OACA,WACA,MACA,iBAEAA,gBAAS,UACT,eAAe,cACfC,gBAAS,2BACS,UAAa,wBAAwB;AAAA;AAI3D,WAAeC,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,MAAM,OAAO,UAAU;AACpC,UAAM,WAAWC;AACjB,UAAM,SAAS,SAAS,WAAW,OAAO,iBAAiB;AAC3D,UAAM,OAAOC;AAGb,UAAM,cAAcA,QAClB,MAAM,kBAAkB,CAAC,MAAM,WAC3B,MAAM,eAAe,MAAM,KAC3B;AAEN,UAAM,cAAcA,QAAiC,MAAM;AAC3D,UAAM,QAAQA,QAA2B;AACzC,UAAM,WAAWA,QAA8B;AAE/C,UAAM,kBAAkBA,QAAI;AAG5B,UAAM,cAAcC,aAAsC,MAAM;AAC9D,aACE,MAAM,SAAS,gBACd,MAAM,SAAS,cAAc,MAAM;AAAA;AAKxC,UAAM,WAAW,MAAM;AACrB,YAAM,aAAa,YAAY,SAAS,MAAM,MAAM,YAAY;AAChE,UAAI,CAAC,cAAc,MAAM,SAAS,gBAAgB,MAAM;AAAU;AAElE,YAAM,YAAY,WAAW;AAI7B,gBAAU,QAAQ,CAAC,UAAU;AAC3B,cAAM,UAAU,SAAS,MAAM;AAC/B,mBAAW,SAAS,OAAO,QAAQ;AAAA;AAAA;AAIvC,UAAM,WAAqC,CAAC,OAAO,cAAc;AAC/D,UAAI,YAAY,MAAM,SAAS;AAAQ;AAGvC,UAAI,MAAM,cAAc;AACtB,oBAAY,QAAQ,YAAY,MAAM,OAAO,CAAC,WAC5C,UAAU,SAAS;AAAA;AAGvB,kBAAY,MAAM,KAAK;AACvB,WAAK,QAAQ,OAAO;AAAA;AAGtB,UAAM,YAAuC,CAAC,OAAO,cAAc;AACjE,YAAM,IAAI,YAAY,MAAM,QAAQ;AACpC,UAAI,MAAM,IAAI;AACZ,oBAAY,MAAM,OAAO,GAAG;AAAA;AAE9B,WAAK,SAAS,OAAO;AAAA;AAGvB,UAAM,qBAAyD,CAAC;AAAA,MAC9D;AAAA,MACA;AAAA,UACI;AACJ,YAAM,WAAW,YAAY,MAAM,SAAS;AAE5C,UAAI,UAAU;AACZ,kBAAU,OAAO;AAAA,aACZ;AACL,iBAAS,OAAO;AAAA;AAAA;AAIpB,UAAM,sBAA2D,CAC/D,aACG;AACH,UAAI,MAAM,SAAS,gBAAgB,MAAM,UAAU;AACjD,oBAAY,QAAQ;AAAA;AAGtB,YAAM,EAAE,OAAO,cAAc;AAC7B,UAAI,UAAU,UAAa,cAAc;AAAW;AAEpD,UAAI,MAAM,UAAU,QAAQ;AAC1B,cAAM,QAAQ,SAAS,SAAS;AAChC,cAAM,eAAe,OAAO,KAAK,OAAO,KAAK,CAAC,QAAQ;AACpD,cAAI,CAAC;AAAK,wBAAY,QAAQ;AAC9B,iBAAO;AAAA;AAET,aACE,UACA,OACA,WACA,EAAE,OAAO,WAAW,SACpB;AAAA,aAEG;AACL,oBAAY,QAAQ;AACpB,aAAK,UAAU,OAAO,WAAW,EAAE,OAAO;AAAA;AAAA;AAI9C,UAAM,oBAAoB,CAAC,QAAgB;AACzC,YAAM,cAAc,MAAM;AAC1B,YAAM,OACJ,YAAY,QACX,YAAY,SAAS,YAAY,YAAY,UAC9C,YAAY,MAAM;AAEpB,UAAI,MAAM;AACR,oBAAY,QAAQ,KAAK;AACzB;AAAA,aACK;AAIL,YAAI,CAAC,gBAAgB,OAAO;AAC1B,sBAAY,QAAQ;AAAA,eACf;AACL,0BAAgB,QAAQ;AAAA;AAAA;AAAA;AAI9B,UAAM,eAAe,MAAM;AACzB,mBAAS,MAAM,SAAS,MAAO;AAAA;AAGjC,cACE,MAAM,MAAM,eACZ,CAAC,kBAAkB;AACjB,UAAI,CAAC,MAAM,MAAM,gBAAgB;AAC/B,oBAAY,QAAQ;AAAA;AAEtB,wBAAkB;AAAA;AAItB,cAAM,MAAM,OAAO,MAAM;AAEzB,cACE,MAAM,MAAM,UACZ,CAAC,OAAO,SAAS;AACf,UAAI,UAAU,MAAM;AAClB,wBAAgB,QAAQ;AAAA;AAE1B,UAAI;AAAO,oBAAY,QAAQ;AAAA;AAKnC;AACE,YAAM,aAAyC,CAAC,SAAS;AACvD,iBAAS,MAAM,KAAK,SAAS;AAAA;AAG/B,YAAM,gBAA+C,CAAC,SAAS;AAC7D,eAAO,SAAS,MAAM,KAAK;AAAA;AAG7B,YAAM,cAA2C,CAAC,SAAS;AACzD,cAAM,MAAM,KAAK,SAAS;AAAA;AAG5B,YAAM,iBAAiD,CAAC,SAAS;AAC/D,eAAO,MAAM,MAAM,KAAK;AAAA;AAE1B,kBACE,YACAC,aAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAGJ,kBAAyB,WAAW,SAAS,OAAO;AAAA,QAClD;AAAA,QACA;AAAA;AAAA;AAKJ,kBAAU,MAAM;AACd;AACA,UAAI,MAAM,SAAS,cAAc;AAC/B,YAAIC,mBAAQ,SAAS,MAAM;AAAA;AAAA;AAI/B;AACE,YAAM,OAAO,CAAC,UAAkB;AAC9B,cAAM,EAAE,cAAc,SAAS,MAAM;AACrC,kBAAU,QAAQ,CAAC,MAAM,SAAS,GAAG;AAAA;AAEvC,aAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP;AAAA;AAAA;AAIJ,UAAM,kBAAkB,CAAC,aAAsC;AAC7D,YAAM,SAAS,MAAM,QAAQ,YAAY,WAAW,CAAC;AACrD,YAAM,SAAgB;AACtB,aAAO,QAAQ,CAAC,UAAe;AAC7B,YAAI,MAAM,QAAQ,MAAM,WAAW;AACjC,iBAAO,KAAK,GAAG,gBAAgB,MAAM;AAAA,eAChC;AACL,iBAAO,KAAK;AAAA;AAAA;AAGhB,aAAO;AAAA;AAGT,UAAM,iBAAiB,CAAC,UACtB,MAAM,SAAS,eACXC,mBAAe,OAAO,CAAC,CAACC,kBAAQ,kBAChC;AACN,WAAO,MAAM;AAlUjB;AAmUM,UAAI,OAAO,kBAAM,YAAN,+CAAqB;AAChC,YAAM,YAAqB;AAE3B,UAAI,MAAM,SAAS,gBAAgB,KAAK,OAAO;AAC7C,cAAM,SAAQ,MAAM,KAAK,iBAAK,UAAL,mBAAY,eAAZ,YAA0B,IAAI,OACrD,CAAC,SAAS,KAAK,aAAa,WAAW,KAAK;AAE9C,cAAM,eAAe,gBAAgB;AACrC,cAAM,gBAAgB;AACtB,cAAM,cAAc,SAClB,iBAAiB,KAAK,OAAO,aAC7B;AAEF,cAAM,eAAe,SACnB,iBAAiB,KAAK,OAAO,cAC7B;AAEF,cAAM,YAAY,KAAK,MAAM,cAAc,cAAc;AACzD,YAAI,YAAY;AAChB,YAAI,aAAa;AACjB,eAAM,QAAQ,CAAC,MAAM,UAAU;AAC7B,uBAAa,KAAK,eAAe;AACjC,cAAI,aAAa,YAAY,eAAe;AAC1C,yBAAa,QAAQ;AAAA;AAAA;AAGzB,cAAM,cAAc,aAAa,MAAM,GAAG;AAC1C,cAAM,WAAW,aAAa,MAAM;AACpC,YAAI,sCAAU,WAAU,MAAM,UAAU;AACtC,iBAAO;AACP,oBAAU,KACRC,MACEC,oBACA;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,aAET;AAAA,YACE,OAAO,MACLD,MACEE,gBACA;AAAA,cACE,OAAO,CAAC;AAAA,eAEV,EAAE,SAAS,MAAMF,MAAEG;AAAA,YAEvB,SAAS,MAAM;AAAA;AAAA;AAAA;AAOzB,YAAM,UAAUC,4BAAc;AAE9B,YAAM,aAAa,CAAC,UAClB,MAAM,WAAW,eAAe,SAAS;AAE3C,YAAM,QAAQ,WACZJ,MACE,MACA;AAAA,QACE,KAAK,OAAO,MAAM;AAAA,QAClB,MAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO,QAAQ;AAAA,QACf,OAAO;AAAA,UACL,WAAW;AAAA,UACX,uBAAuB,MAAM,SAAS;AAAA,UACtC,qBAAqB,MAAM;AAAA;AAAA,SAG/B,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,WAAW,SAAS,GAAG;AAInD,UAAI,MAAM,sBAAsB,MAAM,SAAS,YAAY;AACzD,eAAOA,MAAEK,4DAA0B,MAAM;AAAA;AAG3C,aAAO;AAAA;AAAA;AAAA;;;;;;"}
1	+ {"version":3,"file":"menu.js","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":["buildProps","definePropType","mutable","isString","isObject","defineComponent","getCurrentInstance","ref","computed","reactive","Menubar","withDirectives","Resize","h","ElSubMenu","ElIcon","More","useMenuCssVar","ElMenuCollapseTransition"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ var index$2 = require('../../collapse-transition/index.js');
 var index$1 = require('../../popper/index.js');
 var props = require('../../../utils/props.js');
 var error = require('../../../utils/error.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var index = require('../../icon/index.js');
 var useMenu = require('./use-menu.js');
 var useMenuCssVar = require('./use-menu-css-var.js');
@@ -54,7 +54,7 @@ var SubMenu = vue.defineComponent({
     const verticalTitleRef = vue.ref();
     const vPopper = vue.ref();
     const subMenuTitleIcon = vue.computed(() => {
-      return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? icons.ArrowDown : icons.ArrowRight;
+      return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? iconsVue.ArrowDown : iconsVue.ArrowRight;
     });
     const isFirstLevel = vue.computed(() => {
       let isFirstLevel2 = true;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sub-menu.js","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":["buildProps","defineComponent","getCurrentInstance","useMenu","computed","inject","ref","ArrowDown","ArrowRight","reactive","useTimeoutFn","h","ElIcon","useMenuCssVar","ElPopper","Fragment","ElCollapseTransition","vShow"],"mappings":"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"}
1	+ {"version":3,"file":"sub-menu.js","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":["buildProps","defineComponent","getCurrentInstance","useMenu","computed","inject","ref","ArrowDown","ArrowRight","reactive","useTimeoutFn","h","ElIcon","useMenuCssVar","ElPopper","Fragment","ElCollapseTransition","vShow"],"mappings":"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"}

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

@@ -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, "error" | "success" | "warning" | "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/lib/components/message/src/message.vue.d.ts CHANGED Viewed

@@ -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, "error" | "success" | "warning" | "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,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly grouping?: unknown;
     readonly repeatNum?: unknown;
 } & {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "error" | "success" | "warning" | "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, {
@@ -62,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
 }> & {
     onDestroy?: (() => any) | undefined;
 }, {
-    type: import("../../../utils/props").BuildPropType<StringConstructor, "error" | "success" | "warning" | "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, {

package/lib/components/message/src/message.vue_vue_type_script_lang.js CHANGED Viewed

@@ -21,6 +21,7 @@ var script = vue.defineComponent({
   emits: message.messageEmits,
   setup(props) {
     const visible = vue.ref(false);
+    const badgeType = vue.ref(props.type ? props.type === "error" ? "danger" : props.type : "info");
     let stopTimer = void 0;
     const typeClass = vue.computed(() => {
       const type = props.type;
@@ -71,6 +72,7 @@ var script = vue.defineComponent({
       iconComponent,
       customStyle,
       visible,
+      badgeType,
       close,
       clearTimer,
       startTimer

package/lib/components/message/src/message.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.vue_vue_type_script_lang.js","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=\"~~type ?? 'info'~~\"\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'\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 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\n close,\n clearTimer,\n startTimer,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElBadge","ElIcon","TypeComponents","messageProps","messageEmits","ref","computed","TypeComponentsMap","useTimeoutFn","EVENT_CODE"],"mappings":";;;;;;;;;;;;~~AA4DA~~,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,aACVC;AAAA,YACAC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,QAAI,YAAsC;AAE1C,UAAM,YAAYC,aAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQC,uBAAkB,QAAQ,oBAAoB,SAAS;AAAA;AAGxE,UAAM,gBAAgBD,aAAS,MAAM;AACnC,aAAO,MAAM,QAAQC,uBAAkB,MAAM,SAAS;AAAA;AAGxD,UAAM,cAAcD,aAAwB;AAAO,MACjD,KAAK,GAAG,MAAM;AAAA,MACd,QAAQ,MAAM;AAAA;AAGhB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,cAAcE,kBAAa,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,SAASC,gBAAW,KAAK;AAE3B,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAIJ,kBAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,cACE,MAAM,MAAM,WACZ,MAAM;AACJ;AACA;AAAA;AAIJ,0BAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
1	+ {"version":3,"file":"message.vue_vue_type_script_lang.js","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":["defineComponent","ElBadge","ElIcon","TypeComponents","messageProps","messageEmits","ref","computed","TypeComponentsMap","useTimeoutFn","EVENT_CODE"],"mappings":";;;;;;;;;;;;AA6DA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,aACVC;AAAA,YACAC;AAAA,OACGC;AAAA;AAAA,EAGL,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,UAAM,YAAYA,QAChB,MAAM,OAAQ,MAAM,SAAS,UAAU,WAAW,MAAM,OAAQ;AAElE,QAAI,YAAsC;AAE1C,UAAM,YAAYC,aAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQC,uBAAkB,QAAQ,oBAAoB,SAAS;AAAA;AAGxE,UAAM,gBAAgBD,aAAS,MAAM;AACnC,aAAO,MAAM,QAAQC,uBAAkB,MAAM,SAAS;AAAA;AAGxD,UAAM,cAAcD,aAAwB;AAAO,MACjD,KAAK,GAAG,MAAM;AAAA,MACd,QAAQ,MAAM;AAAA;AAGhB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,cAAcE,kBAAa,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,SAASC,gBAAW,KAAK;AAE3B,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAIJ,kBAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,cACE,MAAM,MAAM,WACZ,MAAM;AACJ;AACA;AAAA;AAIJ,0BAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/message/src/message.vue_vue_type_template_id_031967c2_lang.js CHANGED Viewed

@@ -19,62 +19,59 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onBeforeLeave: _ctx.onClose,
     onAfterLeave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("destroy"))
   }, {
-    default: vue.withCtx(() => {
-      var _a;
-      return [
-        vue.withDirectives(vue.createElementVNode("div", {
-          id: _ctx.id,
-          class: vue.normalizeClass([
-            "el-message",
-            _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "",
-            _ctx.center ? "is-center" : "",
-            _ctx.showClose ? "is-closable" : "",
-            _ctx.customClass
+    default: vue.withCtx(() => [
+      vue.withDirectives(vue.createElementVNode("div", {
+        id: _ctx.id,
+        class: vue.normalizeClass([
+          "el-message",
+          _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "",
+          _ctx.center ? "is-center" : "",
+          _ctx.showClose ? "is-closable" : "",
+          _ctx.customClass
+        ]),
+        style: vue.normalizeStyle(_ctx.customStyle),
+        role: "alert",
+        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
+      }, [
+        _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, {
+          key: 0,
+          value: _ctx.repeatNum,
+          type: _ctx.badgeType,
+          class: "el-message__badge"
+        }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
+        _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          key: 1,
+          class: vue.normalizeClass(["el-message__icon", _ctx.typeClass])
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
           ]),
-          style: vue.normalizeStyle(_ctx.customStyle),
-          role: "alert",
-          onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
-          onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
-        }, [
-          _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, {
-            key: 0,
-            value: _ctx.repeatNum,
-            type: (_a = _ctx.type) != null ? _a : "info",
-            class: "el-message__badge"
-          }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
-          _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-            key: 1,
-            class: vue.normalizeClass(["el-message__icon", _ctx.typeClass])
-          }, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
-            ]),
-            _: 1
-          }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-          vue.renderSlot(_ctx.$slots, "default", {}, () => [
-            !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
-              vue.createElementVNode("p", {
-                class: "el-message__content",
-                innerHTML: _ctx.message
-              }, null, 8, _hoisted_3)
-            ], 2112))
+          _: 1
+        }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
+            vue.createElementVNode("p", {
+              class: "el-message__content",
+              innerHTML: _ctx.message
+            }, null, 8, _hoisted_3)
+          ], 2112))
+        ]),
+        _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          key: 2,
+          class: "el-message__closeBtn",
+          onClick: vue.withModifiers(_ctx.close, ["stop"])
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_close)
           ]),
-          _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-            key: 2,
-            class: "el-message__closeBtn",
-            onClick: vue.withModifiers(_ctx.close, ["stop"])
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_close)
-            ]),
-            _: 1
-          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
-        ], 46, _hoisted_1), [
-          [vue.vShow, _ctx.visible]
-        ])
-      ];
-    }),
+          _: 1
+        }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+      ], 46, _hoisted_1), [
+        [vue.vShow, _ctx.visible]
+      ])
+    ]),
     _: 3
   }, 8, ["onBeforeLeave"]);
 }