vikunja-frontend/src/components/modal/modal.vue
konrad f0498fd767 Add translations (#562)
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/562
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
2021-06-23 23:24:57 +00:00

58 lines
1.2 KiB
Vue

<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-container" @mousedown.self.prevent.stop="$emit('close')">
<div class="modal-content" :class="{'has-overflow': overflow, 'is-wide': wide}">
<slot>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="text"></slot>
</div>
<div class="actions">
<x-button
@click="$emit('close')"
type="tertary"
class="has-text-danger"
>
{{ $t('misc.cancel') }}
</x-button>
<x-button
@click="$emit('submit')"
type="primary"
:shadow="false"
>
{{ $t('misc.doit') }}
</x-button>
</div>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'modal',
mounted: function () {
document.addEventListener('keydown', (e) => {
// Close the model when escape is pressed
if (e.keyCode === 27) {
this.$emit('close')
}
})
},
props: {
overflow: {
type: Boolean,
default: false,
},
wide: {
type: Boolean,
default: false,
},
},
}
</script>