fix: compile warning.

Author: leezng

README.md

@@ -22,6 +22,8 @@
 
 </div>
 
+[![](./static/screenshot.png)](https://github.com/leezng/vue-json-pretty)
+
 English | [简体中文](./README.zh_CN.md)
 
 ## Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <[email protected]>",
   "main": "lib/vue-json-pretty.js",
@@ -36,7 +36,7 @@
     "@typescript-eslint/eslint-plugin": "^4.7.0",
     "@typescript-eslint/parser": "^4.7.0",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.4",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
@@ -69,7 +69,7 @@
     "shelljs": "^0.8.4",
     "typescript": "^4.0.5",
     "url-loader": "^4.1.0",
-    "vue": "^3.0.2",
+    "vue": "^3.0.4",
     "vue-loader": "^16.0.0-rc.1",
     "vue-style-loader": "^4.1.2",
     "webpack": "^5.3.0",

src/components/Tree/styles.less

@@ -3,6 +3,7 @@
 .@{css-prefix}-tree {
   font-family: 'Monaco', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace;
   font-size: 14px;
+  text-align: left;
 
   &.is-virtual {
     overflow: auto;

src/components/TreeNode/index.tsx

@@ -200,7 +200,7 @@ export default defineComponent({
           />
         ))}
 
-        {node.key && <span class="vjs-key"> {state.prettyKey}:&nbsp; </span>}
+        {node.key && <span class="vjs-key">{`${state.prettyKey}: `}</span>}
 
         <span>
           {node.type !== 'content' ? (
@@ -211,7 +211,7 @@ export default defineComponent({
             <span class={state.valueClass}>{defaultFormatter(node.content)}</span>
           )}
 
-          {node.showComma && <span>,</span>}
+          {node.showComma && <span>{','}</span>}
 
           {showLength && collapsed && <span class="vjs-comment"> // {node.length} items </span>}
         </span>