refactor: adjust vale assigned to v-model within component

src/components/Input.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 type Size = 'small' | 'medium' | 'large'
 interface Props {
-  value: string
+  modelValue: string
   size?: Size
 }
 const props = withDefaults(defineProps<Props>(), { size: 'medium' })
 
-defineEmits(['update:value'])
+defineEmits(['update:modelValue'])
 
 const modelValue = ref<string>('')
 
 onMounted(() => {
-  modelValue.value = props.value
+  modelValue.value = props.modelValue
 })
 </script>
 
@@ -22,8 +22,7 @@ onMounted(() => {
     rounded="$bew-radius" outline-none transition-all duration-300
     bg="$bew-fill-1"
     focus:shadow focus:ring="2px $bew-theme-color"
-
-    @input="$emit('update:value', $event!.target!.value)"
+    @input="$emit('update:modelValue', $event!.target!.value)"
   >
 </template>
 

src/components/Radio.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 const props = defineProps<{
-  value: boolean
+  modelValue: boolean
   label?: string
 }>()
 
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:modelValue'])
 
 const modelValue = ref<boolean>()
 
 watch(() => modelValue.value, (newValue) => {
-  emit('update:value', newValue)
+  emit('update:modelValue', newValue)
 })
 
 onMounted(() => {
-  modelValue.value = props.value
+  modelValue.value = props.modelValue
 })
 </script>
 

src/components/Settings/components/Appearance.vue

@@ -143,7 +143,7 @@ function changeWallpaper(url: string) {
         <img v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
       </picture>
       <div>
-        <Input v-model:value="settings.wallpaper" w-full />
+        <Input v-model="settings.wallpaper" w-full />
         <p color="sm $bew-text-3" mt-2>
           {{ $t('settings.image_url_hint') }}
         </p>
@@ -156,7 +156,7 @@ function changeWallpaper(url: string) {
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
 
-    <Radio v-model:value="settings.enableWallpaperMasking" />
+    <Radio v-model="settings.enableWallpaperMasking" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
     <Slider v-model:value="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />

src/components/Settings/components/General.vue

@@ -57,7 +57,7 @@ watch(() => settings.value.language, (newValue, oldValue) => {
   </SettingItem>
 
   <SettingItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
-    <Radio v-model:value="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+    <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
   </SettingItem>
 
   <SettingItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
@@ -69,7 +69,7 @@ watch(() => settings.value.language, (newValue, oldValue) => {
   </SettingItem>
 
   <SettingItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
-    <Radio v-model:value="settings.enableHorizontalScrolling" />
+    <Radio v-model="settings.enableHorizontalScrolling" />
   </SettingItem>
 </template>
 

src/components/Settings/components/SearchPage.vue

@@ -77,15 +77,15 @@ function changeWallpaper(url: string) {
   </SettingItem>
 
   <SettingItem title="Enable glowing effect for the logo">
-    <Radio v-model:value="settings.searchPageLogoGlow" />
+    <Radio v-model="settings.searchPageLogoGlow" />
   </SettingItem>
 
   <SettingItem :title="$t('settings.logo_visibility')">
-    <Radio v-model:value="settings.searchPageShowLogo" />
+    <Radio v-model="settings.searchPageShowLogo" />
   </SettingItem>
 
   <SettingItem :title="$t('settings.bg_darkens_when_the_search_bar_is_focused')">
-    <Radio v-model:value="settings.searchPageDarkenOnSearchFocus" />
+    <Radio v-model="settings.searchPageDarkenOnSearchFocus" />
   </SettingItem>
 
   <SettingItem title="Choose the character displayed when the search bar is focused" next-line>
@@ -137,7 +137,7 @@ function changeWallpaper(url: string) {
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
 
-    <Radio v-model:value="settings.individuallySetSearchPageWallpaper" />
+    <Radio v-model="settings.individuallySetSearchPageWallpaper" />
   </SettingItem>
   <template v-if="settings.individuallySetSearchPageWallpaper">
     <SettingItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
@@ -211,7 +211,7 @@ function changeWallpaper(url: string) {
         <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
       </template>
 
-      <Radio v-model:value="settings.searchPageEnableWallpaperMasking" />
+      <Radio v-model="settings.searchPageEnableWallpaperMasking" />
     </SettingItem>
     <SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
       <Slider v-model:value="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />

src/components/Slider.vue

@@ -18,7 +18,7 @@ const modelValue = ref<number>(props.value)
 const rangeRef = ref<HTMLElement>() as Ref<HTMLElement>
 
 onMounted(() => {
-  modelValue.value = props.value ?? 0
+  modelValue.value = props.value
   const progress = (modelValue.value / rangeRef.value!.max) * 100
 
   rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
@@ -26,7 +26,7 @@ onMounted(() => {
   if (rangeRef.value) {
     rangeRef.value.addEventListener('input', (event: Event) => {
       const tempSliderValue = event.target!.value
-      emit('update:value', Number(tempSliderValue))
+      emit('update:value', tempSliderValue)
 
       const progress = (tempSliderValue / rangeRef.value!.max) * 100
 
@@ -59,7 +59,7 @@ label {
 input[type="range"] {
   &::-webkit-slider-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer duration-300;
+      border-2 border-$bew-border-color cursor-pointer;
   }
 
   &::-webkit-slider-thumb:hover {
@@ -68,7 +68,7 @@ input[type="range"] {
 
   &::-moz-range-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer duration-300;
+      border-2 border-$bew-border-color cursor-pointer;
   }
 
   &::-moz-range-thumb:hover {