fix: Spaces are not added between keys and values.

Author: leezng

example/Basic.vue

@@ -26,6 +26,10 @@
           <label>showDoubleQuotes</label>
           <input v-model="showDoubleQuotes" type="checkbox" />
         </div>
+        <div>
+          <label>showKeyValueSpace</label>
+          <input v-model="showKeyValueSpace" type="checkbox" />
+        </div>
         <div>
           <label>highlightMouseoverNode</label>
           <input v-model="highlightMouseoverNode" type="checkbox" />
@@ -68,6 +72,7 @@
         :highlight-mouseover-node="highlightMouseoverNode"
         :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-icon="showIcon"
+        :show-key-value-space="showKeyValueSpace"
         style="position: relative"
       >
         <template v-if="useNodeKeySlot" #nodeKey="{ node, defaultKey }">
@@ -138,6 +143,7 @@ export default {
       useNodeKeySlot: false,
       deep: 3,
       showIcon: false,
+      showKeyValueSpace: true,
     };
   },
   watch: {

src/components/Tree/index.vue

@@ -38,6 +38,7 @@
             :node-selectable="nodeSelectable"
             :highlight-selected-node="highlightSelectedNode"
             :show-icon="showIcon"
+            :show-key-value-space="showKeyValueSpace"
             :editable="editable"
             :editable-trigger="editableTrigger"
             @node-click="handleNodeClick"
@@ -164,6 +165,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showKeyValueSpace: {
+      type: Boolean,
+      default: true,
+    },
     editable: {
       type: Boolean,
       default: false,

src/components/TreeNode/index.vue

@@ -35,7 +35,7 @@
 
     <span v-if="node.key" class="vjs-key">
       <slot name="key" :node="node" :defaultKey="prettyKey">{{ prettyKey }}</slot>
-      <span>:</span>
+      <span class="vjs-colon">{{ `:${showKeyValueSpace ? ' ' : ''}` }}</span>
     </span>
 
     <span>
@@ -135,6 +135,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showKeyValueSpace: {
+      type: Boolean,
+      default: true,
+    },
     editable: {
       type: Boolean,
       default: false,

src/components/TreeNode/styles.less

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