@wirekyt/vue 0.0.1 → 0.0.2

package/dist/json-tree-view.js

@@ -0,0 +1,336 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { m as createContext } from "./utils-D95V66v9.js";
+import { t as createSplitProps } from "./create-split-props-BBxrD7TV.js";
+import { a as createTreeCollection } from "./collection-Ea6ZCZKK.js";
+import { C as _sfc_main$9, S as _sfc_main$13, T as useTreeViewContext, _ as _sfc_main$8, a as useTreeView, b as _sfc_main$11, m as _sfc_main$15, o as _sfc_main$6, p as _sfc_main$14, r as _sfc_main$16, s as _sfc_main$7, t as tree_view_exports, w as _sfc_main$12, x as _sfc_main$10 } from "./tree-view-CZcXMwi6.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 "@wirekyt/dom/json-tree-utils";
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	let 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/props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext("JsonTreeViewPropsContext");
+//#endregion
+//#region src/components/json-tree-view/root.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "root",
+	props: /*@__PURE__*/ mergeDefaults({
+		data: {},
+		defaultExpandedDepth: {},
+		quotesOnKeys: { type: Boolean },
+		maxPreviewItems: {},
+		collapseStringsAfterLength: {},
+		groupArraysAfterLength: {},
+		showNonenumerable: { type: Boolean },
+		defaultExpandedValue: {},
+		defaultSelectedValue: {},
+		defaultCheckedValue: {},
+		defaultFocusedValue: {},
+		checkedValue: {},
+		expandOnClick: { type: Boolean },
+		expandedValue: {},
+		focusedValue: {},
+		id: {},
+		ids: {},
+		selectedValue: {},
+		selectionMode: {},
+		translations: {},
+		typeahead: { type: Boolean },
+		loadChildren: { type: Function },
+		canRename: { type: Function },
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	}, {
+		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/root-provider.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "root-provider",
+	props: {
+		value: {},
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	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(_sfc_main$6), {
+				"data-scope": "json-tree-view",
+				value: treeView.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["value"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/key-node.vue
+const _hoisted_1 = ["data-non-enumerable"];
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	__name: "key-node",
+	props: {
+		node: {},
+		showQuotes: { type: Boolean }
+	},
+	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/value-node.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	__name: "value-node",
+	props: { node: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			const _component_JsonTreeViewValueNode = resolveComponent("JsonTreeViewValueNode");
+			return __props.node.type === "text" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_ctx.$slots.renderValue ? renderSlot(_ctx.$slots, "renderValue", { node: __props.node }, () => [createTextVNode(toDisplayString(__props.node.value), 1)], void 0, 0) : (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/node.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "node",
+	props: {
+		node: {},
+		indexPath: {},
+		indentGuide: { type: Boolean }
+	},
+	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");
+			return openBlock(), createBlock(unref(_sfc_main$7), {
+				node: __props.node,
+				"index-path": __props.indexPath
+			}, {
+				default: withCtx(() => [nodeState.value.isBranch ? (openBlock(), createBlock(unref(_sfc_main$8), {
+					key: 0,
+					"data-scope": "json-tree-view"
+				}, {
+					default: withCtx(() => [createVNode(unref(_sfc_main$9), mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
+						default: withCtx(() => [_ctx.$slots.arrow ? (openBlock(), createBlock(unref(_sfc_main$10), {
+							key: 0,
+							"data-scope": "json-tree-view"
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+							_: 3
+						})) : createCommentVNode("v-if", true), createVNode(unref(_sfc_main$11), { "data-scope": "json-tree-view" }, {
+							default: withCtx(() => [key.value ? (openBlock(), createBlock(_sfc_main$5, {
+								key: 0,
+								node: __props.node,
+								"show-quotes": unref(options).quotesOnKeys
+							}, null, 8, ["node", "show-quotes"])) : createCommentVNode("v-if", true), createVNode(_sfc_main$4, { node: valueNode.value }, {
+								renderValue: withCtx(({ node: childNode }) => [renderSlot(_ctx.$slots, "renderValue", { node: childNode })]),
+								_: 3
+							}, 8, ["node"])]),
+							_: 3
+						})]),
+						_: 3
+					}, 16), createVNode(unref(_sfc_main$12), { "data-scope": "json-tree-view" }, {
+						default: withCtx(() => [_ctx.$slots.indentGuide ? renderSlot(_ctx.$slots, "indentGuide", {}, void 0, void 0, 0) : __props.indentGuide ? (openBlock(), createBlock(unref(_sfc_main$13), { 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(unref(_sfc_main$14), mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
+					default: withCtx(() => [createVNode(unref(_sfc_main$15), { "data-scope": "json-tree-view" }, {
+						default: withCtx(() => [key.value ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 0,
+							node: __props.node,
+							"show-quotes": unref(options).quotesOnKeys
+						}, null, 8, ["node", "show-quotes"])) : createCommentVNode("v-if", true), createVNode(_sfc_main$4, { 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/tree.vue
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "tree",
+	props: {
+		asChild: { type: Boolean },
+		indentGuide: { type: Boolean }
+	},
+	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(unref(_sfc_main$16), mergeProps({ "data-scope": "json-tree-view" }, unref(treeProps)), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, index) => {
+					return openBlock(), createBlock(_sfc_main$3, 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/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: () => _sfc_main,
+	RootProvider: () => _sfc_main$1,
+	Tree: () => _sfc_main$2
+});
+//#endregion
+export { json_tree_view_exports as JsonTreeView, _sfc_main as JsonTreeViewRoot, _sfc_main$1 as JsonTreeViewRootProvider, _sfc_main$2 as JsonTreeViewTree, useJsonTreeView };