Skip to content

Commit

Permalink
Merge branch 'dev' of github.com:leezng/vue-json-pretty into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@leezng
leezng committed Nov 28, 2023
2 parents 9a1370c + 2fd950e commit f77b27e
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 29 deletions.
49 changes: 25 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

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 @@ -13,6 +13,7 @@
| 属性 | 说明 | 类型 | 默认值 |
| ------------------------ | ------------------------------------------- | --------------------------------- | ------------- |
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | 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>collapsedNodeLength</label>
<select v-model="state.collapsedNodeLength">
<option :value="10">10</option>
<option :value="Infinity">Infinity</option>
</select>
</div>
</div>
</div>
<div class="block">
<h3>vue-json-pretty(10000+ items):</h3>
<vue-json-pretty
:collapsed-node-length="state.collapsedNodeLength"
:virtual="true"
:item-height="+state.itemHeight"
:data="state.data"
Expand Down Expand Up @@ -74,6 +82,7 @@ export default defineComponent({
showLine: true,
collapsedOnClickBrackets: true,
deep: 3,
collapsedNodeLength: Infinity,
itemHeight: 20,
});
Expand Down
21 changes: 16 additions & 5 deletions src/components/Tree/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export default defineComponent({
type: [String, Number, Boolean, Array, Object] as PropType<JSONDataType>,
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,
Expand Down Expand Up @@ -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,
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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);
},
);

Expand Down

0 comments on commit f77b27e

Please sign in to comment.