feature/show-line-number

example/App.vue

@@ -137,6 +137,13 @@
               type="checkbox"
             >
           </div>
+          <div>
+            <label>showLineNumber</label>
+            <input
+              v-model="showLineNumber"
+              type="checkbox"
+            >
+          </div>
           <div>
             <label>showDoubleQuotes</label>
             <input
@@ -206,6 +213,7 @@
           :highlight-selected-node="highlightSelectedNode"
           :show-length="showLength"
           :show-line="showLine"
+          :show-line-number="showLineNumber"
           :select-on-click-node="selectOnClickNode"
           :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :path-selectable="((path, data) => typeof data !== 'number')"
@@ -268,6 +276,7 @@ export default {
       showSelectController: true,
       showLength: false,
       showLine: true,
+      showLineNumber: false,
       showDoubleQuotes: true,
       highlightMouseoverNode: true,
       highlightSelectedNode: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.7.0-rc.2",
+  "version": "1.7.1",
   "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <im.leezng@gmail.com>",
   "main": "lib/vue-json-pretty.js",

src/assets/less/index.less

@@ -1,3 +1,4 @@
 @import "./checkbox.less";
 @import "./radio.less";
 @import "./tree.less";
+@import "./line-number";

src/assets/less/line-number.less

@@ -0,0 +1,11 @@
+@import "./var.less";
+
+.@{css-prefix}-line-number {
+  position: absolute;
+  left: -@selectabl-span;
+  color: #1f2d3d;
+}
+
+.@{css-prefix}-line-number-selectable {
+  left: -60px
+}

src/components/app.vue

@@ -27,6 +27,16 @@
       />
     </template>
 
+    <span
+      v-if="showLineNumber"
+      :class="{
+        'vjs-line-number': showLineNumber,
+        'vjs-line-number-selectable': showSelectController
+      }"
+    >
+      {{ lineNumber }}
+    </span>
+
     <template v-if="Array.isArray(data) || isObject(data)">
       <!-- 左闭合 -->
       <brackets-left
@@ -55,12 +65,14 @@
         }"
       >
         <vue-json-pretty
+          :ref="`vjs-${lineNumber}`"
           v-model="model"
           :parent-data="data"
           :data="item"
           :deep="deep"
           :show-length="showLength"
           :show-double-quotes="showDoubleQuotes"
+          :show-line-number="showLineNumber"
           :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
           :highlight-selected-node="highlightSelectedNode"
@@ -71,19 +83,32 @@
           :select-on-click-node="selectOnClickNode"
           :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :current-key="key"
+          :line-count="lineCount"
+          :recursive-line-count="recursiveLineCount"
           :current-deep="currentDeep + 1"
           :custom-value-formatter="customValueFormatter"
           @click="handleItemClick"
           @change="handleItemChange"
         />
       </div>
 
+      <span
+        v-if="showLineNumber && visible"
+        :class="{
+          'vjs-line-number': showLineNumber,
+          'vjs-line-number-selectable': showSelectController
+        }"
+      >
+        {{ getRecursiveLineNumber() }}
+      </span>
+
       <!-- 右闭合 -->
       <brackets-right
         :visible.sync="visible"
         :data="data"
         :collapsed-on-click-brackets="collapsedOnClickBrackets"
         :show-comma="notLastKey"
+        @rightBracketLoaded="handleRecursiveCount"
       />
     </template>
 
@@ -164,6 +189,10 @@
         type: Boolean,
         default: true
       },
+      showLineNumber: {
+        type: Boolean,
+        default: false
+      },
       // 是否在点击树的时候选中节点
       selectOnClickNode: {
         type: Boolean,
@@ -217,12 +246,25 @@
       currentKey: {
         type: [Number, String],
         default: ''
+      },
+      // hold line count as items are added to the stack
+      lineCount: {
+        type: [Array],
+        default: () => []
+      },
+      // hold line count for items popped off the stack
+      recursiveLineCount: {
+        type: [Array],
+        default: () => []
       }
       /* outer props */
     },
     data () {
       return {
         visible: this.currentDeep <= this.deep,
+        lineNumber: 1,
+        previousLineNumber: 1,
+        recursiveCount: 1,
         isMouseover: false,
         currentCheckboxVal: Array.isArray(this.value) ? this.value.includes(this.path) : false
       }
@@ -371,10 +413,69 @@
         return getDataType(value) === 'object'
       },
 
+      keyFormatter (key) {
+        return this.showDoubleQuotes ? `"${key}"` : key
+      },
+
+      getRecursiveLineNumber () {
+        if (this.lineNumber >= this.recursiveLineCount.length) {
+          const diff = this.lineNumber - this.recursiveLineCount.length + 1
+          for (let i = 0; i <= diff; i++) {
+            this.recursiveLineCount.push('nl')
+          }
+        }
+
+        if (this.lineNumber > this.recursiveCount) {
+          return this.lineNumber + 1
+        }
+
+        return this.recursiveCount
+      },
+
+      handleRecursiveCount () {
+        // iterate stack line count to stay up to date
+        this.lineCount.push('nl')
+
+        // grab most recent referenced element
+        let el
+        Object.keys(this.$refs).forEach((key) => {
+          const last = this.$refs[key].length - 1
+          el = this.$refs[key][last]
+        })
+
+        // assign most recent referenced line number for start of recursive count
+        this.previousLineNumber = el.lineNumber + 1
+
+        const diff = this.previousLineNumber - this.recursiveLineCount.length
+
+        // handle edge case where json is one key and empty object
+        if (diff === 0 && this.recursiveLineCount.length <= 3) {
+          this.recursiveLineCount.push('nl')
+        }
+
+        // add recursive lines up to the previous one
+        if (diff > 0) {
+          for (let i = 0; i < diff; i++) {
+            this.recursiveLineCount.push('nl')
+          }
+        }
+
+        // assign new recursive count
+        this.recursiveCount = this.recursiveLineCount.length
+
+        // increment recursive count for multiple pops off the stack in a row
+        this.recursiveLineCount.push('nl')
+      },
+
       getChildPath (key) {
         return this.path + (Array.isArray(this.data) ? `[${key}]` : key.includes('.') ? `["${key}"]` : `.${key}`)
       }
     },
+    // increment and assign stack line count
+    created () {
+      this.lineCount.push('nl')
+      this.lineNumber = this.lineCount.length
+    },
     // 捕获一个来自子组件的错误
     //    因为是递归组件，因此错误只对外暴露一次，子组件的错误不再对外传递
     errorCaptured () {

src/components/brackets-right.vue

@@ -13,6 +13,9 @@
   import bracketsMixin from 'src/mixins/brackets-mixin'
 
   export default {
-    mixins: [bracketsMixin]
+    mixins: [bracketsMixin],
+    created () {
+      this.$emit('rightBracketLoaded')
+    }
   }
 </script>