Support Livewire V2 (#23)

* Refactor modals * Bake disabled button state (opacity-25) into class list * Update Alpine tp 2.6.0 * Update all Livewire stubs * Add .defer to checkbox * Add back wire:click on team member manager
laravel · Sep 2, 2020 · 3118969 · 3118969
1 parent 5df7b33
commit 3118969
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 69 deletions.
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
@@ -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']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/components/confirmation-modal.blade.php b/resources/views/components/confirmation-modal.blade.php
@@ -1,6 +1,6 @@
-@props(['id' => null, 'show', 'maxWidth'])
+@props(['id' => null, 'maxWidth' => null])
 
-<x-jet-modal :id="$id" :show="$show" :max-width="$maxWidth ?? '2xl'">
+<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
     <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
         <div class="sm:flex sm:items-start">
             <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">

diff --git a/resources/views/components/dialog-modal.blade.php b/resources/views/components/dialog-modal.blade.php
@@ -1,6 +1,6 @@
-@props(['show', 'maxWidth'])
+@props(['id' => null, 'maxWidth' => null])
 
-<x-jet-modal :show="$show" :max-width="$maxWidth ?? '2xl'">
+<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
     <div class="px-6 py-4">
         <div class="text-lg">
             {{ $title }}

diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -1,15 +1,7 @@
-@props(['id' => null, 'show', 'maxWidth'])
+@props(['id', 'maxWidth'])
 
 @php
-if (is_null($id)) {
-    $id = md5($show);
-}
-
-if (is_bool($_instance->{$show})) {
-    $shouldShow = $_instance->{$show};
-} else {
-    $shouldShow = ! is_null($_instance->{$show});
-}
+$id = $id ?? md5($attributes->wire('model'));
 
 switch ($maxWidth ?? '2xl') {
     case 'sm':
@@ -31,13 +23,13 @@
 }
 @endphp
 
-<div id="{{ $id }}" x-data="{ show: {{ var_export($shouldShow ?? false, true) }} }"
+<div id="{{ $id }}" x-data="{ show: @entangle($attributes->wire('model')) }"
         x-show="show"
-        x-on:close.stop="@this.set('{{ $show }}', false)"
-        x-on:keydown.escape.window="if (! show) { return; } @this.set('{{ $show }}', false)"
+        x-on:close.stop="show = false"
+        x-on:keydown.escape.window="show = false"
         class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center"
         style="display: none;">
-    <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="@this.set('{{ $show }}', false)" x-transition:enter="ease-out duration-300"
+    <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-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="ease-in duration-200"

diff --git a/stubs/livewire/resources/views/api/api-token-manager.blade.php b/stubs/livewire/resources/views/api/api-token-manager.blade.php
@@ -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 />
                 <x-jet-input-error for="name" class="mt-2" />
             </div>
 
@@ -25,7 +25,7 @@
                     <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                         @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                             <label class="flex items-center">
-                                <input type="checkbox" class="form-checkbox" value="{{ $permission }}" wire:model="createApiTokenForm.permissions">
+                                <input type="checkbox" class="form-checkbox" value="{{ $permission }}" wire:model.defer="createApiTokenForm.permissions">
                                 <span class="ml-2 text-sm text-gray-600">{{ $permission }}</span>
                             </label>
                         @endforeach
@@ -39,7 +39,7 @@
                 Created.
             </x-jet-action-message>
 
-            <x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-button>
                 Create
             </x-jet-button>
         </x-slot>
@@ -94,7 +94,7 @@
     @endif
 
     <!-- Token Value Modal -->
-    <x-jet-dialog-modal show="displayingToken">
+    <x-jet-dialog-modal wire:model="displayingToken">
         <x-slot name="title">
             API Token
         </x-slot>
@@ -110,14 +110,14 @@
         </x-slot>
 
         <x-slot name="footer">
-            <x-jet-secondary-button wire:click="$set('displayingToken', false)" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-secondary-button wire:click="$set('displayingToken', false)" wire:loading.attr="disabled">
                 Close
             </x-jet-secondary-button>
         </x-slot>
     </x-jet-dialog-modal>
 
     <!-- API Token Permissions Modal -->
-    <x-jet-dialog-modal show="managingApiTokenPermissions">
+    <x-jet-dialog-modal wire:model="managingApiTokenPermissions">
         <x-slot name="title">
             API Token Permissions
         </x-slot>
@@ -126,26 +126,26 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                     <label class="flex items-center">
-                        <input type="checkbox" class="form-checkbox" value="{{ $permission }}" wire:model="updateApiTokenForm.permissions">
+                        <input type="checkbox" class="form-checkbox" value="{{ $permission }}" wire:model.defer="updateApiTokenForm.permissions">
                         <span class="ml-2 text-sm text-gray-600">{{ $permission }}</span>
                     </label>
                 @endforeach
             </div>
         </x-slot>
 
         <x-slot name="footer">
-            <x-jet-secondary-button wire:click="$set('managingApiTokenPermissions', false)" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-secondary-button wire:click="$set('managingApiTokenPermissions', false)" wire:loading.attr="disabled">
                 Nevermind
             </x-jet-secondary-button>
 
-            <x-jet-button class="ml-2" wire:click="updateApiToken" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-button class="ml-2" wire:click="updateApiToken" wire:loading.attr="disabled">
                 Save
             </x-jet-button>
         </x-slot>
     </x-jet-dialog-modal>
 
     <!-- Delete Token Confirmation Modal -->
-    <x-jet-confirmation-modal show="confirmingApiTokenDeletion">
+    <x-jet-confirmation-modal wire:model="confirmingApiTokenDeletion">
         <x-slot name="title">
             Delete API Token
         </x-slot>
@@ -155,11 +155,11 @@
         </x-slot>
 
         <x-slot name="footer">
-            <x-jet-secondary-button wire:click="$toggle('confirmingApiTokenDeletion')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-secondary-button wire:click="$toggle('confirmingApiTokenDeletion')" wire:loading.attr="disabled">
                 Nevermind
             </x-jet-secondary-button>
 
-            <x-jet-danger-button class="ml-2" wire:click="deleteApiToken" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-danger-button class="ml-2" wire:click="deleteApiToken" wire:loading.attr="disabled">
                 Delete
             </x-jet-danger-button>
         </x-slot>

diff --git a/stubs/livewire/resources/views/layouts/app.blade.php b/stubs/livewire/resources/views/layouts/app.blade.php
@@ -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>
     </head>
     <body class="font-sans antialiased">
         <div class="min-h-screen bg-gray-100">

diff --git a/stubs/livewire/resources/views/profile/delete-user-form.blade.php b/stubs/livewire/resources/views/profile/delete-user-form.blade.php
@@ -13,13 +13,13 @@
         </div>
 
         <div class="mt-5">
-            <x-jet-danger-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-danger-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
                 Delete Account
             </x-jet-danger-button>
         </div>
 
         <!-- Delete User Confirmation Modal -->
-        <x-jet-confirmation-modal show="confirmingUserDeletion">
+        <x-jet-confirmation-modal wire:model="confirmingUserDeletion">
             <x-slot name="title">
                 Delete Account
             </x-slot>
@@ -29,11 +29,11 @@
             </x-slot>
 
             <x-slot name="footer">
-                <x-jet-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
                     Nevermind
                 </x-jet-secondary-button>
 
-                <x-jet-danger-button class="ml-2" wire:click="deleteUser" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
                     Delete Account
                 </x-jet-danger-button>
             </x-slot>

diff --git a/stubs/livewire/resources/views/profile/logout-other-browser-sessions-form.blade.php b/stubs/livewire/resources/views/profile/logout-other-browser-sessions-form.blade.php
@@ -52,7 +52,7 @@
         @endif
 
         <div class="flex items-center mt-5">
-            <x-jet-button wire:click="confirmLogout" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-button wire:click="confirmLogout" wire:loading.attr="disabled">
                 Logout Other Browser Sessions
             </x-jet-button>
 
@@ -62,7 +62,7 @@
         </div>
 
         <!-- Logout Other Devices Confirmation Modal -->
-        <x-jet-dialog-modal show="confirmingLogout">
+        <x-jet-dialog-modal wire:model="confirmingLogout">
             <x-slot name="title">
                 Logout Other Browser Sessions
             </x-slot>
@@ -73,19 +73,19 @@
                 <div class="mt-4" x-data="{}" x-on:confirming-logout-other-browser-sessions.window="setTimeout(() => $refs.password.focus(), 250)">
                     <x-jet-input type="password" class="mt-1 block w-3/4" placeholder="Password"
                                 x-ref="password"
-                                wire:model="password"
+                                wire:model.defer="password"
                                 wire:keydown.enter="logoutOtherBrowserSessions" />
 
                     <x-jet-input-error for="password" class="mt-2" />
                 </div>
             </x-slot>
 
             <x-slot name="footer">
-                <x-jet-secondary-button wire:click="$toggle('confirmingLogout')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-secondary-button wire:click="$toggle('confirmingLogout')" wire:loading.attr="disabled">
                     Nevermind
                 </x-jet-secondary-button>
 
-                <x-jet-button class="ml-2" wire:click="logoutOtherBrowserSessions" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-button class="ml-2" wire:click="logoutOtherBrowserSessions" wire:loading.attr="disabled">
                     Logout Other Browser Sessions
                 </x-jet-button>
             </x-slot>

diff --git a/stubs/livewire/resources/views/profile/two-factor-authentication-form.blade.php b/stubs/livewire/resources/views/profile/two-factor-authentication-form.blade.php
@@ -52,7 +52,7 @@
 
         <div class="mt-5">
             @if (! $this->enabled)
-                <x-jet-button type="button" wire:click="enableTwoFactorAuthentication" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-button type="button" wire:click="enableTwoFactorAuthentication" wire:loading.attr="disabled">
                     Enable
                 </x-jet-button>
             @else
@@ -66,7 +66,7 @@
                     </x-jet-secondary-button>
                 @endif
 
-                <x-jet-danger-button wire:click="disableTwoFactorAuthentication" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-danger-button wire:click="disableTwoFactorAuthentication" wire:loading.attr="disabled">
                     Disable
                 </x-jet-danger-button>
             @endif

diff --git a/stubs/livewire/resources/views/profile/update-password-form.blade.php b/stubs/livewire/resources/views/profile/update-password-form.blade.php
@@ -10,19 +10,19 @@
     <x-slot name="form">
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="current_password" value="Current Password" />
-            <x-jet-input id="current_password" type="password" class="mt-1 block w-full" wire:model="state.current_password" autocomplete="current-password" />
+            <x-jet-input id="current_password" type="password" class="mt-1 block w-full" wire:model.defer="state.current_password" autocomplete="current-password" />
             <x-jet-input-error for="current_password" class="mt-2" />
         </div>
 
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="password" value="New Password" />
-            <x-jet-input id="password" type="password" class="mt-1 block w-full" wire:model="state.password" autocomplete="new-password" />
+            <x-jet-input id="password" type="password" class="mt-1 block w-full" wire:model.defer="state.password" autocomplete="new-password" />
             <x-jet-input-error for="password" class="mt-2" />
         </div>
 
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="password_confirmation" value="Confirm Password" />
-            <x-jet-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model="state.password_confirmation" autocomplete="new-password" />
+            <x-jet-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model.defer="state.password_confirmation" autocomplete="new-password" />
             <x-jet-input-error for="password_confirmation" class="mt-2" />
         </div>
     </x-slot>
@@ -32,7 +32,7 @@
             Saved.
         </x-jet-action-message>
 
-        <x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
+        <x-jet-button>
             Save
         </x-jet-button>
     </x-slot>

diff --git a/stubs/livewire/resources/views/profile/update-profile-information-form.blade.php b/stubs/livewire/resources/views/profile/update-profile-information-form.blade.php
@@ -49,14 +49,14 @@
         <!-- Name -->
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="name" value="Name" />
-            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model="state.name" autocomplete="name" />
+            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
             <x-jet-input-error for="name" class="mt-2" />
         </div>
 
         <!-- Email -->
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="email" value="Email" />
-            <x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model="state.email" />
+            <x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
             <x-jet-input-error for="email" class="mt-2" />
         </div>
     </x-slot>
@@ -66,7 +66,7 @@
             Saved.
         </x-jet-action-message>
 
-        <x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
+        <x-jet-button>
             Save
         </x-jet-button>
     </x-slot>

diff --git a/stubs/livewire/resources/views/teams/create-team-form.blade.php b/stubs/livewire/resources/views/teams/create-team-form.blade.php
@@ -23,13 +23,13 @@
 
         <div class="col-span-6 sm:col-span-4">
             <x-jet-label for="name" value="Team Name" />
-            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model="state.name" autofocus />
+            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autofocus />
             <x-jet-input-error for="name" class="mt-2" />
         </div>
     </x-slot>
 
     <x-slot name="actions">
-        <x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
+        <x-jet-button>
             Create
         </x-jet-button>
     </x-slot>

diff --git a/stubs/livewire/resources/views/teams/delete-team-form.blade.php b/stubs/livewire/resources/views/teams/delete-team-form.blade.php
@@ -13,13 +13,13 @@
         </div>
 
         <div class="mt-5">
-            <x-jet-danger-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+            <x-jet-danger-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.attr="disabled">
                 Delete Team
             </x-jet-danger-button>
         </div>
 
         <!-- Delete Team Confirmation Modal -->
-        <x-jet-confirmation-modal show="confirmingTeamDeletion">
+        <x-jet-confirmation-modal wire:model="confirmingTeamDeletion">
             <x-slot name="title">
                 Delete Team
             </x-slot>
@@ -29,11 +29,11 @@
             </x-slot>
 
             <x-slot name="footer">
-                <x-jet-secondary-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-secondary-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.attr="disabled">
                     Nevermind
                 </x-jet-secondary-button>
 
-                <x-jet-danger-button class="ml-2" wire:click="deleteTeam" wire:loading.class="opacity-25" wire:loading.attr="disabled">
+                <x-jet-danger-button class="ml-2" wire:click="deleteTeam" wire:loading.attr="disabled">
                     Delete Team
                 </x-jet-danger-button>
             </x-slot>