hongluan-ui
Version:
Hongluan Component Library for Vue 3
339 lines (334 loc) • 12.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var shared = require('@vue/shared');
var index$2 = require('../../checkbox/index.js');
var index$1 = require('../../spinner/index.js');
var index$3 = require('../../icon/index.js');
require('../../system-icon/index.js');
var index = require('../../collapse-transition/index.js');
require('../../../utils/index.js');
var treeNodeContent = require('./tree-node-content.js');
var util = require('./model/util.js');
var useNodeExpandEventBroadcast = require('./model/useNodeExpandEventBroadcast.js');
var useDragNode = require('./model/useDragNode.js');
var node = require('./model/node.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var caret = require('../../system-icon/src/caret.js');
var error = require('../../../utils/error.js');
const _sfc_main = vue.defineComponent({
name: "TreeNode",
components: {
CollapseTransition: index.HlCollapseTransition,
HlSpinner: index$1.HlSpinner,
HlCheckbox: index$2.HlCheckbox,
NodeContent: treeNodeContent["default"],
HlIcon: index$3.HlIcon,
SystemCaret: caret["default"]
},
props: {
node: {
type: node["default"],
default: () => ({})
},
props: {
type: Object,
default: () => ({})
},
accordion: Boolean,
renderContent: Function,
renderAfterExpand: Boolean,
showCheckbox: {
type: Boolean,
default: false
},
checkboxDisabled: {
type: Boolean,
default: false
}
},
emits: ["node-expand"],
setup(props, ctx) {
const { broadcastExpanded } = useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
const tree = vue.inject("RootTree");
const expanded = vue.ref(false);
const childNodeRendered = vue.ref(false);
const oldChecked = vue.ref(null);
const oldIndeterminate = vue.ref(null);
const node$ = vue.ref(null);
const dragEvents = vue.inject(useDragNode.dragEventsKey);
const instance = vue.getCurrentInstance();
vue.provide("NodeInstance", instance);
if (!tree) {
error.debugWarn("Tree", "Can not find node's tree.");
}
if (props.node.expanded) {
expanded.value = true;
childNodeRendered.value = true;
}
const childrenKey = tree.props.props["children"] || "children";
vue.watch(() => {
const children = props.node.data[childrenKey];
return children && [...children];
}, () => {
props.node.updateChildren();
});
vue.watch(() => props.node.indeterminate, (val) => {
handleSelectChange(props.node.checked, val);
});
vue.watch(() => props.node.checked, (val) => {
handleSelectChange(val, props.node.indeterminate);
});
vue.watch(() => props.node.childNodes.length, () => props.node.reInitChecked());
vue.watch(() => props.node.expanded, (val) => {
vue.nextTick(() => expanded.value = val);
if (val) {
childNodeRendered.value = true;
}
});
const getNodeKey = (node) => {
return util.getNodeKey(tree.props.nodeKey, node.data);
};
const getNodeClass = (node) => {
const nodeClassFunc = props.props.class;
if (!nodeClassFunc) {
return {};
}
let className;
if (shared.isFunction(nodeClassFunc)) {
const { data } = node;
className = nodeClassFunc(data, node);
} else {
className = nodeClassFunc;
}
if (shared.isString(className)) {
return { [className]: true };
} else {
return className;
}
};
const handleSelectChange = (checked, indeterminate) => {
if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {
tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
}
oldChecked.value = checked;
oldIndeterminate.value = indeterminate;
};
const handleClick = (e) => {
util.handleCurrentChange(tree.store, tree.ctx.emit, () => tree.store.value.setCurrentNode(props.node));
tree.currentNode.value = props.node;
if (tree.props.expandOnClickNode) {
handleExpandIconClick();
}
if (tree.props.checkOnClickNode && !props.node.disabled && !props.checkboxDisabled) {
handleCheckChange(null, {
target: { checked: !props.node.checked }
});
}
tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
};
const handleContextMenu = (event) => {
if (tree.instance.vnode.props["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
};
const handleExpandIconClick = () => {
if (props.node.isLeaf)
return;
if (expanded.value) {
tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
props.node.collapse();
} else {
props.node.expand();
ctx.emit("node-expand", props.node.data, props.node, instance);
}
};
const handleCheckChange = (value, ev) => {
props.node.setChecked(ev.target.checked, !tree.props.checkStrictly);
vue.nextTick(() => {
const store = tree.store.value;
tree.ctx.emit("check", props.node.data, {
checkedNodes: store.getCheckedNodes(),
checkedKeys: store.getCheckedKeys(),
halfCheckedNodes: store.getHalfCheckedNodes(),
halfCheckedKeys: store.getHalfCheckedKeys()
});
});
};
const handleChildNodeExpand = (nodeData, node, instance2) => {
broadcastExpanded(node);
tree.ctx.emit("node-expand", nodeData, node, instance2);
};
const handleDragStart = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragStart({ event, treeNode: props });
};
const handleDragOver = (event) => {
event.preventDefault();
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragOver({
event,
treeNode: { $el: node$.value, node: props.node }
});
};
const handleDrop = (event) => {
event.preventDefault();
};
const handleDragEnd = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragEnd(event);
};
return {
node$,
tree,
expanded,
childNodeRendered,
oldChecked,
oldIndeterminate,
getNodeKey,
getNodeClass,
handleSelectChange,
handleClick,
handleContextMenu,
handleExpandIconClick,
handleCheckChange,
handleChildNodeExpand,
handleDragStart,
handleDragOver,
handleDrop,
handleDragEnd
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_caret = vue.resolveComponent("system-caret");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_hl_checkbox = vue.resolveComponent("hl-checkbox");
const _component_hl_spinner = vue.resolveComponent("hl-spinner");
const _component_node_content = vue.resolveComponent("node-content");
const _component_tree_node = vue.resolveComponent("tree-node", true);
const _component_collapse_transition = vue.resolveComponent("collapse-transition");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "node$",
class: vue.normalizeClass(["tree-node", {
"is-expanded": _ctx.expanded,
"is-current": _ctx.node.isCurrent,
"is-hidden": !_ctx.node.visible,
"is-focusable": !_ctx.node.disabled && !_ctx.checkboxDisabled,
"is-checked": !_ctx.node.disabled && !_ctx.checkboxDisabled && _ctx.node.checked,
..._ctx.getNodeClass(_ctx.node)
}]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.node.disabled || _ctx.checkboxDisabled,
"aria-checked": _ctx.node.checked,
draggable: _ctx.tree.props.draggable,
"data-key": _ctx.getNodeKey(_ctx.node),
onClick: vue.withModifiers(_ctx.handleClick, ["stop"]),
onContextmenu: _ctx.handleContextMenu,
onDragstart: vue.withModifiers(_ctx.handleDragStart, ["stop"]),
onDragover: vue.withModifiers(_ctx.handleDragOver, ["stop"]),
onDragend: vue.withModifiers(_ctx.handleDragEnd, ["stop"]),
onDrop: vue.withModifiers(_ctx.handleDrop, ["stop"])
}, [
vue.createElementVNode("div", {
class: "tree-node-content",
style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "em" })
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass([
{
"custom-icon": !!_ctx.$slots.icon,
"is-leaf": _ctx.node.isLeaf,
expanded: !_ctx.node.isLeaf && _ctx.expanded
},
"tree-node-arrow",
_ctx.tree.props.iconClass ? _ctx.tree.props.iconClass : ""
]),
onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"])
}, [
vue.renderSlot(_ctx.$slots, "icon", {
expanded: _ctx.expanded,
isLeaf: _ctx.node.isLeaf
}, () => [
vue.createVNode(_component_hl_icon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_caret)
]),
_: 1
})
])
], 10, ["onClick"]),
vue.createCommentVNode("\u4FEE\u590Dtree\u5D4C\u5165form-item\u7EC4\u4EF6\uFF0C\u5BFC\u81F4label\u6E32\u67D3\u6210span\uFF0C\u70B9\u51FBcheckbox\u4E0D\u80FD\u9009\u4E2D\u95EE\u9898"),
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_hl_checkbox, {
key: 0,
style: vue.normalizeStyle(`visibility: ${_ctx.node[_ctx.props.hideCheckbox] ? "hidden" : "visible"}`),
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: !!_ctx.node.disabled || _ctx.checkboxDisabled,
"show-label": false,
onClick: vue.withModifiers(() => {
}, ["stop"]),
onChange: _ctx.handleCheckChange
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(""))
]),
_: 1
}, 8, ["style", "model-value", "indeterminate", "disabled", "onClick", "onChange"])) : vue.createCommentVNode("v-if", true),
_ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_hl_spinner, {
key: 1,
class: "tree-node-loading-icon"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_node_content, {
node: _ctx.node,
"render-content": _ctx.renderContent
}, null, 8, ["node", "render-content"])
], 4),
vue.createVNode(_component_collapse_transition, null, {
default: vue.withCtx(() => [
!_ctx.renderAfterExpand || _ctx.childNodeRendered ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "tree-node-children",
role: "group",
"aria-expanded": _ctx.expanded
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.childNodes, (child) => {
return vue.openBlock(), vue.createBlock(_component_tree_node, {
key: _ctx.getNodeKey(child),
"render-content": _ctx.renderContent,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
"checkbox-disabled": _ctx.checkboxDisabled,
node: child,
accordion: _ctx.accordion,
props: _ctx.props,
onNodeExpand: _ctx.handleChildNodeExpand
}, vue.createSlots({ _: 2 }, [
_ctx.$slots.icon ? {
name: "icon",
fn: vue.withCtx((params) => [
vue.renderSlot(_ctx.$slots, "icon", vue.normalizeProps(vue.guardReactiveProps(params)))
])
} : void 0
]), 1032, ["render-content", "render-after-expand", "show-checkbox", "checkbox-disabled", "node", "accordion", "props", "onNodeExpand"]);
}), 128))
], 8, ["aria-expanded"])), [
[vue.vShow, _ctx.expanded]
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
})
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key", "onClick", "onContextmenu", "onDragstart", "onDragover", "onDragend", "onDrop"])), [
[vue.vShow, _ctx.node.visible]
]);
}
var TreeNode = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = TreeNode;
//# sourceMappingURL=tree-node.js.map