make not recursive

packages/design-system/src/components/N8nTree/Tree.vue

@@ -1,22 +1,21 @@
 <template>
 	<div class="n8n-tree">
-		<n8n-tree-node :input="input" :path="path">
-			<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
-				<slot :name="name" v-bind="data"></slot>
-			</template>
-		</n8n-tree-node>
+		<div v-for="row in parsedData" :style="getStyles(row)">
+			<slot name="label" v-bind:label="row.label" />
+			<span v-if="row.value">&nbsp:&nbsp;</span>
+			<span v-if="row.value" :class="$style.value">{{ row.value }}</span>
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import N8nTreeNode from './TreeNode.vue';
 
+const INDENT = 24;
+
 export default Vue.extend({
 	name: 'n8n-tree',
-	components: {
-		N8nTreeNode,
-	},
 	props: {
 		input: {
 		},
@@ -26,9 +25,46 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		parsedData() {
+			const data = traverse(this.input);
+			console.log(data);
+			return data;
+		},
+	},
+	methods: {
+		getStyles(row) {
+			return {marginLeft: `${INDENT * row.depth}px`};
+		},
 	},
 });
+
+function traverse(data, parsed = [], depth = 0) {
+	Object.keys(data).forEach((label, i) => {
+		const row = {
+			label,
+			depth,
+		};
+		parsed.push(row);
+		if (typeof data[label] !== 'object') {
+			row.value = data[label];
+		}
+		else {
+			traverse(data[label], parsed, depth + 1);
+		}
+	});
+
+	return parsed;
+}
+
 </script>
 
 <style lang="scss" module>
+.simple {
+	text-indent: -24px;
+	margin-left: var(--spacing-l);
+}
+
+.value {
+	word-break: break-all;
+}
 </style>