Skip to content

Commit 59d06eb

Browse files
Dan0xEDan0xE
committed
refactor: renamed to darkHighlightMode
1 parent 8cd319b commit 59d06eb

File tree

8 files changed

+63
-31
lines changed

8 files changed

+63
-31
lines changed

‎example/App.tsx

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineComponent, reactive, provide, onMounted } from 'vue';
1+
import { defineComponent, reactive, provide, onMounted, watch } from 'vue';
22
import Basic from './Basic.vue';
33
import VirtualList from './VirtualList.vue';
44
import SelectControl from './SelectControl.vue';
@@ -79,10 +79,13 @@ export default defineComponent({
7979
const state = reactive({
8080
activeKey: list[0].key,
8181
opened: [list[0].key],
82+
});
83+
84+
const globalDarkModeState = reactive({
8285
isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
8386
});
8487

85-
provide('darkModeState', state);
88+
provide('darkModeState', globalDarkModeState);
8689

8790
const onActiveChange = (key: string) => {
8891
state.activeKey = key;
@@ -91,23 +94,31 @@ export default defineComponent({
9194
}
9295
};
9396

97+
const toggleDarkMode = () => {
98+
globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode;
99+
};
100+
94101
onMounted(() => {
95-
document.body.classList.toggle('dark-mode', state.isDarkMode);
102+
document.body.classList.toggle('dark-mode', globalDarkModeState.isDarkMode);
96103
});
97104

105+
watch(
106+
() => globalDarkModeState.isDarkMode,
107+
newVal => {
108+
document.body.classList.toggle('dark-mode', newVal);
109+
},
110+
{ immediate: true },
111+
);
112+
98113
return {
99114
state,
100115
onActiveChange,
116+
toggleDarkMode,
101117
};
102118
},
103119

104120
render() {
105-
const { state, onActiveChange } = this;
106-
107-
const toggleDarkMode = () => {
108-
state.isDarkMode = !state.isDarkMode;
109-
document.body.classList.toggle('dark-mode', state.isDarkMode);
110-
};
121+
const { state, onActiveChange, toggleDarkMode } = this;
111122

112123
return (
113124
<div class={`example ${state.isDarkMode ? 'dark-mode' : ''}`}>

‎example/Basic.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
5-
<textarea v-model="state.val" />
5+
<textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
66

77
<h3>Options:</h3>
88
<div class="options">
@@ -47,8 +47,8 @@
4747
<input v-model="state.setPathCollapsible" type="checkbox" />
4848
</div>
4949
<div>
50-
<label>darkMode</label>
51-
<input v-model="state.darkMode" type="checkbox" />
50+
<label>darkHighlightMode</label>
51+
<input v-model="localDarkMode" type="checkbox" />
5252
</div>
5353
</div>
5454

@@ -67,7 +67,7 @@
6767
<div class="block">
6868
<h3>vue-json-pretty:</h3>
6969
<vue-json-pretty
70-
:darkMode="state.darkMode"
70+
:darkHighlightMode="localDarkMode"
7171
:data="state.data"
7272
:deep="state.deep"
7373
:path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"
@@ -100,6 +100,7 @@
100100

101101
<script>
102102
import { defineComponent, reactive, watch } from 'vue';
103+
import { useDarkMode } from './useDarkMode';
103104
import VueJsonPretty from 'src';
104105
105106
const defaultData = {
@@ -152,6 +153,8 @@ export default defineComponent({
152153
showKeyValueSpace: true,
153154
});
154155
156+
const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
157+
155158
const pathCollapsible = node => {
156159
return node.key === 'members';
157160
};
@@ -170,6 +173,8 @@ export default defineComponent({
170173
return {
171174
state,
172175
pathCollapsible,
176+
localDarkMode,
177+
toggleLocalDarkMode,
173178
};
174179
},
175180
});

‎example/Editable.vue

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
5-
<textarea v-model="state.val" />
5+
<textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
66

77
<h3>Options:</h3>
88
<div class="options">
@@ -35,15 +35,15 @@
3535
</div>
3636
</div>
3737
<div>
38-
<label>darkMode</label>
39-
<input v-model="state.darkMode" type="checkbox" />
38+
<label>darkHighlightMode</label>
39+
<input v-model="localDarkMode" type="checkbox" />
4040
</div>
4141
</div>
4242
<div class="block">
4343
<h3>vue-json-pretty:</h3>
4444
<vue-json-pretty
4545
v-model:data="state.data"
46-
:darkMode="state.darkMode"
46+
:darkHighlightMode="localDarkMode"
4747
:deep="state.deep"
4848
:show-double-quotes="true"
4949
:show-line="state.showLine"
@@ -58,6 +58,7 @@
5858
<script>
5959
import { defineComponent, reactive, watch } from 'vue';
6060
import VueJsonPretty from 'src';
61+
import { useDarkMode } from './useDarkMode';
6162
6263
const defaultData = {
6364
status: 200,
@@ -103,6 +104,8 @@ export default defineComponent({
103104
deep: 3,
104105
});
105106
107+
const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
108+
106109
watch(
107110
() => state.val,
108111
newVal => {
@@ -127,7 +130,10 @@ export default defineComponent({
127130
128131
return {
129132
state,
133+
localDarkMode,
134+
toggleLocalDarkMode,
130135
};
131136
},
132137
});
133138
</script>
139+
./useDarkMode

‎example/SelectControl.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
5-
<textarea v-model="state.val" />
5+
<textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
66

77
<h3>Options:</h3>
88
<div class="options">
@@ -58,8 +58,8 @@
5858
</select>
5959
</div>
6060
<div>
61-
<label>darkMode</label>
62-
<input v-model="state.darkMode" type="checkbox" />
61+
<label>darkHighlightMode</label>
62+
<input v-model="localDarkMode" type="checkbox" />
6363
</div>
6464
</div>
6565
<h3>v-model:selectedValue:</h3>
@@ -72,7 +72,7 @@
7272
<vue-json-pretty
7373
v-if="state.renderOK"
7474
v-model:selectedValue="state.selectedValue"
75-
:darkMode="state.darkMode"
75+
:darkHighlightMode="localDarkMode"
7676
:data="state.data"
7777
:root-path="state.rootPath"
7878
:deep="state.deep"
@@ -99,6 +99,7 @@
9999
<script>
100100
import { defineComponent, reactive, watch, nextTick } from 'vue';
101101
import VueJsonPretty from 'src';
102+
import { useDarkMode } from './useDarkMode';
102103
103104
const defaultData = {
104105
status: 200,
@@ -153,6 +154,8 @@ export default defineComponent({
153154
showIcon: false,
154155
});
155156
157+
const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
158+
156159
const handleNodeClick = node => {
157160
state.node = node;
158161
};
@@ -191,6 +194,8 @@ export default defineComponent({
191194
state,
192195
handleNodeClick,
193196
handleAll,
197+
localDarkMode,
198+
toggleLocalDarkMode,
194199
};
195200
},
196201
});

‎example/VirtualList.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
5-
<textarea v-model="state.val" />
5+
<textarea :class="{ 'dark-textarea': localDarkMode }" v-model="state.val"></textarea>
66

77
<h3>Options:</h3>
88
<div class="options">
@@ -35,14 +35,14 @@
3535
</div>
3636
</div>
3737
<div>
38-
<label>darkMode</label>
39-
<input v-model="state.darkMode" type="checkbox" />
38+
<label>darkHighlightMode</label>
39+
<input v-model="localDarkMode" type="checkbox" />
4040
</div>
4141
</div>
4242
<div class="block">
4343
<h3>vue-json-pretty(10000+ items):</h3>
4444
<vue-json-pretty
45-
:darkMode="state.darkMode"
45+
:darkHighlightMode="localDarkMode"
4646
:collapsed-node-length="state.collapsedNodeLength"
4747
:virtual="true"
4848
:item-height="+state.itemHeight"
@@ -58,6 +58,7 @@
5858
<script>
5959
import { defineComponent, reactive, watch } from 'vue';
6060
import VueJsonPretty from 'src';
61+
import { useDarkMode } from './useDarkMode';
6162
6263
const defaultData = {
6364
status: 200,
@@ -91,6 +92,8 @@ export default defineComponent({
9192
itemHeight: 20,
9293
});
9394
95+
const { localDarkMode, toggleLocalDarkMode } = useDarkMode();
96+
9497
watch(
9598
() => state.val,
9699
newVal => {
@@ -104,6 +107,8 @@ export default defineComponent({
104107
105108
return {
106109
state,
110+
localDarkMode,
111+
toggleLocalDarkMode,
107112
};
108113
},
109114
});

‎src/components/Tree/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default defineComponent({
7070
onSelectedChange: {
7171
type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => void>,
7272
},
73-
darkMode: {
73+
darkHighlightMode: {
7474
type: Boolean,
7575
default: false,
7676
},
@@ -285,7 +285,7 @@ export default defineComponent({
285285
key={item.id}
286286
node={item}
287287
collapsed={!!state.hiddenPaths[item.path]}
288-
darkMode={props.darkMode}
288+
darkHighlightMode={props.darkHighlightMode}
289289
showDoubleQuotes={props.showDoubleQuotes}
290290
showLength={props.showLength}
291291
checked={selectedPaths.value.includes(item.path)}
@@ -321,7 +321,7 @@ export default defineComponent({
321321
class={{
322322
'vjs-tree': true,
323323
'is-virtual': props.virtual,
324-
'dark-mode': props.darkMode,
324+
'dark-highlight-mode': props.darkHighlightMode,
325325
}}
326326
onScroll={props.virtual ? handleTreeScroll : undefined}
327327
style={

‎src/components/TreeNode/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const treeNodePropsPass = {
6464
type: Boolean,
6565
default: false,
6666
},
67-
darkMode: {
67+
darkHighlightMode: {
6868
type: Boolean,
6969
default: false,
7070
},
@@ -217,7 +217,7 @@ export default defineComponent({
217217
'has-selector': props.showSelectController,
218218
'has-carets': props.showIcon,
219219
'is-highlight': props.highlightSelectedNode && props.checked,
220-
'dark-mode': props.darkMode,
220+
'dark-highlight-mode': props.darkHighlightMode,
221221
}}
222222
onClick={handleNodeClick}
223223
style={props.style}

‎src/components/TreeNode/styles.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737
}
3838

39-
&.dark-mode {
39+
&.dark-highlight-mode {
4040
&.is-highlight,
4141
&:hover {
4242
background-color: @highlight-bg-color-dark;

0 commit comments

Comments
 (0)