1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

refactor: teleport for modals

This commit is contained in:
2022-04-25 13:45:07 +02:00
parent 6780401cb7
commit 8b04a2b7dd
18 changed files with 1364 additions and 1340 deletions

View File

@@ -1,45 +1,47 @@
<template>
<div class="modal active" :class="modalSizeClass">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header pl-2">
<div class="modal-title h6">
<slot name="header" />
<Teleport to="#window-content">
<div class="modal active" :class="modalSizeClass">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header pl-2">
<div class="modal-title h6">
<slot name="header" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
<div v-if="hasDefault" class="modal-header">
<div class="modal-title h6">
<slot />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<a class="btn btn-clear float-right" @click="hideModal" />
</div>
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
<div v-if="hasBody" class="modal-body">
<a
v-if="!hasHeader && !hasDefault"
class="btn btn-clear float-right"
@click="hideModal"
/>
<div class="content">
<slot name="body" />
</div>
</div>
<div v-if="!hideFooter" class="modal-footer pt-0">
<button
class="btn btn-primary mr-2"
@click.stop="confirmModal"
>
{{ confirmText || $t('word.confirm') }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
{{ cancelText || $t('word.cancel') }}
</button>
</div>
</div>
<div v-if="!hideFooter" class="modal-footer">
<button
class="btn btn-primary mr-2"
@click.stop="confirmModal"
>
{{ confirmText || $t('word.confirm') }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
{{ cancelText || $t('word.cancel') }}
</button>
</div>
</div>
</div>
</Teleport>
</template>
<script>