Add form support to `Password`

packages/primevue/src/password/BasePassword.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import PasswordStyle from 'primevue/password/style';
 
 export default {
     name: 'BasePassword',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: String,
         promptLabel: {
             type: String,
             default: null
@@ -59,14 +58,6 @@ export default {
             type: String,
             default: undefined
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
         disabled: {
             type: Boolean,
             default: false
@@ -79,10 +70,6 @@ export default {
             type: Boolean,
             default: false
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/password/Password.vue

@@ -1,12 +1,13 @@
 <template>
     <div :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
-        <PInputText
+        <InputText
             ref="input"
             :id="inputId"
             :type="inputType"
             :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
-            :value="modelValue"
+            :value="d_value"
+            :name="$formName"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
             :aria-controls="(overlayProps && overlayProps.id) || overlayId || (panelProps && panelProps.id) || panelId || overlayUniqueId"
@@ -67,7 +68,6 @@
 
 <script>
 import { absolutePosition, addStyle, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import EyeIcon from '@primevue/icons/eye';
@@ -81,7 +81,7 @@ export default {
     name: 'Password',
     extends: BasePassword,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
+    emits: ['change', 'focus', 'blur', 'invalid'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -159,14 +159,14 @@ export default {
             return level;
         },
         onInput(event) {
-            this.$emit('update:modelValue', event.target.value);
+            this.updateValue(event.target.value, event);
             this.$emit('change', event);
         },
         onFocus(event) {
             this.focused = true;
 
             if (this.feedback) {
-                this.setPasswordMeter(this.modelValue);
+                this.setPasswordMeter(this.d_value);
                 this.overlayVisible = true;
             }
 
@@ -201,14 +201,14 @@ export default {
             }
         },
         setPasswordMeter() {
-            if (!this.modelValue) {
+            if (!this.d_value) {
                 this.meter = null;
                 this.infoText = this.promptText;
 
                 return;
             }
 
-            const { meter, label } = this.checkPasswordStrength(this.modelValue);
+            const { meter, label } = this.checkPasswordStrength(this.d_value);
 
             this.meter = meter;
             this.infoText = label;
@@ -307,9 +307,6 @@ export default {
         inputType() {
             return this.unmasked ? 'text' : 'password';
         },
-        filled() {
-            return this.modelValue != null && this.modelValue.toString().length > 0;
-        },
         weakText() {
             return this.weakLabel || this.$primevue.config.locale.weak;
         },
@@ -324,16 +321,13 @@ export default {
         },
         overlayUniqueId() {
             return this.id + '_overlay';
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
-        PInputText: InputText,
+        InputText,
-        Portal: Portal,
+        Portal,
-        EyeSlashIcon: EyeSlashIcon,
+        EyeSlashIcon,
-        EyeIcon: EyeIcon
+        EyeIcon
     }
 };
 </script>

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

@@ -86,9 +86,9 @@ const classes = {
     root: ({ instance }) => [
         'p-password p-component p-inputwrapper',
         {
-            'p-inputwrapper-filled': instance.filled,
+            'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-password-fluid': instance.hasFluid
+            'p-password-fluid': instance.$fluid
         }
     ],
     pcInputText: 'p-password-input',