Refactor #3922 - For Password

pull/3938/head
Tuğçe Küçükoğlu 2023-05-05 17:58:54 +03:00
parent 103c827a16
commit 03f33ba7a7
4 changed files with 123 additions and 9 deletions

View File

@ -136,6 +136,12 @@ const PasswordProps = [
type: 'object', type: 'object',
default: 'null', default: 'null',
description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.' description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
} }
]; ];

View File

@ -42,6 +42,7 @@ import { MessagePassThroughOptions } from '../message';
import { OverlayPanelPassThroughOptions } from '../overlaypanel'; import { OverlayPanelPassThroughOptions } from '../overlaypanel';
import { PanelPassThroughOptions } from '../panel'; import { PanelPassThroughOptions } from '../panel';
import { PanelMenuPassThroughOptions } from '../panelmenu'; import { PanelMenuPassThroughOptions } from '../panelmenu';
import { PasswordPassThroughOptions } from '../password';
import { ProgressBarPassThroughOptions } from '../progressbar'; import { ProgressBarPassThroughOptions } from '../progressbar';
import { ProgressSpinnerPassThroughOptions } from '../progressspinner'; import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
import { ScrollPanelPassThroughOptions } from '../scrollpanel'; import { ScrollPanelPassThroughOptions } from '../scrollpanel';
@ -122,6 +123,7 @@ interface PrimeVuePTOptions {
overlaypanel?: OverlayPanelPassThroughOptions; overlaypanel?: OverlayPanelPassThroughOptions;
panel?: PanelPassThroughOptions; panel?: PanelPassThroughOptions;
panelmenu?: PanelMenuPassThroughOptions; panelmenu?: PanelMenuPassThroughOptions;
password?: PasswordPassThroughOptions;
progressbar?: ProgressBarPassThroughOptions; progressbar?: ProgressBarPassThroughOptions;
progressspinner?: ProgressSpinnerPassThroughOptions; progressspinner?: ProgressSpinnerPassThroughOptions;
scrollpanel?: ScrollPanelPassThroughOptions; scrollpanel?: ScrollPanelPassThroughOptions;

View File

@ -8,8 +8,107 @@
* *
*/ */
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue'; import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { InputTextPassThroughOptionType } from '../inputtext';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
export declare type PasswordPassThroughOptionType = PasswordPassThroughAttributes | ((options: PasswordPassThroughMethodOptions) => PasswordPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface PasswordPassThroughMethodOptions {
props: PasswordProps;
state: PasswordState;
}
/**
* Custom passthrough(pt) options.
* @see {@link PasswordProps.pt}
*/
export interface PasswordPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the InputText component.
* @see {@link InputTextPassThroughOptionType}
*/
input?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the hide icon's DOM element.
*/
hideIcon?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the show icon's DOM element.
*/
showIcon?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panel?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the meter's DOM element.
*/
meter?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the info's DOM element.
*/
info?: PasswordPassThroughOptionType;
/**
* Uses to pass attributes to the hidden accessible DOM element.
*/
hiddenAccesible?: PasswordPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface PasswordPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in Password component.
*/
export interface PasswordState {
/**
* Current overlay visible state as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
/**
* Current overlay visible state as a boolean.
* @see {@link PasswordMeterStateOptions}
*/
meter: PasswordMeterStateOptions;
/**
* Current info test state as a string.
*/
infoText: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current unmasked state as a boolean.
* @defaultValue false
*/
unmasked: boolean;
}
export interface PasswordMeterStateOptions {
/**
* Current strength of the meter state as a string.
*/
strength: string;
/**
* Current width of the meter state as a string.
*/
width: string;
}
/** /**
* Defines valid properties in Password component. * Defines valid properties in Password component.
*/ */
@ -123,6 +222,11 @@ export interface PasswordProps extends InputHTMLAttributes {
* Establishes a string value that labels the component. * Establishes a string value that labels the component.
*/ */
'aria-label'?: string | undefined; 'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {PasswordPassThroughOptions}
*/
pt?: PasswordPassThroughOptions;
} }
/** /**

View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass" v-bind="ptm('root')">
<PInputText <PInputText
ref="input" ref="input"
:id="inputId" :id="inputId"
@ -19,26 +19,26 @@
@blur="onBlur" @blur="onBlur"
@keyup="onKeyUp" @keyup="onKeyUp"
@invalid="onInvalid" @invalid="onInvalid"
v-bind="inputProps" v-bind="{ ...inputProps, ...ptm('input') }"
/> />
<slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle"> <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle">
<component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" /> <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
</slot> </slot>
<slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle"> <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
<component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" /> <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
</slot> </slot>
<span class="p-hidden-accessible" aria-live="polite"> <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')">
{{ infoText }} {{ infoText }}
</span> </span>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="panelProps"> <div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="{ ...panelProps, ...ptm('panel') }">
<slot name="header"></slot> <slot name="header"></slot>
<slot name="content"> <slot name="content">
<div class="p-password-meter"> <div class="p-password-meter" v-bind="ptm('meter')">
<div :class="strengthClass" :style="{ width: meter ? meter.width : '' }"></div> <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
</div> </div>
<div class="p-password-info">{{ infoText }}</div> <div class="p-password-info" v-bind="ptm('info')">{{ infoText }}</div>
</slot> </slot>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
@ -48,6 +48,7 @@
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import EyeIcon from 'primevue/icons/eye'; import EyeIcon from 'primevue/icons/eye';
import EyeSlashIcon from 'primevue/icons/eyeslash'; import EyeSlashIcon from 'primevue/icons/eyeslash';
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
@ -57,6 +58,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
export default { export default {
name: 'Password', name: 'Password',
extends: BaseComponent,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'], emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
props: { props: {
modelValue: String, modelValue: String,