You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
4.5 KiB
116 lines
4.5 KiB
@props([
|
|
'title' => '',
|
|
'id' => 'modal',
|
|
'size' => '',
|
|
'footerSlot' => null,
|
|
'header' => null,
|
|
'tabindex' => -1,
|
|
'form' => false,
|
|
'loadingState' => false,
|
|
'livewire' => false,
|
|
])
|
|
|
|
<div
|
|
{{
|
|
$attributes->except(['wire:target', 'wire:loading'])->merge([
|
|
'class' => 'modal fade',
|
|
'tabindex' => $tabindex,
|
|
'id' => $id,
|
|
'aria-labelledby' => str($title ?? $id)->snake().'Label',
|
|
'aria-hidden' => true,
|
|
'x-ref' => $attributes->has('x-data') ? $id : false,
|
|
'wire:ignore.self' => true,
|
|
])
|
|
}}
|
|
@if ($livewire)
|
|
x-init="
|
|
$bs.modal.on('shown', (e) => {
|
|
let id = e?.relatedTarget?.dataset?.id;
|
|
if (id) $wire.show(id);
|
|
});
|
|
|
|
$bs.modal.on('hide', () => {
|
|
console.log('hide');
|
|
$wire.hide();
|
|
});
|
|
"
|
|
x-on:hide-{{ $id }}.window="$bs.modal.instance($el).hide();"
|
|
@endif
|
|
>
|
|
<div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down {{ $size }}">
|
|
@if ($form)
|
|
<form
|
|
@if ($attributes->has('x-on:submit')) x-on:submit="{{ $attributes->get('x-on:submit') }}" @endif
|
|
@if ($attributes->has('wire:submit')) wire:submit.prevent="{{ $attributes->get('wire:submit') }}" @endif
|
|
>
|
|
@endif
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
@if ($header)
|
|
{{ $header }}
|
|
@else
|
|
<h5 class="modal-title">{{ $title ?? '-' }}</h5>
|
|
@endif
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-coreui-dismiss="modal"
|
|
@if ($loadingState) x-bind:disabled="{{ $loadingState }}" @endif
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body position-relative">
|
|
{{-- Alpine Loading State --}}
|
|
@if ($loadingState)
|
|
<div
|
|
x-show="{{ $loadingState }}"
|
|
x-cloak
|
|
x-transition.opacity
|
|
class="position-absolute bg-body bg-opacity-75 start-0 top-0 h-100 w-100"
|
|
style="z-index: 1060; border-radius: inherit; display: none"
|
|
>
|
|
<div class="d-flex align-items-center justify-content-center h-100 text-center">
|
|
<div>
|
|
<div
|
|
class="spinner-border text-primary mb-2 border-4"
|
|
style="width: 3rem; height: 3rem"
|
|
role="status"
|
|
></div>
|
|
<p class="text-body fw-bold mb-0">{{ __('ui/common.loading') }}...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Livewire Loading State --}}
|
|
@if ($attributes->has('wire:loading'))
|
|
<div
|
|
wire:loading
|
|
x-cloak
|
|
@if ($attributes->has('wire:target')) wire:target="{{ $attributes->get('wire:target') }}" @endif
|
|
x-transition.opacity
|
|
class="position-absolute bg-body bg-opacity-75 start-0 top-0 h-100 w-100"
|
|
style="z-index: 1060; border-radius: inherit; display: none"
|
|
>
|
|
<div class="d-flex align-items-center justify-content-center h-100 text-center">
|
|
<div>
|
|
<div
|
|
class="spinner-border text-primary mb-2 border-4"
|
|
style="width: 3rem; height: 3rem"
|
|
role="status"
|
|
></div>
|
|
<p class="text-body fw-bold mb-0">{{ __('ui/common.loading') }}...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div {{ $slot->attributes }} x-cloak>{{ $slot }}</div>
|
|
</div>
|
|
<div {{ $footer->attributes->merge(['class' => 'modal-footer']) }}>{!! $footer !!}</div>
|
|
</div>
|
|
@if ($form)
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|