@element-plus/nightly 0.0.20220101 → 0.0.20220105

package/lib/components/dropdown/src/dropdown-item-impl.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dropdownItemImpl_vue_vue_type_script_lang = require('./dropdown-item-impl.vue_vue_type_script_lang.js');
+var dropdownItemImpl_vue_vue_type_template_id_6daab4f2_lang = require('./dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.js');
+
+dropdownItemImpl_vue_vue_type_script_lang["default"].render = dropdownItemImpl_vue_vue_type_template_id_6daab4f2_lang.render;
+dropdownItemImpl_vue_vue_type_script_lang["default"].__file = "packages/components/dropdown/src/dropdown-item-impl.vue";
+
+exports["default"] = dropdownItemImpl_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=dropdown-item-impl.js.map

package/lib/components/dropdown/src/dropdown-item-impl.js.map

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

package/lib/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/lib/components/dropdown/src/dropdown-item-impl.vue_vue_type_script_lang.js

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

package/lib/components/dropdown/src/dropdown-item-impl.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_script_lang.js","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":["defineComponent","ElIcon","dropdownItemProps","inject","ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY","COLLECTION_ITEM_SIGN"],"mappings":";;;;;;;;;;;;;;;AAqCA,aAAeA;;AAEf,EAAE,UAAU;YACRC,YAAM;GACP;OACI,EAAEC;EACP;EACA,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE;IACjB,MAAM,EAAE,iBAAiB,EAAE;IAC3B;IACA,MAAM;MACJ,uBAAuB;MACvB,QAAQ;;;MAGR,eAAe;QACbC,UAAM,CAACC;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,CAACC,+BAAoB,GAAG,EAAE;OAC3B;;;MAGD,aAAa;MACb,eAAe;MACf;;;;;;"}

package/lib/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["aria-disabled", "tabindex"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  return vue.openBlock(), vue.createElementBlock("div", vue.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 ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
+      default: vue.withCtx(() => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
+      ]),
+      _: 1
+    })) : vue.createCommentVNode("v-if", true),
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 16, _hoisted_1);
+}
+
+exports.render = render;
+//# sourceMappingURL=dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.js.map

package/lib/components/dropdown/src/dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item-impl.vue_vue_type_template_id_6daab4f2_lang.js","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,mDAAc;;;;;gCAGmB;8BAAxB;;;;;;"}

package/lib/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/lib/components/dropdown/src/dropdown-item.vue_vue_type_script_lang.js

@@ -3,40 +3,70 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index = require('../../icon/index.js');
-var props = require('../../../utils/props.js');
+require('../../roving-focus-group/index.js');
+var dom = require('../../../utils/dom.js');
+require('./dropdown-item-impl.js');
 var useDropdown = require('./useDropdown.js');
