From 532066e68486c470bc2dafce082798b72ba2d347 Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Sat, 19 Jul 2025 01:16:39 +0800
Subject: [PATCH] feat: show placeholder when lists has no data (#293)

---
 .../Scenarios/Providers/SpeechPlayground.vue  | 42 ++++++++-----------
 .../src/components/Form/Field/FieldSelect.vue |  2 +-
 .../ui/src/components/Form/Select/Select.vue  |  4 ++
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/stage-ui/src/components/Scenarios/Providers/SpeechPlayground.vue b/packages/stage-ui/src/components/Scenarios/Providers/SpeechPlayground.vue
index bc08d1e3a..eaa8a40dc 100644
--- a/packages/stage-ui/src/components/Scenarios/Providers/SpeechPlayground.vue
+++ b/packages/stage-ui/src/components/Scenarios/Providers/SpeechPlayground.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { VoiceInfo } from '../../../stores'
 
-import { FieldCheckbox } from '@proj-airi/ui'
-import { onUnmounted, ref, watch } from 'vue'
+import { FieldCheckbox, FieldSelect } from '@proj-airi/ui'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { TestDummyMarker } from '../../Gadgets'
@@ -42,6 +42,13 @@ watch(
   { immediate: true },
 )
 
+const voiceOptions = computed(() => {
+  return props.availableVoices.map(voice => ({
+    value: voice.id,
+    label: voice.name,
+  }))
+})
+
 // Function to generate speech
 async function handleGenerateTestSpeech() {
   if ((!testText.value.trim() && !useSSML.value) || (useSSML.value && !ssmlText.value.trim()) || !selectedVoice.value)
@@ -153,28 +160,15 @@ defineExpose({
         />
       </template>
 
-      <div flex="~ col gap-6">
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              {{ t('settings.pages.providers.provider.elevenlabs.playground.fields.field.voice.label') }}
-            </div>
-            <div class="text-xs text-neutral-500 dark:text-neutral-400">
-              {{ t('settings.pages.providers.provider.elevenlabs.playground.fields.field.voice.description') }}
-            </div>
-          </div>
-          <select
-            v-model="selectedVoice"
-            border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
-            transition="border duration-250 ease-in-out" w-full rounded-lg px-2 py-1 text-nowrap text-sm
-            outline-none
-          >
-            <option v-for="voice in availableVoices" :key="voice.id" :value="voice.id">
-              {{ voice.name }}
-            </option>
-          </select>
-        </label>
-      </div>
+      <FieldSelect
+        v-model="selectedVoice"
+        class="[&>div]:grid [&>div]:grid-cols-[4fr_2fr]"
+        :options="voiceOptions"
+        :label="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.voice.label')"
+        :description="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.voice.description')"
+        layout="horizontal"
+      />
+
       <!-- Playground actions -->
       <div flex="~ row" gap-4>
         <button
diff --git a/packages/ui/src/components/Form/Field/FieldSelect.vue b/packages/ui/src/components/Form/Field/FieldSelect.vue
index 585f98a96..be5da634c 100644
--- a/packages/ui/src/components/Form/Field/FieldSelect.vue
+++ b/packages/ui/src/components/Form/Field/FieldSelect.vue
@@ -20,7 +20,7 @@ const modelValue = defineModel<string>({ required: false })
         props.layout === 'horizontal' ? 'flex flex-row items-center justify-between gap-2' : 'flex flex-col items-start justify-center gap-2',
       ]"
     >
-      <div flex="1">
+      <div class="min-w-[max-content] flex-1">
         <div class="flex items-center gap-1 text-sm font-medium">
           <slot name="label">
             {{ props.label }}
diff --git a/packages/ui/src/components/Form/Select/Select.vue b/packages/ui/src/components/Form/Select/Select.vue
index 35aa2ad8a..6adcf89d2 100644
--- a/packages/ui/src/components/Form/Select/Select.vue
+++ b/packages/ui/src/components/Form/Select/Select.vue
@@ -66,6 +66,10 @@ provide('hide', handleHide)
               @click="selectOption(option.value); hide()"
             />
           </template>
+
+          <p v-else class="my-3 text-center text-neutral-500 dark:text-neutral-400">
+            No data
+          </p>
         </slot>
       </div>
     </template>