Etat Pur Design System

Template Input Qty 

<div class="flex flex-col w-full gap-y-1">
    <div class="input-wrapper flex flex-col relative w-full  ">

        <div class="input-qty-wrapper" x-data="{qty: 0 }">
            <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                </svg>

            </button>

            <input type="number" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

            <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                </svg>

            </button>
        </div>

    </div>
</div>
 
<div class="flex flex-col w-full gap-y-1">
    <div class="input-wrapper flex flex-col relative w-full {{ color is defined ? color : '' }} {{ class }}">

        <div class="input-qty-wrapper" x-data="{qty: {{ value is defined ? value : '0' }} }">
            {% render "@template-button" with {
                color: "dark", type: 'subtle', icon_type:"only-icon", size:"xs", border:true,
                button_class: "btn-qty decrement", disabled: disabled,
                button_attribute: ("@click='if(qty > 0) qty--' :class=\"qty === 0 ? 'disabled' : ''\"")|replace({'\"': '"'}),
                icon: {
                    name: "heroicons--minus-outline",
                }
            } %}

            <input type="number"
                    {{ name is defined and name ? 'name="' ~ name ~ '"' }}
                    {{ id is defined and id ? 'id="' ~ id ~ '"' }}
                    {{ input_attribute }}
                    {{ disabled is defined and disabled ? 'disabled' }}
                    {{ value is defined and value ? 'value="' ~ value ~ '"' }}
                   class="input-qty
                    {{ required is defined and required ? 'required' : '' }}
                    {{ state is defined and state ? state : '' }}"
                   placeholder=""
                   min="0"
                   x-model="qty"
                   :class="qty > 0 ? 'filled' : ''"
            >

            {% render "@template-button" with {
                color: "dark", type: 'subtle', icon_type:"only-icon", size:"xs", border:true,
                button_class: "btn-qty increment", disabled: disabled,
                button_attribute: "@click='qty++'",
                icon: {
                    name: "heroicons--plus-outline",
                }
            } %}
        </div>

        {% if label is defined and label %}
            <div class="sr-only">
                <label {{ id is defined and id ? 'for="' ~ id ~ '"' }}>
                    <span>{{ label }}</span>
                </label>
            </div>
        {% endif %}
    </div>
</div>
 
/* No context defined. */

No notes defined.