marzban-dev
44 lines
1020 B
Vue
44 lines
1020 B
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
modelValue: boolean;
|
|
};
|
|
|
|
type Emits = {
|
|
"update:modelValue": [value: boolean];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { modelValue } = toRefs(props);
|
|
|
|
// emit
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
// computed
|
|
|
|
const value = computed({
|
|
get: () => modelValue.value,
|
|
set: (value) => {
|
|
emit("update:modelValue", value);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<SwitchRoot
|
|
v-model="value"
|
|
class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
|
|
>
|
|
<SwitchThumb
|
|
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
|
|
/>
|
|
</SwitchRoot>
|
|
</template>
|
|
|
|
<style scoped></style>
|