58e5bd1232d04d08e9c542eba6a129d12b0b4921ea5af5d3a2f382b848a6f08a8ac22a0e27eb0578056c0414c82e1363cfe6ad8352ea963eba974c75518d4c 11 KB

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