Skip to content
This repository has been archived by the owner on Nov 30, 2020. It is now read-only.

Commit

Permalink
fix(icon-button): Use computed properties for slot toggling
Browse files Browse the repository at this point in the history
  • Loading branch information
matsp committed Jul 1, 2018
1 parent 6cd7362 commit 7aeccfa
Showing 1 changed file with 15 additions and 16 deletions.
31 changes: 15 additions & 16 deletions components/icon-button/IconButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
@MDCIconButtonToggle:change="$emit('change', $event.detail.isOn)">
<slot v-if="isIconButton"/>
<slot
v-else-if="isToggleButtonViaSlots && !value"
v-if="isToggleButtonViaSlots && !value"
name="toggleOn"/>
<slot
v-else-if="isToggleButtonViaSlots && value"
v-if="isToggleButtonViaSlots && value"
name="toggleOff"/>
</button>
</template>
Expand Down Expand Up @@ -69,6 +69,17 @@ export default {
slotObserver: undefined
}
},
computed: {
isToggleButtonViaSlots () {
return this.$slots.toggleOn && this.$slots.toggleOff && !this.isIconButton
},
isIconButton () {
return this.$slots.default
},
isToggleButton () {
return this.toggleOnContent !== '' && this.toggleOffContent !== ''
}
},
watch: {
value (value) {
if (typeof this.mdcIconButtonToggle !== 'undefined') {
Expand All @@ -94,26 +105,14 @@ export default {
},
methods: {
update () {
if ((this.isToggleButton() || this.isToggleButtonViaSlots()) && typeof this.mdcIconButtonToggle === 'undefined') {
if ((this.isToggleButton || this.isToggleButtonViaSlots) && typeof this.mdcIconButtonToggle === 'undefined') {
this.mdcIconButtonToggle = MDCIconButtonToggle.attachTo(this.$el)
this.mdcIconButtonToggle.on = this.value
}
if (this.isIconButton() && typeof this.mdcRipple === 'undefined') {
if (this.isIconButton && typeof this.mdcRipple === 'undefined') {
this.mdcRipple = MDCRipple.attachTo(this.$el)
this.mdcRipple.unbounded = true
}
},
isIconButton () {
return this.$slots.default
},
isToggleButton () {
return this.toggleOnContent !== '' && this.toggleOffContent !== ''
},
isToggleButtonViaSlots () {
return this.toggleOnContent === '' &&
this.toggleOffContent === '' &&
this.$slots.toggleOn &&
this.$slots.toggleOff
}
}
}
Expand Down

0 comments on commit 7aeccfa

Please sign in to comment.