fix: White space before commas. #115

Author: leezng

src/components/TreeNode/index.vue

@@ -25,24 +25,15 @@
     />
     <span v-if="node.key" class="vjs-key">{{ prettyKey }}:</span>
 
-    <span class="vjs-value__container">
+    <span>
       <brackets
         v-if="node.type !== 'content'"
         :data="node.content"
         :collapsed-on-click-brackets="collapsedOnClickBrackets"
         @click="onBracketsClick"
       />
 
-      <template v-else>
-        <span
-          v-if="customValueFormatter"
-          :class="valueClass"
-          v-html="customFormatter(node.content)"
-        />
-        <span v-else :class="valueClass">{{ defaultFormatter(node.content) }}</span>
-      </template>
-
-      <span v-if="node.showComma">,</span>
+      <span v-else :class="valueClass" v-html="valueFormatter(node.content)" />
 
       <span v-if="showLength && collapsed" class="vjs-comment"> // {{ node.length }} items </span>
     </span>
@@ -143,15 +134,17 @@ export default {
       return text;
     },
 
-    customFormatter(data) {
-      return this.customValueFormatter
+    valueFormatter(data) {
+      const basic = this.customValueFormatter
         ? this.customValueFormatter(
             data,
             this.node.key,
             this.node.path,
             this.defaultFormatter(data),
           )
         : this.defaultFormatter(data);
+
+      return this.node.showComma ? `${basic},` : basic;
     },
 
     onBracketsClick() {

src/components/TreeNode/styles.less

@@ -30,18 +30,6 @@
   color: @comment-color;
 }
 
-.@{css-prefix}-value__container {
-  white-space: nowrap;
-  &:after {
-    content: '';
-    clear: both;
-  }
-}
-
-.@{css-prefix}-value {
-  float: left;
-}
-
 .@{css-prefix}-value__null {
   .gen-value-style(@color-null);
 }