Skip to content

Commit ec3df70

Browse files
leezngleezng
authored
Merge pull request #272 from leezng/dev
release
2 parents a538489 + 17ce791 commit ec3df70

18 files changed

+324
-107
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules/
33
example-dist/
44
dist/
55
lib/
6+
esm/
67
types/
78
npm-debug.log*
89
yarn-debug.log*

‎README.md

+33-32
Original file line numberDiff line numberDiff line change
@@ -106,46 +106,47 @@ 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` |
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` |
134135

135136
## Events
136137

137-
| Event Name | Description | Parameters |
138-
| -------------- | ---------------------------------------- | -------------------- |
139-
| nodeClick | triggers when click node | (node: NodeData) |
140-
| bracketsClick | triggers when click brackets | (collapsed: boolean) |
141-
| iconClick | triggers when click icon | (collapsed: boolean) |
142-
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
138+
| Event Name | Description | Parameters |
139+
| -------------- | ---------------------------------------- | ------------------------------------ |
140+
| nodeClick | triggers when click node | (node: NodeData) |
141+
| bracketsClick | triggers when click brackets | (collapsed: boolean, node: NodeData) |
142+
| iconClick | triggers when click icon | (collapsed: boolean, node: NodeData) |
143+
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
143144

144145
## Slots
145146

146147
| Slot Name | Description | Parameters |
147148
| --------------- | ----------------- | ---------------------- |
148-
| renderNodeKey | render node key | { node, defaultKey } |
149+
| renderNodeKey | render node key | { node, defaultKey } |
149150
| renderNodeValue | render node value | { node, defaultValue } |
150151

151152
## Contributors

‎README.zh_CN.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
| 属性 | 说明 | 类型 | 默认值 |
1414
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
1515
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
16-
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
16+
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
1717
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
1818
| showLength | 在数据折叠的时候展示长度 | boolean | false |
1919
| showLine | 展示标识线 | boolean | true |
@@ -31,23 +31,24 @@
3131
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
3232
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
3333
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
34-
| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
34+
| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
3535
| renderNodeValue | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | - |
3636
| editable | 支持可编辑 | boolean | false |
3737
| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | `click` |
38+
| theme | 主题色 | `'light' \| 'dark'` | `light` |
3839

3940
## Events
4041

41-
| 事件名称 | 说明 | 回调参数 |
42-
| -------------- | -------------------- | -------------------- |
43-
| nodeClick | 点击节点时触发 | (node: NodeData) |
44-
| bracketsClick | 点击括号时触发 | (collapsed: boolean) |
45-
| iconClick | 点击图标时触发 | (collapsed: boolean) |
46-
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |
42+
| 事件名称 | 说明 | 回调参数 |
43+
| -------------- | -------------------- | ------------------------------------ |
44+
| nodeClick | 点击节点时触发 | (node: NodeData) |
45+
| bracketsClick | 点击括号时触发 | (collapsed: boolean, node: NodeData) |
46+
| iconClick | 点击图标时触发 | (collapsed: boolean, node: NodeData) |
47+
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |
4748

4849
## Slots
4950

5051
| 插槽名 | 描述 | 参数 |
5152
| --------------- | ---------- | ---------------------- |
52-
| renderNodeKey | 渲染节点键 | { node, defaultKey } |
53+
| renderNodeKey | 渲染节点键 | { node, defaultKey } |
5354
| renderNodeValue | 渲染节点值 | { node, defaultValue } |

‎build/build.js

+9-12
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@ require('./check-versions')();
22

33
process.env.NODE_ENV = 'production';
44

5-
const fs = require('fs');
6-
const path = require('path');
75
const chalk = require('chalk');
86
const webpack = require('webpack');
9-
const { spawn } = require('child_process');
107
const webpackConfig = require('./webpack.prod.conf');
118

9+
const isEsm = process.env.ESM;
1210
const isExampleEnv = process.env.EXAMPLE_ENV;
1311

