48 lines
1.0 KiB
PHP
48 lines
1.0 KiB
PHP
@props(['id', 'maxWidth', 'modal' => false])
|
|
|
|
@php
|
|
$id = $id ?? md5($attributes->wire('model'));
|
|
|
|
switch ($maxWidth ?? '') {
|
|
case 'sm':
|
|
$maxWidth = ' modal-sm';
|
|
break;
|
|
case 'md':
|
|
$maxWidth = '';
|
|
break;
|
|
case 'lg':
|
|
$maxWidth = ' modal-lg';
|
|
break;
|
|
case 'xl':
|
|
$maxWidth = ' modal-xl';
|
|
break;
|
|
case '2xl':
|
|
default:
|
|
$maxWidth = '';
|
|
break;
|
|
}
|
|
@endphp
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
x-data="{ show: @entangle($attributes->wire('model')) }"
|
|
x-init="() => {
|
|
let modal = $('#{{ $id }}');
|
|
$watch('show', value => {
|
|
if (value) {
|
|
modal.modal('show')
|
|
} else {
|
|
modal.modal('hide')
|
|
}
|
|
});
|
|
|
|
modal.on('hide.bs.modal', function () {
|
|
show = false
|
|
})
|
|
}" wire:ignore.self class="modal fade" tabindex="-1" id="{{ $id }}" aria-labelledby="{{ $id }}"
|
|
aria-hidden="true" x-ref="{{ $id }}">
|
|
<div class="modal-dialog{{ $maxWidth }}">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|