|
0
|
1 @props([
|
|
|
2 'name',
|
|
|
3 'show' => false,
|
|
|
4 'maxWidth' => '2xl'
|
|
|
5 ])
|
|
|
6
|
|
|
7 @php
|
|
|
8 $maxWidth = [
|
|
|
9 'sm' => 'sm:max-w-sm',
|
|
|
10 'md' => 'sm:max-w-md',
|
|
|
11 'lg' => 'sm:max-w-lg',
|
|
|
12 'xl' => 'sm:max-w-xl',
|
|
|
13 '2xl' => 'sm:max-w-2xl',
|
|
|
14 ][$maxWidth];
|
|
|
15 @endphp
|
|
|
16
|
|
|
17 <div
|
|
|
18 x-data="{
|
|
|
19 show: @js($show),
|
|
|
20 focusables() {
|
|
|
21 // All focusable element types...
|
|
|
22 let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
|
|
|
23 return [...$el.querySelectorAll(selector)]
|
|
|
24 // All non-disabled elements...
|
|
|
25 .filter(el => ! el.hasAttribute('disabled'))
|
|
|
26 },
|
|
|
27 firstFocusable() { return this.focusables()[0] },
|
|
|
28 lastFocusable() { return this.focusables().slice(-1)[0] },
|
|
|
29 nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
|
|
|
30 prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
|
|
|
31 nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
|
|
|
32 prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
|
|
|
33 }"
|
|
|
34 x-init="$watch('show', value => {
|
|
|
35 if (value) {
|
|
|
36 document.body.classList.add('overflow-y-hidden');
|
|
|
37 {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
|
|
|
38 } else {
|
|
|
39 document.body.classList.remove('overflow-y-hidden');
|
|
|
40 }
|
|
|
41 })"
|
|
|
42 x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
|
|
|
43 x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
|
|
|
44 x-on:close.stop="show = false"
|
|
|
45 x-on:keydown.escape.window="show = false"
|
|
|
46 x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
|
|
|
47 x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
|
|
|
48 x-show="show"
|
|
|
49 class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
|
|
|
50 style="display: {{ $show ? 'block' : 'none' }};"
|
|
|
51 >
|
|
|
52 <div
|
|
|
53 x-show="show"
|
|
|
54 class="fixed inset-0 transform transition-all"
|
|
|
55 x-on:click="show = false"
|
|
|
56 x-transition:enter="ease-out duration-300"
|
|
|
57 x-transition:enter-start="opacity-0"
|
|
|
58 x-transition:enter-end="opacity-100"
|
|
|
59 x-transition:leave="ease-in duration-200"
|
|
|
60 x-transition:leave-start="opacity-100"
|
|
|
61 x-transition:leave-end="opacity-0"
|
|
|
62 >
|
|
|
63 <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
|
|
|
64 </div>
|
|
|
65
|
|
|
66 <div
|
|
|
67 x-show="show"
|
|
|
68 class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
|
|
|
69 x-transition:enter="ease-out duration-300"
|
|
|
70 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
|
71 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
|
72 x-transition:leave="ease-in duration-200"
|
|
|
73 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
|
74 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
|
75 >
|
|
|
76 {{ $slot }}
|
|
|
77 </div>
|
|
|
78 </div>
|
