fix : composant TabList + client playground

.playground/pages/composant/form/client.vue

@@ -77,7 +77,7 @@
           <template #information>
             <div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
               <MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
-              <MalioInputText label="Concurrent"/>
+              <MalioInputText v-model="concurrent" label="Concurrent"/>
               <MalioInputText label="Date création"/>
               <MalioInputText label="Nombre de salariés" />
               <MalioInputAmount label="CA"/>
@@ -278,12 +278,40 @@ const onSearchAdresse = async (query: string) => {
 }
 
 const tabsValue = ref('information')
+const concurrent = ref('')
 
-const tabs = [
-  { key: 'information', label: 'Information', icon: 'mdi:account-outline' },
-  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-plus-outline' },
-  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
-  { key: 'transport', label: 'Transport', icon: 'mdi:truck-delivery-outline' },
-  { key: 'comptabilité', label: 'Comptabilité', icon: 'mdi:bank-circle-outline' },
-]
+const informationValid = computed(() => concurrent.value.trim().length > 0)
+const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
+
+const tabs = computed(() => [
+  {
+    key: 'information',
+    label: 'Information',
+    icon: 'mdi:account-outline',
+  },
+  {
+    key: 'contacts',
+    label: 'Contacts',
+    icon: 'mdi:account-box-plus-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'adresses',
+    label: 'Adresses',
+    icon: 'mdi:map-marker-outline',
+    disabled: !informationValid.value,
+  },
+  {
+    key: 'transport',
+    label: 'Transport',
+    icon: 'mdi:truck-delivery-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+  {
+    key: 'comptabilité',
+    label: 'Comptabilité',
+    icon: 'mdi:bank-circle-outline',
+    disabled: !informationValid.value || !adressesValid.value,
+  },
+])
 </script>