Skip to content

Commit 252f50b

Browse files
tylerkrupickatylerkrupicka
authored
Merge pull request tylerkrupicka#15 from tylerkrupicka/dark-mode
Dark Mode Support
2 parents f3b860a + 0788958 commit 252f50b

File tree

12 files changed

+205
-155
lines changed

12 files changed

+205
-155
lines changed

‎README.md

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# Vue JSON Component
22

3-
43
[![npm version](https://badge.fury.io/js/vue-json-component.svg)](https://badge.fury.io/js/vue-json-component) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) ![npm bundle size](https://img.shields.io/bundlephobia/min/vue-json-component.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
54

65
[Demo](http://tylerkrupicka.com/vue-json-component/)
@@ -13,8 +12,8 @@ A collapsable tree view for JSON. This package has some similarites with [vue-js
1312

1413
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.
1514

16-
* [vue-json-tree-view (84KB)](https://bundlephobia.com/result?p=vue-json-tree-view@2.1.4)
17-
* [vue-json-component (9KB)](https://bundlephobia.com/result?p=vue-json-component@0.3.0)
15+
- [vue-json-tree-view (84KB)](https://bundlephobia.com/result?p=vue-json-tree-view@2.1.4)
16+
- [vue-json-component (9KB)](https://bundlephobia.com/result?p=vue-json-component@0.3.0)
1817

1918
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.
2019

@@ -32,17 +31,17 @@ yarn add vue-json-component
3231
### Import Locally
3332

3433
```js
35-
import { JSONView } from "vue-json-component";
34+
import { JSONView } from 'vue-json-component';
3635
export default Vue.extend({
37-
components: { "json-view": JSONView }
36+
components: { 'json-view': JSONView }
3837
});
3938
```
4039

4140
### Import Globally
4241

4342
```js
44-
import JSONView from "vue-json-component";
45-
Vue.use(JSONView)
43+
import JSONView from 'vue-json-component';
44+
Vue.use(JSONView);
4645
```
4746

4847
### Use
@@ -56,39 +55,55 @@ Vue.use(JSONView)
5655

5756
### Customize
5857

59-
The font size and font family are inherited from the page.
58+
The font size and font family are inherited from the page. The component now supports dark mode, and has switched to a CSS Variables based implementation.
6059

6160
#### Props
6261

63-
* **data** (JSON): The valid JSON object you want rendered as a tree.
64-
* **rootKey** (String): The name of the top level root key; defaults to root.
65-
* **maxDepth** (Number): Depth of the tree that is open at first render; defaults to 1.
66-
* **styles** (Object): Override the color styles. Defaults shown below.
67-
68-
```js
69-
const defaultStyles = {
70-
key: "#002b36",
71-
valueKey: "#073642",
72-
string: "#268bd2",
73-
number: "#2aa198",
74-
boolean: "#cb4b16",
75-
null: "#6c71c4",
76-
arrowSize: "6px"
77-
};
62+
- **data** (JSON): The valid JSON object you want rendered as a tree.
63+
- **rootKey** (String): The name of the top level root key; defaults to root.
64+
- **maxDepth** (Number): Depth of the tree that is open at first render; defaults to 1.
65+
- **colorScheme (New)** (String): Setting to 'dark' enables dark mode.
66+
67+
#### Styles
68+
69+
⚠️ This API has changed to CSS Variables. All of these can be customized for light _and_ dark mode as is documented below.
70+
71+
```css
72+
--vjc-key-color: #0977e6;
73+
--vjc-valueKey-color: #073642;
74+
--vjc-string-color: #268bd2;
75+
--vjc-number-color: #2aa198;
76+
--vjc-boolean-color: #cb4b16;
77+
--vjc-null-color: #6c71c4;
78+
--vjc-arrow-size: 6px;
79+
--vjc-arrow-color: #444;
80+
--vjc-hover-color: rgba(0, 0, 0, 0.15);
7881
```
7982

8083
### Example
84+
8185
```js
8286
<template>
8387
<json-view
8488
:data="data"
8589
rootKey="view"
8690
:maxDepth="1"
87-
:styles="{ key: '#0977e6' }"
91+
class="customize"
8892
/>
8993
</template>
94+
95+
<style lang="scss" scoped>
96+
.customize {
97+
--vjc-valueKey-color: green;
98+
}
99+
.customize.dark {
100+
--vjc-valueKey-color: red;
101+
}
102+
</style>
90103
```
91104

105+
Note: your styles will need to be scoped to override the scoped CSS Variables in the component.
106+
92107
## Advanced Features
93108

94109
### Selected Item Events
@@ -104,9 +119,9 @@ You can allow users to click elements, and receive an event when this occurs. Th
104119

105120
**Event**
106121

107-
* key: _string_
108-
* value: _string_
109-
* path: _string_
122+
- key: _string_
123+
- value: _string_
124+
- path: _string_
110125

111126
## Development
112127

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
presets: [["@vue/app", { useBuiltIns: "entry", corejs: { version: 2 } }]]
2+
presets: [['@vue/app', { useBuiltIns: 'entry', corejs: { version: 2 } }]]
33
};

‎bili.config.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
2-
input: "src/index.ts",
2+
input: 'src/index.ts',
33
output: {
4-
format: ["cjs", "umd", "esm"],
5-
moduleName: "vue-json-component",
4+
format: ['cjs', 'umd', 'esm'],
5+
moduleName: 'vue-json-component',
66
sourceMap: true,
77
sourceMapExcludeSources: true
88
},
@@ -14,11 +14,11 @@ module.exports = {
1414
babel: { runtimeHelpers: true }
1515
},
1616
extendConfig(config, { format }) {
17-
if (format === "umd") {
17+
if (format === 'umd') {
1818
config.output.minify = true;
1919
}
20-
if (format === "esm") {
21-
config.output.fileName = "[name].module.js";
20+
if (format === 'esm') {
21+
config.output.fileName = '[name].module.js';
2222
}
2323
return config;
2424
}

‎harness/App.vue

Lines changed: 59 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,111 @@
11
<template>
22
<div id="app">
3-
<json-view
4-
:data="data"
5-
rootKey="view"
6-
:maxDepth="1"
7-
:styles="{ key: '#0977e6' }"
8-
v-on:selected="itemSelected"
9-
></json-view>
10-
<json-view rootKey="result" data="some string" />
11-
<json-view rootKey="result" :data="2" />
3+
<div :class="{ dark: dark }">
4+
<json-view
5+
:data="data"
6+
rootKey="view"
7+
:maxDepth="1"
8+
:styles="{ key: '#0977e6' }"
9+
:colorScheme="colorScheme"
10+
v-on:selected="itemSelected"
11+
></json-view>
12+
<json-view
13+
rootKey="string"
14+
data="Not an object"
15+
:colorScheme="colorScheme"
16+
/>
17+
<json-view
18+
rootKey="customization"
19+
data="Using CSS Variables"
20+
class="customize"
21+
:colorScheme="colorScheme"
22+
/>
23+
</div>
1224

25+
<button id="darkButton" v-on:click="toggleDark">Toggle Dark Mode</button>
1326
<h5>Events</h5>
1427
<div v-for="(event, index) in events" :key="index">{{ event }}</div>
1528
</div>
1629
</template>
1730

1831
<script lang="ts">
19-
import Vue, { VueConstructor } from "vue";
20-
import JSONView from "../src/JSONView.vue";
32+
import Vue, { VueConstructor } from 'vue';
33+
import JSONView from '../src/JSONView.vue';
2134
2235
export default Vue.extend({
2336
data: function() {
2437
return {
25-
events: []
38+
events: [],
39+
dark: false
2640
};
2741
},
28-
components: { "json-view": JSONView },
42+
components: { 'json-view': JSONView },
2943
methods: {
3044
itemSelected: function(data: any): void {
3145
// @ts-ignore
3246
this.events.push(`Selected: ${data.path} with value ${data.value}`);
47+
},
48+
toggleDark: function(): void {
49+
this.dark = !this.dark;
3350
}
3451
},
3552
computed: {
3653
data: function() {
3754
const test = {
38-
first: "level",
55+
first: 'level',
3956
works: true,
4057
number: 100,
4158
missing: null,
4259
list: [
43-
"fun",
60+
'fun',
4461
{
4562
test: {
4663
passed: true
4764
}
4865
}
4966
],
5067
object: {
51-
working: "properly"
68+
working: 'properly'
5269
}
5370
};
5471
return test;
72+
},
73+
colorScheme: function(): string {
74+
return this.dark ? 'dark' : 'light';
5575
}
5676
}
5777
});
5878
</script>
5979

6080
<style lang="scss">
6181
#app {
62-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
63-
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
82+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
83+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6484
font-size: 20px;
6585
padding: 20px;
6686
overflow-x: auto;
6787
display: flex;
6888
flex-direction: column;
6989
}
90+
91+
#darkButton {
92+
margin-top: 20px;
93+
width: 150px;
94+
height: 30px;
95+
cursor: pointer;
96+
}
97+
98+
.dark {
99+
background-color: #121212;
100+
border-radius: 4px;
101+
}
102+
</style>
103+
104+
<style lang="scss" scoped>
105+
.customize {
106+
--vjc-valueKey-color: green;
107+
}
108+
.customize.dark {
109+
--vjc-valueKey-color: red;
110+
}
70111
</style>

‎harness/main.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Vue from "vue";
2-
import App from "./App.vue";
1+
import Vue from 'vue';
2+
import App from './App.vue';
33

44
Vue.config.productionTip = false;
55

66
new Vue({
77
render: h => h(App)
8-
}).$mount("#app");
8+
}).$mount('#app');

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@
9090
"autoprefixer": {}
9191
}
9292
},
93+
"prettier": {
94+
"singleQuote": true
95+
},
9396
"browserslist": [
9497
"> 1%",
9598
"last 2 versions",

0 commit comments

Comments
 (0)