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()
  }
  }
  }