tyler.durden/cockpit-navigator
1
0
Fork 0
mirror of https://github.com/45Drives/cockpit-navigator.git synced 2025-07-31 01:24:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

slot in footer, emit close

Browse Source
This commit is contained in:
joshuaboud 2022-06-15 17:18:34 -03:00
parent b95e2cb905
commit ae33ae67b0
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
navigator/src/components/ModalPopup.vue
View File

@ -21,7 +21,7 @@ If not, see <https://www.gnu.org/licenses/>.
leave="ease-in duration-500" leave-from="opacity-100" leave-to="opacity-0"> leave="ease-in duration-500" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed z-10 inset-0 bg-neutral-500/75 dark:bg-black/50 transition-opacity" /> <div class="fixed z-10 inset-0 bg-neutral-500/75 dark:bg-black/50 transition-opacity" />
</TransitionChild> </TransitionChild>
<div class="fixed z-10 inset-0 overflow-hidden flex items-end sm:items-center justify-center px-4 pb-20 sm:p-0"> <div @click.self="$emit('close')" class="fixed z-10 inset-0 overflow-hidden flex items-end sm:items-center justify-center px-4 pb-20 sm:p-0">
<TransitionChild as="template" enter="ease-out duration-300" <TransitionChild as="template" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-90" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-90"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-100" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-100"
@ -36,18 +36,23 @@ If not, see <https://www.gnu.org/licenses/>.
<h3 class="text-header">{{ headerText }}</h3> <h3 class="text-header">{{ headerText }}</h3>
</slot> </slot>
</div> </div>
<div class="card-body flex flex-row items-center"> <div class="card-body flex flex-row items-center gap-2">
<slot name="icon" /> <slot name="icon" />
<div class="grow ml-2 only:ml-0 overflow-x-auto"> <div class="grow overflow-x-auto">
<slot /> <slot />
</div> </div>
</div> </div>
<div class="card-footer button-group-row justify-end"> <div class="card-footer button-group-row justify-end">
<button v-if="!noCancel" type="button" class="btn btn-secondary" @click="$emit('cancel')">{{ <slot name="footer">
cancelText <button v-if="!noCancel" type="button" class="btn btn-secondary"
}}</button> @click="$emit('cancel'); $emit('close')">
<button type="button" :class="['btn', applyDangerous ? 'btn-danger' : 'btn-primary']" {{ cancelText }}
@click="$emit('apply')" :disabled="disableContinue">{{ applyText }}</button> </button>
<button type="button" :class="['btn', applyDangerous ? 'btn-danger' : 'btn-primary']"
@click="$emit('apply'); $emit('close')" :disabled="disableContinue">
{{ applyText }}
</button>
</slot>
</div> </div>
</div> </div>
</div> </div>
@ -89,6 +94,7 @@ export default {
emits: [ emits: [
'apply', 'apply',
'cancel', 'cancel',
'close',
] ]
}; };
</script> </script>