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' ...@@ -8,4 +8,8 @@ import Username from '@/components/common/Username'
Vue.component('username', Username) Vue.component('username', Username)
import DangerousButton from '@/components/common/DangerousButton'
Vue.component('dangerous-button', DangerousButton)
export default {} export default {}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div :class="['ui', {'active': show}, 'modal']"> <div :class="['ui', {'active': show}, 'modal']">
<i class="close icon"></i> <i class="close icon"></i>
<slot> <slot>
</slot> </slot>
</div> </div>
</template> </template>
...@@ -19,26 +19,38 @@ export default { ...@@ -19,26 +19,38 @@ export default {
control: null control: null
} }
}, },
mounted () { beforeDestroy () {
this.control = $(this.$el).modal({ if (this.control) {
onApprove: function () { this.control.remove()
this.$emit('approved') }
}.bind(this), },
onDeny: function () { methods: {
this.$emit('deny') initModal () {
}.bind(this), this.control = $(this.$el).modal({
onHidden: function () { duration: 100,
this.$emit('update:show', false) onApprove: function () {
}.bind(this) this.$emit('approved')
}) }.bind(this),
onDeny: function () {
this.$emit('deny')
}.bind(this),
onHidden: function () {
this.$emit('update:show', false)
}.bind(this)
})
}
}, },
watch: { watch: {
show: { show: {
handler (newValue) { handler (newValue) {
if (newValue) { if (newValue) {
this.initModal()
this.control.modal('show') this.control.modal('show')
} else { } else {
this.control.modal('hide') 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