Add prop "showLine" to toggle line.

Author: leezng

.travis.yml

@@ -1,14 +1,13 @@
 language: node_js
 node_js:
-  - "7"
+  - "10"
 
 cache:
   directories:
     - "node_modules"
 
 install:
   - npm i
-  - npm install vue@2
 
 stages:
   - lint
@@ -24,15 +23,15 @@ jobs:
     - stage: gh_pages
       script: npm run build
       after_script:
-        - cd ./example-dist
-        - git init
-        - git remote add origin "https://${GH_TOKEN}@${GH_REF}"
-        - git checkout -b gh-pages
+        - git clone -b gh-pages "https://${GH_TOKEN}@${GH_REF}" gh-pages
+        - rm -r gh-pages/*
+        - cp -r example-dist/. gh-pages
+        - cd ./gh-pages
         - git config user.name "leezng"
         - git config user.email "im.leezng@gmail.com"
         - git add .
-        - git commit -m "update example page"
-        - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages
+        - git commit -m "update gh-pages"
+        - git push --quiet "https://${GH_TOKEN}@${GH_REF}" gh-pages:gh-pages
     - stage: github_release
       script: echo "Deploying to GitHub releases ..."
       deploy:

example/App.vue

@@ -49,6 +49,10 @@
             <label>showLength</label>
             <input type="checkbox" v-model="showLength">
           </div>
+          <div>
+            <label>showLine</label>
+            <input type="checkbox" v-model="showLine">
+          </div>
           <div>
             <label>showDoubleQuotes</label>
             <input type="checkbox" v-model="showDoubleQuotes">
@@ -70,14 +74,14 @@
             </select>
           </div>
         </div>
-
-        <h3>Latest Click Result:</h3>
+        <h3>v-model:</h3>
+        <div>{{value}}</div>
+        <h3>Current Click:</h3>
         <div>path: {{itemPath}}</div>
         <div>data: <pre>{{itemData}}</pre></div>
       </div>
       <div class="block">
         <h3>JSON Tree:</h3>
-        {{value}}
         <vue-json-pretty
           v-if="renderOK"
           :data="json"
@@ -87,6 +91,7 @@
           :highlight-mouseover-node="highlightMouseoverNode"
           :highlight-selected-node="highlightSelectedNode"
           :show-length="showLength"
+          :show-line="showLine"
           :select-on-click-node="selectOnClickNode"
           v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
@@ -135,6 +140,7 @@ export default {
       selectableType: 'single',
       showSelectController: true,
       showLength: true,
+      showLine: true,
       showDoubleQuotes: true,
       highlightMouseoverNode: true,
       highlightSelectedNode: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "A Vue.js 2.0 Toolkit for JSON",
   "author": "leezng <im.leezng@gmail.com>",
   "main": "vue-json-pretty.js",

src/assets/less/tree.less

@@ -29,7 +29,9 @@
 
   .@{css-prefix}-tree__content {
     padding-left: @content-padding;
-    border-left: 1px dotted @border-color;
+    &.has-line {
+      border-left: 1px dotted @border-color;
+    }
   }
 
   .@{css-prefix}-tree__brackets {
@@ -39,6 +41,10 @@
     }
   }
 
+  .@{css-prefix}-comment {
+    color: @comment-color;
+  }
+
   .@{css-prefix}-value__null {
     .mixin-value-style(@color-null);
   }

src/assets/less/var.less

@@ -16,6 +16,9 @@
 /* highlight */
 @highlight-bg-color: #e6f7ff;
 
+/* comment */
+@comment-color: #bfcbd9;
+
 /* common border-color */
 @border-color: #bfcbd9;
 

src/components/app.vue

@@ -31,7 +31,10 @@
       <div
         v-for="(item, key) in data"
         v-show="visible"
-        class="vjs-tree__content"
+        :class="{
+          'vjs-tree__content': true,
+          'has-line': showLine
+        }"
         :key="key">
         <vue-json-pretty
           v-model="model"
@@ -40,6 +43,7 @@
           :deep="deep"
           :show-length="showLength"
           :show-double-quotes="showDoubleQuotes"
+          :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
           :highlight-selected-node="highlightSelectedNode"
           :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
@@ -125,6 +129,10 @@
         type: Boolean,
         default: false
       },
+      showLine: {
+        type: Boolean,
+        default: true
+      },
       // 是否在点击树的时候选中节点
       selectOnClickNode: {
         type: Boolean,

src/components/brackets-left.vue

@@ -11,11 +11,16 @@
     </span>
 
     <!-- Collapse -->
-    <span
-      v-show="!dataVisiable"
-      class="vjs-tree__brackets"
-      @click.stop="toggleBrackets">
-      {{ doubleBracketsGenerator(data) }}
+    <span v-show="!dataVisiable">
+      <span
+        class="vjs-tree__brackets"
+        @click.stop="toggleBrackets">
+        {{ closedBracketsGenerator(data) }}
+      </span>
+
+      <span v-if="showLength" class="vjs-comment">
+        {{ lengthGenerator(data) }}
+      </span>
     </span>
   </div>
 </template>
@@ -29,19 +34,19 @@
       showLength: Boolean
     },
     methods: {
-      // 双括号内容生成器
-      doubleBracketsGenerator (data) {
-        const isArray = Array.isArray(data)
-        const brackets = isArray ? '[...]' : '{...}'
-        let str = this.bracketsFormatter(brackets)
-        if (this.showLength) {
-          // 若展示长度, 形如 [...] // 3 items
-          const text = isArray
-            ? `${data.length} items`
-            : `${Object.keys(data).length} keys`
-          str += ` // ${text}`
-        }
-        return str
+      // 关闭括号生成器
+      closedBracketsGenerator (data) {
+        const brackets = Array.isArray(data) ? '[...]' : '{...}'
+        return this.bracketsFormatter(brackets)
+      },
+
+      // 长度标记生成器
+      lengthGenerator (data) {
+        // 若展示长度, 形如 [...] // 3 items
+        const text = Array.isArray(data)
+          ? `${data.length} items`
+          : `${Object.keys(data).length} keys`
+        return ` // ${text}`
       }
     }
   }

src/index.js

@@ -2,5 +2,5 @@ import App from './components/app.vue'
 import './assets/less/index.less'
 
 export default Object.assign({}, App, {
-  version: '1.4.0'
+  version: '1.6.0'
 })