@aotearoan/neon/dist/src/components/user-input/number/NeonNumber.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import { NeonSize } from '@/common/enums/NeonSize';
import { NeonInputMode } from '@/common/enums/NeonInputMode';
/**
 * <p>
 *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type="number" /&gt;</strong>
 *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and
 *   also pasting of values in the user's locale, e.g. 6,543.12.
 * </p>
 * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>
 */
declare const _default: import("vue").DefineComponent<{
    /**
     * The value of the number input. Either a valid number or null.
     */
    modelValue: {
        type: NumberConstructor;
        default: null;
    };
    /**
     * The minimum value the input can accept.
     */
    min: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The maximum value the input can accept.
     */
    max: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The step value for the spin buttons.
     */
    step: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The component color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The component size.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Placeholder text to display in the input
     */
    placeholder: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether the component is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enable/disable direct editing of the value.
     */
    editable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
     */
    spinButtons: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.
     */
    percentage: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The rounding precision for display formatting.
     */
    decimals: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in
     * the template string. e.g. value = 90, ${value} => $90.
     */
    valueTemplate: {
        type: StringConstructor;
        required: false;
    };
    /**
     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
     */
    inputmode: {
        type: () => NeonInputMode;
        default: NeonInputMode;
    };
    /**
     * ARIA label for the increment spinner button.
     */
    incrementLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * ARIA label for the decrement spinner button.
     */
    decrementLabel: {
        type: StringConstructor;
        default: string;
    };
}, {
    focus: import("vue").Ref<boolean>;
    sanitizedAttributes: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    computedDecimals: import("vue").ComputedRef<number | undefined>;
    computedRawDecimals: import("vue").ComputedRef<number | undefined>;
    computedValue: import("vue").ComputedRef<number>;
    computedStep: import("vue").ComputedRef<number>;
    displayValue: import("vue").ComputedRef<string | number>;
    valueChanged: (value: string) => void;
    increment: () => void;
    decrement: () => void;
    onFocus: () => boolean;
    onBlur: () => boolean;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The value of the number input. Either a valid number or null.
     */
    modelValue: {
        type: NumberConstructor;
        default: null;
    };
    /**
     * The minimum value the input can accept.
     */
    min: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The maximum value the input can accept.
     */
    max: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The step value for the spin buttons.
     */
    step: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The component color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The component size.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Placeholder text to display in the input
     */
    placeholder: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether the component is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enable/disable direct editing of the value.
     */
    editable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
     */
    spinButtons: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.
     */
    percentage: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The rounding precision for display formatting.
     */
    decimals: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in
     * the template string. e.g. value = 90, ${value} => $90.
     */
    valueTemplate: {
        type: StringConstructor;
        required: false;
    };
    /**
     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
     */
    inputmode: {
        type: () => NeonInputMode;
        default: NeonInputMode;
    };
    /**
     * ARIA label for the increment spinner button.
     */
    incrementLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * ARIA label for the decrement spinner button.
     */
    decrementLabel: {
        type: StringConstructor;
        default: string;
    };
}>> & {
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
    disabled: boolean;
    percentage: boolean;
    locale: string;
    size: NeonSize;
    color: NeonFunctionalColor;
    modelValue: number;
    placeholder: string;
    inputmode: NeonInputMode;
    editable: boolean;
    spinButtons: boolean;
    incrementLabel: string;
    decrementLabel: string;
}, {}>;
export default _default;