element-plus 2.13.6 → 2.13.7

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

@@ -1,67 +1,60 @@
-import { IconPropType } from "../../../utils/vue/icon.js";
-import "../../../utils/index.js";
-import { InputModelModifiers, InputType } from "../../input/src/input.js";
 import { InputInstance } from "../../input/src/instance.js";
 import "../../input/index.js";
 import { TooltipInstance } from "../../tooltip/src/tooltip.js";
 import "../../tooltip/index.js";
 import { MentionOption } from "./types.js";
-import { filterOption } from "./helper.js";
-import { MentionOptionProps, MentionProps } from "./mention.js";
+import { MentionProps } from "./mention.js";
 import * as vue from "vue";
-import { CSSProperties } from "vue";
-import * as _popperjs_core0 from "@popperjs/core";
 
 //#region ../../packages/components/mention/src/mention.vue.d.ts
-declare var __VLS_15: string, __VLS_16: any, __VLS_41: string, __VLS_42: any;
-type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any } & { [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any };
-declare const __VLS_base: vue.DefineComponent<MentionProps, {
-  input: vue.Ref<InputInstance | undefined, InputInstance | undefined>;
-  tooltip: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
-  dropdownVisible: vue.ComputedRef<boolean>;
-}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  blur: (evt: FocusEvent) => void;
-  focus: (evt: FocusEvent) => void;
-  input: (value: string) => void;
-  select: (option: MentionOption, prefix: string) => void;
-  "update:modelValue": (value: string) => void;
-  search: (pattern: string, prefix: string) => void;
-  "whole-remove": (pattern: string, prefix: string) => void;
-}, string, vue.PublicProps, Readonly<MentionProps> & Readonly<{
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
-  onInput?: ((value: string) => any) | undefined;
-  onSelect?: ((option: MentionOption, prefix: string) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onSearch?: ((pattern: string, prefix: string) => any) | undefined;
-  "onWhole-remove"?: ((pattern: string, prefix: string) => any) | undefined;
-}>, {
-  type: InputType;
-  props: MentionOptionProps;
-  disabled: boolean;
-  clearIcon: IconPropType;
-  placement: "bottom" | "top";
-  validateEvent: boolean;
-  modelValue: string;
-  options: MentionOption[];
-  offset: number;
-  popperOptions: Partial<_popperjs_core0.Options>;
-  split: string;
-  modelModifiers: InputModelModifiers;
-  autocomplete: string;
-  wordLimitPosition: "inside" | "outside";
-  tabindex: string | number;
-  inputStyle: string | false | CSSProperties | vue.StyleValue[] | null;
-  rows: number;
-  prefix: string | string[];
-  filterOption: false | typeof filterOption;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
+declare const __VLS_export: <T extends MentionOption = MentionOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & __VLS_PrettifyLocal<MentionProps<T> & {
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onInput?: ((value: string) => any) | undefined;
+    onSelect?: ((option: MentionOption, prefix: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onSearch?: ((pattern: string, prefix: string) => any) | undefined;
+    "onWhole-remove"?: ((pattern: string, prefix: string) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: vue.ShallowUnwrapRef<{
+    input: vue.Ref<InputInstance | undefined, InputInstance | undefined>;
+    tooltip: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
+    dropdownVisible: vue.ComputedRef<boolean>;
+  }>) => void;
+  attrs: any;
+  slots: Readonly<{
+    [name: string]: vue.Slot<any> | undefined;
+  }> & {
+    prepend?: (props: {}) => any;
+  } & {
+    prefix?: (props: {}) => any;
+  } & {
+    suffix?: (props: {}) => any;
+  } & {
+    'password-icon'?: (props: {
+      visible: boolean;
+    }) => any;
+  } & {
+    append?: (props: {}) => any;
+  } & {
+    header?: () => any;
+    footer?: () => any;
+    loading?: () => any;
+    label?: (props: {
+      item: T & MentionOption;
+      index: number;
+    }) => any;
   };
+  emit: ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "input", value: string) => void) & ((event: "select", option: MentionOption, prefix: string) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "search", pattern: string, prefix: string) => void) & ((event: "whole-remove", pattern: string, prefix: string) => void);
+}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}> & {
+  __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 export { _default };

package/lib/components/mention/src/mention.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,6 @@ const require_index$1 = require('../../../hooks/use-id/index.js');
 const require_index$2 = require('../../../hooks/use-focus-controller/index.js');
 const require_use_form_common_props = require('../../form/src/hooks/use-form-common-props.js');
 const require_index$3 = require('../../tooltip/index.js');
-const require_input = require('../../input/src/input.js');
 const require_index$4 = require('../../input/index.js');
 const require_helper = require('./helper.js');
 const require_mention = require('./mention.js');
@@ -26,7 +25,10 @@ var mention_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vu
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const passInputProps = (0, vue.computed)(() => (0, lodash_unified.pick)(props, Object.keys(require_input.inputProps)));
+		const passInputProps = (0, vue.computed)(() => {
+			const inputProps = require_index$4.ElInput.props ?? [];
+			return (0, lodash_unified.pick)(props, (0, _vue_shared.isArray)(inputProps) ? inputProps : Object.keys(inputProps));
+		});
 		const ns = require_index.useNamespace("mention");
 		const disabled = require_use_form_common_props.useFormDisabled();
 		const contentId = require_index$1.useId();

package/lib/components/mention/src/mention.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/mention/src/mention.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapperRef\" :class=\"ns.b()\">\n    <el-input\n      v-bind=\"mergeProps(passInputProps, $attrs)\"\n      ref=\"elInputRef\"\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :role=\"dropdownVisible ? 'combobox' : undefined\"\n      :aria-activedescendant=\"dropdownVisible ? hoveringId || '' : undefined\"\n      :aria-controls=\"dropdownVisible ? contentId : undefined\"\n      :aria-expanded=\"dropdownVisible || undefined\"\n      :aria-label=\"ariaLabel\"\n      :aria-autocomplete=\"dropdownVisible ? 'none' : undefined\"\n      :aria-haspopup=\"dropdownVisible ? 'listbox' : undefined\"\n      @input=\"handleInputChange\"\n      @keydown=\"handleInputKeyDown\"\n      @mousedown=\"handleInputMouseDown\"\n    >\n      <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n        <slot :name=\"name\" v-bind=\"slotProps\" />\n      </template>\n    </el-input>\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownVisible\"\n      :popper-class=\"[ns.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :popper-options=\"popperOptions\"\n      :placement=\"computedPlacement\"\n      :fallback-placements=\"computedFallbackPlacements\"\n      effect=\"light\"\n      pure\n      :offset=\"offset\"\n      :show-arrow=\"showArrow\"\n    >\n      <template #default>\n        <div :style=\"cursorStyle\" />\n      </template>\n      <template #content>\n        <el-mention-dropdown\n          ref=\"dropdownRef\"\n          :options=\"filteredOptions\"\n          :disabled=\"disabled\"\n          :loading=\"loading\"\n          :content-id=\"contentId\"\n          :aria-label=\"ariaLabel\"\n          @select=\"handleSelect\"\n          @click.stop=\"elInputRef?.focus()\"\n        >\n          <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n            <slot :name=\"name\" v-bind=\"slotProps\" />\n          </template>\n        </el-mention-dropdown>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, mergeProps, nextTick, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { useFocusController, useId, useNamespace } from '@element-plus/hooks'\nimport ElInput, {\n  inputProps,\n  inputPropsDefaults,\n} from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  EVENT_CODE,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { getEventCode, isFunction } from '@element-plus/utils'\nimport { mentionDefaultProps, mentionEmits } from './mention'\nimport { filterOption, getCursorPosition, getMentionCtx } from './helper'\nimport ElMentionDropdown from './mention-dropdown.vue'\n\nimport type { MentionProps } from './mention'\nimport type { Placement } from '@popperjs/core'\nimport type { CSSProperties } from 'vue'\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { MentionCtx, MentionOption } from './types'\n\ndefineOptions({\n  name: 'ElMention',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MentionProps>(), {\n  ...inputPropsDefaults,\n  options: () => [],\n  prefix: '@',\n  split: ' ',\n  filterOption: () => filterOption,\n  placement: 'bottom',\n  offset: 0,\n  popperOptions: () => ({}),\n  props: () => mentionDefaultProps,\n})\nconst emit = defineEmits(mentionEmits)\n\nconst passInputProps = computed(() => pick(props, Object.keys(inputProps)))\n\nconst ns = useNamespace('mention')\nconst disabled = useFormDisabled()\nconst contentId = useId()\n\nconst elInputRef = ref<InputInstance>()\nconst tooltipRef = ref<TooltipInstance>()\nconst dropdownRef = ref<InstanceType<typeof ElMentionDropdown>>()\n\nconst visible = ref(false)\nconst cursorStyle = ref<CSSProperties>()\nconst mentionCtx = ref<MentionCtx>()\n\nconst computedPlacement = computed<Placement>(() =>\n  props.showArrow ? props.placement : `${props.placement}-start`\n)\n\nconst computedFallbackPlacements = computed<Placement[]>(() =>\n  props.showArrow ? ['bottom', 'top'] : ['bottom-start', 'top-start']\n)\n\nconst aliasProps = computed(() => ({\n  ...mentionDefaultProps,\n  ...props.props,\n}))\n\nconst mapOption = (option: MentionOption) => {\n  const base = {\n    label: option[aliasProps.value.label],\n    value: option[aliasProps.value.value],\n    disabled: option[aliasProps.value.disabled],\n  }\n  return { ...option, ...base }\n}\n\nconst options = computed(() => props.options.map(mapOption))\n\nconst filteredOptions = computed(() => {\n  const { filterOption } = props\n  if (!mentionCtx.value || !filterOption) return options.value\n  return options.value.filter((option) =>\n    filterOption(mentionCtx.value!.pattern, option)\n  )\n})\n\nconst dropdownVisible = computed(() => {\n  return visible.value && (!!filteredOptions.value.length || props.loading)\n})\n\nconst hoveringId = computed(() => {\n  return `${contentId.value}-${dropdownRef.value?.hoveringIndex}`\n})\n\nconst handleInputChange = (value: string) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n  syncAfterCursorMove()\n}\n\nconst handleInputKeyDown = (event: KeyboardEvent | Event) => {\n  if (elInputRef.value?.isComposing) return\n  const code = getEventCode(event as KeyboardEvent)\n\n  switch (code) {\n    case EVENT_CODE.left:\n    case EVENT_CODE.right:\n      syncAfterCursorMove()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.down:\n      if (!visible.value) return\n      event.preventDefault()\n      dropdownRef.value?.navigateOptions(\n        code === EVENT_CODE.up ? 'prev' : 'next'\n      )\n      break\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      if (!visible.value) {\n        props.type !== 'textarea' && syncAfterCursorMove()\n        return\n      }\n      event.preventDefault()\n      if (dropdownRef.value?.hoverOption) {\n        dropdownRef.value?.selectHoverOption()\n      } else {\n        visible.value = false\n      }\n      break\n    case EVENT_CODE.esc:\n      if (!visible.value) return\n      event.preventDefault()\n      visible.value = false\n      break\n    case EVENT_CODE.backspace:\n      if (props.whole && mentionCtx.value) {\n        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =\n          mentionCtx.value\n        const inputEl = getInputEl()\n        if (!inputEl) return\n        const inputValue = inputEl.value\n        const matchOption = options.value.find((item) => item.value === pattern)\n        const isWhole = isFunction(props.checkIsWhole)\n          ? props.checkIsWhole(pattern, prefix)\n          : matchOption\n        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {\n          event.preventDefault()\n          const newValue =\n            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)\n          emit(UPDATE_MODEL_EVENT, newValue)\n          emit(INPUT_EVENT, newValue)\n          emit('whole-remove', pattern, prefix)\n\n          const newSelectionEnd = prefixIndex\n          nextTick(() => {\n            // input value is updated\n            inputEl.selectionStart = newSelectionEnd\n            inputEl.selectionEnd = newSelectionEnd\n            syncDropdownVisible()\n          })\n        }\n      }\n  }\n}\n\nconst { wrapperRef } = useFocusController(elInputRef, {\n  disabled,\n  afterFocus() {\n    syncAfterCursorMove()\n  },\n  beforeBlur(event) {\n    return tooltipRef.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    visible.value = false\n  },\n})\n\nconst handleInputMouseDown = () => {\n  syncAfterCursorMove()\n}\n\n// Ensure that the original option passed by users is returned\nconst getOriginalOption = (mentionOption: MentionOption) => {\n  return props.options.find((option: MentionOption) => {\n    return mentionOption.value === option[aliasProps.value.value]\n  })\n}\n\nconst handleSelect = (item: MentionOption) => {\n  if (!mentionCtx.value) return\n  const inputEl = getInputEl()\n  if (!inputEl) return\n  const inputValue = inputEl.value\n  const { split } = props\n\n  const newEndPart = inputValue.slice(mentionCtx.value.end)\n  const alreadySeparated = newEndPart.startsWith(split)\n  const newMiddlePart = `${item.value}${alreadySeparated ? '' : split}`\n\n  const newValue =\n    inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart\n\n  emit(UPDATE_MODEL_EVENT, newValue)\n  emit(INPUT_EVENT, newValue)\n  emit('select', getOriginalOption(item)!, mentionCtx.value.prefix)\n\n  const newSelectionEnd =\n    mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0)\n\n  nextTick(() => {\n    // input value is updated\n    inputEl.selectionStart = newSelectionEnd\n    inputEl.selectionEnd = newSelectionEnd\n    inputEl.focus()\n    syncDropdownVisible()\n  })\n}\n\nconst getInputEl = () =>\n  props.type === 'textarea'\n    ? elInputRef.value?.textarea\n    : elInputRef.value?.input\n\nconst syncAfterCursorMove = () => {\n  // can't use nextTick(), get cursor position will be wrong\n  setTimeout(() => {\n    syncCursor()\n    syncDropdownVisible()\n    nextTick(() => tooltipRef.value?.updatePopper())\n  }, 0)\n}\n\nconst syncCursor = () => {\n  const inputEl = getInputEl()\n  if (!inputEl) return\n\n  const caretPosition = getCursorPosition(inputEl)\n  const inputRect = inputEl.getBoundingClientRect()\n  const wrapperRect = wrapperRef.value!.getBoundingClientRect()\n\n  cursorStyle.value = {\n    position: 'absolute',\n    width: 0,\n    height: `${caretPosition.height}px`,\n    left: `${caretPosition.left + inputRect.left - wrapperRect.left}px`,\n    top: `${caretPosition.top + inputRect.top - wrapperRect.top}px`,\n  }\n}\n\nconst syncDropdownVisible = () => {\n  const inputEl = getInputEl()\n  if (document.activeElement !== inputEl) {\n    visible.value = false\n    return\n  }\n  const { prefix, split } = props\n  mentionCtx.value = getMentionCtx(inputEl, prefix, split)\n  if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {\n    visible.value = true\n    emit('search', mentionCtx.value.pattern, mentionCtx.value.prefix)\n    return\n  }\n  visible.value = false\n}\n\ndefineExpose({\n  input: elInputRef,\n  tooltip: tooltipRef,\n  dropdownVisible,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"mention.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../../packages/components/mention/src/mention.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapperRef\" :class=\"ns.b()\">\n    <el-input\n      v-bind=\"mergeProps(passInputProps, $attrs)\"\n      ref=\"elInputRef\"\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :role=\"dropdownVisible ? 'combobox' : undefined\"\n      :aria-activedescendant=\"dropdownVisible ? hoveringId || '' : undefined\"\n      :aria-controls=\"dropdownVisible ? contentId : undefined\"\n      :aria-expanded=\"dropdownVisible || undefined\"\n      :aria-label=\"ariaLabel\"\n      :aria-autocomplete=\"dropdownVisible ? 'none' : undefined\"\n      :aria-haspopup=\"dropdownVisible ? 'listbox' : undefined\"\n      @input=\"handleInputChange\"\n      @keydown=\"handleInputKeyDown\"\n      @mousedown=\"handleInputMouseDown\"\n    >\n      <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n        <slot :name=\"name\" v-bind=\"slotProps\" />\n      </template>\n    </el-input>\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownVisible\"\n      :popper-class=\"[ns.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :popper-options=\"popperOptions\"\n      :placement=\"computedPlacement\"\n      :fallback-placements=\"computedFallbackPlacements\"\n      effect=\"light\"\n      pure\n      :offset=\"offset\"\n      :show-arrow=\"showArrow\"\n    >\n      <template #default>\n        <div :style=\"cursorStyle\" />\n      </template>\n      <template #content>\n        <el-mention-dropdown\n          ref=\"dropdownRef\"\n          :options=\"filteredOptions\"\n          :disabled=\"disabled\"\n          :loading=\"loading\"\n          :content-id=\"contentId\"\n          :aria-label=\"ariaLabel\"\n          @select=\"handleSelect\"\n          @click.stop=\"elInputRef?.focus()\"\n        >\n          <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n            <slot :name=\"name\" v-bind=\"slotProps\" />\n          </template>\n        </el-mention-dropdown>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends MentionOption = MentionOption\">\nimport { computed, mergeProps, nextTick, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { useFocusController, useId, useNamespace } from '@element-plus/hooks'\nimport ElInput, { inputPropsDefaults } from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  EVENT_CODE,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { getEventCode, isArray, isFunction } from '@element-plus/utils'\nimport { mentionDefaultProps, mentionEmits } from './mention'\nimport { filterOption, getCursorPosition, getMentionCtx } from './helper'\nimport ElMentionDropdown from './mention-dropdown.vue'\n\nimport type { MentionProps } from './mention'\nimport type { Placement } from '@popperjs/core'\nimport type { CSSProperties } from 'vue'\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { MentionCtx, MentionOption } from './types'\n\ndefineOptions({\n  name: 'ElMention',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MentionProps<T>>(), {\n  ...inputPropsDefaults,\n  options: () => [],\n  prefix: '@',\n  split: ' ',\n  filterOption: () => filterOption,\n  placement: 'bottom',\n  offset: 0,\n  popperOptions: () => ({}),\n  props: () => mentionDefaultProps,\n})\nconst emit = defineEmits(mentionEmits)\ndefineSlots<\n  InputInstance['$slots'] & {\n    header?: () => any\n    footer?: () => any\n    loading?: () => any\n    label?: (props: { item: T & MentionOption; index: number }) => any\n  }\n>()\n\nconst passInputProps = computed(() => {\n  const inputProps = ElInput.props ?? []\n  const keys = isArray(inputProps) ? inputProps : Object.keys(inputProps)\n  return pick(props, keys)\n})\n\nconst ns = useNamespace('mention')\nconst disabled = useFormDisabled()\nconst contentId = useId()\n\nconst elInputRef = ref<InputInstance>()\nconst tooltipRef = ref<TooltipInstance>()\nconst dropdownRef = ref<InstanceType<typeof ElMentionDropdown>>()\n\nconst visible = ref(false)\nconst cursorStyle = ref<CSSProperties>()\nconst mentionCtx = ref<MentionCtx>()\n\nconst computedPlacement = computed<Placement>(() =>\n  props.showArrow ? props.placement : `${props.placement}-start`\n)\n\nconst computedFallbackPlacements = computed<Placement[]>(() =>\n  props.showArrow ? ['bottom', 'top'] : ['bottom-start', 'top-start']\n)\n\nconst aliasProps = computed(() => ({\n  ...mentionDefaultProps,\n  ...props.props,\n}))\n\nconst mapOption = (option: T) => {\n  const base = {\n    label: option[aliasProps.value.label],\n    value: option[aliasProps.value.value],\n    disabled: option[aliasProps.value.disabled],\n  }\n  return { ...option, ...base }\n}\n\nconst options = computed(() => props.options.map(mapOption))\n\nconst filteredOptions = computed(() => {\n  const { filterOption } = props\n  if (!mentionCtx.value || !filterOption) return options.value\n  return options.value.filter((option) =>\n    filterOption(mentionCtx.value!.pattern, option)\n  )\n})\n\nconst dropdownVisible = computed(() => {\n  return visible.value && (!!filteredOptions.value.length || props.loading)\n})\n\nconst hoveringId = computed(() => {\n  return `${contentId.value}-${dropdownRef.value?.hoveringIndex}`\n})\n\nconst handleInputChange = (value: string) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n  syncAfterCursorMove()\n}\n\nconst handleInputKeyDown = (event: KeyboardEvent | Event) => {\n  if (elInputRef.value?.isComposing) return\n  const code = getEventCode(event as KeyboardEvent)\n\n  switch (code) {\n    case EVENT_CODE.left:\n    case EVENT_CODE.right:\n      syncAfterCursorMove()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.down:\n      if (!visible.value) return\n      event.preventDefault()\n      dropdownRef.value?.navigateOptions(\n        code === EVENT_CODE.up ? 'prev' : 'next'\n      )\n      break\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      if (!visible.value) {\n        props.type !== 'textarea' && syncAfterCursorMove()\n        return\n      }\n      event.preventDefault()\n      if (dropdownRef.value?.hoverOption) {\n        dropdownRef.value?.selectHoverOption()\n      } else {\n        visible.value = false\n      }\n      break\n    case EVENT_CODE.esc:\n      if (!visible.value) return\n      event.preventDefault()\n      visible.value = false\n      break\n    case EVENT_CODE.backspace:\n      if (props.whole && mentionCtx.value) {\n        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =\n          mentionCtx.value\n        const inputEl = getInputEl()\n        if (!inputEl) return\n        const inputValue = inputEl.value\n        const matchOption = options.value.find((item) => item.value === pattern)\n        const isWhole = isFunction(props.checkIsWhole)\n          ? props.checkIsWhole(pattern, prefix)\n          : matchOption\n        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {\n          event.preventDefault()\n          const newValue =\n            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)\n          emit(UPDATE_MODEL_EVENT, newValue)\n          emit(INPUT_EVENT, newValue)\n          emit('whole-remove', pattern, prefix)\n\n          const newSelectionEnd = prefixIndex\n          nextTick(() => {\n            // input value is updated\n            inputEl.selectionStart = newSelectionEnd\n            inputEl.selectionEnd = newSelectionEnd\n            syncDropdownVisible()\n          })\n        }\n      }\n  }\n}\n\nconst { wrapperRef } = useFocusController(elInputRef, {\n  disabled,\n  afterFocus() {\n    syncAfterCursorMove()\n  },\n  beforeBlur(event) {\n    return tooltipRef.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    visible.value = false\n  },\n})\n\nconst handleInputMouseDown = () => {\n  syncAfterCursorMove()\n}\n\n// Ensure that the original option passed by users is returned\nconst getOriginalOption = (mentionOption: MentionOption) => {\n  return props.options.find((option: MentionOption) => {\n    return mentionOption.value === option[aliasProps.value.value]\n  })\n}\n\nconst handleSelect = (item: MentionOption) => {\n  if (!mentionCtx.value) return\n  const inputEl = getInputEl()\n  if (!inputEl) return\n  const inputValue = inputEl.value\n  const { split } = props\n\n  const newEndPart = inputValue.slice(mentionCtx.value.end)\n  const alreadySeparated = newEndPart.startsWith(split)\n  const newMiddlePart = `${item.value}${alreadySeparated ? '' : split}`\n\n  const newValue =\n    inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart\n\n  emit(UPDATE_MODEL_EVENT, newValue)\n  emit(INPUT_EVENT, newValue)\n  emit('select', getOriginalOption(item)!, mentionCtx.value.prefix)\n\n  const newSelectionEnd =\n    mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0)\n\n  nextTick(() => {\n    // input value is updated\n    inputEl.selectionStart = newSelectionEnd\n    inputEl.selectionEnd = newSelectionEnd\n    inputEl.focus()\n    syncDropdownVisible()\n  })\n}\n\nconst getInputEl = () =>\n  props.type === 'textarea'\n    ? elInputRef.value?.textarea\n    : elInputRef.value?.input\n\nconst syncAfterCursorMove = () => {\n  // can't use nextTick(), get cursor position will be wrong\n  setTimeout(() => {\n    syncCursor()\n    syncDropdownVisible()\n    nextTick(() => tooltipRef.value?.updatePopper())\n  }, 0)\n}\n\nconst syncCursor = () => {\n  const inputEl = getInputEl()\n  if (!inputEl) return\n\n  const caretPosition = getCursorPosition(inputEl)\n  const inputRect = inputEl.getBoundingClientRect()\n  const wrapperRect = wrapperRef.value!.getBoundingClientRect()\n\n  cursorStyle.value = {\n    position: 'absolute',\n    width: 0,\n    height: `${caretPosition.height}px`,\n    left: `${caretPosition.left + inputRect.left - wrapperRect.left}px`,\n    top: `${caretPosition.top + inputRect.top - wrapperRect.top}px`,\n  }\n}\n\nconst syncDropdownVisible = () => {\n  const inputEl = getInputEl()\n  if (document.activeElement !== inputEl) {\n    visible.value = false\n    return\n  }\n  const { prefix, split } = props\n  mentionCtx.value = getMentionCtx(inputEl, prefix, split)\n  if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {\n    visible.value = true\n    emit('search', mentionCtx.value.pattern, mentionCtx.value.prefix)\n    return\n  }\n  visible.value = false\n}\n\ndefineExpose({\n  input: elInputRef,\n  tooltip: tooltipRef,\n  dropdownVisible,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/mention/src/mention2.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention2.js","names":[],"sources":["../../../../../../packages/components/mention/src/mention.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapperRef\" :class=\"ns.b()\">\n    <el-input\n      v-bind=\"mergeProps(passInputProps, $attrs)\"\n      ref=\"elInputRef\"\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :role=\"dropdownVisible ? 'combobox' : undefined\"\n      :aria-activedescendant=\"dropdownVisible ? hoveringId || '' : undefined\"\n      :aria-controls=\"dropdownVisible ? contentId : undefined\"\n      :aria-expanded=\"dropdownVisible || undefined\"\n      :aria-label=\"ariaLabel\"\n      :aria-autocomplete=\"dropdownVisible ? 'none' : undefined\"\n      :aria-haspopup=\"dropdownVisible ? 'listbox' : undefined\"\n      @input=\"handleInputChange\"\n      @keydown=\"handleInputKeyDown\"\n      @mousedown=\"handleInputMouseDown\"\n    >\n      <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n        <slot :name=\"name\" v-bind=\"slotProps\" />\n      </template>\n    </el-input>\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownVisible\"\n      :popper-class=\"[ns.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :popper-options=\"popperOptions\"\n      :placement=\"computedPlacement\"\n      :fallback-placements=\"computedFallbackPlacements\"\n      effect=\"light\"\n      pure\n      :offset=\"offset\"\n      :show-arrow=\"showArrow\"\n    >\n      <template #default>\n        <div :style=\"cursorStyle\" />\n      </template>\n      <template #content>\n        <el-mention-dropdown\n          ref=\"dropdownRef\"\n          :options=\"filteredOptions\"\n          :disabled=\"disabled\"\n          :loading=\"loading\"\n          :content-id=\"contentId\"\n          :aria-label=\"ariaLabel\"\n          @select=\"handleSelect\"\n          @click.stop=\"elInputRef?.focus()\"\n        >\n          <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n            <slot :name=\"name\" v-bind=\"slotProps\" />\n          </template>\n        </el-mention-dropdown>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, mergeProps, nextTick, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { useFocusController, useId, useNamespace } from '@element-plus/hooks'\nimport ElInput, {\n  inputProps,\n  inputPropsDefaults,\n} from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  EVENT_CODE,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { getEventCode, isFunction } from '@element-plus/utils'\nimport { mentionDefaultProps, mentionEmits } from './mention'\nimport { filterOption, getCursorPosition, getMentionCtx } from './helper'\nimport ElMentionDropdown from './mention-dropdown.vue'\n\nimport type { MentionProps } from './mention'\nimport type { Placement } from '@popperjs/core'\nimport type { CSSProperties } from 'vue'\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { MentionCtx, MentionOption } from './types'\n\ndefineOptions({\n  name: 'ElMention',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MentionProps>(), {\n  ...inputPropsDefaults,\n  options: () => [],\n  prefix: '@',\n  split: ' ',\n  filterOption: () => filterOption,\n  placement: 'bottom',\n  offset: 0,\n  popperOptions: () => ({}),\n  props: () => mentionDefaultProps,\n})\nconst emit = defineEmits(mentionEmits)\n\nconst passInputProps = computed(() => pick(props, Object.keys(inputProps)))\n\nconst ns = useNamespace('mention')\nconst disabled = useFormDisabled()\nconst contentId = useId()\n\nconst elInputRef = ref<InputInstance>()\nconst tooltipRef = ref<TooltipInstance>()\nconst dropdownRef = ref<InstanceType<typeof ElMentionDropdown>>()\n\nconst visible = ref(false)\nconst cursorStyle = ref<CSSProperties>()\nconst mentionCtx = ref<MentionCtx>()\n\nconst computedPlacement = computed<Placement>(() =>\n  props.showArrow ? props.placement : `${props.placement}-start`\n)\n\nconst computedFallbackPlacements = computed<Placement[]>(() =>\n  props.showArrow ? ['bottom', 'top'] : ['bottom-start', 'top-start']\n)\n\nconst aliasProps = computed(() => ({\n  ...mentionDefaultProps,\n  ...props.props,\n}))\n\nconst mapOption = (option: MentionOption) => {\n  const base = {\n    label: option[aliasProps.value.label],\n    value: option[aliasProps.value.value],\n    disabled: option[aliasProps.value.disabled],\n  }\n  return { ...option, ...base }\n}\n\nconst options = computed(() => props.options.map(mapOption))\n\nconst filteredOptions = computed(() => {\n  const { filterOption } = props\n  if (!mentionCtx.value || !filterOption) return options.value\n  return options.value.filter((option) =>\n    filterOption(mentionCtx.value!.pattern, option)\n  )\n})\n\nconst dropdownVisible = computed(() => {\n  return visible.value && (!!filteredOptions.value.length || props.loading)\n})\n\nconst hoveringId = computed(() => {\n  return `${contentId.value}-${dropdownRef.value?.hoveringIndex}`\n})\n\nconst handleInputChange = (value: string) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n  syncAfterCursorMove()\n}\n\nconst handleInputKeyDown = (event: KeyboardEvent | Event) => {\n  if (elInputRef.value?.isComposing) return\n  const code = getEventCode(event as KeyboardEvent)\n\n  switch (code) {\n    case EVENT_CODE.left:\n    case EVENT_CODE.right:\n      syncAfterCursorMove()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.down:\n      if (!visible.value) return\n      event.preventDefault()\n      dropdownRef.value?.navigateOptions(\n        code === EVENT_CODE.up ? 'prev' : 'next'\n      )\n      break\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      if (!visible.value) {\n        props.type !== 'textarea' && syncAfterCursorMove()\n        return\n      }\n      event.preventDefault()\n      if (dropdownRef.value?.hoverOption) {\n        dropdownRef.value?.selectHoverOption()\n      } else {\n        visible.value = false\n      }\n      break\n    case EVENT_CODE.esc:\n      if (!visible.value) return\n      event.preventDefault()\n      visible.value = false\n      break\n    case EVENT_CODE.backspace:\n      if (props.whole && mentionCtx.value) {\n        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =\n          mentionCtx.value\n        const inputEl = getInputEl()\n        if (!inputEl) return\n        const inputValue = inputEl.value\n        const matchOption = options.value.find((item) => item.value === pattern)\n        const isWhole = isFunction(props.checkIsWhole)\n          ? props.checkIsWhole(pattern, prefix)\n          : matchOption\n        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {\n          event.preventDefault()\n          const newValue =\n            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)\n          emit(UPDATE_MODEL_EVENT, newValue)\n          emit(INPUT_EVENT, newValue)\n          emit('whole-remove', pattern, prefix)\n\n          const newSelectionEnd = prefixIndex\n          nextTick(() => {\n            // input value is updated\n            inputEl.selectionStart = newSelectionEnd\n            inputEl.selectionEnd = newSelectionEnd\n            syncDropdownVisible()\n          })\n        }\n      }\n  }\n}\n\nconst { wrapperRef } = useFocusController(elInputRef, {\n  disabled,\n  afterFocus() {\n    syncAfterCursorMove()\n  },\n  beforeBlur(event) {\n    return tooltipRef.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    visible.value = false\n  },\n})\n\nconst handleInputMouseDown = () => {\n  syncAfterCursorMove()\n}\n\n// Ensure that the original option passed by users is returned\nconst getOriginalOption = (mentionOption: MentionOption) => {\n  return props.options.find((option: MentionOption) => {\n    return mentionOption.value === option[aliasProps.value.value]\n  })\n}\n\nconst handleSelect = (item: MentionOption) => {\n  if (!mentionCtx.value) return\n  const inputEl = getInputEl()\n  if (!inputEl) return\n  const inputValue = inputEl.value\n  const { split } = props\n\n  const newEndPart = inputValue.slice(mentionCtx.value.end)\n  const alreadySeparated = newEndPart.startsWith(split)\n  const newMiddlePart = `${item.value}${alreadySeparated ? '' : split}`\n\n  const newValue =\n    inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart\n\n  emit(UPDATE_MODEL_EVENT, newValue)\n  emit(INPUT_EVENT, newValue)\n  emit('select', getOriginalOption(item)!, mentionCtx.value.prefix)\n\n  const newSelectionEnd =\n    mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0)\n\n  nextTick(() => {\n    // input value is updated\n    inputEl.selectionStart = newSelectionEnd\n    inputEl.selectionEnd = newSelectionEnd\n    inputEl.focus()\n    syncDropdownVisible()\n  })\n}\n\nconst getInputEl = () =>\n  props.type === 'textarea'\n    ? elInputRef.value?.textarea\n    : elInputRef.value?.input\n\nconst syncAfterCursorMove = () => {\n  // can't use nextTick(), get cursor position will be wrong\n  setTimeout(() => {\n    syncCursor()\n    syncDropdownVisible()\n    nextTick(() => tooltipRef.value?.updatePopper())\n  }, 0)\n}\n\nconst syncCursor = () => {\n  const inputEl = getInputEl()\n  if (!inputEl) return\n\n  const caretPosition = getCursorPosition(inputEl)\n  const inputRect = inputEl.getBoundingClientRect()\n  const wrapperRect = wrapperRef.value!.getBoundingClientRect()\n\n  cursorStyle.value = {\n    position: 'absolute',\n    width: 0,\n    height: `${caretPosition.height}px`,\n    left: `${caretPosition.left + inputRect.left - wrapperRect.left}px`,\n    top: `${caretPosition.top + inputRect.top - wrapperRect.top}px`,\n  }\n}\n\nconst syncDropdownVisible = () => {\n  const inputEl = getInputEl()\n  if (document.activeElement !== inputEl) {\n    visible.value = false\n    return\n  }\n  const { prefix, split } = props\n  mentionCtx.value = getMentionCtx(inputEl, prefix, split)\n  if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {\n    visible.value = true\n    emit('search', mentionCtx.value.pattern, mentionCtx.value.prefix)\n    return\n  }\n  visible.value = false\n}\n\ndefineExpose({\n  input: elInputRef,\n  tooltip: tooltipRef,\n  dropdownVisible,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"mention2.js","names":[],"sources":["../../../../../../packages/components/mention/src/mention.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapperRef\" :class=\"ns.b()\">\n    <el-input\n      v-bind=\"mergeProps(passInputProps, $attrs)\"\n      ref=\"elInputRef\"\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :role=\"dropdownVisible ? 'combobox' : undefined\"\n      :aria-activedescendant=\"dropdownVisible ? hoveringId || '' : undefined\"\n      :aria-controls=\"dropdownVisible ? contentId : undefined\"\n      :aria-expanded=\"dropdownVisible || undefined\"\n      :aria-label=\"ariaLabel\"\n      :aria-autocomplete=\"dropdownVisible ? 'none' : undefined\"\n      :aria-haspopup=\"dropdownVisible ? 'listbox' : undefined\"\n      @input=\"handleInputChange\"\n      @keydown=\"handleInputKeyDown\"\n      @mousedown=\"handleInputMouseDown\"\n    >\n      <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n        <slot :name=\"name\" v-bind=\"slotProps\" />\n      </template>\n    </el-input>\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownVisible\"\n      :popper-class=\"[ns.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :popper-options=\"popperOptions\"\n      :placement=\"computedPlacement\"\n      :fallback-placements=\"computedFallbackPlacements\"\n      effect=\"light\"\n      pure\n      :offset=\"offset\"\n      :show-arrow=\"showArrow\"\n    >\n      <template #default>\n        <div :style=\"cursorStyle\" />\n      </template>\n      <template #content>\n        <el-mention-dropdown\n          ref=\"dropdownRef\"\n          :options=\"filteredOptions\"\n          :disabled=\"disabled\"\n          :loading=\"loading\"\n          :content-id=\"contentId\"\n          :aria-label=\"ariaLabel\"\n          @select=\"handleSelect\"\n          @click.stop=\"elInputRef?.focus()\"\n        >\n          <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n            <slot :name=\"name\" v-bind=\"slotProps\" />\n          </template>\n        </el-mention-dropdown>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends MentionOption = MentionOption\">\nimport { computed, mergeProps, nextTick, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { useFocusController, useId, useNamespace } from '@element-plus/hooks'\nimport ElInput, { inputPropsDefaults } from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  EVENT_CODE,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { getEventCode, isArray, isFunction } from '@element-plus/utils'\nimport { mentionDefaultProps, mentionEmits } from './mention'\nimport { filterOption, getCursorPosition, getMentionCtx } from './helper'\nimport ElMentionDropdown from './mention-dropdown.vue'\n\nimport type { MentionProps } from './mention'\nimport type { Placement } from '@popperjs/core'\nimport type { CSSProperties } from 'vue'\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { MentionCtx, MentionOption } from './types'\n\ndefineOptions({\n  name: 'ElMention',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MentionProps<T>>(), {\n  ...inputPropsDefaults,\n  options: () => [],\n  prefix: '@',\n  split: ' ',\n  filterOption: () => filterOption,\n  placement: 'bottom',\n  offset: 0,\n  popperOptions: () => ({}),\n  props: () => mentionDefaultProps,\n})\nconst emit = defineEmits(mentionEmits)\ndefineSlots<\n  InputInstance['$slots'] & {\n    header?: () => any\n    footer?: () => any\n    loading?: () => any\n    label?: (props: { item: T & MentionOption; index: number }) => any\n  }\n>()\n\nconst passInputProps = computed(() => {\n  const inputProps = ElInput.props ?? []\n  const keys = isArray(inputProps) ? inputProps : Object.keys(inputProps)\n  return pick(props, keys)\n})\n\nconst ns = useNamespace('mention')\nconst disabled = useFormDisabled()\nconst contentId = useId()\n\nconst elInputRef = ref<InputInstance>()\nconst tooltipRef = ref<TooltipInstance>()\nconst dropdownRef = ref<InstanceType<typeof ElMentionDropdown>>()\n\nconst visible = ref(false)\nconst cursorStyle = ref<CSSProperties>()\nconst mentionCtx = ref<MentionCtx>()\n\nconst computedPlacement = computed<Placement>(() =>\n  props.showArrow ? props.placement : `${props.placement}-start`\n)\n\nconst computedFallbackPlacements = computed<Placement[]>(() =>\n  props.showArrow ? ['bottom', 'top'] : ['bottom-start', 'top-start']\n)\n\nconst aliasProps = computed(() => ({\n  ...mentionDefaultProps,\n  ...props.props,\n}))\n\nconst mapOption = (option: T) => {\n  const base = {\n    label: option[aliasProps.value.label],\n    value: option[aliasProps.value.value],\n    disabled: option[aliasProps.value.disabled],\n  }\n  return { ...option, ...base }\n}\n\nconst options = computed(() => props.options.map(mapOption))\n\nconst filteredOptions = computed(() => {\n  const { filterOption } = props\n  if (!mentionCtx.value || !filterOption) return options.value\n  return options.value.filter((option) =>\n    filterOption(mentionCtx.value!.pattern, option)\n  )\n})\n\nconst dropdownVisible = computed(() => {\n  return visible.value && (!!filteredOptions.value.length || props.loading)\n})\n\nconst hoveringId = computed(() => {\n  return `${contentId.value}-${dropdownRef.value?.hoveringIndex}`\n})\n\nconst handleInputChange = (value: string) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n  syncAfterCursorMove()\n}\n\nconst handleInputKeyDown = (event: KeyboardEvent | Event) => {\n  if (elInputRef.value?.isComposing) return\n  const code = getEventCode(event as KeyboardEvent)\n\n  switch (code) {\n    case EVENT_CODE.left:\n    case EVENT_CODE.right:\n      syncAfterCursorMove()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.down:\n      if (!visible.value) return\n      event.preventDefault()\n      dropdownRef.value?.navigateOptions(\n        code === EVENT_CODE.up ? 'prev' : 'next'\n      )\n      break\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      if (!visible.value) {\n        props.type !== 'textarea' && syncAfterCursorMove()\n        return\n      }\n      event.preventDefault()\n      if (dropdownRef.value?.hoverOption) {\n        dropdownRef.value?.selectHoverOption()\n      } else {\n        visible.value = false\n      }\n      break\n    case EVENT_CODE.esc:\n      if (!visible.value) return\n      event.preventDefault()\n      visible.value = false\n      break\n    case EVENT_CODE.backspace:\n      if (props.whole && mentionCtx.value) {\n        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =\n          mentionCtx.value\n        const inputEl = getInputEl()\n        if (!inputEl) return\n        const inputValue = inputEl.value\n        const matchOption = options.value.find((item) => item.value === pattern)\n        const isWhole = isFunction(props.checkIsWhole)\n          ? props.checkIsWhole(pattern, prefix)\n          : matchOption\n        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {\n          event.preventDefault()\n          const newValue =\n            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)\n          emit(UPDATE_MODEL_EVENT, newValue)\n          emit(INPUT_EVENT, newValue)\n          emit('whole-remove', pattern, prefix)\n\n          const newSelectionEnd = prefixIndex\n          nextTick(() => {\n            // input value is updated\n            inputEl.selectionStart = newSelectionEnd\n            inputEl.selectionEnd = newSelectionEnd\n            syncDropdownVisible()\n          })\n        }\n      }\n  }\n}\n\nconst { wrapperRef } = useFocusController(elInputRef, {\n  disabled,\n  afterFocus() {\n    syncAfterCursorMove()\n  },\n  beforeBlur(event) {\n    return tooltipRef.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    visible.value = false\n  },\n})\n\nconst handleInputMouseDown = () => {\n  syncAfterCursorMove()\n}\n\n// Ensure that the original option passed by users is returned\nconst getOriginalOption = (mentionOption: MentionOption) => {\n  return props.options.find((option: MentionOption) => {\n    return mentionOption.value === option[aliasProps.value.value]\n  })\n}\n\nconst handleSelect = (item: MentionOption) => {\n  if (!mentionCtx.value) return\n  const inputEl = getInputEl()\n  if (!inputEl) return\n  const inputValue = inputEl.value\n  const { split } = props\n\n  const newEndPart = inputValue.slice(mentionCtx.value.end)\n  const alreadySeparated = newEndPart.startsWith(split)\n  const newMiddlePart = `${item.value}${alreadySeparated ? '' : split}`\n\n  const newValue =\n    inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart\n\n  emit(UPDATE_MODEL_EVENT, newValue)\n  emit(INPUT_EVENT, newValue)\n  emit('select', getOriginalOption(item)!, mentionCtx.value.prefix)\n\n  const newSelectionEnd =\n    mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0)\n\n  nextTick(() => {\n    // input value is updated\n    inputEl.selectionStart = newSelectionEnd\n    inputEl.selectionEnd = newSelectionEnd\n    inputEl.focus()\n    syncDropdownVisible()\n  })\n}\n\nconst getInputEl = () =>\n  props.type === 'textarea'\n    ? elInputRef.value?.textarea\n    : elInputRef.value?.input\n\nconst syncAfterCursorMove = () => {\n  // can't use nextTick(), get cursor position will be wrong\n  setTimeout(() => {\n    syncCursor()\n    syncDropdownVisible()\n    nextTick(() => tooltipRef.value?.updatePopper())\n  }, 0)\n}\n\nconst syncCursor = () => {\n  const inputEl = getInputEl()\n  if (!inputEl) return\n\n  const caretPosition = getCursorPosition(inputEl)\n  const inputRect = inputEl.getBoundingClientRect()\n  const wrapperRect = wrapperRef.value!.getBoundingClientRect()\n\n  cursorStyle.value = {\n    position: 'absolute',\n    width: 0,\n    height: `${caretPosition.height}px`,\n    left: `${caretPosition.left + inputRect.left - wrapperRect.left}px`,\n    top: `${caretPosition.top + inputRect.top - wrapperRect.top}px`,\n  }\n}\n\nconst syncDropdownVisible = () => {\n  const inputEl = getInputEl()\n  if (document.activeElement !== inputEl) {\n    visible.value = false\n    return\n  }\n  const { prefix, split } = props\n  mentionCtx.value = getMentionCtx(inputEl, prefix, split)\n  if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {\n    visible.value = true\n    emit('search', mentionCtx.value.pattern, mentionCtx.value.prefix)\n    return\n  }\n  visible.value = false\n}\n\ndefineExpose({\n  input: elInputRef,\n  tooltip: tooltipRef,\n  dropdownVisible,\n})\n</script>\n"],"mappings":""}

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

