2023-03-01 08:50:45 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* Password displays strength indicator for password fields.
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/password/)
|
|
|
|
*
|
|
|
|
* @module password
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
2022-09-06 12:03:37 +00:00
|
|
|
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
|
|
|
|
|
2023-03-01 08:50:45 +00:00
|
|
|
/**
|
|
|
|
* Defines valid properties in Password component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface PasswordProps extends InputHTMLAttributes {
|
|
|
|
/**
|
|
|
|
* Value of the component.
|
|
|
|
*/
|
|
|
|
modelValue?: Nullable<string>;
|
|
|
|
/**
|
|
|
|
* Text to prompt password entry. Defaults to PrimeVue Locale configuration.
|
|
|
|
*/
|
|
|
|
promptLabel?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Regex for a medium level password.
|
2023-03-08 10:51:52 +00:00
|
|
|
* @defaultValue ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
mediumRegex?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Regex for a strong level password.
|
2023-03-08 10:51:52 +00:00
|
|
|
* @defaultValue ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
strongRegex?: string | 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.
|
2023-03-01 08:50:45 +00:00
|
|
|
* @defaultValue true
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
feedback?: boolean | undefined;
|
|
|
|
/**
|
2023-03-01 08:50:45 +00:00
|
|
|
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
2023-03-08 10:51:52 +00:00
|
|
|
* @defaultValue body
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
2023-03-01 08:50:45 +00:00
|
|
|
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Whether to show an icon to display the password as plain text.
|
2023-03-01 08:50:45 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
toggleMask?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* Icon to hide displaying the password as plain text.
|
|
|
|
*/
|
|
|
|
hideIcon?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Icon to show displaying the password as plain text.
|
|
|
|
*/
|
|
|
|
showIcon?: string | undefined;
|
|
|
|
/**
|
|
|
|
* When present, it specifies that the component should be disabled.
|
2023-03-01 08:50:45 +00:00
|
|
|
* @defaultValue false
|
2022-09-06 12:03:37 +00:00
|
|
|
*/
|
|
|
|
disabled?: boolean | undefined;
|
|
|
|
/**
|
|
|
|
* Placeholder text for the input.
|
|
|
|
*/
|
|
|
|
placeholder?: string | undefined;
|
2022-09-14 11:26:01 +00:00
|
|
|
/**
|
|
|
|
* When present, it specifies that an input field must be filled out before submitting the form.
|
2023-03-01 08:50:45 +00:00
|
|
|
* @defaultValue false
|
2022-09-14 11:26:01 +00:00
|
|
|
*/
|
|
|
|
required?: boolean | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Identifier of the underlying input element.
|
|
|
|
*/
|
|
|
|
inputId?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Inline style of the input field.
|
|
|
|
*/
|
2023-03-09 07:02:25 +00:00
|
|
|
inputStyle?: object | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Style class of the input field.
|
|
|
|
*/
|
2023-03-09 07:02:25 +00:00
|
|
|
inputClass?: string | object | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Uses 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.
|
|
|
|
*/
|
2023-03-09 07:02:25 +00:00
|
|
|
panelClass?: string | object | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Inline style of the overlay panel.
|
|
|
|
*/
|
2023-03-09 07:02:25 +00:00
|
|
|
panelStyle?: object | undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
|
|
|
*/
|
|
|
|
panelProps?: HTMLAttributes | undefined;
|
|
|
|
/**
|
|
|
|
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
|
|
|
*/
|
|
|
|
'aria-labelledby'?: string | undefined;
|
|
|
|
/**
|
|
|
|
* Establishes a string value that labels the component.
|
|
|
|
*/
|
|
|
|
'aria-label'?: string | undefined;
|
|
|
|
}
|
|
|
|
|
2023-03-01 08:50:45 +00:00
|
|
|
/**
|
|
|
|
* Defines valid slots in Password component.
|
|
|
|
*/
|
2022-09-06 12:03:37 +00:00
|
|
|
export interface PasswordSlots {
|
|
|
|
/**
|
|
|
|
* Custom header template.
|
|
|
|
*/
|
2023-03-01 08:50:45 +00:00
|
|
|
header(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom footer template.
|
|
|
|
*/
|
2023-03-01 08:50:45 +00:00
|
|
|
footer(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Custom content template.
|
|
|
|
*/
|
2023-03-01 08:50:45 +00:00
|
|
|
content(): VNode[];
|
2023-04-04 12:41:34 +00:00
|
|
|
/**
|
|
|
|
* Custom hide icon template.
|
|
|
|
*/
|
|
|
|
hideicon(): VNode[];
|
|
|
|
/**
|
|
|
|
* Custom show icon template.
|
|
|
|
*/
|
|
|
|
showicon(): VNode[];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-03-01 08:50:45 +00:00
|
|
|
/**
|
|
|
|
* Defines valid emits in Password component.
|
|
|
|
*/
|
|
|
|
export interface PasswordEmits {
|
2022-09-06 12:03:37 +00:00
|
|
|
/**
|
|
|
|
* Emitted when the value changes.
|
|
|
|
* @param {string} value - New value.
|
|
|
|
*/
|
2023-03-01 08:50:45 +00:00
|
|
|
'update:modelValue'(value: string): void;
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-03-01 08:50:45 +00:00
|
|
|
/**
|
|
|
|
* **PrimeVue - Password**
|
|
|
|
*
|
|
|
|
* _Password displays strength indicator for password fields._
|
|
|
|
*
|
|
|
|
* [Live Demo](https://www.primevue.org/password/)
|
|
|
|
* --- ---
|
|
|
|
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
|
|
|
|
*
|
|
|
|
* @group Component
|
|
|
|
*/
|
2023-03-01 14:48:23 +00:00
|
|
|
declare class Password extends ClassComponent<PasswordProps, PasswordSlots, PasswordEmits> {}
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
declare module '@vue/runtime-core' {
|
|
|
|
interface GlobalComponents {
|
2022-09-14 11:26:01 +00:00
|
|
|
Password: GlobalComponentConstructor<Password>;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Password;
|