diff options
Diffstat (limited to 'packages/frontend/src/components/MkModalWindow.vue')
| -rw-r--r-- | packages/frontend/src/components/MkModalWindow.vue | 29 |
1 files changed, 12 insertions, 17 deletions
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue index d3657afa94..c3c7812036 100644 --- a/packages/frontend/src/components/MkModalWindow.vue +++ b/packages/frontend/src/components/MkModalWindow.vue @@ -4,15 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="$emit('closed')"> - <div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown"> +<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')"> + <div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }"> <div ref="headerEl" :class="$style.header"> - <button v-if="withOkButton" :class="$style.headerButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button> + <button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button> <span :class="$style.title"> <slot name="header"></slot> </span> - <button v-if="!withOkButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button> - <button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button> + <button v-if="!withOkButton && withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button> + <button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button> </div> <div :class="$style.body"> <slot :width="bodyWidth" :height="bodyHeight"></slot> @@ -27,11 +27,13 @@ import MkModal from './MkModal.vue'; const props = withDefaults(defineProps<{ withOkButton: boolean; + withCloseButton: boolean; okButtonDisabled: boolean; width: number; height: number; }>(), { withOkButton: false, + withCloseButton: true, okButtonDisabled: false, width: 400, height: 500, @@ -42,6 +44,7 @@ const emit = defineEmits<{ (event: 'close'): void; (event: 'closed'): void; (event: 'ok'): void; + (event: 'esc'): void; }>(); const modal = shallowRef<InstanceType<typeof MkModal>>(); @@ -50,21 +53,13 @@ const headerEl = shallowRef<HTMLElement>(); const bodyWidth = ref(0); const bodyHeight = ref(0); -const close = () => { +function close() { modal.value?.close(); -}; +} -const onBgClick = () => { +function onBgClick() { emit('click'); -}; - -const onKeydown = (evt) => { - if (evt.which === 27) { // Esc - evt.preventDefault(); - evt.stopPropagation(); - close(); - } -}; +} const ro = new ResizeObserver((entries, observer) => { if (rootEl.value == null || headerEl.value == null) return; |