fix: Spaces are not added between keys and values. #234

Author: leezng

example/Basic.vue

@@ -26,6 +26,10 @@
           <label>showDoubleQuotes</label>
           <input v-model="state.showDoubleQuotes" type="checkbox" />
         </div>
+        <div>
+          <label>showKeyValueSpace</label>
+          <input v-model="state.showKeyValueSpace" type="checkbox" />
+        </div>
         <div>
           <label>collapsedOnClickBrackets</label>
           <input v-model="state.collapsedOnClickBrackets" type="checkbox" />
@@ -68,6 +72,7 @@
         :show-line-number="state.showLineNumber"
         :collapsed-on-click-brackets="state.collapsedOnClickBrackets"
         :show-icon="state.showIcon"
+        :show-key-value-space="state.showKeyValueSpace"
         style="position: relative"
       >
         <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
@@ -139,6 +144,7 @@ export default defineComponent({
       deep: 4,
       setPathCollapsible: false,
       showIcon: false,
+      showKeyValueSpace: true,
     });
 
     const pathCollapsible = node => {

src/components/Tree/index.tsx

@@ -271,6 +271,7 @@ export default defineComponent({
             editable={props.editable}
             editableTrigger={props.editableTrigger}
             showIcon={props.showIcon}
+            showKeyValueSpace={props.showKeyValueSpace}
             renderNodeKey={renderNodeKey}
             renderNodeValue={renderNodeValue}
             onNodeClick={handleNodeClick}

src/components/TreeNode/index.tsx

@@ -64,6 +64,10 @@ export const treeNodePropsPass = {
     type: Boolean,
     default: false,
   },
+  showKeyValueSpace: {
+    type: Boolean,
+    default: true,
+  },
   editable: {
     type: Boolean,
     default: false,
@@ -242,7 +246,7 @@ export default defineComponent({
           {node.key && (
             <span class="vjs-key">
               {renderKey()}
-              <span>:</span>
+              <span class="vjs-colon">{`:${props.showKeyValueSpace ? ' ' : ''}`}</span>
             </span>
           )}
 

src/components/TreeNode/styles.less

@@ -43,6 +43,10 @@
   margin-right: 4px;
 }
 
+.@{css-prefix}-colon {
+  white-space: pre;
+}
+
 .@{css-prefix}-comment {
   color: @comment-color;
 }