Skip to content

Commit

Permalink
feat: add collapse threshold
Browse files Browse the repository at this point in the history
  • Loading branch information
@boukadam
boukadam committed Nov 21, 2023
1 parent b5e2e29 commit de5f324
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 27 deletions.
45 changes: 23 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,28 +106,29 @@ 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.sync | Selected data path | string, array | - |
| rootPath | Root data path | string | `root` |
| nodeSelectable | Defines whether a data path supports selection | function(node) | - |
| 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 |
| 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 | - |
| collapseThreshold | 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.sync | Selected data path | string, array | - |
| rootPath | Root data path | string | `root` |
| nodeSelectable | Defines whether a data path supports selection | function(node) | - |
| 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 |
| editable | Support editable | boolean | false |
| editableTrigger | Trigger | `click`, `dblclick` | `click` |

## Events

Expand Down
1 change: 1 addition & 0 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
| 属性 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------ | -------------------- | ------------- |
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
| collapseThreshold | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
| deep | 深度，大于该深度的路径将被折叠 | number | Infinity |
| showLength | 在数据折叠的时候展示长度 | boolean | false |
| showLine | 展示标识线 | boolean | true |
Expand Down
9 changes: 9 additions & 0 deletions example/VirtualList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,19 @@
<option :value="4">4</option>
</select>
</div>
<div>
<label>collapseThreshold</label>
<select v-model="collapseThreshold">
<option :value="10">10</option>
<option :value="Infinity">Infinity</option>
</select>
</div>
</div>
</div>
<div class="block">
<h3>vue-json-pretty(1000+ items):</h3>
<vue-json-pretty
:collapse-threshold="collapseThreshold"
:virtual="true"
:item-height="+itemHeight"
:data="data"
Expand Down Expand Up @@ -69,6 +77,7 @@ export default {
showLine: true,
collapsedOnClickBrackets: true,
deep: 3,
collapseThreshold: Infinity,
itemHeight: 20,
};
},
Expand Down
20 changes: 15 additions & 5 deletions src/components/Tree/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ export default {
prop: 'data',
},
props: {
collapseThreshold: {
type: Number,
default: Infinity
},
// JSON
data: {
type: [String, Number, Boolean, Array, Object],
Expand Down Expand Up @@ -182,7 +186,7 @@ export default {
return {
translateY: 0,
visibleData: null,
hiddenPaths: this.initHiddenPaths(jsonFlatten(this.data, this.rootPath), this.deep),
hiddenPaths: this.initHiddenPaths(jsonFlatten(this.data, this.rootPath), this.deep, this.collapseThreshold),
};
},
computed: {
Expand Down Expand Up @@ -263,15 +267,21 @@ export default {
deep: {
handler(val) {
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, val);
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, val, this.collapseThreshold);
},
},
collapseThreshold: {
handler(val) {
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, this.deep, val);
},
},
},
methods: {
initHiddenPaths(originFlatData, deep) {
initHiddenPaths(originFlatData, deep, collapseThreshold) {
return originFlatData.reduce((acc, item) => {
const depthComparison = item.level >= deep;
if ((item.type === 'objectStart' || item.type === 'arrayStart') && depthComparison) {
const doCollapse = item.level >= deep || item.length >= collapseThreshold;
if ((item.type === 'objectStart' || item.type === 'arrayStart') && doCollapse) {
return {
...acc,
[item.path]: 1,
Expand Down

0 comments on commit de5f324

Please sign in to comment.