Refactor #3832 Refactor #3833 - For Password

api-generator/components/password.js

@@ -68,13 +68,13 @@ const PasswordProps = [
     {
         name: 'hideIcon',
         type: 'string',
-        default: 'pi pi-eye-slash',
+        default: 'null',
         description: 'Icon to hide displaying the password as plain text.'
     },
     {
         name: 'showIcon',
         type: 'string',
-        default: 'pi pi-eye',
+        default: 'null',
         description: 'Icon to show displaying the password as plain text.'
     },
     {
@@ -142,15 +142,23 @@ const PasswordProps = [
 const PasswordSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'content',
-        description: 'Custom content for the component'
+        description: 'Custom content for the component.'
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'hideicon',
+        description: 'Custom content for the hide icon.'
+    },
+    {
+        name: 'showicon',
+        description: 'Custom content for the show icon.'
     }
 ];
 

components/lib/password/Password.d.ts

@@ -61,12 +61,10 @@ export interface PasswordProps extends InputHTMLAttributes {
     toggleMask?: boolean | undefined;
     /**
      * Icon to hide displaying the password as plain text.
-     * @defaultValue pi pi-eye-slash
      */
     hideIcon?: string | undefined;
     /**
      * Icon to show displaying the password as plain text.
-     * @defaultValue pi pi-eye
      */
     showIcon?: string | undefined;
     /**
@@ -141,6 +139,14 @@ export interface PasswordSlots {
      * Custom content template.
      */
     content(): VNode[];
+    /**
+     * Custom hide icon template.
+     */
+    hideicon(): VNode[];
+    /**
+     * Custom show icon template.
+     */
+    showicon(): VNode[];
 }
 
 /**

components/lib/password/Password.vue

@@ -21,7 +21,12 @@
             @invalid="onInvalid"
             v-bind="inputProps"
         />
-        <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
+        <slot v-if="toggleMask && unmasked" name="hideicon">
+            <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" />
+        </slot>
+        <slot v-if="toggleMask && !unmasked" name="showicon">
+            <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" />
+        </slot>
         <span class="p-hidden-accessible" aria-live="polite">
             {{ infoText }}
         </span>
@@ -43,6 +48,8 @@
 </template>
 
 <script>
+import EyeIcon from 'primevue/icon/eye';
+import EyeSlashIcon from 'primevue/icon/eyeslash';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -91,11 +98,11 @@ export default {
         },
         hideIcon: {
             type: String,
-            default: 'pi pi-eye-slash'
+            default: undefined
         },
         showIcon: {
             type: String,
-            default: 'pi pi-eye'
+            default: undefined
         },
         disabled: {
             type: Boolean,
@@ -383,9 +390,6 @@ export default {
                 }
             ];
         },
-        toggleIconClass() {
-            return this.unmasked ? this.hideIcon : this.showIcon;
-        },
         strengthClass() {
             return `p-password-strength ${this.meter ? this.meter.strength : ''}`;
         },
@@ -413,7 +417,9 @@ export default {
     },
     components: {
         PInputText: InputText,
-        Portal: Portal
+        Portal: Portal,
+        EyeSlashIcon: EyeSlashIcon,
+        EyeIcon: EyeIcon
     }
 };
 </script>