d66f3f19e70fb1eb477bd3eaefe645ba897c81882f96f30de9afe40124342a3bc7fd07dc9c7ae98062373f0accb566f690bba8d76ab4c81aa7209686d46de5 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. import { defineComponent, computed, reactive, toRefs, provide, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, withModifiers, renderSlot, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, createBlock, withKeys, vModelText, resolveDynamicComponent, vShow, createSlots, normalizeProps, guardReactiveProps } from 'vue';
  2. import { ElTooltip } from '../../tooltip/index.mjs';
  3. import { ElTag } from '../../tag/index.mjs';
  4. import { ElIcon } from '../../icon/index.mjs';
  5. import ElSelectMenu from './select-dropdown.mjs';
  6. import useSelect from './useSelect.mjs';
  7. import { selectV2Props, selectV2Emits } from './defaults.mjs';
  8. import { selectV2InjectionKey } from './token.mjs';
  9. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  10. import ClickOutside from '../../../directives/click-outside/index.mjs';
  11. import { isArray } from '@vue/shared';
  12. import { useCalcInputWidth } from '../../../hooks/use-calc-input-width/index.mjs';
  13. import { BORDER_HORIZONTAL_WIDTH } from '../../../constants/form.mjs';
  14. const _sfc_main = defineComponent({
  15. name: "ElSelectV2",
  16. components: {
  17. ElSelectMenu,
  18. ElTag,
  19. ElTooltip,
  20. ElIcon
  21. },
  22. directives: { ClickOutside },
  23. props: selectV2Props,
  24. emits: selectV2Emits,
  25. setup(props, { emit }) {
  26. const modelValue = computed(() => {
  27. const { modelValue: rawModelValue, multiple } = props;
  28. const fallback = multiple ? [] : void 0;
  29. if (isArray(rawModelValue)) {
  30. return multiple ? rawModelValue : fallback;
  31. }
  32. return multiple ? fallback : rawModelValue;
  33. });
  34. const API = useSelect(reactive({
  35. ...toRefs(props),
  36. modelValue
  37. }), emit);
  38. const { calculatorRef, inputStyle } = useCalcInputWidth();
  39. provide(selectV2InjectionKey, {
  40. props: reactive({
  41. ...toRefs(props),
  42. height: API.popupHeight,
  43. modelValue
  44. }),
  45. expanded: API.expanded,
  46. tooltipRef: API.tooltipRef,
  47. onSelect: API.onSelect,
  48. onHover: API.onHover,
  49. onKeyboardNavigate: API.onKeyboardNavigate,
  50. onKeyboardSelect: API.onKeyboardSelect
  51. });
  52. const selectedLabel = computed(() => {
  53. if (!props.multiple) {
  54. return API.states.selectedLabel;
  55. }
  56. return API.states.cachedOptions.map((i) => i.label);
  57. });
  58. return {
  59. ...API,
  60. modelValue,
  61. selectedLabel,
  62. calculatorRef,
  63. inputStyle,
  64. BORDER_HORIZONTAL_WIDTH
  65. };
  66. }
  67. });
  68. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  69. const _component_el_tag = resolveComponent("el-tag");
  70. const _component_el_tooltip = resolveComponent("el-tooltip");
  71. const _component_el_icon = resolveComponent("el-icon");
  72. const _component_el_select_menu = resolveComponent("el-select-menu");
  73. const _directive_click_outside = resolveDirective("click-outside");
  74. return withDirectives((openBlock(), createElementBlock("div", {
  75. ref: "selectRef",
  76. class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
  77. onMouseenter: ($event) => _ctx.states.inputHovering = true,
  78. onMouseleave: ($event) => _ctx.states.inputHovering = false
  79. }, [
  80. createVNode(_component_el_tooltip, {
  81. ref: "tooltipRef",
  82. visible: _ctx.dropdownMenuVisible,
  83. teleported: _ctx.teleported,
  84. "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
  85. "popper-style": _ctx.popperStyle,
  86. "gpu-acceleration": false,
  87. "stop-popper-mouse-event": false,
  88. "popper-options": _ctx.popperOptions,
  89. "fallback-placements": _ctx.fallbackPlacements,
  90. effect: _ctx.effect,
  91. placement: _ctx.placement,
  92. pure: "",
  93. transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
  94. trigger: "click",
  95. persistent: _ctx.persistent,
  96. "append-to": _ctx.appendTo,
  97. "show-arrow": _ctx.showArrow,
  98. offset: _ctx.offset,
  99. onBeforeShow: _ctx.handleMenuEnter,
  100. onHide: ($event) => _ctx.states.isBeforeHide = false
  101. }, {
  102. default: withCtx(() => {
  103. var _a, _b;
  104. return [
  105. createElementVNode("div", {
  106. ref: "wrapperRef",
  107. class: normalizeClass([
  108. _ctx.nsSelect.e("wrapper"),
  109. _ctx.nsSelect.is("focused", _ctx.isFocused),
  110. _ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
  111. _ctx.nsSelect.is("filterable", _ctx.filterable),
  112. _ctx.nsSelect.is("disabled", _ctx.selectDisabled)
  113. ]),
  114. onClick: withModifiers(_ctx.toggleMenu, ["prevent"])
  115. }, [
  116. _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
  117. key: 0,
  118. ref: "prefixRef",
  119. class: normalizeClass(_ctx.nsSelect.e("prefix"))
  120. }, [
  121. renderSlot(_ctx.$slots, "prefix")
  122. ], 2)) : createCommentVNode("v-if", true),
  123. createElementVNode("div", {
  124. ref: "selectionRef",
  125. class: normalizeClass([
  126. _ctx.nsSelect.e("selection"),
  127. _ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.modelValue.length)
  128. ])
  129. }, [
  130. _ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
  131. key: 0,
  132. data: _ctx.states.cachedOptions,
  133. deleteTag: _ctx.deleteTag,
  134. selectDisabled: _ctx.selectDisabled
  135. }, () => [
  136. (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
  137. return openBlock(), createElementBlock("div", {
  138. key: _ctx.getValueKey(_ctx.getValue(item)),
  139. class: normalizeClass(_ctx.nsSelect.e("selected-item"))
  140. }, [
  141. createVNode(_component_el_tag, {
  142. closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
  143. size: _ctx.collapseTagSize,
  144. type: _ctx.tagType,
  145. effect: _ctx.tagEffect,
  146. "disable-transitions": "",
  147. style: normalizeStyle(_ctx.tagStyle),
  148. onClose: ($event) => _ctx.deleteTag($event, item)
  149. }, {
  150. default: withCtx(() => [
  151. createElementVNode("span", {
  152. class: normalizeClass(_ctx.nsSelect.e("tags-text"))
  153. }, [
  154. renderSlot(_ctx.$slots, "label", {
  155. index: _ctx.getIndex(item),
  156. label: _ctx.getLabel(item),
  157. value: _ctx.getValue(item)
  158. }, () => [
  159. createTextVNode(toDisplayString(_ctx.getLabel(item)), 1)
  160. ])
  161. ], 2)
  162. ]),
  163. _: 2
  164. }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
  165. ], 2);
  166. }), 128)),
  167. _ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
  168. key: 0,
  169. ref: "tagTooltipRef",
  170. disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
  171. "fallback-placements": ["bottom", "top", "right", "left"],
  172. effect: _ctx.effect,
  173. placement: "bottom",
  174. "popper-class": _ctx.popperClass,
  175. "popper-style": _ctx.popperStyle,
  176. teleported: _ctx.teleported
  177. }, {
  178. default: withCtx(() => [
  179. createElementVNode("div", {
  180. ref: "collapseItemRef",
  181. class: normalizeClass(_ctx.nsSelect.e("selected-item"))
  182. }, [
  183. createVNode(_component_el_tag, {
  184. closable: false,
  185. size: _ctx.collapseTagSize,
  186. type: _ctx.tagType,
  187. effect: _ctx.tagEffect,
  188. style: normalizeStyle(_ctx.collapseTagStyle),
  189. "disable-transitions": ""
  190. }, {
  191. default: withCtx(() => [
  192. createElementVNode("span", {
  193. class: normalizeClass(_ctx.nsSelect.e("tags-text"))
  194. }, " + " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 3)
  195. ]),
  196. _: 1
  197. }, 8, ["size", "type", "effect", "style"])
  198. ], 2)
  199. ]),
  200. content: withCtx(() => [
  201. createElementVNode("div", {
  202. ref: "tagMenuRef",
  203. class: normalizeClass(_ctx.nsSelect.e("selection"))
  204. }, [
  205. (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (selected) => {
  206. return openBlock(), createElementBlock("div", {
  207. key: _ctx.getValueKey(_ctx.getValue(selected)),
  208. class: normalizeClass(_ctx.nsSelect.e("selected-item"))
  209. }, [
  210. createVNode(_component_el_tag, {
  211. class: "in-tooltip",
  212. closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
  213. size: _ctx.collapseTagSize,
  214. type: _ctx.tagType,
  215. effect: _ctx.tagEffect,
  216. "disable-transitions": "",
  217. onClose: ($event) => _ctx.deleteTag($event, selected)
  218. }, {
  219. default: withCtx(() => [
  220. createElementVNode("span", {
  221. class: normalizeClass(_ctx.nsSelect.e("tags-text"))
  222. }, [
  223. renderSlot(_ctx.$slots, "label", {
  224. index: _ctx.getIndex(selected),
  225. label: _ctx.getLabel(selected),
  226. value: _ctx.getValue(selected)
  227. }, () => [
  228. createTextVNode(toDisplayString(_ctx.getLabel(selected)), 1)
  229. ])
  230. ], 2)
  231. ]),
  232. _: 2
  233. }, 1032, ["closable", "size", "type", "effect", "onClose"])
  234. ], 2);
  235. }), 128))
  236. ], 2)
  237. ]),
  238. _: 3
  239. }, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported"])) : createCommentVNode("v-if", true)
  240. ]) : createCommentVNode("v-if", true),
  241. createElementVNode("div", {
  242. class: normalizeClass([
  243. _ctx.nsSelect.e("selected-item"),
  244. _ctx.nsSelect.e("input-wrapper"),
  245. _ctx.nsSelect.is("hidden", !_ctx.filterable)
  246. ])
  247. }, [
  248. withDirectives(createElementVNode("input", {
  249. id: _ctx.inputId,
  250. ref: "inputRef",
  251. "onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
  252. style: normalizeStyle(_ctx.inputStyle),
  253. autocomplete: _ctx.autocomplete,
  254. tabindex: _ctx.tabindex,
  255. "aria-autocomplete": "list",
  256. "aria-haspopup": "listbox",
  257. autocapitalize: "off",
  258. "aria-expanded": _ctx.expanded,
  259. "aria-label": _ctx.ariaLabel,
  260. class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
  261. disabled: _ctx.selectDisabled,
  262. role: "combobox",
  263. readonly: !_ctx.filterable,
  264. spellcheck: "false",
  265. type: "text",
  266. name: _ctx.name,
  267. onInput: _ctx.onInput,
  268. onCompositionstart: _ctx.handleCompositionStart,
  269. onCompositionupdate: _ctx.handleCompositionUpdate,
  270. onCompositionend: _ctx.handleCompositionEnd,
  271. onKeydown: [
  272. withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"]),
  273. withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"]),
  274. withKeys(withModifiers(_ctx.onKeyboardSelect, ["stop", "prevent"]), ["enter"]),
  275. withKeys(withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
  276. withKeys(withModifiers(_ctx.handleDel, ["stop"]), ["delete"])
  277. ],
  278. onClick: withModifiers(_ctx.toggleMenu, ["stop"])
  279. }, null, 46, ["id", "onUpdate:modelValue", "autocomplete", "tabindex", "aria-expanded", "aria-label", "disabled", "readonly", "name", "onInput", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown", "onClick"]), [
  280. [vModelText, _ctx.states.inputValue]
  281. ]),
  282. _ctx.filterable ? (openBlock(), createElementBlock("span", {
  283. key: 0,
  284. ref: "calculatorRef",
  285. "aria-hidden": "true",
  286. class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
  287. textContent: toDisplayString(_ctx.states.inputValue)
  288. }, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
  289. ], 2),
  290. _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
  291. key: 1,
  292. class: normalizeClass([
  293. _ctx.nsSelect.e("selected-item"),
  294. _ctx.nsSelect.e("placeholder"),
  295. _ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
  296. ])
  297. }, [
  298. _ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
  299. key: 0,
  300. index: (_b = (_a = _ctx.allOptionsValueMap.get(_ctx.modelValue)) == null ? void 0 : _a.index) != null ? _b : -1,
  301. label: _ctx.currentPlaceholder,
  302. value: _ctx.modelValue
  303. }, () => [
  304. createElementVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
  305. ]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
  306. ], 2)) : createCommentVNode("v-if", true)
  307. ], 2),
  308. createElementVNode("div", {
  309. ref: "suffixRef",
  310. class: normalizeClass(_ctx.nsSelect.e("suffix"))
  311. }, [
  312. _ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_el_icon, {
  313. key: 0,
  314. class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse])
  315. }, {
  316. default: withCtx(() => [
  317. (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
  318. ]),
  319. _: 1
  320. }, 8, ["class"])), [
  321. [vShow, !_ctx.showClearBtn]
  322. ]) : createCommentVNode("v-if", true),
  323. _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
  324. key: 1,
  325. class: normalizeClass([
  326. _ctx.nsSelect.e("caret"),
  327. _ctx.nsInput.e("icon"),
  328. _ctx.nsSelect.e("clear")
  329. ]),
  330. onClick: withModifiers(_ctx.handleClear, ["prevent", "stop"])
  331. }, {
  332. default: withCtx(() => [
  333. (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
  334. ]),
  335. _: 1
  336. }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
  337. _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
  338. key: 2,
  339. class: normalizeClass([
  340. _ctx.nsInput.e("icon"),
  341. _ctx.nsInput.e("validateIcon"),
  342. _ctx.nsInput.is("loading", _ctx.validateState === "validating")
  343. ])
  344. }, {
  345. default: withCtx(() => [
  346. (openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
  347. ]),
  348. _: 1
  349. }, 8, ["class"])) : createCommentVNode("v-if", true)
  350. ], 2)
  351. ], 10, ["onClick"])
  352. ];
  353. }),
  354. content: withCtx(() => [
  355. createVNode(_component_el_select_menu, {
  356. ref: "menuRef",
  357. data: _ctx.filteredOptions,
  358. width: _ctx.popperSize - _ctx.BORDER_HORIZONTAL_WIDTH,
  359. "hovering-index": _ctx.states.hoveringIndex,
  360. "scrollbar-always-on": _ctx.scrollbarAlwaysOn
  361. }, createSlots({
  362. default: withCtx((scope) => [
  363. renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
  364. ]),
  365. _: 2
  366. }, [
  367. _ctx.$slots.header ? {
  368. name: "header",
  369. fn: withCtx(() => [
  370. createElementVNode("div", {
  371. class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
  372. onClick: withModifiers(() => {
  373. }, ["stop"])
  374. }, [
  375. renderSlot(_ctx.$slots, "header")
  376. ], 10, ["onClick"])
  377. ])
  378. } : void 0,
  379. _ctx.$slots.loading && _ctx.loading ? {
  380. name: "loading",
  381. fn: withCtx(() => [
  382. createElementVNode("div", {
  383. class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
  384. }, [
  385. renderSlot(_ctx.$slots, "loading")
  386. ], 2)
  387. ])
  388. } : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
  389. name: "empty",
  390. fn: withCtx(() => [
  391. createElementVNode("div", {
  392. class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
  393. }, [
  394. renderSlot(_ctx.$slots, "empty", {}, () => [
  395. createElementVNode("span", null, toDisplayString(_ctx.emptyText), 1)
  396. ])
  397. ], 2)
  398. ])
  399. } : void 0,
  400. _ctx.$slots.footer ? {
  401. name: "footer",
  402. fn: withCtx(() => [
  403. createElementVNode("div", {
  404. class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
  405. onClick: withModifiers(() => {
  406. }, ["stop"])
  407. }, [
  408. renderSlot(_ctx.$slots, "footer")
  409. ], 10, ["onClick"])
  410. ])
  411. } : void 0
  412. ]), 1032, ["data", "width", "hovering-index", "scrollbar-always-on"])
  413. ]),
  414. _: 3
  415. }, 8, ["visible", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "placement", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow", "onHide"])
  416. ], 42, ["onMouseenter", "onMouseleave"])), [
  417. [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
  418. ]);
  419. }
  420. var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "select.vue"]]);
  421. export { Select as default };
  422. //# sourceMappingURL=select.mjs.map