Mercurial > packages > framework

comparison resources/views/components/modal.blade.php @ 1:56d9c64d64aa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Setting up the base, still have plenty of work to be done here.
author luka
date Mon, 09 Jun 2025 23:07:17 -0400
parents
children
comparison
equal deleted inserted replaced
0:07e7262a8cce 1:56d9c64d64aa
1 @props(['name', 'show' => false, 'maxWidth' => '2xl'])
2
3 @php
4 $maxWidth = [
5 'sm' => 'sm:max-w-sm',
6 'md' => 'sm:max-w-md',
7 'lg' => 'sm:max-w-lg',
8 'xl' => 'sm:max-w-xl',
9 '2xl' => 'sm:max-w-2xl',
10 ][$maxWidth];
11 @endphp
12
13 <div x-data="{
14 show: @js($show),
15 focusables() {
16 // All focusable element types...
17 let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
18 return [...$el.querySelectorAll(selector)]
19 // All non-disabled elements...
20 .filter(el => !el.hasAttribute('disabled'))
21 },
22 firstFocusable() { return this.focusables()[0] },
23 lastFocusable() { return this.focusables().slice(-1)[0] },
24 nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
25 prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
26 nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
27 prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) - 1 },
28 }" x-init="$watch('show', value => {
29 if (value) {
30 document.body.classList.add('overflow-y-hidden');
31 {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
32 } else {
33 document.body.classList.remove('overflow-y-hidden');
34 }
35 })"
36 x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
37 x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null" x-on:close.stop="show = false"
38 x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
39 x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show"
40 class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" style="display: {{ $show ? 'block' : 'none' }};">
41 <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false"
42 x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
43 x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
44 x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
45 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
46 </div>
47
48 <div x-show="show"
49 class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
50 x-transition:enter="ease-out duration-300"
51 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
52 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
53 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
54 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
55 {{ $slot }}
56 </div>
57 </div>