🏷️ Added Input component interface file
This commit is contained in:
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