From 8e5c1b457d0e3555770df8219e04e5635f3fbc49 Mon Sep 17 00:00:00 2001 From: thepaperpilot <thepaperpilot@gmail.com> Date: Sat, 12 Jun 2021 00:41:25 -0500 Subject: [PATCH] Fixed modals not appearing on top --- package-lock.json | 15 +++++++++ package.json | 1 + src/App.vue | 1 + src/components/index.js | 2 ++ src/components/system/Modal.vue | 54 +++++++++++++++++---------------- 5 files changed, 47 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index 48c1066..385729e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "core-js": "^3.6.5", + "portal-vue": "^2.1.7", "vue": "^2.6.11", "vue-frag": "^1.1.5", "vue-reactive-provide": "^0.3.0", @@ -9873,6 +9874,14 @@ "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": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -22701,6 +22710,12 @@ "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": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", diff --git a/package.json b/package.json index 5cbe496..aa9e473 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "core-js": "^3.6.5", + "portal-vue": "^2.1.7", "vue": "^2.6.11", "vue-frag": "^1.1.5", "vue-reactive-provide": "^0.3.0", diff --git a/src/App.vue b/src/App.vue index dce8b79..d47eb4b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ <Nav /> <Tabs /> <TPS v-if="showTPS" /> + <portal-target name="modal-root" multiple /> </div> </template> diff --git a/src/components/index.js b/src/components/index.js index deafa8f..d2349b2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -67,6 +67,7 @@ import 'vue-transition-expand/dist/vue-transition-expand.css'; import PerfectScrollbar from 'vue2-perfect-scrollbar'; import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'; import VueTextareaAutosize from 'vue-textarea-autosize'; +import PortalVue from 'portal-vue'; /* features */ Vue.component(Achievement.name, Achievement); @@ -130,3 +131,4 @@ Vue.directive('frag', frag); Vue.use(TransitionExpand); Vue.use(PerfectScrollbar); Vue.use(VueTextareaAutosize); +Vue.use(PortalVue); diff --git a/src/components/system/Modal.vue b/src/components/system/Modal.vue index b77a633..7434f7c 100644 --- a/src/components/system/Modal.vue +++ b/src/components/system/Modal.vue @@ -1,34 +1,36 @@ <template> - <transition name="modal"> - <div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')"> - <div class="modal-wrapper"> - <div class="modal-container"> - <div class="modal-header"> - <slot name="header"> - default header - </slot> - </div> - <perfect-scrollbar class="modal-body"> - <branches> - <slot name="body"> - default body + <portal to="modal-root"> + <transition name="modal"> + <div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')"> + <div class="modal-wrapper"> + <div class="modal-container"> + <div class="modal-header"> + <slot name="header"> + default header </slot> - </branches> - </perfect-scrollbar> - <div class="modal-footer"> - <slot name="footer"> - <div class="modal-default-footer"> - <div class="modal-default-flex-grow"></div> - <button class="button modal-default-button" @click="$emit('close')"> - Close - </button> - </div> - </slot> + </div> + <perfect-scrollbar class="modal-body"> + <branches> + <slot name="body"> + default body + </slot> + </branches> + </perfect-scrollbar> + <div class="modal-footer"> + <slot name="footer"> + <div class="modal-default-footer"> + <div class="modal-default-flex-grow"></div> + <button class="button modal-default-button" @click="$emit('close')"> + Close + </button> + </div> + </slot> + </div> </div> </div> </div> - </div> - </transition> + </transition> + </portal> </template> <script>