diff --git a/.github/workflows/bump-version-v1.yml b/.github/workflows/bump-version-v1.yml
new file mode 100644
index 0000000..c81d6e8
--- /dev/null
+++ b/.github/workflows/bump-version-v1.yml
@@ -0,0 +1,34 @@
+name: Create Release for v1
+
+on:
+ workflow_dispatch:
+
+jobs:
+ bump-version:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Code
+ uses: actions/checkout@v3
+
+ - name: Automated Version Bump
+ uses: phips28/gh-action-bump-version@v9.1.0
+ env:
+ GITHUB_USER: ${{ secrets.CI_NAME }}
+ GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ tag-prefix: 'v'
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ registry-url: https://registry.npmjs.org/
+
+ - name: Publish NPM
+ run: |
+ npm ci
+ npm run build
+ npm publish --tag v1-latest
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/bump-version.yml b/.github/workflows/bump-version.yml
index 95eeb3b..4c750ad 100644
--- a/.github/workflows/bump-version.yml
+++ b/.github/workflows/bump-version.yml
@@ -18,6 +18,8 @@ jobs:
GITHUB_USER: ${{ secrets.CI_NAME }}
GITHUB_EMAIL: ${{ secrets.CI_EMAIL }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ with:
+ tag-prefix: 'v'
- name: Set up Node.js
uses: actions/setup-node@v3
diff --git a/README.md b/README.md
index cb734a2..38a308e 100644
--- a/README.md
+++ b/README.md
@@ -106,30 +106,31 @@ plugins: [
## Props
-| Property | Description | Type | Default |
-| ------------------------ | ----------------------------------------------- | --------------------------------- | ------- |
-| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
-| 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` |
## Events
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 0f2dfc1..8f40943 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -13,6 +13,7 @@
| 属性 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
+| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
| showLength | 在数据折叠的时候展示长度 | boolean | false |
| showLine | 展示标识线 | boolean | true |
diff --git a/example/VirtualList.vue b/example/VirtualList.vue
index 440abe4..a8018de 100644
--- a/example/VirtualList.vue
+++ b/example/VirtualList.vue
@@ -26,11 +26,19 @@
+
+
+
+
vue-json-pretty(10000+ items):
,
default: null,
},
+ collapsedNodeLength: {
+ type: Number,
+ default: Infinity,
+ },
// Define the depth of the tree, nodes greater than this depth will not be expanded.
deep: {
type: Number,
@@ -84,13 +88,13 @@ export default defineComponent({
const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
- const initHiddenPaths = (deep: number) => {
+ const initHiddenPaths = (deep: number, collapsedNodeLength: number) => {
return originFlatData.value.reduce((acc, item) => {
- const depthComparison = item.level >= deep;
+ const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
const pathComparison = props.pathCollapsible?.(item as NodeDataType);
if (
(item.type === 'objectStart' || item.type === 'arrayStart') &&
- (depthComparison || pathComparison)
+ (doCollapse || pathComparison)
) {
return {
...acc,
@@ -104,7 +108,7 @@ export default defineComponent({
const state = reactive({
translateY: 0,
visibleData: null as NodeDataType[] | null,
- hiddenPaths: initHiddenPaths(props.deep),
+ hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
});
const flatData = computed(() => {
@@ -255,7 +259,14 @@ export default defineComponent({
watch(
() => props.deep,
val => {
- if (val) state.hiddenPaths = initHiddenPaths(val);
+ if (val) state.hiddenPaths = initHiddenPaths(val, props.collapsedNodeLength);
+ },
+ );
+
+ watch(
+ () => props.collapsedNodeLength,
+ val => {
+ if (val) state.hiddenPaths = initHiddenPaths(props.deep, val);
},
);
diff --git a/src/components/TreeNode/styles.less b/src/components/TreeNode/styles.less
index e70075c..6748a73 100644
--- a/src/components/TreeNode/styles.less
+++ b/src/components/TreeNode/styles.less
@@ -41,6 +41,7 @@
position: absolute;
right: 100%;
margin-right: 4px;
+ user-select: none;
}
.@{css-prefix}-colon {