renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add radio button component

Browse Source
This commit is contained in:
Hakadao
2023-07-23 20:22:25 +08:00
parent 9c97b3a774
commit 435df67bf4
3 changed files with 53 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Radio.vue Normal file
View File

@@ -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>

7
src/components/Settings/components/Appearance.vue
View File

@@ -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>

12
src/components/Settings/components/General.vue
View File

@@ -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>