Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

release #272

Merged
merged 16 commits into from
Mar 20, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: add basic darkmode support
Dan0xE committed Feb 1, 2024

Verified

This commit was signed with the committer’s verified signature.
savacano28 Stephanya Casanova
commit 8cd319b3cd19052fa9d57f3ad88e222e753dcaae
79 changes: 68 additions & 11 deletions example/App.tsx
Original file line number Diff line number Diff line change
@@ -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,20 +34,67 @@ const list = [
// },
];

const SunIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
);

const MoonIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21 12.79A9 9 0 0112.21 3C11.66 3 11.11 3.05 10.58 3.15A9 9 0 1021 12.79z"></path>
</svg>
);

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)) {
state.opened.push(key);
}
};

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 (
<div class="example">
<div class={`example ${state.isDarkMode ? 'dark-mode' : ''}`}>
<h1>Vue Json Pretty</h1>
<p>
Welcome to the demo space of Vue Json Pretty, here we provide the following different
@@ -67,15 +119,20 @@ export default defineComponent({

<div class="tabs">
<div class="tabs-header">
{list.map(({ title, key }) => (
<div
key={key}
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
onClick={() => onActiveChange(key)}
>
{title}
</div>
))}
<div class="tabs-items-container">
{list.map(({ title, key }) => (
<div
key={key}
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
onClick={() => onActiveChange(key)}
>
{title}
</div>
))}
</div>
<div class="dark-mode-toggle" onClick={toggleDarkMode}>
{state.isDarkMode ? <SunIcon /> : <MoonIcon />}
</div>
</div>

<div class="tabs-content">
5 changes: 5 additions & 0 deletions example/Basic.vue
Original file line number Diff line number Diff line change
@@ -46,6 +46,10 @@
<label>setPathCollapsible</label>
<input v-model="state.setPathCollapsible" type="checkbox" />
</div>
<div>
<label>darkMode</label>
<input v-model="state.darkMode" type="checkbox" />
</div>
</div>

<h3>Slots:</h3>
@@ -63,6 +67,7 @@
<div class="block">
<h3>vue-json-pretty:</h3>
<vue-json-pretty
:darkMode="state.darkMode"
:data="state.data"
:deep="state.deep"
:path-collapsible="state.setPathCollapsible ? pathCollapsible : undefined"
5 changes: 5 additions & 0 deletions example/Editable.vue
Original file line number Diff line number Diff line change
@@ -34,11 +34,16 @@
</select>
</div>
</div>
<div>
<label>darkMode</label>
<input v-model="state.darkMode" type="checkbox" />
</div>
</div>
<div class="block">
<h3>vue-json-pretty:</h3>
<vue-json-pretty
v-model:data="state.data"
:darkMode="state.darkMode"
:deep="state.deep"
:show-double-quotes="true"
:show-line="state.showLine"
5 changes: 5 additions & 0 deletions example/SelectControl.vue
Original file line number Diff line number Diff line change
@@ -57,6 +57,10 @@
<option :value="4">4</option>
</select>
</div>
<div>
<label>darkMode</label>
<input v-model="state.darkMode" type="checkbox" />
</div>
</div>
<h3>v-model:selectedValue:</h3>
<div>{{ state.selectedValue }}</div>
@@ -68,6 +72,7 @@
<vue-json-pretty
v-if="state.renderOK"
v-model:selectedValue="state.selectedValue"
:darkMode="state.darkMode"
:data="state.data"
:root-path="state.rootPath"
:deep="state.deep"
5 changes: 5 additions & 0 deletions example/VirtualList.vue
Original file line number Diff line number Diff line change
@@ -34,10 +34,15 @@
</select>
</div>
</div>
<div>
<label>darkMode</label>
<input v-model="state.darkMode" type="checkbox" />
</div>
</div>
<div class="block">
<h3>vue-json-pretty(10000+ items):</h3>
<vue-json-pretty
:darkMode="state.darkMode"
:collapsed-node-length="state.collapsedNodeLength"
:virtual="true"
:item-height="+state.itemHeight"
61 changes: 43 additions & 18 deletions example/styles.less
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@primary-color: #1890ff;
@dark-background-color: darken(#333, 5%);
@dark-text-color: #fff;
@dark-border-color: #555;

* {
box-sizing: border-box;
@@ -7,37 +10,59 @@
html,
body {
margin: 0;
transition: background-color 0.3s, color 0.3s;
}

body {
font-size: 14px;
background-color: #f9f9f9;

&.dark-mode {
background-color: @dark-background-color;
color: @dark-text-color;
}
}

.tabs-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}

.tabs-header-item {
position: relative;
margin-right: 20px;
padding: 8px 0;
cursor: pointer;
transition: color 0.3s;

&:hover,
&.is-active {
color: @primary-color;

&:after {
border-bottom: 2px solid @primary-color;
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: -1px;
.tabs-items-container {
display: flex;

.tabs-header-item {
position: relative;
margin-right: 20px;
padding: 8px 0;
cursor: pointer;
transition: color 0.3s;

&:hover,
&.is-active {
color: @primary-color;

&:after {
border-bottom: 2px solid @primary-color;
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: -1px;
}
}
body.dark-mode & {
color: @dark-text-color;
&:hover,
&.is-active {
color: lighten(@primary-color, 20%);

&:after {
border-bottom: 2px solid lighten(@primary-color, 20%);
}
}
}
}
}
6 changes: 6 additions & 0 deletions src/components/Tree/index.tsx
Original file line number Diff line number Diff line change
@@ -70,6 +70,10 @@ export default defineComponent({
onSelectedChange: {
type: Function as PropType<(newVal: string | string[], oldVal: string | string[]) => 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={
5 changes: 5 additions & 0 deletions src/components/TreeNode/index.tsx
Original file line number Diff line number Diff line change
@@ -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}
7 changes: 7 additions & 0 deletions src/components/TreeNode/styles.less
Original file line number Diff line number Diff line change
@@ -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 {
3 changes: 2 additions & 1 deletion src/themes.less
Original file line number Diff line number Diff line change
@@ -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;