12+
const successText = {
13+
main: 'Build main sources complete.',
14+
esm: 'Build esm sources complete.',
15+
example: 'Build example page complete.',
16+
};
17+
1418
webpack(webpackConfig, (err, stats) => {
1519
if (err) throw err;
1620

@@ -29,7 +33,8 @@ webpack(webpackConfig, (err, stats) => {
2933
process.exit(1);
3034
}
3135

32-
console.log(chalk.cyan('Build sources complete.\n'));
36+
const text = isExampleEnv ? successText.example : isEsm ? successText.esm : successText.main;
37+
console.log(chalk.cyan(`${text}\n`));
3338

3439
if (isExampleEnv) {
3540
console.log(
@@ -38,13 +43,5 @@ webpack(webpackConfig, (err, stats) => {
3843
"Opening index.html over file:// won't work.\n",
3944
),
4045
);
41-
} else {
42-
const buildTypesProcess = spawn('npm', ['run', 'build:dts'], {
43-
stdio: 'inherit',
44-
});
45-
46-
buildTypesProcess.on('close', () => {
47-
console.log(chalk.cyan('Build types(.d.ts) complete.\n'));
48-
});
4946
}
5047
});

‎build/webpack.prod.conf.js

+23-8
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
1010
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1111
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
1212

13+
const isEsm = process.env.ESM;
1314
const isExampleEnv = process.env.EXAMPLE_ENV;
14-
const distPath = '../lib';
15+
const distPath = isEsm ? '../esm' : '../lib';
1516

1617
const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env;
1718

@@ -32,21 +33,35 @@ const webpackConfig = merge(baseWebpackConfig, {
3233
});
3334

3435
if (!isExampleEnv) {
35-
webpackConfig.entry = {
36-
'vue-json-pretty': './src/index.ts',
37-
};
3836
webpackConfig.output = {
3937
path: path.resolve(__dirname, distPath),
4038
filename: `${distPath}/[name].js`,
41-
globalObject: 'this',
42-
library: 'VueJsonPretty',
43-
libraryTarget: 'umd',
4439
};
40+
if (isEsm) {
41+
webpackConfig.entry = {
42+
'vue-json-pretty': './src/index.ts',
43+
};
44+
webpackConfig.experiments = {
45+
outputModule: true,
46+
};
47+
webpackConfig.output.library = { type: 'module' };
48+
webpackConfig.output.chunkFormat = 'module';
49+
webpackConfig.target = 'es2019';
50+
} else {
51+
webpackConfig.entry = {
52+
'vue-json-pretty': './src/index.ts',
53+
};
54+
webpackConfig.output.globalObject = 'this';
55+
webpackConfig.output.library = 'VueJsonPretty';
56+
webpackConfig.output.libraryTarget = 'umd';
57+
}
4558
webpackConfig.externals = {
4659
vue: {
4760
root: 'Vue',
48-
commonjs: 'vue',
4961
commonjs2: 'vue',
62+
commonjs: 'vue',
63+
amd: 'vue',
64+
module: 'vue',
5065
},
5166
};
5267
webpackConfig.plugins.push(

‎example/App.tsx

+42-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { defineComponent, reactive } 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';
55
import Editable from './Editable.vue';
66
// import Tsx from './Tsx';
77
import './styles.less';
8+
import { MoonIcon, SunIcon } from './Icons';
89

910
const list = [
1011
{
@@ -41,24 +42,48 @@ export default defineComponent({
4142
opened: [list[0].key],
4243
});
4344

45+
const globalDarkModeState = reactive({
46+
isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
47+
});
48+
49+
provide('darkModeState', globalDarkModeState);
50+
4451
const onActiveChange = (key: string) => {
4552
state.activeKey = key;
4653
if (!state.opened.includes(key)) {
4754
state.opened.push(key);
4855
}
4956
};
5057

58+
const toggleDarkMode = () => {
59+
globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode;
60+
};
61+
62+
onMounted(() => {
63+
document.body.classList.toggle('dark-mode', globalDarkModeState.isDarkMode);
64+
});
65+
66+
watch(
67+
() => globalDarkModeState.isDarkMode,
68+
newVal => {
69+
document.body.classList.toggle('dark-mode', newVal);
70+
},
71+
{ immediate: true },
72+
);
73+
5174
return {
5275
state,
5376
onActiveChange,
77+
toggleDarkMode,
78+
globalDarkModeState,
5479
};
5580
},
5681

5782
render() {
58-
const { state, onActiveChange } = this;
83+
const { state, onActiveChange, toggleDarkMode, globalDarkModeState } = this;
5984

6085
return (
61-
<div class="example">
86+
<div class={`example ${state.isDarkMode ? 'dark-mode' : ''}`}>
6287
<h1>Vue Json Pretty</h1>
6388
<p>
6489
Welcome to the demo space of Vue Json Pretty, here we provide the following different
@@ -67,15 +92,20 @@ export default defineComponent({
6792

6893
<div class="tabs">
6994
<div class="tabs-header">
70-
{list.map(({ title, key }) => (
71-
<div
72-
key={key}
73-
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
74-
onClick={() => onActiveChange(key)}
75-
>
76-
{title}
77-
</div>
78-
))}
95+
<div class="tabs-items-container">
96+
{list.map(({ title, key }) => (
97+
<div
98+
key={key}
99+
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
100+
onClick={() => onActiveChange(key)}
101+
>
102+
{title}
103+
</div>
104+
))}
105+
</div>
106+
<div class="dark-mode-toggle" onClick={toggleDarkMode}>
107+
{globalDarkModeState.isDarkMode ? <SunIcon /> : <MoonIcon />}
108+
</div>
79109
</div>
80110

81111
<div class="tabs-content">

0 commit comments

Comments
 (0)