Skip to content

Commit 80e705c

Browse files
Dan0xEDan0xE
committed
refactor: use theme prop instead of darkHighlightMode
1 parent 4706ef9 commit 80e705c

File tree

9 files changed

+63
-50
lines changed

9 files changed

+63
-50
lines changed

‎README.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -106,32 +106,32 @@ plugins: [
106106

107107
## Props
108108

109-
| Property | Description | Type | Default |
110-
| ------------------------ | ------------------------------------------------------------------------------------ | --------------------------------- | ------- |
111-
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112-
| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
113-
| deep | Paths greater than this depth will be collapsed | number | - |
114-
| showLength | Show the length when collapsed | boolean | false |
115-
| showLine | Show the line | boolean | true |
116-
| showLineNumber | Show the line number | boolean | false |
117-
| showIcon | Show the icon | boolean | false |
118-
| showDoubleQuotes | Show doublequotes on key | boolean | true |
119-
| virtual | Use virtual scroll | boolean | false |
120-
| height | The height of list when using virtual | number | 400 |
121-
| itemHeight | The height of node when using virtual | number | 20 |
122-
| selectedValue(v-model) | Selected data path | string, array | - |
123-
| rootPath | Root data path | string | `root` |
124-
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
125-
| selectableType | Support path select, default none | `multiple` \| `single` | - |
126-
| showSelectController | Show the select controller | boolean | false |
127-
| selectOnClickNode | Trigger select when click node | boolean | true |
128-
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
129-
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
130-
| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
131-
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
132-
| editable | Support editable | boolean | false |
133-
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
134-
| darkHighlightMode | Enables a dark theme for hover highlights, improving visibility on dark backgrounds. | boolean | false |
109+
| Property | Description | Type | Default |
110+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |
111+
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112+
| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
113+
| deep | Paths greater than this depth will be collapsed | number | - |
114+
| showLength | Show the length when collapsed | boolean | false |
115+
| showLine | Show the line | boolean | true |
116+
| showLineNumber | Show the line number | boolean | false |
117+
| showIcon | Show the icon | boolean | false |
118+
| showDoubleQuotes | Show doublequotes on key | boolean | true |
119+
| virtual | Use virtual scroll | boolean | false |
120+
| height | The height of list when using virtual | number | 400 |
121+
| itemHeight | The height of node when using virtual | number | 20 |
122+
| selectedValue(v-model) | Selected data path | string, array | - |
123+
| rootPath | Root data path | string | `root` |
124+
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
125+
| selectableType | Support path select, default none | `multiple` \| `single` | - |
126+
| showSelectController | Show the select controller | boolean | false |
127+
| selectOnClickNode | Trigger select when click node | boolean | true |
128+
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
129+
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
130+
| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
131+
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
132+
| editable | Support editable | boolean | false |
133+
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
134+
| theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'` | `light` |
135135

136136
## Events
137137

‎example/Basic.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,11 @@
4747
<input v-model="state.setPathCollapsible" type="checkbox" />
4848
</div>
4949
<div>
50-
<label>darkHighlightMode</label>
51-
<input v-model="localDarkMode" type="checkbox" />
50+
<label>theme</label>
51+
<select v-model="localDarkMode">
52+
<option value="light">light</option>
53+
<option value="dark">dark</option>
54+
</select>
5255
</div>
5356
</div>
5457

@@ -67,7 +70,7 @@
6770
<div class="block">
6871
<h3>vue-json-pretty:</h3>
6972
<vue-json-pretty
70-
:darkHighlightMode="localDarkMode"
73+
:theme="localDarkMode"
7174
:data="state.data"
7275
:deep="state.deep"
7376
:path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"

‎example/Editable.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,18 @@
3535
</div>
3636
</div>
3737
<div>
38-
<label>darkHighlightMode</label>
39-
<input v-model="localDarkMode" type="checkbox" />
38+
<label>theme</label>
39+
<select v-model="localDarkMode">
40+
<option value="light">light</option>
41+
<option value="dark">dark</option>
42+
</select>
4043
</div>
4144
</div>
4245
<div class="block">
4346
<h3>vue-json-pretty:</h3>
4447
<vue-json-pretty
4548
v-model:data="state.data"
46-
:darkHighlightMode="localDarkMode"
49+
:theme="localDarkMode"
4750
:deep="state.deep"
4851
:show-double-quotes="true"
4952
:show-line="state.showLine"

‎example/SelectControl.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,11 @@
5858
</select>
5959
</div>
6060
<div>
61-
<label>darkHighlightMode</label>
62-
<input v-model="localDarkMode" type="checkbox" />
61+
<label>theme</label>
62+
<select v-model="localDarkMode">
63+
<option value="light">light</option>
64+
<option value="dark">dark</option>
65+
</select>
6366
</div>
6467
</div>
6568
<h3>v-model:selectedValue:</h3>
@@ -72,7 +75,7 @@
7275
<vue-json-pretty
7376
v-if="state.renderOK"
7477
v-model:selectedValue="state.selectedValue"
75-
:darkHighlightMode="localDarkMode"
78+
:theme="localDarkMode"
7679
:data="state.data"
7780
:root-path="state.rootPath"
7881
:deep="state.deep"

‎example/VirtualList.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,17 @@
3535
</div>
3636
</div>
3737
<div>
38-
<label>darkHighlightMode</label>
39-
<input v-model="localDarkMode" type="checkbox" />
38+
<label>theme</label>
39+
<select v-model="localDarkMode">
40+
<option value="light">light</option>
41+
<option value="dark">dark</option>
42+
</select>
4043
</div>
4144
</div>
4245
<div class="block">
4346
<h3>vue-json-pretty(10000+ items):</h3>
4447
<vue-json-pretty
45-
:darkHighlightMode="localDarkMode"
48+
:theme="localDarkMode"
4649
:collapsed-node-length="state.collapsedNodeLength"
4750
:virtual="true"
4851
:item-height="+state.itemHeight"

‎example/useDarkMode.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,19 @@ import { inject, ref, watch } from 'vue';
33
export function useDarkMode() {
44
const darkModeState = inject('darkModeState');
55
const globalDarkModeState = ref(darkModeState.isDarkMode);
6-
const localDarkMode = ref(darkModeState.isDarkMode);
6+
const localDarkMode = ref(darkModeState.isDarkMode ? 'dark' : 'light');
77

88
watch(
99
() => darkModeState.isDarkMode,
1010
newVal => {
11-
localDarkMode.value = newVal;
11+
localDarkMode.value = newVal ? 'dark' : 'light';
1212
globalDarkModeState.value = newVal;
1313
},
1414
);
1515

1616
const toggleLocalDarkMode = () => {
1717
darkModeState.isDarkMode = !darkModeState.isDarkMode;
18+
localDarkMode.value = darkModeState.isDarkMode ? 'dark' : 'light';
1819
};
1920

2021
return { localDarkMode, toggleLocalDarkMode, globalDarkModeState };

‎src/components/Tree/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ export default defineComponent({
7070
onSelectedChange: {
7171
type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => void>,
7272
},
73-
darkHighlightMode: {
74-
type: Boolean,
75-
default: false,
73+
theme: {
74+
type: String as PropType<'light' | 'dark'>,
75+
default: 'light',
7676
},
7777
},
7878

@@ -285,7 +285,7 @@ export default defineComponent({
285285
key={item.id}
286286
node={item}
287287
collapsed={!!state.hiddenPaths[item.path]}
288-
darkHighlightMode={props.darkHighlightMode}
288+
theme={props.theme}
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-highlight-mode': props.darkHighlightMode,
324+
dark: props.theme === 'dark',
325325
}}
326326
onScroll={props.virtual ? handleTreeScroll : undefined}
327327
style={

‎src/components/TreeNode/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ export const treeNodePropsPass = {
6464
type: Boolean,
6565
default: false,
6666
},
67-
darkHighlightMode: {
68-
type: Boolean,
69-
default: false,
67+
theme: {
68+
type: String as PropType<'light' | 'dark'>,
69+
default: 'light',
7070
},
7171
showKeyValueSpace: {
7272
type: Boolean,
@@ -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-highlight-mode': props.darkHighlightMode,
220+
dark: props.theme === 'dark',
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-highlight-mode {
39+
&.dark {
4040
&.is-highlight,
4141
&:hover {
4242
background-color: @highlight-bg-color-dark;

0 commit comments

Comments
 (0)