fix: update base selector

packages/nc-gui/components/nc/form-builder/input/SelectBase.vue

@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  value: string
-  disabled?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    value: string
+    disabled?: boolean
+    dropdownMatchSelectWidth?: boolean
+  }>(),
+  {
+    dropdownMatchSelectWidth: true,
+  },
+)
 
 const emits = defineEmits(['update:value'])
 
@@ -14,10 +20,38 @@ const baseOptions = computed(() => {
   return basesStore.basesList.map((base) => ({
     label: base.title,
     value: base.id,
+    meta: base.meta,
   }))
 })
 </script>
 
 <template>
-  <NcSelect v-model:value="vModel" :disabled="disabled" :options="baseOptions" />
+  <NcSelect
+    v-model:value="vModel"
+    :disabled="disabled"
+    :show-search="baseOptions.length > 4"
+    allow-clear
+    placeholder="- Select base -"
+    :dropdown-match-select-width="dropdownMatchSelectWidth"
+  >
+    <a-select-option v-for="option of baseOptions" :key="option.value" :value="option.value">
+      <div class="w-full flex gap-2 items-center" :data-testid="option.value">
+        <div class="min-w-5 flex items-center justify-center">
+          <GeneralProjectIcon :color="parseProp(option.meta).iconColor" size="small" />
+        </div>
+        <NcTooltip class="flex-1 truncate min-w-0" show-on-truncate-only>
+          <template #title>
+            {{ option.label }}
+          </template>
+          {{ option.label }}
+        </NcTooltip>
+        <GeneralIcon
+          icon="check"
+          v-if="vModel === option.value"
+          id="nc-selected-item-icon"
+          class="text-nc-content-brand w-4 h-4"
+        />
+      </div>
+    </a-select-option>
+  </NcSelect>
 </template>