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

Use a named slot to separate attribute merges #24

Closed
wants to merge 3 commits into from
Closed

Use a named slot to separate attribute merges #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e82578
Use a named slot to separate attribute merges
Jade-GG Aug 10, 2023
a7e34ed
Simplified code
Jade-GG Aug 11, 2023
8572b5a
Use wrapper/slot cleanly
Jade-GG Aug 14, 2023
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
17 changes: 9 additions & 8 deletions resources/views/checkout/partials/sections/payment.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@
<form id="payment" class="flex flex-col gap-2" v-on:submit.prevent="save(['payment_method'], 4)">
<div v-for="(method, index) in checkout.payment_methods">
<x-rapidez-ct::input.radio
class="min-h-[40px]"
name="payment_method"
v-bind:value="method.code"
v-bind:dusk="'method-'+index"
v-model="checkout.payment_method"
required
>
<div>@{{ method.title }}</div>
<img
class="max-h-10"
v-bind:alt="method.code"
v-bind:src="`/vendor/payment-icons/${method.code}.svg`"
onerror="this.onerror=null; this.src='/vendor/payment-icons/creditcard.svg'"
/>
<x-slot:slot class="min-h-[40px]">
<div>@{{ method.title }}</div>
<img
class="max-h-10"
v-bind:alt="method.code"
v-bind:src="`/vendor/payment-icons/${method.code}.svg`"
onerror="this.onerror=null; this.src='/vendor/payment-icons/creditcard.svg'"
/>
</x-slot:slot>
</x-rapidez-ct::input.radio>
</div>
<graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }">
Expand Down
14 changes: 7 additions & 7 deletions resources/views/components/input/radio.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<label {{ $attributes->only('class')->class("relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded border bg-white p-2 py-5 sm:p-7 text-sm text-ct-primary") }}>
@slots(['wrapper'])

<label {{ ($slot->attributes ?? $wrapper->attributes)->merge(['class' => 'relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded border bg-white p-2 py-5 sm:p-7 text-sm text-ct-primary']) }}>
{{-- The 0 opacity and 1px width ensures the element is "visible" for the browser so the browser can focus which is useful for validation --}}
<input type="radio" {{ $attributes->except('class')->merge(['class' => 'peer opacity-0 border-0 w-px']) }}/>
<input type="radio" {{ $attributes->class(['peer opacity-0 border-0 w-px']) }}/>
<div class="absolute -inset-y-px -left-px w-1 rounded-l bg-ct-accent opacity-0 transition-all peer-checked:opacity-100"></div>
{{-- TODO: Check if we can't just style the radio? --}}
<div class="relative aspect-square w-6 shrink-0 rounded-full border bg-white transition-all after:absolute after:inset-1 after:rounded-full after:bg-ct-accent after:opacity-0 after:transition-all after:peer-checked:opacity-100 peer-disabled:bg-ct-inactive-100"></div>
@isset($slot)
<div class="flex w-full flex-wrap items-center justify-between gap-x-3">
{{ $slot }}
</div>
@endisset
<div class="flex w-full flex-wrap items-center justify-between gap-x-3">
{{ $wrapper }}{{ $slot }}
</div>
</label>