accessibleprimevue
Version:
Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+
409 lines (393 loc) • 12.6 kB
TypeScript
/**
*
* InputNumber is an input component to provide numerical input.
*
* [Live Demo](https://www.primevue.org/inputnumber/)
*
* @module inputnumber
*
*/
import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { InputTextPassThroughOptions } from '../inputtext';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
export declare type RoundingMode = 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
export declare type InputNumberPassThroughOptionType<T = any> = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions<T>) => InputNumberPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputNumberPassThroughMethodOptions<T> {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: InputNumberProps;
/**
* Defines current inline state.
*/
state: InputNumberState;
/**
* Defines parent instance.
*/
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom shared passthrough(pt) option method.
*/
export interface InputNumberSharedPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: InputNumberProps;
/**
* Defines current inline state.
*/
state: InputNumberState;
}
/**
* Custom input event.
* @see {@link InputNumberEmits.input}
*/
export interface InputNumberInputEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* New value
*/
value: string | number | undefined;
/**
* currentValue
*/
formattedValue: string;
}
/**
* Custom blur event.
* @see {@link InputNumberEmits.blur}
*/
export interface InputNumberBlurEvent {
/**
* Browser event
*/
originalEvent: Event;
/**
* Input value
*/
value: string;
}
/**
* Custom passthrough(pt) options.
* @see {@link InputNumberProps.pt}
*/
export interface InputNumberPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptions}
*/
input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the button group's DOM element.
*/
buttonGroup?: InputNumberPassThroughOptionType<T>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
incrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
decrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface InputNumberPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in InputNumber component.
*/
export interface InputNumberState {
/**
* Current value state as a number.
*/
d_modelValue: number;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
* Defines valid properties in InputNumber component.
*/
export interface InputNumberProps {
/**
* Value of the component.
*/
modelValue?: Nullable<number>;
/**
* Whether to format the value.
* @defaultValue true
*/
format?: boolean | undefined;
/**
* Displays spinner buttons.
* @defaultValue false
*/
showButtons?: boolean | undefined;
/**
* Layout of the buttons.
* @defaultValue stacked
*/
buttonLayout?: 'stacked' | 'horizontal' | 'vertical' | undefined;
/**
* Style class of the increment button.
*/
incrementButtonClass?: string | undefined;
/**
* Style class of the decrement button.
*/
decrementButtonClass?: string | undefined;
/**
* Style class of the increment button.
* @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
*/
incrementButtonIcon?: string | undefined;
/**
* Style class of the decrement button.
* @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
*/
decrementButtonIcon?: string | undefined;
/**
* Locale to be used in formatting.
*/
locale?: string | undefined;
/**
* The locale matching algorithm to use. Possible values are 'lookup' and 'best fit'; the default is 'best fit'.
* See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_negotiation) for details.
* @defaultValue best fit
*/
localeMatcher?: 'lookup' | 'best fit' | undefined;
/**
* Defines the behavior of the component.
* @defaultValue decimal
*/
mode?: 'decimal' | 'currency' | undefined;
/**
* Text to display before the value.
*/
prefix?: string | undefined;
/**
* Text to display after the value.
*/
suffix?: string | undefined;
/**
* The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB.
* There is no default value; if the style is 'currency', the currency property must be provided.
*/
currency?: string | undefined;
/**
* How to display the currency in currency formatting. Possible values are 'symbol' to use a localized currency symbol such as €, 'code' to use the ISO currency code, 'name' to use a localized currency name such as 'dollar'.
* @defaultValue symbol
*/
currencyDisplay?: string | undefined;
/**
* Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
* @defaultValue true
*/
useGrouping?: boolean | undefined;
/**
* The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0;
* the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
*/
minFractionDigits?: number | undefined;
/**
* The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3;
* the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
*/
maxFractionDigits?: number | undefined;
/**
* How decimals should be rounded.
* The default value is `"halfExpand"`, [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
*/
roundingMode?: RoundingMode;
/**
* Mininum boundary value.
*/
min?: number | undefined;
/**
* Maximum boundary value.
*/
max?: number | undefined;
/**
* Step factor to increment/decrement the value.
* @defaultValue 1
*/
step?: number | undefined;
/**
* Determines whether the input field is empty.
* @defaultValue true
*/
allowEmpty?: boolean | undefined;
/**
* Highlights automatically the input value.
* @defaultValue false
*/
highlightOnFocus?: boolean | undefined;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false
*/
invalid?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Specifies the input variant of the component.
* @defaultValue outlined
*/
variant?: 'outlined' | 'filled' | undefined;
/**
* When present, it specifies that an input field is read-only.
* @defaultValue false
*/
readonly?: boolean | undefined;
/**
* Placeholder text for the input.
*/
placeholder?: string | undefined;
/**
* Identifier of the focus input to match a label defined for the chips.
*/
inputId?: string | undefined;
/**
* Style class of the input field.
*/
inputClass?: string | object | undefined;
/**
* Inline style of the input field.
*/
inputStyle?: object | undefined;
/**
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to increment button inside the component.
*/
incrementButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to decrement button inside the component.
*/
decrementButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledby?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
ariaLabel?: string | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {InputNumberPassThroughOptions}
*/
pt?: PassThrough<InputNumberPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in InputNumber component.
*/
export interface InputNumberSlots {
/**
* Custom increment button icon template.
*/
incrementbuttonicon(): VNode[];
/**
* Custom decrement button icon template.
*/
decrementbuttonicon(): VNode[];
}
/**
* Defines valid emits in InputNumber component.
*/
export interface InputNumberEmits {
/**
* Emitted when the value changes.
* @param {number} value - New value.
*/
'update:modelValue'(value: number): void;
/**
* Callback to invoke when the value is entered.
* @param {InputNumberInputEvent} event - Custom input event.
*/
input(event: InputNumberInputEvent): void;
/**
* Callback to invoke on focus of input field.
* @param {Event} event - Focus event
*/
focus(event: Event): void;
/**
* Callback to invoke on blur of input field.
* @param {InputNumberBlurEvent} event - Blur event
*/
blur(event: InputNumberBlurEvent): void;
}
/**
* **PrimeVue - InputNumber**
*
* _InputNumber is an input component to provide numerical input._
*
* [Live Demo](https://www.primevue.org/inputnumber/)
* --- ---
* 
*
* @group Component
*/
declare class InputNumber extends ClassComponent<InputNumberProps, InputNumberSlots, InputNumberEmits> {
/**
* Returns Intl.NumberFormat object.
*
* @memberof InputNumber
*/
getFormatter: () => Intl.NumberFormat | undefined;
}
declare module 'vue' {
export interface GlobalComponents {
InputNumber: GlobalComponentConstructor<InputNumber>;
}
}
export default InputNumber;