aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2026-02-18 01:01:23 +11:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve

Browse source
This commit is contained in:
maropboia 2024-05-03 11:38:59 +06:00
parent 3623ffc2bf
commit 75d99d2120
1 changed files with 180 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

186
.vitepress/theme/components/Switch.vue
View file

@ -3,11 +3,63 @@ import { ref } from 'vue'
import { Switch } from '@headlessui/vue'
const enabled = ref(false)
const switchRef = ref(null)
const toggleSwitch = () => {
enabled.value = !enabled.value
}
const handleDisabled = () => {
// Handle disabled state
}
const handleFocus = () => {
// Handle focus event
}
const handleBlur = () => {
// Handle blur event
}
</script>
<template>
<Switch v-model="enabled" class="switch" :class="{ enabled }">
<span class="thumb" />
<Switch
ref="switchRef"
v-model="enabled"
:class="{ enabled }"
:checked="enabled"
@click="toggleSwitch"
@disabled="handleDisabled"
@focus="handleFocus"
@blur="handleBlur"
:data-state="enabled ? 'checked' : 'unchecked'"
:data-testid="`switch-${enabled ? 'checked' : 'unchecked'}`"
:disabled="disabled"
:readonly="readonly"
:size="size"
:variant="variant"
:color="color"
:theme="theme"
:shape="shape"
:track="{
'--vp-input-switch-bg-color': trackColor,
'--vp-input-switch-border-color': trackBorderColor,
}"
:thumb="{
'--vp-input-switch-thumb-bg-color': thumbColor,
'--vp-input-switch-thumb-border-color': thumbBorderColor,
}"
:before="{
'--vp-input-switch-before-bg-color': beforeColor,
'--vp-input-switch-before-border-color': beforeBorderColor,
}"
:after="{
'--vp-input-switch-after-bg-color': afterColor,
'--vp-input-switch-after-border-color': afterBorderColor,
}"
>
<span class="sr-only">{{ enabled ? 'Enabled' : 'Disabled' }}</span>
<slot>{{ enabled ? 'On' : 'Off' }}</slot>
</Switch>
</template>
@ -24,15 +76,55 @@ const enabled = ref(false)
border-color 0.25s,
background-color 0.4s ease;
border-radius: 11px;
cursor: pointer;
outline: none;
}
.switch.enabled {
background-color: var(--vp-c-brand);
}
</style>
<style scoped>
.switch:hover {
.switch:focus {
box-shadow: 0 0 0 2px var(--vp-c-brand);
}
.switch:focus-within {
box-shadow: 0 0 0 2px var(--vp-c-brand);
}
.switch:disabled {
background-color: var(--vp-input-switch-disabled-bg-color);
border-color: var(--vp-input-switch-disabled-border-color);
cursor: not-allowed;
}
.switch:read-only {
background-color: var(--vp-input-switch-readonly-bg-color);
border-color: var(--vp-input-switch-readonly-border-color);
cursor: not-allowed;
}
.switch.enabled:focus {
box-shadow: 0 0 0 2px var(--vp-c-brand);
}
.switch.enabled:focus-within {
box-shadow: 0 0 0 2px var(--vp-c-brand);
}
.switch.enabled:disabled {
background-color: var(--vp-input-switch-disabled-bg-color);
border-color: var(--vp-input-switch-disabled-border-color);
cursor: not-allowed;
}
.switch.enabled:read-only {
background-color: var(--vp-input-switch-readonly-bg-color);
border-color: var(--vp-input-switch-readonly-border-color);
cursor: not-allowed;
}
.switch:hover:not(:disabled):not(:read-only) {
border-color: var(--vp-input-hover-border-color);
}
@ -49,4 +141,86 @@ const enabled = ref(false)
.switch.enabled .thumb {
transform: translateX(18px);
}
</style>
.switch:disabled .thumb,
.switch:read-only .thumb {
background-color: var(--vp-input-switch-disabled-thumb-bg-color);
box-shadow: none;
}
.switch:disabled .thumb:hover,
.switch:read-only .thumb:hover {
background-color: var(--vp-input-switch-disabled-thumb-bg-color);
box-shadow: none;
}
.switch.enabled:disabled .thumb,
.switch.enabled:read-only .thumb {
background-color: var(--vp-input-switch-disabled-thumb-bg-color);
box-shadow: none;
}
.switch.enabled:disabled .thumb:hover,
.switch.enabled:read-only .thumb:hover {
background-color: var(--vp-input-switch-disabled-thumb-bg-color);
box-shadow: none;
}
.switch[data-state="checked"]:not(:disabled):not(:read-only):hover .thumb {
background-color: var(--vp-input-switch-checked-hover-thumb-bg-color);
}
.switch[data-state="unchecked"]:not(:disabled):not(:read-only):hover .thumb {
background-color: var(--vp-input-switch-unchecked-hover-thumb-bg-color);
}
.switch[data-state="checked"]:not(:disabled):not(:read-only) .thumb {
background-color: var(--vp-input-switch-checked-thumb-bg-color);
}
.switch[data-state="unchecked"]:not(:disabled):not(:read-only) .thumb {
background-color: var(--vp-input-switch-unchecked-thumb-bg-color);
}
.switch[data-state="checked"]:not(:disabled):not(:read-only):active .thumb {
background-color: var(--vp-input-switch-checked-active-thumb-bg-color);
}
.switch[data-state="unchecked"]:not(:disabled):not(:read-only):active .thumb {
background-color: var(--vp-input-switch-unchecked-active-thumb-bg-color);
}
.switch[data-state="checked"]:not(:disabled):not(:read-only):focus .thumb {
background-color: var(--vp-input-switch-checked-focus-thumb-bg-color);
}
.switch[data-state="unchecked"]:not(:disabled):not(:read-only):focus .thumb {
background-color: var(--vp-input-switch-unchecked-focus-thumb-bg-color);
}
.switch[data-state="checked"]:not(:disabled):not(:read-only):focus-within .thumb {
background-color: var(--vp-input-switch-checked-focus-thumb-bg-color);
}
.switch[data-state="unchecked"]:not(:disabled):not(:read-only):focus-within .thumb {
background-color: var(--vp-input-switch-unchecked-focus-thumb-bg-color);
}
.switch[data-state="checked"]:disabled .thumb,
.switch[data-state="checked"]:read-only .thumb {
background-color: var(--vp-input-switch-disabled-checked-thumb-bg-color);
}
.switch[data-state="unchecked"]:disabled .thumb,
.switch[data-state="unchecked"]:read-only .thumb {
background-color: var(--vp-input-switch-disabled-unchecked-thumb-bg-color);
}
.switch[data-state="checked"]:disabled .thumb:hover,
.switch[data-state="checked"]:read-only .thumb:hover {
background-color: var(--vp-input-switch-disabled-checked-thumb-bg-color);
}
.switch[data-state="unchecked"]:disabled .thumb:hover,
.switch[data-state="unchecked"]:read-only .thumb:hover {
background-color: var(--vp-input-switch-disabled-un