makes inputs compacts, mime vuetify outlined style for date pickers

components/Ui/Input/Autocomplete.vue

@@ -33,6 +33,7 @@ Liste déroulante avec autocompletion, à placer dans un composant `UiForm`
         isLoading ? $t('please_wait') : $t('no_result_matching_your_request')
       "
       :variant="variant"
+      density="compact"
       @update:model-value="onUpdate"
       @update:search="emit('update:search', $event)"
       @update:menu="emit('update:menu', $event)"

components/Ui/Input/Checkbox.vue

@@ -9,6 +9,7 @@ Case à cocher, à placer dans un composant `UiForm`
     :model-value="modelValue"
     :label="$t(fieldLabel)"
     :disabled="readonly"
+    density="compact"
     :error="error || !!fieldViolations"
     :error-messages="errorMessage || fieldViolations ? $t(fieldViolations) : ''"
     class="py-1"
@@ -92,4 +93,10 @@ const onUpdate = (event: boolean) => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+
+:deep(.v-label) {
+  padding-left: 8px;
+}
+
+</style>

components/Ui/Input/Combobox.vue

@@ -12,6 +12,7 @@ Liste déroulante, à placer dans un composant `UiForm`
       :label="$t(fieldLabel)"
       :items="items"
       :disabled="readonly"
+      density="compact"
       :error="error || !!fieldViolations"
       :error-messages="
         errorMessage || fieldViolations ? $t(fieldViolations) : ''

components/Ui/Input/DatePicker.vue

@@ -4,12 +4,15 @@ Sélecteur de dates, à placer dans un composant `UiForm`
 
 <template>
   <main>
-    <div class="d-flex flex-column">
-      <span>{{ $t(fieldLabel) }}</span>
+    <div class="d-flex flex-column container">
+      <span class="label">
+        {{ $t(fieldLabel) }}
+      </span>
 
       <UiDatePicker
         :model-value="date"
         :readonly="readonly"
+        class="date-picker"
         @update:model-value="onUpdate($event)"
       />
 
@@ -105,4 +108,44 @@ const onUpdate = (event: string) => {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+
+.container {
+  position: relative;
+}
+
+.label {
+  position: absolute;
+  color: #8e8e8e;
+  top: -0.7rem; /* Ajustez la valeur pour que le label chevauche la bordure */
+  left: 0.75rem; /* Assurez-vous qu'il est légèrement à l'intérieur */
+  background-color: white; /* Assurez-vous que la couleur de fond corresponde au fond du composant */
+  padding: 0 0.3rem; /* Ajoute un peu d'espace autour du texte */
+  font-size: 0.8rem; /* Réduisez légèrement la taille du texte */
+  z-index: 1; /* Assurez-vous que le label est au premier plan */
+  transition: color 0.2s, font-size 0.2s, top 0.2s; /* Pour donner un effet lors de l'interaction */
+
+}
+
+.date-picker:hover {
+  :deep(.dp__input) {
+    border-color: #333333;
+  }
+}
+
+.container:focus-within {
+  .label {
+    color: #333333;
+  }
+
+  :deep(.dp__input_focus) {
+    border: solid 2px #333333;
+  }
+
+  :deep(.dp__input_icon) {
+    color: #333333;
+  }
+}
+
+
+</style>

components/Ui/Input/Enum.vue

@@ -22,6 +22,7 @@ Liste déroulante dédiée à l'affichage d'objets Enum
       :error-messages="
         errorMessage || (fieldViolations ? $t(fieldViolations) : '')
       "
+      density="compact"
       @update:modelValue="
         updateViolationState($event)
         $emit('update:modelValue', $event)

components/Ui/Input/Number.vue

@@ -9,9 +9,9 @@ An input for numeric values
     :model-value.number="modelValue"
     :label="label || field ? $t(label ?? field) : undefined"
     hide-details
-    :density="density"
     type="number"
     :variant="variant"
+    density="compact"
     @update:model-value="onModelUpdate($event)"
   />
 </template>
@@ -60,11 +60,6 @@ const props = defineProps({
     required: false,
     default: null,
   },
-  density: {
-    type: String as PropType<Density>,
-    required: false,
-    default: 'default',
-  },
   /**
    * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-variant
    */

components/Ui/Input/Text.vue

@@ -18,6 +18,7 @@ Champs de saisie de texte, à placer dans un composant `UiForm`
     "
     :append-icon="type === 'password' ? (show ? 'mdi-eye' : 'mdi-eye-off') : ''"
     :variant="variant"
+    density="compact"
     @click:append="show = !show"
     @update:model-value="onUpdate($event)"
     @change="onChange($event)"

pages/parameters/general_parameters.vue

@@ -49,7 +49,6 @@
             v-model="parameters.timezone"
             enum-name="timezone"
             field="timezone"
-            variant="underlined"
           />
 
           <UiInputCheckbox

pages/parameters/sms.vue

@@ -10,7 +10,6 @@
             readonly
             field="smsSenderName"
             :rules="rules()"
-            variant="underlined"
             class="readonly"
           />
         </v-col>
@@ -18,7 +17,6 @@
           <UiInputText
             v-model="parameters.usernameSMS"
             field="usernameSMS"
-            variant="underlined"
           />
         </v-col>
         <v-col cols="12">
@@ -26,7 +24,6 @@
             v-model="parameters.passwordSMS"
             field="passwordSMS"
             class="password"
-            variant="underlined"
           />
         </v-col>
       </v-row>

pages/parameters/super_admin.vue

@@ -6,7 +6,7 @@
       <div class="px-4 d-flex flex-row align-center justify-center py-2">
         <v-icon class="theme-info">fa fa-info</v-icon>
       </div>
-      <div class="px-2">
+      <div class="px-2 d-flex flex-row align-center justify-center">
         {{ $t('super_admin_explanation_text') }}
       </div>
     </div>

pages/parameters/website.vue

@@ -70,7 +70,6 @@
             field="publicationDirectors"
             multiple
             chips
-            variant="outlined"
             class="my-4"
           />
 
@@ -122,7 +121,6 @@
             <UiInputText
               v-model="parameters.otherWebsite"
               field="otherWebsite"
-              variant="underlined"
               class="my-4"
             />
           </div>