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

refactor: improve dialogs

zio/stable
Anthony Fu 2022-11-27 09:52:46 +08:00
parent ca016cc6a3
commit 33268b1f70
5 changed files with 131 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/modal/ModalContainer.vue
View File

@ -1,11 +1,18 @@
<script setup lang="ts">
import { isEditHistoryDialogOpen, isImagePreviewDialogOpen, isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
import {
isEditHistoryDialogOpen,
isImagePreviewDialogOpen,
isPreviewHelpOpen,
isPublishDialogOpen,
isSigninDialogOpen,
isUserSwitcherOpen,
} from '~/composables/dialog'
</script>
<template>
<ModalDrawer v-model="isUserSwitcherOpen" direction="right">
<ModalDialog v-model="isUserSwitcherOpen" type="right">
<UserSwitcher min-w-100 />
</ModalDrawer>
</ModalDialog>
<ModalDialog v-model="isSigninDialogOpen">
<UserSignIn m6 />
</ModalDialog>

78
components/modal/ModalDialog.vue
View File

@ -1,8 +1,60 @@
<script setup lang='ts'>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog'
const {
type = 'dialog',
} = defineProps<{
type?: DialogType
}>()
const { modelValue } = defineModel<{
modelValue: boolean
}>()
const positionClass = computed(() => {
switch (type) {
case 'dialog':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
default:
return ''
}
})
const transform = computed(() => {
switch (type) {
case 'bottom':
return 'translateY(100%)'
case 'top':
return 'translateY(-100%)'
case 'left':
return 'translateX(-100%)'
case 'right':
return 'translateX(100%)'
default:
return ''
}
})
const target = ref<HTMLElement | null>(null)
const { activate, deactivate } = useFocusTrap(target)
watchEffect(() => {
if (modelValue)
activate()
else
deactivate()
})
let init = $ref(modelValue)
watchOnce(modelValue, () => {
init = true
@ -11,35 +63,21 @@ watchOnce(modelValue, () => {
<template>
<div
class="fixed top-0 bottom-0 left-0 right-0 z-60 overscroll-none overflow-y-scroll scrollbar-hide"
fixed top-0 bottom-0 left-0 right-0 z-40
:class="modelValue ? '' : 'pointer-events-none'"
>
<div
class="
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
h-[calc(100%+0.5px)]
"
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
:class="modelValue ? 'opacity-85' : 'opacity-0'"
@click="modelValue = false"
/>
<div
class="
bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
border border-base top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
"
:class="modelValue ? 'opacity-100' : 'opacity-0'"
ref="target" bg-base border-base absolute transition-all duration-200
ease-out
:class="positionClass"
:style="modelValue ? {} : { transform }"
>
<slot v-if="init" />
</div>
</div>
</template>
<style socped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>

66
components/modal/ModalDrawer.vue
View File

@ -1,66 +0,0 @@
<script setup lang='ts'>
const {
direction = 'bottom',
} = defineProps<{
direction?: string
}>()
const { modelValue } = defineModel<{
modelValue: boolean
}>()
const positionClass = computed(() => {
switch (direction) {
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
default:
return ''
}
})
const transform = computed(() => {
switch (direction) {
case 'bottom':
return 'translateY(100%)'
case 'top':
return 'translateY(-100%)'
case 'left':
return 'translateX(-100%)'
case 'right':
return 'translateX(100%)'
default:
return ''
}
})
let init = $ref(modelValue)
watchOnce(modelValue, () => {
init = true
})
</script>
<template>
<div
fixed top-0 bottom-0 left-0 right-0 z-40
:class="modelValue ? '' : 'pointer-events-none'"
>
<div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
:class="modelValue ? 'opacity-85' : 'opacity-0'"
@click="modelValue = false"
/>
<div
bg-base border-base absolute transition-all duration-200 ease-out
:class="positionClass"
:style="modelValue ? {} : { transform }"
>
<slot v-if="init" />
</div>
</div>
</template>

2
package.json
View File

@ -40,12 +40,14 @@
"@unocss/nuxt": "^0.46.5",
"@vitejs/plugin-vue": "^3.2.0",
"@vue-macros/nuxt": "^0.1.2",
"@vueuse/integrations": "^9.6.0",
"@vueuse/nuxt": "^9.6.0",
"blurhash": "^2.0.4",
"browser-fs-access": "^0.31.1",
"eslint": "^8.28.0",
"esno": "^0.16.3",
"floating-vue": "2.0.0-beta.20",
"focus-trap": "^7.1.0",
"form-data": "^4.0.0",
"fs-extra": "^10.1.0",
"js-yaml": "^4.1.0",

61
pnpm-lock.yaml
View File

@ -25,12 +25,14 @@ specifiers:
'@unocss/nuxt': ^0.46.5
'@vitejs/plugin-vue': ^3.2.0
'@vue-macros/nuxt': ^0.1.2
'@vueuse/integrations': ^9.6.0
'@vueuse/nuxt': ^9.6.0
blurhash: ^2.0.4
browser-fs-access: ^0.31.1
eslint: ^8.28.0
esno: ^0.16.3
floating-vue: 2.0.0-beta.20
focus-trap: ^7.1.0
form-data: ^4.0.0
fs-extra: ^10.1.0
js-yaml: ^4.1.0
@ -80,12 +82,14 @@ devDependencies:
'@unocss/nuxt': 0.46.5
'@vitejs/plugin-vue': 3.2.0
'@vue-macros/nuxt': 0.1.2_nuxt@3.0.0
'@vueuse/integrations': 9.6.0_focus-trap@7.1.0
'@vueuse/nuxt': 9.6.0_nuxt@3.0.0
blurhash: 2.0.4
browser-fs-access: 0.31.1
eslint: 8.28.0
esno: 0.16.3
floating-vue: 2.0.0-beta.20
focus-trap: 7.1.0
form-data: 4.0.0
fs-extra: 10.1.0
js-yaml: 4.1.0
@ -2199,6 +2203,53 @@ packages:
vue: 3.2.45
dev: true
/@vueuse/integrations/9.6.0_focus-trap@7.1.0:
resolution: {integrity: sha512-+rs2OWY/3spxoAGQMnlHQpxf8ErAYf4D1bT0aXaPnxphmtYgexm6KIjTFpBbcQnHwVi1g2ET1SJoQL16yDrgWA==}
peerDependencies:
async-validator: '*'
axios: '*'
change-case: '*'
drauu: '*'
focus-trap: '*'
fuse.js: '*'
idb-keyval: '*'
jwt-decode: '*'
nprogress: '*'
qrcode: '*'
universal-cookie: '*'
peerDependenciesMeta:
async-validator:
optional: true
axios:
optional: true
change-case:
optional: true
drauu:
optional: true
focus-trap:
optional: true
fuse.js:
optional: true
idb-keyval:
optional: true
jwt-decode:
optional: true
nprogress:
optional: true
qrcode:
optional: true
universal-cookie:
optional: true
dependencies:
'@vueuse/core': 9.6.0
'@vueuse/shared': 9.6.0
focus-trap: 7.1.0
vue-demi: 0.13.11
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: true
/@vueuse/metadata/9.6.0:
resolution: {integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==}
dev: true
@ -4105,6 +4156,12 @@ packages:
vue-resize: 2.0.0-alpha.1
dev: true
/focus-trap/7.1.0:
resolution: {integrity: sha512-CuJvwUBfJCWcU6fc4xr3UwMF5vWnox4isXAixCwrPzCsPKOQjP9T+nTlYT2t+vOmQL8MOQ16eim99XhjQHAuiQ==}
dependencies:
tabbable: 6.0.1
dev: true
/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
@ -7037,6 +7094,10 @@ packages:
stable: 0.1.8
dev: true
/tabbable/6.0.1:
resolution: {integrity: sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==}
dev: true
/tapable/1.1.3:
resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
engines: {node: '>=6'}