hongluan-ui/es/components/tree-v2/src/tree-node.mjs

Hongluan Component Library for Vue 3

import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, normalizeStyle, unref, renderSlot, createVNode, withCtx, createBlock, createCommentVNode } from 'vue';
import '../../system-icon/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import { HlCheckbox } from '../../checkbox/index.mjs';
import NodeContent from './tree-node-content.mjs';
import { treeNodeProps, treeNodeEmits, ROOT_TREE_INJECTION_KEY, NODE_CONTEXTMENU } from './virtual-tree.mjs';
import SystemCaret from '../../system-icon/src/caret.mjs';

const __default__ = defineComponent({
  name: "TreeNode"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: treeNodeProps,
  emits: treeNodeEmits,
  setup(__props, { emit }) {
    const props = __props;
    const tree = inject(ROOT_TREE_INJECTION_KEY);
    const indent = 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(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
    };
    return (_ctx, _cache) => {
      var _a;
      return openBlock(), createElementBlock("div", {
        ref: "node$",
        class: 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: withModifiers(handleClick, ["stop"]),
        onContextmenu: handleContextMenu
      }, [
        createElementVNode("div", {
          class: "tree-node-content",
          style: normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * unref(indent)}px` })
        }, [
          createElementVNode("span", {
            class: normalizeClass([
              {
                "is-leaf": _ctx.node.isLeaf,
                expanded: !_ctx.node.isLeaf && _ctx.expanded
              },
              "tree-node-arrow"
            ]),
            onClick: withModifiers(handleExpandIconClick, ["stop"])
          }, [
            renderSlot(_ctx.$slots, "icon", {
              expanded: _ctx.expanded,
              isLeaf: _ctx.node.isLeaf
            }, () => [
              createVNode(unref(HlIcon), null, {
                default: withCtx(() => [
                  createVNode(unref(SystemCaret))
                ]),
                _: 1
              })
            ])
          ], 10, ["onClick"]),
          _ctx.showCheckbox ? (openBlock(), createBlock(unref(HlCheckbox), {
            key: 0,
            "model-value": _ctx.checked,
            indeterminate: _ctx.indeterminate,
            disabled: _ctx.disabled,
            onChange: handleCheckChange,
            onClick: withModifiers(() => {
            }, ["stop"])
          }, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : createCommentVNode("v-if", true),
          createVNode(unref(NodeContent), { node: _ctx.node }, null, 8, ["node"])
        ], 4)
      ], 42, ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=tree-node.mjs.map