@ark-ui/vue/dist/components/json-tree-view/json-tree-view-node.vue.cjs

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');
const jsonTreeUtils = require('@zag-js/json-tree-utils');
const treeViewItemText_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-item-text.vue.cjs');
const treeViewItem_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-item.vue.cjs');
const treeViewNodeProvider_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-node-provider.vue.cjs');
const treeViewBranchContent_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-content.vue.cjs');
const treeViewBranchControl_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-control.vue.cjs');
const treeViewBranchIndentGuide_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-indent-guide.vue.cjs');
const treeViewBranchIndicator_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-indicator.vue.cjs');
const treeViewBranchText_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch-text.vue.cjs');
const treeViewBranch_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-branch.vue.cjs');
const useTreeViewContext = require('../tree-view/use-tree-view-context.cjs');
const jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-key-node.vue.cjs');
const jsonTreeViewPropsContext = require('./json-tree-view-props-context.cjs');
const jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-value-node.vue.cjs');

const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "json-tree-view-node",
  props: {
    node: {},
    indexPath: {},
    indentGuide: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const tree = useTreeViewContext.useTreeViewContext();
    const nodeState = vue.computed(() => tree.value.getNodeState({ node: props.node, indexPath: props.indexPath }));
    const options = jsonTreeViewPropsContext.useJsonTreeViewPropsContext();
    const key = vue.computed(() => jsonTreeUtils.keyPathToKey(props.node.keyPath, { excludeRoot: true }));
    const valueNode = vue.computed(() => jsonTreeUtils.jsonNodeToElement(props.node, vue.toValue(options)));
    const nodeProps = vue.computed(() => {
      const desc = jsonTreeUtils.getAccessibleDescription(props.node);
      const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
      const lineLength = props.indexPath.length - 1;
      return {
        "aria-label": desc,
        "data-line": line,
        style: { ["--line-length"]: lineLength }
      };
    });
    return (_ctx, _cache) => {
      const _component_JsonTreeViewNode = vue.resolveComponent("JsonTreeViewNode", true);
      return vue.openBlock(), vue.createBlock(treeViewNodeProvider_vue_vue_type_script_setup_true_lang.default, {
        node: _ctx.node,
        "index-path": _ctx.indexPath
      }, {
        default: vue.withCtx(() => [
          nodeState.value.isBranch ? (vue.openBlock(), vue.createBlock(treeViewBranch_vue_vue_type_script_setup_true_lang.default, {
            key: 0,
            "data-scope": "json-tree-view"
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(treeViewBranchControl_vue_vue_type_script_setup_true_lang.default, vue.mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
                default: vue.withCtx(() => [
                  _ctx.$slots.arrow ? (vue.openBlock(), vue.createBlock(treeViewBranchIndicator_vue_vue_type_script_setup_true_lang.default, {
                    key: 0,
                    "data-scope": "json-tree-view"
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "arrow")
                    ]),
                    _: 3
                  })) : vue.createCommentVNode("", true),
                  vue.createVNode(treeViewBranchText_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
                    default: vue.withCtx(() => [
                      key.value ? (vue.openBlock(), vue.createBlock(jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang.default, {
                        key: 0,
                        node: _ctx.node,
                        "show-quotes": vue.unref(options).quotesOnKeys
                      }, null, 8, ["node", "show-quotes"])) : vue.createCommentVNode("", true),
                      vue.createVNode(jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang.default, { node: valueNode.value }, {
                        renderValue: vue.withCtx(({ node: childNode }) => [
                          vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
                        ]),
                        _: 3
                      }, 8, ["node"])
                    ]),
                    _: 3
                  })
                ]),
                _: 3
              }, 16),
              vue.createVNode(treeViewBranchContent_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
                default: vue.withCtx(() => [
                  _ctx.$slots.indentGuide ? vue.renderSlot(_ctx.$slots, "indentGuide", { key: 0 }) : _ctx.indentGuide ? (vue.openBlock(), vue.createBlock(treeViewBranchIndentGuide_vue_vue_type_script_setup_true_lang.default, { key: 1 })) : vue.createCommentVNode("", true),
                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.children, (child, index) => {
                    return vue.openBlock(), vue.createBlock(_component_JsonTreeViewNode, vue.mergeProps({ key: index }, { ref_for: true }, _ctx.$props, {
                      node: child,
                      "index-path": [..._ctx.indexPath, index]
                    }), {
                      arrow: vue.withCtx(() => [
                        vue.renderSlot(_ctx.$slots, "arrow")
                      ]),
                      indentGuide: vue.withCtx(() => [
                        vue.renderSlot(_ctx.$slots, "indentGuide")
                      ]),
                      renderValue: vue.withCtx(({ node: childNode }) => [
                        vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
                      ]),
                      _: 2
                    }, 1040, ["node", "index-path"]);
                  }), 128))
                ]),
                _: 3
              })
            ]),
            _: 3
          })) : (vue.openBlock(), vue.createBlock(treeViewItem_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
            default: vue.withCtx(() => [
              vue.createVNode(treeViewItemText_vue_vue_type_script_setup_true_lang.default, { "data-scope": "json-tree-view" }, {
                default: vue.withCtx(() => [
                  key.value ? (vue.openBlock(), vue.createBlock(jsonTreeViewKeyNode_vue_vue_type_script_setup_true_lang.default, {
                    key: 0,
                    node: _ctx.node,
                    "show-quotes": vue.unref(options).quotesOnKeys
                  }, null, 8, ["node", "show-quotes"])) : vue.createCommentVNode("", true),
                  vue.createVNode(jsonTreeViewValueNode_vue_vue_type_script_setup_true_lang.default, { node: valueNode.value }, {
                    renderValue: vue.withCtx(({ node: childNode }) => [
                      vue.renderSlot(_ctx.$slots, "renderValue", { node: childNode })
                    ]),
                    _: 3
                  }, 8, ["node"])
                ]),
                _: 3
              })
            ]),
            _: 3
          }, 16))
        ]),
        _: 3
      }, 8, ["node", "index-path"]);
    };
  }
});

exports.default = _sfc_main;