Add new dropdown search

app/pages/pieces/create.vue

@@ -19,21 +19,17 @@
             <label class="label">
               <span class="label-text">Catégorie de pièce</span>
             </label>
-            <select
+            <SearchSelect
               v-model="selectedTypeId"
-              class="select select-bordered select-sm md:select-md"
+              :options="pieceTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
               :disabled="loadingTypes || submitting"
-              required
+            />
-            >
-              <option value="">Sélectionner une catégorie</option>
-              <option
-                v-for="type in pieceTypeList"
-                :key="type.id"
-                :value="type.id"
-              >
-                {{ type.name }}
-              </option>
-            </select>
             <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
               Chargement des catégories…
             </p>
@@ -232,6 +228,7 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from '#imports'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { usePieces } from '~/composables/usePieces'
 import { useToast } from '~/composables/useToast'
@@ -292,6 +289,12 @@ watch(selectedTypeId, (id) => {
 const loadingTypes = computed(() => loadingPieceTypes.value)
 const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
 
+const typeOptionLabel = (type?: PieceCatalogType) =>
+  type?.name || 'Catégorie'
+
+const typeOptionDescription = (type?: PieceCatalogType) =>
+  type?.description ? String(type.description) : ''
+
 const selectedType = computed(() => {
   if (!selectedTypeId.value) {
     return null