🏷️ Added Input component interface file
This commit is contained in:
Paul Valerie GOMA
parent
29a0094b50
commit
2bf9276157
251
src/components/input/IVInput.type.ts
Normal file
251
src/components/input/IVInput.type.ts
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
import type { HintedString, Nullable} from '@primevue/core';
|
||||
import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
|
||||
|
||||
/**
|
||||
* Interface representing the props for the InputText component.
|
||||
*/
|
||||
export interface IInputText {
|
||||
/**
|
||||
* The unique identifier for the input element.
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* The ID used to associate the input with a description element for accessibility.
|
||||
*/
|
||||
descriptionId?: string;
|
||||
|
||||
/**
|
||||
* Optional hint text displayed below the input.
|
||||
*/
|
||||
hint?: string;
|
||||
|
||||
/**
|
||||
* Indicates whether the input is in an invalid state.
|
||||
*/
|
||||
isInvalid?: boolean;
|
||||
|
||||
/**
|
||||
* Indicates whether the input is in a valid state.
|
||||
*/
|
||||
isValid?: boolean;
|
||||
|
||||
/**
|
||||
* If true, renders a <textarea> instead of a standard input.
|
||||
*/
|
||||
isTextarea?: boolean;
|
||||
|
||||
/**
|
||||
* If true, wraps the input in an additional wrapper element.
|
||||
*/
|
||||
isWithWrapper?: boolean;
|
||||
|
||||
/**
|
||||
* Controls the visibility of the label. If false, the label is visually hidden.
|
||||
*/
|
||||
labelVisible?: boolean;
|
||||
|
||||
/**
|
||||
* The text content of the label associated with the input.
|
||||
*/
|
||||
label?: string;
|
||||
|
||||
/**
|
||||
* Custom CSS class applied to the label element.
|
||||
*/
|
||||
labelClass?: string;
|
||||
|
||||
/**
|
||||
* The bound value of the input, supporting string, number, or null.
|
||||
*/
|
||||
modelValue?: string | number | null;
|
||||
|
||||
/**
|
||||
* Custom CSS class applied to the wrapper element.
|
||||
*/
|
||||
wrapperClass?: string;
|
||||
|
||||
/**
|
||||
* If true, the input type is set to "password" to mask the input content.
|
||||
*/
|
||||
isPassword?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in Password component.
|
||||
*/
|
||||
export interface PasswordProps {
|
||||
/**
|
||||
* Value of the component.
|
||||
*/
|
||||
modelValue?: Nullable<string>;
|
||||
/**
|
||||
* The default value for the input when not controlled by `modelValue`.
|
||||
*/
|
||||
defaultValue?: Nullable<string>;
|
||||
/**
|
||||
* The name attribute for the element, typically used in form submissions.
|
||||
*/
|
||||
name?: string | undefined;
|
||||
/**
|
||||
* Text to prompt password entry. Defaults to PrimeVue Locale configuration.
|
||||
*/
|
||||
promptLabel?: string | undefined;
|
||||
/**
|
||||
* Regex for a medium level password.
|
||||
* @defaultValue ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})
|
||||
*/
|
||||
mediumRegex?: string | RegExp | undefined;
|
||||
/**
|
||||
* Regex for a strong level password.
|
||||
* @defaultValue ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
|
||||
*/
|
||||
strongRegex?: string | RegExp | undefined;
|
||||
/**
|
||||
* Text for a weak password. Defaults to PrimeVue Locale configuration.
|
||||
*/
|
||||
weakLabel?: string | undefined;
|
||||
/**
|
||||
* Text for a medium password. Defaults to PrimeVue Locale configuration.
|
||||
*/
|
||||
mediumLabel?: string | undefined;
|
||||
/**
|
||||
* Text for a strong password. Defaults to PrimeVue Locale configuration.
|
||||
*/
|
||||
strongLabel?: string | undefined;
|
||||
/**
|
||||
* Whether to show the strength indicator or not.
|
||||
* @defaultValue true
|
||||
*/
|
||||
feedback?: boolean | undefined;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
||||
* @defaultValue body
|
||||
*/
|
||||
appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
|
||||
/**
|
||||
* Whether to show an icon to display the password as plain text.
|
||||
* @defaultValue false
|
||||
*/
|
||||
toggleMask?: boolean | undefined;
|
||||
/**
|
||||
* Icon to hide displaying the password as plain text.
|
||||
*/
|
||||
maskIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to show displaying the password as plain text.
|
||||
*/
|
||||
unmaskIcon?: string | undefined;
|
||||
/**
|
||||
* Defines the size of the component.
|
||||
*/
|
||||
size?: HintedString<'small' | 'large'> | 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 null
|
||||
*/
|
||||
variant?: HintedString<'outlined' | 'filled'> | undefined | null;
|
||||
/**
|
||||
* Placeholder text for the input.
|
||||
*/
|
||||
placeholder?: string | undefined;
|
||||
/**
|
||||
* When present, it specifies that an input field must be filled out before submitting the form.
|
||||
* @defaultValue false
|
||||
*/
|
||||
required?: boolean | undefined;
|
||||
/**
|
||||
* Spans 100% width of the container when enabled.
|
||||
* @defaultValue null
|
||||
*/
|
||||
fluid?: boolean | undefined;
|
||||
/**
|
||||
* When present, it specifies that an input element should automatically get focus when the page loads.
|
||||
* @defaultValue null
|
||||
*/
|
||||
autofocus?: boolean | undefined;
|
||||
/**
|
||||
* Identifier of the underlying input element.
|
||||
*/
|
||||
inputId?: string | undefined;
|
||||
/**
|
||||
* Inline style of the input field.
|
||||
*/
|
||||
inputStyle?: object | undefined;
|
||||
/**
|
||||
* Style class of the input field.
|
||||
*/
|
||||
inputClass?: string | object | undefined;
|
||||
/**
|
||||
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
|
||||
*/
|
||||
inputProps?: InputHTMLAttributes | undefined;
|
||||
/**
|
||||
* Identifier of the underlying overlay panel element.
|
||||
*/
|
||||
panelId?: string | undefined;
|
||||
/**
|
||||
* Style class of the overlay panel.
|
||||
*/
|
||||
panelClass?: string | object | undefined;
|
||||
/**
|
||||
* Inline style of the overlay panel.
|
||||
*/
|
||||
panelStyle?: object | undefined;
|
||||
/**
|
||||
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
||||
*/
|
||||
panelProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
* Identifier of the underlying overlay element.
|
||||
*/
|
||||
overlayId?: string | undefined;
|
||||
/**
|
||||
* Style class of the overlay.
|
||||
*/
|
||||
overlayClass?: string | object | undefined;
|
||||
/**
|
||||
* Inline style of the overlay.
|
||||
*/
|
||||
overlayStyle?: object | undefined;
|
||||
/**
|
||||
* Used to pass all properties of the HTMLDivElement to the overlay inside the component.
|
||||
*/
|
||||
overlayProps?: HTMLAttributes | 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;
|
||||
/**
|
||||
* Form control object, typically used for handling validation and form state.
|
||||
*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Extended interface for the VInputText component.
|
||||
* Combines selected properties from PasswordProps and IInputText,
|
||||
* with additional support for password hints.
|
||||
*/
|
||||
export default interface IVInputText
|
||||
extends Partial<Omit<PasswordProps, 'modelValue'>>,
|
||||
Partial<IInputText> {
|
||||
/**
|
||||
* Hint(s) displayed to guide the user when entering a password.
|
||||
* Can be a single string or an array of strings.
|
||||
*/
|
||||
passwordHint?: string | Array<string>;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user