amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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
Show Stats 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')"> <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="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
<div ref="headerEl" :class="$style.header"> <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"> <span :class="$style.title">
<slot name="header"></slot> <slot name="header"></slot>
</span> </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> <button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button>
</div> </div>
<div :class="$style.body"> <div :class="$style.body">
@ -27,11 +27,13 @@ import MkModal from './MkModal.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
withOkButton: boolean; withOkButton: boolean;
withCloseButton: boolean;
okButtonDisabled: boolean; okButtonDisabled: boolean;
width: number; width: number;
height: number; height: number;
}>(), { }>(), {
withOkButton: false, withOkButton: false,
withCloseButton: true,
okButtonDisabled: false, okButtonDisabled: false,
width: 400, width: 400,
height: 500, height: 500,
@ -51,13 +53,13 @@ const headerEl = shallowRef<HTMLElement>();
const bodyWidth = ref(0); const bodyWidth = ref(0);
const bodyHeight = ref(0); const bodyHeight = ref(0);
const close = () => { function close() {
modal.value?.close(); modal.value?.close();
}; }
const onBgClick = () => { function onBgClick() {
emit('click'); emit('click');
}; }
const ro = new ResizeObserver((entries, observer) => { const ro = new ResizeObserver((entries, observer) => {
if (rootEl.value == null || headerEl.value == null) return; if (rootEl.value == null || headerEl.value == null) return;