Verified Commit 32dc18ed authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Added dangerous-button component, smarter modal

parent 16f631af
<template>
<div @click="showModal = true" class="ui red button">
<slot></slot>
<modal class="small" :show.sync="showModal">
<div class="header">
<slot name="modal-header">Do you want to confirm this action?</slot>
</div>
<div class="scrolling content">
<div class="description">
<slot name="modal-content"></slot>
</div>
</div>
<div class="actions">
<div class="ui cancel button">Cancel</div>
<div class="ui confirm red button" @click="confirm">
<slot name="modal-confirm">Confirm</slot>
</div>
</div>
</modal>
</div>
</template>
<script>
import Modal from '@/components/semantic/Modal'
export default {
props: ['action'],
components: {
Modal
},
data () {
return {
showModal: false
}
},
methods: {
confirm () {
this.showModal = false
this.action()
}
}
}
</script>
......@@ -8,4 +8,8 @@ import Username from '@/components/common/Username'
Vue.component('username', Username)
import DangerousButton from '@/components/common/DangerousButton'
Vue.component('dangerous-button', DangerousButton)
export default {}
......@@ -19,8 +19,15 @@ export default {
control: null
}
},
mounted () {
beforeDestroy () {
if (this.control) {
this.control.remove()
}
},
methods: {
initModal () {
this.control = $(this.$el).modal({
duration: 100,
onApprove: function () {
this.$emit('approved')
}.bind(this),
......@@ -31,14 +38,19 @@ export default {
this.$emit('update:show', false)
}.bind(this)
})
}
},
watch: {
show: {
handler (newValue) {
if (newValue) {
this.initModal()
this.control.modal('show')
} else {
if (this.control) {
this.control.modal('hide')
this.control.remove()
}
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment