Support Livewire V2 #23
Conversation
| @@ -1,3 +1,3 @@ | |||
| <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150']) }}> | |||
| <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150']) }}> | |||
There was a problem hiding this comment.
I added disabled:opacity-25 so that opacity is automatically handled by CSS rather than wire:loading.class="opacity-25".
Note: I didn't re-build the CSS, so I'm guessing this class is missing from the build because of PurgeCSS.
|
|
||
| <x-jet-modal :id="$id" :show="$show" :max-width="$maxWidth ?? '2xl'"> | ||
| <x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}> |
There was a problem hiding this comment.
The default of $maxWidth ?? '2xl' is already declared in the underlying modal component.
I figure it's best to forward all props as well as $attributes.
| @@ -13,7 +13,7 @@ | |||
| <!-- Token Name --> | |||
| <div class="col-span-6 sm:col-span-4"> | |||
| <x-jet-label for="name" value="Token Name" /> | |||
| <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model="createApiTokenForm.name" autofocus /> | |||
| <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="createApiTokenForm.name" autofocus /> | |||
There was a problem hiding this comment.
I've deferred all input updating. This way network requests will only be sent when a user performs a meaningful action like pressing "Create".
| @@ -39,7 +39,7 @@ | |||
| Created. | |||
| </x-jet-action-message> | |||
|
|
|||
| <x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled"> | |||
| <x-jet-button> | |||
There was a problem hiding this comment.
Livewire automatically disables submit buttons on form submission. Also, because we added disabled:opacity-25, we don't need to worry about that either.
| @@ -94,7 +94,7 @@ | |||
| @endif | |||
|
|
|||
| <!-- Token Value Modal --> | |||
| <x-jet-dialog-modal show="displayingToken"> | |||
| <x-jet-dialog-modal wire:model="displayingToken"> | |||
There was a problem hiding this comment.
To me wire:model, even if it's not actually used as wire:model in the underlying component, is the best way to express data binding to inputs.
Note: this also supports
wire:model.defer
| @@ -16,7 +16,7 @@ | |||
| @livewireStyles | |||
|
|
|||
| <!-- Scripts --> | |||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.2.1/dist/alpine.js" defer></script> | |||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.js" defer></script> | |||
There was a problem hiding this comment.
There is a fix somewhere along the way in Alpine that prevents an obscure bug in the password forms caused by the One Password chrome extension. Moving to the most recent version fixes it.
|
Sorry to dig this up, but I was wondering it the difference in AlpineJS version between the layouts was intended :
@calebporzio you might have forgotten to update the guest layout ;) |
There are no breaking changes in V2 that affect Jetstream, however, there are some tweaks I'd make.
Summary:
wire:model&&@entangleinstead ofshow=wire:model.deferwire:loadingstatementsTake whatever you want, and leave the rest!
I did test all of this in a fresh install. Here are two things I had to do to make it work:
artisan view:clearcomposer.jsonto version^2.0and runcomposer update livewire/livewire