profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Fixed modals not appearing on top

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

1
src/App.vue
View file

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

2
src/components/index.js
View file

@ -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);

54
src/components/system/Modal.vue
View file

@ -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>