@aotearoan/neon

import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor'; import { NeonSize } from '@/model/common/size/NeonSize'; import { NeonInputMode } from '@/model/user-input/input/NeonInputMode'; /** * * The NeonNumber component is the equivalent of an <input type="number" /> * 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. * * NeonNumber supports all the properties found on an HTML <input>. */ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ /** * The id the input */ id: { type: StringConstructor; default: null; }; /** * 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, 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; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ /** * The id the input */ id: { type: StringConstructor; default: null; }; /** * 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; }; }>> & Readonly<{ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { color: NeonFunctionalColor; id: string; disabled: boolean; size: NeonSize; placeholder: string; inputmode: NeonInputMode; modelValue: number; editable: boolean; percentage: boolean; locale: string; spinButtons: boolean; incrementLabel: string; decrementLabel: string; }, {}, { NeonButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ href: { type: StringConstructor; /** * The value of the number input. Either a valid number or null. */ default: null; }; label: { type: StringConstructor; default: null; }; size: { type: () => import("../../../neon").NeonButtonSize; default: import("../../../neon").NeonButtonSize; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; inverse: { type: BooleanConstructor; default: boolean; }; alternateColor: { type: () => NeonFunctionalColor; default: null; }; icon: { type: StringConstructor; default: null; }; iconAriaLabel: { type: StringConstructor; }; iconPosition: { type: () => import("../../../neon").NeonHorizontalPosition; default: import("../../../neon").NeonHorizontalPosition; }; buttonStyle: { type: () => import("../../../neon").NeonButtonStyle; default: import("../../../neon").NeonButtonStyle; }; buttonType: { type: () => import("../../../neon").NeonButtonType; default: import("../../../neon").NeonButtonType; }; state: { type: () => import("../../../neon").NeonState; default: import("../../../neon").NeonState; }; disabled: { type: BooleanConstructor; default: boolean; }; transparent: { type: BooleanConstructor; default: boolean; }; outline: { type: BooleanConstructor; /** * ARIA label for the decrement spinner button. */ default: boolean; }; circular: { type: BooleanConstructor; default: null; }; fullWidth: { type: BooleanConstructor; default: null; }; indicator: { type: BooleanConstructor; default: boolean; }; indicatorExpanded: { type: BooleanConstructor; default: null; }; }>, { iconName: import("vue").ComputedRef<string>; classes: import("vue").ComputedRef<(string | false | { [x: string]: boolean | "" | NeonFunctionalColor; 'neon-button--text-transparent': boolean; 'neon-button--disabled': boolean; 'neon-button--inverse': boolean; 'neon-button--circular': boolean; 'neon-button--no-outline': boolean; 'neon-button--full-width': boolean; 'neon-button--with-icon neon-button--icon-only': boolean | ""; 'neon-button--with-icon neon-button--icon-left': boolean | ""; 'neon-button--with-icon neon-button--icon-right': boolean | ""; })[]>; button: import("vue").Ref<HTMLElement | null, HTMLElement | null>; attrs: { [x: string]: unknown; }; sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; clickLink: () => void | undefined; clickButton: () => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ href: { type: StringConstructor; /** * The value of the number input. Either a valid number or null. */ default: null; }; label: { type: StringConstructor; default: null; }; size: { type: () => import("../../../neon").NeonButtonSize; default: import("../../../neon").NeonButtonSize; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; inverse: { type: BooleanConstructor; default: boolean; }; alternateColor: { type: () => NeonFunctionalColor; default: null; }; icon: { type: StringConstructor; default: null; }; iconAriaLabel: { type: StringConstructor; }; iconPosition: { type: () => import("../../../neon").NeonHorizontalPosition; default: import("../../../neon").NeonHorizontalPosition; }; buttonStyle: { type: () => import("../../../neon").NeonButtonStyle; default: import("../../../neon").NeonButtonStyle; }; buttonType: { type: () => import("../../../neon").NeonButtonType; default: import("../../../neon").NeonButtonType; }; state: { type: () => import("../../../neon").NeonState; default: import("../../../neon").NeonState; }; disabled: { type: BooleanConstructor; default: boolean; }; transparent: { type: BooleanConstructor; default: boolean; }; outline: { type: BooleanConstructor; /** * ARIA label for the decrement spinner button. */ default: boolean; }; circular: { type: BooleanConstructor; default: null; }; fullWidth: { type: BooleanConstructor; default: null; }; indicator: { type: BooleanConstructor; default: boolean; }; indicatorExpanded: { type: BooleanConstructor; default: null; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; }>, { color: NeonFunctionalColor; icon: string; label: string; inverse: boolean; disabled: boolean; href: string; size: import("../../../neon").NeonButtonSize; alternateColor: NeonFunctionalColor; outline: boolean; iconPosition: import("../../../neon").NeonHorizontalPosition; buttonStyle: import("../../../neon").NeonButtonStyle; buttonType: import("../../../neon").NeonButtonType; state: import("../../../neon").NeonState; transparent: boolean; circular: boolean; fullWidth: boolean; indicator: boolean; indicatorExpanded: boolean; }, {}, { NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ expanded: { type: BooleanConstructor; default: boolean; }; inverse: { type: BooleanConstructor; default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; color: { type: () => NeonFunctionalColor; default: null; }; }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ expanded: { type: BooleanConstructor; default: boolean; }; inverse: { type: BooleanConstructor; default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; color: { type: () => NeonFunctionalColor; default: null; }; }>> & Readonly<{}>, { color: NeonFunctionalColor; inverse: boolean; disabled: boolean; expanded: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>, { sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; icon: import("vue").ComputedRef<string | undefined>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { color: NeonFunctionalColor; id: string; inverse: boolean; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; NeonLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ href: { type: StringConstructor; default: null; }; noStyle: { type: BooleanConstructor; default: boolean; }; outlineStyle: { type: () => import("../../../neon").NeonOutlineStyle; default: import("../../../neon").NeonOutlineStyle; }; externalIndicator: { type: BooleanConstructor; default: boolean; }; }>, { neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>; routerUrl: import("vue").ComputedRef<string | undefined>; sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; activeRoute: import("vue").ComputedRef<boolean | "" | undefined>; exactRoute: import("vue").ComputedRef<boolean | "" | undefined>; onClick: () => void; onSpace: () => Promise<void>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ href: { type: StringConstructor; default: null; }; noStyle: { type: BooleanConstructor; default: boolean; }; outlineStyle: { type: () => import("../../../neon").NeonOutlineStyle; default: import("../../../neon").NeonOutlineStyle; }; externalIndicator: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; }>, { href: string; noStyle: boolean; outlineStyle: import("../../../neon").NeonOutlineStyle; externalIndicator: boolean; }, {}, { NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>, { sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; icon: import("vue").ComputedRef<string | undefined>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { color: NeonFunctionalColor; id: string; inverse: boolean; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; NeonFieldGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ indicatorStyle: { type: () => import("../../../neon").NeonInputIndicatorStyle; default: import("../../../neon").NeonInputIndicatorStyle; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; disabled: { type: BooleanConstructor; default: boolean; /** * The id the input */ }; }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ indicatorStyle: { type: () => import("../../../neon").NeonInputIndicatorStyle; default: import("../../../neon").NeonInputIndicatorStyle; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; disabled: { type: BooleanConstructor; default: boolean; /** * The id the input */ }; }>> & Readonly<{}>, { color: NeonFunctionalColor; disabled: boolean; indicatorStyle: import("../../../neon").NeonInputIndicatorStyle; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; NeonInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ id: { type: StringConstructor; default: null; }; modelValue: { type: StringConstructor; default: null; }; type: { type: () => import("../../../neon").NeonInputType; default: import("../../../neon").NeonInputType; }; placeholder: { type: StringConstructor; default: null; }; size: { type: () => NeonSize; default: NeonSize; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; inputmode: { type: () => NeonInputMode; default: NeonInputMode; }; autocomplete: { type: StringConstructor; default: string; }; state: { type: () => import("../../../neon").NeonState; default: import("../../../neon").NeonState; }; rows: { type: NumberConstructor; default: null; }; icon: { type: StringConstructor; /** * The rounding precision for display formatting. */ default: null; }; iconReadonly: { type: BooleanConstructor; default: boolean; }; hideIcon: { type: BooleanConstructor; default: boolean; }; tabindex: { type: NumberConstructor; default: number; }; disabled: { type: BooleanConstructor; default: boolean; }; stateHighlight: { type: BooleanConstructor; default: boolean; }; stateIcon: { type: BooleanConstructor; default: boolean; }; maxlength: { type: NumberConstructor; default: null; }; maxlengthLabel: { type: StringConstructor; default: string; }; debounce: { type: NumberConstructor; default: undefined; }; }>, { neonInput: import("vue").Ref<HTMLElement | null, HTMLElement | null>; focused: import("vue").Ref<boolean, boolean>; sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; iconVisible: import("vue").ComputedRef<string | boolean | undefined>; iconName: import("vue").ComputedRef<string | undefined>; iconColor: import("vue").ComputedRef<NeonFunctionalColor>; computedPlaceholder: import("vue").ComputedRef<string>; counterLabel: import("vue").ComputedRef<string | null>; focus: () => void; click: () => void; onFocus: () => void; onBlur: () => void; iconClicked: ($event: Event) => void; changeValue: (event: InputEvent) => void; onKeyDown: (event: KeyboardEvent) => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "icon-click")[], "update:modelValue" | "blur" | "focus" | "icon-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ id: { type: StringConstructor; default: null; }; modelValue: { type: StringConstructor; default: null; }; type: { type: () => import("../../../neon").NeonInputType; default: import("../../../neon").NeonInputType; }; placeholder: { type: StringConstructor; default: null; }; size: { type: () => NeonSize; default: NeonSize; }; color: { type: () => NeonFunctionalColor; default: NeonFunctionalColor; }; inputmode: { type: () => NeonInputMode; default: NeonInputMode; }; autocomplete: { type: StringConstructor; default: string; }; state: { type: () => import("../../../neon").NeonState; default: import("../../../neon").NeonState; }; rows: { type: NumberConstructor; default: null; }; icon: { type: StringConstructor; /** * The rounding precision for display formatting. */ default: null; }; iconReadonly: { type: BooleanConstructor; default: boolean; }; hideIcon: { type: BooleanConstructor; default: boolean; }; tabindex: { type: NumberConstructor; default: number; }; disabled: { type: BooleanConstructor; default: boolean; }; stateHighlight: { type: BooleanConstructor; default: boolean; }; stateIcon: { type: BooleanConstructor; default: boolean; }; maxlength: { type: NumberConstructor; default: null; }; maxlengthLabel: { type: StringConstructor; default: string; }; debounce: { type: NumberConstructor; default: undefined; }; }>> & Readonly<{ onFocus?: ((...args: any[]) => any) | undefined; onBlur?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; "onIcon-click"?: ((...args: any[]) => any) | undefined; }>, { color: NeonFunctionalColor; icon: string; type: import("../../../neon").NeonInputType; id: string; disabled: boolean; size: NeonSize; placeholder: string; tabindex: number; inputmode: NeonInputMode; modelValue: string; state: import("../../../neon").NeonState; autocomplete: string; rows: number; iconReadonly: boolean; hideIcon: boolean; stateHighlight: boolean; stateIcon: boolean; maxlength: number; maxlengthLabel: string; debounce: number; }, {}, { NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>, { sanitizedAttributes: import("vue").ComputedRef<{ [x: string]: unknown; }>; icon: import("vue").ComputedRef<string | undefined>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ name: { type: StringConstructor; required: true; }; id: { type: StringConstructor; default: null; }; color: { type: () => NeonFunctionalColor; default: null; }; inverse: { type: BooleanConstructor; /** * Placeholder text to display in the input */ default: boolean; }; disabled: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{}>, { color: NeonFunctionalColor; id: string; inverse: boolean; disabled: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; export default _default;