1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <script>
| import JsonBox from '../json-box.vue'
| import{h} from "vue"
| export default {
| name: 'JsonArray',
| props: {
| jsonValue: {
| type: Array,
| required: true
| },
| keyName: {
| type: String,
| default: ''
| },
| depth: {
| type: Number,
| default: 0
| },
| sort: Boolean,
| expand: Boolean,
| previewMode: Boolean,
| },
| data() {
| return {
| value: []
| }
| },
| watch: {
| jsonValue(newVal) {
| this.setValue(newVal);
| }
| },
| mounted() {
| this.setValue(this.jsonValue);
| },
| methods: {
| setValue(vals, index = 0) {
| if (index === 0) {
| this.value = [];
| }
| setTimeout(() => {
| if (vals.length > index) {
| this.value.push(vals[index]);
| this.setValue(vals, index + 1);
| }
| }, 0);
| },
| toggle() {
| this.$emit('update:expand', !this.expand)
|
| try {
| this.$el.dispatchEvent(new Event('resized'))
| } catch (e) {
| // handle IE not supporting Event constructor
| var evt = document.createEvent('Event')
| evt.initEvent('resized', true, false)
| this.$el.dispatchEvent(evt)
| }
| },
|
| },
| render () {
| let elements = []
|
| if (!this.previewMode && !this.keyName) {
| elements.push(h('span', {
| class: {
| 'jv-toggle': true,
| 'open': !!this.expand,
| },
| onClick:this.toggle
| }))
| }
|
| elements.push(h('span', {
| class: {
| 'jv-item': true,
| 'jv-array': true,
| },
| innerText: '['
| }))
| if (this.expand) {
| this.value.forEach((value, key) => {
| elements.push(h(JsonBox, {
| key,
| style: {
| display: this.expand ? undefined : 'none'
| },
| sort: this.sort,
| // keyName: key,
| depth: this.depth + 1,
| value,
| previewMode: this.previewMode,
| }))
| })
| }
|
| if (!this.expand && this.value.length) {
| elements.push(h('span', {
| style: {
| display: undefined
| },
| class: {
| 'jv-ellipsis': true,
| },
| onClick:this.toggle,
| title: `click to reveal ${this.value.length} hidden items`,
| innerText: '...'
| }))
| }
|
| elements.push(h('span', {
| class: {
| 'jv-item': true,
| 'jv-array': true,
| },
| innerText: ']'
| }))
|
| return h('span', elements)
| }
| }
| </script>
|
|
