54801a5c2c760a77489268171f41484716bd62453d3b0013c815ef36a5120422d3070f6fdc2140c59623872b014c3c5d5547a5ca0530dabbf5de06bad4eff5 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. import { defineComponent, getCurrentInstance, ref, computed, provide, toRef, unref, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createSlots, withCtx, renderSlot, createBlock, mergeProps, createCommentVNode } from 'vue';
  2. import { ElButton } from '../../button/index.mjs';
  3. import { ElTooltip } from '../../tooltip/index.mjs';
  4. import { ElScrollbar } from '../../scrollbar/index.mjs';
  5. import { ElIcon } from '../../icon/index.mjs';
  6. import ElRovingFocusGroup from '../../roving-focus-group/src/roving-focus-group2.mjs';
  7. import { ArrowDown } from '@element-plus/icons-vue';
  8. import { ElCollection, dropdownProps } from './dropdown.mjs';
  9. import { DROPDOWN_INJECTION_KEY, DROPDOWN_INSTANCE_INJECTION_KEY } from './tokens.mjs';
  10. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  11. import { OnlyChild } from '../../slot/src/only-child.mjs';
  12. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  13. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  14. import { addUnit } from '../../../utils/dom/style.mjs';
  15. import { castArray } from 'lodash-unified';
  16. import { useId } from '../../../hooks/use-id/index.mjs';
  17. import { useFormSize } from '../../form/src/hooks/use-form-common-props.mjs';
  18. const { ButtonGroup: ElButtonGroup } = ElButton;
  19. const _sfc_main = defineComponent({
  20. name: "ElDropdown",
  21. components: {
  22. ElButton,
  23. ElButtonGroup,
  24. ElScrollbar,
  25. ElDropdownCollection: ElCollection,
  26. ElTooltip,
  27. ElRovingFocusGroup,
  28. ElOnlyChild: OnlyChild,
  29. ElIcon,
  30. ArrowDown
  31. },
  32. props: dropdownProps,
  33. emits: ["visible-change", "click", "command"],
  34. setup(props, { emit }) {
  35. const _instance = getCurrentInstance();
  36. const ns = useNamespace("dropdown");
  37. const { t } = useLocale();
  38. const triggeringElementRef = ref();
  39. const referenceElementRef = ref();
  40. const popperRef = ref();
  41. const contentRef = ref();
  42. const scrollbar = ref(null);
  43. const currentTabId = ref(null);
  44. const isUsingKeyboard = ref(false);
  45. const wrapStyle = computed(() => ({
  46. maxHeight: addUnit(props.maxHeight)
  47. }));
  48. const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)]);
  49. const trigger = computed(() => castArray(props.trigger));
  50. const defaultTriggerId = useId().value;
  51. const triggerId = computed(() => props.id || defaultTriggerId);
  52. function handleClick() {
  53. var _a;
  54. (_a = popperRef.value) == null ? void 0 : _a.onClose(void 0, 0);
  55. }
  56. function handleClose() {
  57. var _a;
  58. (_a = popperRef.value) == null ? void 0 : _a.onClose();
  59. }
  60. function handleOpen() {
  61. var _a;
  62. (_a = popperRef.value) == null ? void 0 : _a.onOpen();
  63. }
  64. const dropdownSize = useFormSize();
  65. function commandHandler(...args) {
  66. emit("command", ...args);
  67. }
  68. function onItemEnter() {
  69. }
  70. function onItemLeave() {
  71. const contentEl = unref(contentRef);
  72. trigger.value.includes("hover") && (contentEl == null ? void 0 : contentEl.focus({
  73. preventScroll: true
  74. }));
  75. currentTabId.value = null;
  76. }
  77. function handleCurrentTabIdChange(id) {
  78. currentTabId.value = id;
  79. }
  80. function handleEntryFocus(e) {
  81. if (!isUsingKeyboard.value) {
  82. e.preventDefault();
  83. e.stopImmediatePropagation();
  84. }
  85. }
  86. function handleBeforeShowTooltip() {
  87. emit("visible-change", true);
  88. }
  89. function handleShowTooltip(event) {
  90. var _a;
  91. if ((event == null ? void 0 : event.type) === "keydown") {
  92. (_a = contentRef.value) == null ? void 0 : _a.focus();
  93. }
  94. }
  95. function handleBeforeHideTooltip() {
  96. emit("visible-change", false);
  97. }
  98. provide(DROPDOWN_INJECTION_KEY, {
  99. contentRef,
  100. role: computed(() => props.role),
  101. triggerId,
  102. isUsingKeyboard,
  103. onItemEnter,
  104. onItemLeave
  105. });
  106. provide(DROPDOWN_INSTANCE_INJECTION_KEY, {
  107. instance: _instance,
  108. dropdownSize,
  109. handleClick,
  110. commandHandler,
  111. trigger: toRef(props, "trigger"),
  112. hideOnClick: toRef(props, "hideOnClick")
  113. });
  114. const onFocusAfterTrapped = (e) => {
  115. var _a, _b;
  116. e.preventDefault();
  117. (_b = (_a = contentRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a, {
  118. preventScroll: true
  119. });
  120. };
  121. const handlerMainButtonClick = (event) => {
  122. emit("click", event);
  123. };
  124. return {
  125. t,
  126. ns,
  127. scrollbar,
  128. wrapStyle,
  129. dropdownTriggerKls,
  130. dropdownSize,
  131. triggerId,
  132. currentTabId,
  133. handleCurrentTabIdChange,
  134. handlerMainButtonClick,
  135. handleEntryFocus,
  136. handleClose,
  137. handleOpen,
  138. handleBeforeShowTooltip,
  139. handleShowTooltip,
  140. handleBeforeHideTooltip,
  141. onFocusAfterTrapped,
  142. popperRef,
  143. contentRef,
  144. triggeringElementRef,
  145. referenceElementRef
  146. };
  147. }
  148. });
  149. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  150. var _a, _b;
  151. const _component_el_dropdown_collection = resolveComponent("el-dropdown-collection");
  152. const _component_el_roving_focus_group = resolveComponent("el-roving-focus-group");
  153. const _component_el_scrollbar = resolveComponent("el-scrollbar");
  154. const _component_el_only_child = resolveComponent("el-only-child");
  155. const _component_el_tooltip = resolveComponent("el-tooltip");
  156. const _component_el_button = resolveComponent("el-button");
  157. const _component_arrow_down = resolveComponent("arrow-down");
  158. const _component_el_icon = resolveComponent("el-icon");
  159. const _component_el_button_group = resolveComponent("el-button-group");
  160. return openBlock(), createElementBlock("div", {
  161. class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)])
  162. }, [
  163. createVNode(_component_el_tooltip, {
  164. ref: "popperRef",
  165. role: _ctx.role,
  166. effect: _ctx.effect,
  167. "fallback-placements": ["bottom", "top"],
  168. "popper-options": _ctx.popperOptions,
  169. "gpu-acceleration": false,
  170. "manual-mode": true,
  171. placement: _ctx.placement,
  172. "popper-class": [_ctx.ns.e("popper"), _ctx.popperClass],
  173. "reference-element": (_a = _ctx.referenceElementRef) == null ? void 0 : _a.$el,
  174. trigger: _ctx.trigger,
  175. "trigger-keys": _ctx.triggerKeys,
  176. "trigger-target-el": _ctx.contentRef,
  177. "show-arrow": _ctx.showArrow,
  178. "show-after": _ctx.trigger === "hover" ? _ctx.showTimeout : 0,
  179. "hide-after": _ctx.trigger === "hover" ? _ctx.hideTimeout : 0,
  180. "stop-popper-mouse-event": false,
  181. "virtual-ref": (_b = _ctx.virtualRef) != null ? _b : _ctx.triggeringElementRef,
  182. "virtual-triggering": _ctx.virtualTriggering || _ctx.splitButton,
  183. disabled: _ctx.disabled,
  184. transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
  185. teleported: _ctx.teleported,
  186. pure: "",
  187. "focus-on-target": "",
  188. persistent: _ctx.persistent,
  189. onBeforeShow: _ctx.handleBeforeShowTooltip,
  190. onShow: _ctx.handleShowTooltip,
  191. onBeforeHide: _ctx.handleBeforeHideTooltip
  192. }, createSlots({
  193. content: withCtx(() => [
  194. createVNode(_component_el_scrollbar, {
  195. ref: "scrollbar",
  196. "wrap-style": _ctx.wrapStyle,
  197. tag: "div",
  198. "view-class": _ctx.ns.e("list")
  199. }, {
  200. default: withCtx(() => [
  201. createVNode(_component_el_roving_focus_group, {
  202. loop: _ctx.loop,
  203. "current-tab-id": _ctx.currentTabId,
  204. orientation: "horizontal",
  205. onCurrentTabIdChange: _ctx.handleCurrentTabIdChange,
  206. onEntryFocus: _ctx.handleEntryFocus
  207. }, {
  208. default: withCtx(() => [
  209. createVNode(_component_el_dropdown_collection, null, {
  210. default: withCtx(() => [
  211. renderSlot(_ctx.$slots, "dropdown")
  212. ]),
  213. _: 3
  214. })
  215. ]),
  216. _: 3
  217. }, 8, ["loop", "current-tab-id", "onCurrentTabIdChange", "onEntryFocus"])
  218. ]),
  219. _: 3
  220. }, 8, ["wrap-style", "view-class"])
  221. ]),
  222. _: 2
  223. }, [
  224. !_ctx.splitButton ? {
  225. name: "default",
  226. fn: withCtx(() => [
  227. createVNode(_component_el_only_child, {
  228. id: _ctx.triggerId,
  229. ref: "triggeringElementRef",
  230. role: "button",
  231. tabindex: _ctx.tabindex
  232. }, {
  233. default: withCtx(() => [
  234. renderSlot(_ctx.$slots, "default")
  235. ]),
  236. _: 3
  237. }, 8, ["id", "tabindex"])
  238. ])
  239. } : void 0
  240. ]), 1032, ["role", "effect", "popper-options", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-arrow", "show-after", "hide-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported", "persistent", "onBeforeShow", "onShow", "onBeforeHide"]),
  241. _ctx.splitButton ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
  242. default: withCtx(() => [
  243. createVNode(_component_el_button, mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, {
  244. size: _ctx.dropdownSize,
  245. type: _ctx.type,
  246. disabled: _ctx.disabled,
  247. tabindex: _ctx.tabindex,
  248. onClick: _ctx.handlerMainButtonClick
  249. }), {
  250. default: withCtx(() => [
  251. renderSlot(_ctx.$slots, "default")
  252. ]),
  253. _: 3
  254. }, 16, ["size", "type", "disabled", "tabindex", "onClick"]),
  255. createVNode(_component_el_button, mergeProps({
  256. id: _ctx.triggerId,
  257. ref: "triggeringElementRef"
  258. }, _ctx.buttonProps, {
  259. role: "button",
  260. size: _ctx.dropdownSize,
  261. type: _ctx.type,
  262. class: _ctx.ns.e("caret-button"),
  263. disabled: _ctx.disabled,
  264. tabindex: _ctx.tabindex,
  265. "aria-label": _ctx.t("el.dropdown.toggleDropdown")
  266. }), {
  267. default: withCtx(() => [
  268. createVNode(_component_el_icon, {
  269. class: normalizeClass(_ctx.ns.e("icon"))
  270. }, {
  271. default: withCtx(() => [
  272. createVNode(_component_arrow_down)
  273. ]),
  274. _: 1
  275. }, 8, ["class"])
  276. ]),
  277. _: 1
  278. }, 16, ["id", "size", "type", "class", "disabled", "tabindex", "aria-label"])
  279. ]),
  280. _: 3
  281. })) : createCommentVNode("v-if", true)
  282. ], 2);
  283. }
  284. var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "dropdown.vue"]]);
  285. export { Dropdown as default };
  286. //# sourceMappingURL=dropdown2.mjs.map