Skip to content

Commit fb6dc7b

Browse files
boukadamboukadam
committed
feat: add collapse threshold
1 parent 4df6bdb commit fb6dc7b

File tree

4 files changed

+51
-29
lines changed

4 files changed

+51
-29
lines changed

‎README.md

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -106,30 +106,31 @@ 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-
| deep | Paths greater than this depth will be collapsed | number | - |
113-
| showLength | Show the length when collapsed | boolean | false |
114-
| showLine | Show the line | boolean | true |
115-
| showLineNumber | Show the line number | boolean | false |
116-
| showIcon | Show the icon | boolean | false |
117-
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118-
| virtual | Use virtual scroll | boolean | false |
119-
| height | The height of list when using virtual | number | 400 |
120-
| itemHeight | The height of node when using virtual | number | 20 |
121-
| selectedValue(v-model) | Selected data path | string, array | - |
122-
| rootPath | Root data path | string | `root` |
123-
| nodeSelectable | Defines whether a node supports selection | (node) => boolean | - |
124-
| selectableType | Support path select, default none | `multiple` \| `single` | - |
125-
| showSelectController | Show the select controller | boolean | false |
126-
| selectOnClickNode | Trigger select when click node | boolean | true |
127-
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128-
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129-
| renderNodeKey | render node key, or use slot #renderNodeKey | ({ node, defaultKey }) => vNode | - |
130-
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
131-
| editable | Support editable | boolean | false |
132-
| 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` |
133134

134135
## Events
135136

‎README.zh_CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
| 属性 | 说明 | 类型 | 默认值 |
1414
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
1515
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
16+
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
1617
| deep | 深度，大于该深度的节点将被折叠 | number | Infinity |
1718
| showLength | 在数据折叠的时候展示长度 | boolean | false |
1819
| showLine | 展示标识线 | boolean | true |

‎example/VirtualList.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,19 @@
2626
<option :value="4">4</option>
2727
</select>
2828
</div>
29+
<div>
30+
<label>collapsedNodeLength</label>
31+
<select v-model="state.collapsedNodeLength">
32+
<option :value="10">10</option>
33+
<option :value="Infinity">Infinity</option>
34+
</select>
35+
</div>
2936
</div>
3037
</div>
3138
<div class="block">
3239
<h3>vue-json-pretty(10000+ items):</h3>
3340
<vue-json-pretty
41+
:collapsed-node-length="state.collapsedNodeLength"
3442
:virtual="true"
3543
:item-height="+state.itemHeight"
3644
:data="state.data"
@@ -74,6 +82,7 @@ export default defineComponent({
7482
showLine: true,
7583
collapsedOnClickBrackets: true,
7684
deep: 3,
85+
collapsedNodeLength: Infinity,
7786
itemHeight: 20,
7887
});
7988

‎src/components/Tree/index.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ export default defineComponent({
2222
type: [String, Number, Boolean, Array, Object] as PropType<JSONDataType>,
2323
default: null,
2424
},
25+
collapsedNodeLength: {
26+
type: Number,
27+
default: Infinity
28+
},
2529
// Define the depth of the tree, nodes greater than this depth will not be expanded.
2630
deep: {
2731
type: Number,
@@ -84,13 +88,13 @@ export default defineComponent({
8488

8589
const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
8690

87-
const initHiddenPaths = (deep: number) => {
91+
const initHiddenPaths = (deep: number, collapsedNodeLength: number) => {
8892
return originFlatData.value.reduce((acc, item) => {
89-
const depthComparison = item.level >= deep;
93+
const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
9094
const pathComparison = props.pathCollapsible?.(item as NodeDataType);
9195
if (
9296
(item.type === 'objectStart' || item.type === 'arrayStart') &&
93-
(depthComparison || pathComparison)
97+
(doCollapse || pathComparison)
9498
) {
9599
return {
96100
...acc,
@@ -104,7 +108,7 @@ export default defineComponent({
104108
const state = reactive({
105109
translateY: 0,
106110
visibleData: null as NodeDataType[] | null,
107-
hiddenPaths: initHiddenPaths(props.deep),
111+
hiddenPaths: initHiddenPaths(props.deep, props.collapsedNodeLength),
108112
});
109113

110114
const flatData = computed(() => {
@@ -255,7 +259,14 @@ export default defineComponent({
255259
watch(
256260
() => props.deep,
257261
val => {
258-
if (val) state.hiddenPaths = initHiddenPaths(val);
262+
if (val) state.hiddenPaths = initHiddenPaths(val, props.collapsedNodeLength);
263+
},
264+
);
265+
266+
watch(
267+
() => props.collapsedNodeLength,
268+
val => {
269+
if (val) state.hiddenPaths = initHiddenPaths(props.deep, val);
259270
},
260271
);
261272

0 commit comments

Comments
 (0)