Refactor #8117 - For Password

Author: tugcekucukoglu

packages/primevue/src/password/BasePassword.vue

@@ -58,6 +58,10 @@ export default {
             type: String,
             default: undefined
         },
+        showClear: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

packages/primevue/src/password/Password.d.ts

@@ -83,6 +83,10 @@ export interface PasswordPassThroughOptions {
      * Used to pass attributes to the unmask icon's DOM element.
      */
     unmaskIcon?: PasswordPassThroughOptionType;
+    /**
+     * Used to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: PasswordPassThroughOptionType;
     /**
      * Used to pass attributes to the overlay's DOM element.
      */
@@ -231,6 +235,11 @@ export interface PasswordProps extends Omit<InputHTMLAttributes, 'size'> {
      * Icon to show displaying the password as plain text.
      */
     unmaskIcon?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
     /**
      * Defines the size of the component.
      */
@@ -408,6 +417,17 @@ export interface PasswordSlots {
          */
         toggleCallback: () => void;
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**

packages/primevue/src/password/Password.vue

@@ -37,6 +37,9 @@
         <slot v-if="toggleMask && !unmasked" :name="$slots.unmaskicon ? 'unmaskicon' : 'showicon'" :toggleCallback="onMaskToggle" :class="[cx('unmaskIcon')]" v-bind="ptm('unmaskIcon')">
             <component :is="unmaskIcon ? 'i' : 'EyeIcon'" :class="[cx('unmaskIcon'), unmaskIcon]" @click="onMaskToggle" v-bind="ptm('unmaskIcon')" />
         </slot>
+        <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <TimesIcon :class="[cx('clearIcon')]" @click="onClearClick" v-bind="ptm('clearIcon')" />
+        </slot>
         <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
             {{ infoText }}
         </span>
@@ -77,6 +80,7 @@ import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import EyeIcon from '@primevue/icons/eye';
 import EyeSlashIcon from '@primevue/icons/eyeslash';
+import TimesIcon from '@primevue/icons/times';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -297,6 +301,9 @@ export default {
         onMaskToggle() {
             this.unmasked = !this.unmasked;
         },
+        onClearClick(event) {
+            this.writeValue(null, {});
+        },
         onOverlayClick(event) {
             OverlayEventBus.emit('overlay-click', {
                 originalEvent: event,
@@ -320,6 +327,9 @@ export default {
         promptText() {
             return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
         },
+        isClearIconVisible() {
+            return this.showClear && this.$filled && !this.disabled;
+        },
         overlayUniqueId() {
             return this.$id + '_overlay';
         },
@@ -343,7 +353,8 @@ export default {
         InputText,
         Portal,
         EyeSlashIcon,
-        EyeIcon
+        EyeIcon,
+        TimesIcon
     }
 };
 </script>

packages/primevue/src/password/style/PasswordStyle.d.ts

@@ -26,6 +26,10 @@ export enum PasswordClasses {
      * Class name of the unmask icon element
      */
     unmaskIcon = 'p-password-unmask-icon',
+    /**
+     * Class name of the clear icon element
+     */
+    clearIcon = 'p-password-clear-icon',
     /**
      * Class name of the overlay element
      */

packages/primevue/src/password/style/PasswordStyle.js

@@ -17,6 +17,7 @@ const classes = {
     pcInputText: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
+    clearIcon: 'p-password-clear-icon',
     overlay: 'p-password-overlay p-component',
     content: 'p-password-content',
     meter: 'p-password-meter',