🐛 fix: bug fixed

src/components/input/VInput.vue

@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<IVInput>(), {
   disabled: false,
   errorMessage: '',
   validMessage: '',
+  feedback: false,
 })
 const attrs = useAttrs()
 
@@ -85,10 +86,11 @@ const labelState = computed(() => {
       v-if="props.isPassword"
       :id="props.id"
       v-bind="attrs"
+      class="p-password"
       :class="[styles['text-body-MD-standard-text-Regular'], {
-        'p-password': true,
         'error': props.isInvalid && !props.isValid && !props.disabled || !!props.errorMessage,
         'success': !props.isInvalid && props.isValid && !props.disabled && !props.errorMessage || !!props.validMessage,
+        'disabled': props.disabled,
       }]"
       :disabled="props.disabled"
       :aria-disabled="props.disabled"
@@ -97,8 +99,9 @@ const labelState = computed(() => {
       :mediumLabel="props.mediumLabel"
       :strongLabel="props.strongLabel"
       :promptLabel="props.promptLabel"
-      :toggleMask="props.toggleMask"
+      :toggleMask="props.toggleMask && !props.disabled"
       :placeholder="props.placeholder"
+      :feedback="props.feedback"
       :fluid="true"
       v-model:model-value="localModelValue"
       @update:model-value="emit('update:modelValue', $event)"
@@ -246,26 +249,55 @@ const labelState = computed(() => {
 .p-textarea,
 .p-inputtext {width: inherit;}
 
-.p-textarea,
-.p-inputtext {border: var(--border-width) solid var(--input-border-color);}
 
-.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
 .p-textarea.success, .p-textarea.success:focus-visible, .p-textarea.success:hover,
-.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {border: var(--large-border-width) solid var(--border-plain-success);}
+.p-inputtext.success, .p-inputtext.success:focus-visible, .p-inputtext.success:hover {
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+
+.p-password.success{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-success);
+}
+
+.p-password.error{
+  --p-inputtext-border-color: transparent;
+  --p-inputtext-hover-border-color: transparent;
+  --p-inputtext-focus-border-color: transparent;
+  border-radius: var(--input-border-raduis);
+  border: var(--large-border-width) solid var(--border-plain-error);
+}
 
-.p-password.success, .p-password.success:focus-visible, .p-password.success:hover,
 .p-textarea.error, .p-textarea.error:focus-visible, .p-textarea.error:hover,
 .p-inputtext.error, .p-inputtext.error:focus-visible, .p-inputtext.error:hover {border: var(--large-border-width) solid var(--border-plain-error);}
 
-.p-password:disabled,
+
 .p-textarea:disabled,
 .p-inputtext:disabled {
-  border-color: var(--border-disabled-grey);
+  border: var(--border-width) solid var(--border-disabled-grey);
   color: var(--text-disabled-grey);
   background-color: var(--background-disabled-grey);
   --p-inputtext-placeholder-color: var(--text-disabled-grey);
   --p-form-field-placeholder-color: var(--text-disabled-grey);
   --p-textarea-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-border-color: var(--border-disabled-grey);
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.p-password.disabled{
+  --p-inputtext-border-color: var(--border-disabled-grey);
+  --p-inputtext-hover-border-color: var(--border-disabled-grey);
+  --p-inputtext-focus-border-color: var(--border-disabled-grey);
+  --p-inputtext-placeholder-color: var(--text-disabled-grey);
+  --p-form-field-placeholder-color: var(--text-disabled-grey);
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 </style>