hongluan-ui
Version:
Hongluan Component Library for Vue 3
107 lines (102 loc) • 4.04 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../system-icon/index.js');
var index = require('../../icon/index.js');
var index$1 = require('../../checkbox/index.js');
var treeNodeContent = require('./tree-node-content.js');
var virtualTree = require('./virtual-tree.js');
var caret = require('../../system-icon/src/caret.js');
const __default__ = vue.defineComponent({
name: "TreeNode"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: virtualTree.treeNodeProps,
emits: virtualTree.treeNodeEmits,
setup(__props, { emit }) {
const props = __props;
const tree = vue.inject(virtualTree.ROOT_TREE_INJECTION_KEY);
const indent = vue.computed(() => {
var _a;
return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
});
const handleClick = (e) => {
emit("click", props.node, e);
};
const handleExpandIconClick = () => {
emit("toggle", props.node);
};
const handleCheckChange = (value) => {
emit("check", props.node, value);
};
const handleContextMenu = (event) => {
var _a, _b, _c, _d;
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"]) {
event.stopPropagation();
event.preventDefault();
}
tree == null ? void 0 : tree.ctx.emit(virtualTree.NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
};
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
ref: "node$",
class: vue.normalizeClass(["tree-node", {
"is-expanded": _ctx.expanded,
"is-current": _ctx.current,
"is-focusable": !_ctx.disabled,
"is-checked": !_ctx.disabled && _ctx.checked
}]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.disabled,
"aria-checked": _ctx.checked,
"data-key": (_a = _ctx.node) == null ? void 0 : _a.key,
onClick: vue.withModifiers(handleClick, ["stop"]),
onContextmenu: handleContextMenu
}, [
vue.createElementVNode("div", {
class: "tree-node-content",
style: vue.normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * vue.unref(indent)}px` })
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass([
{
"is-leaf": _ctx.node.isLeaf,
expanded: !_ctx.node.isLeaf && _ctx.expanded
},
"tree-node-arrow"
]),
onClick: vue.withModifiers(handleExpandIconClick, ["stop"])
}, [
vue.renderSlot(_ctx.$slots, "icon", {
expanded: _ctx.expanded,
isLeaf: _ctx.node.isLeaf
}, () => [
vue.createVNode(vue.unref(index.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(caret["default"]))
]),
_: 1
})
])
], 10, ["onClick"]),
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.HlCheckbox), {
key: 0,
"model-value": _ctx.checked,
indeterminate: _ctx.indeterminate,
disabled: _ctx.disabled,
onChange: handleCheckChange,
onClick: vue.withModifiers(() => {
}, ["stop"])
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(treeNodeContent["default"]), { node: _ctx.node }, null, 8, ["node"])
], 4)
], 42, ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"]);
};
}
});
exports["default"] = _sfc_main;
//# sourceMappingURL=tree-node.js.map