natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix??

This commit is contained in:
ThatOneCalculator 2023-02-18 16:16:24 -08:00
parent 3e87ca0e94
commit 7132ad2285
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/components/MkModal.vue
View File

@ -7,9 +7,9 @@
:leave-to-class="$style['transition_' + transitionName + '_leaveTo']" :leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened" :duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
> >
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick"> <div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
<slot :max-height="maxHeight" :type="type"></slot> <slot :max-height="maxHeight" :type="type"></slot>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@ function getFixedContainer(el: Element | null): Element | null {
} }
} }
type ModalTypes = 'popup' | 'dialog' | 'drawer'; type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
manualShowing?: boolean | null; manualShowing?: boolean | null;
@ -194,21 +194,21 @@ const align = () => {
} }
} else { } else {
// 画面から横にはみ出る場合 // 画面から横にはみ出る場合
if (left + width - window.pageXOffset > window.innerWidth) { if (left + width - window.scrollX > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1; left = window.innerWidth - width + window.scrollX - 1;
} }
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset); const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const upperSpace = (srcRect.top - MARGIN); const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合 // 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) { if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') { if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) { if (underSpace >= (upperSpace / 3)) {
maxHeight = underSpace; maxHeight = underSpace;
} else { } else {
maxHeight = upperSpace; maxHeight = upperSpace;
top = window.pageYOffset + ((upperSpace + MARGIN) - height); top = window.scrollY + ((upperSpace + MARGIN) - height);
} }
} else { } else {
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1; top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;

38
packages/client/src/components/MkModalWindow.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')"> <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
<div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown"> <div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div ref="headerEl" class="header"> <div ref="headerEl" class="header">
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ph-x-bold ph-lg"></i></button> <button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ph-x-bold ph-lg"></i></button>
<span class="title"> <span class="title">
<slot name="header"></slot> <slot name="header"></slot>
</span> </span>
<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ph-x-bold ph-lg"></i></button> <button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ph-x-bold ph-lg"></i></button>
<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ph-check-bold ph-lg"></i></button> <button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ph-check-bold ph-lg"></i></button>
</div>
<div class="body">
<slot :width="bodyWidth" :height="bodyHeight"></slot>
</div>
</div> </div>
<div class="body"> </MkModal>
<slot :width="bodyWidth" :height="bodyHeight"></slot>
</div>
</div>
</MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -41,9 +41,9 @@ const emit = defineEmits<{
(event: 'ok'): void; (event: 'ok'): void;
}>(); }>();
let modal = $ref<InstanceType<typeof MkModal>>(); let modal = $shallowRef<InstanceType<typeof MkModal>>();
let rootEl = $ref<HTMLElement>(); let rootEl = $shallowRef<HTMLElement>();
let headerEl = $ref<HTMLElement>(); let headerEl = $shallowRef<HTMLElement>();
let bodyWidth = $ref(0); let bodyWidth = $ref(0);
let bodyHeight = $ref(0); let bodyHeight = $ref(0);
@ -85,12 +85,13 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
.ebkgoccj { .ebkgoccj {
margin: auto;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
container-type: inline-size;
border-radius: var(--radius); border-radius: var(--radius);
transition: all 0.2s;
--root-margin: 24px; --root-margin: 24px;
@ -145,3 +146,4 @@ defineExpose({
} }
} }
</style> </style>