@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
137 lines (134 loc) • 6.53 kB
JavaScript
import { defineComponent, computed, toValue, resolveComponent, createBlock, openBlock, withCtx, createVNode, mergeProps, createCommentVNode, renderSlot, unref, createElementBlock, Fragment, renderList } from 'vue';
import { keyPathToKey, jsonNodeToElement, getAccessibleDescription } from '@zag-js/json-tree-utils';
import _sfc_main$b from '../tree-view/tree-view-item-text.vue.js';
import _sfc_main$a from '../tree-view/tree-view-item.vue.js';
import _sfc_main$1 from '../tree-view/tree-view-node-provider.vue.js';
import _sfc_main$8 from '../tree-view/tree-view-branch-content.vue.js';
import _sfc_main$3 from '../tree-view/tree-view-branch-control.vue.js';
import _sfc_main$9 from '../tree-view/tree-view-branch-indent-guide.vue.js';
import _sfc_main$4 from '../tree-view/tree-view-branch-indicator.vue.js';
import _sfc_main$5 from '../tree-view/tree-view-branch-text.vue.js';
import _sfc_main$2 from '../tree-view/tree-view-branch.vue.js';
import { useTreeViewContext } from '../tree-view/use-tree-view-context.js';
import _sfc_main$6 from './json-tree-view-key-node.vue.js';
import { useJsonTreeViewPropsContext } from './json-tree-view-props-context.js';
import _sfc_main$7 from './json-tree-view-value-node.vue.js';
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "json-tree-view-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", true);
return openBlock(), createBlock(_sfc_main$1, {
node: _ctx.node,
"index-path": _ctx.indexPath
}, {
default: withCtx(() => [
nodeState.value.isBranch ? (openBlock(), createBlock(_sfc_main$2, {
key: 0,
"data-scope": "json-tree-view"
}, {
default: withCtx(() => [
createVNode(_sfc_main$3, mergeProps(nodeProps.value, { "data-scope": "json-tree-view" }), {
default: withCtx(() => [
_ctx.$slots.arrow ? (openBlock(), createBlock(_sfc_main$4, {
key: 0,
"data-scope": "json-tree-view"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "arrow")
]),
_: 3
})) : createCommentVNode("", true),
createVNode(_sfc_main$5, { "data-scope": "json-tree-view" }, {
default: withCtx(() => [
key.value ? (openBlock(), createBlock(_sfc_main$6, {
key: 0,
node: _ctx.node,
"show-quotes": unref(options).quotesOnKeys
}, null, 8, ["node", "show-quotes"])) : createCommentVNode("", true),
createVNode(_sfc_main$7, { node: valueNode.value }, {
renderValue: withCtx(({ node: childNode }) => [
renderSlot(_ctx.$slots, "renderValue", { node: childNode })
]),
_: 3
}, 8, ["node"])
]),
_: 3
})
]),
_: 3
}, 16),
createVNode(_sfc_main$8, { "data-scope": "json-tree-view" }, {
default: withCtx(() => [
_ctx.$slots.indentGuide ? renderSlot(_ctx.$slots, "indentGuide", { key: 0 }) : _ctx.indentGuide ? (openBlock(), createBlock(_sfc_main$9, { key: 1 })) : createCommentVNode("", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.children, (child, index) => {
return openBlock(), createBlock(_component_JsonTreeViewNode, mergeProps({ key: index }, { ref_for: true }, _ctx.$props, {
node: child,
"index-path": [..._ctx.indexPath, index]
}), {
arrow: withCtx(() => [
renderSlot(_ctx.$slots, "arrow")
]),
indentGuide: withCtx(() => [
renderSlot(_ctx.$slots, "indentGuide")
]),
renderValue: withCtx(({ node: childNode }) => [
renderSlot(_ctx.$slots, "renderValue", { node: childNode })
]),
_: 2
}, 1040, ["node", "index-path"]);
}), 128))
]),
_: 3
})
]),
_: 3
})) : (openBlock(), createBlock(_sfc_main$a, mergeProps({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
default: withCtx(() => [
createVNode(_sfc_main$b, { "data-scope": "json-tree-view" }, {
default: withCtx(() => [
key.value ? (openBlock(), createBlock(_sfc_main$6, {
key: 0,
node: _ctx.node,
"show-quotes": unref(options).quotesOnKeys
}, null, 8, ["node", "show-quotes"])) : createCommentVNode("", true),
createVNode(_sfc_main$7, { node: valueNode.value }, {
renderValue: withCtx(({ node: childNode }) => [
renderSlot(_ctx.$slots, "renderValue", { node: childNode })
]),
_: 3
}, 8, ["node"])
]),
_: 3
})
]),
_: 3
}, 16))
]),
_: 3
}, 8, ["node", "index-path"]);
};
}
});
export { _sfc_main as default };