index.js 27 KB

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