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

feat: dialog ui

Browse source
This commit is contained in:
Anthony Fu 2022-12-02 15:27:44 +08:00
parent feb8872f5f
commit 57eef8e77f
9 changed files with 29 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/modal/ModalContainer.vue
View file

@ -9,13 +9,13 @@ import {
</script>
<template>
<ModalDialog v-model="isSigninDialogOpen" py-6 px-3 sm-px-6>
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
<UserSignIn />
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen">
<HelpPreview @close="closePreviewHelp()" />
</ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180>
<ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
<PublishWidget :draft-key="dialogDraftKey" expanded />
</ModalDialog>
<ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none>

17
components/modal/ModalDialog.vue
View file

@ -32,13 +32,13 @@ export interface Props {
* keep the dialog opened even when in other views
*
* @default false
*
*/
*/
keepAlive?: boolean
/** customizable class for the div outside of slot */
customClass?: string
}
const props = withDefaults(defineProps<Props>(), {
zIndex: 100,
closeByMask: true,
@ -144,7 +144,8 @@ export default {
:style="{
'z-index': zIndex,
}"
class="scrollbar-hide" fixed inset-0 overflow-y-auto overscroll-none
class="scrollbar-hide"
fixed inset-0 overflow-y-auto overscroll-none
>
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
@ -159,13 +160,19 @@ export default {
<!-- Dialog it self -->
<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"
rounded shadow-lg pointer-events-auto isolate bg-base
border="~ base" max-h-full flex flex-col
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">
<div
ref="elDialogScroll"
overflow-y-auto touch-pan-y touch-pan-x overscroll-none
:class="customClass"
>
<slot />
</div>
<!-- footer -->