Fixed modals not appearing on top

This commit is contained in:
thepaperpilot 2021-06-12 00:41:25 -05:00
parent 7778fc0a6d
commit 8e5c1b457d
5 changed files with 47 additions and 26 deletions

15
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"portal-vue": "^2.1.7",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-frag": "^1.1.5", "vue-frag": "^1.1.5",
"vue-reactive-provide": "^0.3.0", "vue-reactive-provide": "^0.3.0",
@ -9873,6 +9874,14 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"peerDependencies": {
"vue": "^2.5.18"
}
},
"node_modules/portfinder": { "node_modules/portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -22701,6 +22710,12 @@
"ts-pnp": "^1.1.6" "ts-pnp": "^1.1.6"
} }
}, },
"portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"requires": {}
},
"portfinder": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

View file

@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"portal-vue": "^2.1.7",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-frag": "^1.1.5", "vue-frag": "^1.1.5",
"vue-reactive-provide": "^0.3.0", "vue-reactive-provide": "^0.3.0",

View file

@ -3,6 +3,7 @@
<Nav /> <Nav />
<Tabs /> <Tabs />
<TPS v-if="showTPS" /> <TPS v-if="showTPS" />
<portal-target name="modal-root" multiple />
</div> </div>
</template> </template>

View file

@ -67,6 +67,7 @@ import 'vue-transition-expand/dist/vue-transition-expand.css';
import PerfectScrollbar from 'vue2-perfect-scrollbar'; import PerfectScrollbar from 'vue2-perfect-scrollbar';
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'; import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
import VueTextareaAutosize from 'vue-textarea-autosize'; import VueTextareaAutosize from 'vue-textarea-autosize';
import PortalVue from 'portal-vue';
/* features */ /* features */
Vue.component(Achievement.name, Achievement); Vue.component(Achievement.name, Achievement);
@ -130,3 +131,4 @@ Vue.directive('frag', frag);
Vue.use(TransitionExpand); Vue.use(TransitionExpand);
Vue.use(PerfectScrollbar); Vue.use(PerfectScrollbar);
Vue.use(VueTextareaAutosize); Vue.use(VueTextareaAutosize);
Vue.use(PortalVue);

View file

@ -1,4 +1,5 @@
<template> <template>
<portal to="modal-root">
<transition name="modal"> <transition name="modal">
<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')"> <div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
<div class="modal-wrapper"> <div class="modal-wrapper">
@ -29,6 +30,7 @@
</div> </div>
</div> </div>
</transition> </transition>
</portal>
</template> </template>
<script> <script>