btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: better implimentation for slots

Browse Source
This commit is contained in:
liyasthomas
2021-06-30 14:16:02 +05:30
parent 0dd0d262d6
commit b750ccd46f
46 changed files with 1144 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/smart/ConfirmModal.vue
View File

@@ -1,31 +1,27 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label>{{ title }}</label>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</template>
</SmartModal>
</template>

14
components/smart/Modal.vue
View File

@@ -11,15 +11,21 @@
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
<div class="row-wrapper">
<slot name="header"></slot>
</div>
</div>
<div class="modal-body">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="flex flex-col">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="bottom fade"></div> -->
</div>
</div>
<div v-if="hasFooterSlot" class="modal-footer">
<slot name="footer"></slot>
<div class="row-wrapper">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>