Skip to content

Commit

Permalink
Merge pull request #272 from leezng/dev
Browse files Browse the repository at this point in the history 
release
  • Loading branch information
@leezng
leezng authored Mar 20, 2024
2 parents a538489 + 17ce791 commit ec3df70
Show file tree
Hide file tree
Showing 18 changed files with 324 additions and 107 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ node_modules/
example-dist/
dist/
lib/
esm/
types/
npm-debug.log*
yarn-debug.log*
Expand Down
65 changes: 33 additions & 32 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,46 +106,47 @@ 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` |
| theme | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \| 'dark'` | `light` |

## Events

| Event Name | Description | Parameters |
| -------------- | ---------------------------------------- | -------------------- |
| nodeClick | triggers when click node | (node: NodeData) |
| bracketsClick | triggers when click brackets | (collapsed: boolean) |
| iconClick | triggers when click icon | (collapsed: boolean) |
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
| Event Name | Description | Parameters |
| -------------- | ---------------------------------------- | ------------------------------------ |
| nodeClick | triggers when click node | (node: NodeData) |
| bracketsClick | triggers when click brackets | (collapsed: boolean, node: NodeData) |
| iconClick | triggers when click icon | (collapsed: boolean, node: NodeData) |
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |

## Slots

| Slot Name | Description | Parameters |
| --------------- | ----------------- | ---------------------- |
| renderNodeKey | render node key | { node, defaultKey } |
| renderNodeKey | render node key | { node, defaultKey } |
| renderNodeValue | render node value | { node, defaultValue } |

## Contributors
Expand Down
19 changes: 10 additions & 9 deletions README.zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
| 属性 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
| showLength | 在数据折叠的时候展示长度 | boolean | false |
| showLine | 展示标识线 | boolean | true |
Expand All @@ -31,23 +31,24 @@
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
| renderNodeKey | 渲染节点键，也可使用 #renderNodeKey | ({ node, defaultKey }) => vNode | - |
| renderNodeValue | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | - |
| editable | 支持可编辑 | boolean | false |
| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | `click` |
| theme | 主题色 | `'light' \| 'dark'` | `light` |

## Events

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

## Slots

| 插槽名 | 描述 | 参数 |
| --------------- | ---------- | ---------------------- |
| renderNodeKey | 渲染节点键 | { node, defaultKey } |
| renderNodeKey | 渲染节点键 | { node, defaultKey } |
| renderNodeValue | 渲染节点值 | { node, defaultValue } |
21 changes: 9 additions & 12 deletions build/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@ require('./check-versions')();

process.env.NODE_ENV = 'production';

const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const { spawn } = require('child_process');
const webpackConfig = require('./webpack.prod.conf');

const isEsm = process.env.ESM;
const isExampleEnv = process.env.EXAMPLE_ENV;

const successText = {
main: 'Build main sources complete.',
esm: 'Build esm sources complete.',
example: 'Build example page complete.',
};

webpack(webpackConfig, (err, stats) => {
if (err) throw err;

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

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

if (isExampleEnv) {
console.log(
Expand All @@ -38,13 +43,5 @@ webpack(webpackConfig, (err, stats) => {
"Opening index.html over file:// won't work.\n",
),
);
} else {
const buildTypesProcess = spawn('npm', ['run', 'build:dts'], {
stdio: 'inherit',
});

buildTypesProcess.on('close', () => {
console.log(chalk.cyan('Build types(.d.ts) complete.\n'));
});
}
});
31 changes: 23 additions & 8 deletions build/webpack.prod.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

const isEsm = process.env.ESM;
const isExampleEnv = process.env.EXAMPLE_ENV;
const distPath = '../lib';
const distPath = isEsm ? '../esm' : '../lib';

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

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

if (!isExampleEnv) {
webpackConfig.entry = {
'vue-json-pretty': './src/index.ts',
};
webpackConfig.output = {
path: path.resolve(__dirname, distPath),
filename: `${distPath}/[name].js`,
globalObject: 'this',
library: 'VueJsonPretty',
libraryTarget: 'umd',
};
if (isEsm) {
webpackConfig.entry = {
'vue-json-pretty': './src/index.ts',
};
webpackConfig.experiments = {
outputModule: true,
};
webpackConfig.output.library = { type: 'module' };
webpackConfig.output.chunkFormat = 'module';
webpackConfig.target = 'es2019';
} else {
webpackConfig.entry = {
'vue-json-pretty': './src/index.ts',
};
webpackConfig.output.globalObject = 'this';
webpackConfig.output.library = 'VueJsonPretty';
webpackConfig.output.libraryTarget = 'umd';
}
webpackConfig.externals = {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
commonjs: 'vue',
amd: 'vue',
module: 'vue',
},
};
webpackConfig.plugins.push(
Expand Down
54 changes: 42 additions & 12 deletions example/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { defineComponent, reactive } 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';
import Editable from './Editable.vue';
// import Tsx from './Tsx';
import './styles.less';
import { MoonIcon, SunIcon } from './Icons';

const list = [
{
Expand Down Expand Up @@ -41,24 +42,48 @@ export default defineComponent({
opened: [list[0].key],
});

const globalDarkModeState = reactive({
isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
});

provide('darkModeState', globalDarkModeState);

const onActiveChange = (key: string) => {
state.activeKey = key;
if (!state.opened.includes(key)) {
state.opened.push(key);
}
};

const toggleDarkMode = () => {
globalDarkModeState.isDarkMode = !globalDarkModeState.isDarkMode;
};

onMounted(() => {
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,
globalDarkModeState,
};
},

render() {
const { state, onActiveChange } = this;
const { state, onActiveChange, toggleDarkMode, globalDarkModeState } = this;

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
Expand All @@ -67,15 +92,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}>
{globalDarkModeState.isDarkMode ? <SunIcon /> : <MoonIcon />}
</div>
</div>

<div class="tabs-content">
Expand Down
Loading

0 comments on commit ec3df70

Please sign in to comment.