@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 { createSplitProps } from "../create-split-props.js";
import { createTreeCollection } from "../collection/tree-collection.js";
import { useTreeView } from "../tree-view/use-tree-view.js";
import { getBranchValues } from "./get-branch-value.js";
import { computed, toValue } from "vue";
import { getRootNode, nodeToString, nodeToValue } from "@zag-js/json-tree-utils";
//#region src/components/json-tree-view/use-json-tree-view.ts
var splitJsonTreeViewProps = createSplitProps();
var useJsonTreeView = (props) => {
	const [jsonTreeProps, localProps] = splitJsonTreeViewProps(toValue(props), [
		"maxPreviewItems",
		"collapseStringsAfterLength",
		"quotesOnKeys",
		"groupArraysAfterLength",
		"showNonenumerable"
	]);
	const treeView = useTreeView(computed(() => {
		const { data, defaultExpandedDepth, ...restProps } = localProps;
		const collection = createTreeCollection({
			nodeToValue,
			nodeToString,
			rootNode: getRootNode(data)
		});
		return {
			defaultExpandedValue: defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0,
			...restProps,
			collection,
			typeahead: false
		};
	}));
	return computed(() => ({
		...treeView.value,
		options: jsonTreeProps
	}));
};
//#endregion
export { useJsonTreeView };