@sprawlify/vue 0.0.67 → 0.0.72

package/dist/components/json-tree-view/index.js

@@ -0,0 +1,490 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import "../../core-DNndr38p.js";
+import "../../providers-DNBWT-O_.js";
+import { t as createContext } from "../../create-context-Ds1GbsVc.js";
+import "../../use-forward-expose-CCAmHTUB.js";
+import "../../factory-Co08Aw8u.js";
+import "../../collapsible-jX9S7WYj.js";
+import { t as createSplitProps } from "../../create-split-props-0RD5_O4P.js";
+import "../../use-render-strategy-DA33j31C.js";
+import { a as createTreeCollection } from "../../collection-DGKjEgOz.js";
+import { C as tree_view_branch_control_default, S as tree_view_branch_indent_guide_default, T as useTreeViewContext, _ as tree_view_branch_default, a as useTreeView, b as tree_view_branch_text_default, m as tree_view_item_text_default, o as tree_view_root_provider_default, p as tree_view_item_default, r as tree_view_tree_default, s as tree_view_node_provider_default, t as tree_view_exports, w as tree_view_branch_content_default, x as tree_view_branch_indicator_default } from "../../tree-view-Ctpu5RjE.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeDefaults, mergeProps, openBlock, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toValue, unref, withCtx } from "vue";
+import { getAccessibleDescription, getRootNode, jsonNodeToElement, keyPathToKey, nodeToString, nodeToValue } from "@sprawlify/primitives/json-tree-utils";
+
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	const values = [];
+	tree.visit({ onEnter: (node, indexPath) => {
+		if (indexPath.length === 0) return;
+		if (tree.isBranchNode(node) && indexPath.length <= depth) values.push(tree.getNodeValue(node));
+	} });
+	return values;
+}
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext("JsonTreeViewPropsContext");
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.vue?vue&type=script&setup=true&lang.ts
+var json_tree_view_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		data: {
+			type: Object,
+			required: true
+		},
+		defaultExpandedDepth: {
+			type: Number,
+			required: false
+		},
+		quotesOnKeys: {
+			type: Boolean,
+			required: false
+		},
+		maxPreviewItems: {
+			type: Number,
+			required: false
+		},
+		collapseStringsAfterLength: {
+			type: Number,
+			required: false
+		},
+		groupArraysAfterLength: {
+			type: Number,
+			required: false
+		},
+		showNonenumerable: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandedValue: {
+			type: Array,
+			required: false
+		},
+		defaultSelectedValue: {
+			type: Array,
+			required: false
+		},
+		defaultCheckedValue: {
+			type: Array,
+			required: false
+		},
+		defaultFocusedValue: {
+			type: String,
+			required: false
+		},
+		checkedValue: {
+			type: Array,
+			required: false
+		},
+		expandOnClick: {
+			type: Boolean,
+			required: false
+		},
+		expandedValue: {
+			type: Array,
+			required: false
+		},
+		focusedValue: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		selectedValue: {
+			type: Array,
+			required: false
+		},
+		selectionMode: {
+			type: String,
+			required: false
+		},
+		typeahead: {
+			type: Boolean,
+			required: false
+		},
+		loadChildren: {
+			type: Function,
+			required: false
+		},
+		canRename: {
+			type: Function,
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		expandOnClick: void 0,
+		typeahead: void 0,
+		lazyMount: void 0,
+		unmountOnExit: void 0,
+		asChild: void 0,
+		showNonenumerable: void 0,
+		quotesOnKeys: void 0
+	}),
+	setup(__props) {
+		const props = __props;
+		const [jsonTreeProps, localProps] = createSplitProps()(props, [
+			"maxPreviewItems",
+			"collapseStringsAfterLength",
+			"quotesOnKeys",
+			"groupArraysAfterLength",
+			"showNonenumerable"
+		]);
+		const { data, defaultExpandedDepth, ...restProps } = localProps;
+		const collection = computed(() => {
+			return createTreeCollection({
+				nodeToValue,
+				nodeToString,
+				rootNode: getRootNode(data)
+			});
+		});
+		const defaultExpandedValue = computed(() => {
+			const expandedValue = defaultExpandedDepth != null ? getBranchValues(collection.value, defaultExpandedDepth) : void 0;
+			return props.defaultExpandedValue || expandedValue;
+		});
+		JsonTreeViewPropsProvider(computed(() => jsonTreeProps));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(tree_view_exports).Root, mergeProps({ "data-scope": "json-tree-view" }, restProps, {
+				collection: collection.value,
+				defaultExpandedValue: defaultExpandedValue.value,
+				typeahead: false
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["collection", "defaultExpandedValue"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root.vue
+var json_tree_view_root_default = json_tree_view_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.vue?vue&type=script&setup=true&lang.ts
+var json_tree_view_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const jsonTreeView = __props.value;
+		const treeView = computed(() => {
+			const { options: _, ...rest } = jsonTreeView.value;
+			return rest;
+		});
+		JsonTreeViewPropsProvider(computed(() => jsonTreeView.value.options));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(tree_view_root_provider_default), {
+				"data-scope": "json-tree-view",
+				value: treeView.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["value"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-root-provider.vue
+var json_tree_view_root_provider_default = json_tree_view_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-key-node.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-non-enumerable"];
+var json_tree_view_key_node_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-key-node",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		showQuotes: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const key = computed(() => keyPathToKey(props.node.keyPath));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				"data-kind": "key",
+				"data-non-enumerable": __props.node.isNonEnumerable ? "" : void 0
+			}, toDisplayString(__props.showQuotes ? `"${key.value}"` : key.value), 9, _hoisted_1), _cache[0] || (_cache[0] = createElementVNode("span", { "data-kind": "colon" }, ":", -1))], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-key-node.vue
+var json_tree_view_key_node_default = json_tree_view_key_node_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-value-node.vue?vue&type=script&setup=true&lang.ts
+var json_tree_view_value_node_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-value-node",
+	props: { node: {
+		type: Object,
+		required: true
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			const _component_JsonTreeViewValueNode = resolveComponent("JsonTreeViewValueNode", true);
+			return __props.node.type === "text" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_ctx.$slots.renderValue ? renderSlot(_ctx.$slots, "renderValue", {
+				key: 0,
+				node: __props.node
+			}, () => [createTextVNode(toDisplayString(__props.node.value), 1)]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.node.value), 1)], 64))], 64)) : (openBlock(), createBlock(resolveDynamicComponent(__props.node.tagName), {
+				key: 1,
+				"data-root": __props.node.properties.root ? "" : void 0,
+				"data-type": __props.node.properties.nodeType,
+				"data-kind": __props.node.properties.kind
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, (child, index) => {
+					return openBlock(), createBlock(_component_JsonTreeViewValueNode, {
+						key: index,
+						node: child
+					}, {
+						renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+						_: 3
+					}, 8, ["node"]);
+				}), 128))]),
+				_: 3
+			}, 8, [
+				"data-root",
+				"data-type",
+				"data-kind"
+			]));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-value-node.vue
+var json_tree_view_value_node_default = json_tree_view_value_node_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.vue?vue&type=script&setup=true&lang.ts
+var json_tree_view_node_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-node",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		indexPath: {
+			type: Array,
+			required: true
+		},
+		indentGuide: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const tree = useTreeViewContext();
+		const nodeState = computed(() => tree.value.getNodeState({
+			node: props.node,
+			indexPath: props.indexPath
+		}));
+		const options = useJsonTreeViewPropsContext();
+		const key = computed(() => keyPathToKey(props.node.keyPath, { excludeRoot: true }));
+		const valueNode = computed(() => jsonNodeToElement(props.node, toValue(options)));
+		const nodeProps = computed(() => {
+			const desc = 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 = resolveComponent("JsonTreeViewNode", true);
+			return openBlock(), createBlock(tree_view_node_provider_default, {
+				node: __props.node,
+				"index-path": __props.indexPath
+			}, {
+				default: withCtx(() => [nodeState.value.isBranch ? (openBlock(), createBlock(tree_view_branch_default, {
+					key: 0,
+					"data-scope": "json-tree-view"
+				}, {
+					default: withCtx(() => [createVNode(tree_view_branch_control_default, mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
+						default: withCtx(() => [_ctx.$slots.arrow ? (openBlock(), createBlock(tree_view_branch_indicator_default, {
+							key: 0,
+							"data-scope": "json-tree-view"
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+							_: 3
+						})) : createCommentVNode("v-if", true), createVNode(tree_view_branch_text_default, { "data-scope": "json-tree-view" }, {
+							default: withCtx(() => [key.value ? (openBlock(), createBlock(json_tree_view_key_node_default, {
+								key: 0,
+								node: __props.node,
+								"show-quotes": unref(options).quotesOnKeys
+							}, null, 8, ["node", "show-quotes"])) : createCommentVNode("v-if", true), createVNode(json_tree_view_value_node_default, { node: valueNode.value }, {
+								renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+								_: 3
+							}, 8, ["node"])]),
+							_: 3
+						})]),
+						_: 3
+					}, 16), createVNode(tree_view_branch_content_default, { "data-scope": "json-tree-view" }, {
+						default: withCtx(() => [_ctx.$slots.indentGuide ? renderSlot(_ctx.$slots, "indentGuide", { key: 0 }) : __props.indentGuide ? (openBlock(), createBlock(tree_view_branch_indent_guide_default, { key: 1 })) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.node.children, (child, index) => {
+							return openBlock(), createBlock(_component_JsonTreeViewNode, mergeProps({ key: index }, { ref_for: true }, _ctx.$props, {
+								node: child,
+								"index-path": [...__props.indexPath, index]
+							}), {
+								arrow: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+								indentGuide: withCtx(() => [renderSlot(_ctx.$slots, "indentGuide")]),
+								renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+								_: 3
+							}, 16, ["node", "index-path"]);
+						}), 128))]),
+						_: 3
+					})]),
+					_: 3
+				})) : (openBlock(), createBlock(tree_view_item_default, mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
+					default: withCtx(() => [createVNode(tree_view_item_text_default, { "data-scope": "json-tree-view" }, {
+						default: withCtx(() => [key.value ? (openBlock(), createBlock(json_tree_view_key_node_default, {
+							key: 0,
+							node: __props.node,
+							"show-quotes": unref(options).quotesOnKeys
+						}, null, 8, ["node", "show-quotes"])) : createCommentVNode("v-if", true), createVNode(json_tree_view_value_node_default, { node: valueNode.value }, {
+							renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+							_: 3
+						}, 8, ["node"])]),
+						_: 3
+					})]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 8, ["node", "index-path"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-node.vue
+var json_tree_view_node_default = json_tree_view_node_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.vue?vue&type=script&setup=true&lang.ts
+var json_tree_view_tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "json-tree-view-tree",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		indentGuide: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const [nodeProps, treeProps] = createSplitProps()(props, ["indentGuide"]);
+		const tree = useTreeViewContext();
+		const children = computed(() => tree.value.collection.getNodeChildren(tree.value.collection.rootNode));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(tree_view_tree_default, mergeProps({ "data-scope": "json-tree-view" }, unref(treeProps)), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, index) => {
+					return openBlock(), createBlock(json_tree_view_node_default, mergeProps({
+						key: index,
+						node: child,
+						"index-path": [index]
+					}, { ref_for: true }, unref(nodeProps)), {
+						arrow: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+						indentGuide: withCtx(() => [renderSlot(_ctx.$slots, "indentGuide")]),
+						renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+						_: 3
+					}, 16, ["node", "index-path"]);
+				}), 128))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/json-tree-view/json-tree-view-tree.vue
+var json_tree_view_tree_default = json_tree_view_tree_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.ts
+const splitJsonTreeViewProps = createSplitProps();
+const 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
+//#region src/components/json-tree-view/json-tree-view.ts
+var json_tree_view_exports = /* @__PURE__ */ __exportAll({
+	Root: () => json_tree_view_root_default,
+	RootProvider: () => json_tree_view_root_provider_default,
+	Tree: () => json_tree_view_tree_default
+});
+
+//#endregion
+export { json_tree_view_exports as JsonTreeView, json_tree_view_root_default as JsonTreeViewRoot, json_tree_view_root_provider_default as JsonTreeViewRootProvider, json_tree_view_tree_default as JsonTreeViewTree, useJsonTreeView };