builders

InputNumber builder

Builder class for creating a number input with increment/decrement buttons. Handles value clamping, step, decimals, long-press repeat, and ARIA labels.

Usage

<script>
    import { InputNumberBuilder } from 'svxui/builders/input-number';

    const inputNumber = new InputNumberBuilder({
        value: 0,
        min: 0,
        max: 100,
        step: 1
    });
</script>

<div>
    <button {...inputNumber.decrementAttrs}>-</button>
    <input {...inputNumber.inputAttrs} />
    <button {...inputNumber.incrementAttrs}>+</button>
</div>

Type Definition

InputNumberBuilder

export declare class InputNumberBuilder {
    readonly canDecrement: any;
    readonly canIncrement: any;
    constructor(options?: InputNumberBuilderOptions);
    get value(): number | undefined | null;
    get min(): number | undefined | null;
    get max(): number | undefined | null;
    get step(): number | undefined | null;
    get decimals(): number | undefined;

    /** Formatted value (string) for display */
    get formatted(): string;
    increment: () => void;
    decrement: () => void;
    reset: (to?: number) => void;

    /**
     * InputNumber input attributes
     */
    get inputAttrs(): InputNumberInputAttributes;

    /**
     * InputNumber decrement button attributes
     */
    get decrementAttrs(): InputNumberDecrementAttributes;

    /**
     * InputNumber increment button attributes
     */
    get incrementAttrs(): InputNumberIncrementAttributes;
}

InputNumberBuilderOptions

/**
 * Input-number state options
 */
export type InputNumberBuilderOptions = {
    value: number | undefined | null;
    min?: number | undefined | null;
    max?: number | undefined | null;
    step?: number | undefined | null;
    decimals?: number;
    disabled?: boolean;
    onValueChange?: (value: number) => void;
};

/**
 * Input-number Input attributes
 */
export type InputNumberInputAttributes = {
    readonly id: `input-number-input-${string}`;
    readonly type: 'number';
    readonly value: number | undefined | null;
    readonly min: number | undefined | null;
    readonly max: number | undefined | null;
    readonly step: number | undefined | null;
    readonly oninput: (e: Event) => void;
};

/**
 * Input-number decrement button attributes
 */
export type InputNumberDecrementAttributes = {
    readonly id: `input-number-decrement-${string}`;
    readonly type: 'button';
    readonly disabled: boolean;
    readonly 'aria-label': 'Decrement';
    readonly onclick: () => void;
};

/**
 * Input-number increment button attributes
 */
export type InputNumberIncrementAttributes = {
    readonly id: `input-number-increment-${string}`;
    readonly type: 'button';
    readonly disabled: boolean;
    readonly 'aria-label': 'Increment';
    readonly onclick: () => void;
};