@element-plus/nightly 0.0.20220103 → 0.0.20220107

package/es/components/dropdown/src/dropdown-item-impl.mjs

@@ -0,0 +1,7 @@
+import script from './dropdown-item-impl.vue_vue_type_script_lang.mjs';
+export { default } from './dropdown-item-impl.vue_vue_type_script_lang.mjs';
+import { render } from './dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/dropdown/src/dropdown-item-impl.vue";
+//# sourceMappingURL=dropdown-item-impl.mjs.map

package/es/components/dropdown/src/dropdown-item-impl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item-impl.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/components/dropdown/src/dropdown-item-impl.vue.d.ts

@@ -0,0 +1,39 @@
+declare const _default: import("vue").DefineComponent<{
+    readonly command: import("../../../utils/props").BuildPropReturn<readonly [ObjectConstructor, StringConstructor, NumberConstructor], () => {}, unknown, unknown, unknown>;
+    readonly disabled: BooleanConstructor;
+    readonly divided: BooleanConstructor;
+    readonly textValue: StringConstructor;
+    readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
+}, {
+    itemRef: (el: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
+    dataset: {
+        "data-el-collection-item": string;
+    };
+    tabIndex: import("vue").Ref<number>;
+    handleFocus: (e: Event) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
+    handleMousedown: (e: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "pointerleave" | "pointermove")[], "click" | "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly command?: unknown;
+    readonly disabled?: unknown;
+    readonly divided?: unknown;
+    readonly textValue?: unknown;
+    readonly icon?: unknown;
+} & {
+    disabled: boolean;
+    command: import("../../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    divided: boolean;
+} & {
+    icon?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
+    textValue?: string | undefined;
+}> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onPointermove?: ((...args: any[]) => any) | undefined;
+    onPointerleave?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    disabled: boolean;
+    command: import("../../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    divided: boolean;
+}>;
+export default _default;

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_script_lang.mjs

@@ -0,0 +1,53 @@
+import { defineComponent, inject } from 'vue';
+import '../../roving-focus-group/index.mjs';
+import '../../collection/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import { composeRefs, composeEventHandlers } from '../../../utils/dom.mjs';
+import { dropdownItemProps, DROPDOWN_COLLECTION_ITEM_INJECTION_KEY as COLLECTION_ITEM_INJECTION_KEY } from './dropdown.mjs';
+import { ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY as COLLECTION_ITEM_INJECTION_KEY$1 } from '../../roving-focus-group/src/roving-focus-group.mjs';
+import { ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY } from '../../roving-focus-group/src/tokens.mjs';
+import { COLLECTION_ITEM_SIGN } from '../../collection/src/collection.mjs';
+
+var script = defineComponent({
+  name: "DropdownItemImpl",
+  components: {
+    ElIcon
+  },
+  props: dropdownItemProps,
+  emits: ["pointermove", "pointerleave", "click"],
+  setup(_, { emit }) {
+    const { collectionItemRef: dropdownCollectionItemRef } = inject(COLLECTION_ITEM_INJECTION_KEY, void 0);
+    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(COLLECTION_ITEM_INJECTION_KEY$1, void 0);
+    const {
+      rovingFocusGroupItemRef,
+      tabIndex,
+      handleFocus,
+      handleKeydown: handleItemKeydown,
+      handleMousedown
+    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
+    const itemRef = composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
+    const handleKeydown = composeEventHandlers((e) => {
+      const { code } = e;
+      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        emit("click", e);
+        return true;
+      }
+    }, handleItemKeydown);
+    return {
+      itemRef,
+      dataset: {
+        [COLLECTION_ITEM_SIGN]: ""
+      },
+      tabIndex,
+      handleFocus,
+      handleKeydown,
+      handleMousedown
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=dropdown-item-impl.vue_vue_type_script_lang.mjs.map

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue"],"sourcesContent":["<template>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAqCA,aAAe;;AAEf,EAAE,UAAU;IACR,MAAM;GACP;OACI,EAAE;EACP;EACA,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE;IACjB,MAAM,EAAE,iBAAiB,EAAE;IAC3B;IACA,MAAM;MACJ,uBAAuB;MACvB,QAAQ;;;MAGR,eAAe;QACb,MAAM,CAAC;UACL;IACN;;MAEE,IAAI;QACF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC;QACF,IAAI,CAAC;QACL,OAAO,IAAI;OACZ;wBACiB,CAAC,CAAC;;MAEpB,OAAO;MACP,OAAO,EAAE;QACP,CAAC,oBAAoB,GAAG,EAAE;OAC3B;;;MAGD,aAAa;MACb,eAAe;MACf;;;;;;"}

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs

@@ -0,0 +1,33 @@
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, renderSlot } from 'vue';
+
+const _hoisted_1 = ["aria-disabled", "tabindex"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", mergeProps({ ref: _ctx.itemRef }, _ctx.dataset, {
+    "aria-disabled": _ctx.disabled,
+    class: {
+      "el-dropdown-menu__item": true,
+      "is-disabled": _ctx.disabled,
+      "el-dropdown-menu__item--divided": _ctx.divided
+    },
+    tabindex: _ctx.tabIndex,
+    role: "menuitem",
+    onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("click", e)),
+    onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+    onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
+    onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)),
+    onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e))
+  }), [
+    _ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
+      default: withCtx(() => [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+      ]),
+      _: 1
+    })) : createCommentVNode("v-if", true),
+    renderSlot(_ctx.$slots, "default")
+  ], 16, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs.map

