Mercurial > packages > framework

annotate publishable/resources/views/components/modal.blade.php @ 7:e6132a1e8e24 default tip

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