fix: readonly component style + TabList + required component (#61)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #61
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/time/TimePicker.vue

@@ -26,7 +26,7 @@
         :for="inputId"
         :class="mergedLabelClass"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
@@ -78,10 +78,12 @@
     </div>
 
     <p
+      v-if="reserveMessageSpace || hint || error || success"
       :id="`${inputId}-describedby`"
       :class="[
         hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
-        'mt-1 ml-[2px] text-xs min-h-[1rem]',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
       ]"
     >
       {{ error || success || hint }}
@@ -93,6 +95,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
 import {Icon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 import TimeWheels from './internal/TimeWheels.vue'
 
 defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
@@ -115,6 +118,7 @@ const props = withDefaults(
     inputClass?: string
     labelClass?: string
     groupClass?: string
+    reserveMessageSpace?: boolean
   }>(),
   {
     id: '',
@@ -133,6 +137,7 @@ const props = withDefaults(
     inputClass: '',
     labelClass: '',
     groupClass: '',
+    reserveMessageSpace: true,
   },
 )
 
@@ -152,6 +157,7 @@ const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const displayValue = computed(() => currentValue.value ?? '')
 const isFilled = computed(() => displayValue.value.length > 0)
+const isReadonly = computed(() => props.readonly && !props.disabled)
 const wheelsValue = computed(() => currentValue.value || '00:00')
 const showClear = computed(() =>
   props.clearable && isFilled.value && !props.disabled && !props.readonly,
@@ -191,14 +197,16 @@ const mergedGroupClass = computed(() =>
 const mergedInputClass = computed(() =>
   twMerge(
     'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
-    isFilled.value ? 'border-black' : 'border-m-muted',
+    isReadonly.value
+      ? 'border-black'
+      : isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
     hasError.value
       ? 'border-m-danger'
       : hasSuccess.value
         ? 'border-m-success'
-        : 'focus:border-m-primary',
-    isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
+        : isReadonly.value ? '' : 'focus:border-m-primary',
+    (!isReadonly.value && isOpen.value) ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
     props.inputClass,
   ),
 )
@@ -206,14 +214,16 @@ const mergedInputClass = computed(() =>
 const mergedLabelClass = computed(() =>
   twMerge(
     'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
-    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    (isReadonly.value ? isFilled.value : (isFilled.value || isOpen.value)) ? '-translate-y-[1.25rem] scale-90' : '',
     hasError.value
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : isOpen.value
-          ? 'text-m-primary'
-          : 'text-black peer-placeholder-shown:text-m-muted',
+        : isReadonly.value
+          ? isFilled.value ? 'text-black' : 'text-m-muted'
+          : isOpen.value
+            ? 'text-m-primary'
+            : 'text-black peer-placeholder-shown:text-m-muted',
     props.labelClass,
   ),
 )
@@ -221,6 +231,7 @@ const mergedLabelClass = computed(() =>
 const iconStateClass = computed(() => {
   if (hasError.value) return 'text-m-danger'
   if (hasSuccess.value) return 'text-m-success'
+  if (isReadonly.value) return isFilled.value ? 'text-black' : 'text-m-muted'
   if (isOpen.value) return 'text-m-primary'
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'