fdd573d2214bbbca37bc58094b8e2176ec59465d329d06f065b8b6fe64d0e7dbf046cfa4f5a405eeef9544ff9ee69f1b27d36e9c4554892084c72bbba31074 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createVNode } from 'vue';
  2. import { ElIcon } from '../../icon/index.mjs';
  3. import { CaretRight } from '@element-plus/icons-vue';
  4. import { ElCheckbox } from '../../checkbox/index.mjs';
  5. import ElNodeContent from './tree-node-content.mjs';
  6. import { treeNodeProps, treeNodeEmits, ROOT_TREE_INJECTION_KEY, NODE_CONTEXTMENU } from './virtual-tree.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  9. import { isFunction, isString } from '@vue/shared';
  10. const __default__ = defineComponent({
  11. name: "ElTreeNode"
  12. });
  13. const _sfc_main = /* @__PURE__ */ defineComponent({
  14. ...__default__,
  15. props: treeNodeProps,
  16. emits: treeNodeEmits,
  17. setup(__props, { emit }) {
  18. const props = __props;
  19. const tree = inject(ROOT_TREE_INJECTION_KEY);
  20. const ns = useNamespace("tree");
  21. const indent = computed(() => {
  22. var _a;
  23. return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
  24. });
  25. const icon = computed(() => {
  26. var _a;
  27. return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : CaretRight;
  28. });
  29. const getNodeClass = (node) => {
  30. const nodeClassFunc = tree == null ? void 0 : tree.props.props.class;
  31. if (!nodeClassFunc)
  32. return {};
  33. let className;
  34. if (isFunction(nodeClassFunc)) {
  35. const { data } = node;
  36. className = nodeClassFunc(data, node);
  37. } else {
  38. className = nodeClassFunc;
  39. }
  40. return isString(className) ? { [className]: true } : className;
  41. };
  42. const handleClick = (e) => {
  43. emit("click", props.node, e);
  44. };
  45. const handleDrop = (e) => {
  46. emit("drop", props.node, e);
  47. };
  48. const handleExpandIconClick = () => {
  49. emit("toggle", props.node);
  50. };
  51. const handleCheckChange = (value) => {
  52. emit("check", props.node, value);
  53. };
  54. const handleContextMenu = (event) => {
  55. var _a, _b, _c, _d;
  56. if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c["onNodeContextmenu"]) {
  57. event.stopPropagation();
  58. event.preventDefault();
  59. }
  60. tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
  61. };
  62. return (_ctx, _cache) => {
  63. var _a, _b, _c;
  64. return openBlock(), createElementBlock("div", {
  65. ref: "node$",
  66. class: normalizeClass([
  67. unref(ns).b("node"),
  68. unref(ns).is("expanded", _ctx.expanded),
  69. unref(ns).is("current", _ctx.current),
  70. unref(ns).is("focusable", !_ctx.disabled),
  71. unref(ns).is("checked", !_ctx.disabled && _ctx.checked),
  72. getNodeClass(_ctx.node)
  73. ]),
  74. role: "treeitem",
  75. tabindex: "-1",
  76. "aria-expanded": _ctx.expanded,
  77. "aria-disabled": _ctx.disabled,
  78. "aria-checked": _ctx.checked,
  79. "data-key": (_a = _ctx.node) == null ? void 0 : _a.key,
  80. onClick: withModifiers(handleClick, ["stop"]),
  81. onContextmenu: handleContextMenu,
  82. onDragover: withModifiers(() => {
  83. }, ["prevent"]),
  84. onDragenter: withModifiers(() => {
  85. }, ["prevent"]),
  86. onDrop: withModifiers(handleDrop, ["stop"])
  87. }, [
  88. createElementVNode("div", {
  89. class: normalizeClass(unref(ns).be("node", "content")),
  90. style: normalizeStyle({
  91. paddingLeft: `${(_ctx.node.level - 1) * unref(indent)}px`,
  92. height: _ctx.itemSize + "px"
  93. })
  94. }, [
  95. unref(icon) ? (openBlock(), createBlock(unref(ElIcon), {
  96. key: 0,
  97. class: normalizeClass([
  98. unref(ns).is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)),
  99. unref(ns).is("hidden", _ctx.hiddenExpandIcon),
  100. {
  101. expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded
  102. },
  103. unref(ns).be("node", "expand-icon")
  104. ]),
  105. onClick: withModifiers(handleExpandIconClick, ["stop"])
  106. }, {
  107. default: withCtx(() => [
  108. (openBlock(), createBlock(resolveDynamicComponent(unref(icon))))
  109. ]),
  110. _: 1
  111. }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
  112. _ctx.showCheckbox ? (openBlock(), createBlock(unref(ElCheckbox), {
  113. key: 1,
  114. "model-value": _ctx.checked,
  115. indeterminate: _ctx.indeterminate,
  116. disabled: _ctx.disabled,
  117. onChange: handleCheckChange,
  118. onClick: withModifiers(() => {
  119. }, ["stop"])
  120. }, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : createCommentVNode("v-if", true),
  121. createVNode(unref(ElNodeContent), {
  122. node: { ..._ctx.node, expanded: _ctx.expanded }
  123. }, null, 8, ["node"])
  124. ], 6)
  125. ], 42, ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick", "onDragover", "onDragenter", "onDrop"]);
  126. };
  127. }
  128. });
  129. var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tree-node.vue"]]);
  130. export { ElTreeNode as default };
  131. //# sourceMappingURL=tree-node.mjs.map