Skip to content
Permalink
Browse files

feat(MdListItemExpand): reactive expansion (#1435)

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

fix #1425
  • Loading branch information...
VdustR authored and marcosmoura committed Jan 24, 2018
1 parent e4af731 commit 0f7e28f4a9cff167d601aaa329342aaaf508abd3
@@ -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>

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

0 comments on commit 0f7e28f

Please sign in to comment.
You can’t perform that action at this time.