ad9e1ad0a5790c010651ba2c274b1b05753ce5843f400a47bc874c490a96fc7993ed8d04e81316468e3606c00c8bde18446581135db4456e390f11619dd723 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index = require('../../collapse-transition/index.js');
  5. var index$1 = require('../../checkbox/index.js');
  6. var index$2 = require('../../icon/index.js');
  7. var iconsVue = require('@element-plus/icons-vue');
  8. var treeNodeContent = require('./tree-node-content.js');
  9. var util = require('./model/util.js');
  10. var useNodeExpandEventBroadcast = require('./model/useNodeExpandEventBroadcast.js');
  11. var useDragNode = require('./model/useDragNode.js');
  12. var node = require('./model/node.js');
  13. var tokens = require('./tokens.js');
  14. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  15. var index$3 = require('../../../hooks/use-namespace/index.js');
  16. var shared = require('@vue/shared');
  17. const _sfc_main = vue.defineComponent({
  18. name: "ElTreeNode",
  19. components: {
  20. ElCollapseTransition: index.ElCollapseTransition,
  21. ElCheckbox: index$1.ElCheckbox,
  22. NodeContent: treeNodeContent["default"],
  23. ElIcon: index$2.ElIcon,
  24. Loading: iconsVue.Loading
  25. },
  26. props: {
  27. node: {
  28. type: node["default"],
  29. default: () => ({})
  30. },
  31. props: {
  32. type: Object,
  33. default: () => ({})
  34. },
  35. accordion: Boolean,
  36. renderContent: Function,
  37. renderAfterExpand: Boolean,
  38. showCheckbox: Boolean
  39. },
  40. emits: ["node-expand"],
  41. setup(props, ctx) {
  42. const ns = index$3.useNamespace("tree");
  43. const { broadcastExpanded } = useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
  44. const tree = vue.inject(tokens.ROOT_TREE_INJECTION_KEY);
  45. const expanded = vue.ref(false);
  46. const childNodeRendered = vue.ref(false);
  47. const oldChecked = vue.ref();
  48. const oldIndeterminate = vue.ref();
  49. const node$ = vue.ref();
  50. const dragEvents = vue.inject(useDragNode.dragEventsKey);
  51. const instance = vue.getCurrentInstance();
  52. vue.provide(tokens.NODE_INSTANCE_INJECTION_KEY, instance);
  53. if (props.node.expanded) {
  54. expanded.value = true;
  55. childNodeRendered.value = true;
  56. }
  57. const childrenKey = tree.props.props["children"] || "children";
  58. vue.watch(() => {
  59. var _a;
  60. const children = (_a = props.node.data) == null ? void 0 : _a[childrenKey];
  61. return children && [...children];
  62. }, () => {
  63. props.node.updateChildren();
  64. });
  65. vue.watch(() => props.node.indeterminate, (val) => {
  66. handleSelectChange(props.node.checked, val);
  67. });
  68. vue.watch(() => props.node.checked, (val) => {
  69. handleSelectChange(val, props.node.indeterminate);
  70. });
  71. vue.watch(() => props.node.childNodes.length, () => props.node.reInitChecked());
  72. vue.watch(() => props.node.expanded, (val) => {
  73. vue.nextTick(() => expanded.value = val);
  74. if (val) {
  75. childNodeRendered.value = true;
  76. }
  77. });
  78. const getNodeKey = (node) => {
  79. return util.getNodeKey(tree.props.nodeKey, node.data);
  80. };
  81. const getNodeClass = (node) => {
  82. const nodeClassFunc = props.props.class;
  83. if (!nodeClassFunc) {
  84. return {};
  85. }
  86. let className;
  87. if (shared.isFunction(nodeClassFunc)) {
  88. const { data } = node;
  89. className = nodeClassFunc(data, node);
  90. } else {
  91. className = nodeClassFunc;
  92. }
  93. if (shared.isString(className)) {
  94. return { [className]: true };
  95. } else {
  96. return className;
  97. }
  98. };
  99. const handleSelectChange = (checked, indeterminate) => {
  100. if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {
  101. tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
  102. }
  103. oldChecked.value = checked;
  104. oldIndeterminate.value = indeterminate;
  105. };
  106. const handleClick = (e) => {
  107. util.handleCurrentChange(tree.store, tree.ctx.emit, () => {
  108. var _a;
  109. const nodeKeyProp = (_a = tree == null ? void 0 : tree.props) == null ? void 0 : _a.nodeKey;
  110. if (nodeKeyProp) {
  111. const curNodeKey = getNodeKey(props.node);
  112. tree.store.value.setCurrentNodeKey(curNodeKey);
  113. } else {
  114. tree.store.value.setCurrentNode(props.node);
  115. }
  116. });
  117. tree.currentNode.value = props.node;
  118. if (tree.props.expandOnClickNode) {
  119. handleExpandIconClick();
  120. }
  121. if ((tree.props.checkOnClickNode || props.node.isLeaf && tree.props.checkOnClickLeaf && props.showCheckbox) && !props.node.disabled) {
  122. handleCheckChange(!props.node.checked);
  123. }
  124. tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
  125. };
  126. const handleContextMenu = (event) => {
  127. var _a;
  128. if ((_a = tree.instance.vnode.props) == null ? void 0 : _a["onNodeContextmenu"]) {
  129. event.stopPropagation();
  130. event.preventDefault();
  131. }
  132. tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
  133. };
  134. const handleExpandIconClick = () => {
  135. if (props.node.isLeaf)
  136. return;
  137. if (expanded.value) {
  138. tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
  139. props.node.collapse();
  140. } else {
  141. props.node.expand(() => {
  142. ctx.emit("node-expand", props.node.data, props.node, instance);
  143. });
  144. }
  145. };
  146. const handleCheckChange = (value) => {
  147. props.node.setChecked(value, !(tree == null ? void 0 : tree.props.checkStrictly));
  148. vue.nextTick(() => {
  149. const store = tree.store.value;
  150. tree.ctx.emit("check", props.node.data, {
  151. checkedNodes: store.getCheckedNodes(),
  152. checkedKeys: store.getCheckedKeys(),
  153. halfCheckedNodes: store.getHalfCheckedNodes(),
  154. halfCheckedKeys: store.getHalfCheckedKeys()
  155. });
  156. });
  157. };
  158. const handleChildNodeExpand = (nodeData, node, instance2) => {
  159. broadcastExpanded(node);
  160. tree.ctx.emit("node-expand", nodeData, node, instance2);
  161. };
  162. const handleDragStart = (event) => {
  163. if (!tree.props.draggable)
  164. return;
  165. dragEvents.treeNodeDragStart({ event, treeNode: props });
  166. };
  167. const handleDragOver = (event) => {
  168. event.preventDefault();
  169. if (!tree.props.draggable)
  170. return;
  171. dragEvents.treeNodeDragOver({
  172. event,
  173. treeNode: { $el: node$.value, node: props.node }
  174. });
  175. };
  176. const handleDrop = (event) => {
  177. event.preventDefault();
  178. };
  179. const handleDragEnd = (event) => {
  180. if (!tree.props.draggable)
  181. return;
  182. dragEvents.treeNodeDragEnd(event);
  183. };
  184. return {
  185. ns,
  186. node$,
  187. tree,
  188. expanded,
  189. childNodeRendered,
  190. oldChecked,
  191. oldIndeterminate,
  192. getNodeKey,
  193. getNodeClass,
  194. handleSelectChange,
  195. handleClick,
  196. handleContextMenu,
  197. handleExpandIconClick,
  198. handleCheckChange,
  199. handleChildNodeExpand,
  200. handleDragStart,
  201. handleDragOver,
  202. handleDrop,
  203. handleDragEnd,
  204. CaretRight: iconsVue.CaretRight
  205. };
  206. }
  207. });
  208. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  209. const _component_el_icon = vue.resolveComponent("el-icon");
  210. const _component_el_checkbox = vue.resolveComponent("el-checkbox");
  211. const _component_loading = vue.resolveComponent("loading");
  212. const _component_node_content = vue.resolveComponent("node-content");
  213. const _component_el_tree_node = vue.resolveComponent("el-tree-node");
  214. const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition");
  215. return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  216. ref: "node$",
  217. class: vue.normalizeClass([
  218. _ctx.ns.b("node"),
  219. _ctx.ns.is("expanded", _ctx.expanded),
  220. _ctx.ns.is("current", _ctx.node.isCurrent),
  221. _ctx.ns.is("hidden", !_ctx.node.visible),
  222. _ctx.ns.is("focusable", !_ctx.node.disabled),
  223. _ctx.ns.is("checked", !_ctx.node.disabled && _ctx.node.checked),
  224. _ctx.getNodeClass(_ctx.node)
  225. ]),
  226. role: "treeitem",
  227. tabindex: "-1",
  228. "aria-expanded": _ctx.expanded,
  229. "aria-disabled": _ctx.node.disabled,
  230. "aria-checked": _ctx.node.checked,
  231. draggable: _ctx.tree.props.draggable,
  232. "data-key": _ctx.getNodeKey(_ctx.node),
  233. onClick: vue.withModifiers(_ctx.handleClick, ["stop"]),
  234. onContextmenu: _ctx.handleContextMenu,
  235. onDragstart: vue.withModifiers(_ctx.handleDragStart, ["stop"]),
  236. onDragover: vue.withModifiers(_ctx.handleDragOver, ["stop"]),
  237. onDragend: vue.withModifiers(_ctx.handleDragEnd, ["stop"]),
  238. onDrop: vue.withModifiers(_ctx.handleDrop, ["stop"])
  239. }, [
  240. vue.createElementVNode("div", {
  241. class: vue.normalizeClass(_ctx.ns.be("node", "content")),
  242. style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" })
  243. }, [
  244. _ctx.tree.props.icon || _ctx.CaretRight ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
  245. key: 0,
  246. class: vue.normalizeClass([
  247. _ctx.ns.be("node", "expand-icon"),
  248. _ctx.ns.is("leaf", _ctx.node.isLeaf),
  249. {
  250. expanded: !_ctx.node.isLeaf && _ctx.expanded
  251. }
  252. ]),
  253. onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"])
  254. }, {
  255. default: vue.withCtx(() => [
  256. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight)))
  257. ]),
  258. _: 1
  259. }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
  260. _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
  261. key: 1,
  262. "model-value": _ctx.node.checked,
  263. indeterminate: _ctx.node.indeterminate,
  264. disabled: !!_ctx.node.disabled,
  265. onClick: vue.withModifiers(() => {
  266. }, ["stop"]),
  267. onChange: _ctx.handleCheckChange
  268. }, null, 8, ["model-value", "indeterminate", "disabled", "onClick", "onChange"])) : vue.createCommentVNode("v-if", true),
  269. _ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
  270. key: 2,
  271. class: vue.normalizeClass([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")])
  272. }, {
  273. default: vue.withCtx(() => [
  274. vue.createVNode(_component_loading)
  275. ]),
  276. _: 1
  277. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  278. vue.createVNode(_component_node_content, {
  279. node: _ctx.node,
  280. "render-content": _ctx.renderContent
  281. }, null, 8, ["node", "render-content"])
  282. ], 6),
  283. vue.createVNode(_component_el_collapse_transition, null, {
  284. default: vue.withCtx(() => [
  285. !_ctx.renderAfterExpand || _ctx.childNodeRendered ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  286. key: 0,
  287. class: vue.normalizeClass(_ctx.ns.be("node", "children")),
  288. role: "group",
  289. "aria-expanded": _ctx.expanded,
  290. onClick: vue.withModifiers(() => {
  291. }, ["stop"])
  292. }, [
  293. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.childNodes, (child) => {
  294. return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
  295. key: _ctx.getNodeKey(child),
  296. "render-content": _ctx.renderContent,
  297. "render-after-expand": _ctx.renderAfterExpand,
  298. "show-checkbox": _ctx.showCheckbox,
  299. node: child,
  300. accordion: _ctx.accordion,
  301. props: _ctx.props,
  302. onNodeExpand: _ctx.handleChildNodeExpand
  303. }, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "accordion", "props", "onNodeExpand"]);
  304. }), 128))
  305. ], 10, ["aria-expanded", "onClick"])), [
  306. [vue.vShow, _ctx.expanded]
  307. ]) : vue.createCommentVNode("v-if", true)
  308. ]),
  309. _: 1
  310. })
  311. ], 42, ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key", "onClick", "onContextmenu", "onDragstart", "onDragover", "onDragend", "onDrop"])), [
  312. [vue.vShow, _ctx.node.visible]
  313. ]);
  314. }
  315. var ElTreeNode = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "tree-node.vue"]]);
  316. exports["default"] = ElTreeNode;
  317. //# sourceMappingURL=tree-node.js.map