65 lines
2.8 KiB
PHP
65 lines
2.8 KiB
PHP
@props([
|
|
'title',
|
|
'close',
|
|
'maxWidth' => 'lg',
|
|
])
|
|
|
|
@php
|
|
$maxWidthClass = [
|
|
'sm' => 'max-w-sm',
|
|
'md' => 'max-w-md',
|
|
'lg' => 'max-w-lg',
|
|
'xl' => 'max-w-xl',
|
|
'2xl' => 'max-w-2xl',
|
|
][$maxWidth];
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{
|
|
trigger: null,
|
|
focusables() {
|
|
// offsetParent is null for position:fixed too; no modal slot uses it.
|
|
return [...$el.querySelectorAll('a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])')]
|
|
.filter(el => ! el.hasAttribute('disabled') && el.offsetParent !== null)
|
|
},
|
|
firstFocusable() { return this.focusables()[0] },
|
|
lastFocusable() { return this.focusables().slice(-1)[0] },
|
|
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
|
|
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
|
|
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
|
|
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 },
|
|
init() {
|
|
this.trigger = document.activeElement;
|
|
document.body.classList.add('overflow-y-hidden');
|
|
this.$nextTick(() => this.firstFocusable()?.focus());
|
|
},
|
|
destroy() {
|
|
document.body.classList.remove('overflow-y-hidden');
|
|
this.trigger?.focus();
|
|
},
|
|
}"
|
|
x-on:keydown.escape.window="$wire.{{ $close }}()"
|
|
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable()?.focus()"
|
|
x-on:keydown.shift.tab.prevent="prevFocusable()?.focus()"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-title"
|
|
>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div class="fixed inset-0 bg-gray-900/50 backdrop-blur-xs transition-opacity" wire:click="{{ $close }}"></div>
|
|
|
|
<div class="relative z-10 w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto rounded-lg bg-white dark:bg-gray-800 p-6 text-left shadow-xl">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 id="modal-title" class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $title }}</h3>
|
|
<button type="button" wire:click="{{ $close }}" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" aria-label="Close dialog">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|