Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Livewire V2 #23

Merged
merged 9 commits into from
Sep 2, 2020
Merged

Support Livewire V2 #23

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
79bef5c
Refactor modals
calebporzio Sep 2, 2020
a2d7450
Merge branch 'master' of github.com:laravel/jetstream
calebporzio Sep 2, 2020
34fa9ff
Bake disabled button state (opacity-25) into class list
calebporzio Sep 2, 2020
715d9b0
Update Alpine tp 2.6.0
calebporzio Sep 2, 2020
cf96081
Update all Livewire stubs
calebporzio Sep 2, 2020
dea8d26
Merge branch 'master' of github.com:laravel/jetstream
calebporzio Sep 2, 2020
38f8f08
Merge branch 'master' into livewire-v2-refactor
calebporzio Sep 2, 2020
243993b
Add .defer to checkbox
calebporzio Sep 2, 2020
de81b87
Add back wire:click on team member manager
calebporzio Sep 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update all Livewire stubs
  • Loading branch information
@calebporzio
calebporzio committed Sep 2, 2020
commit cf96081417bde05f8a3adc480abf705ac5c7486e
20 changes: 10 additions & 10 deletions stubs/livewire/resources/views/api/api-token-manager.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Copy link
Contributor Author

@calebporzio calebporzio Sep 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've deferred all input updating. This way network requests will only be sent when a user performs a meaningful action like pressing "Create".

<x-jet-input-error for="name" class="mt-2" />
</div>

Expand All @@ -39,7 +39,7 @@
Created.
</x-jet-action-message>

<x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-button>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Livewire automatically disables submit buttons on form submission. Also, because we added disabled:opacity-25, we don't need to worry about that either.

Create
</x-jet-button>
</x-slot>
Expand Down Expand Up @@ -94,7 +94,7 @@
@endif

<!-- Token Value Modal -->
<x-jet-dialog-modal show="displayingToken">
<x-jet-dialog-modal wire:model="displayingToken">
Copy link
Contributor Author

@calebporzio calebporzio Sep 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<x-slot name="title">
API Token
</x-slot>
Expand All @@ -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>
Expand All @@ -134,18 +134,18 @@
</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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions stubs/livewire/resources/views/profile/delete-user-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions stubs/livewire/resources/views/profile/logout-other-browser-sessions-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions stubs/livewire/resources/views/profile/two-factor-authentication-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions stubs/livewire/resources/views/profile/update-password-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
<x-jet-input id="current_password" type="password" class="mt-1 block w-full" wire:model.defer="state.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" />
<x-jet-input id="password" type="password" class="mt-1 block w-full" wire:model.defer="state.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" />
<x-jet-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model.defer="state.password_confirmation" />
<x-jet-input-error for="password_confirmation" class="mt-2" />
</div>
</x-slot>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions stubs/livewire/resources/views/profile/update-profile-information-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions stubs/livewire/resources/views/teams/create-team-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions stubs/livewire/resources/views/teams/delete-team-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
22 changes: 11 additions & 11 deletions stubs/livewire/resources/views/teams/team-member-manager.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<!-- Member Email -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="email" value="Email" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model="addTeamMemberForm.email" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="addTeamMemberForm.email" />
<x-jet-input-error for="email" class="mt-2" />
</div>

Expand Down Expand Up @@ -66,7 +66,7 @@
Added.
</x-jet-action-message>

<x-jet-button wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-button>
Add
</x-jet-button>
</x-slot>
Expand Down Expand Up @@ -132,7 +132,7 @@
@endif

<!-- Role Management Modal -->
<x-jet-dialog-modal show="currentlyManagingRole">
<x-jet-dialog-modal wire:model="currentlyManagingRole">
<x-slot name="title">
Manage Role
</x-slot>
Expand Down Expand Up @@ -165,18 +165,18 @@
</x-slot>

<x-slot name="footer">
<x-jet-secondary-button wire:click="stopManagingRole" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-secondary-button wire:click="stopManagingRole" wire:loading.attr="disabled">
Nevermind
</x-jet-secondary-button>

<x-jet-button class="ml-2" wire:click="updateRole" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-button class="ml-2">
Save
</x-jet-button>
</x-slot>
</x-jet-dialog-modal>

<!-- Leave Team Confirmation Modal -->
<x-jet-confirmation-modal show="confirmingLeavingTeam">
<x-jet-confirmation-modal wire:model="confirmingLeavingTeam">
<x-slot name="title">
Leave Team
</x-slot>
Expand All @@ -186,18 +186,18 @@
</x-slot>

<x-slot name="footer">
<x-jet-secondary-button wire:click="$toggle('confirmingLeavingTeam')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-secondary-button wire:click="$toggle('confirmingLeavingTeam')" wire:loading.attr="disabled">
Nevermind
</x-jet-secondary-button>

<x-jet-danger-button class="ml-2" wire:click="leaveTeam" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-danger-button class="ml-2" wire:click="leaveTeam" wire:loading.attr="disabled">
Leave
</x-jet-danger-button>
</x-slot>
</x-jet-confirmation-modal>

<!-- Remove Team Member Confirmation Modal -->
<x-jet-confirmation-modal show="confirmingTeamMemberRemoval">
<x-jet-confirmation-modal wire:model="confirmingTeamMemberRemoval">
<x-slot name="title">
Remove Team Member
</x-slot>
Expand All @@ -207,11 +207,11 @@
</x-slot>

<x-slot name="footer">
<x-jet-secondary-button wire:click="$toggle('confirmingTeamMemberRemoval')" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-secondary-button wire:click="$toggle('confirmingTeamMemberRemoval')" wire:loading.attr="disabled">
Nevermind
</x-jet-secondary-button>

<x-jet-danger-button class="ml-2" wire:click="removeTeamMember" wire:loading.class="opacity-25" wire:loading.attr="disabled">
<x-jet-danger-button class="ml-2" wire:click="removeTeamMember" wire:loading.attr="disabled">
Remove
</x-jet-danger-button>
</x-slot>
Expand Down
4 changes: 2 additions & 2 deletions stubs/livewire/resources/views/teams/update-team-name-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<x-jet-input id="name"
type="text"
class="mt-1 block w-full"
wire:model="state.name"
wire:model.defer="state.name"
:disabled="! Gate::check('update', $team)" />

<x-jet-input-error for="name" class="mt-2" />
Expand All @@ -42,7 +42,7 @@ class="mt-1 block w-full"
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>
Expand Down