From 3e028d04c6535c8fe3ea15242dd7efd8d0faa86d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 22 Jul 2025 02:02:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20Input=20componen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/VInput.vue | 224 ++++++++++++++++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 src/components/input/VInput.vue

diff --git a/src/components/input/VInput.vue b/src/components/input/VInput.vue
new file mode 100644
index 0000000..4e51b19
--- /dev/null
+++ b/src/components/input/VInput.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import VHint from '../hint/VHint.vue';
+import VDivider from '../divider/VDivider.vue';
+import VLabel from '../label/VLabel.vue';
+import type IVInput from './IVInput.type';
+import { computed, useAttrs, useId, ref, watch } from 'vue';
+import styles from '@visua/typography.module.css';
+import Password from 'primevue/password';
+
+const props = withDefaults(defineProps<IVInput>(), {
+  id: () => useId(),
+  descriptionId: undefined,
+  hint: '',
+  label: '',
+  modelValue: '',
+  wrapperClass: '',
+  isInvalid: false,
+  isValid: false,
+  isTextarea: false,
+  labelVisible: false,
+  isPassword: false,
+  weakLabel: 'Faible',
+  mediumLabel: 'Moyen',
+  strongLabel: 'Fort',
+  promptLabel: 'Entrez un mot de passe',
+  toggleMask: false,
+  placeholder: '',
+  passwordHint: undefined,
+})
+const attrs = useAttrs()
+
+const isDisabled = computed(() => 'disabled' in attrs)
+
+const emit = defineEmits([
+  'update:modelValue',
+  'value-change',
+  'change'
+])
+
+const localModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (newVal) => {
+  if(localModelValue.value !== newVal) {
+        localModelValue.value = newVal;
+    }
+});
+watch(localModelValue, (newVal) => {
+    if(props.modelValue !== newVal){
+        emit('update:modelValue', newVal);
+    }
+});
+
+
+
+const labelState = computed(() => {
+  if(!props.isInvalid && !props.isValid && !isDisabled.value) return 'default';
+  else if(!props.isInvalid && props.isValid && !isDisabled.value) return 'success';
+  else if(props.isInvalid && !props.isValid && !isDisabled.value) return 'error';
+  else return undefined
+})
+
+</script>
+
+<template>
+  <div class="main-container">
+    <VLabel
+      v-if="props.labelVisible"
+      :for="props.id"
+      :label="props.label"
+      :required="!isDisabled"
+      :disabled="isDisabled"
+      :type="labelState"
+      :hint="props.hint"
+    >
+      <template #required-type v-if="props.required">
+        <slot name="required-type"/>
+      </template>
+    </VLabel>
+    <!-- Password -->
+    <Password
+      v-if="props.isPassword"
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-password': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionId || undefined"
+      :weakLabel="props.weakLabel"
+      :mediumLabel="props.mediumLabel"
+      :strongLabel="props.strongLabel"
+      :promptLabel="props.promptLabel"
+      :toggleMask="props.toggleMask"
+      :placeholder="props.placeholder"
+      :fluid="true"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @valueChange="emit('value-change', $event)"
+      @change="emit('change', $event)"
+    >
+      <template #header>
+        <div
+          :class="styles['text-body-MD-standard-text-Medium']"
+          style="padding-bottom: 0.5rem;"
+        >Niveau de complexité</div>
+      </template>
+      <template v-if="props.passwordHint !== undefined" #footer>
+        <VDivider/>
+        <VHint title="Votre mot de passe doit contenir au moins :"/>
+        <div
+          role="alert"
+          aria-live="polite"
+        >
+          <template v-if="Array.isArray(props.passwordHint)">
+            <VHint
+              v-for="message in props.passwordHint"
+              :key="`password-hint-${message}`"
+              :id="descriptionId"
+              :data-testid="descriptionId"
+              :title="message"
+              type="info"
+              icon
+            />
+          </template>
+          <VHint
+            v-else-if="props.passwordHint"
+            :title="props.passwordHint"
+            :id="descriptionId"
+            :data-testid="descriptionId"
+            type="info"
+            icon
+          />
+        </div>
+      </template>
+    </Password>
+
+    <!-- Textarea -->
+    <Textarea
+      v-else-if="props.isTextarea"
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-textarea': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionId || undefined"
+      :placeholder="props.placeholder"
+      @valueChange="emit('value-change', $event)"
+    />
+
+    <!-- InputText -->
+    <InputText
+      v-else
+      :id="props.id"
+      v-bind="attrs"
+      :class="[styles['text-body-MD-standard-text-Regular'], {
+        'p-inputtext': true,
+        'error': props.isInvalid && !props.isValid && !isDisabled,
+        'success': !props.isInvalid && props.isValid && !isDisabled,
+      }]"
+      :disabled="isDisabled"
+      :aria-disabled="isDisabled"
+      :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>
+</template>
+
+<style lang="css" scoped>
+
+.main-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+}
+
+.p-textarea {
+  min-height: 5.5rem;
+  max-height: fit-content;
+}
+
+.p-password,
+.p-inputtext { height: 2.5rem;}
+
+.p-password,
+.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-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);
+  color: var(--text-disabled-grey);
+  background-color: var(--background-disabled-grey);
+}
+
+.label-disabled,
+.p-password:disabled,
+.p-textarea:disabled,
+.p-inputtext:disabled {color: var(--text-disabled-grey);}
+</style>