You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A collapsable tree view for JSON. This package has some similarites with [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) so I'll address the differences below. I'm not contributing this back to that package because it would require breaking API changes, and the code is entirely different. **Contributions welcome!**
14
+
A collapsable tree view for JSON. This package has some similarites with [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) so I'll
15
+
address the differences below. I'm not contributing this back to that package because it would require breaking API changes, and the code is entirely
This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG builds with no dependencies. [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) bundles in lots of dependencies -- including lodash. I also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.
22
+
This package has a few major improvements over predecessors: builds, styles, and customization. For builds, this package ships CommonJS, Module, and UNPKG
23
+
builds with no dependencies. [vue-json-tree-view](https://github.com/michaelfitzhavey/vue-json-tree-view) bundles in lots of dependencies -- including lodash. I
24
+
also export global Vue imports, local Vue imports, and TypeScript declarations. The code itself is about as small as it can be while being easy to follow.
The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all inherited from the page. This makes the view much easier to integrate anywhere you need it.
29
+
The styles in this package are all scoped, with key colors still being customizable. There are no extra margins or overflow rules and text properties are all
30
+
inherited from the page. This makes the view much easier to integrate anywhere you need it.
25
31
26
-
The default color theme is based on solarized, and font weights are modified to increase readability. The component uses semantic HTML elements and tries to be fully keyboard accessible.
32
+
The default color theme is based on solarized, and font weights are modified to increase readability. The component uses semantic HTML elements and tries to be
33
+
fully keyboard accessible.
27
34
28
35
## Usage
29
36
@@ -37,24 +44,27 @@ yarn add vue3-json-component
37
44
### Import Locally
38
45
39
46
```js
40
-
import { JSONView } from'vue3-json-component';
41
-
exportdefaultVue.extend({
42
-
components: { 'json-view': JSONView }
43
-
});
47
+
import { defineComponent } from'vue';
48
+
import { JsonView } from'vue3-json-component';
49
+
50
+
exportdefaultdefineComponent({
51
+
components: {JsonView}
52
+
})
44
53
```
45
54
46
55
### Import Globally
47
56
48
57
```js
49
-
importJSONViewfrom'vue3-json-component';
50
-
Vue.use(JSONView);
58
+
importJsonViewfrom'vue3-json-component';
59
+
60
+
Vue.use(JsonView);
51
61
```
52
62
53
63
### Use
54
64
55
-
```js
65
+
```vue
56
66
<template>
57
-
<json-view :data="data"/>
67
+
<json-view :data="data" />
58
68
</template>
59
69
60
70
```
@@ -88,22 +98,22 @@ The font size and font family are inherited from the page. The component now sup
88
98
89
99
### Example
90
100
91
-
```js
101
+
```vue
92
102
<template>
93
-
<json-view
94
-
:data="data"
95
-
rootKey="view"
96
-
:maxDepth="1"
97
-
class="customize"
98
-
/>
103
+
<json-view
104
+
:data="data"
105
+
rootKey="view"
106
+
:maxDepth="1"
107
+
class="customize"
108
+
/>
99
109
</template>
100
110
101
111
<style lang="scss" scoped>
102
-
.customize {
103
-
--vjc-valueKey-color: green;
112
+
.customize {
113
+
--vjc-valueKey-color: green;
104
114
}
105
-
.customize.dark {
106
-
--vjc-valueKey-color: red;
115
+
.customize.dark {
116
+
--vjc-valueKey-color: red;
107
117
}
108
118
</style>
109
119
```
@@ -114,12 +124,13 @@ Note: your styles will need to be scoped to override the scoped CSS Variables in
114
124
115
125
### Selected Item Events
116
126
117
-
You can allow users to click elements, and receive an event when this occurs. The `selected` event will pass you the key, value, and path of the selected value. If you do not listen for the event, the styles will not indicate that values are clickable.
127
+
You can allow users to click elements, and receive an event when this occurs. The `selected` event will pass you the key, value, and path of the selected value.
128
+
If you do not listen for the event, the styles will not indicate that values are clickable.
118
129
119
-
```js
130
+
```vue
120
131
<json-view
121
-
:data="data"
122
-
v-on:selected="itemSelected"
132
+
:data="data"
133
+
@update:selected="itemSelected"
123
134
/>
124
135
```
125
136
@@ -149,14 +160,9 @@ yarn serve
149
160
yarn build
150
161
```
151
162
152
-
### Lints and fixes files
153
-
154
-
```bash
155
-
yarn lint
156
-
```
157
-
158
163
## Contributing
159
164
160
-
Contributions are welcome via pull request. If you want to discuss your feature before committing development time, feel free to open an issue and we can refine the idea.
165
+
Contributions are welcome via pull request. If you want to discuss your feature before committing development time, feel free to open an issue and we can refine
0 commit comments