This repository has been archived on 2024-02-08. You can view files and clone it, but cannot push or open issues or pull requests.
frontend/src/components/modal/modal.vue
dpschen 728dfc52e5
Some checks failed
continuous-integration/drone/push Build is failing
feat: close modals with esc key (#741)
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #741
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
2021-09-21 16:37:56 +00:00

56 lines
1.1 KiB
Vue

<template>
<transition name="modal">
<div class="modal-mask has-overflow" :class="{'has-overflow': overflow}">
<div class="modal-container"
@mousedown.self.prevent.stop="$emit('close')"
:class="{'has-overflow': overflow}"
@shortkey="$emit('close')"
v-shortkey="['esc']"
>
<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',
props: {
overflow: {
type: Boolean,
default: false,
},
wide: {
type: Boolean,
default: false,
},
},
}
</script>