Refactor #3922 - For Password

api-generator/components/password.js

@@ -136,6 +136,12 @@ const PasswordProps = [
         type: 'object',
         default: 'null',
         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.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

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

components/lib/password/Password.d.ts

@@ -8,8 +8,107 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { InputTextPassThroughOptionType } from '../inputtext';
 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.
  */
@@ -123,6 +222,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PasswordPassThroughOptions}
+     */
+    pt?: PasswordPassThroughOptions;
 }
 
 /**

components/lib/password/Password.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <PInputText
             ref="input"
             :id="inputId"
@@ -19,26 +19,26 @@
             @blur="onBlur"
             @keyup="onKeyUp"
             @invalid="onInvalid"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <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 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>
-        <span class="p-hidden-accessible" aria-live="polite">
+        <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')">
             {{ infoText }}
         </span>
         <Portal :appendTo="appendTo">
             <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="content">
-                        <div class="p-password-meter">
-                            <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }"></div>
+                        <div class="p-password-meter" v-bind="ptm('meter')">
+                            <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
                         </div>
-                        <div class="p-password-info">{{ infoText }}</div>
+                        <div class="p-password-info" v-bind="ptm('info')">{{ infoText }}</div>
                     </slot>
                     <slot name="footer"></slot>
                 </div>
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import EyeIcon from 'primevue/icons/eye';
 import EyeSlashIcon from 'primevue/icons/eyeslash';
 import InputText from 'primevue/inputtext';
@@ -57,6 +58,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'Password',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
     props: {
         modelValue: String,