vikunja-frontend/src/components/modal/modal.vue
konrad ddadd89c64 Move all create views to better looking popups (#383)
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/383
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
2021-01-21 22:33:16 +00:00

54 lines
1 KiB
Vue

<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-container" @click.self.prevent.stop="$emit('close')">
<div class="modal-content" :class="{'has-overflow': overflow}">
<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"
>
Cancel
</x-button>
<x-button
@click="$emit('submit')"
type="primary"
:shadow="false"
>
Do it!
</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,
},
},
}
</script>