fix:improve modal performance and useability
This commit is contained in:
hackerESQ
@@ -7,44 +7,48 @@
|
||||
'persistent' => false
|
||||
])
|
||||
|
||||
<dialog
|
||||
x-data="{ open: false }"
|
||||
x-on:toggle-{{ $key }}.window="open = !open"
|
||||
class="relative z-50 w-auto h-auto"
|
||||
@if($closeOnEscape)
|
||||
@keydown.window.escape="open = false"
|
||||
@endif
|
||||
>
|
||||
<template x-teleport="body">
|
||||
<div x-transition.opacity x-show="open" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-full h-full">
|
||||
<div
|
||||
@if(!$persistent)
|
||||
@click="open=false"
|
||||
@endif
|
||||
class="absolute inset-0 w-full h-full bg-black bg-opacity-40"
|
||||
x-show="open"
|
||||
x-cloak
|
||||
></div>
|
||||
<div>
|
||||
@teleport('body')
|
||||
<dialog
|
||||
x-data="{ open: false }"
|
||||
x-on:toggle-{{ $key }}.window="open = !open"
|
||||
class="relative z-50 w-auto h-auto"
|
||||
@if($closeOnEscape)
|
||||
@keydown.window.escape="open = false"
|
||||
@endif
|
||||
>
|
||||
<template x-teleport="body">
|
||||
<div x-transition.opacity x-show="open" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-full h-full">
|
||||
<div
|
||||
@if(!$persistent)
|
||||
@click="open=false"
|
||||
@endif
|
||||
class="absolute inset-0 w-full h-full bg-black bg-opacity-40"
|
||||
x-show="open"
|
||||
x-cloak
|
||||
></div>
|
||||
|
||||
<x-card
|
||||
x-trap.inert.noscroll="open"
|
||||
:title="$title"
|
||||
:subtitle="$subtitle"
|
||||
{{ $attributes->merge(['class' => 'relative transform overflow-hidden rounded-md ext-left shadow-xl w-full sm:w-2/3 lg:w-1/3 m-2 sm:m-0']) }}
|
||||
x-show="open"
|
||||
x-cloak
|
||||
>
|
||||
@if ($showClose)
|
||||
<x-button
|
||||
icon="o-x-mark"
|
||||
class="absolute top-4 right-4 btn-ghost btn-circle btn-sm"
|
||||
@click="open = false"
|
||||
/>
|
||||
@endif
|
||||
<x-card
|
||||
x-trap.inert.noscroll="open"
|
||||
:title="$title"
|
||||
:subtitle="$subtitle"
|
||||
{{ $attributes->merge(['class' => 'relative transform overflow-hidden rounded-md ext-left shadow-xl w-full sm:w-2/3 lg:w-1/3 m-2 sm:m-0']) }}
|
||||
x-show="open"
|
||||
x-cloak
|
||||
>
|
||||
@if ($showClose)
|
||||
<x-button
|
||||
icon="o-x-mark"
|
||||
class="absolute top-4 right-4 btn-ghost btn-circle btn-sm"
|
||||
@click="open = false"
|
||||
/>
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
{{ $slot }}
|
||||
|
||||
</x-card>
|
||||
</div>
|
||||
</template>
|
||||
</dialog>
|
||||
</x-card>
|
||||
</div>
|
||||
</template>
|
||||
</dialog>
|
||||
@endteleport
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
<x-section-border class="my-3" />
|
||||
@endif
|
||||
|
||||
<div class="flex justify-between gap-3">
|
||||
<div class="flex justify-end gap-3">
|
||||
{{ $actions}}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -6,41 +6,45 @@
|
||||
'persistent' => false
|
||||
])
|
||||
|
||||
<dialog
|
||||
{{ $attributes->except('wire:model')->class(["modal"]) }}
|
||||
x-data="{open: @entangle($attributes->wire('model')).live }"
|
||||
:class="{'modal-open !animate-none': open}"
|
||||
:open="open"
|
||||
@if($closeOnEscape)
|
||||
@keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
@endif
|
||||
>
|
||||
<x-card
|
||||
:title="$title"
|
||||
:subtitle="$subtitle"
|
||||
{{ $attributes->merge(['class' => 'modal-box relative transform overflow-hidden rounded-md ext-left shadow-xl w-full sm:w-2/3 lg:w-1/3 m-2 sm:m-0']) }}
|
||||
>
|
||||
@if ($showClose)
|
||||
<x-button
|
||||
icon="o-x-mark"
|
||||
class="absolute top-4 right-4 btn-ghost btn-circle btn-sm"
|
||||
@click="$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
/>
|
||||
<div>
|
||||
@teleport('body')
|
||||
<dialog
|
||||
{{ $attributes->except('wire:model')->class(["modal"]) }}
|
||||
x-data="{open: @entangle($attributes->wire('model')).live }"
|
||||
:class="{'modal-open !animate-none': open}"
|
||||
:open="open"
|
||||
@if($closeOnEscape)
|
||||
@keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
</x-card>
|
||||
|
||||
<div class="modal-backdrop" method="dialog">
|
||||
<a
|
||||
@if(!$persistent)
|
||||
@click="$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
@endif
|
||||
type="button"
|
||||
title="{{ __('Close') }}"
|
||||
>
|
||||
<x-card
|
||||
:title="$title"
|
||||
:subtitle="$subtitle"
|
||||
{{ $attributes->merge(['class' => 'modal-box relative transform overflow-hidden rounded-md ext-left shadow-xl w-full sm:w-2/3 lg:w-1/3 m-2 sm:m-0']) }}
|
||||
>
|
||||
{{ __('Close') }}
|
||||
</a>
|
||||
</div>
|
||||
</dialog>
|
||||
@if ($showClose)
|
||||
<x-button
|
||||
icon="o-x-mark"
|
||||
class="absolute top-4 right-4 btn-ghost btn-circle btn-sm"
|
||||
@click="$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
/>
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
</x-card>
|
||||
|
||||
<div class="modal-backdrop" method="dialog">
|
||||
<a
|
||||
@if(!$persistent)
|
||||
@click="$wire.{{ $attributes->wire('model')->value() }} = false"
|
||||
@endif
|
||||
type="button"
|
||||
title="{{ __('Close') }}"
|
||||
>
|
||||
{{ __('Close') }}
|
||||
</a>
|
||||
</div>
|
||||
</dialog>
|
||||
@endteleport
|
||||
</div>
|
||||
@@ -86,9 +86,9 @@ new class extends Component {
|
||||
<x-button
|
||||
wire:click="$toggle('confirmingPortfolioDeletion')"
|
||||
wire:loading.attr="disabled"
|
||||
icon="o-trash"
|
||||
class="btn btn-ghost btn-circle text-error"
|
||||
class="btn text-error"
|
||||
title="{{ __('Delete Portfolio') }}"
|
||||
label="{{ __('Delete Portfolio') }}"
|
||||
/>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -160,9 +160,9 @@ new class extends Component {
|
||||
<x-button
|
||||
wire:click="$toggle('confirmingTransactionDeletion')"
|
||||
wire:loading.attr="disabled"
|
||||
icon="o-trash"
|
||||
class="btn btn-ghost btn-circle text-error"
|
||||
class="btn text-error"
|
||||
title="{{ __('Delete Transaction') }}"
|
||||
label="{{ __('Delete Transaction') }}"
|
||||
/>
|
||||
@endif
|
||||
|
||||
|
||||
Reference in New Issue
Block a user