26 lines
642 B
Vue
26 lines
642 B
Vue
<template>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
:aria-checked="modelValue"
|
|
class="relative inline-flex h-7 w-12 shrink-0 items-center rounded-full border transition"
|
|
:class="modelValue ? 'border-brand-700 bg-brand-700' : 'border-line bg-slate-200'"
|
|
@click="$emit('update:modelValue', !modelValue)"
|
|
>
|
|
<span
|
|
class="inline-block h-5 w-5 rounded-full bg-white shadow transition"
|
|
:class="modelValue ? 'translate-x-6' : 'translate-x-1'"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
modelValue: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
</script>
|