@coreui/vue-pro
Version:
UI Components Library for Vue.js
279 lines (278 loc) • 8.39 kB
TypeScript
declare const COneTimePassword: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
*/
ariaLabel: {
type: FunctionConstructor;
default: (index: number, total: number) => string;
};
/**
* Automatically submit the form when all one time password fields are filled.
*/
autoSubmit: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable all one time password (OTP) input fields.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Initial value for uncontrolled Vue.js one time password input.
*/
defaultValue: (NumberConstructor | StringConstructor)[];
/**
* Provide valuable, actionable feedback.
*/
feedback: StringConstructor;
/**
* Provide valuable, actionable feedback.
*/
feedbackInvalid: StringConstructor;
/**
* Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
*/
feedbackValid: StringConstructor;
/**
* A string of all className you want applied to the floating label wrapper.
*/
floatingClassName: StringConstructor;
/**
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
*/
floatingLabel: StringConstructor;
/**
* ID attribute for the hidden input field.
*/
id: StringConstructor;
/**
* Set component validation state to invalid.
*/
invalid: BooleanConstructor;
/**
* Add a caption for a component.
*/
label: StringConstructor;
/**
* Enforce sequential input (users must fill fields in order).
*/
linear: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show input as password (masked characters).
*/
masked: {
type: BooleanConstructor;
default: boolean;
};
/**
* The default name for a value passed using v-model.
*/
modelValue: (NumberConstructor | StringConstructor)[];
/**
* Name attribute for the hidden input field.
*/
name: StringConstructor;
/**
* Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
*/
placeholder: StringConstructor;
/**
* Make Vue.js OTP input component read-only.
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Makes the input field required for form validation.
*/
required: {
type: BooleanConstructor;
default: boolean;
};
/**
* Sets the visual size of the Vue.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
*/
size: {
type: StringConstructor;
validator: (value: string) => boolean;
};
/**
* Add helper text to the component.
*/
text: StringConstructor;
/**
* Display validation feedback in a styled tooltip.
*/
tooltipFeedback: BooleanConstructor;
/**
* Input validation type: 'number' for digits only, or 'text' for free text.
*/
type: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
/**
* Set component validation state to valid.
*/
valid: BooleanConstructor;
/**
* The current value of the one time password input.
*/
value: (NumberConstructor | StringConstructor)[];
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "complete")[], "change" | "update:modelValue" | "complete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
*/
ariaLabel: {
type: FunctionConstructor;
default: (index: number, total: number) => string;
};
/**
* Automatically submit the form when all one time password fields are filled.
*/
autoSubmit: {
type: BooleanConstructor;
default: boolean;
};
/**
* Disable all one time password (OTP) input fields.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Initial value for uncontrolled Vue.js one time password input.
*/
defaultValue: (NumberConstructor | StringConstructor)[];
/**
* Provide valuable, actionable feedback.
*/
feedback: StringConstructor;
/**
* Provide valuable, actionable feedback.
*/
feedbackInvalid: StringConstructor;
/**
* Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
*/
feedbackValid: StringConstructor;
/**
* A string of all className you want applied to the floating label wrapper.
*/
floatingClassName: StringConstructor;
/**
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
*/
floatingLabel: StringConstructor;
/**
* ID attribute for the hidden input field.
*/
id: StringConstructor;
/**
* Set component validation state to invalid.
*/
invalid: BooleanConstructor;
/**
* Add a caption for a component.
*/
label: StringConstructor;
/**
* Enforce sequential input (users must fill fields in order).
*/
linear: {
type: BooleanConstructor;
default: boolean;
};
/**
* Show input as password (masked characters).
*/
masked: {
type: BooleanConstructor;
default: boolean;
};
/**
* The default name for a value passed using v-model.
*/
modelValue: (NumberConstructor | StringConstructor)[];
/**
* Name attribute for the hidden input field.
*/
name: StringConstructor;
/**
* Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
*/
placeholder: StringConstructor;
/**
* Make Vue.js OTP input component read-only.
*/
readonly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Makes the input field required for form validation.
*/
required: {
type: BooleanConstructor;
default: boolean;
};
/**
* Sets the visual size of the Vue.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
*/
size: {
type: StringConstructor;
validator: (value: string) => boolean;
};
/**
* Add helper text to the component.
*/
text: StringConstructor;
/**
* Display validation feedback in a styled tooltip.
*/
tooltipFeedback: BooleanConstructor;
/**
* Input validation type: 'number' for digits only, or 'text' for free text.
*/
type: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
/**
* Set component validation state to valid.
*/
valid: BooleanConstructor;
/**
* The current value of the one time password input.
*/
value: (NumberConstructor | StringConstructor)[];
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onComplete?: ((...args: any[]) => any) | undefined;
}>, {
invalid: boolean;
type: string;
disabled: boolean;
valid: boolean;
tooltipFeedback: boolean;
required: boolean;
readonly: boolean;
ariaLabel: Function;
autoSubmit: boolean;
linear: boolean;
masked: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export { COneTimePassword };