enh(data-iterable): added synced expanded prop

allows one to modify expansion outside of data-iterable components closes #2890
vuetifyjs · Jul 9, 2018 · 2e64ad4 · 2e64ad4
1 parent 0e7e0bc
commit 2e64ad4
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/src/mixins/data-iterable.js b/src/mixins/data-iterable.js
@@ -137,6 +137,10 @@ export default {
     pagination: {
       type: Object,
       default: () => {}
+    },
+    expanded: {
+      type: Array,
+      default: () => ([])
     }
   },
 
@@ -233,7 +237,14 @@ export default {
       })
     },
     'computedPagination.sortBy': 'resetPagination',
-    'computedPagination.descending': 'resetPagination'
+    'computedPagination.descending': 'resetPagination',
+    expanded (items) {
+      this.expandedKeys = {}
+      const keys = items.map(item => item[this.itemKey])
+      for (let i = 0; i < keys.length; i++) {
+        this.$set(this.expandedKeys, keys[i], true)
+      }
+    }
   },
 
   methods: {
@@ -265,7 +276,7 @@ export default {
       return this.selected[getObjectValueByPath(item, this.itemKey)]
     },
     isExpanded (item) {
-      return this.expanded[getObjectValueByPath(item, this.itemKey)]
+      return this.expandedKeys[getObjectValueByPath(item, this.itemKey)]
     },
     filteredItemsImpl (...additionalFilterArgs) {
       if (this.totalItems) return this.items
@@ -338,18 +349,20 @@ export default {
       })
 
       Object.defineProperty(props, 'expanded', {
-        get: () => this.expanded[itemKey],
+        get: () => this.expandedKeys[itemKey],
         set: value => {
           if (itemKey == null) {
             consoleWarn(`"${keyProp}" attribute must be defined for item`, this)
           }
 
           if (!this.expand) {
-            for (const key in this.expanded) {
-              this.expanded.hasOwnProperty(key) && this.$set(this.expanded, key, false)
+            for (const key in this.expandedKeys) {
+              this.expandedKeys.hasOwnProperty(key) && this.$set(this.expandedKeys, key, false)
             }
           }
-          this.$set(this.expanded, itemKey, value)
+          this.$set(this.expandedKeys, itemKey, value)
+
+          this.$emit('update:expanded', this.items.filter(item => this.expandedKeys[item[this.itemKey]]))
         }
       })