From 33ee62cd909b57e68134cf9735cc611733689a8e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 14 Mar 2025 17:50:38 +0800
Subject: [PATCH] fix(stage-ui): range number parse & for speech

---
 .../src/pages/settings/modules/speech.vue     | 26 ++++-----------
 .../pages/settings/providers/elevenlabs.vue   | 10 +++---
 .../src/pages/settings/modules/speech.vue     | 32 ++++---------------
 .../src/components/Form/Range/Range.vue       |  2 +-
 4 files changed, 20 insertions(+), 50 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
index 61952e6d4..f53e9b6d7 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RadioCardSimple } from '@proj-airi/stage-ui/components'
+import { RadioCardSimple, Range } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -38,16 +38,6 @@ function updateVoiceName(value: string) {
   updateSSMLExample()
 }
 
-function updatePitch(value: number) {
-  pitch.value = value
-  updateSSMLExample()
-}
-
-function updateRate(value: number) {
-  rate.value = value
-  updateSSMLExample()
-}
-
 function updateSSMLExample() {
   ssmlExample.value = `<speak>
   Hello, my name is <voice name="${voiceName.value || 'Default'}">
@@ -201,11 +191,10 @@ function updateSSMLExample() {
                 Pitch Adjustment (%)
               </label>
               <div class="flex items-center gap-3">
-                <input
-                  v-model="pitch" type="range" min="-50" max="50" step="5"
+                <Range
+                  v-model="pitch" :min="-50" :max="50" :step="5"
                   class="w-full"
-                  @input="(event) => updatePitch(parseInt((event.target as HTMLInputElement).value))"
-                >
+                />
                 <span class="w-12 text-center">{{ pitch }}%</span>
               </div>
             </div>
@@ -214,11 +203,10 @@ function updateSSMLExample() {
                 Speech Rate
               </label>
               <div class="flex items-center gap-3">
-                <input
-                  v-model="rate" type="range" min="0.5" max="2" step="0.1"
+                <Range
+                  v-model="rate" :min="0.5" :max="2" :step="0.1"
                   class="w-full"
-                  @input="(event) => updateRate(parseFloat((event.target as HTMLInputElement).value))"
-                >
+                />
                 <span class="w-12 text-center">{{ rate }}x</span>
               </div>
             </div>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
index fd56ff35a..dbc058df3 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
@@ -2,7 +2,7 @@
 import type { Voice } from '@proj-airi/stage-ui/constants'
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
-import { Collapsable } from '@proj-airi/stage-ui/components'
+import { Collapsable, Range } from '@proj-airi/stage-ui/components'
 import { voiceMap } from '@proj-airi/stage-ui/constants'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import { useToggle } from '@vueuse/core'
@@ -229,7 +229,7 @@ onUnmounted(() => {
               </div>
             </div>
             <div flex="~ row" items-center gap-2>
-              <input v-model="similarityBoost" type="range" min="0" max="1" step="0.01" w-full>
+              <Range v-model="similarityBoost" :min="0" :max="1" :step="0.01" w-full />
               <span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
             </div>
           </label>
@@ -244,7 +244,7 @@ onUnmounted(() => {
               </div>
             </div>
             <div flex="~ row" items-center gap-2>
-              <input v-model="stability" type="range" min="0" max="1" step="0.01" w-full>
+              <Range v-model="stability" :min="0" :max="1" :step="0.01" w-full />
               <span class="text-xs">{{ stability.toFixed(2) }}</span>
             </div>
           </label>
@@ -259,7 +259,7 @@ onUnmounted(() => {
               </div>
             </div>
             <div flex="~ row" items-center gap-2>
-              <input v-model="speed" type="range" min="0.7" max="1.2" step="0.01" w-full>
+              <Range v-model="speed" :min="0.7" :max="1.2" :step="0.01" w-full />
               <span class="text-xs">{{ speed.toFixed(2) }}</span>
             </div>
           </label>
@@ -274,7 +274,7 @@ onUnmounted(() => {
               </div>
             </div>
             <div flex="~ row" items-center gap-2>
-              <input v-model="style" type="range" min="0" max="1" step="0.01" w-full>
+              <Range v-model="style" :min="0" :max="1" :step="0.01" w-full />
               <span class="text-xs">{{ style.toFixed(2) }}</span>
             </div>
           </label>
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index b1336220f..f53e9b6d7 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RadioCardSimple } from '@proj-airi/stage-ui/components'
+import { RadioCardSimple, Range } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -38,16 +38,6 @@ function updateVoiceName(value: string) {
   updateSSMLExample()
 }
 
-function updatePitch(value: number) {
-  pitch.value = value
-  updateSSMLExample()
-}
-
-function updateRate(value: number) {
-  rate.value = value
-  updateSSMLExample()
-}
-
 function updateSSMLExample() {
   ssmlExample.value = `<speak>
   Hello, my name is <voice name="${voiceName.value || 'Default'}">
@@ -201,11 +191,10 @@ function updateSSMLExample() {
                 Pitch Adjustment (%)
               </label>
               <div class="flex items-center gap-3">
-                <input
-                  v-model="pitch" type="range" min="-50" max="50" step="5"
+                <Range
+                  v-model="pitch" :min="-50" :max="50" :step="5"
                   class="w-full"
-                  @input="(event) => updatePitch(parseInt((event.target as HTMLInputElement).value))"
-                >
+                />
                 <span class="w-12 text-center">{{ pitch }}%</span>
               </div>
             </div>
@@ -214,11 +203,10 @@ function updateSSMLExample() {
                 Speech Rate
               </label>
               <div class="flex items-center gap-3">
-                <input
-                  v-model="rate" type="range" min="0.5" max="2" step="0.1"
+                <Range
+                  v-model="rate" :min="0.5" :max="2" :step="0.1"
                   class="w-full"
-                  @input="(event) => updateRate(parseFloat((event.target as HTMLInputElement).value))"
-                >
+                />
                 <span class="w-12 text-center">{{ rate }}x</span>
               </div>
             </div>
@@ -265,9 +253,3 @@ function updateSSMLExample() {
     <div text="40" i-lucide:volume-2 translate-x-10 translate-y-10 />
   </div>
 </template>
-
-<route lang="yaml">
-meta:
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-ui/src/components/Form/Range/Range.vue b/packages/stage-ui/src/components/Form/Range/Range.vue
index fffd51753..30454df43 100644
--- a/packages/stage-ui/src/components/Form/Range/Range.vue
+++ b/packages/stage-ui/src/components/Form/Range/Range.vue
@@ -53,7 +53,7 @@ function updateTrackColor() {
 <template>
   <input
     ref="sliderRef"
-    v-model="sliderValue"
+    v-model.number="sliderValue"
     type="range"
     :min="scaledMin"
     :max="scaledMax"