feat(MdListItemExpand): reactive expansion (#1435)

new props `md-expanded` with sync to make expansion reactive

fix #1425

Author: VdustR

docs/app/pages/Components/List/examples/ListExpansion.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="full-control">
     <md-list>
-      <md-list-item md-expand>
+      <md-list-item md-expand :md-expanded.sync="expandNews">
         <md-icon>whatshot</md-icon>
         <span class="md-list-item-text">News</span>
 
@@ -40,12 +40,19 @@
         <span class="md-list-item-text">Shop</span>
       </md-list-item>
     </md-list>
+    <md-checkbox v-model="expandNews">Expand News</md-checkbox>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'ListExpansion'
+    name: 'ListExpansion',
+
+    data () {
+      return {
+        expandNews: false
+      }
+    }
   }
 </script>
 

src/components/MdList/MdListItem/MdListItem.vue

@@ -65,7 +65,8 @@
         createElement(listComponent, {
           props,
           scopedSlots: resolveScopedSlot(props, children),
-          staticClass: 'md-list-item-container md-button-clean'
+          staticClass: 'md-list-item-container md-button-clean',
+          on: listeners,
         }, children.default)
       ])
     }

src/components/MdList/MdListItem/MdListItemExpand.vue

@@ -27,6 +27,9 @@
       expandStyles: {},
       showContent: false
     }),
+    props: {
+      mdExpanded: Boolean
+    },
     computed: {
       expandClasses () {
         return {
@@ -45,17 +48,56 @@
 
         return size
       },
-      toggleExpand () {
-        raf(() => {
-          let fullHeight = 0
+      fetchStyle () {
+        return new Promise(resolve => {
+          raf(() => {
+            let fullHeight = 0
 
-          if (!this.showContent) {
-            fullHeight = 'auto' // this.getChildrenSize() + 'px'
-          }
+            if (!this.showContent) {
+              fullHeight = 'auto' // this.getChildrenSize() + 'px'
+            }
 
-          this.expandStyles = { height: fullHeight }
-          this.showContent = !this.showContent
+            this.expandStyles = { height: fullHeight }
+            resolve()
+          })
         })
+      },
+      async toggleExpand () {
+        await this.fetchStyle()
+        this.showContent = !this.showContent
+      },
+      async open () {
+        if (this.showContent) {
+          return false
+        }
+
+        await this.fetchStyle()
+        this.showContent = true
+      },
+      async close () {
+        if (!this.showContent) {
+          return false
+        }
+
+        await this.fetchStyle()
+        this.showContent = false
+      }
+    },
+    watch: {
+      mdExpanded () {
+        if (this.mdExpanded) {
+          this.open()
+        } else {
+          this.close()
+        }
+      },
+      showContent () {
+        this.$emit('update:mdExpanded', this.showContent)
+      }
+    },
+    mounted () {
+      if (this.mdExpanded) {
+        this.open()
       }
     }
   }