🏷️ Added Input component interface file

This commit is contained in:
Paul Valerie GOMA 2025-07-22 00:41:21 +02:00
parent 29a0094b50
commit 2bf9276157

View 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>;
}