notBrad/FMHYedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Switch

Browse Source
This commit is contained in:
taskylizard 2023-11-12 17:57:13 +05:30
parent 0c6d3d938c
commit 97815b3498
No known key found for this signature in database
GPG Key ID: 5CABA3D642DDC497
4 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
.vitepress/theme/components/Switch.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup>
import { ref } from "vue";
import { Switch } from "@headlessui/vue";
const enabled = ref(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>

4
.vitepress/theme/components/ToggleStarred.vue
View File

@ -1,9 +1,11 @@
<script setup lang="ts">
import Switch from "./Switch.vue";
const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
</script>
<template>
<button class="p-[4px 8px] text-xl i-carbon:star" @click="toggleStarred()" />
<Switch @click="toggleStarred()" />
</template>
<style>

1
package.json
View File

@ -15,6 +15,7 @@
"postinstall": "nitropack prepare"
},
"dependencies": {
"@headlessui/vue": "^1.7.16",
"@resvg/resvg-js": "^2.6.0",
"fast-glob": "^3.3.1",
"itty-fetcher": "^0.9.4",

12
pnpm-lock.yaml generated
View File

@ -10,6 +10,9 @@ patchedDependencies:
path: patches/vitepress@1.0.0-rc.25.patch
dependencies:
'@headlessui/vue':
specifier: ^1.7.16
version: 1.7.16(vue@3.3.7)
'@resvg/resvg-js':
specifier: ^2.6.0
version: 2.6.0
@ -1808,6 +1811,15 @@ packages:
engines: {node: '>=14'}
dev: false
/@headlessui/vue@1.7.16(vue@3.3.7):
resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
engines: {node: '>=10'}
peerDependencies:
vue: ^3.2.0
dependencies:
vue: 3.3.7
dev: false
/@iconify-json/carbon@1.1.21:
resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
dependencies: