Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

fixed showing spinner in tt-modal

Browse Source
This commit is contained in:
Luca Haid
2025-03-12 11:52:19 +01:00
parent af8573c929
commit 839b3843f4
1 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/plugins/vue/tt-components/tt-modal.js
+39 -33
View File
@@ -1,12 +1,12 @@
Vue.component('tt-modal', { Vue.component('tt-modal', {
props: { props: {
show: {type: Boolean, default: false}, show: {type: Boolean, default: false},
title: {type: String, default: 'Überschrift'}, title: {type: String, default: 'Überschrift'},
delete: {type: Boolean, default: true}, delete: {type: Boolean, default: true},
deleteText: {type: String, default: 'Löschen'}, deleteText: {type: String, default: 'Löschen'},
save: {type: Boolean, default: true}, save: {type: Boolean, default: true},
saveLoading: {type: Boolean, default: false}, saveLoading: {type: Boolean, default: false},
saveText: {type: String, default: 'Speichern'}, saveText: {type: String, default: 'Speichern'},
}, watch: { }, watch: {
show(newVal) { show(newVal) {
if (!newVal) { if (!newVal) {
@@ -50,35 +50,41 @@ Vue.component('tt-modal', {
return {window: window, isMobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) !== null} return {window: window, isMobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) !== null}
}, },
//language=Vue //language=Vue
template: ` template: `
<div class="modal show d-block" <div class="modal show d-block"
role="dialog" role="dialog"
tabindex="-1" tabindex="-1"
style="background: rgba(0, 0, 0, 0.5);" style="background: rgba(0, 0, 0, 0.5);"
ref="modal" ref="modal"
@keydown.esc="$emit('update:show', false)" @keydown.esc="$emit('update:show', false)"
v-if="show"> v-if="show">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document" @mousedown.stop> <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document" @mousedown.stop>
<div class="modal-content" style="min-height: 45vh;"> <div class="modal-content" style="min-height: 45vh;">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">{{title}}</h5> <h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" @click="$emit('update:show', false)"> <button type="button" class="close" @click="$emit('update:show', false)">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="footer">
<slot name="footer-prepend"></slot>
<button v-if="save" class="btn btn-primary position-relative" @click="$emit('submit')" :disabled="saveLoading">
<span v-if="!saveLoading">{{ saveText }}</span>
<span v-if="saveLoading" class="top-50 start-50 translate-middle">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</span>
</button> </button>
</div> <button v-if="$props.delete" class="btn btn-danger" @click="$emit('delete')">{{deleteText}}</button>
<div class="modal-body"> <button class="btn btn-secondary" @click="$emit('update:show', false)">Schließen</button>
<slot></slot> </slot>
</div>
<div class="modal-footer">
<slot name="footer">
<slot name="footer-prepend"></slot>
<button v-if="save" class="btn btn-primary" @click="$emit('submit')">{{saveText}}</button>
<button v-if="$props.delete" class="btn btn-danger" @click="$emit('delete')">{{deleteText}}</button>
<button class="btn btn-secondary" @click="$emit('update:show', false)">Schließen</button>
</slot>
</div>
</div> </div>
</div> </div>
</div> </div>
` </div>
`
}) })