javier/investbrain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:improve modal performance and useability

Browse Source
This commit is contained in:
hackerESQ
2024-10-28 19:32:04 -05:00
parent d5f25c6f76
commit be859ad859
5 changed files with 87 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ib-alpine-modal.blade.php
+42 -38
View File
@@ -7,44 +7,48 @@
'persistent' => false 'persistent' => false
]) ])
<dialog <div>
x-data="{ open: false }" @teleport('body')
x-on:toggle-{{ $key }}.window="open = !open" <dialog
class="relative z-50 w-auto h-auto" x-data="{ open: false }"
@if($closeOnEscape) x-on:toggle-{{ $key }}.window="open = !open"
@keydown.window.escape="open = false" class="relative z-50 w-auto h-auto"
@endif @if($closeOnEscape)
> @keydown.window.escape="open = false"
<template x-teleport="body"> @endif
<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 <template x-teleport="body">
@if(!$persistent) <div x-transition.opacity x-show="open" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-full h-full">
@click="open=false" <div
@endif @if(!$persistent)
class="absolute inset-0 w-full h-full bg-black bg-opacity-40" @click="open=false"
x-show="open" @endif
x-cloak class="absolute inset-0 w-full h-full bg-black bg-opacity-40"
></div> x-show="open"
x-cloak
></div>
<x-card <x-card
x-trap.inert.noscroll="open" x-trap.inert.noscroll="open"
:title="$title" :title="$title"
:subtitle="$subtitle" :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']) }} {{ $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-show="open"
x-cloak x-cloak
> >
@if ($showClose) @if ($showClose)
<x-button <x-button
icon="o-x-mark" icon="o-x-mark"
class="absolute top-4 right-4 btn-ghost btn-circle btn-sm" class="absolute top-4 right-4 btn-ghost btn-circle btn-sm"
@click="open = false" @click="open = false"
/> />
@endif @endif
{{ $slot }} {{ $slot }}
</x-card> </x-card>
</div> </div>
</template> </template>
</dialog> </dialog>
@endteleport
</div>
resources/views/components/ib-form.blade.php
+1 -1
View File
@@ -14,7 +14,7 @@
<x-section-border class="my-3" /> <x-section-border class="my-3" />
@endif @endif
<div class="flex justify-between gap-3"> <div class="flex justify-end gap-3">
{{ $actions}} {{ $actions}}
</div> </div>
@endif @endif
resources/views/components/ib-livewire-modal.blade.php
+40 -36
View File
@@ -6,41 +6,45 @@
'persistent' => false 'persistent' => false
]) ])
<dialog <div>
{{ $attributes->except('wire:model')->class(["modal"]) }} @teleport('body')
x-data="{open: @entangle($attributes->wire('model')).live }" <dialog
:class="{'modal-open !animate-none': open}" {{ $attributes->except('wire:model')->class(["modal"]) }}
:open="open" x-data="{open: @entangle($attributes->wire('model')).live }"
@if($closeOnEscape) :class="{'modal-open !animate-none': open}"
@keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false" :open="open"
@endif @if($closeOnEscape)
> @keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false"
<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"
/>
@endif @endif
>
{{ $slot }} <x-card
:title="$title"
</x-card> :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']) }}
<div class="modal-backdrop" method="dialog">
<a
@if(!$persistent)
@click="$wire.{{ $attributes->wire('model')->value() }} = false"
@endif
type="button"
title="{{ __('Close') }}"
> >
{{ __('Close') }} @if ($showClose)
</a> <x-button
</div> icon="o-x-mark"
</dialog> 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>
resources/views/livewire/manage-portfolio-form.blade.php
+2 -2
View File
@@ -86,9 +86,9 @@ new class extends Component {
<x-button <x-button
wire:click="$toggle('confirmingPortfolioDeletion')" wire:click="$toggle('confirmingPortfolioDeletion')"
wire:loading.attr="disabled" wire:loading.attr="disabled"
icon="o-trash" class="btn text-error"
class="btn btn-ghost btn-circle text-error"
title="{{ __('Delete Portfolio') }}" title="{{ __('Delete Portfolio') }}"
label="{{ __('Delete Portfolio') }}"
/> />
@endif @endif
resources/views/livewire/manage-transaction-form.blade.php
+2 -2
View File
@@ -160,9 +160,9 @@ new class extends Component {
<x-button <x-button
wire:click="$toggle('confirmingTransactionDeletion')" wire:click="$toggle('confirmingTransactionDeletion')"
wire:loading.attr="disabled" wire:loading.attr="disabled"
icon="o-trash" class="btn text-error"
class="btn btn-ghost btn-circle text-error"
title="{{ __('Delete Transaction') }}" title="{{ __('Delete Transaction') }}"
label="{{ __('Delete Transaction') }}"
/> />
@endif @endif