feat: support indent

Author: leezng

example/Basic.vue

@@ -34,6 +34,13 @@
           <label>collapsedOnClickBrackets</label>
           <input v-model="state.collapsedOnClickBrackets" type="checkbox" />
         </div>
+        <div>
+          <label>indent</label>
+          <select v-model="state.indent">
+            <option :value="2">2</option>
+            <option :value="4">4</option>
+          </select>
+        </div>
         <div>
           <label>deep</label>
           <select v-model="state.deep">
@@ -73,6 +80,7 @@
         :theme="localDarkMode"
         :data="state.data"
         :deep="state.deep"
+        :indent="state.indent"
         :path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"
         :show-double-quotes="state.showDoubleQuotes"
         :show-length="state.showLength"
@@ -150,6 +158,7 @@ export default defineComponent({
       collapsedOnClickBrackets: true,
       useRenderNodeKeySlot: false,
       useRenderNodeValueSlot: false,
+      indent: 2,
       deep: 4,
       setPathCollapsible: false,
       showIcon: false,

src/components/Tree/index.tsx

@@ -9,7 +9,7 @@ import {
   CSSProperties,
 } from 'vue';
 import TreeNode, { treeNodePropsPass, NodeDataType } from 'src/components/TreeNode';
-import { emitError, jsonFlatten, JSONDataType, cloneDeep } from 'src/utils';
+import { emitError, jsonFlatten, cloneDeep } from 'src/utils';
 import './styles.less';
 
 export default defineComponent({
@@ -280,6 +280,7 @@ export default defineComponent({
             key={item.id}
             data={props.data}
             rootPath={props.rootPath}
+            indent={props.indent}
             node={item}
             collapsed={!!state.hiddenPaths[item.path]}
             theme={props.theme}

src/components/TreeNode/index.tsx

@@ -22,6 +22,10 @@ export const treeNodePropsPass = {
     type: String,
     default: 'root',
   },
+  indent: {
+    type: Number,
+    default: 2,
+  },
   // Whether to display the length of (array|object).
   showLength: {
     type: Boolean,
@@ -272,7 +276,9 @@ export default defineComponent({
                   'vjs-indent-unit': true,
                   'has-line': props.showLine,
                 }}
-              />
+              >
+                {Array.from(Array(props.indent)).map(() => <>&nbsp;</>)}
+              </div>
             ))}
             {props.showIcon && <Carets nodeType={node.type} onClick={handleIconClick} />}
           </div>

src/components/TreeNode/styles.less

@@ -34,8 +34,6 @@
   }
 
   .@{css-prefix}-indent-unit {
-    width: 1em;
-
     &.has-line {
       border-left: 1px dashed @border-color;
     }