teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: use teleport for dialog instead of high z-index (#168)

Browse source
This commit is contained in:
Guillaume Chau 2022-11-27 13:29:10 +01:00 committed by GitHub
parent 74e48ad99e
commit 7cfbbb8813
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app.vue
View file

@ -19,6 +19,9 @@ isDark.value
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<TeleportTarget
id="teleport-end"
/>
</template>
<style>

42
components/modal/ModalDialog.vue
View file

@ -96,29 +96,31 @@ function onTransitionEnd() {
</script>
<template>
<div
v-if="isVisible"
class="scrollbar-hide"
fixed top-0 bottom-0 left-0 right-0 z-20000 overscroll-none overflow-y-scroll
:class="modelValue ? '' : 'pointer-events-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. -->
<SafeTeleport to="#teleport-end">
<div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
h="[calc(100%+0.5px)]"
:class="isOut ? 'opacity-0' : 'opacity-85'"
@click="close"
/>
<div
ref="target"
bg-base border-base absolute transition-all duration-200 ease-out transform
:class="`${positionClass} ${transformClass}`"
@transitionend="onTransitionEnd"
v-if="isVisible"
class="scrollbar-hide"
fixed top-0 bottom-0 left-0 right-0 z-10 overscroll-none overflow-y-scroll
:class="modelValue ? '' : 'pointer-events-none'"
>
<slot />
<!-- 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. -->
<div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
h="[calc(100%+0.5px)]"
:class="isOut ? 'opacity-0' : 'opacity-85'"
@click="close"
/>
<div
ref="target"
bg-base border-base absolute transition-all duration-200 ease-out transform
:class="`${positionClass} ${transformClass}`"
@transitionend="onTransitionEnd"
>
<slot />
</div>
</div>
</div>
</SafeTeleport>
</template>
<style socped>

3
package.json
View file

@ -65,7 +65,8 @@
"ufo": "^1.0.0",
"unplugin-auto-import": "^0.12.0",
"vite-plugin-inspect": "^0.7.9",
"vitest": "^0.25.3"
"vitest": "^0.25.3",
"vue-safe-teleport": "^0.1.1"
},
"dependencies": {
"vue-virtual-scroller": "2.0.0-beta.3"

6
plugins/vue-safe-teleport.ts Normal file
View file

@ -0,0 +1,6 @@
import VueSafeTeleport from 'vue-safe-teleport'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSafeTeleport)
})

8
pnpm-lock.yaml
View file

@ -51,6 +51,7 @@ specifiers:
unplugin-auto-import: ^0.12.0
vite-plugin-inspect: ^0.7.9
vitest: ^0.25.3
vue-safe-teleport: ^0.1.1
vue-virtual-scroller: 2.0.0-beta.3
dependencies:
@ -107,6 +108,7 @@ devDependencies:
unplugin-auto-import: 0.12.0
vite-plugin-inspect: 0.7.9
vitest: 0.25.3
vue-safe-teleport: 0.1.1
packages:
@ -7883,6 +7885,12 @@ packages:
vue: 3.2.45
dev: true
/vue-safe-teleport/0.1.1:
resolution: {integrity: sha512-fHA4mod2oF7am2yEUtT0CsxAwfNBt6hWuYTVWzGxrY8vzxxgHMFnPjdZTKl01qGcKEMYYO38LmWizL7oGMVPGw==}
peerDependencies:
vue: ^3.2.0
dev: true
/vue-virtual-scroller/2.0.0-beta.3:
resolution: {integrity: sha512-k0hTAkZRmm3TXpfhW5Ig1fd8VV7+CmgnkebbQ4Uw6wnuQF52YJoaMQTFD3IV/Qi2WNadDB4ETrLUbVdnWboSjg==}
peerDependencies: