@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
403 lines (402 loc) • 11.8 kB
TypeScript
import { NeonInputType } from '@/model/user-input/input/NeonInputType';
import { NeonState } from '@/model/common/state/NeonState';
import { NeonSize } from '@/model/common/size/NeonSize';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonInputMode } from '@/model/user-input/input/NeonInputMode';
/**
* Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The id the input
*/
id: {
type: StringConstructor;
default: null;
};
/**
* The value of the input
*/
modelValue: {
type: StringConstructor;
default: null;
};
/**
* The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:
* * file (use <a href="/user-input/file">NeonFile</a>)
* * password (use <a href="/user-input/password">NeonPassword</a>)
*/
type: {
type: () => NeonInputType;
default: NeonInputType;
};
/**
* Placeholder text to display in the input
*/
placeholder: {
type: StringConstructor;
default: null;
};
/**
* Size of the input
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* Color of the input
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
*/
inputmode: {
type: () => NeonInputMode;
default: NeonInputMode;
};
/**
* The HTML autocomplete mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">here</a>.
* NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.
*/
autocomplete: {
type: StringConstructor;
default: string;
};
/**
* The state of the input
*/
state: {
type: () => NeonState;
default: NeonState;
};
/**
* The number of rows to display in the case of a textarea
*/
rows: {
type: NumberConstructor;
default: null;
};
/**
* The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of
* NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).
*/
icon: {
type: StringConstructor;
default: null;
};
/**
* Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.
*/
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Hide the icon button, e.g. the X button to clear the input's contents.
*/
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
/**
* Tabindex to assign to the input.
*/
tabindex: {
type: NumberConstructor;
default: number;
};
/**
* The disabled state of the input
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* When the state is success or error, display the field with the state color indicator, e.g. border or background
* color.
*/
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
/**
* When the state is success or error, display the state icon.
*/
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
/**
* The character limit for a textarea.
*/
maxlength: {
type: NumberConstructor;
default: null;
};
/**
* The label template for the character limit. This is a string in the vue-i18n Pluralization format with a
* <em>{count}</em> placeholder.
*/
maxlengthLabel: {
type: StringConstructor;
default: string;
};
/**
* Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).
*/
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<{
/**
* The id the input
*/
id: {
type: StringConstructor;
default: null;
};
/**
* The value of the input
*/
modelValue: {
type: StringConstructor;
default: null;
};
/**
* The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:
* * file (use <a href="/user-input/file">NeonFile</a>)
* * password (use <a href="/user-input/password">NeonPassword</a>)
*/
type: {
type: () => NeonInputType;
default: NeonInputType;
};
/**
* Placeholder text to display in the input
*/
placeholder: {
type: StringConstructor;
default: null;
};
/**
* Size of the input
*/
size: {
type: () => NeonSize;
default: NeonSize;
};
/**
* Color of the input
*/
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
/**
* The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
*/
inputmode: {
type: () => NeonInputMode;
default: NeonInputMode;
};
/**
* The HTML autocomplete mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">here</a>.
* NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.
*/
autocomplete: {
type: StringConstructor;
default: string;
};
/**
* The state of the input
*/
state: {
type: () => NeonState;
default: NeonState;
};
/**
* The number of rows to display in the case of a textarea
*/
rows: {
type: NumberConstructor;
default: null;
};
/**
* The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of
* NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).
*/
icon: {
type: StringConstructor;
default: null;
};
/**
* Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.
*/
iconReadonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Hide the icon button, e.g. the X button to clear the input's contents.
*/
hideIcon: {
type: BooleanConstructor;
default: boolean;
};
/**
* Tabindex to assign to the input.
*/
tabindex: {
type: NumberConstructor;
default: number;
};
/**
* The disabled state of the input
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* When the state is success or error, display the field with the state color indicator, e.g. border or background
* color.
*/
stateHighlight: {
type: BooleanConstructor;
default: boolean;
};
/**
* When the state is success or error, display the state icon.
*/
stateIcon: {
type: BooleanConstructor;
default: boolean;
};
/**
* The character limit for a textarea.
*/
maxlength: {
type: NumberConstructor;
default: null;
};
/**
* The label template for the character limit. This is a string in the vue-i18n Pluralization format with a
* <em>{count}</em> placeholder.
*/
maxlengthLabel: {
type: StringConstructor;
default: string;
};
/**
* Debounce time in ms. If no value is provided, the default value set in NeonDebounceUtils is used (=0ms).
*/
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: NeonInputType;
id: string;
disabled: boolean;
size: NeonSize;
placeholder: string;
tabindex: number;
inputmode: NeonInputMode;
modelValue: string;
state: 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;
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;
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>;
export default _default;