enh(data-iterable): added synced expanded prop

allows one to modify expansion outside of data-iterable components closes #2890
vuetifyjs · May 19, 2018 · ca56a29 · ca56a29
1 parent a11be7a
commit ca56a29
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/src/mixins/data-iterable.js b/src/mixins/data-iterable.js
@@ -31,7 +31,7 @@ export default {
         sortBy: null,
         totalItems: 0
       },
-      expanded: {},
+      expandedKeys: {},
       actionsClasses: 'v-data-iterator__actions',
       actionsRangeControlsClasses: 'v-data-iterator__actions__range-controls',
       actionsSelectClasses: 'v-data-iterator__actions__select',
@@ -151,6 +151,10 @@ export default {
     pagination: {
       type: Object,
       default: () => {}
+    },
+    expanded: {
+      type: Array,
+      default: () => ([])
     }
   },
 
@@ -222,7 +226,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: {
@@ -254,7 +265,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
@@ -327,18 +338,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]]))
         }
       })