From 0a7ec9241f261dca62efebc16a561f8212c22f70 Mon Sep 17 00:00:00 2001 From: Vikram Biwal Date: Fri, 7 Jan 2022 13:22:58 +0530 Subject: [PATCH 1/3] Add support for Double Quotes on keys --- README.md | 1 + lib/json-box.vue | 4 +++- lib/json-viewer.vue | 5 +++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a97e290..d22e413 100644 --- a/README.md +++ b/README.md @@ -161,6 +161,7 @@ import 'vue-json-viewer/style.css' | `timeformat` | custom time format function | time => time.toLocaleString() | | `preview-mode` | no expand mode | `false` | | `show-array-index` | array show index | `true` | +| `show-double-quotes` | show double quotes | `true` | ## Listeners diff --git a/lib/json-box.vue b/lib/json-box.vue index 8afb4bf..78f60fc 100644 --- a/lib/json-box.vue +++ b/lib/json-box.vue @@ -28,6 +28,7 @@ export default { previewMode: Boolean, forceExpand: Boolean, showArrayIndex: Boolean, + showDoubleQuotes: Boolean, }, data() { return { @@ -119,7 +120,7 @@ export default { 'jv-key': true }, domProps: { - innerText: `${this.keyName}:` + innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:` } })) } @@ -137,6 +138,7 @@ export default { previewMode: this.previewMode, forceExpand: this.forceExpandMe, showArrayIndex: this.showArrayIndex, + showDoubleQuotes: this.showDoubleQuotes, }, on: { 'update:expand': value => { diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 5365041..1d8c637 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -30,6 +30,7 @@ :sort="sort" :preview-mode="previewMode" :show-array-index="showArrayIndex" + :show-double-quotes="showDoubleQuotes" />
Date: Fri, 7 Jan 2022 16:23:33 +0530 Subject: [PATCH 2/3] Updated types --- lib/json-box.vue | 2 +- lib/types/json-array.vue | 2 ++ lib/types/json-object.vue | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/json-box.vue b/lib/json-box.vue index 78f60fc..2b0cfe0 100644 --- a/lib/json-box.vue +++ b/lib/json-box.vue @@ -120,7 +120,7 @@ export default { 'jv-key': true }, domProps: { - innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:` + innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:` } })) } diff --git a/lib/types/json-array.vue b/lib/types/json-array.vue index 4b789b0..b3d7431 100644 --- a/lib/types/json-array.vue +++ b/lib/types/json-array.vue @@ -21,6 +21,7 @@ export default { forceExpand: Boolean, previewMode: Boolean, showArrayIndex: Boolean, + showDoubleQuotes: Boolean, }, data() { return { @@ -108,6 +109,7 @@ export default { previewMode: this.previewMode, forceExpand: this.forceExpand, showArrayIndex: this.showArrayIndex, + showDoubleQuotes: this.showDoubleQuotes, } })) }) diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue index 77644e7..688baed 100644 --- a/lib/types/json-object.vue +++ b/lib/types/json-object.vue @@ -21,6 +21,7 @@ export default { sort: Boolean, previewMode: Boolean, showArrayIndex: Boolean, + showDoubleQuotes: Boolean, }, data() { return { @@ -119,6 +120,7 @@ export default { previewMode: this.previewMode, forceExpand: this.forceExpand, showArrayIndex: this.showArrayIndex, + showDoubleQuotes: this.showDoubleQuotes, } })) } From c1bccc349cd109938fdd8ba66cff2bda99de8f18 Mon Sep 17 00:00:00 2001 From: "fengqi.cf" Date: Thu, 3 Mar 2022 19:28:04 +0800 Subject: [PATCH 3/3] +2.2.22 --- README.md | 3 ++- README_CN.md | 2 ++ example/app.js | 8 +++++++- lib/json-box.vue | 12 +++++++++++- lib/json-viewer.vue | 7 ++++++- lib/types/json-array.vue | 2 ++ lib/types/json-object.vue | 2 ++ package.json | 18 ++++++++++++++---- 8 files changed, 46 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index d22e413..0acbc66 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ import 'vue-json-viewer/style.css' | `timeformat` | custom time format function | time => time.toLocaleString() | | `preview-mode` | no expand mode | `false` | | `show-array-index` | array show index | `true` | -| `show-double-quotes` | show double quotes | `true` | +| `show-double-quotes` | show double quotes | `false` | ## Listeners @@ -169,6 +169,7 @@ import 'vue-json-viewer/style.css' | Listener | Description | Value | | ----------- |:------------- | ----------- | | `copied` | Emits copyEvent after text copied | Clipboard success event | +| `keyclick` | click key event | | ## Slots diff --git a/README_CN.md b/README_CN.md index 68e1f64..9244dc3 100644 --- a/README_CN.md +++ b/README_CN.md @@ -155,6 +155,7 @@ import 'vue-json-viewer/style.css' | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() | | `preview-mode` | 不可折叠模式，默认全部展开 | `false` | | `show-array-index` | 是否显示数组索引 | `true` | +| `show-double-quotes` | 展示key双引号 | `false` | ## 事件 @@ -162,6 +163,7 @@ import 'vue-json-viewer/style.css' | 事件 | 描述 | 值 | | ----------- |:------------- | ----------- | | `copied` | 复制文本后的事件 | | +| `keyclick` | 点击key的事件 | | ## Slots diff --git a/example/app.js b/example/app.js index 4409a71..6203ef6 100644 --- a/example/app.js +++ b/example/app.js @@ -16,6 +16,9 @@ new Vue({ const onCopied = (copyEvent) => { alert(`Text successfully copied!\n${copyEvent.text}`); } + const onKeyclick = (path) => { + alert(`Key Click!\n${path}`); + } return (
new Date(time)} - sort> + sort + onKeyclick={onKeyclick} + >
{ + this.onKeyclick(this.path); + } } })) } @@ -139,6 +148,7 @@ export default { forceExpand: this.forceExpandMe, showArrayIndex: this.showArrayIndex, showDoubleQuotes: this.showDoubleQuotes, + path: this.path, }, on: { 'update:expand': value => { diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 1d8c637..0ead5b6 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -31,6 +31,7 @@ :preview-mode="previewMode" :show-array-index="showArrayIndex" :show-double-quotes="showDoubleQuotes" + @keyclick="onKeyclick" />