Merge pull request #131 from fredrivett/dev

Add deepCollapseChildren prop for allowing deeply collapsed children
leezng · Aug 28, 2021 · 8ab97d6 · 8ab97d6
2 parents 4211a5d + aa79ca5
commit 8ab97d6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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     |

diff --git a/example/Basic.vue b/example/Basic.vue
@@ -34,13 +34,18 @@
             <option :value="4">4</option>
           </select>
         </div>
+        <div>
+          <label>deepCollapseChildren</label>
+          <input v-model="deepCollapseChildren" type="checkbox" />
+        </div>
       </div>
     </div>
     <div class="block">
       <h3>vue-json-pretty:</h3>
       <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) => {

diff --git 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,