tree.js 11 KB

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