heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

enhance(frontend): add withCloseButton option for MkModalWindow

Browse source
This commit is contained in:
syuilo 2024-07-28 10:39:31 +09:00
parent 02ecd1b371
commit 5df85b8be1
1 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/components/MkModalWindow.vue
View file

@ -7,11 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<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 && 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">
@ -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,
@ -51,13 +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 ro = new ResizeObserver((entries, observer) => {
if (rootEl.value == null || headerEl.value == null) return;