From 446610999532bb6d25c82f055eeaf62c0ee71ea5 Mon Sep 17 00:00:00 2001
From: Fred Rivett <fred.rvt@gmail.com>
Date: Tue, 17 Aug 2021 16:03:51 +0100
Subject: [PATCH 1/3] Collapse children greater than or equal to depth

When a user specifies a depth to be collapsed, the intention is to make the JSON tidy so it is easy to visually parse.

Currently the `deep` prop only collapses at the specific level passed, and when a user opens that depth, all children are fully open.

I think this should collapse all children beyond the depth level, so that when the items are opened up the children are collapsed.

That said, for backwards compatibility I've implemented this as a new prop, defaulting to false, so that anyone upgrading won't see a change in behaviour.
---
 src/components/Tree/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
index 5baabd9..c2a370e 100644
--- a/src/components/Tree/index.tsx
+++ b/src/components/Tree/index.tsx
@@ -20,6 +20,10 @@ export default defineComponent({
       type: Number,
       default: Infinity,
     },
+    deepCollapseChildren: {
+      type: Boolean,
+      default: false,
+    },
     // Data root path.
     path: {
       type: String,
@@ -57,9 +61,12 @@ export default defineComponent({
       translateY: 0,
       visibleData: null as FlatDataType | null,
       hiddenPaths: jsonFlatten(props.data, props.path).reduce((acc, item) => {
+        const depthComparison = this.deepCollapseChildren
+          ? item.level >= this.deep
+          : item.level === this.deep;
         if (
           (item.type === 'objectStart' || item.type === 'arrayStart') &&
-          item.level === props.deep
+          depthComparison
         ) {
           return {
             ...acc,

From 6ae805f0e0a656785377e872ff8fb56ad2376898 Mon Sep 17 00:00:00 2001
From: Fred Rivett <fred.rvt@gmail.com>
Date: Tue, 17 Aug 2021 16:04:59 +0100
Subject: [PATCH 2/3] Update README to include deepCollapseChildren

Let the user know about the new prop for collapsing all children at the level below the `deep` prop passed.
---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index f58b648..c75cd86 100644
--- a/README.md
+++ b/README.md
@@ -112,6 +112,7 @@ plugins: [
 | ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
 | data                     | normal | JSON data                                                                               | JSON object                                    | -        |
 | deep                     | normal | Data depth, data larger than this depth will not be expanded                            | number                                         | Infinity |
+| deepCollapseChildren     | normal | Whether children collapsed by `deep` prop should also be collapsed                      | boolean                                         | false |
 | showLength               | normal | Whether to show the length when closed                                                  | boolean                                        | false    |
 | showLine                 | normal | Whether to show the line                                                                | boolean                                        | true     |
 | showDoubleQuotes         | normal | Whether to show doublequotes on key                                                     | boolean                                        | true     |

From aa79ca58d9ce3d31534898cdf9447f33d35a3822 Mon Sep 17 00:00:00 2001
From: Fred Rivett <fred@fredrivett.com>
Date: Wed, 25 Aug 2021 13:55:09 +0100
Subject: [PATCH 3/3] Add `deepCollapseChildren` to basic demo

This is a new option provided for collapsing children inside those
collapsed by default, so is exposed here
---
 example/Basic.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/example/Basic.vue b/example/Basic.vue
index bb1ef5b..d18a981 100644
--- a/example/Basic.vue
+++ b/example/Basic.vue
@@ -34,6 +34,10 @@
             <option :value="4">4</option>
           </select>
         </div>
+        <div>
+          <label>deepCollapseChildren</label>
+          <input v-model="deepCollapseChildren" type="checkbox" />
+        </div>
       </div>
     </div>
     <div class="block">
@@ -41,6 +45,7 @@
       <vue-json-pretty
         :data="state.data"
         :deep="state.deep"
+        :deepCollapseChildren="deepCollapseChildren"
         :show-double-quotes="state.showDoubleQuotes"
         :show-length="state.showLength"
         :show-line="state.showLine"
@@ -96,6 +101,7 @@ export default defineComponent({
       collapsedOnClickBrackets: true,
       useCustomLinkFormatter: false,
       deep: 3,
+      deepCollapseChildren: false,
     });
 
     const customLinkFormatter = (data, key, path, defaultFormatted) => {