924587ebcadb7250ab6e458edcfa269a2eb2dba5e49a82dc673ad87bcaaa32917b4f6a3ab4dd91e11e4415833728564d37590306b2997039eb11e2b3dc3288 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. import { defineComponent, useAttrs, ref, computed, watch, nextTick, onMounted, openBlock, createBlock, unref, withCtx, withDirectives, createElementBlock, normalizeClass, normalizeStyle, createVNode, createSlots, withModifiers, resolveDynamicComponent, renderSlot, Fragment, renderList, toDisplayString, createElementVNode, withKeys, vModelText, createCommentVNode, isRef, vShow } from 'vue';
  2. import { cloneDeep, debounce } from 'lodash-unified';
  3. import { useCssVar, useResizeObserver, isClient } from '@vueuse/core';
  4. import { ElCascaderPanel } from '../../cascader-panel/index.mjs';
  5. import { ElInput } from '../../input/index.mjs';
  6. import { ElTooltip } from '../../tooltip/index.mjs';
  7. import { ElScrollbar } from '../../scrollbar/index.mjs';
  8. import { ElTag } from '../../tag/index.mjs';
  9. import { ElIcon } from '../../icon/index.mjs';
  10. import { ArrowDown, Check } from '@element-plus/icons-vue';
  11. import { cascaderProps, cascaderEmits } from './cascader.mjs';
  12. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  13. import ClickOutside from '../../../directives/click-outside/index.mjs';
  14. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  15. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  16. import { useFormItem } from '../../form/src/hooks/use-form-item.mjs';
  17. import { useFormDisabled, useFormSize } from '../../form/src/hooks/use-form-common-props.mjs';
  18. import { useEmptyValues } from '../../../hooks/use-empty-values/index.mjs';
  19. import { useComposition } from '../../../hooks/use-composition/index.mjs';
  20. import { useFocusController } from '../../../hooks/use-focus-controller/index.mjs';
  21. import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
  22. import { debugWarn } from '../../../utils/error.mjs';
  23. import { isPromise } from '@vue/shared';
  24. import { EVENT_CODE } from '../../../constants/aria.mjs';
  25. import { focusNode, getSibling } from '../../../utils/dom/aria.mjs';
  26. const COMPONENT_NAME = "ElCascader";
  27. const __default__ = defineComponent({
  28. name: COMPONENT_NAME
  29. });
  30. const _sfc_main = /* @__PURE__ */ defineComponent({
  31. ...__default__,
  32. props: cascaderProps,
  33. emits: cascaderEmits,
  34. setup(__props, { expose, emit }) {
  35. const props = __props;
  36. const popperOptions = {
  37. modifiers: [
  38. {
  39. name: "arrowPosition",
  40. enabled: true,
  41. phase: "main",
  42. fn: ({ state }) => {
  43. const { modifiersData, placement } = state;
  44. if (["right", "left", "bottom", "top"].includes(placement))
  45. return;
  46. if (modifiersData.arrow) {
  47. modifiersData.arrow.x = 35;
  48. }
  49. },
  50. requires: ["arrow"]
  51. }
  52. ]
  53. };
  54. const attrs = useAttrs();
  55. let inputInitialHeight = 0;
  56. let pressDeleteCount = 0;
  57. const nsCascader = useNamespace("cascader");
  58. const nsInput = useNamespace("input");
  59. const { t } = useLocale();
  60. const { formItem } = useFormItem();
  61. const isDisabled = useFormDisabled();
  62. const { valueOnClear } = useEmptyValues(props);
  63. const { isComposing, handleComposition } = useComposition({
  64. afterComposition(event) {
  65. var _a;
  66. const text = (_a = event.target) == null ? void 0 : _a.value;
  67. handleInput(text);
  68. }
  69. });
  70. const tooltipRef = ref(null);
  71. const tagTooltipRef = ref();
  72. const inputRef = ref();
  73. const tagWrapper = ref(null);
  74. const cascaderPanelRef = ref(null);
  75. const suggestionPanel = ref(null);
  76. const popperVisible = ref(false);
  77. const inputHover = ref(false);
  78. const filtering = ref(false);
  79. const inputValue = ref("");
  80. const searchInputValue = ref("");
  81. const presentTags = ref([]);
  82. const allPresentTags = ref([]);
  83. const suggestions = ref([]);
  84. const cascaderStyle = computed(() => {
  85. return attrs.style;
  86. });
  87. const inputPlaceholder = computed(() => {
  88. var _a;
  89. return (_a = props.placeholder) != null ? _a : t("el.cascader.placeholder");
  90. });
  91. const currentPlaceholder = computed(() => searchInputValue.value || presentTags.value.length > 0 || isComposing.value ? "" : inputPlaceholder.value);
  92. const realSize = useFormSize();
  93. const tagSize = computed(() => realSize.value === "small" ? "small" : "default");
  94. const multiple = computed(() => !!props.props.multiple);
  95. const readonly = computed(() => !props.filterable || multiple.value);
  96. const searchKeyword = computed(() => multiple.value ? searchInputValue.value : inputValue.value);
  97. const checkedNodes = computed(() => {
  98. var _a;
  99. return ((_a = cascaderPanelRef.value) == null ? void 0 : _a.checkedNodes) || [];
  100. });
  101. const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
  102. disabled: isDisabled,
  103. beforeBlur(event) {
  104. var _a, _b, _c;
  105. return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_c = (_b = tagTooltipRef.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.isFocusInsideContent(event));
  106. },
  107. afterBlur() {
  108. var _a;
  109. popperVisible.value = false;
  110. if (props.validateEvent) {
  111. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
  112. }
  113. }
  114. });
  115. const clearBtnVisible = computed(() => {
  116. if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value && !isFocused.value)
  117. return false;
  118. return !!checkedNodes.value.length;
  119. });
  120. const presentText = computed(() => {
  121. const { showAllLevels, separator } = props;
  122. const nodes = checkedNodes.value;
  123. return nodes.length ? multiple.value ? "" : nodes[0].calcText(showAllLevels, separator) : "";
  124. });
  125. const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
  126. const checkedValue = computed({
  127. get() {
  128. return cloneDeep(props.modelValue);
  129. },
  130. set(val) {
  131. const value = val != null ? val : valueOnClear.value;
  132. emit(UPDATE_MODEL_EVENT, value);
  133. emit(CHANGE_EVENT, value);
  134. if (props.validateEvent) {
  135. formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
  136. }
  137. }
  138. });
  139. const cascaderKls = computed(() => {
  140. return [
  141. nsCascader.b(),
  142. nsCascader.m(realSize.value),
  143. nsCascader.is("disabled", isDisabled.value),
  144. attrs.class
  145. ];
  146. });
  147. const cascaderIconKls = computed(() => {
  148. return [
  149. nsInput.e("icon"),
  150. "icon-arrow-down",
  151. nsCascader.is("reverse", popperVisible.value)
  152. ];
  153. });
  154. const inputClass = computed(() => nsCascader.is("focus", isFocused.value));
  155. const contentRef = computed(() => {
  156. var _a, _b;
  157. return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
  158. });
  159. const handleClickOutside = (event) => {
  160. if (isFocused.value) {
  161. const _event = new FocusEvent("blur", event);
  162. handleBlur(_event);
  163. }
  164. togglePopperVisible(false);
  165. };
  166. const togglePopperVisible = (visible) => {
  167. var _a, _b, _c;
  168. if (isDisabled.value)
  169. return;
  170. visible = visible != null ? visible : !popperVisible.value;
  171. if (visible !== popperVisible.value) {
  172. popperVisible.value = visible;
  173. (_b = (_a = inputRef.value) == null ? void 0 : _a.input) == null ? void 0 : _b.setAttribute("aria-expanded", `${visible}`);
  174. if (visible) {
  175. updatePopperPosition();
  176. nextTick((_c = cascaderPanelRef.value) == null ? void 0 : _c.scrollToExpandingNode);
  177. } else if (props.filterable) {
  178. syncPresentTextValue();
  179. }
  180. emit("visibleChange", visible);
  181. }
  182. };
  183. const updatePopperPosition = () => {
  184. nextTick(() => {
  185. var _a;
  186. (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
  187. });
  188. };
  189. const hideSuggestionPanel = () => {
  190. filtering.value = false;
  191. };
  192. const genTag = (node) => {
  193. const { showAllLevels, separator } = props;
  194. return {
  195. node,
  196. key: node.uid,
  197. text: node.calcText(showAllLevels, separator),
  198. hitState: false,
  199. closable: !isDisabled.value && !node.isDisabled,
  200. isCollapseTag: false
  201. };
  202. };
  203. const deleteTag = (tag) => {
  204. var _a;
  205. const node = tag.node;
  206. node.doCheck(false);
  207. (_a = cascaderPanelRef.value) == null ? void 0 : _a.calculateCheckedValue();
  208. emit("removeTag", node.valueByOption);
  209. };
  210. const getStrategyCheckedNodes = () => {
  211. switch (props.showCheckedStrategy) {
  212. case "child":
  213. return checkedNodes.value;
  214. case "parent": {
  215. const clickedNodes = getCheckedNodes(false);
  216. const clickedNodesValue = clickedNodes.map((o) => o.value);
  217. const parentNodes = clickedNodes.filter((o) => !o.parent || !clickedNodesValue.includes(o.parent.value));
  218. return parentNodes;
  219. }
  220. default:
  221. return [];
  222. }
  223. };
  224. const calculatePresentTags = () => {
  225. if (!multiple.value)
  226. return;
  227. const nodes = getStrategyCheckedNodes();
  228. const tags = [];
  229. const allTags = [];
  230. nodes.forEach((node) => allTags.push(genTag(node)));
  231. allPresentTags.value = allTags;
  232. if (nodes.length) {
  233. nodes.slice(0, props.maxCollapseTags).forEach((node) => tags.push(genTag(node)));
  234. const rest = nodes.slice(props.maxCollapseTags);
  235. const restCount = rest.length;
  236. if (restCount) {
  237. if (props.collapseTags) {
  238. tags.push({
  239. key: -1,
  240. text: `+ ${restCount}`,
  241. closable: false,
  242. isCollapseTag: true
  243. });
  244. } else {
  245. rest.forEach((node) => tags.push(genTag(node)));
  246. }
  247. }
  248. }
  249. presentTags.value = tags;
  250. };
  251. const calculateSuggestions = () => {
  252. var _a, _b;
  253. const { filterMethod, showAllLevels, separator } = props;
  254. const res = (_b = (_a = cascaderPanelRef.value) == null ? void 0 : _a.getFlattedNodes(!props.props.checkStrictly)) == null ? void 0 : _b.filter((node) => {
  255. if (node.isDisabled)
  256. return false;
  257. node.calcText(showAllLevels, separator);
  258. return filterMethod(node, searchKeyword.value);
  259. });
  260. if (multiple.value) {
  261. presentTags.value.forEach((tag) => {
  262. tag.hitState = false;
  263. });
  264. allPresentTags.value.forEach((tag) => {
  265. tag.hitState = false;
  266. });
  267. }
  268. filtering.value = true;
  269. suggestions.value = res;
  270. updatePopperPosition();
  271. };
  272. const focusFirstNode = () => {
  273. var _a;
  274. let firstNode;
  275. if (filtering.value && suggestionPanel.value) {
  276. firstNode = suggestionPanel.value.$el.querySelector(`.${nsCascader.e("suggestion-item")}`);
  277. } else {
  278. firstNode = (_a = cascaderPanelRef.value) == null ? void 0 : _a.$el.querySelector(`.${nsCascader.b("node")}[tabindex="-1"]`);
  279. }
  280. if (firstNode) {
  281. firstNode.focus();
  282. !filtering.value && firstNode.click();
  283. }
  284. };
  285. const updateStyle = () => {
  286. var _a, _b;
  287. const inputInner = (_a = inputRef.value) == null ? void 0 : _a.input;
  288. const tagWrapperEl = tagWrapper.value;
  289. const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el;
  290. if (!isClient || !inputInner)
  291. return;
  292. if (suggestionPanelEl) {
  293. const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`);
  294. suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
  295. }
  296. if (tagWrapperEl) {
  297. const { offsetHeight } = tagWrapperEl;
  298. const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight, inputInitialHeight) - 2}px` : `${inputInitialHeight}px`;
  299. inputInner.style.height = height;
  300. updatePopperPosition();
  301. }
  302. };
  303. const getCheckedNodes = (leafOnly) => {
  304. var _a;
  305. return (_a = cascaderPanelRef.value) == null ? void 0 : _a.getCheckedNodes(leafOnly);
  306. };
  307. const handleExpandChange = (value) => {
  308. updatePopperPosition();
  309. emit("expandChange", value);
  310. };
  311. const handleKeyDown = (e) => {
  312. if (isComposing.value)
  313. return;
  314. switch (e.code) {
  315. case EVENT_CODE.enter:
  316. case EVENT_CODE.numpadEnter:
  317. togglePopperVisible();
  318. break;
  319. case EVENT_CODE.down:
  320. togglePopperVisible(true);
  321. nextTick(focusFirstNode);
  322. e.preventDefault();
  323. break;
  324. case EVENT_CODE.esc:
  325. if (popperVisible.value === true) {
  326. e.preventDefault();
  327. e.stopPropagation();
  328. togglePopperVisible(false);
  329. }
  330. break;
  331. case EVENT_CODE.tab:
  332. togglePopperVisible(false);
  333. break;
  334. }
  335. };
  336. const handleClear = () => {
  337. var _a;
  338. (_a = cascaderPanelRef.value) == null ? void 0 : _a.clearCheckedNodes();
  339. if (!popperVisible.value && props.filterable) {
  340. syncPresentTextValue();
  341. }
  342. togglePopperVisible(false);
  343. emit("clear");
  344. };
  345. const syncPresentTextValue = () => {
  346. const { value } = presentText;
  347. inputValue.value = value;
  348. searchInputValue.value = value;
  349. };
  350. const handleSuggestionClick = (node) => {
  351. var _a, _b;
  352. const { checked } = node;
  353. if (multiple.value) {
  354. (_a = cascaderPanelRef.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false);
  355. } else {
  356. !checked && ((_b = cascaderPanelRef.value) == null ? void 0 : _b.handleCheckChange(node, true, false));
  357. togglePopperVisible(false);
  358. }
  359. };
  360. const handleSuggestionKeyDown = (e) => {
  361. const target = e.target;
  362. const { code } = e;
  363. switch (code) {
  364. case EVENT_CODE.up:
  365. case EVENT_CODE.down: {
  366. e.preventDefault();
  367. const distance = code === EVENT_CODE.up ? -1 : 1;
  368. focusNode(getSibling(target, distance, `.${nsCascader.e("suggestion-item")}[tabindex="-1"]`));
  369. break;
  370. }
  371. case EVENT_CODE.enter:
  372. case EVENT_CODE.numpadEnter:
  373. target.click();
  374. break;
  375. }
  376. };
  377. const handleDelete = () => {
  378. const tags = presentTags.value;
  379. const lastTag = tags[tags.length - 1];
  380. pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1;
  381. if (!lastTag || !pressDeleteCount || props.collapseTags && tags.length > 1)
  382. return;
  383. if (lastTag.hitState) {
  384. deleteTag(lastTag);
  385. } else {
  386. lastTag.hitState = true;
  387. }
  388. };
  389. const handleFilter = debounce(() => {
  390. const { value } = searchKeyword;
  391. if (!value)
  392. return;
  393. const passed = props.beforeFilter(value);
  394. if (isPromise(passed)) {
  395. passed.then(calculateSuggestions).catch(() => {
  396. });
  397. } else if (passed !== false) {
  398. calculateSuggestions();
  399. } else {
  400. hideSuggestionPanel();
  401. }
  402. }, props.debounce);
  403. const handleInput = (val, e) => {
  404. !popperVisible.value && togglePopperVisible(true);
  405. if (e == null ? void 0 : e.isComposing)
  406. return;
  407. val ? handleFilter() : hideSuggestionPanel();
  408. };
  409. const getInputInnerHeight = (inputInner) => Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2;
  410. watch(filtering, updatePopperPosition);
  411. watch([
  412. checkedNodes,
  413. isDisabled,
  414. () => props.collapseTags,
  415. () => props.maxCollapseTags
  416. ], calculatePresentTags);
  417. watch(presentTags, () => {
  418. nextTick(() => updateStyle());
  419. });
  420. watch(realSize, async () => {
  421. await nextTick();
  422. const inputInner = inputRef.value.input;
  423. inputInitialHeight = getInputInnerHeight(inputInner) || inputInitialHeight;
  424. updateStyle();
  425. });
  426. watch(presentText, syncPresentTextValue, { immediate: true });
  427. onMounted(() => {
  428. const inputInner = inputRef.value.input;
  429. const inputInnerHeight = getInputInnerHeight(inputInner);
  430. inputInitialHeight = inputInner.offsetHeight || inputInnerHeight;
  431. useResizeObserver(inputInner, updateStyle);
  432. });
  433. expose({
  434. getCheckedNodes,
  435. cascaderPanelRef,
  436. togglePopperVisible,
  437. contentRef,
  438. presentText
  439. });
  440. return (_ctx, _cache) => {
  441. return openBlock(), createBlock(unref(ElTooltip), {
  442. ref_key: "tooltipRef",
  443. ref: tooltipRef,
  444. visible: popperVisible.value,
  445. teleported: _ctx.teleported,
  446. "popper-class": [unref(nsCascader).e("dropdown"), _ctx.popperClass],
  447. "popper-style": _ctx.popperStyle,
  448. "popper-options": popperOptions,
  449. "fallback-placements": _ctx.fallbackPlacements,
  450. "stop-popper-mouse-event": false,
  451. "gpu-acceleration": false,
  452. placement: _ctx.placement,
  453. transition: `${unref(nsCascader).namespace.value}-zoom-in-top`,
  454. effect: _ctx.effect,
  455. pure: "",
  456. persistent: _ctx.persistent,
  457. onHide: hideSuggestionPanel
  458. }, {
  459. default: withCtx(() => [
  460. withDirectives((openBlock(), createElementBlock("div", {
  461. ref_key: "wrapperRef",
  462. ref: wrapperRef,
  463. class: normalizeClass(unref(cascaderKls)),
  464. style: normalizeStyle(unref(cascaderStyle)),
  465. onClick: () => togglePopperVisible(unref(readonly) ? void 0 : true),
  466. onKeydown: handleKeyDown,
  467. onMouseenter: ($event) => inputHover.value = true,
  468. onMouseleave: ($event) => inputHover.value = false
  469. }, [
  470. createVNode(unref(ElInput), {
  471. ref_key: "inputRef",
  472. ref: inputRef,
  473. modelValue: inputValue.value,
  474. "onUpdate:modelValue": ($event) => inputValue.value = $event,
  475. placeholder: unref(currentPlaceholder),
  476. readonly: unref(readonly),
  477. disabled: unref(isDisabled),
  478. "validate-event": false,
  479. size: unref(realSize),
  480. class: normalizeClass(unref(inputClass)),
  481. tabindex: unref(multiple) && _ctx.filterable && !unref(isDisabled) ? -1 : void 0,
  482. onCompositionstart: unref(handleComposition),
  483. onCompositionupdate: unref(handleComposition),
  484. onCompositionend: unref(handleComposition),
  485. onInput: handleInput
  486. }, createSlots({
  487. suffix: withCtx(() => [
  488. unref(clearBtnVisible) ? (openBlock(), createBlock(unref(ElIcon), {
  489. key: "clear",
  490. class: normalizeClass([unref(nsInput).e("icon"), "icon-circle-close"]),
  491. onClick: withModifiers(handleClear, ["stop"])
  492. }, {
  493. default: withCtx(() => [
  494. (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
  495. ]),
  496. _: 1
  497. }, 8, ["class", "onClick"])) : (openBlock(), createBlock(unref(ElIcon), {
  498. key: "arrow-down",
  499. class: normalizeClass(unref(cascaderIconKls)),
  500. onClick: withModifiers(($event) => togglePopperVisible(), ["stop"])
  501. }, {
  502. default: withCtx(() => [
  503. createVNode(unref(ArrowDown))
  504. ]),
  505. _: 1
  506. }, 8, ["class", "onClick"]))
  507. ]),
  508. _: 2
  509. }, [
  510. _ctx.$slots.prefix ? {
  511. name: "prefix",
  512. fn: withCtx(() => [
  513. renderSlot(_ctx.$slots, "prefix")
  514. ])
  515. } : void 0
  516. ]), 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "readonly", "disabled", "size", "class", "tabindex", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
  517. unref(multiple) ? (openBlock(), createElementBlock("div", {
  518. key: 0,
  519. ref_key: "tagWrapper",
  520. ref: tagWrapper,
  521. class: normalizeClass([
  522. unref(nsCascader).e("tags"),
  523. unref(nsCascader).is("validate", Boolean(unref(validateState)))
  524. ])
  525. }, [
  526. renderSlot(_ctx.$slots, "tag", {
  527. data: allPresentTags.value,
  528. deleteTag
  529. }, () => [
  530. (openBlock(true), createElementBlock(Fragment, null, renderList(presentTags.value, (tag) => {
  531. return openBlock(), createBlock(unref(ElTag), {
  532. key: tag.key,
  533. type: _ctx.tagType,
  534. size: unref(tagSize),
  535. effect: _ctx.tagEffect,
  536. hit: tag.hitState,
  537. closable: tag.closable,
  538. "disable-transitions": "",
  539. onClose: ($event) => deleteTag(tag)
  540. }, {
  541. default: withCtx(() => [
  542. tag.isCollapseTag === false ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(tag.text), 1)) : (openBlock(), createBlock(unref(ElTooltip), {
  543. key: 1,
  544. ref_for: true,
  545. ref_key: "tagTooltipRef",
  546. ref: tagTooltipRef,
  547. disabled: popperVisible.value || !_ctx.collapseTagsTooltip,
  548. "fallback-placements": ["bottom", "top", "right", "left"],
  549. placement: "bottom",
  550. "popper-class": _ctx.popperClass,
  551. "popper-style": _ctx.popperStyle,
  552. effect: _ctx.effect
  553. }, {
  554. default: withCtx(() => [
  555. createElementVNode("span", null, toDisplayString(tag.text), 1)
  556. ]),
  557. content: withCtx(() => [
  558. createVNode(unref(ElScrollbar), { "max-height": _ctx.maxCollapseTagsTooltipHeight }, {
  559. default: withCtx(() => [
  560. createElementVNode("div", {
  561. class: normalizeClass(unref(nsCascader).e("collapse-tags"))
  562. }, [
  563. (openBlock(true), createElementBlock(Fragment, null, renderList(allPresentTags.value.slice(_ctx.maxCollapseTags), (tag2, idx) => {
  564. return openBlock(), createElementBlock("div", {
  565. key: idx,
  566. class: normalizeClass(unref(nsCascader).e("collapse-tag"))
  567. }, [
  568. (openBlock(), createBlock(unref(ElTag), {
  569. key: tag2.key,
  570. class: "in-tooltip",
  571. type: _ctx.tagType,
  572. size: unref(tagSize),
  573. effect: _ctx.tagEffect,
  574. hit: tag2.hitState,
  575. closable: tag2.closable,
  576. "disable-transitions": "",
  577. onClose: ($event) => deleteTag(tag2)
  578. }, {
  579. default: withCtx(() => [
  580. createElementVNode("span", null, toDisplayString(tag2.text), 1)
  581. ]),
  582. _: 2
  583. }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]))
  584. ], 2);
  585. }), 128))
  586. ], 2)
  587. ]),
  588. _: 1
  589. }, 8, ["max-height"])
  590. ]),
  591. _: 2
  592. }, 1032, ["disabled", "popper-class", "popper-style", "effect"]))
  593. ]),
  594. _: 2
  595. }, 1032, ["type", "size", "effect", "hit", "closable", "onClose"]);
  596. }), 128))
  597. ]),
  598. _ctx.filterable && !unref(isDisabled) ? withDirectives((openBlock(), createElementBlock("input", {
  599. key: 0,
  600. "onUpdate:modelValue": ($event) => searchInputValue.value = $event,
  601. type: "text",
  602. class: normalizeClass(unref(nsCascader).e("search-input")),
  603. placeholder: unref(presentText) ? "" : unref(inputPlaceholder),
  604. onInput: (e) => handleInput(searchInputValue.value, e),
  605. onClick: withModifiers(($event) => togglePopperVisible(true), ["stop"]),
  606. onKeydown: withKeys(handleDelete, ["delete"]),
  607. onCompositionstart: unref(handleComposition),
  608. onCompositionupdate: unref(handleComposition),
  609. onCompositionend: unref(handleComposition)
  610. }, null, 42, ["onUpdate:modelValue", "placeholder", "onInput", "onClick", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend"])), [
  611. [vModelText, searchInputValue.value]
  612. ]) : createCommentVNode("v-if", true)
  613. ], 2)) : createCommentVNode("v-if", true)
  614. ], 46, ["onClick", "onMouseenter", "onMouseleave"])), [
  615. [unref(ClickOutside), handleClickOutside, unref(contentRef)]
  616. ])
  617. ]),
  618. content: withCtx(() => [
  619. _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
  620. key: 0,
  621. class: normalizeClass(unref(nsCascader).e("header")),
  622. onClick: withModifiers(() => {
  623. }, ["stop"])
  624. }, [
  625. renderSlot(_ctx.$slots, "header")
  626. ], 10, ["onClick"])) : createCommentVNode("v-if", true),
  627. withDirectives(createVNode(unref(ElCascaderPanel), {
  628. ref_key: "cascaderPanelRef",
  629. ref: cascaderPanelRef,
  630. modelValue: unref(checkedValue),
  631. "onUpdate:modelValue": ($event) => isRef(checkedValue) ? checkedValue.value = $event : null,
  632. options: _ctx.options,
  633. props: props.props,
  634. border: false,
  635. "render-label": _ctx.$slots.default,
  636. onExpandChange: handleExpandChange,
  637. onClose: ($event) => _ctx.$nextTick(() => togglePopperVisible(false))
  638. }, {
  639. empty: withCtx(() => [
  640. renderSlot(_ctx.$slots, "empty")
  641. ]),
  642. _: 3
  643. }, 8, ["modelValue", "onUpdate:modelValue", "options", "props", "render-label", "onClose"]), [
  644. [vShow, !filtering.value]
  645. ]),
  646. _ctx.filterable ? withDirectives((openBlock(), createBlock(unref(ElScrollbar), {
  647. key: 1,
  648. ref_key: "suggestionPanel",
  649. ref: suggestionPanel,
  650. tag: "ul",
  651. class: normalizeClass(unref(nsCascader).e("suggestion-panel")),
  652. "view-class": unref(nsCascader).e("suggestion-list"),
  653. onKeydown: handleSuggestionKeyDown
  654. }, {
  655. default: withCtx(() => [
  656. suggestions.value.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(suggestions.value, (item) => {
  657. return openBlock(), createElementBlock("li", {
  658. key: item.uid,
  659. class: normalizeClass([
  660. unref(nsCascader).e("suggestion-item"),
  661. unref(nsCascader).is("checked", item.checked)
  662. ]),
  663. tabindex: -1,
  664. onClick: ($event) => handleSuggestionClick(item)
  665. }, [
  666. renderSlot(_ctx.$slots, "suggestion-item", { item }, () => [
  667. createElementVNode("span", null, toDisplayString(item.text), 1),
  668. item.checked ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
  669. default: withCtx(() => [
  670. createVNode(unref(Check))
  671. ]),
  672. _: 1
  673. })) : createCommentVNode("v-if", true)
  674. ])
  675. ], 10, ["onClick"]);
  676. }), 128)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
  677. createElementVNode("li", {
  678. class: normalizeClass(unref(nsCascader).e("empty-text"))
  679. }, toDisplayString(unref(t)("el.cascader.noMatch")), 3)
  680. ])
  681. ]),
  682. _: 3
  683. }, 8, ["class", "view-class"])), [
  684. [vShow, filtering.value]
  685. ]) : createCommentVNode("v-if", true),
  686. _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
  687. key: 2,
  688. class: normalizeClass(unref(nsCascader).e("footer")),
  689. onClick: withModifiers(() => {
  690. }, ["stop"])
  691. }, [
  692. renderSlot(_ctx.$slots, "footer")
  693. ], 10, ["onClick"])) : createCommentVNode("v-if", true)
  694. ]),
  695. _: 3
  696. }, 8, ["visible", "teleported", "popper-class", "popper-style", "fallback-placements", "placement", "transition", "effect", "persistent"]);
  697. };
  698. }
  699. });
  700. var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "cascader.vue"]]);
  701. export { Cascader as default };
  702. //# sourceMappingURL=cascader2.mjs.map