@ark-ui/vue/dist/components/json-tree-view/use-json-tree-view.js

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

import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
import { computed, toValue } from 'vue';
import { createTreeCollection } from '../collection/tree-collection.js';
import { useTreeView } from '../tree-view/use-tree-view.js';
import { getBranchValues } from './get-branch-value.js';

const useJsonTreeView = (props) => {
  const machineProps = computed(() => {
    const { data, defaultExpandedDepth, ...restProps } = toValue(props);
    const collection = createTreeCollection({
      nodeToValue,
      nodeToString,
      rootNode: getRootNode(data)
    });
    const defaultExpandedValue = defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
    return {
      defaultExpandedValue,
      ...restProps,
      collection,
      typeahead: false
    };
  });
  return useTreeView(machineProps);
};

export { useJsonTreeView };