@@ -109,9 +109,9 @@ declare const _default: vue.DefineComponent<ExtractPropTypes<{
   onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
   onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
 }>, {
-  readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly collapse: boolean;
   readonly ellipsis: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly mode: EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
   readonly showTimeout: number;
   readonly hideTimeout: number;

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

@@ -5,9 +5,9 @@ const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
 const require_icon = require('../../../utils/vue/icon.js');
 const require_vnode = require('../../../utils/vue/vnode.js');
 const require_typescript = require('../../../utils/typescript.js');
-const require_index = require('../../../hooks/use-namespace/index.js');
-const require_index$1 = require('../../icon/index.js');
-const require_index$2 = require('../../../directives/click-outside/index.js');
+const require_index = require('../../../directives/click-outside/index.js');
+const require_index$1 = require('../../../hooks/use-namespace/index.js');
+const require_index$2 = require('../../icon/index.js');
 const require_menu_bar = require('./utils/menu-bar.js');
 const require_menu_collapse_transition = require('./menu-collapse-transition.js');
 const require_use_menu_css_var = require('./use-menu-css-var.js');
@@ -97,8 +97,8 @@ var menu_default = (0, vue.defineComponent)({
 		const router = instance.appContext.config.globalProperties.$router;
 		const menu = (0, vue.ref)();
 		const subMenu = (0, vue.ref)();
-		const nsMenu = require_index.useNamespace("menu");
-		const nsSubMenu = require_index.useNamespace("sub-menu");
+		const nsMenu = require_index$1.useNamespace("menu");
+		const nsSubMenu = require_index$1.useNamespace("sub-menu");
 		let moreItemWidth = DEFAULT_MORE_ITEM_WIDTH;
 		const sliceIndex = (0, vue.ref)(-1);
 		const openedMenus = (0, vue.ref)(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
@@ -286,12 +286,12 @@ var menu_default = (0, vue.defineComponent)({
 						class: nsSubMenu.e("hide-arrow"),
 						popperOffset: props.popperOffset
 					}, {
-						title: () => (0, vue.h)(require_index$1.ElIcon, { class: nsSubMenu.e("icon-more") }, { default: () => (0, vue.h)(props.ellipsisIcon) }),
+						title: () => (0, vue.h)(require_index$2.ElIcon, { class: nsSubMenu.e("icon-more") }, { default: () => (0, vue.h)(props.ellipsisIcon) }),
 						default: () => slotMore
 					}));
 				}
 			}
-			const directives = props.closeOnClickOutside ? [[require_index$2.default, () => {
+			const directives = props.closeOnClickOutside ? [[require_index.default, () => {
 				if (!openedMenus.value.length) return;
 				if (!mouseInChild.value) {
 					openedMenus.value.forEach((openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu)));

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["buildProps","definePropType","mutable","iconPropType","More","isUndefined","useNamespace","MENU_INJECTION_KEY","SUB_MENU_INJECTION_KEY","Menubar","useMenuCssVar","flattedChildren","ElSubMenu","ElIcon","vClickoutside","ElMenuCollapseTransition"],"sources":["../../../../../../packages/components/menu/src/menu.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n  watchEffect,\n  withDirectives,\n} from 'vue'\nimport { unrefElement, useResizeObserver } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport ElIcon from '@element-plus/components/icon'\nimport { More } from '@element-plus/icons-vue'\nimport {\n  buildProps,\n  definePropType,\n  flattedChildren,\n  iconPropType,\n  isArray,\n  isObject,\n  isString,\n  isUndefined,\n  mutable,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ClickOutside as vClickoutside } from '@element-plus/directives'\nimport Menubar from './utils/menu-bar'\nimport ElMenuCollapseTransition from './menu-collapse-transition.vue'\nimport ElSubMenu from './sub-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { PopperEffect } from '@element-plus/components/popper'\nimport type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'\nimport type { NavigationFailure, Router } from 'vue-router'\nimport type {\n  CSSProperties,\n  Component,\n  DirectiveArguments,\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  VNode,\n  VNodeArrayChildren,\n} from 'vue'\nimport type { UseResizeObserverReturn } from '@vueuse/core'\n\nexport const menuProps = buildProps({\n  /**\n   * @description menu display mode\n   */\n  mode: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'vertical',\n  },\n  /**\n   * @description index of active menu on page load\n   */\n  defaultActive: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description array that contains indexes of currently active sub-menus\n   */\n  defaultOpeneds: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description whether only one sub-menu can be active\n   */\n  uniqueOpened: Boolean,\n  /**\n   * @description whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load.\n   */\n  router: Boolean,\n  /**\n   * @description how sub-menus are triggered, only works when `mode` is 'horizontal'\n   */\n  menuTrigger: {\n    type: String,\n    values: ['hover', 'click'],\n    default: 'hover',\n  },\n  /**\n   * @description whether the menu is collapsed (available only in vertical mode)\n   */\n  collapse: Boolean,\n  /**\n   * @description background color of Menu (hex format) (deprecated, use `--bg-color` instead)\n   * @deprecated use `--bg-color` instead\n   */\n  backgroundColor: String,\n  /**\n   * @description text color of Menu (hex format) (deprecated, use `--text-color` instead)\n   * @deprecated use `--text-color` instead\n   */\n  textColor: String,\n  /**\n   * @description text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)\n   * @deprecated use `--active-color` instead\n   */\n  activeTextColor: String,\n  /**\n   * @description optional, whether menu is collapsed when clicking outside\n   */\n  closeOnClickOutside: Boolean,\n  /**\n   * @description whether to enable the collapse transition\n   */\n  collapseTransition: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the menu is ellipsis (available only in horizontal mode)\n   */\n  ellipsis: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description offset of the popper (effective for all submenus)\n   */\n  popperOffset: {\n    type: Number,\n    default: 6,\n  },\n  /**\n   * @description custom ellipsis icon (available only in horizontal mode and ellipsis is true)\n   */\n  ellipsisIcon: {\n    type: iconPropType,\n    default: () => More,\n  },\n  /**\n   * @description Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed\n   */\n  popperEffect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'dark',\n  },\n  /**\n   * @description custom class name for all popup menus\n   */\n  popperClass: String,\n  /**\n   * @description custom style for all popup menus\n   */\n  popperStyle: {\n    type: definePropType<string | CSSProperties>([String, Object]),\n  },\n  /**\n   * @description control timeout for all menus before showing\n   */\n  showTimeout: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description control timeout for all menus before hiding\n   */\n  hideTimeout: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description when menu inactive and `persistent` is `false` , dropdown menu will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type MenuProps = ExtractPropTypes<typeof menuProps>\nexport type MenuPropsPublic = ExtractPublicPropTypes<typeof menuProps>\n\nconst checkIndexPath = (indexPath: unknown): indexPath is string[] =>\n  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    (isUndefined(routerResult) || routerResult instanceof Promise),\n}\nexport type MenuEmits = typeof menuEmits\n\nconst DEFAULT_MORE_ITEM_WIDTH = 64\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    const subMenu = ref<HTMLElement>()\n    const nsMenu = useNamespace('menu')\n    const nsSubMenu = useNamespace('sub-menu')\n    let moreItemWidth = DEFAULT_MORE_ITEM_WIDTH\n\n    // data\n    const sliceIndex = ref(-1)\n\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    // computed\n    const isMenuPopup = computed<MenuProvider['isMenuPopup']>(\n      () =>\n        props.mode === 'horizontal' ||\n        (props.mode === 'vertical' && props.collapse)\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 close = (index: string) => {\n      const i = openedMenus.value.indexOf(index)\n      if (i !== -1) {\n        openedMenus.value.splice(i, 1)\n      }\n    }\n\n    const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {\n      close(index)\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      isOpened ? closeMenu(index, indexPath) : openMenu(index, indexPath)\n    }\n\n    const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (\n      menuItem\n    ) => {\n      if (props.mode === 'horizontal' || props.collapse) {\n        openedMenus.value = []\n      }\n      const { index, indexPath } = menuItem\n      if (isNil(index) || isNil(indexPath)) 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      activeIndex.value = item?.index ?? val\n    }\n\n    const calcMenuItemWidth = (menuItem: HTMLElement) => {\n      const computedStyle = getComputedStyle(menuItem)\n      const marginLeft = Number.parseInt(computedStyle.marginLeft, 10)\n      const marginRight = Number.parseInt(computedStyle.marginRight, 10)\n      return menuItem.offsetWidth + marginLeft + marginRight || 0\n    }\n\n    const calcSliceIndex = () => {\n      if (!menu.value) return -1\n\n      const items = Array.from(menu.value.childNodes).filter(\n        (item) =>\n          item.nodeName !== '#comment' &&\n          (item.nodeName !== '#text' || item.nodeValue)\n      ) as HTMLElement[]\n\n      const computedMenuStyle = getComputedStyle(menu.value)\n      const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10)\n      const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10)\n      const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight\n\n      let calcWidth = 0\n      let sliceIndex = 0\n      items.forEach((item, index) => {\n        calcWidth += calcMenuItemWidth(item)\n        if (calcWidth <= menuWidth - moreItemWidth) {\n          sliceIndex = index + 1\n        }\n      })\n      return sliceIndex === items.length ? -1 : sliceIndex\n    }\n\n    const getIndexPath = (index: string) => subMenus.value[index].indexPath\n\n    // Common computer monitor FPS is 60Hz, which means 60 redraws per second. Calculation formula: 1000ms/60 ≈ 16.67ms, In order to avoid a certain chance of repeated triggering when `resize`, set wait to 16.67 * 2 = 33.34\n    const debounce = (fn: () => void, wait = 33.34) => {\n      let timer: ReturnType<typeof setTimeout> | null\n      return () => {\n        timer && clearTimeout(timer)\n        timer = setTimeout(() => {\n          fn()\n        }, wait)\n      }\n    }\n\n    let isFirstTimeRender = true\n    const handleResize = () => {\n      const el = unrefElement(subMenu)\n      if (el) moreItemWidth = calcMenuItemWidth(el) || DEFAULT_MORE_ITEM_WIDTH\n      if (sliceIndex.value === calcSliceIndex()) return\n      const callback = () => {\n        sliceIndex.value = -1\n        nextTick(() => {\n          sliceIndex.value = calcSliceIndex()\n        })\n      }\n      // execute callback directly when first time resize to avoid shaking\n      isFirstTimeRender ? callback() : debounce(callback)()\n      isFirstTimeRender = false\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(\n      () => props.collapse,\n      (value) => {\n        if (value) openedMenus.value = []\n      }\n    )\n\n    watch(items.value, initMenu)\n\n    let resizeStopper: UseResizeObserverReturn['stop']\n    watchEffect(() => {\n      if (props.mode === 'horizontal' && props.ellipsis)\n        resizeStopper = useResizeObserver(menu, handleResize).stop\n      else resizeStopper?.()\n    })\n\n    const mouseInChild = ref(false)\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\n      provide<MenuProvider>(\n        MENU_INJECTION_KEY,\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\n      provide<SubMenuProvider>(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        mouseInChild,\n        level: 0,\n      })\n    }\n\n    // lifecycle\n    onMounted(() => {\n      if (props.mode === 'horizontal') {\n        new Menubar(instance.vnode.el!, nsMenu.namespace.value)\n      }\n    })\n\n    {\n      const open = (index: string) => {\n        const { indexPath } = subMenus.value[index]\n        indexPath.forEach((i) => openMenu(i, indexPath))\n      }\n\n      expose({\n        open,\n        close,\n        updateActiveIndex,\n        handleResize,\n      })\n    }\n\n    const ulStyle = useMenuCssVar(props, 0)\n\n    return () => {\n      let slot: VNodeArrayChildren = slots.default?.() ?? []\n      const vShowMore: VNode[] = []\n\n      if (props.mode === 'horizontal' && menu.value) {\n        const originalSlot = (\n          flattedChildren(slot) as VNodeArrayChildren\n        ).filter((vnode) => {\n          // Filter text and comment nodes (https://github.com/vuejs/core/blob/c875019d49b4c36a88d929ccadc31ad414747c7b/packages/shared/src/shapeFlags.ts#L5)\n          return (vnode as VNode)?.shapeFlag !== 8\n        })\n        const slotDefault =\n          sliceIndex.value === -1\n            ? originalSlot\n            : originalSlot.slice(0, sliceIndex.value)\n\n        const slotMore =\n          sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value)\n\n        if (slotMore?.length && props.ellipsis) {\n          slot = slotDefault\n          vShowMore.push(\n            h(\n              ElSubMenu,\n              {\n                ref: subMenu,\n                index: 'sub-menu-more',\n                class: nsSubMenu.e('hide-arrow'),\n                popperOffset: props.popperOffset,\n              },\n              {\n                title: () =>\n                  h(\n                    ElIcon,\n                    {\n                      class: nsSubMenu.e('icon-more'),\n                    },\n                    {\n                      default: () => h(props.ellipsisIcon as Component),\n                    }\n                  ),\n                default: () => slotMore,\n              }\n            )\n          )\n        }\n      }\n\n      const directives: DirectiveArguments = props.closeOnClickOutside\n        ? [\n            [\n              vClickoutside,\n              () => {\n                if (!openedMenus.value.length) return\n\n                if (!mouseInChild.value) {\n                  openedMenus.value.forEach((openedMenu) =>\n                    emit('close', openedMenu, getIndexPath(openedMenu))\n                  )\n\n                  openedMenus.value = []\n                }\n              },\n            ],\n          ]\n        : []\n\n      const vMenu = withDirectives(\n        h(\n          'ul',\n          {\n            key: String(props.collapse),\n            role: 'menubar',\n            ref: menu,\n            style: ulStyle.value,\n            class: {\n              [nsMenu.b()]: true,\n              [nsMenu.m(props.mode)]: true,\n              [nsMenu.m('collapse')]: props.collapse,\n            },\n          },\n          [...slot, ...vShowMore]\n        ),\n        directives\n      )\n\n      if (props.collapseTransition && props.mode === 'vertical') {\n        return h(ElMenuCollapseTransition, () => vMenu)\n      }\n\n      return vMenu\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,YAAYA,6BAAW;CAIlC,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,cAAc,WAAW;EAClC,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,gBAAgB;EACd,MAAMC,iCAAyB,MAAM;EACrC,eAAeC,2BAAQ,EAAE,CAAU;EACpC;CAID,cAAc;CAId,QAAQ;CAIR,aAAa;EACX,MAAM;EACN,QAAQ,CAAC,SAAS,QAAQ;EAC1B,SAAS;EACV;CAID,UAAU;CAKV,iBAAiB;CAKjB,WAAW;CAKX,iBAAiB;CAIjB,qBAAqB;CAIrB,oBAAoB;EAClB,MAAM;EACN,SAAS;EACV;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CAID,cAAc;EACZ,MAAMC;EACN,eAAeC;EAChB;CAID,cAAc;EACZ,MAAMH,iCAA6B,OAAO;EAC1C,SAAS;EACV;CAID,aAAa;CAIb,aAAa,EACX,MAAMA,iCAAuC,CAAC,QAAQ,OAAO,CAAC,EAC/D;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAIX,MAAM,kBAAkB,uCACd,UAAU,IAAI,UAAU,OAAO,mCAAkB,KAAK,CAAC;AAEjE,MAAa,YAAY;CACvB,QAAQ,OAAe,wCACZ,MAAM,IAAI,eAAe,UAAU;CAE9C,OAAO,OAAe,wCACX,MAAM,IAAI,eAAe,UAAU;CAE9C,SACE,OACA,WACA,MACA,2CAES,MAAM,IACf,eAAe,UAAU,8BAChB,KAAK,KACbI,0BAAY,aAAa,IAAI,wBAAwB;CACzD;AAGD,MAAM,0BAA0B;AAEhC,4CAA+B;CAC7B,MAAM;CAEN,OAAO;CACP,OAAO;CAEP,MAAM,OAAO,EAAE,MAAM,OAAO,UAAU;EACpC,MAAM,wCAA+B;EACrC,MAAM,SAAS,SAAS,WAAW,OAAO,iBAAiB;EAC3D,MAAM,qBAA8B;EACpC,MAAM,wBAA4B;EAClC,MAAM,SAASC,2BAAa,OAAO;EACnC,MAAM,YAAYA,2BAAa,WAAW;EAC1C,IAAI,gBAAgB;EAGpB,MAAM,0BAAiB,GAAG;EAE1B,MAAM,2BACJ,MAAM,kBAAkB,CAAC,MAAM,WAC3B,MAAM,eAAe,MAAM,EAAE,GAC7B,EAAE,CACP;EACD,MAAM,2BAA+C,MAAM,cAAc;EACzE,MAAM,qBAAmC,EAAE,CAAC;EAC5C,MAAM,wBAAyC,EAAE,CAAC;EAGlD,MAAM,sCAEF,MAAM,SAAS,gBACd,MAAM,SAAS,cAAc,MAAM,SACvC;EAGD,MAAM,iBAAiB;GACrB,MAAM,aAAa,YAAY,SAAS,MAAM,MAAM,YAAY;AAChE,OAAI,CAAC,cAAc,MAAM,SAAS,gBAAgB,MAAM,SAAU;AAMlE,GAJkB,WAAW,UAInB,SAAS,UAAU;IAC3B,MAAM,UAAU,SAAS,MAAM;AAC/B,eAAW,SAAS,OAAO,QAAQ,UAAU;KAC7C;;EAGJ,MAAM,YAAsC,OAAO,cAAc;AAC/D,OAAI,YAAY,MAAM,SAAS,MAAM,CAAE;AAGvC,OAAI,MAAM,aACR,aAAY,QAAQ,YAAY,MAAM,QAAQ,UAC5C,UAAU,SAAS,MAAM,CAC1B;AAEH,eAAY,MAAM,KAAK,MAAM;AAC7B,QAAK,QAAQ,OAAO,UAAU;;EAGhC,MAAM,SAAS,UAAkB;GAC/B,MAAM,IAAI,YAAY,MAAM,QAAQ,MAAM;AAC1C,OAAI,MAAM,GACR,aAAY,MAAM,OAAO,GAAG,EAAE;;EAIlC,MAAM,aAAwC,OAAO,cAAc;AACjE,SAAM,MAAM;AACZ,QAAK,SAAS,OAAO,UAAU;;EAGjC,MAAM,sBAA0D,EAC9D,OACA,gBACI;AAGJ,GAFiB,YAAY,MAAM,SAAS,MAAM,GAEvC,UAAU,OAAO,UAAU,GAAG,SAAS,OAAO,UAAU;;EAGrE,MAAM,uBACJ,aACG;AACH,OAAI,MAAM,SAAS,gBAAgB,MAAM,SACvC,aAAY,QAAQ,EAAE;GAExB,MAAM,EAAE,OAAO,cAAc;AAC7B,iCAAU,MAAM,8BAAU,UAAU,CAAE;AAEtC,OAAI,MAAM,UAAU,QAAQ;IAC1B,MAAM,QAAQ,SAAS,SAAS;IAChC,MAAM,eAAe,OAAO,KAAK,MAAM,CAAC,MAAM,QAAQ;AACpD,SAAI,CAAC,IAAK,aAAY,QAAQ;AAC9B,YAAO;MACP;AACF,SACE,UACA,OACA,WACA;KAAE;KAAO;KAAW;KAAO,EAC3B,aACD;UACI;AACL,gBAAY,QAAQ;AACpB,SAAK,UAAU,OAAO,WAAW;KAAE;KAAO;KAAW,CAAC;;;EAI1D,MAAM,qBAAqB,QAAgB;GACzC,MAAM,cAAc,MAAM;AAM1B,eAAY,SAJV,YAAY,QACX,YAAY,SAAS,YAAY,YAAY,UAC9C,YAAY,MAAM,iBAEM,SAAS;;EAGrC,MAAM,qBAAqB,aAA0B;GACnD,MAAM,gBAAgB,iBAAiB,SAAS;GAChD,MAAM,aAAa,OAAO,SAAS,cAAc,YAAY,GAAG;GAChE,MAAM,cAAc,OAAO,SAAS,cAAc,aAAa,GAAG;AAClE,UAAO,SAAS,cAAc,aAAa,eAAe;;EAG5D,MAAM,uBAAuB;AAC3B,OAAI,CAAC,KAAK,MAAO,QAAO;GAExB,MAAM,QAAQ,MAAM,KAAK,KAAK,MAAM,WAAW,CAAC,QAC7C,SACC,KAAK,aAAa,eACjB,KAAK,aAAa,WAAW,KAAK,WACtC;GAED,MAAM,oBAAoB,iBAAiB,KAAK,MAAM;GACtD,MAAM,cAAc,OAAO,SAAS,kBAAkB,aAAa,GAAG;GACtE,MAAM,eAAe,OAAO,SAAS,kBAAkB,cAAc,GAAG;GACxE,MAAM,YAAY,KAAK,MAAM,cAAc,cAAc;GAEzD,IAAI,YAAY;GAChB,IAAI,aAAa;AACjB,SAAM,SAAS,MAAM,UAAU;AAC7B,iBAAa,kBAAkB,KAAK;AACpC,QAAI,aAAa,YAAY,cAC3B,cAAa,QAAQ;KAEvB;AACF,UAAO,eAAe,MAAM,SAAS,KAAK;;EAG5C,MAAM,gBAAgB,UAAkB,SAAS,MAAM,OAAO;EAG9D,MAAM,YAAY,IAAgB,OAAO,UAAU;GACjD,IAAI;AACJ,gBAAa;AACX,aAAS,aAAa,MAAM;AAC5B,YAAQ,iBAAiB;AACvB,SAAI;OACH,KAAK;;;EAIZ,IAAI,oBAAoB;EACxB,MAAM,qBAAqB;GACzB,MAAM,oCAAkB,QAAQ;AAChC,OAAI,GAAI,iBAAgB,kBAAkB,GAAG,IAAI;AACjD,OAAI,WAAW,UAAU,gBAAgB,CAAE;GAC3C,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,4BAAe;AACb,gBAAW,QAAQ,gBAAgB;MACnC;;AAGJ,uBAAoB,UAAU,GAAG,SAAS,SAAS,EAAE;AACrD,uBAAoB;;AAGtB,uBACQ,MAAM,gBACX,kBAAkB;AACjB,OAAI,CAAC,MAAM,MAAM,eACf,aAAY,QAAQ;AAEtB,qBAAkB,cAAc;IAEnC;AAED,uBACQ,MAAM,WACX,UAAU;AACT,OAAI,MAAO,aAAY,QAAQ,EAAE;IAEpC;AAED,iBAAM,MAAM,OAAO,SAAS;EAE5B,IAAI;AACJ,6BAAkB;AAChB,OAAI,MAAM,SAAS,gBAAgB,MAAM,SACvC,qDAAkC,MAAM,aAAa,CAAC;OACnD,kBAAiB;IACtB;EAEF,MAAM,4BAAmB,MAAM;EAG/B;GACE,MAAM,cAA0C,SAAS;AACvD,aAAS,MAAM,KAAK,SAAS;;GAG/B,MAAM,iBAAgD,SAAS;AAC7D,WAAO,SAAS,MAAM,KAAK;;GAG7B,MAAM,eAA4C,SAAS;AACzD,UAAM,MAAM,KAAK,SAAS;;GAG5B,MAAM,kBAAkD,SAAS;AAC/D,WAAO,MAAM,MAAM,KAAK;;AAG1B,oBACEC,qDACS;IACP;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CAAC,CACH;AAED,oBAAyB,GAAGC,wCAAyB,SAAS,OAAO;IACnE;IACA;IACA;IACA,OAAO;IACR,CAAC;;AAIJ,2BAAgB;AACd,OAAI,MAAM,SAAS,aACjB,KAAIC,yBAAQ,SAAS,MAAM,IAAK,OAAO,UAAU,MAAM;IAEzD;EAEF;GACE,MAAM,QAAQ,UAAkB;IAC9B,MAAM,EAAE,cAAc,SAAS,MAAM;AACrC,cAAU,SAAS,MAAM,SAAS,GAAG,UAAU,CAAC;;AAGlD,UAAO;IACL;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,UAAUC,uCAAc,OAAO,EAAE;AAEvC,eAAa;GACX,IAAI,OAA2B,MAAM,WAAW,IAAI,EAAE;GACtD,MAAM,YAAqB,EAAE;AAE7B,OAAI,MAAM,SAAS,gBAAgB,KAAK,OAAO;IAC7C,MAAM,eACJC,8BAAgB,KAAK,CACrB,QAAQ,UAAU;AAElB,YAAQ,OAAiB,cAAc;MACvC;IACF,MAAM,cACJ,WAAW,UAAU,KACjB,eACA,aAAa,MAAM,GAAG,WAAW,MAAM;IAE7C,MAAM,WACJ,WAAW,UAAU,KAAK,EAAE,GAAG,aAAa,MAAM,WAAW,MAAM;AAErE,QAAI,UAAU,UAAU,MAAM,UAAU;AACtC,YAAO;AACP,eAAU,gBAENC,0BACA;MACE,KAAK;MACL,OAAO;MACP,OAAO,UAAU,EAAE,aAAa;MAChC,cAAc,MAAM;MACrB,EACD;MACE,wBAEIC,wBACA,EACE,OAAO,UAAU,EAAE,YAAY,EAChC,EACD,EACE,0BAAiB,MAAM,aAA0B,EAClD,CACF;MACH,eAAe;MAChB,CACF,CACF;;;GAIL,MAAM,aAAiC,MAAM,sBACzC,CACE,CACEC,+BACM;AACJ,QAAI,CAAC,YAAY,MAAM,OAAQ;AAE/B,QAAI,CAAC,aAAa,OAAO;AACvB,iBAAY,MAAM,SAAS,eACzB,KAAK,SAAS,YAAY,aAAa,WAAW,CAAC,CACpD;AAED,iBAAY,QAAQ,EAAE;;KAG3B,CACF,GACD,EAAE;GAEN,MAAM,2CAEF,MACA;IACE,KAAK,OAAO,MAAM,SAAS;IAC3B,MAAM;IACN,KAAK;IACL,OAAO,QAAQ;IACf,OAAO;MACJ,OAAO,GAAG,GAAG;MACb,OAAO,EAAE,MAAM,KAAK,GAAG;MACvB,OAAO,EAAE,WAAW,GAAG,MAAM;KAC/B;IACF,EACD,CAAC,GAAG,MAAM,GAAG,UAAU,CACxB,EACD,WACD;AAED,OAAI,MAAM,sBAAsB,MAAM,SAAS,WAC7C,mBAASC,gDAAgC,MAAM;AAGjD,UAAO;;;CAGZ,CAAC"}
+{"version":3,"file":"menu.js","names":["buildProps","definePropType","mutable","iconPropType","More","isUndefined","useNamespace","MENU_INJECTION_KEY","SUB_MENU_INJECTION_KEY","Menubar","useMenuCssVar","flattedChildren","ElSubMenu","ElIcon","vClickoutside","ElMenuCollapseTransition"],"sources":["../../../../../../packages/components/menu/src/menu.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  h,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n  watchEffect,\n  withDirectives,\n} from 'vue'\nimport { unrefElement, useResizeObserver } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport ElIcon from '@element-plus/components/icon'\nimport { More } from '@element-plus/icons-vue'\nimport {\n  buildProps,\n  definePropType,\n  flattedChildren,\n  iconPropType,\n  isArray,\n  isObject,\n  isString,\n  isUndefined,\n  mutable,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ClickOutside as vClickoutside } from '@element-plus/directives'\nimport Menubar from './utils/menu-bar'\nimport ElMenuCollapseTransition from './menu-collapse-transition.vue'\nimport ElSubMenu from './sub-menu'\nimport { useMenuCssVar } from './use-menu-css-var'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { PopperEffect } from '@element-plus/components/popper'\nimport type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'\nimport type { NavigationFailure, Router } from 'vue-router'\nimport type {\n  CSSProperties,\n  Component,\n  DirectiveArguments,\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  VNode,\n  VNodeArrayChildren,\n} from 'vue'\nimport type { UseResizeObserverReturn } from '@vueuse/core'\n\nexport const menuProps = buildProps({\n  /**\n   * @description menu display mode\n   */\n  mode: {\n    type: String,\n    values: ['horizontal', 'vertical'],\n    default: 'vertical',\n  },\n  /**\n   * @description index of active menu on page load\n   */\n  defaultActive: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description array that contains indexes of currently active sub-menus\n   */\n  defaultOpeneds: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description whether only one sub-menu can be active\n   */\n  uniqueOpened: Boolean,\n  /**\n   * @description whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load.\n   */\n  router: Boolean,\n  /**\n   * @description how sub-menus are triggered, only works when `mode` is 'horizontal'\n   */\n  menuTrigger: {\n    type: String,\n    values: ['hover', 'click'],\n    default: 'hover',\n  },\n  /**\n   * @description whether the menu is collapsed (available only in vertical mode)\n   */\n  collapse: Boolean,\n  /**\n   * @description background color of Menu (hex format) (deprecated, use `--bg-color` instead)\n   * @deprecated use `--bg-color` instead\n   */\n  backgroundColor: String,\n  /**\n   * @description text color of Menu (hex format) (deprecated, use `--text-color` instead)\n   * @deprecated use `--text-color` instead\n   */\n  textColor: String,\n  /**\n   * @description text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)\n   * @deprecated use `--active-color` instead\n   */\n  activeTextColor: String,\n  /**\n   * @description optional, whether menu is collapsed when clicking outside\n   */\n  closeOnClickOutside: Boolean,\n  /**\n   * @description whether to enable the collapse transition\n   */\n  collapseTransition: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the menu is ellipsis (available only in horizontal mode)\n   */\n  ellipsis: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description offset of the popper (effective for all submenus)\n   */\n  popperOffset: {\n    type: Number,\n    default: 6,\n  },\n  /**\n   * @description custom ellipsis icon (available only in horizontal mode and ellipsis is true)\n   */\n  ellipsisIcon: {\n    type: iconPropType,\n    default: () => More,\n  },\n  /**\n   * @description Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed\n   */\n  popperEffect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'dark',\n  },\n  /**\n   * @description custom class name for all popup menus\n   */\n  popperClass: String,\n  /**\n   * @description custom style for all popup menus\n   */\n  popperStyle: {\n    type: definePropType<string | CSSProperties>([String, Object]),\n  },\n  /**\n   * @description control timeout for all menus before showing\n   */\n  showTimeout: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description control timeout for all menus before hiding\n   */\n  hideTimeout: {\n    type: Number,\n    default: 300,\n  },\n  /**\n   * @description when menu inactive and `persistent` is `false` , dropdown menu will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type MenuProps = ExtractPropTypes<typeof menuProps>\nexport type MenuPropsPublic = ExtractPublicPropTypes<typeof menuProps>\n\nconst checkIndexPath = (indexPath: unknown): indexPath is string[] =>\n  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    (isUndefined(routerResult) || routerResult instanceof Promise),\n}\nexport type MenuEmits = typeof menuEmits\n\nconst DEFAULT_MORE_ITEM_WIDTH = 64\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    const subMenu = ref<HTMLElement>()\n    const nsMenu = useNamespace('menu')\n    const nsSubMenu = useNamespace('sub-menu')\n    let moreItemWidth = DEFAULT_MORE_ITEM_WIDTH\n\n    // data\n    const sliceIndex = ref(-1)\n\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    // computed\n    const isMenuPopup = computed<MenuProvider['isMenuPopup']>(\n      () =>\n        props.mode === 'horizontal' ||\n        (props.mode === 'vertical' && props.collapse)\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 close = (index: string) => {\n      const i = openedMenus.value.indexOf(index)\n      if (i !== -1) {\n        openedMenus.value.splice(i, 1)\n      }\n    }\n\n    const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {\n      close(index)\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      isOpened ? closeMenu(index, indexPath) : openMenu(index, indexPath)\n    }\n\n    const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (\n      menuItem\n    ) => {\n      if (props.mode === 'horizontal' || props.collapse) {\n        openedMenus.value = []\n      }\n      const { index, indexPath } = menuItem\n      if (isNil(index) || isNil(indexPath)) 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      activeIndex.value = item?.index ?? val\n    }\n\n    const calcMenuItemWidth = (menuItem: HTMLElement) => {\n      const computedStyle = getComputedStyle(menuItem)\n      const marginLeft = Number.parseInt(computedStyle.marginLeft, 10)\n      const marginRight = Number.parseInt(computedStyle.marginRight, 10)\n      return menuItem.offsetWidth + marginLeft + marginRight || 0\n    }\n\n    const calcSliceIndex = () => {\n      if (!menu.value) return -1\n\n      const items = Array.from(menu.value.childNodes).filter(\n        (item) =>\n          item.nodeName !== '#comment' &&\n          (item.nodeName !== '#text' || item.nodeValue)\n      ) as HTMLElement[]\n\n      const computedMenuStyle = getComputedStyle(menu.value)\n      const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10)\n      const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10)\n      const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight\n\n      let calcWidth = 0\n      let sliceIndex = 0\n      items.forEach((item, index) => {\n        calcWidth += calcMenuItemWidth(item)\n        if (calcWidth <= menuWidth - moreItemWidth) {\n          sliceIndex = index + 1\n        }\n      })\n      return sliceIndex === items.length ? -1 : sliceIndex\n    }\n\n    const getIndexPath = (index: string) => subMenus.value[index].indexPath\n\n    // Common computer monitor FPS is 60Hz, which means 60 redraws per second. Calculation formula: 1000ms/60 ≈ 16.67ms, In order to avoid a certain chance of repeated triggering when `resize`, set wait to 16.67 * 2 = 33.34\n    const debounce = (fn: () => void, wait = 33.34) => {\n      let timer: ReturnType<typeof setTimeout> | null\n      return () => {\n        timer && clearTimeout(timer)\n        timer = setTimeout(() => {\n          fn()\n        }, wait)\n      }\n    }\n\n    let isFirstTimeRender = true\n    const handleResize = () => {\n      const el = unrefElement(subMenu)\n      if (el) moreItemWidth = calcMenuItemWidth(el) || DEFAULT_MORE_ITEM_WIDTH\n      if (sliceIndex.value === calcSliceIndex()) return\n      const callback = () => {\n        sliceIndex.value = -1\n        nextTick(() => {\n          sliceIndex.value = calcSliceIndex()\n        })\n      }\n      // execute callback directly when first time resize to avoid shaking\n      isFirstTimeRender ? callback() : debounce(callback)()\n      isFirstTimeRender = false\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(\n      () => props.collapse,\n      (value) => {\n        if (value) openedMenus.value = []\n      }\n    )\n\n    watch(items.value, initMenu)\n\n    let resizeStopper: UseResizeObserverReturn['stop']\n    watchEffect(() => {\n      if (props.mode === 'horizontal' && props.ellipsis)\n        resizeStopper = useResizeObserver(menu, handleResize).stop\n      else resizeStopper?.()\n    })\n\n    const mouseInChild = ref(false)\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\n      provide<MenuProvider>(\n        MENU_INJECTION_KEY,\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\n      provide<SubMenuProvider>(`${SUB_MENU_INJECTION_KEY}${instance.uid}`, {\n        addSubMenu,\n        removeSubMenu,\n        mouseInChild,\n        level: 0,\n      })\n    }\n\n    // lifecycle\n    onMounted(() => {\n      if (props.mode === 'horizontal') {\n        new Menubar(instance.vnode.el!, nsMenu.namespace.value)\n      }\n    })\n\n    {\n      const open = (index: string) => {\n        const { indexPath } = subMenus.value[index]\n        indexPath.forEach((i) => openMenu(i, indexPath))\n      }\n\n      expose({\n        open,\n        close,\n        updateActiveIndex,\n        handleResize,\n      })\n    }\n\n    const ulStyle = useMenuCssVar(props, 0)\n\n    return () => {\n      let slot: VNodeArrayChildren = slots.default?.() ?? []\n      const vShowMore: VNode[] = []\n\n      if (props.mode === 'horizontal' && menu.value) {\n        const originalSlot = (\n          flattedChildren(slot) as VNodeArrayChildren\n        ).filter((vnode) => {\n          // Filter text and comment nodes (https://github.com/vuejs/core/blob/c875019d49b4c36a88d929ccadc31ad414747c7b/packages/shared/src/shapeFlags.ts#L5)\n          return (vnode as VNode)?.shapeFlag !== 8\n        })\n        const slotDefault =\n          sliceIndex.value === -1\n            ? originalSlot\n            : originalSlot.slice(0, sliceIndex.value)\n\n        const slotMore =\n          sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value)\n\n        if (slotMore?.length && props.ellipsis) {\n          slot = slotDefault\n          vShowMore.push(\n            h(\n              ElSubMenu,\n              {\n                ref: subMenu,\n                index: 'sub-menu-more',\n                class: nsSubMenu.e('hide-arrow'),\n                popperOffset: props.popperOffset,\n              },\n              {\n                title: () =>\n                  h(\n                    ElIcon,\n                    {\n                      class: nsSubMenu.e('icon-more'),\n                    },\n                    {\n                      default: () => h(props.ellipsisIcon as Component),\n                    }\n                  ),\n                default: () => slotMore,\n              }\n            )\n          )\n        }\n      }\n\n      const directives: DirectiveArguments = props.closeOnClickOutside\n        ? [\n            [\n              vClickoutside,\n              () => {\n                if (!openedMenus.value.length) return\n\n                if (!mouseInChild.value) {\n                  openedMenus.value.forEach((openedMenu) =>\n                    emit('close', openedMenu, getIndexPath(openedMenu))\n                  )\n\n                  openedMenus.value = []\n                }\n              },\n            ],\n          ]\n        : []\n\n      const vMenu = withDirectives(\n        h(\n          'ul',\n          {\n            key: String(props.collapse),\n            role: 'menubar',\n            ref: menu,\n            style: ulStyle.value,\n            class: {\n              [nsMenu.b()]: true,\n              [nsMenu.m(props.mode)]: true,\n              [nsMenu.m('collapse')]: props.collapse,\n            },\n          },\n          [...slot, ...vShowMore]\n        ),\n        directives\n      )\n\n      if (props.collapseTransition && props.mode === 'vertical') {\n        return h(ElMenuCollapseTransition, () => vMenu)\n      }\n\n      return vMenu\n    }\n  },\n})\n"],"mappings":"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"}

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

@@ -139,8 +139,8 @@ declare const _default: vue.DefineComponent<ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
-  readonly disabled: boolean;
   readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly disabled: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { SubMenuProps, SubMenuPropsPublic, _default, subMenuProps };

package/lib/components/menu/src/utils/menu-item.js

@@ -1,6 +1,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require_aria = require('../../../../utils/dom/aria.js');
-const require_aria$1 = require('../../../../constants/aria.js');
+const require_aria = require('../../../../constants/aria.js');
+const require_aria$1 = require('../../../../utils/dom/aria.js');
 const require_event = require('../../../../utils/dom/event.js');
 const require_submenu = require('./submenu.js');
 
@@ -23,22 +23,22 @@ var MenuItem = class {
 			const code = require_event.getEventCode(event);
 			let prevDef = false;
 			switch (code) {
-				case require_aria$1.EVENT_CODE.down:
-					require_aria.triggerEvent(event.currentTarget, "mouseenter");
+				case require_aria.EVENT_CODE.down:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
 					this.submenu && this.submenu.gotoSubIndex(0);
 					prevDef = true;
 					break;
-				case require_aria$1.EVENT_CODE.up:
-					require_aria.triggerEvent(event.currentTarget, "mouseenter");
+				case require_aria.EVENT_CODE.up:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
 					this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
 					prevDef = true;
 					break;
-				case require_aria$1.EVENT_CODE.tab:
-					require_aria.triggerEvent(event.currentTarget, "mouseleave");
+				case require_aria.EVENT_CODE.tab:
+					require_aria$1.triggerEvent(event.currentTarget, "mouseleave");
 					break;
-				case require_aria$1.EVENT_CODE.enter:
-				case require_aria$1.EVENT_CODE.numpadEnter:
-				case require_aria$1.EVENT_CODE.space:
+				case require_aria.EVENT_CODE.enter:
+				case require_aria.EVENT_CODE.numpadEnter:
+				case require_aria.EVENT_CODE.space:
 					prevDef = true;
 					event.currentTarget.click();
 					break;

package/lib/components/menu/src/utils/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["SubMenu","getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-item.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport SubMenu from './submenu'\n\nclass MenuItem {\n  public submenu: SubMenu = null\n  constructor(\n    public domNode: HTMLElement,\n    namespace: string\n  ) {\n    this.submenu = null\n    this.init(namespace)\n  }\n\n  init(namespace: string): void {\n    this.domNode.setAttribute('tabindex', '0')\n    const menuChild = this.domNode.querySelector(`.${namespace}-menu`)\n    if (menuChild) {\n      this.submenu = new SubMenu(this, menuChild)\n    }\n    this.addListeners()\n  }\n\n  addListeners(): void {\n    this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {\n      const code = getEventCode(event)\n      let prevDef = false\n\n      switch (code) {\n        case EVENT_CODE.down: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu && this.submenu.gotoSubIndex(0)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.up: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu &&\n            this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.tab: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseleave')\n          break\n        }\n        case EVENT_CODE.enter:\n        case EVENT_CODE.numpadEnter:\n        case EVENT_CODE.space: {\n          prevDef = true\n          ;(event.currentTarget as HTMLElement).click()\n          break\n        }\n      }\n      if (prevDef) {\n        event.preventDefault()\n      }\n    })\n  }\n}\n\nexport default MenuItem\n"],"mappings":";;;;;;;AAKA,IAAM,WAAN,MAAe;CAEb,YACE,AAAO,SACP,WACA;EAFO;iBAFiB;AAKxB,OAAK,UAAU;AACf,OAAK,KAAK,UAAU;;CAGtB,KAAK,WAAyB;AAC5B,OAAK,QAAQ,aAAa,YAAY,IAAI;EAC1C,MAAM,YAAY,KAAK,QAAQ,cAAc,IAAI,UAAU,OAAO;AAClE,MAAI,UACF,MAAK,UAAU,IAAIA,wBAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAOC,2BAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAKC,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAKA,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAKA,0BAAW;AACd,+BAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAKA,0BAAW;IAChB,KAAKA,0BAAW;IAChB,KAAKA,0BAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}
+{"version":3,"file":"menu-item.js","names":["SubMenu","getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-item.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport SubMenu from './submenu'\n\nclass MenuItem {\n  public submenu: SubMenu = null\n  constructor(\n    public domNode: HTMLElement,\n    namespace: string\n  ) {\n    this.submenu = null\n    this.init(namespace)\n  }\n\n  init(namespace: string): void {\n    this.domNode.setAttribute('tabindex', '0')\n    const menuChild = this.domNode.querySelector(`.${namespace}-menu`)\n    if (menuChild) {\n      this.submenu = new SubMenu(this, menuChild)\n    }\n    this.addListeners()\n  }\n\n  addListeners(): void {\n    this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {\n      const code = getEventCode(event)\n      let prevDef = false\n\n      switch (code) {\n        case EVENT_CODE.down: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu && this.submenu.gotoSubIndex(0)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.up: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n          this.submenu &&\n            this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1)\n          prevDef = true\n          break\n        }\n        case EVENT_CODE.tab: {\n          triggerEvent(event.currentTarget as HTMLElement, 'mouseleave')\n          break\n        }\n        case EVENT_CODE.enter:\n        case EVENT_CODE.numpadEnter:\n        case EVENT_CODE.space: {\n          prevDef = true\n          ;(event.currentTarget as HTMLElement).click()\n          break\n        }\n      }\n      if (prevDef) {\n        event.preventDefault()\n      }\n    })\n  }\n}\n\nexport default MenuItem\n"],"mappings":";;;;;;;AAKA,IAAM,WAAN,MAAe;CAEb,YACE,AAAO,SACP,WACA;EAFO;iBAFiB;AAKxB,OAAK,UAAU;AACf,OAAK,KAAK,UAAU;;CAGtB,KAAK,WAAyB;AAC5B,OAAK,QAAQ,aAAa,YAAY,IAAI;EAC1C,MAAM,YAAY,KAAK,QAAQ,cAAc,IAAI,UAAU,OAAO;AAClE,MAAI,UACF,MAAK,UAAU,IAAIA,wBAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAOC,2BAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAKC,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}

package/lib/components/menu/src/utils/submenu.js

@@ -1,6 +1,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-const require_aria = require('../../../../utils/dom/aria.js');
-const require_aria$1 = require('../../../../constants/aria.js');
+const require_aria = require('../../../../constants/aria.js');
+const require_aria$1 = require('../../../../utils/dom/aria.js');
 const require_event = require('../../../../utils/dom/event.js');
 
 //#region ../../packages/components/menu/src/utils/submenu.ts
@@ -29,20 +29,20 @@ var SubMenu = class {
 				const code = require_event.getEventCode(event);
 				let prevDef = false;
 				switch (code) {
-					case require_aria$1.EVENT_CODE.down:
+					case require_aria.EVENT_CODE.down:
 						this.gotoSubIndex(this.subIndex + 1);
 						prevDef = true;
 						break;
-					case require_aria$1.EVENT_CODE.up:
+					case require_aria.EVENT_CODE.up:
 						this.gotoSubIndex(this.subIndex - 1);
 						prevDef = true;
 						break;
-					case require_aria$1.EVENT_CODE.tab:
-						require_aria.triggerEvent(parentNode, "mouseleave");
+					case require_aria.EVENT_CODE.tab:
+						require_aria$1.triggerEvent(parentNode, "mouseleave");
 						break;
-					case require_aria$1.EVENT_CODE.enter:
-					case require_aria$1.EVENT_CODE.numpadEnter:
-					case require_aria$1.EVENT_CODE.space:
+					case require_aria.EVENT_CODE.enter:
+					case require_aria.EVENT_CODE.numpadEnter:
+					case require_aria.EVENT_CODE.space:
 						prevDef = true;
 						event.currentTarget.click();
 						break;

package/lib/components/menu/src/utils/submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"submenu.js","names":["getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/submenu.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type MenuItem from './menu-item'\n\nclass SubMenu {\n  public subMenuItems: NodeList\n  public subIndex = 0\n  constructor(\n    public parent: MenuItem,\n    public domNode: ParentNode\n  ) {\n    this.subIndex = 0\n    this.init()\n  }\n\n  init(): void {\n    this.subMenuItems = this.domNode.querySelectorAll('li')\n    this.addListeners()\n  }\n\n  gotoSubIndex(idx: number): void {\n    if (idx === this.subMenuItems.length) {\n      idx = 0\n    } else if (idx < 0) {\n      idx = this.subMenuItems.length - 1\n    }\n    ;(this.subMenuItems[idx] as HTMLElement).focus()\n    this.subIndex = idx\n  }\n\n  addListeners(): void {\n    const parentNode = this.parent.domNode\n    Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {\n      el.addEventListener('keydown', (event: KeyboardEvent) => {\n        const code = getEventCode(event)\n        let prevDef = false\n\n        switch (code) {\n          case EVENT_CODE.down: {\n            this.gotoSubIndex(this.subIndex + 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.up: {\n            this.gotoSubIndex(this.subIndex - 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.tab: {\n            triggerEvent(parentNode as HTMLElement, 'mouseleave')\n            break\n          }\n          case EVENT_CODE.enter:\n          case EVENT_CODE.numpadEnter:\n          case EVENT_CODE.space: {\n            prevDef = true\n            ;(event.currentTarget as HTMLElement).click()\n            break\n          }\n        }\n        if (prevDef) {\n          event.preventDefault()\n          event.stopPropagation()\n        }\n        return false\n      })\n    })\n  }\n}\n\nexport default SubMenu\n"],"mappings":";;;;;;AAMA,IAAM,UAAN,MAAc;CAGZ,YACE,AAAO,QACP,AAAO,SACP;EAFO;EACA;kBAHS;AAKhB,OAAK,WAAW;AAChB,OAAK,MAAM;;CAGb,OAAa;AACX,OAAK,eAAe,KAAK,QAAQ,iBAAiB,KAAK;AACvD,OAAK,cAAc;;CAGrB,aAAa,KAAmB;AAC9B,MAAI,QAAQ,KAAK,aAAa,OAC5B,OAAM;WACG,MAAM,EACf,OAAM,KAAK,aAAa,SAAS;AAElC,EAAC,KAAK,aAAa,KAAqB,OAAO;AAChD,OAAK,WAAW;;CAGlB,eAAqB;EACnB,MAAM,aAAa,KAAK,OAAO;AAC/B,QAAM,UAAU,QAAQ,KAAK,KAAK,eAAe,OAAgB;AAC/D,MAAG,iBAAiB,YAAY,UAAyB;IACvD,MAAM,OAAOA,2BAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAKC,0BAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,0BAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,0BAAW;AACd,gCAAa,YAA2B,aAAa;AACrD;KAEF,KAAKA,0BAAW;KAChB,KAAKA,0BAAW;KAChB,KAAKA,0BAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}
+{"version":3,"file":"submenu.js","names":["getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/submenu.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type MenuItem from './menu-item'\n\nclass SubMenu {\n  public subMenuItems: NodeList\n  public subIndex = 0\n  constructor(\n    public parent: MenuItem,\n    public domNode: ParentNode\n  ) {\n    this.subIndex = 0\n    this.init()\n  }\n\n  init(): void {\n    this.subMenuItems = this.domNode.querySelectorAll('li')\n    this.addListeners()\n  }\n\n  gotoSubIndex(idx: number): void {\n    if (idx === this.subMenuItems.length) {\n      idx = 0\n    } else if (idx < 0) {\n      idx = this.subMenuItems.length - 1\n    }\n    ;(this.subMenuItems[idx] as HTMLElement).focus()\n    this.subIndex = idx\n  }\n\n  addListeners(): void {\n    const parentNode = this.parent.domNode\n    Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {\n      el.addEventListener('keydown', (event: KeyboardEvent) => {\n        const code = getEventCode(event)\n        let prevDef = false\n\n        switch (code) {\n          case EVENT_CODE.down: {\n            this.gotoSubIndex(this.subIndex + 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.up: {\n            this.gotoSubIndex(this.subIndex - 1)\n            prevDef = true\n            break\n          }\n          case EVENT_CODE.tab: {\n            triggerEvent(parentNode as HTMLElement, 'mouseleave')\n            break\n          }\n          case EVENT_CODE.enter:\n          case EVENT_CODE.numpadEnter:\n          case EVENT_CODE.space: {\n            prevDef = true\n            ;(event.currentTarget as HTMLElement).click()\n            break\n          }\n        }\n        if (prevDef) {\n          event.preventDefault()\n          event.stopPropagation()\n        }\n        return false\n      })\n    })\n  }\n}\n\nexport default SubMenu\n"],"mappings":";;;;;;AAMA,IAAM,UAAN,MAAc;CAGZ,YACE,AAAO,QACP,AAAO,SACP;EAFO;EACA;kBAHS;AAKhB,OAAK,WAAW;AAChB,OAAK,MAAM;;CAGb,OAAa;AACX,OAAK,eAAe,KAAK,QAAQ,iBAAiB,KAAK;AACvD,OAAK,cAAc;;CAGrB,aAAa,KAAmB;AAC9B,MAAI,QAAQ,KAAK,aAAa,OAC5B,OAAM;WACG,MAAM,EACf,OAAM,KAAK,aAAa,SAAS;AAElC,EAAC,KAAK,aAAa,KAAqB,OAAO;AAChD,OAAK,WAAW;;CAGlB,eAAqB;EACnB,MAAM,aAAa,KAAK,OAAO;AAC/B,QAAM,UAAU,QAAQ,KAAK,KAAK,eAAe,OAAgB;AAC/D,MAAG,iBAAiB,YAAY,UAAyB;IACvD,MAAM,OAAOA,2BAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAKC,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,kCAAa,YAA2B,aAAa;AACrD;KAEF,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}

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

@@ -134,7 +134,7 @@ declare const messageProps: {
   readonly type: EpPropFinalized<StringConstructor, "error" | "info" | "primary" | "success" | "warning", unknown, "info", boolean>;
   readonly plain: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
-  readonly placement: EpPropFinalized<StringConstructor, "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
+  readonly placement: EpPropFinalized<StringConstructor, "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
   readonly zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   readonly grouping: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly repeatNum: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;

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

@@ -18,13 +18,13 @@ declare const __VLS_base: vue.DefineComponent<MessageProps, {
 }, string, vue.PublicProps, Readonly<MessageProps> & Readonly<{
   onDestroy?: (() => any) | undefined;
 }>, {
+  zIndex: number;
+  offset: number;
   type: MessageType;
   onClose: () => void;
-  placement: MessagePlacement;
   id: string;
-  zIndex: number;
-  offset: number;
   icon: IconPropType;
+  placement: MessagePlacement;
   plain: boolean;
   message: string | vue.VNode | (() => vue.VNode);
   showClose: boolean;