package/es/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item-impl.vue?vue&type=template&id=6daab4f2&lang.js"],"sourcesContent":["<template>\n  <div\n    :ref=\"itemRef\"\n    v-bind=\"dataset\"\n    :aria-disabled=\"disabled\"\n    :class=\"{\n      'el-dropdown-menu__item': true,\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :tabindex=\"tabIndex\"\n    role=\"menuitem\"\n    @click=\"(e) => $emit('click', e)\"\n    @focus=\"handleFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"handleMousedown\"\n    @pointermove=\"(e) => $emit('pointermove', e)\"\n    @pointerleave=\"(e) => $emit('pointerleave', e)\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport {\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n  ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n} from '@element-plus/components/roving-focus-group'\nimport { COLLECTION_ITEM_SIGN } from '@element-plus/components/collection'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { composeEventHandlers, composeRefs } from '@element-plus/utils/dom'\nimport {\n  DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n  dropdownItemProps,\n} from './dropdown'\n\nexport default defineComponent({\n  name: 'DropdownItemImpl',\n  components: {\n    ElIcon,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(_, { emit }) {\n    const { collectionItemRef: dropdownCollectionItemRef } = inject(\n      DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n      undefined\n    )!\n\n    const { collectionItemRef: rovingFocusCollectionItemRef } = inject(\n      ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupItemRef,\n      tabIndex,\n      handleFocus,\n      handleKeydown: handleItemKeydown,\n      handleMousedown,\n    } = inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, undefined)!\n\n    const itemRef = composeRefs(\n      dropdownCollectionItemRef,\n      rovingFocusCollectionItemRef,\n      rovingFocusGroupItemRef\n    )\n\n    const handleKeydown = composeEventHandlers((e: KeyboardEvent) => {\n      const { code } = e\n      if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n        emit('click', e)\n        return true\n      }\n    }, handleItemKeydown)\n\n    return {\n      itemRef,\n      dataset: {\n        [COLLECTION_ITEM_SIGN]: '',\n      },\n      tabIndex,\n      handleFocus,\n      handleKeydown,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;mBAIkB,EAAE,aAAQ;;;;;;IAMvB,uBAAkB;IACnB;IACC,oCAAQ,gBAAW;IACnB;IACA;IACA;IACA,aAAWA,2CAAc;;;;;4BAGmB;0BAAxB;;;;;;"}

package/es/components/dropdown/src/dropdown-item.vue.d.ts

@@ -1,26 +1,34 @@
-import type { Component } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    readonly command: import("element-plus/es/utils/props").BuildPropReturn<readonly [ObjectConstructor, StringConstructor, NumberConstructor], () => {}, unknown, unknown, unknown>;
+    readonly command: import("../../../utils/props").BuildPropReturn<readonly [ObjectConstructor, StringConstructor, NumberConstructor], () => {}, unknown, unknown, unknown>;
     readonly disabled: BooleanConstructor;
     readonly divided: BooleanConstructor;
