cascader.mjs 33 KB

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