30 lines
889 B
Vue
30 lines
889 B
Vue
<script setup lang="ts">
|
|
import { useVModel } from '@vueuse/core';
|
|
|
|
interface Props {
|
|
modelValue?: boolean;
|
|
}
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false
|
|
});
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const value = useVModel(props, 'modelValue', emit);
|
|
</script>
|
|
|
|
<template>
|
|
<label class="flex items-center relative w-max cursor-pointer select-none">
|
|
<input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
|
|
<span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped lang="postcss">
|
|
input:checked ~ span:last-child {
|
|
--tw-translate-x: 1.25rem;
|
|
}
|
|
</style> |