-    readonly icon: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
+    readonly textValue: StringConstructor;
+    readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
 }, {
     handleClick: (e: UIEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    handlePointerMove: (event: PointerEvent) => void;
+    handlePointerLeave: (event: PointerEvent) => void;
+    textContent: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pointerleave" | "pointermove")[], "pointerleave" | "pointermove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly command?: unknown;
     readonly disabled?: unknown;
     readonly divided?: unknown;
+    readonly textValue?: unknown;
     readonly icon?: unknown;
 } & {
     disabled: boolean;
-    command: import("element-plus/es/utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    command: import("../../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     divided: boolean;
 } & {
-    icon?: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
-}>, {
-    icon: import("element-plus/es/utils/props").BuildPropType<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
+    icon?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown> | undefined;
+    textValue?: string | undefined;
+}> & {
+    onPointermove?: ((...args: any[]) => any) | undefined;
+    onPointerleave?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     disabled: boolean;
-    command: import("element-plus/es/utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    command: import("../../../utils/props").BuildPropType<readonly [ObjectConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     divided: boolean;
 }>;
 export default _default;

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

@@ -1,38 +1,68 @@
-import { defineComponent, getCurrentInstance } from 'vue';
-import { ElIcon } from '../../icon/index.mjs';
-import { buildProps, definePropType } from '../../../utils/props.mjs';
+import { defineComponent, getCurrentInstance, ref, computed, unref, inject } from 'vue';
+import '../../roving-focus-group/index.mjs';
+import { composeEventHandlers, whenMouse } from '../../../utils/dom.mjs';
+import './dropdown-item-impl.mjs';
 import { useDropdown } from './useDropdown.mjs';
+import { ElCollectionItem, dropdownItemProps } from './dropdown.mjs';
+import { DROPDOWN_INJECTION_KEY } from './tokens.mjs';
+import script$1 from '../../roving-focus-group/src/roving-focus-item.vue_vue_type_script_lang.mjs';
+import script$2 from './dropdown-item-impl.vue_vue_type_script_lang.mjs';
 
 var script = defineComponent({
   name: "ElDropdownItem",
-  components: { ElIcon },
-  props: buildProps({
-    command: {
-      type: [Object, String, Number],
-      default: () => ({})
-    },
-    disabled: Boolean,
-    divided: Boolean,
-    icon: {
-      type: definePropType([String, Object])
-    }
-  }),
-  setup(props) {
+  components: {
+    ElDropdownCollectionItem: ElCollectionItem,
+    ElRovingFocusItem: script$1,
+    ElDropdownItemImpl: script$2
+  },
+  props: dropdownItemProps,
+  emits: ["pointermove", "pointerleave"],
+  setup(props, { emit }) {
     const { elDropdown } = useDropdown();
     const _instance = getCurrentInstance();
-    function handleClick(e) {
+    const itemRef = ref(null);
+    const textContent = computed(() => {
       var _a, _b;
+      return (_b = (_a = unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : "";
+    });
+    const { onItemEnter, onItemLeave } = inject(DROPDOWN_INJECTION_KEY, void 0);
+    const handlePointerMove = composeEventHandlers((e) => {
+      emit("pointermove", e);
+      return e.defaultPrevented;
+    }, whenMouse((e) => {
+      var _a;
+      if (props.disabled) {
+        onItemLeave(e);
+      } else {
+        onItemEnter(e);
+        if (!e.defaultPrevented) {
+          ;
+          (_a = e.currentTarget) == null ? void 0 : _a.focus();
+        }
+      }
+    }));
+    const handlePointerLeave = composeEventHandlers((e) => {
+      emit("pointerleave", e);
+      return e.defaultPrevented;
+    }, whenMouse((e) => {
+      onItemLeave(e);
+    }));
+    function handleClick(e) {
+      var _a, _b, _c;
       if (props.disabled) {
         e.stopImmediatePropagation();
         return;
       }
-      if (elDropdown.hideOnClick.value) {
-        (_a = elDropdown.handleClick) == null ? void 0 : _a.call(elDropdown);
+      if ((_a = elDropdown == null ? void 0 : elDropdown.hideOnClick) == null ? void 0 : _a.value) {
+        (_b = elDropdown.handleClick) == null ? void 0 : _b.call(elDropdown);
       }
-      (_b = elDropdown.commandHandler) == null ? void 0 : _b.call(elDropdown, props.command, _instance, e);
+      (_c = elDropdown.commandHandler) == null ? void 0 : _c.call(elDropdown, props.command, _instance, e);
     }
     return {
-      handleClick
+      handleClick,
+      handlePointerMove,
+      handlePointerLeave,
+      textContent
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: { ElIcon },\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAmBA,aAAe,eAAe,CAAC;AAC/B,EAAE,MAAM,gBAAgB;;AAExB,EAAE,KAAK,EAAE,UAAU,CAAC;IAChB,OAAO,EAAE;MACP,IAAI,EAAE,OAAO,EAAE;MACf,OAAO,EAAE;KACV;YACO,EAAE,OAAO;WACV,EAAE;IACT;MACE,IAAI,EAAE;KACP;IACD;OACG,CAAC,KAAK,EAAE;IACX;IACA,MAAM;IACN,SAAS;MACP,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,IAAI,KAAK,CAAC,QAAQ,EAAE;;QAElB,OAAO;OACR;MACD,IAAI,UAAU,CAAC;QACb,CAAC,EAAE,GAAG,UAAU,CAAC;;MAEnB;;WAEK;MACL;MACA;;;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\n    )\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown?.hideOnClick?.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollectionItem","ElRovingFocusItem","ElDropdownItemImpl"],"mappings":";;;;;;;;;;AAkCA,aAAe,eAAe;;AAE9B,EAAE,UAAU;8BACRA;uBACAC;wBACAC,QAAkB;;OAEf,EAAE;EACP;EACA,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,EAAE,UAAU,KAAK,WAAW,EAAE;IACpC,MAAM,SAAS,GAAG;IAClB,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,CAAC;IAC1B,MAAM,cAAc,QAAQ,CAAC,MAAM;MACjC,IAAI,EAAE,EAAE,EAAE;MACV,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;KAC1D,CAAC,CAAC;UACG,EAAE,WAAW,EAAE;UACf;;;KAGL,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK;MAClB,IAAI,EAAE,CAAC;UACH,KAAK,CAAC,QAAQ,EAAE;QAClB,WAAW,CAAC,CAAC,CAAC,CAAC;OAChB;QACC,YAAY,CAAC,EAAE;QACf,IAAI,CAAC,CAAC,CAAC;UACL,CAAC;UACD,CAAC,EAAE;;;;UAIH;;MAEJ;;;KAGD,CAAC,CAAC,CAAC;aACK,WAAW,CAAC;UACf,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;UACX,KAAK,CAAC,QAAQ,EAAE;;QAElB,OAAO;;MAET;;OAEC;MACD,CAAC,EAAE,GAAG,UAAU,CAAC,cAAc,KAAK,IAAI;;WAEnC;;MAEL;MACA,kBAAkB;iBACP;MACX;;;;;;"}

package/es/components/dropdown/src/dropdown-item.vue_vue_type_template_id_396ed16b_lang.mjs

@@ -1,25 +1,35 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 
-const _hoisted_1 = ["aria-disabled", "tabindex"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("li", {
-    class: normalizeClass(["el-dropdown-menu__item", {
-      "is-disabled": _ctx.disabled,
-      "el-dropdown-menu__item--divided": _ctx.divided
-    }]),
-    "aria-disabled": _ctx.disabled,
-    tabindex: _ctx.disabled ? null : -1,
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [
-    _ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
-      default: withCtx(() => [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
-      ]),
-      _: 1
-    })) : createCommentVNode("v-if", true),
-    renderSlot(_ctx.$slots, "default")
-  ], 10, _hoisted_1);
+  var _a;
+  const _component_el_dropdown_item_impl = resolveComponent("el-dropdown-item-impl");
+  const _component_el_roving_focus_item = resolveComponent("el-roving-focus-item");
+  const _component_el_dropdown_collection_item = resolveComponent("el-dropdown-collection-item");
+  return openBlock(), createBlock(_component_el_dropdown_collection_item, {
+    disabled: _ctx.disabled,
+    "text-value": (_a = _ctx.textValue) != null ? _a : _ctx.textContent
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_el_roving_focus_item, {
+        focusable: !_ctx.disabled
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_dropdown_item_impl, mergeProps(_ctx.$props, {
+            onPointerleave: _ctx.handlePointerLeave,
+            onPointermove: _ctx.handlePointerMove,
+            onClick: _ctx.handleClick
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["onPointerleave", "onPointermove", "onClick"])
+        ]),
+        _: 3
+      }, 8, ["focusable"])
+    ]),
+    _: 3
+  }, 8, ["disabled", "text-value"]);
 }
 
 export { render };

package/es/components/dropdown/src/dropdown-item.vue_vue_type_template_id_396ed16b_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue_type_template_id_396ed16b_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue?vue&type=template&id=396ed16b&lang.js"],"sourcesContent":["<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided,\n    }\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"icon\"><component :is=\"icon\" /></el-icon>\n    <slot></slot>\n  </li>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useDropdown } from './useDropdown'\nimport type { Component } from 'vue'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: { ElIcon },\n  props: buildProps({\n    command: {\n      type: [Object, String, Number],\n      default: () => ({}),\n    },\n    disabled: Boolean,\n    divided: Boolean,\n    icon: {\n      type: definePropType<string | Component>([String, Object]),\n    },\n  } as const),\n  setup(props) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown.hideOnClick.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;IAQK;;;;;4BAG4C;0BAAxB;;;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue_type_template_id_396ed16b_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue?vue&type=template&id=396ed16b&lang.js"],"sourcesContent":["<template>\n  <el-dropdown-collection-item\n    :disabled=\"disabled\"\n    :text-value=\"textValue ?? textContent\"\n  >\n    <el-roving-focus-item :focusable=\"!disabled\">\n      <el-dropdown-item-impl\n        v-bind=\"$props\"\n        @pointerleave=\"handlePointerLeave\"\n        @pointermove=\"handlePointerMove\"\n        @click=\"handleClick\"\n      >\n        <slot />\n      </el-dropdown-item-impl>\n    </el-roving-focus-item>\n  </el-dropdown-collection-item>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  ref,\n  unref,\n} from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils/dom'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport {\n  ElCollectionItem as ElDropdownCollectionItem,\n  dropdownItemProps,\n} from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElDropdownCollectionItem,\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave'],\n  setup(props, { emit }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const itemRef = ref<HTMLElement | null>(null)\n    const textContent = computed(() => unref(itemRef)?.textContent ?? '')\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n        } else {\n          onItemEnter(e)\n          if (!e.defaultPrevented) {\n            ;(e.currentTarget as HTMLElement)?.focus()\n          }\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointerleave', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        onItemLeave(e)\n      })\n    )\n    function handleClick(e: UIEvent) {\n      // if disabled don't collapse the drop-down list\n      if (props.disabled) {\n        e.stopImmediatePropagation()\n        return\n      }\n      if (elDropdown?.hideOnClick?.value) {\n        elDropdown.handleClick?.()\n      }\n      elDropdown.commandHandler?.(props.command, _instance, e)\n    }\n\n    return {\n      handleClick,\n      handlePointerMove,\n      handlePointerLeave,\n      textContent,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;IAEK;;;;;;;;;YAMI;YACA,aAAW;YACX;;6BAED;cAAA;;;;;;;;;;;;;"}

package/es/components/dropdown/src/dropdown-menu.vue.d.ts

@@ -1,8 +1,19 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{
+    onKeydown: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: KeyboardEvent) => void>, unknown, unknown, unknown, unknown>;
+}, {
     size: import("vue").ComputedRef<string> | undefined;
-    show: () => void;
-    hide: () => void;
-    innerHide: () => void;
-    triggerElm: import("vue").ComputedRef<import("../../../utils/types").Nullable<HTMLButtonElement>> | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+    rovingFocusGroupRootStyle: import("vue").Ref<import("vue").StyleValue>;
+    tabIndex: import("vue").Ref<number>;
+    dropdownListWrapperRef: (el: Element | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    onBlur: (e: Event) => void;
+    onFocus: (e: FocusEvent) => void;
+    onMousedown: (e: Event) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    onKeydown?: unknown;
+} & {} & {
+    onKeydown?: ((e: KeyboardEvent) => void) | undefined;
+}>, {
+    onKeydown: (e: KeyboardEvent) => void;
+}>;
 export default _default;

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

@@ -1,41 +1,77 @@
-import { defineComponent, onMounted, getCurrentInstance } from 'vue';
+import { defineComponent, inject, unref } from 'vue';
 import '../../../directives/index.mjs';
-import { useDropdown, initDropdownDomEvent } from './useDropdown.mjs';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import '../../focus-trap/index.mjs';
+import '../../roving-focus-group/index.mjs';
+import { composeRefs, composeEventHandlers } from '../../../utils/dom.mjs';
+import { DROPDOWN_INJECTION_KEY } from './tokens.mjs';
+import { dropdownMenuProps, DROPDOWN_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY, FIRST_LAST_KEYS, LAST_KEYS } from './dropdown.mjs';
+import { useDropdown } from './useDropdown.mjs';
 import ClickOutside from '../../../directives/click-outside/index.mjs';
+import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
+import { ROVING_FOCUS_GROUP_INJECTION_KEY } from '../../roving-focus-group/src/tokens.mjs';
+import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY$1 } from '../../roving-focus-group/src/roving-focus-group.mjs';
+import { focusFirst } from '../../roving-focus-group/src/utils.mjs';
 
 var script = defineComponent({
   name: "ElDropdownMenu",
   directives: {
     ClickOutside
   },
-  setup() {
-    const { _elDropdownSize, elDropdown } = useDropdown();
+  inheritAttrs: false,
+  props: dropdownMenuProps,
+  setup(props) {
+    const { _elDropdownSize } = useDropdown();
     const size = _elDropdownSize.value;
-    function show() {
+    const { focusTrapRef, onKeydown } = inject(FOCUS_TRAP_INJECTION_KEY, void 0);
+    const { contentRef } = inject(DROPDOWN_INJECTION_KEY, void 0);
+    const { collectionRef: dropdownCollectionRef, getItems } = inject(COLLECTION_INJECTION_KEY, void 0);
+    const {
+      rovingFocusGroupRef,
+      rovingFocusGroupRootStyle,
+      tabIndex,
+      onBlur,
+      onFocus,
+      onMousedown
+    } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
+    const { collectionRef: rovingFocusGroupCollectionRef } = inject(COLLECTION_INJECTION_KEY$1, void 0);
+    const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
+    const composedKeydown = composeEventHandlers((e) => {
       var _a;
-      if (["click", "contextmenu"].includes(elDropdown.trigger.value))
+      (_a = props.onKeydown) == null ? void 0 : _a.call(props, e);
+    }, (e) => {
+      const { currentTarget, code, target } = e;
+      const isKeydownContained = currentTarget.contains(target);
+      if (isKeydownContained) {
+      }
+      if (EVENT_CODE.tab === code) {
+        e.stopImmediatePropagation();
+      }
+      e.preventDefault();
+      if (target !== unref(contentRef))
         return;
-      (_a = elDropdown.show) == null ? void 0 : _a.call(elDropdown);
-    }
-    function hide() {
-      if (["click", "contextmenu"].includes(elDropdown.trigger.value))
+      if (!FIRST_LAST_KEYS.includes(code))
         return;
-      _hide();
-    }
-    function _hide() {
-      var _a;
-      (_a = elDropdown.hide) == null ? void 0 : _a.call(elDropdown);
-    }
-    onMounted(() => {
-      const dropdownMenu = getCurrentInstance();
-      initDropdownDomEvent(dropdownMenu, elDropdown.triggerElm.value, elDropdown.instance);
+      const items = getItems().filter((item) => !item.disabled);
+      const targets = items.map((item) => item.ref);
+      if (LAST_KEYS.includes(code)) {
+        targets.reverse();
+      }
+      focusFirst(targets);
     });
+    const handleKeydown = (e) => {
+      composedKeydown(e);
+      onKeydown(e);
+    };
     return {
       size,
-      show,
-      hide,
-      innerHide: _hide,
-      triggerElm: elDropdown.triggerElm
+      rovingFocusGroupRootStyle,
+      tabIndex,
+      dropdownListWrapperRef,
+      handleKeydown,
+      onBlur,
+      onFocus,
+      onMousedown
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue"],"sourcesContent":["<template>\n  <ul\n    v-clickOutside:[triggerElm]=\"innerHide\"\n    :class=\"[size && `el-dropdown-menu--${size}`]\"\n    class=\"el-dropdown-menu\"\n    @mouseenter.stop=\"show\"\n    @mouseleave.stop=\"hide\"\n  >\n    <slot></slot>\n  </ul>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, onMounted } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useDropdown, initDropdownDomEvent } from './useDropdown'\n\nexport default defineComponent({\n  name: 'ElDropdownMenu',\n  directives: {\n    ClickOutside,\n  },\n  setup() {\n    const { _elDropdownSize, elDropdown } = useDropdown()\n    const size = _elDropdownSize.value\n\n    function show() {\n      if (['click', 'contextmenu'].includes(elDropdown.trigger.value)) return\n      elDropdown.show?.()\n    }\n    function hide() {\n      if (['click', 'contextmenu'].includes(elDropdown.trigger.value)) return\n      _hide()\n    }\n    function _hide() {\n      elDropdown.hide?.()\n    }\n\n    onMounted(() => {\n      const dropdownMenu = getCurrentInstance()\n      initDropdownDomEvent(\n        dropdownMenu,\n        elDropdown.triggerElm.value,\n        elDropdown.instance\n      )\n    })\n\n    return {\n      size,\n      show,\n      hide,\n      innerHide: _hide,\n      triggerElm: elDropdown.triggerElm,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAcA,aAAe,eAAe,CAAC;;AAE/B,EAAE,UAAU;IACR,YAAY;GACb;OACI,GAAG;;IAEN,MAAM;IACN,SAAS,IAAI,GAAG;MACd,IAAI,EAAE,CAAC;;QAEL,OAAO;MACT,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;IAEhE;MACE,IAAI,CAAC,OAAO,EAAE;eACL;MACT,KAAK;;IAEP,SAAS,KAAK,GAAG;MACf,IAAI,EAAE,CAAC;;;IAGT,SAAS,CAAC,MAAM;MACd,MAAM,eAAe,kBAAkB;MACvC,oBAAoB;;WAEf;UACD;MACJ;;;MAGA;MACA;;;;;;"}
+{"version":3,"file":"dropdown-menu.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue"],"sourcesContent":["<template>\n  <ul\n    :ref=\"dropdownListWrapperRef\"\n    :class=\"['el-dropdown-menu', size && `el-dropdown-menu--${size}`]\"\n    :style=\"rovingFocusGroupRootStyle\"\n    :tabindex=\"-1\"\n    role=\"menu\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"onMousedown\"\n  >\n    <slot></slot>\n  </ul>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, unref } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'\nimport {\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  focusFirst,\n} from '@element-plus/components/roving-focus-group'\nimport { composeRefs, composeEventHandlers } from '@element-plus/utils/dom'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport {\n  DROPDOWN_COLLECTION_INJECTION_KEY,\n  dropdownMenuProps,\n  FIRST_LAST_KEYS,\n  LAST_KEYS,\n} from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n  name: 'ElDropdownMenu',\n  directives: {\n    ClickOutside,\n  },\n  inheritAttrs: false,\n  props: dropdownMenuProps,\n  setup(props) {\n    const { _elDropdownSize } = useDropdown()\n    const size = _elDropdownSize.value\n\n    const { focusTrapRef, onKeydown } = inject(\n      FOCUS_TRAP_INJECTION_KEY,\n      undefined\n    )!\n\n    const { contentRef } = inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n    const { collectionRef: dropdownCollectionRef, getItems } = inject(\n      DROPDOWN_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupRef,\n      rovingFocusGroupRootStyle,\n      tabIndex,\n      onBlur,\n      onFocus,\n      onMousedown,\n    } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, undefined)!\n\n    const { collectionRef: rovingFocusGroupCollectionRef } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const dropdownListWrapperRef = composeRefs(\n      contentRef,\n      dropdownCollectionRef,\n      focusTrapRef,\n      rovingFocusGroupRef,\n      rovingFocusGroupCollectionRef\n    )\n\n    const composedKeydown = composeEventHandlers(\n      (e: KeyboardEvent) => {\n        props.onKeydown?.(e)\n      },\n      (e) => {\n        const { currentTarget, code, target } = e\n        const isKeydownContained = (currentTarget as Node).contains(\n          target as Node\n        )\n\n        if (isKeydownContained) {\n          // TODO: implement typeahead search\n        }\n\n        if (EVENT_CODE.tab === code) {\n          e.stopImmediatePropagation()\n        }\n\n        e.preventDefault()\n\n        if (target !== unref(contentRef)) return\n        if (!FIRST_LAST_KEYS.includes(code)) return\n        const items = getItems<{ disabled: boolean }>().filter(\n          (item) => !item.disabled\n        )\n        const targets = items.map((item) => item.ref!)\n        if (LAST_KEYS.includes(code)) {\n          targets.reverse()\n        }\n        focusFirst(targets)\n      }\n    )\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      composedKeydown(e)\n      onKeydown(e)\n    }\n\n    return {\n      size,\n      rovingFocusGroupRootStyle,\n      tabIndex,\n      dropdownListWrapperRef,\n      handleKeydown,\n      onBlur,\n      onFocus,\n      onMousedown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCA,aAAe,eAAe,CAAC;;AAE/B,EAAE,UAAU;IACR,YAAY;GACb;cACW,EAAE;EACd;EACA,KAAK,CAAC,KAAK;IACT,MAAM,EAAE;IACR,MAAM;IACN,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG;IACpC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;;IAE9B,MAAM;MACJ,mBAAmB;MACnB;;;MAGA,OAAO;;KAER,GAAG,MAAM,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC;UAC/C,EAAE,aAAa,EAAE;UACjB;IACN;;MAEE,CAAC;OACA,CAAC,CAAC,KAAK;MACR,MAAM,EAAE,aAAa,EAAE;MACvB,MAAM;MACN,IAAI;OACH;MACD,IAAI;QACF,CAAC,CAAC,wBAAwB,EAAE,CAAC;;MAE/B,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,MAAM,KAAK,KAAK,CAAC,UAAU,CAAC;QAC9B;;;MAGF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI;MACrC,MAAM;MACN,IAAI,SAAS,CAAC;QACZ,OAAO,CAAC;OACT;MACD,UAAU,CAAC,OAAO,CAAC,CAAC;;;MAGpB,eAAe,CAAC,CAAC,CAAC;MAClB,SAAS,CAAC,CAAC,CAAC,CAAC;;;MAGb,IAAI;+BACqB;cACjB;;;;aAID;iBACI;;;;;;;"}

package/es/components/dropdown/src/dropdown-menu.vue_vue_type_template_id_617b3492_lang.mjs

@@ -1,16 +1,19 @@
-import { resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _directive_clickOutside = resolveDirective("clickOutside");
-  return withDirectives((openBlock(), createElementBlock("ul", {
-    class: normalizeClass([[_ctx.size && `el-dropdown-menu--${_ctx.size}`], "el-dropdown-menu"]),
-    onMouseenter: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.show && _ctx.show(...args), ["stop"])),
-    onMouseleave: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.hide && _ctx.hide(...args), ["stop"]))
+  return openBlock(), createElementBlock("ul", {
+    ref: _ctx.dropdownListWrapperRef,
+    class: normalizeClass(["el-dropdown-menu", _ctx.size && `el-dropdown-menu--${_ctx.size}`]),
+    style: normalizeStyle(_ctx.rovingFocusGroupRootStyle),
+    tabindex: -1,
+    role: "menu",
+    onBlur: _cache[0] || (_cache[0] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
+    onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+    onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+    onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.onMousedown && _ctx.onMousedown(...args))
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 34)), [
-    [_directive_clickOutside, _ctx.innerHide, _ctx.triggerElm]
-  ]);
+  ], 38);
 }
 
 export { render };

package/es/components/dropdown/src/dropdown-menu.vue_vue_type_template_id_617b3492_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.vue_vue_type_template_id_617b3492_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue?vue&type=template&id=617b3492&lang.js"],"sourcesContent":["<template>\n  <ul\n    v-clickOutside:[triggerElm]=\"innerHide\"\n    :class=\"[size && `el-dropdown-menu--${size}`]\"\n    class=\"el-dropdown-menu\"\n    @mouseenter.stop=\"show\"\n    @mouseleave.stop=\"hide\"\n  >\n    <slot></slot>\n  </ul>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, onMounted } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useDropdown, initDropdownDomEvent } from './useDropdown'\n\nexport default defineComponent({\n  name: 'ElDropdownMenu',\n  directives: {\n    ClickOutside,\n  },\n  setup() {\n    const { _elDropdownSize, elDropdown } = useDropdown()\n    const size = _elDropdownSize.value\n\n    function show() {\n      if (['click', 'contextmenu'].includes(elDropdown.trigger.value)) return\n      elDropdown.show?.()\n    }\n    function hide() {\n      if (['click', 'contextmenu'].includes(elDropdown.trigger.value)) return\n      _hide()\n    }\n    function _hide() {\n      elDropdown.hide?.()\n    }\n\n    onMounted(() => {\n      const dropdownMenu = getCurrentInstance()\n      initDropdownDomEvent(\n        dropdownMenu,\n        elDropdown.triggerElm.value,\n        elDropdown.instance\n      )\n    })\n\n    return {\n      size,\n      show,\n      hide,\n      innerHide: _hide,\n      triggerElm: elDropdown.triggerElm,\n    }\n  },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;wCACE;IAEG,0DAAqC,SAAI,KACpC;;IAELA,WAAU;;IAEX;;;;;;"}
+{"version":3,"file":"dropdown-menu.vue_vue_type_template_id_617b3492_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown-menu.vue?vue&type=template&id=617b3492&lang.js"],"sourcesContent":["<template>\n  <ul\n    :ref=\"dropdownListWrapperRef\"\n    :class=\"['el-dropdown-menu', size && `el-dropdown-menu--${size}`]\"\n    :style=\"rovingFocusGroupRootStyle\"\n    :tabindex=\"-1\"\n    role=\"menu\"\n    @blur=\"onBlur\"\n    @focus=\"onFocus\"\n    @keydown=\"handleKeydown\"\n    @mousedown=\"onMousedown\"\n  >\n    <slot></slot>\n  </ul>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, unref } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'\nimport {\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  focusFirst,\n} from '@element-plus/components/roving-focus-group'\nimport { composeRefs, composeEventHandlers } from '@element-plus/utils/dom'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\nimport {\n  DROPDOWN_COLLECTION_INJECTION_KEY,\n  dropdownMenuProps,\n  FIRST_LAST_KEYS,\n  LAST_KEYS,\n} from './dropdown'\nimport { useDropdown } from './useDropdown'\n\nexport default defineComponent({\n  name: 'ElDropdownMenu',\n  directives: {\n    ClickOutside,\n  },\n  inheritAttrs: false,\n  props: dropdownMenuProps,\n  setup(props) {\n    const { _elDropdownSize } = useDropdown()\n    const size = _elDropdownSize.value\n\n    const { focusTrapRef, onKeydown } = inject(\n      FOCUS_TRAP_INJECTION_KEY,\n      undefined\n    )!\n\n    const { contentRef } = inject(DROPDOWN_INJECTION_KEY, undefined)!\n\n    const { collectionRef: dropdownCollectionRef, getItems } = inject(\n      DROPDOWN_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const {\n      rovingFocusGroupRef,\n      rovingFocusGroupRootStyle,\n      tabIndex,\n      onBlur,\n      onFocus,\n      onMousedown,\n    } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, undefined)!\n\n    const { collectionRef: rovingFocusGroupCollectionRef } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const dropdownListWrapperRef = composeRefs(\n      contentRef,\n      dropdownCollectionRef,\n      focusTrapRef,\n      rovingFocusGroupRef,\n      rovingFocusGroupCollectionRef\n    )\n\n    const composedKeydown = composeEventHandlers(\n      (e: KeyboardEvent) => {\n        props.onKeydown?.(e)\n      },\n      (e) => {\n        const { currentTarget, code, target } = e\n        const isKeydownContained = (currentTarget as Node).contains(\n          target as Node\n        )\n\n        if (isKeydownContained) {\n          // TODO: implement typeahead search\n        }\n\n        if (EVENT_CODE.tab === code) {\n          e.stopImmediatePropagation()\n        }\n\n        e.preventDefault()\n\n        if (target !== unref(contentRef)) return\n        if (!FIRST_LAST_KEYS.includes(code)) return\n        const items = getItems<{ disabled: boolean }>().filter(\n          (item) => !item.disabled\n        )\n        const targets = items.map((item) => item.ref!)\n        if (LAST_KEYS.includes(code)) {\n          targets.reverse()\n        }\n        focusFirst(targets)\n      }\n    )\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      composedKeydown(e)\n      onKeydown(e)\n    }\n\n    return {\n      size,\n      rovingFocusGroupRootStyle,\n      tabIndex,\n      dropdownListWrapperRef,\n      handleKeydown,\n      onBlur,\n      onFocus,\n      onMousedown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;IAEK,KAAK;IACL,KAAK;IACL;IACA,YAAY;IACb,MAAK;IACJ,gDAAM;IACN;IACA;;;;;;;;"}