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>

.playground/pages/composant/select/selectCheckbox.vue

@@ -123,6 +123,28 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (vide)</h2>
+      <MalioSelectCheckbox
+        v-model="readonlyEmptyValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Lecture seule (rempli)</h2>
+      <MalioSelectCheckbox
+        v-model="readonlyFilledValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4 md:col-span-2">
       <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
       <MalioSelectCheckbox
@@ -145,6 +167,7 @@
         empty-option-label="Aucune selection"
       />
     </div>
+
   </div>
 </template>
 
@@ -190,4 +213,6 @@ const selectAllValue = ref<Array<string | number>>([])
 const selectAllCustomValue = ref<Array<string | number>>([])
 const longListValue = ref<Array<string | number>>([])
 const bottomValue = ref<Array<string | number>>([])
+const readonlyEmptyValue = ref<Array<string | number>>([])
+const readonlyFilledValue = ref<Array<string | number>>(['fr'])
 </script>