zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix: wrong scrolling behavior in dialog (#313)

Browse source
This commit is contained in:
Ayaka Rizumu 2022-12-04 14:27:08 +08:00 • committed by GitHub
parent aab6eb6752
commit 218aefeec1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/modal/ModalDialog.vue
View file

@ -32,9 +32,6 @@ export interface Props {
* @default false
*/
keepAlive?: boolean
/** customizable class for the div outside of slot */
customClass?: string
}
const props = withDefaults(defineProps<Props>(), {
@ -55,14 +52,12 @@ const deactivated = useDeactivated()
const route = useRoute()
/** scrollable HTML element */
const elDialogScroll = ref<HTMLDivElement>()
const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>()
defineExpose({
elDialogRoot,
elDialogMain,
elDialogScroll,
})
/** close the dialog */
@ -146,25 +141,14 @@ export default {
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container -->
<div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex>
<div class="flex-1 flex items-center justify-center p-4">
<div flex-1 flex items-center justify-center p-4>
<!-- We use `class` here to make v-bind being able to be override them -->
<div
ref="elDialogMain"
class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full flex flex-col"
class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
v-bind="bindTypeToAny($attrs)"
>
<!-- header -->
<slot name="header" />
<!-- main -->
<div
ref="elDialogScroll"
class="overflow-y-auto touch-pan-y touch-pan-x overscroll-none flex-1"
:class="customClass"
>
<slot />
</div>
<!-- footer -->
<slot name="footer" />
<slot />
</div>
</div>
</div>