Newer
Older
<div @click="showModal = true" :class="['ui', color, {disabled: disabled}, 'button']" :disabled="disabled">
<slot></slot>
<modal class="small" :show.sync="showModal">
<div class="header">
<translate :translate-context="'Modal/*/Title'">Do you want to confirm this action?</translate>
</div>
<div class="scrolling content">
<div class="description">
<slot name="modal-content"></slot>
</div>
</div>
<div class="actions">
<translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Cancel</translate>
<div :class="['ui', 'confirm', confirmButtonColor, 'button']" @click="confirm">
<translate :translate-context="'Modal/*/Button.Label/Short, Verb'">Confirm</translate>
</div>
</div>
</modal>
</div>
</template>
<script>
import Modal from '@/components/semantic/Modal'
export default {
action: {type: Function, required: false},
color: {type: String, default: 'red'},
confirmColor: {type: String, default: null, required: false}
components: {
Modal
},
data () {
return {
showModal: false
}
},
computed: {
confirmButtonColor () {
if (this.confirmColor) {
return this.confirmColor
}
return this.color
}
},
methods: {
confirm () {
this.showModal = false
this.$emit('confirm')
if (this.action) {
this.action()
}