c581707c6677eeef86f4764123a6a4136a4b818f34a15641fe0d45350dacb49be800198e9973e2b0f63481699afe3c701795db018a8ea57962c838cfc3ad89 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var token = require('../../select/src/token.js');
  5. var treeStore = require('./model/tree-store.js');
  6. var util = require('./model/util.js');
  7. var treeNode = require('./tree-node.js');
  8. var useNodeExpandEventBroadcast = require('./model/useNodeExpandEventBroadcast.js');
  9. var useDragNode = require('./model/useDragNode.js');
  10. var useKeydown = require('./model/useKeydown.js');
  11. var tokens = require('./tokens.js');
  12. var lodashUnified = require('lodash-unified');
  13. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  14. var runtime = require('../../../utils/vue/props/runtime.js');
  15. var icon = require('../../../utils/vue/icon.js');
  16. var index = require('../../../hooks/use-locale/index.js');
  17. var index$1 = require('../../../hooks/use-namespace/index.js');
  18. var constants = require('../../form/src/constants.js');
  19. const _sfc_main = vue.defineComponent({
  20. name: "ElTree",
  21. components: { ElTreeNode: treeNode["default"] },
  22. props: {
  23. data: {
  24. type: runtime.definePropType(Array),
  25. default: () => []
  26. },
  27. emptyText: {
  28. type: String
  29. },
  30. renderAfterExpand: {
  31. type: Boolean,
  32. default: true
  33. },
  34. nodeKey: String,
  35. checkStrictly: Boolean,
  36. defaultExpandAll: Boolean,
  37. expandOnClickNode: {
  38. type: Boolean,
  39. default: true
  40. },
  41. checkOnClickNode: Boolean,
  42. checkOnClickLeaf: {
  43. type: Boolean,
  44. default: true
  45. },
  46. checkDescendants: Boolean,
  47. autoExpandParent: {
  48. type: Boolean,
  49. default: true
  50. },
  51. defaultCheckedKeys: Array,
  52. defaultExpandedKeys: Array,
  53. currentNodeKey: [String, Number],
  54. renderContent: {
  55. type: runtime.definePropType(Function)
  56. },
  57. showCheckbox: Boolean,
  58. draggable: Boolean,
  59. allowDrag: {
  60. type: runtime.definePropType(Function)
  61. },
  62. allowDrop: {
  63. type: runtime.definePropType(Function)
  64. },
  65. props: {
  66. type: Object,
  67. default: () => ({
  68. children: "children",
  69. label: "label",
  70. disabled: "disabled"
  71. })
  72. },
  73. lazy: Boolean,
  74. highlightCurrent: Boolean,
  75. load: Function,
  76. filterNodeMethod: Function,
  77. accordion: Boolean,
  78. indent: {
  79. type: Number,
  80. default: 18
  81. },
  82. icon: {
  83. type: icon.iconPropType
  84. }
  85. },
  86. emits: [
  87. "check-change",
  88. "current-change",
  89. "node-click",
  90. "node-contextmenu",
  91. "node-collapse",
  92. "node-expand",
  93. "check",
  94. "node-drag-start",
  95. "node-drag-end",
  96. "node-drop",
  97. "node-drag-leave",
  98. "node-drag-enter",
  99. "node-drag-over"
  100. ],
  101. setup(props, ctx) {
  102. const { t } = index.useLocale();
  103. const ns = index$1.useNamespace("tree");
  104. const selectInfo = vue.inject(token.selectKey, null);
  105. const store = vue.ref(new treeStore["default"]({
  106. key: props.nodeKey,
  107. data: props.data,
  108. lazy: props.lazy,
  109. props: props.props,
  110. load: props.load,
  111. currentNodeKey: props.currentNodeKey,
  112. checkStrictly: props.checkStrictly,
  113. checkDescendants: props.checkDescendants,
  114. defaultCheckedKeys: props.defaultCheckedKeys,
  115. defaultExpandedKeys: props.defaultExpandedKeys,
  116. autoExpandParent: props.autoExpandParent,
  117. defaultExpandAll: props.defaultExpandAll,
  118. filterNodeMethod: props.filterNodeMethod
  119. }));
  120. store.value.initialize();
  121. const root = vue.ref(store.value.root);
  122. const currentNode = vue.ref(null);
  123. const el$ = vue.ref(null);
  124. const dropIndicator$ = vue.ref(null);
  125. const { broadcastExpanded } = useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
  126. const { dragState } = useDragNode.useDragNodeHandler({
  127. props,
  128. ctx,
  129. el$,
  130. dropIndicator$,
  131. store
  132. });
  133. useKeydown.useKeydown({ el$ }, store);
  134. const isEmpty = vue.computed(() => {
  135. const { childNodes } = root.value;
  136. const hasFilteredOptions = selectInfo ? selectInfo.hasFilteredOptions !== 0 : false;
  137. return (!childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible)) && !hasFilteredOptions;
  138. });
  139. vue.watch(() => props.currentNodeKey, (newVal) => {
  140. store.value.setCurrentNodeKey(newVal != null ? newVal : null);
  141. });
  142. vue.watch(() => props.defaultCheckedKeys, (newVal, oldVal) => {
  143. if (lodashUnified.isEqual(newVal, oldVal))
  144. return;
  145. store.value.setDefaultCheckedKey(newVal != null ? newVal : []);
  146. });
  147. vue.watch(() => props.defaultExpandedKeys, (newVal) => {
  148. store.value.setDefaultExpandedKeys(newVal != null ? newVal : []);
  149. });
  150. vue.watch(() => props.data, (newVal) => {
  151. store.value.setData(newVal);
  152. }, { deep: true });
  153. vue.watch(() => props.checkStrictly, (newVal) => {
  154. store.value.checkStrictly = newVal;
  155. });
  156. const filter = (value) => {
  157. if (!props.filterNodeMethod)
  158. throw new Error("[Tree] filterNodeMethod is required when filter");
  159. store.value.filter(value);
  160. };
  161. const getNodeKey = (node) => {
  162. return util.getNodeKey(props.nodeKey, node.data);
  163. };
  164. const getNodePath = (data) => {
  165. if (!props.nodeKey)
  166. throw new Error("[Tree] nodeKey is required in getNodePath");
  167. const node = store.value.getNode(data);
  168. if (!node)
  169. return [];
  170. const path = [node.data];
  171. let parent = node.parent;
  172. while (parent && parent !== root.value) {
  173. path.push(parent.data);
  174. parent = parent.parent;
  175. }
  176. return path.reverse();
  177. };
  178. const getCheckedNodes = (leafOnly, includeHalfChecked) => {
  179. return store.value.getCheckedNodes(leafOnly, includeHalfChecked);
  180. };
  181. const getCheckedKeys = (leafOnly) => {
  182. return store.value.getCheckedKeys(leafOnly);
  183. };
  184. const getCurrentNode = () => {
  185. const currentNode2 = store.value.getCurrentNode();
  186. return currentNode2 ? currentNode2.data : null;
  187. };
  188. const getCurrentKey = () => {
  189. if (!props.nodeKey)
  190. throw new Error("[Tree] nodeKey is required in getCurrentKey");
  191. const currentNode2 = getCurrentNode();
  192. return currentNode2 ? currentNode2[props.nodeKey] : null;
  193. };
  194. const setCheckedNodes = (nodes, leafOnly) => {
  195. if (!props.nodeKey)
  196. throw new Error("[Tree] nodeKey is required in setCheckedNodes");
  197. store.value.setCheckedNodes(nodes, leafOnly);
  198. };
  199. const setCheckedKeys = (keys, leafOnly) => {
  200. if (!props.nodeKey)
  201. throw new Error("[Tree] nodeKey is required in setCheckedKeys");
  202. store.value.setCheckedKeys(keys, leafOnly);
  203. };
  204. const setChecked = (data, checked, deep) => {
  205. store.value.setChecked(data, checked, deep);
  206. };
  207. const getHalfCheckedNodes = () => {
  208. return store.value.getHalfCheckedNodes();
  209. };
  210. const getHalfCheckedKeys = () => {
  211. return store.value.getHalfCheckedKeys();
  212. };
  213. const setCurrentNode = (node, shouldAutoExpandParent = true) => {
  214. if (!props.nodeKey)
  215. throw new Error("[Tree] nodeKey is required in setCurrentNode");
  216. util.handleCurrentChange(store, ctx.emit, () => {
  217. broadcastExpanded(node);
  218. store.value.setUserCurrentNode(node, shouldAutoExpandParent);
  219. });
  220. };
  221. const setCurrentKey = (key, shouldAutoExpandParent = true) => {
  222. if (!props.nodeKey)
  223. throw new Error("[Tree] nodeKey is required in setCurrentKey");
  224. util.handleCurrentChange(store, ctx.emit, () => {
  225. broadcastExpanded();
  226. store.value.setCurrentNodeKey(key != null ? key : null, shouldAutoExpandParent);
  227. });
  228. };
  229. const getNode = (data) => {
  230. return store.value.getNode(data);
  231. };
  232. const remove = (data) => {
  233. store.value.remove(data);
  234. };
  235. const append = (data, parentNode) => {
  236. store.value.append(data, parentNode);
  237. };
  238. const insertBefore = (data, refNode) => {
  239. store.value.insertBefore(data, refNode);
  240. };
  241. const insertAfter = (data, refNode) => {
  242. store.value.insertAfter(data, refNode);
  243. };
  244. const handleNodeExpand = (nodeData, node, instance) => {
  245. broadcastExpanded(node);
  246. ctx.emit("node-expand", nodeData, node, instance);
  247. };
  248. const updateKeyChildren = (key, data) => {
  249. if (!props.nodeKey)
  250. throw new Error("[Tree] nodeKey is required in updateKeyChild");
  251. store.value.updateChildren(key, data);
  252. };
  253. vue.provide(tokens.ROOT_TREE_INJECTION_KEY, {
  254. ctx,
  255. props,
  256. store,
  257. root,
  258. currentNode,
  259. instance: vue.getCurrentInstance()
  260. });
  261. vue.provide(constants.formItemContextKey, void 0);
  262. return {
  263. ns,
  264. store,
  265. root,
  266. currentNode,
  267. dragState,
  268. el$,
  269. dropIndicator$,
  270. isEmpty,
  271. filter,
  272. getNodeKey,
  273. getNodePath,
  274. getCheckedNodes,
  275. getCheckedKeys,
  276. getCurrentNode,
  277. getCurrentKey,
  278. setCheckedNodes,
  279. setCheckedKeys,
  280. setChecked,
  281. getHalfCheckedNodes,
  282. getHalfCheckedKeys,
  283. setCurrentNode,
  284. setCurrentKey,
  285. t,
  286. getNode,
  287. remove,
  288. append,
  289. insertBefore,
  290. insertAfter,
  291. handleNodeExpand,
  292. updateKeyChildren
  293. };
  294. }
  295. });
  296. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  297. const _component_el_tree_node = vue.resolveComponent("el-tree-node");
  298. return vue.openBlock(), vue.createElementBlock("div", {
  299. ref: "el$",
  300. class: vue.normalizeClass([
  301. _ctx.ns.b(),
  302. _ctx.ns.is("dragging", !!_ctx.dragState.draggingNode),
  303. _ctx.ns.is("drop-not-allow", !_ctx.dragState.allowDrop),
  304. _ctx.ns.is("drop-inner", _ctx.dragState.dropType === "inner"),
  305. { [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent }
  306. ]),
  307. role: "tree"
  308. }, [
  309. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.childNodes, (child) => {
  310. return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
  311. key: _ctx.getNodeKey(child),
  312. node: child,
  313. props: _ctx.props,
  314. accordion: _ctx.accordion,
  315. "render-after-expand": _ctx.renderAfterExpand,
  316. "show-checkbox": _ctx.showCheckbox,
  317. "render-content": _ctx.renderContent,
  318. onNodeExpand: _ctx.handleNodeExpand
  319. }, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]);
  320. }), 128)),
  321. _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
  322. key: 0,
  323. class: vue.normalizeClass(_ctx.ns.e("empty-block"))
  324. }, [
  325. vue.renderSlot(_ctx.$slots, "empty", {}, () => {
  326. var _a;
  327. return [
  328. vue.createElementVNode("span", {
  329. class: vue.normalizeClass(_ctx.ns.e("empty-text"))
  330. }, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
  331. ];
  332. })
  333. ], 2)) : vue.createCommentVNode("v-if", true),
  334. vue.withDirectives(vue.createElementVNode("div", {
  335. ref: "dropIndicator$",
  336. class: vue.normalizeClass(_ctx.ns.e("drop-indicator"))
  337. }, null, 2), [
  338. [vue.vShow, _ctx.dragState.showDropIndicator]
  339. ])
  340. ], 2);
  341. }
  342. var Tree = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "tree.vue"]]);
  343. exports["default"] = Tree;
  344. //# sourceMappingURL=tree.js.map