b19e8a0769506c4aa88dc53f626c9cdbb7902611b09054b14db490404dd4f2206adff2d7fa77b9dd7cf4344bd83f954d7aeafed5966e98f43377e3bccfa123 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. import { defineComponent, useSlots, ref, computed, provide, reactive, watch, onBeforeUpdate, onMounted, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, renderSlot, nextTick } from 'vue';
  2. import { isEqual, flattenDeep, cloneDeep } from 'lodash-unified';
  3. import ElCascaderMenu from './menu.mjs';
  4. import Store from './store.mjs';
  5. import Node from './node.mjs';
  6. import { cascaderPanelProps, cascaderPanelEmits, useCascaderConfig } from './config.mjs';
  7. import { sortByOriginalOrder, checkNode, getMenuIndex } from './utils.mjs';
  8. import { CASCADER_PANEL_INJECTION_KEY } from './types.mjs';
  9. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  10. import { unique, castArray } from '../../../utils/arrays.mjs';
  11. import { scrollIntoView } from '../../../utils/dom/scroll.mjs';
  12. import { focusNode, getSibling } from '../../../utils/dom/aria.mjs';
  13. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  14. import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
  15. import { isEmpty } from '../../../utils/types.mjs';
  16. import { isClient } from '@vueuse/core';
  17. import { EVENT_CODE } from '../../../constants/aria.mjs';
  18. const __default__ = defineComponent({
  19. name: "ElCascaderPanel",
  20. inheritAttrs: false
  21. });
  22. const _sfc_main = /* @__PURE__ */ defineComponent({
  23. ...__default__,
  24. props: cascaderPanelProps,
  25. emits: cascaderPanelEmits,
  26. setup(__props, { expose, emit }) {
  27. const props = __props;
  28. let manualChecked = false;
  29. const ns = useNamespace("cascader");
  30. const config = useCascaderConfig(props);
  31. const slots = useSlots();
  32. let store;
  33. const initialLoaded = ref(true);
  34. const menuList = ref([]);
  35. const checkedValue = ref();
  36. const menus = ref([]);
  37. const expandingNode = ref();
  38. const checkedNodes = ref([]);
  39. const isHoverMenu = computed(() => config.value.expandTrigger === "hover");
  40. const renderLabelFn = computed(() => props.renderLabel || slots.default);
  41. const initStore = () => {
  42. const { options } = props;
  43. const cfg = config.value;
  44. manualChecked = false;
  45. store = new Store(options, cfg);
  46. menus.value = [store.getNodes()];
  47. if (cfg.lazy && isEmpty(props.options)) {
  48. initialLoaded.value = false;
  49. lazyLoad(void 0, (list) => {
  50. if (list) {
  51. store = new Store(list, cfg);
  52. menus.value = [store.getNodes()];
  53. }
  54. initialLoaded.value = true;
  55. syncCheckedValue(false, true);
  56. });
  57. } else {
  58. syncCheckedValue(false, true);
  59. }
  60. };
  61. const lazyLoad = (node, cb) => {
  62. const cfg = config.value;
  63. node = node || new Node({}, cfg, void 0, true);
  64. node.loading = true;
  65. const resolve = (dataList) => {
  66. const _node = node;
  67. const parent = _node.root ? null : _node;
  68. _node.loading = false;
  69. _node.loaded = true;
  70. _node.childrenData = _node.childrenData || [];
  71. dataList && (store == null ? void 0 : store.appendNodes(dataList, parent));
  72. dataList && (cb == null ? void 0 : cb(dataList));
  73. };
  74. cfg.lazyLoad(node, resolve);
  75. };
  76. const expandNode = (node, silent) => {
  77. var _a;
  78. const { level } = node;
  79. const newMenus = menus.value.slice(0, level);
  80. let newExpandingNode;
  81. if (node.isLeaf) {
  82. newExpandingNode = node.pathNodes[level - 2];
  83. } else {
  84. newExpandingNode = node;
  85. newMenus.push(node.children);
  86. }
  87. if (((_a = expandingNode.value) == null ? void 0 : _a.uid) !== (newExpandingNode == null ? void 0 : newExpandingNode.uid)) {
  88. expandingNode.value = node;
  89. menus.value = newMenus;
  90. !silent && emit("expand-change", (node == null ? void 0 : node.pathValues) || []);
  91. }
  92. };
  93. const handleCheckChange = (node, checked, emitClose = true) => {
  94. const { checkStrictly, multiple } = config.value;
  95. const oldNode = checkedNodes.value[0];
  96. manualChecked = true;
  97. !multiple && (oldNode == null ? void 0 : oldNode.doCheck(false));
  98. node.doCheck(checked);
  99. calculateCheckedValue();
  100. emitClose && !multiple && !checkStrictly && emit("close");
  101. !emitClose && !multiple && !checkStrictly && expandParentNode(node);
  102. };
  103. const expandParentNode = (node) => {
  104. if (!node)
  105. return;
  106. node = node.parent;
  107. expandParentNode(node);
  108. node && expandNode(node);
  109. };
  110. const getFlattedNodes = (leafOnly) => store == null ? void 0 : store.getFlattedNodes(leafOnly);
  111. const getCheckedNodes = (leafOnly) => {
  112. var _a;
  113. return (_a = getFlattedNodes(leafOnly)) == null ? void 0 : _a.filter(({ checked }) => checked !== false);
  114. };
  115. const clearCheckedNodes = () => {
  116. checkedNodes.value.forEach((node) => node.doCheck(false));
  117. calculateCheckedValue();
  118. menus.value = menus.value.slice(0, 1);
  119. expandingNode.value = void 0;
  120. emit("expand-change", []);
  121. };
  122. const calculateCheckedValue = () => {
  123. var _a;
  124. const { checkStrictly, multiple } = config.value;
  125. const oldNodes = checkedNodes.value;
  126. const newNodes = getCheckedNodes(!checkStrictly);
  127. const nodes = sortByOriginalOrder(oldNodes, newNodes);
  128. const values = nodes.map((node) => node.valueByOption);
  129. checkedNodes.value = nodes;
  130. checkedValue.value = multiple ? values : (_a = values[0]) != null ? _a : null;
  131. };
  132. const syncCheckedValue = (loaded = false, forced = false) => {
  133. const { modelValue } = props;
  134. const { lazy, multiple, checkStrictly } = config.value;
  135. const leafOnly = !checkStrictly;
  136. if (!initialLoaded.value || manualChecked || !forced && isEqual(modelValue, checkedValue.value))
  137. return;
  138. if (lazy && !loaded) {
  139. const values = unique(flattenDeep(castArray(modelValue)));
  140. const nodes = values.map((val) => store == null ? void 0 : store.getNodeByValue(val)).filter((node) => !!node && !node.loaded && !node.loading);
  141. if (nodes.length) {
  142. nodes.forEach((node) => {
  143. lazyLoad(node, () => syncCheckedValue(false, forced));
  144. });
  145. } else {
  146. syncCheckedValue(true, forced);
  147. }
  148. } else {
  149. const values = multiple ? castArray(modelValue) : [modelValue];
  150. const nodes = unique(values.map((val) => store == null ? void 0 : store.getNodeByValue(val, leafOnly)));
  151. syncMenuState(nodes, forced);
  152. checkedValue.value = cloneDeep(modelValue != null ? modelValue : void 0);
  153. }
  154. };
  155. const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => {
  156. const { checkStrictly } = config.value;
  157. const oldNodes = checkedNodes.value;
  158. const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf));
  159. const oldExpandingNode = store == null ? void 0 : store.getSameNode(expandingNode.value);
  160. const newExpandingNode = reserveExpandingState && oldExpandingNode || newNodes[0];
  161. if (newExpandingNode) {
  162. newExpandingNode.pathNodes.forEach((node) => expandNode(node, true));
  163. } else {
  164. expandingNode.value = void 0;
  165. }
  166. oldNodes.forEach((node) => node.doCheck(false));
  167. reactive(newNodes).forEach((node) => node.doCheck(true));
  168. checkedNodes.value = newNodes;
  169. nextTick(scrollToExpandingNode);
  170. };
  171. const scrollToExpandingNode = () => {
  172. if (!isClient)
  173. return;
  174. menuList.value.forEach((menu) => {
  175. const menuElement = menu == null ? void 0 : menu.$el;
  176. if (menuElement) {
  177. const container = menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
  178. const activeNode = menuElement.querySelector(`.${ns.b("node")}.${ns.is("active")}:last-child`) || menuElement.querySelector(`.${ns.b("node")}.in-active-path`);
  179. scrollIntoView(container, activeNode);
  180. }
  181. });
  182. };
  183. const handleKeyDown = (e) => {
  184. const target = e.target;
  185. const { code } = e;
  186. switch (code) {
  187. case EVENT_CODE.up:
  188. case EVENT_CODE.down: {
  189. e.preventDefault();
  190. const distance = code === EVENT_CODE.up ? -1 : 1;
  191. focusNode(getSibling(target, distance, `.${ns.b("node")}[tabindex="-1"]`));
  192. break;
  193. }
  194. case EVENT_CODE.left: {
  195. e.preventDefault();
  196. const preMenu = menuList.value[getMenuIndex(target) - 1];
  197. const expandedNode = preMenu == null ? void 0 : preMenu.$el.querySelector(`.${ns.b("node")}[aria-expanded="true"]`);
  198. focusNode(expandedNode);
  199. break;
  200. }
  201. case EVENT_CODE.right: {
  202. e.preventDefault();
  203. const nextMenu = menuList.value[getMenuIndex(target) + 1];
  204. const firstNode = nextMenu == null ? void 0 : nextMenu.$el.querySelector(`.${ns.b("node")}[tabindex="-1"]`);
  205. focusNode(firstNode);
  206. break;
  207. }
  208. case EVENT_CODE.enter:
  209. case EVENT_CODE.numpadEnter:
  210. checkNode(target);
  211. break;
  212. }
  213. };
  214. provide(CASCADER_PANEL_INJECTION_KEY, reactive({
  215. config,
  216. expandingNode,
  217. checkedNodes,
  218. isHoverMenu,
  219. initialLoaded,
  220. renderLabelFn,
  221. lazyLoad,
  222. expandNode,
  223. handleCheckChange
  224. }));
  225. watch(config, (newVal, oldVal) => {
  226. if (isEqual(newVal, oldVal))
  227. return;
  228. initStore();
  229. }, {
  230. immediate: true
  231. });
  232. watch(() => props.options, initStore, {
  233. deep: true
  234. });
  235. watch(() => props.modelValue, () => {
  236. manualChecked = false;
  237. syncCheckedValue();
  238. }, {
  239. deep: true
  240. });
  241. watch(() => checkedValue.value, (val) => {
  242. if (!isEqual(val, props.modelValue)) {
  243. emit(UPDATE_MODEL_EVENT, val);
  244. emit(CHANGE_EVENT, val);
  245. }
  246. });
  247. onBeforeUpdate(() => menuList.value = []);
  248. onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue());
  249. expose({
  250. menuList,
  251. menus,
  252. checkedNodes,
  253. handleKeyDown,
  254. handleCheckChange,
  255. getFlattedNodes,
  256. getCheckedNodes,
  257. clearCheckedNodes,
  258. calculateCheckedValue,
  259. scrollToExpandingNode
  260. });
  261. return (_ctx, _cache) => {
  262. return openBlock(), createElementBlock("div", {
  263. class: normalizeClass([unref(ns).b("panel"), unref(ns).is("bordered", _ctx.border)]),
  264. onKeydown: handleKeyDown
  265. }, [
  266. (openBlock(true), createElementBlock(Fragment, null, renderList(menus.value, (menu, index) => {
  267. return openBlock(), createBlock(ElCascaderMenu, {
  268. key: index,
  269. ref_for: true,
  270. ref: (item) => menuList.value[index] = item,
  271. index,
  272. nodes: [...menu]
  273. }, {
  274. empty: withCtx(() => [
  275. renderSlot(_ctx.$slots, "empty")
  276. ]),
  277. _: 2
  278. }, 1032, ["index", "nodes"]);
  279. }), 128))
  280. ], 34);
  281. };
  282. }
  283. });
  284. var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "index.vue"]]);
  285. export { CascaderPanel as default };
  286. //# sourceMappingURL=index.mjs.map