@ark-ui/vue/dist/components/json-tree-view/json-tree-view-tree.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 createSplitProps = require('../create-split-props.cjs');
const treeViewTree_vue_vue_type_script_setup_true_lang = require('../tree-view/tree-view-tree.vue.cjs');
const useTreeViewContext = require('../tree-view/use-tree-view-context.cjs');
const jsonTreeViewNode_vue_vue_type_script_setup_true_lang = require('./json-tree-view-node.vue.cjs');

const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "json-tree-view-tree",
  props: {
    asChild: { type: Boolean },
    indentGuide: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const splitTreeNodeProps = createSplitProps.createSplitProps();
    const [nodeProps, treeProps] = splitTreeNodeProps(props, ["indentGuide"]);
    const tree = useTreeViewContext.useTreeViewContext();
    const children = vue.computed(() => tree.value.collection.getNodeChildren(tree.value.collection.rootNode));
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(treeViewTree_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({ "data-scope": "json-tree-view" }, vue.unref(treeProps)), {
        default: vue.withCtx(() => [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(children.value, (child, index) => {
            return vue.openBlock(), vue.createBlock(jsonTreeViewNode_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({
              key: index,
              node: child,
              "index-path": [index]
            }, { ref_for: true }, vue.unref(nodeProps)), {
              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
      }, 16);
    };
  }
});

exports.default = _sfc_main;