From 435df67bf424575d3ef3f2c7c49fc1bceebf0f12 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 23 Jul 2023 20:22:25 +0800
Subject: [PATCH] feat: add radio button component

---
 src/components/Radio.vue                      | 49 +++++++++++++++++++
 .../Settings/components/Appearance.vue        |  7 +--
 .../Settings/components/General.vue           | 12 +----
 3 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Radio.vue

diff --git a/src/components/Radio.vue b/src/components/Radio.vue
new file mode 100644
index 00000000..20f68d29
--- /dev/null
+++ b/src/components/Radio.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  value: boolean
+  label?: string
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const modelValue = ref<boolean>()
+
+watch(() => modelValue.value, (newValue) => {
+  emit('update:value', newValue)
+})
+
+onMounted(() => {
+  modelValue.value = props.value
+})
+</script>
+
+<template>
+  <label cursor="pointer" pointer="auto" flex items-center gap-3>
+    <input v-model="modelValue" type="checkbox" hidden>
+    <span
+      inline-block w="$b-button-width" h="$b-button-height" bg="$bew-fill-1" rounded="[calc(var(--b-button-height)/2)]"
+      relative duration="~ 300 ease-in-out" border="size-$b-border-width color-$bew-fill-1"
+      after:content-none after:inline-block after:bg="white" after:rounded="[calc(var(--b-button-height)/2)]"
+      after:w="[calc(var(--b-button-height)-var(--b-border-width))]" after:h="[calc(var(--b-button-height)-var(--b-border-width))]"
+      after:border="size-$b-border-width color-$bew-fill-1"
+      after:pos="absolute top-[calc(0px-var(--b-border-width)/2)]" after:duration="~ 300 ease-in-out"
+    />
+    <span>{{ label }}</span>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+label {
+  --b-button-width: 50px;
+  --b-button-height: 25px;
+  --b-border-width: 2px;
+}
+
+input[type="checkbox"]:checked + span {
+  --at-apply: bg-$bew-theme-color-70 border-$bew-theme-color;
+}
+
+input[type="checkbox"]:checked + span::after {
+  --at-apply: border-$bew-theme-color translate-x-full;
+}
+</style>
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 1eeb87da..1e9caa21 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -151,11 +151,8 @@ function changeWallpaper(url: string) {
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
-    <label for="enableWallpaperMasking" class="chk-btn" cursor="pointer" pointer="auto">
-      <template v-if="settings.enableWallpaperMasking">{{ $t('common.enable') }}</template>
-      <template v-else>{{ $t('common.disable') }}</template>
-      <input id="enableWallpaperMasking" v-model="settings.enableWallpaperMasking" type="checkbox">
-    </label>
+
+    <Radio v-model:value="settings.enableWallpaperMasking" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
     <div flex gap-4>
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index f3fd72a1..bef018b3 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -57,11 +57,7 @@ watch(() => settings.value.language, (newValue, oldValue) => {
   </SettingItem>
 
   <SettingItem :title="$t('settings.topbar_visible')" :desc="$t('settings.topbar_visible_desc')">
-    <label for="topbarVisible" class="chk-btn" cursor="pointer" pointer="auto">
-      <template v-if="settings.isShowTopbar">{{ $t('settings.chk_box.show') }}</template>
-      <template v-else>{{ $t('settings.chk_box.hidden') }}</template>
-      <input id="topbarVisible" v-model="settings.isShowTopbar" type="checkbox">
-    </label>
+    <Radio v-model:value="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')">
@@ -73,11 +69,7 @@ watch(() => settings.value.language, (newValue, oldValue) => {
   </SettingItem>
 
   <SettingItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
-    <label for="enableHorizontalScrolling" class="chk-btn" cursor="pointer" pointer="auto">
-      <template v-if="settings.enableHorizontalScrolling">{{ $t('common.enable') }}</template>
-      <template v-else>{{ $t('common.disable') }}</template>
-      <input id="enableHorizontalScrolling" v-model="settings.enableHorizontalScrolling" type="checkbox">
-    </label>
+    <Radio v-model:value="settings.enableHorizontalScrolling" />
   </SettingItem>
 </template>