generated from boboko/starter
39 lines
1.7 KiB
PHP
39 lines
1.7 KiB
PHP
@props(['name' => 'quantity', 'value' => 1, 'min' => 1])
|
||
|
||
<div
|
||
data-controller="quantity"
|
||
data-quantity-min-value="{{ $min }}"
|
||
class="inline-flex items-stretch gap-2"
|
||
role="group"
|
||
aria-label="Quantity"
|
||
>
|
||
<input
|
||
type="number"
|
||
name="{{ $name }}"
|
||
id="{{ $name }}"
|
||
value="{{ $value }}"
|
||
min="{{ $min }}"
|
||
data-quantity-target="input"
|
||
data-action="change->quantity#clamp"
|
||
class="w-10 border border-black bg-transparent text-center font-display text-[19px] font-bold [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:outline-none"
|
||
aria-label="Quantity"
|
||
{{ $attributes }}
|
||
>
|
||
|
||
<div class="flex flex-col -ml-px gap-2 justify-between">
|
||
<button
|
||
type="button"
|
||
data-action="click->quantity#increment"
|
||
class="w-10 aspect-square border border-black flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black"
|
||
aria-label="Increase quantity"
|
||
>+</button>
|
||
<button
|
||
type="button"
|
||
data-action="click->quantity#decrement"
|
||
data-quantity-target="decrement"
|
||
class="aspect-square w-10 border border-black -mt-px flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-black"
|
||
aria-label="Decrease quantity"
|
||
>−</button>
|
||
</div>
|
||
</div>
|