direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-06 16:32:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge (#127)

Browse Source
This commit is contained in:
Saeed Vaziry
2024-03-24 09:56:34 +01:00
committed by GitHub
parent 884f18db63
commit 4d051330d6
1055 changed files with 14493 additions and 20278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
resources/views/components/modal.blade.php
View File

@ -1,19 +1,19 @@
@props([
'name',
'show' => false,
'maxWidth' => '2xl'
"name",
"show" => false,
"maxWidth" => "2xl",
])
@php
$maxWidth = [
'sm' => 'sm:max-w-sm',
'md' => 'sm:max-w-md',
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
'3xl' => 'sm:max-w-3xl',
'4xl' => 'sm:max-w-4xl',
][$maxWidth];
$maxWidth = [
"sm" => "sm:max-w-sm",
"md" => "sm:max-w-md",
"lg" => "sm:max-w-lg",
"xl" => "sm:max-w-xl",
"2xl" => "sm:max-w-2xl",
"3xl" => "sm:max-w-3xl",
"4xl" => "sm:max-w-4xl",
][$maxWidth];
@endphp
<div
@ -33,47 +33,49 @@
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}"
x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-y-hidden');
{{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
} else {
document.body.classList.remove('overflow-y-hidden');
}
})"
x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
x-init="
$watch('show', (value) => {
if (value) {
document.body.classList.add('overflow-y-hidden')
{{ $attributes->has("focusable") ? "setTimeout(() => firstFocusable().focus(), 100)" : "" }}
} else {
document.body.classList.remove('overflow-y-hidden')
}
})
"
x-on:open-modal.window="$event.detail == '{{ $name }}' ? (show = true) : null"
x-on:close-modal.window="$event.detail == '{{ $name }}' ? (show = false) : null"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
x-show="show"
class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
style="display: {{ $show ? 'block' : 'none' }};"
class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0"
style="display: {{ $show ? "block" : "none" }}"
>
<div
x-show="show"
class="fixed inset-0 transform transition-all"
x-on:click="show = false"
x-transition:enter="ease-out duration-300"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave="duration-200 ease-in"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
<div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900"></div>
</div>
<div
x-show="show"
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"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="{{ $maxWidth }} mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"
x-transition:leave="duration-200 ease-in"
x-transition:leave-start="translate-y-0 opacity-100 sm:scale-100"
x-transition:leave-end="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
>
{{ $slot }}
</div>