feat: merge develop

README.md

@@ -2,7 +2,7 @@
 
 [中文版](https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md)
 
-Simple JSON viewer component, for Vue.js 2.
+Simple JSON viewer component, for Vue.js 2 or 3.
 
 Support for incremental update components
 
@@ -20,12 +20,18 @@ Support for incremental update components
 ## Installing
 Using npm:
 ```
-$ npm install vue-json-viewer --save
+$ npm install vue-json-viewer@2 --save
+// Vue2
+$ npm install vue-json-viewer@3 --save
+// Vue3
 ```
 
 Using yarn:
 ```
-$ yarn add vue-json-viewer
+$ yarn add vue-json-viewer@2 
+// Vue2
+$ yarn add vue-json-viewer@3 
+// Vue3
 ```
 
 ## Example

README_CN.md

@@ -1,6 +1,6 @@
 # vue-json-viewer
 
-简单易用的json内容展示组件，支持vue@2.0+，支持SSR，组件支持增量渲染即使大文件json也可以快速渲染。
+简单易用的json内容展示组件，支持vue@2和3，支持SSR，组件支持增量渲染即使大文件json也可以快速渲染。
 
 [![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer)
 [![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer)
@@ -14,12 +14,18 @@
 ## 安装
 使用 npm:
 ```
-$ npm install vue-json-viewer --save
+$ npm install vue-json-viewer@2 --save
+// Vue2
+$ npm install vue-json-viewer@3 --save
+// Vue3
 ```
 
 使用 yarn:
 ```
-$ yarn add vue-json-viewer
+$ yarn add vue-json-viewer@2 
+// Vue2
+$ yarn add vue-json-viewer@3 
+// Vue3
 ```
 
 ## 示例

example/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-json-viewer": "^3.0.1"
+  }
+}

lib/json-box.vue

@@ -27,19 +27,31 @@ export default {
       default: 0
     },
     previewMode: Boolean,
+    forceExpand: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
-      expand: true
+      expand: true,
+      forceExpandMe: this.forceExpand,
     }
   },
   mounted() {
-    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true)
+    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe
   },
   methods: {
     toggle() {
       this.expand = !this.expand
 
+      this.dispatchEvent()
+    },
+    toggleAll() {
+      this.expand = !this.expand
+      this.forceExpandMe = this.expand
+
+      this.dispatchEvent()
+    },
+    dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
@@ -65,7 +77,7 @@ export default {
     let elements = []
     let dataType
 
-    if (this.value === null || this.value === undefined) {
+    if (this.value === null || this.value === undefined) {
       dataType = JsonUndefined
     } else if (Array.isArray(this.value)) {
       dataType = JsonArray
@@ -90,7 +102,13 @@ export default {
           'jv-toggle': true,
           open: !!this.expand
         },
-        onClick: this.toggle
+        onClick: (event) => {
+          if (event.altKey) {
+            this.toggleAll()
+          } else {
+            this.toggle()
+          }
+        }
       }))
     }
 
@@ -113,8 +131,14 @@ export default {
       depth: this.depth,
       expand: this.expand,
       previewMode: this.previewMode,
+      forceExpand: this.forceExpandMe,
+      showArrayIndex: this.showArrayIndex,
       'onUpdate:expand': value => {
         this.expand = value
+      },
+      'onUpdate:expandAll': value => {
+        this.expand = value
+        this.forceExpandMe = this.expand
       }
     }))
 

lib/json-viewer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="viewer" :class="jvClass">
+  <div
+    ref="viewer"
+    :class="jvClass"
+  >
     <div 
       v-if="copyable"
       :class="`jv-tooltip ${copyText.align || 'right'}`"
@@ -26,6 +29,7 @@
         :value="value"
         :sort="sort"
         :preview-mode="previewMode"
+        :show-array-index="showArrayIndex"
       />
     </div>
     <div
@@ -88,6 +92,10 @@ export default {
     previewMode: {
       type: Boolean,
       default: false,
+    },
+    showArrayIndex: {
+      type: Boolean,
+      default: true,
     }
   },
   provide () {

lib/types/json-array.vue

@@ -19,7 +19,9 @@ export default {
     },
     sort: Boolean,
     expand: Boolean,
+    forceExpand: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -48,7 +50,13 @@ export default {
     },
     toggle() {
       this.$emit('update:expand', !this.expand)
-
+      this.dispatchEvent();
+    },
+    toggleAll() {
+      this.$emit('update:expandAll', !this.expand)
+      this.dispatchEvent();
+    },
+    dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
@@ -58,7 +66,6 @@ export default {
         this.$el.dispatchEvent(evt)
       }
     },
-
   },
   render () {
     let elements = []
@@ -69,7 +76,13 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        onClick: this.toggle
+        onClick: (event) => {
+          if (event.altKey) {
+            this.toggleAll()
+          } else {
+            this.toggle()
+          }
+        }
       }))
     }
 
@@ -88,23 +101,28 @@ export default {
             display: this.expand ? undefined : 'none'
           },
           sort: this.sort,
-          keyName: `${key}`,
+          keyName: this.showArrayIndex ? `${key}`: '',
           depth: this.depth + 1,
           value,
           previewMode: this.previewMode,
+          forceExpand: this.forceExpand,
+          showArrayIndex: this.showArrayIndex,
         }))
       })
     }
 
     if (!this.expand && this.value.length) {
       elements.push(h('span', {
-        style: {
-          display: undefined
-        },
         class: {
           'jv-ellipsis': true,
         },
-        onClick: this.toggle,
+        onClick: (event) => {
+          if (event.altKey) {
+            this.toggleAll()
+          } else {
+            this.toggle()
+          }
+        },
         title: `click to reveal ${this.value.length} hidden items`,
         innerText: '...'
       }))

lib/types/json-object.vue

@@ -18,8 +18,10 @@ export default {
       default: 0
     },
     expand: Boolean,
+    forceExpand: Boolean,
     sort: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -57,6 +59,10 @@ export default {
       this.$emit('update:expand', !this.expand)
       this.dispatchEvent();
     },
+    toggleAll() {
+      this.$emit('update:expandAll', !this.expand)
+      this.dispatchEvent();
+    },
     dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
@@ -77,7 +83,13 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        onClick: this.toggle
+        onClick: (event) => {
+          if (event.altKey) {
+            this.toggleAll()
+          } else {
+            this.toggle()
+          }
+        }
       }))
     }
 
@@ -99,12 +111,13 @@ export default {
             style: {
               display: !this.expand ? 'none' : undefined
             },
-
             sort: this.sort,
             keyName: key,
             depth: this.depth + 1,
             value,
             previewMode: this.previewMode,
+            forceExpand: this.forceExpand,
+            showArrayIndex: this.showArrayIndex,
           }))
         }
       }
@@ -112,13 +125,16 @@ export default {
 
     if (!this.expand && Object.keys(this.value).length) {
       elements.push(h('span', {
-        style: {
-          display: this.expand ? 'none' : undefined
-        },
         class: {
           'jv-ellipsis': true,
         },
-        onClick: this.toggle,
+        onClick: (event) => {
+          if (event.altKey) {
+            this.toggleAll()
+          } else {
+            this.toggle()
+          }
+        },
         title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`,
         innerText: '...'
       }))