Mercurial > borealpoint

annotate resources/views/components/modal.blade.php @ 2:90296614b7e2 default tip

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