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>