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 7 commits
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
2 changes: 1 addition & 1 deletion resources/views/components/button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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']) }}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

{{ $slot }}
</button>
4 changes: 2 additions & 2 deletions resources/views/components/confirmation-modal.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

<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">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/dialog-modal.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}
Expand Down
20 changes: 6 additions & 14 deletions resources/views/components/modal.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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':
Expand All @@ -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"
Expand Down
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
2 changes: 1 addition & 1 deletion stubs/livewire/resources/views/layouts/app.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
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" 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>
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" 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>
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
Loading