+var dropdown = require('./dropdown.js');
+var tokens = require('./tokens.js');
+var rovingFocusItem_vue_vue_type_script_lang = require('../../roving-focus-group/src/roving-focus-item.vue_vue_type_script_lang.js');
+var dropdownItemImpl_vue_vue_type_script_lang = require('./dropdown-item-impl.vue_vue_type_script_lang.js');
 
 var script = vue.defineComponent({
   name: "ElDropdownItem",
-  components: { ElIcon: index.ElIcon },
-  props: props.buildProps({
-    command: {
-      type: [Object, String, Number],
-      default: () => ({})
-    },
-    disabled: Boolean,
-    divided: Boolean,
-    icon: {
-      type: props.definePropType([String, Object])
-    }
-  }),
-  setup(props) {
+  components: {
+    ElDropdownCollectionItem: dropdown.ElCollectionItem,
+    ElRovingFocusItem: rovingFocusItem_vue_vue_type_script_lang["default"],
+    ElDropdownItemImpl: dropdownItemImpl_vue_vue_type_script_lang["default"]
+  },
+  props: dropdown.dropdownItemProps,
+  emits: ["pointermove", "pointerleave"],
+  setup(props, { emit }) {
     const { elDropdown } = useDropdown.useDropdown();
     const _instance = vue.getCurrentInstance();
-    function handleClick(e) {
+    const itemRef = vue.ref(null);
+    const textContent = vue.computed(() => {
       var _a, _b;
+      return (_b = (_a = vue.unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : "";
+    });
+    const { onItemEnter, onItemLeave } = vue.inject(tokens.DROPDOWN_INJECTION_KEY, void 0);
+    const handlePointerMove = dom.composeEventHandlers((e) => {
+      emit("pointermove", e);
+      return e.defaultPrevented;
+    }, dom.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 = dom.composeEventHandlers((e) => {
+      emit("pointerleave", e);
+      return e.defaultPrevented;
+    }, dom.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/lib/components/dropdown/src/dropdown-item.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue_type_script_lang.js","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":["defineComponent","buildProps","definePropType"],"mappings":";;;;;;;;;AAmBA,aAAeA,mBAAe,CAAC;AAC/B,EAAE,MAAM,gBAAgB;;AAExB,EAAE,KAAK,EAAEC,gBAAU,CAAC;IAChB,OAAO,EAAE;MACP,IAAI,EAAE,OAAO,EAAE;MACf,OAAO,EAAE;KACV;YACO,EAAE,OAAO;WACV,EAAE;IACT;MACE,IAAI,EAAEC;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.js","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":["defineComponent","ElDropdownCollectionItem","ElRovingFocusItem","ElDropdownItemImpl","dropdownItemProps","useDropdown","getCurrentInstance","ref","computed","unref","whenMouse"],"mappings":";;;;;;;;;;;;;;AAkCA,aAAeA,mBAAe;;AAE9B,EAAE,UAAU;8BACRC;uBACAC;wBACAC,oDAAkB;;OAEf,EAAEC;EACP;EACA,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,EAAE,UAAU,KAAKC,uBAAW,EAAE;IACpC,MAAM,SAAS,GAAGC;IAClB,MAAM,OAAO,GAAGC,OAAG,KAAK,CAAC,CAAC;IAC1B,MAAM,cAAcC,YAAQ,CAAC,MAAM;MACjC,IAAI,EAAE,EAAE,EAAE;MACV,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAGC,SAAK,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;KAC1D,CAAC,CAAC;UACG,EAAE,WAAW,EAAE;UACf;;;KAGL,EAAEC,aAAS,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/lib/components/dropdown/src/dropdown-item.vue_vue_type_template_id_396ed16b_lang.js

@@ -4,26 +4,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = ["aria-disabled", "tabindex"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_icon = vue.resolveComponent("el-icon");
-  return vue.openBlock(), vue.createElementBlock("li", {
-    class: vue.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 ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
-      default: vue.withCtx(() => [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
-      ]),
-      _: 1
-    })) : vue.createCommentVNode("v-if", true),
-    vue.renderSlot(_ctx.$slots, "default")
-  ], 10, _hoisted_1);
+  var _a;
+  const _component_el_dropdown_item_impl = vue.resolveComponent("el-dropdown-item-impl");
+  const _component_el_roving_focus_item = vue.resolveComponent("el-roving-focus-item");
+  const _component_el_dropdown_collection_item = vue.resolveComponent("el-dropdown-collection-item");
+  return vue.openBlock(), vue.createBlock(_component_el_dropdown_collection_item, {
+    disabled: _ctx.disabled,
+    "text-value": (_a = _ctx.textValue) != null ? _a : _ctx.textContent
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_el_roving_focus_item, {
+        focusable: !_ctx.disabled
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_dropdown_item_impl, vue.mergeProps(_ctx.$props, {
+            onPointerleave: _ctx.handlePointerLeave,
+            onPointermove: _ctx.handlePointerMove,
+            onClick: _ctx.handleClick
+          }), {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["onPointerleave", "onPointermove", "onClick"])
+        ]),
+        _: 3
+      }, 8, ["focusable"])
+    ]),
+    _: 3
+  }, 8, ["disabled", "text-value"]);
 }
 
 exports.render = render;

package/lib/components/dropdown/src/dropdown-item.vue_vue_type_template_id_396ed16b_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.vue_vue_type_template_id_396ed16b_lang.js","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;;;;;gCAG4C;8BAAxB;;;;;;"}
+{"version":3,"file":"dropdown-item.vue_vue_type_template_id_396ed16b_lang.js","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;;iCAED;cAAA;;;;;;;;;;;;;"}

package/lib/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/lib/components/dropdown/src/dropdown-menu.vue_vue_type_script_lang.js

@@ -4,42 +4,78 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 require('../../../directives/index.js');
+var aria = require('../../../utils/aria.js');
+require('../../focus-trap/index.js');
+require('../../roving-focus-group/index.js');
+var dom = require('../../../utils/dom.js');
+var tokens$1 = require('./tokens.js');
+var dropdown = require('./dropdown.js');
 var useDropdown = require('./useDropdown.js');
 var index = require('../../../directives/click-outside/index.js');
+var tokens = require('../../focus-trap/src/tokens.js');
+var tokens$2 = require('../../roving-focus-group/src/tokens.js');
+var rovingFocusGroup = require('../../roving-focus-group/src/roving-focus-group.js');
+var utils = require('../../roving-focus-group/src/utils.js');
 
 var script = vue.defineComponent({
   name: "ElDropdownMenu",
   directives: {
     ClickOutside: index["default"]
   },
-  setup() {
-    const { _elDropdownSize, elDropdown } = useDropdown.useDropdown();
+  inheritAttrs: false,
+  props: dropdown.dropdownMenuProps,
+  setup(props) {
+    const { _elDropdownSize } = useDropdown.useDropdown();
     const size = _elDropdownSize.value;
-    function show() {
+    const { focusTrapRef, onKeydown } = vue.inject(tokens.FOCUS_TRAP_INJECTION_KEY, void 0);
+    const { contentRef } = vue.inject(tokens$1.DROPDOWN_INJECTION_KEY, void 0);
+    const { collectionRef: dropdownCollectionRef, getItems } = vue.inject(dropdown.DROPDOWN_COLLECTION_INJECTION_KEY, void 0);
+    const {
+      rovingFocusGroupRef,
+      rovingFocusGroupRootStyle,
+      tabIndex,
+      onBlur,
+      onFocus,
+      onMousedown
+    } = vue.inject(tokens$2.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
+    const { collectionRef: rovingFocusGroupCollectionRef } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
+    const dropdownListWrapperRef = dom.composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
+    const composedKeydown = dom.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 (aria.EVENT_CODE.tab === code) {
+        e.stopImmediatePropagation();
+      }
+      e.preventDefault();
+      if (target !== vue.unref(contentRef))
         return;
-      (_a = elDropdown.show) == null ? void 0 : _a.call(elDropdown);
-    }
-    function hide() {
-      if (["click", "contextmenu"].includes(elDropdown.trigger.value))
+      if (!dropdown.FIRST_LAST_KEYS.includes(code))
         return;
-      _hide();
-    }
-    function _hide() {
-      var _a;
-      (_a = elDropdown.hide) == null ? void 0 : _a.call(elDropdown);
-    }
-    vue.onMounted(() => {
-      const dropdownMenu = vue.getCurrentInstance();
-      useDropdown.initDropdownDomEvent(dropdownMenu, elDropdown.triggerElm.value, elDropdown.instance);
+      const items = getItems().filter((item) => !item.disabled);
+      const targets = items.map((item) => item.ref);
+      if (dropdown.LAST_KEYS.includes(code)) {
+        targets.reverse();
+      }
+      utils.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/lib/components/dropdown/src/dropdown-menu.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.vue_vue_type_script_lang.js","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":["defineComponent","ClickOutside","onMounted","getCurrentInstance","initDropdownDomEvent"],"mappings":";;;;;;;;;AAcA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU;kBACRC,gBAAY;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;;;IAGTC,aAAS,CAAC,MAAM;MACd,MAAM,eAAeC,sBAAkB;MACvCC,gCAAoB;;WAEf;UACD;MACJ;;;MAGA;MACA;;;;;;"}
+{"version":3,"file":"dropdown-menu.vue_vue_type_script_lang.js","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":["defineComponent","ClickOutside","inject","DROPDOWN_INJECTION_KEY","ROVING_FOCUS_GROUP_INJECTION_KEY","EVENT_CODE","unref","LAST_KEYS","focusFirst"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU;kBACRC,gBAAY;GACb;cACW,EAAE;EACd;EACA,KAAK,CAAC,KAAK;IACT,MAAM,EAAE;IACR,MAAM;IACN,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAGC;IACpC,MAAM,EAAE,UAAU,EAAE,GAAGA,UAAM,CAACC;;IAE9B,MAAM;MACJ,mBAAmB;MACnB;;;MAGA,OAAO;;KAER,GAAGD,UAAM,CAACE,yCAAgC,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,IAAIC;QACF,CAAC,CAAC,wBAAwB,EAAE,CAAC;;MAE/B,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,MAAM,KAAKC,SAAK,CAAC,UAAU,CAAC;QAC9B;;;MAGF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI;MACrC,MAAM;MACN,IAAIC,kBAAS,CAAC;QACZ,OAAO,CAAC;OACT;MACDC,gBAAU,CAAC,OAAO,CAAC,CAAC;;;MAGpB,eAAe,CAAC,CAAC,CAAC;MAClB,SAAS,CAAC,CAAC,CAAC,CAAC;;;MAGb,IAAI;+BACqB;cACjB;;;;aAID;iBACI;;;;;;;"}

package/lib/components/dropdown/src/dropdown-menu.vue_vue_type_template_id_617b3492_lang.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _directive_clickOutside = vue.resolveDirective("clickOutside");
-  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("ul", {
-    class: vue.normalizeClass([[_ctx.size && `el-dropdown-menu--${_ctx.size}`], "el-dropdown-menu"]),
-    onMouseenter: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.show && _ctx.show(...args), ["stop"])),
-    onMouseleave: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.hide && _ctx.hide(...args), ["stop"]))
+  return vue.openBlock(), vue.createElementBlock("ul", {
+    ref: _ctx.dropdownListWrapperRef,
+    class: vue.normalizeClass(["el-dropdown-menu", _ctx.size && `el-dropdown-menu--${_ctx.size}`]),
+    style: vue.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))
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 34)), [
-    [_directive_clickOutside, _ctx.innerHide, _ctx.triggerElm]
-  ]);
+  ], 38);
 }
 
 exports.render = render;

package/lib/components/dropdown/src/dropdown-menu.vue_vue_type_template_id_617b3492_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.vue_vue_type_template_id_617b3492_lang.js","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,8DAAqC,SAAI,KACpC;;IAELA,eAAU;;IAEX;;;;;;"}
+{"version":3,"file":"dropdown-menu.vue_vue_type_template_id_617b3492_lang.js","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;;;;;;;;"}