Merge pull request #10 from leezng/dev

release 1.4.0

Author: leezng

README.md

@@ -54,7 +54,8 @@ export default {
 | Attribute | Level | Description | Type | Default |
 |-------- |-------- |-------- |-------- | -------- |
 | data | basic | json data | JSON object | - |
-| deep | basic |data depth, data larger than this depth will not be expanded | number | Infinity |
+| deep | basic | data depth, data larger than this depth will not be expanded | number | Infinity |
+| showLength | basic | whether to show the length when closed | boolean | false |
 | path | advanced | root data path | string | root |
 | pathChecked | advanced | defines the selected data path | array | [] |
 | pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |

README.zh-CN.md

@@ -55,6 +55,7 @@ export default {
 |-------- |-------- |-------- |-------- | -------- |
 | data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
 | deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
+| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
 | path | 高级 | 定义最顶层数据层级 | string | root |
 | pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] |
 | pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |

example/App.vue

@@ -24,15 +24,31 @@
 
         <h3>Options</h3>
         <div class="options">
-          <label>selectable-type</label>
-          <select v-model="selectableType">
-            <option>-</option>
-            <option>both</option>
-            <option>checkbox</option>
-            <option>tree</option>
-          </select>
-          <label>path</label>
-          <input type="text" v-model="path">
+          <div>
+            <label>selectable-type</label>
+            <select v-model="selectableType">
+              <option>-</option>
+              <option>both</option>
+              <option>checkbox</option>
+              <option>tree</option>
+            </select>
+          </div>
+          <div>
+            <label>path</label>
+            <input type="text" v-model="path">
+          </div>
+          <div>
+            <label>showLength</label>
+            <input type="checkbox" v-model="showLength">
+          </div>
+          <!-- <div>
+            <label>deep</label>
+            <select v-model="deep">
+              <option :value="2">2</option>
+              <option :value="3">3</option>
+              <option :value="4">4</option>
+            </select>
+          </div> -->
         </div>
 
         <h3>Latest Click Result:</h3>
@@ -44,6 +60,8 @@
         <vue-json-pretty
           :data="json"
           :path="path"
+          :deep="deep"
+          :show-length="showLength"
           :path-checked="['res', 'res.c']"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
@@ -80,12 +98,14 @@ export default {
         }, {
           news_id: 51182,
           title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
-          source: 'AI Finance'
+          source: 'AI Finance',
+          members: ['Daniel, Mike, John']
         }]
       },
       selectableType: 'both',
+      showLength: true,
       path: 'res',
-      deep: 3,
+      deep: 4,
       itemData: {},
       itemPath: ''
     }

package-lock.json

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

package.json

@@ -18,6 +18,7 @@
       <brackets-left
         :visiable.sync="visiable"
         :data="data"
+        :show-length="showLength"
         :not-last-key="notLastKey">
         <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ currentKey }}:</span>
       </brackets-left>
@@ -32,6 +33,7 @@
           :parent-data="data"
           :data="item"
           :deep="deep"
+          :show-length="showLength"
           :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
           :path-checked="pathChecked"
           :path-selectable="pathSelectable"
@@ -84,6 +86,11 @@
         type: Number,
         default: Infinity
       },
+      // 是否显示数组|对象的长度
+      showLength: {
+        type: Boolean,
+        default: false
+      },
       // 数据层级顶级路径
       path: {
         type: String,
@@ -171,7 +178,7 @@
       handleMouseout () {
         this.existMouseover && this.selectable && (this.treeContentBackground = 'transparent')
       },
-      // 工具函数: 判断是否对象
+      // 是否对象
       isObject (value) {
         return this.getDataType(value) === 'object'
       },

src/components/app.vue

@@ -4,14 +4,14 @@
     <span
       v-show="dataVisiable"
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
+      @click.stop="toggleBrackets">
       {{ Array.isArray(data) ? '[' : '{' }}
     </span>
     <span
       v-show="!dataVisiable"
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
-      {{ bracketsFormatter(Array.isArray(data) ? '[...]' : '{...}') }}
+      @click.stop="toggleBrackets">
+      {{ doubleBracketsGenerator(data) }}
     </span>
   </div>
 </template>
@@ -20,6 +20,24 @@
   import bracketsMixin from 'src/mixins/brackets-mixin'
 
   export default {
-    mixins: [bracketsMixin]
+    mixins: [bracketsMixin],
+    props: {
+      showLength: Boolean
+    },
+    methods: {
+      // 双括号内容生成器
+      doubleBracketsGenerator (data) {
+        const isArray = Array.isArray(data)
+        let brackets = isArray ? '[...]' : '{...}'
+        if (this.showLength) {
+          // 若展示长度, 形如 [...] // 3 items
+          const text = isArray
+            ? `${data.length} items`
+            : `${Object.keys(data).length} keys`
+          brackets += ` // ${text}`
+        }
+        return this.bracketsFormatter(brackets)
+      }
+    }
   }
 </script>

src/components/brackets-left.vue

@@ -2,7 +2,7 @@
   <div v-show="dataVisiable">
     <span
       class="vjs__tree__node"
-      @click.stop="dataVisiable = !dataVisiable">
+      @click.stop="toggleBrackets">
       {{ bracketsFormatter(Array.isArray(data) ? ']' : '}') }}
     </span>
   </div>

src/components/brackets-right.vue

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

src/index.js

@@ -20,6 +20,11 @@ export default {
     }
   },
   methods: {
+    // 切换括号展开|关闭
+    toggleBrackets () {
+      this.dataVisiable = !this.dataVisiable
+    },
+    // 括号优化函数, 若不是最后一项, 自动添加逗号
     bracketsFormatter (brackets) {
       return this.notLastKey ? `${brackets},` : brackets
     }