aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-11-27 16:31:09 +11:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add AMOLED switch component and update usage

Browse source
This commit is contained in:
land 2025-11-03 14:38:38 +05:30
parent 7f09a9d148
commit ba9fe8fa3f
3 changed files with 56 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/.vitepress/theme/components/ColorPicker.vue
View file

@ -2,7 +2,7 @@
import { colors } from '@fmhy/colors' import { colors } from '@fmhy/colors'
import { useStorage, useStyleTag } from '@vueuse/core' import { useStorage, useStyleTag } from '@vueuse/core'
import { watch, onMounted } from 'vue' import { watch, onMounted } from 'vue'
import Switch from './Switch.vue' import amoledswitch from './amoledswitch.vue'
const colorScales = [ const colorScales = [
'50', '50',
@ -135,7 +135,7 @@ const normalizeColorName = (colorName: string) =>
<!-- AMOLED toggle --> <!-- AMOLED toggle -->
<div class="mt-4 flex items-center gap-2"> <div class="mt-4 flex items-center gap-2">
<span class="text-sm text-$vp-c-text-2">AMOLED</span> <span class="text-sm text-$vp-c-text-2">AMOLED</span>
<Switch v-model="isAmoledMode" /> <amoledswitch v-model="isAmoledMode" />
</div> </div>
</div> </div>
</template> </template>

4
docs/.vitepress/theme/components/Switch.vue
View file

@ -2,11 +2,11 @@
import { Switch } from '@headlessui/vue' import { Switch } from '@headlessui/vue'
import { ref } from 'vue' import { ref } from 'vue'
const model = defineModel() const enabled = defineModel({ default: false })
</script> </script>
<template> <template>
<Switch v-model="model" class="switch" :class="{ enabled: model }"> <Switch v-model="enabled" class="switch" :class="{ enabled }">
<span class="thumb" /> <span class="thumb" />
</Switch> </Switch>
</template> </template>

52
docs/.vitepress/theme/components/amoledswitch.vue Normal file
View file

@ -0,0 +1,52 @@
<script setup>
import { Switch } from '@headlessui/vue'
import { ref } from 'vue'
const enabled = defineModel({ default: false })
</script>
<template>
<Switch v-model="enabled" class="switch" :class="{ enabled }">
<span class="thumb" />
</Switch>
</template>
<style>
.switch {
display: inline-flex;
position: relative;
width: 40px;
height: 22px;
flex-shrink: 0;
border: 1px solid var(--vp-input-border-color);
background-color: var(--vp-input-switch-bg-color);
transition:
border-color 0.25s,
background-color 0.4s ease;
border-radius: 11px;
}
.switch.enabled {
background-color: var(--vp-c-brand);
}
</style>
<style scoped>
.switch:hover {
border-color: var(--vp-input-hover-border-color);
}
.thumb {
display: inline-block;
background-color: #fff;
transition: transform 0.25s;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: var(--vp-shadow-1);
}
.switch.enabled .thumb {
transform: translateX(18px);
}
</style>