✨ feature: Added error and valid message

src/components/input/VInput.vue

@@ -28,10 +28,13 @@ const props = withDefaults(defineProps<IVInput>(), {
   toggleMask: false,
   placeholder: '',
   passwordHint: undefined,
+  disabled: false,
+  errorMessage: '',
+  validMessage: '',
 })
 const attrs = useAttrs()
 
-const isDisabled = computed(() => 'disabled' in attrs)
+// const props.disabled = computed(() => 'disabled' in attrs)
 
 const emit = defineEmits([
   'update:modelValue',
@@ -54,9 +57,9 @@ watch(localModelValue, (newVal) => {
 
 
 const labelState = computed(() => {
-  if(!props.isInvalid && !props.isValid && !isDisabled.value) return 'default';
+  if(!props.isInvalid && !props.isValid && !props.disabled) return 'default';
-  else if(!props.isInvalid && props.isValid && !isDisabled.value) return 'success';
+  else if(!props.isInvalid && props.isValid && !props.disabled) return 'success';
-  else if(props.isInvalid && !props.isValid && !isDisabled.value) return 'error';
+  else if(props.isInvalid && !props.isValid && !props.disabled) return 'error';
   else return undefined
 })
 
@@ -68,8 +71,8 @@ const labelState = computed(() => {
       v-if="props.labelVisible"
       :for="props.id"
       :label="props.label"
-      :required="!isDisabled"
+      :required="!props.disabled"
-      :disabled="isDisabled"
+      :disabled="props.disabled"
       :type="labelState"
       :hint="props.hint"
     >
@@ -84,11 +87,11 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-password': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
+      :disabled="props.disabled"
-      :aria-disabled="isDisabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :weakLabel="props.weakLabel"
       :mediumLabel="props.mediumLabel"
@@ -145,11 +148,11 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-textarea': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
+      :disabled="props.disabled"
-      :aria-disabled="isDisabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :placeholder="props.placeholder"
       @valueChange="emit('value-change', $event)"
@@ -162,17 +165,62 @@ const labelState = computed(() => {
       v-bind="attrs"
       :class="[styles['text-body-MD-standard-text-Regular'], {
         'p-inputtext': true,
-        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'error': props.isInvalid && !props.isValid && !props.disabled,
-        'success': !props.isInvalid && props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !props.disabled,
       }]"
-      :disabled="isDisabled"
+      :disabled="props.disabled"
-      :aria-disabled="isDisabled"
+      :aria-disabled="props.disabled"
       :aria-describedby="descriptionId || undefined"
       :placeholder="props.placeholder"
       v-model:model-value="localModelValue"
       @update:model-value="emit('update:modelValue', $event)"
       @valueChange="emit('value-change', $event)"
     />
+      <div
+    role="alert"
+    aria-live="polite"
+  >
+    <template v-if="Array.isArray(props.errorMessage)">
+      <VHint
+        v-for="message in props.errorMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="alert"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="errorMessage"
+      :id="descriptionId"
+      :key="`error-${errorMessage}`"
+      :data-testid="descriptionId"
+      :title="`${errorMessage}`"
+      type="alert"
+      icon
+    />
+    <template v-if="Array.isArray(props.validMessage)">
+      <VHint
+        v-for="message in props.validMessage"
+        :id="descriptionId"
+        :key="message"
+        :data-testid="descriptionId"
+        :title="message"
+        type="success"
+        icon
+      />
+    </template>
+    <VHint
+      v-else-if="validMessage"
+      :id="descriptionId"
+      :key="`error-${validMessage}`"
+      :data-testid="descriptionId"
+      :title="`${validMessage}`"
+      type="success"
+      icon
+    />
+  </div>
   </div>
 </template>
 
@@ -215,10 +263,9 @@ const labelState = computed(() => {
   border-color: 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);
 }
 
-.label-disabled,
-.p-password:disabled,
-.p-textarea:disabled,
-.p-inputtext:disabled {color: var(--text-disabled-grey);}
 </style>