From 8cd319b3cd19052fa9d57f3ad88e222e753dcaae Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 02:29:01 +0100 Subject: [PATCH 1/8] feat: add basic darkmode support --- example/App.tsx | 79 +++++++++++++++++++++++++---- example/Basic.vue | 5 ++ example/Editable.vue | 5 ++ example/SelectControl.vue | 5 ++ example/VirtualList.vue | 5 ++ example/styles.less | 61 +++++++++++++++------- src/components/Tree/index.tsx | 6 +++ src/components/TreeNode/index.tsx | 5 ++ src/components/TreeNode/styles.less | 7 +++ src/themes.less | 3 +- 10 files changed, 151 insertions(+), 30 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 730fd7f..0afb672 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,4 +1,4 @@ -import { defineComponent, reactive } from 'vue'; +import { defineComponent, reactive, provide, onMounted } from 'vue'; import Basic from './Basic.vue'; import VirtualList from './VirtualList.vue'; import SelectControl from './SelectControl.vue'; @@ -34,13 +34,56 @@ const list = [ // }, ]; +const SunIcon = () => ( + + + + + + + + + + + +); + +const MoonIcon = () => ( + + + +); + export default defineComponent({ setup() { const state = reactive({ activeKey: list[0].key, opened: [list[0].key], + isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, }); + provide('darkModeState', state); + const onActiveChange = (key: string) => { state.activeKey = key; if (!state.opened.includes(key)) { @@ -48,6 +91,10 @@ export default defineComponent({ } }; + onMounted(() => { + document.body.classList.toggle('dark-mode', state.isDarkMode); + }); + return { state, onActiveChange, @@ -57,8 +104,13 @@ export default defineComponent({ render() { const { state, onActiveChange } = this; + const toggleDarkMode = () => { + state.isDarkMode = !state.isDarkMode; + document.body.classList.toggle('dark-mode', state.isDarkMode); + }; + return ( -
+

Vue Json Pretty

Welcome to the demo space of Vue Json Pretty, here we provide the following different @@ -67,15 +119,20 @@ export default defineComponent({

- {list.map(({ title, key }) => ( -
onActiveChange(key)} - > - {title} -
- ))} +
+ {list.map(({ title, key }) => ( +
onActiveChange(key)} + > + {title} +
+ ))} +
+
+ {state.isDarkMode ? : } +
diff --git a/example/Basic.vue b/example/Basic.vue index ae8d500..38650ca 100644 --- a/example/Basic.vue +++ b/example/Basic.vue @@ -46,6 +46,10 @@
+
+ + +

Slots:

@@ -63,6 +67,7 @@

vue-json-pretty:

+
+ + +

vue-json-pretty:

4
+
+ + +

v-model:selectedValue:

{{ state.selectedValue }}
@@ -68,6 +72,7 @@ +
+ + +

vue-json-pretty(10000+ items):

void>, }, + darkMode: { + type: Boolean, + default: false, + }, }, slots: ['renderNodeKey', 'renderNodeValue'], @@ -281,6 +285,7 @@ export default defineComponent({ key={item.id} node={item} collapsed={!!state.hiddenPaths[item.path]} + darkMode={props.darkMode} showDoubleQuotes={props.showDoubleQuotes} showLength={props.showLength} checked={selectedPaths.value.includes(item.path)} @@ -316,6 +321,7 @@ export default defineComponent({ class={{ 'vjs-tree': true, 'is-virtual': props.virtual, + 'dark-mode': props.darkMode, }} onScroll={props.virtual ? handleTreeScroll : undefined} style={ diff --git a/src/components/TreeNode/index.tsx b/src/components/TreeNode/index.tsx index fa5b0bb..c4862b7 100644 --- a/src/components/TreeNode/index.tsx +++ b/src/components/TreeNode/index.tsx @@ -64,6 +64,10 @@ export const treeNodePropsPass = { type: Boolean, default: false, }, + darkMode: { + type: Boolean, + default: false, + }, showKeyValueSpace: { type: Boolean, default: true, @@ -213,6 +217,7 @@ export default defineComponent({ 'has-selector': props.showSelectController, 'has-carets': props.showIcon, 'is-highlight': props.highlightSelectedNode && props.checked, + 'dark-mode': props.darkMode, }} onClick={handleNodeClick} style={props.style} diff --git a/src/components/TreeNode/styles.less b/src/components/TreeNode/styles.less index 6748a73..04a7ee4 100644 --- a/src/components/TreeNode/styles.less +++ b/src/components/TreeNode/styles.less @@ -35,6 +35,13 @@ border-left: 1px dashed @border-color; } } + + &.dark-mode { + &.is-highlight, + &:hover { + background-color: @highlight-bg-color-dark; + } + } } .@{css-prefix}-node-index { diff --git a/src/themes.less b/src/themes.less index d857ba0..96d100d 100644 --- a/src/themes.less +++ b/src/themes.less @@ -6,7 +6,7 @@ @color-info: #1d8ce0; @color-error: #ff4949; @color-success: #13ce66; -@color-nil: #D55FDE; +@color-nil: #d55fde; /* field values color */ @color-string: @color-success; @@ -17,6 +17,7 @@ /* highlight */ @highlight-bg-color: #e6f7ff; +@highlight-bg-color-dark: #2e4558; /* comment */ @comment-color: #bfcbd9; From 59d06eb375cd5ebd998509a43bacc30abf2ce833 Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 03:42:24 +0100 Subject: [PATCH 2/8] refactor: renamed to darkHighlightMode --- example/App.tsx | 29 ++++++++++++++++++++--------- example/Basic.vue | 13 +++++++++---- example/Editable.vue | 14 ++++++++++---- example/SelectControl.vue | 13 +++++++++---- example/VirtualList.vue | 13 +++++++++---- src/components/Tree/index.tsx | 6 +++--- src/components/TreeNode/index.tsx | 4 ++-- src/components/TreeNode/styles.less | 2 +- 8 files changed, 63 insertions(+), 31 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 0afb672..a6b92ab 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,4 +1,4 @@ -import { defineComponent, reactive, provide, onMounted } from 'vue'; +import { defineComponent, reactive, provide, onMounted, watch } from 'vue'; import Basic from './Basic.vue'; import VirtualList from './VirtualList.vue'; import SelectControl from './SelectControl.vue'; @@ -79,10 +79,13 @@ export default defineComponent({ const state = reactive({ activeKey: list[0].key, opened: [list[0].key], + }); + + const globalDarkModeState = reactive({ isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, }); - provide('darkModeState', state); + provide('darkModeState', globalDarkModeState); const onActiveChange = (key: string) => { state.activeKey = key; @@ -91,23 +94,31 @@ export default defineComponent({ } }; + const toggleDarkMode = () => { + globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode; + }; + onMounted(() => { - document.body.classList.toggle('dark-mode', state.isDarkMode); + document.body.classList.toggle('dark-mode', globalDarkModeState.isDarkMode); }); + watch( + () => globalDarkModeState.isDarkMode, + newVal => { + document.body.classList.toggle('dark-mode', newVal); + }, + { immediate: true }, + ); + return { state, onActiveChange, + toggleDarkMode, }; }, render() { - const { state, onActiveChange } = this; - - const toggleDarkMode = () => { - state.isDarkMode = !state.isDarkMode; - document.body.classList.toggle('dark-mode', state.isDarkMode); - }; + const { state, onActiveChange, toggleDarkMode } = this; return (
diff --git a/example/Basic.vue b/example/Basic.vue index 38650ca..893f4c6 100644 --- a/example/Basic.vue +++ b/example/Basic.vue @@ -2,7 +2,7 @@

JSON:

-

Options:

@@ -47,8 +47,8 @@
- - + +
@@ -67,7 +67,7 @@

vue-json-pretty:

import { defineComponent, reactive, watch } from 'vue'; +import { useDarkMode } from './useDarkMode'; import VueJsonPretty from 'src'; const defaultData = { @@ -152,6 +153,8 @@ export default defineComponent({ showKeyValueSpace: true, }); + const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const pathCollapsible = node => { return node.key === 'members'; }; @@ -170,6 +173,8 @@ export default defineComponent({ return { state, pathCollapsible, + localDarkMode, + toggleLocalDarkMode, }; }, }); diff --git a/example/Editable.vue b/example/Editable.vue index 9d6e0e1..52ed5a0 100644 --- a/example/Editable.vue +++ b/example/Editable.vue @@ -2,7 +2,7 @@

JSON:

-

Options:

@@ -35,15 +35,15 @@
- - + +

vue-json-pretty:

import { defineComponent, reactive, watch } from 'vue'; import VueJsonPretty from 'src'; +import { useDarkMode } from './useDarkMode'; const defaultData = { status: 200, @@ -103,6 +104,8 @@ export default defineComponent({ deep: 3, }); + const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + watch( () => state.val, newVal => { @@ -127,7 +130,10 @@ export default defineComponent({ return { state, + localDarkMode, + toggleLocalDarkMode, }; }, }); +./useDarkMode diff --git a/example/SelectControl.vue b/example/SelectControl.vue index e71b67c..e099922 100644 --- a/example/SelectControl.vue +++ b/example/SelectControl.vue @@ -2,7 +2,7 @@

JSON:

-

Options:

@@ -58,8 +58,8 @@
- - + +

v-model:selectedValue:

@@ -72,7 +72,7 @@ import { defineComponent, reactive, watch, nextTick } from 'vue'; import VueJsonPretty from 'src'; +import { useDarkMode } from './useDarkMode'; const defaultData = { status: 200, @@ -153,6 +154,8 @@ export default defineComponent({ showIcon: false, }); + const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const handleNodeClick = node => { state.node = node; }; @@ -191,6 +194,8 @@ export default defineComponent({ state, handleNodeClick, handleAll, + localDarkMode, + toggleLocalDarkMode, }; }, }); diff --git a/example/VirtualList.vue b/example/VirtualList.vue index 79fdf2f..607fe4e 100644 --- a/example/VirtualList.vue +++ b/example/VirtualList.vue @@ -2,7 +2,7 @@

JSON:

-

Options:

@@ -35,14 +35,14 @@
- - + +

vue-json-pretty(10000+ items):

import { defineComponent, reactive, watch } from 'vue'; import VueJsonPretty from 'src'; +import { useDarkMode } from './useDarkMode'; const defaultData = { status: 200, @@ -91,6 +92,8 @@ export default defineComponent({ itemHeight: 20, }); + const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + watch( () => state.val, newVal => { @@ -104,6 +107,8 @@ export default defineComponent({ return { state, + localDarkMode, + toggleLocalDarkMode, }; }, }); diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx index 37a078d..dfd5e2e 100644 --- a/src/components/Tree/index.tsx +++ b/src/components/Tree/index.tsx @@ -70,7 +70,7 @@ export default defineComponent({ onSelectedChange: { type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => void>, }, - darkMode: { + darkHighlightMode: { type: Boolean, default: false, }, @@ -285,7 +285,7 @@ export default defineComponent({ key={item.id} node={item} collapsed={!!state.hiddenPaths[item.path]} - darkMode={props.darkMode} + darkHighlightMode={props.darkHighlightMode} showDoubleQuotes={props.showDoubleQuotes} showLength={props.showLength} checked={selectedPaths.value.includes(item.path)} @@ -321,7 +321,7 @@ export default defineComponent({ class={{ 'vjs-tree': true, 'is-virtual': props.virtual, - 'dark-mode': props.darkMode, + 'dark-highlight-mode': props.darkHighlightMode, }} onScroll={props.virtual ? handleTreeScroll : undefined} style={ diff --git a/src/components/TreeNode/index.tsx b/src/components/TreeNode/index.tsx index c4862b7..9a1bcd7 100644 --- a/src/components/TreeNode/index.tsx +++ b/src/components/TreeNode/index.tsx @@ -64,7 +64,7 @@ export const treeNodePropsPass = { type: Boolean, default: false, }, - darkMode: { + darkHighlightMode: { type: Boolean, default: false, }, @@ -217,7 +217,7 @@ export default defineComponent({ 'has-selector': props.showSelectController, 'has-carets': props.showIcon, 'is-highlight': props.highlightSelectedNode && props.checked, - 'dark-mode': props.darkMode, + 'dark-highlight-mode': props.darkHighlightMode, }} onClick={handleNodeClick} style={props.style} diff --git a/src/components/TreeNode/styles.less b/src/components/TreeNode/styles.less index 04a7ee4..62e06e2 100644 --- a/src/components/TreeNode/styles.less +++ b/src/components/TreeNode/styles.less @@ -36,7 +36,7 @@ } } - &.dark-mode { + &.dark-highlight-mode { &.is-highlight, &:hover { background-color: @highlight-bg-color-dark; From 0418610474e63003b1245bd8f2587f18a3c24b16 Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 03:43:57 +0100 Subject: [PATCH 3/8] feat: created darkmode composable --- example/styles.less | 6 ++++++ example/useDarkMode.ts | 19 +++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 example/useDarkMode.ts diff --git a/example/styles.less b/example/styles.less index 498eaa2..4db97c7 100644 --- a/example/styles.less +++ b/example/styles.less @@ -121,3 +121,9 @@ body { text-overflow: ellipsis; } } + +.dark-textarea { + background-color: #333; + color: #fff; + border-color: #444; +} diff --git a/example/useDarkMode.ts b/example/useDarkMode.ts new file mode 100644 index 0000000..7993383 --- /dev/null +++ b/example/useDarkMode.ts @@ -0,0 +1,19 @@ +import { inject, ref, watch } from 'vue'; + +export function useDarkMode() { + const darkModeState = inject('darkModeState'); + const localDarkMode = ref(darkModeState.isDarkMode); + + watch( + () => darkModeState.isDarkMode, + newVal => { + localDarkMode.value = newVal; + }, + ); + + const toggleLocalDarkMode = () => { + darkModeState.isDarkMode = !darkModeState.isDarkMode; + }; + + return { localDarkMode, toggleLocalDarkMode }; +} From 8cd0524e84ae252c2e387611cbbbeec13eaa5146 Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 03:54:47 +0100 Subject: [PATCH 4/8] fix: dont affect textbox by localDarkMode state --- example/Basic.vue | 5 +++-- example/Editable.vue | 5 +++-- example/SelectControl.vue | 5 +++-- example/VirtualList.vue | 5 +++-- example/useDarkMode.ts | 4 +++- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/example/Basic.vue b/example/Basic.vue index 893f4c6..4ecff08 100644 --- a/example/Basic.vue +++ b/example/Basic.vue @@ -2,7 +2,7 @@

JSON:

- +

Options:

@@ -153,7 +153,7 @@ export default defineComponent({ showKeyValueSpace: true, }); - const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode(); const pathCollapsible = node => { return node.key === 'members'; @@ -175,6 +175,7 @@ export default defineComponent({ pathCollapsible, localDarkMode, toggleLocalDarkMode, + globalDarkModeState, }; }, }); diff --git a/example/Editable.vue b/example/Editable.vue index 52ed5a0..9253ab5 100644 --- a/example/Editable.vue +++ b/example/Editable.vue @@ -2,7 +2,7 @@

JSON:

- +

Options:

@@ -104,7 +104,7 @@ export default defineComponent({ deep: 3, }); - const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode(); watch( () => state.val, @@ -132,6 +132,7 @@ export default defineComponent({ state, localDarkMode, toggleLocalDarkMode, + globalDarkModeState, }; }, }); diff --git a/example/SelectControl.vue b/example/SelectControl.vue index e099922..d1c9175 100644 --- a/example/SelectControl.vue +++ b/example/SelectControl.vue @@ -2,7 +2,7 @@

JSON:

- +

Options:

@@ -154,7 +154,7 @@ export default defineComponent({ showIcon: false, }); - const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode(); const handleNodeClick = node => { state.node = node; @@ -196,6 +196,7 @@ export default defineComponent({ handleAll, localDarkMode, toggleLocalDarkMode, + globalDarkModeState, }; }, }); diff --git a/example/VirtualList.vue b/example/VirtualList.vue index 607fe4e..b95d65c 100644 --- a/example/VirtualList.vue +++ b/example/VirtualList.vue @@ -2,7 +2,7 @@

JSON:

- +

Options:

@@ -92,7 +92,7 @@ export default defineComponent({ itemHeight: 20, }); - const { localDarkMode, toggleLocalDarkMode } = useDarkMode(); + const { localDarkMode, toggleLocalDarkMode, globalDarkModeState } = useDarkMode(); watch( () => state.val, @@ -109,6 +109,7 @@ export default defineComponent({ state, localDarkMode, toggleLocalDarkMode, + globalDarkModeState, }; }, }); diff --git a/example/useDarkMode.ts b/example/useDarkMode.ts index 7993383..02a973e 100644 --- a/example/useDarkMode.ts +++ b/example/useDarkMode.ts @@ -2,12 +2,14 @@ import { inject, ref, watch } from 'vue'; export function useDarkMode() { const darkModeState = inject('darkModeState'); + const globalDarkModeState = ref(darkModeState.isDarkMode); const localDarkMode = ref(darkModeState.isDarkMode); watch( () => darkModeState.isDarkMode, newVal => { localDarkMode.value = newVal; + globalDarkModeState.value = newVal; }, ); @@ -15,5 +17,5 @@ export function useDarkMode() { darkModeState.isDarkMode = !darkModeState.isDarkMode; }; - return { localDarkMode, toggleLocalDarkMode }; + return { localDarkMode, toggleLocalDarkMode, globalDarkModeState }; } From b97b625ee915334ebc4b9c1d9c12b242c8896b09 Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 04:26:08 +0100 Subject: [PATCH 5/8] refactor: put icons into seperate component --- example/App.tsx | 41 +---------------------------------------- example/Icons.tsx | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 example/Icons.tsx diff --git a/example/App.tsx b/example/App.tsx index a6b92ab..70ed8dd 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -5,6 +5,7 @@ import SelectControl from './SelectControl.vue'; import Editable from './Editable.vue'; // import Tsx from './Tsx'; import './styles.less'; +import { MoonIcon, SunIcon } from './Icons'; const list = [ { @@ -34,46 +35,6 @@ const list = [ // }, ]; -const SunIcon = () => ( - - - - - - - - - - - -); - -const MoonIcon = () => ( - - - -); - export default defineComponent({ setup() { const state = reactive({ diff --git a/example/Icons.tsx b/example/Icons.tsx new file mode 100644 index 0000000..fcf1407 --- /dev/null +++ b/example/Icons.tsx @@ -0,0 +1,39 @@ +export const SunIcon = () => ( + + + + + + + + + + + +); + +export const MoonIcon = () => ( + + + +); From 90d8524ac147659fa32b2c27677110dbf85ca88d Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 05:06:37 +0100 Subject: [PATCH 6/8] docs: add darkHighlightMode to docs --- README.md | 53 +++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 38a308e..5206c3f 100644 --- a/README.md +++ b/README.md @@ -106,31 +106,32 @@ plugins: [ ## Props -| Property | Description | Type | Default | -|---------------------------|---------------------------------------------------------------------------------|-----------------------------------| ------- | -| data(v-model) | JSON data, support v-model when use editable | JSON object | - | -| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - | -| deep | Paths greater than this depth will be collapsed | number | - | -| showLength | Show the length when collapsed | boolean | false | -| showLine | Show the line | boolean | true | -| showLineNumber | Show the line number | boolean | false | -| showIcon | Show the icon | boolean | false | -| showDoubleQuotes | Show doublequotes on key | boolean | true | -| virtual | Use virtual scroll | boolean | false | -| height | The height of list when using virtual | number | 400 | -| itemHeight | The height of node when using virtual | number | 20 | -| selectedValue(v-model) | Selected data path | string, array | - | -| rootPath | Root data path | string | `root` | -| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - | -| selectableType | Support path select, default none | `multiple` \| `single` | - | -| showSelectController | Show the select controller | boolean | false | -| selectOnClickNode | Trigger select when click node | boolean | true | -| highlightSelectedNode | Support highlighting selected nodes | boolean | true | -| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | -| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - | -| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - | -| editable | Support editable | boolean | false | -| editableTrigger | Trigger | `click` \| `dblclick` | `click` | +| Property | Description | Type | Default | +| ------------------------ | ------------------------------------------------------------------------------------ | --------------------------------- | ------- | +| data(v-model) | JSON data, support v-model when use editable | JSON object | - | +| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - | +| deep | Paths greater than this depth will be collapsed | number | - | +| showLength | Show the length when collapsed | boolean | false | +| showLine | Show the line | boolean | true | +| showLineNumber | Show the line number | boolean | false | +| showIcon | Show the icon | boolean | false | +| showDoubleQuotes | Show doublequotes on key | boolean | true | +| virtual | Use virtual scroll | boolean | false | +| height | The height of list when using virtual | number | 400 | +| itemHeight | The height of node when using virtual | number | 20 | +| selectedValue(v-model) | Selected data path | string, array | - | +| rootPath | Root data path | string | `root` | +| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - | +| selectableType | Support path select, default none | `multiple` \| `single` | - | +| showSelectController | Show the select controller | boolean | false | +| selectOnClickNode | Trigger select when click node | boolean | true | +| highlightSelectedNode | Support highlighting selected nodes | boolean | true | +| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | +| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - | +| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - | +| editable | Support editable | boolean | false | +| editableTrigger | Trigger | `click` \| `dblclick` | `click` | +| darkHighlightMode | Enables a dark theme for hover highlights, improving visibility on dark backgrounds. | boolean | false | ## Events @@ -145,7 +146,7 @@ plugins: [ | Slot Name | Description | Parameters | | --------------- | ----------------- | ---------------------- | -| renderNodeKey | render node key | { node, defaultKey } | +| renderNodeKey | render node key | { node, defaultKey } | | renderNodeValue | render node value | { node, defaultValue } | ## Contributors From 4706ef9243c8f38302788b4753a05959a8faea5b Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 14:06:05 +0100 Subject: [PATCH 7/8] fix: fixed icon not changing on darkmode switch --- example/App.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 70ed8dd..44b4f8b 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -75,11 +75,12 @@ export default defineComponent({ state, onActiveChange, toggleDarkMode, + globalDarkModeState, }; }, render() { - const { state, onActiveChange, toggleDarkMode } = this; + const { state, onActiveChange, toggleDarkMode, globalDarkModeState } = this; return (
@@ -103,7 +104,7 @@ export default defineComponent({ ))}
- {state.isDarkMode ? : } + {globalDarkModeState.isDarkMode ? : }
From 80e705ca8cc1f4d7bae9ba6a3d805f8603fec907 Mon Sep 17 00:00:00 2001 From: Daniel Oppermann Date: Thu, 1 Feb 2024 14:39:06 +0100 Subject: [PATCH 8/8] refactor: use theme prop instead of darkHighlightMode --- README.md | 52 ++++++++++++++--------------- example/Basic.vue | 9 +++-- example/Editable.vue | 9 +++-- example/SelectControl.vue | 9 +++-- example/VirtualList.vue | 9 +++-- example/useDarkMode.ts | 5 +-- src/components/Tree/index.tsx | 10 +++--- src/components/TreeNode/index.tsx | 8 ++--- src/components/TreeNode/styles.less | 2 +- 9 files changed, 63 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 5206c3f..37a6296 100644 --- a/README.md +++ b/README.md @@ -106,32 +106,32 @@ plugins: [ ## Props -| Property | Description | Type | Default | -| ------------------------ | ------------------------------------------------------------------------------------ | --------------------------------- | ------- | -| data(v-model) | JSON data, support v-model when use editable | JSON object | - | -| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - | -| deep | Paths greater than this depth will be collapsed | number | - | -| showLength | Show the length when collapsed | boolean | false | -| showLine | Show the line | boolean | true | -| showLineNumber | Show the line number | boolean | false | -| showIcon | Show the icon | boolean | false | -| showDoubleQuotes | Show doublequotes on key | boolean | true | -| virtual | Use virtual scroll | boolean | false | -| height | The height of list when using virtual | number | 400 | -| itemHeight | The height of node when using virtual | number | 20 | -| selectedValue(v-model) | Selected data path | string, array | - | -| rootPath | Root data path | string | `root` | -| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - | -| selectableType | Support path select, default none | `multiple` \| `single` | - | -| showSelectController | Show the select controller | boolean | false | -| selectOnClickNode | Trigger select when click node | boolean | true | -| highlightSelectedNode | Support highlighting selected nodes | boolean | true | -| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | -| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - | -| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - | -| editable | Support editable | boolean | false | -| editableTrigger | Trigger | `click` \| `dblclick` | `click` | -| darkHighlightMode | Enables a dark theme for hover highlights, improving visibility on dark backgrounds. | boolean | false | +| Property | Description | Type | Default | +| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- | +| data(v-model) | JSON data, support v-model when use editable | JSON object | - | +| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - | +| deep | Paths greater than this depth will be collapsed | number | - | +| showLength | Show the length when collapsed | boolean | false | +| showLine | Show the line | boolean | true | +| showLineNumber | Show the line number | boolean | false | +| showIcon | Show the icon | boolean | false | +| showDoubleQuotes | Show doublequotes on key | boolean | true | +| virtual | Use virtual scroll | boolean | false | +| height | The height of list when using virtual | number | 400 | +| itemHeight | The height of node when using virtual | number | 20 | +| selectedValue(v-model) | Selected data path | string, array | - | +| rootPath | Root data path | string | `root` | +| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - | +| selectableType | Support path select, default none | `multiple` \| `single` | - | +| showSelectController | Show the select controller | boolean | false | +| selectOnClickNode | Trigger select when click node | boolean | true | +| highlightSelectedNode | Support highlighting selected nodes | boolean | true | +| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | +| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - | +| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - | +| editable | Support editable | boolean | false | +| editableTrigger | Trigger | `click` \| `dblclick` | `click` | +| theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'` | `light` | ## Events diff --git a/example/Basic.vue b/example/Basic.vue index 4ecff08..64df3a1 100644 --- a/example/Basic.vue +++ b/example/Basic.vue @@ -47,8 +47,11 @@
- - + +
@@ -67,7 +70,7 @@

vue-json-pretty:

- - + +

vue-json-pretty:

- - + +

v-model:selectedValue:

@@ -72,7 +75,7 @@
- - + +

vue-json-pretty(10000+ items):

darkModeState.isDarkMode, newVal => { - localDarkMode.value = newVal; + localDarkMode.value = newVal ? 'dark' : 'light'; globalDarkModeState.value = newVal; }, ); const toggleLocalDarkMode = () => { darkModeState.isDarkMode = !darkModeState.isDarkMode; + localDarkMode.value = darkModeState.isDarkMode ? 'dark' : 'light'; }; return { localDarkMode, toggleLocalDarkMode, globalDarkModeState }; diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx index dfd5e2e..6957e8a 100644 --- a/src/components/Tree/index.tsx +++ b/src/components/Tree/index.tsx @@ -70,9 +70,9 @@ export default defineComponent({ onSelectedChange: { type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => void>, }, - darkHighlightMode: { - type: Boolean, - default: false, + theme: { + type: String as PropType<'light' | 'dark'>, + default: 'light', }, }, @@ -285,7 +285,7 @@ export default defineComponent({ key={item.id} node={item} collapsed={!!state.hiddenPaths[item.path]} - darkHighlightMode={props.darkHighlightMode} + theme={props.theme} showDoubleQuotes={props.showDoubleQuotes} showLength={props.showLength} checked={selectedPaths.value.includes(item.path)} @@ -321,7 +321,7 @@ export default defineComponent({ class={{ 'vjs-tree': true, 'is-virtual': props.virtual, - 'dark-highlight-mode': props.darkHighlightMode, + dark: props.theme === 'dark', }} onScroll={props.virtual ? handleTreeScroll : undefined} style={ diff --git a/src/components/TreeNode/index.tsx b/src/components/TreeNode/index.tsx index 9a1bcd7..6c6a27c 100644 --- a/src/components/TreeNode/index.tsx +++ b/src/components/TreeNode/index.tsx @@ -64,9 +64,9 @@ export const treeNodePropsPass = { type: Boolean, default: false, }, - darkHighlightMode: { - type: Boolean, - default: false, + theme: { + type: String as PropType<'light' | 'dark'>, + default: 'light', }, showKeyValueSpace: { type: Boolean, @@ -217,7 +217,7 @@ export default defineComponent({ 'has-selector': props.showSelectController, 'has-carets': props.showIcon, 'is-highlight': props.highlightSelectedNode && props.checked, - 'dark-highlight-mode': props.darkHighlightMode, + dark: props.theme === 'dark', }} onClick={handleNodeClick} style={props.style} diff --git a/src/components/TreeNode/styles.less b/src/components/TreeNode/styles.less index 62e06e2..57292f9 100644 --- a/src/components/TreeNode/styles.less +++ b/src/components/TreeNode/styles.less @@ -36,7 +36,7 @@ } } - &.dark-highlight-mode { + &.dark { &.is-highlight, &:hover { background-color: @highlight-bg-color-dark;