feat : ajouts du composant input text area et fix sur le input text

app/components/malio/InputText.vue

@@ -8,37 +8,42 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 "
       :class="[
       disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
       hasError
-        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
         : hasSuccess
-          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
+          ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-muted focus:border-m-primary',
       textInput,
       iconInputPaddingClass,
+      focusPaddingClass,
       rounded,
     ]"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
       :disabled="disabled"
-      :value="modelValue ?? ''"
+      :value="currentValue"
       :readonly="readonly"
       :aria-invalid="!!error"
       :aria-describedby="describedBy"
       v-bind="attrs"
-      placeholder=" "
+      placeholder="_"
       type="text"
       @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
     >
 
     <label
       v-if="label"
       :for="inputId"
-      class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
+      class="floating-label absolute top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
       :class="[
+    labelPositionClass,
+    shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
     disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
     hasError
       ? 'text-m-error'
@@ -59,7 +64,7 @@
       data-test="icon"
       :class="[
       hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
-      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconPositionClass,
       iconColor,
     ]"
     />
@@ -85,7 +90,7 @@
 
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
-import {computed, useAttrs, useId} from 'vue'
+import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
@@ -110,6 +115,7 @@ const props = withDefaults(
     error?: string
     success?: string
     iconName?: string
+    iconPosition?: 'left' | 'right'
     rounded?: string
     iconSize?: string | number
     iconColor?: string
@@ -118,9 +124,10 @@ const props = withDefaults(
   {
     id: '',
     name: '',
-    autocomplete: '',
+    autocomplete: 'off',
     modelValue: undefined,
     iconName: '',
+    iconPosition: 'right',
     label: '',
     minWidth: 'w-96',
     maxWidth: '',
@@ -143,8 +150,13 @@ const props = withDefaults(
 
 const attrs = useAttrs()
 const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
 
 const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 
@@ -162,20 +174,34 @@ const emit = defineEmits<{
 
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
   emit('update:modelValue', target.value)
 }
 
 const iconInputPaddingClass = computed(() => {
-  return props.iconName ? 'pr-10' : ''
+  if (!props.iconName) return ''
+  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
+})
+
+const labelPositionClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>
 
 <style scoped>
-.floating-input:focus + label,
-.floating-input:not(:placeholder-shown) + label {
-  transform: translateY(-1.15rem) scale(0.9);
-}
-
 .floating-label {
   background: white;
   padding: 0 0.25rem;