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>