forked from nuxt/devtools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
NSwitch.vue
35 lines (33 loc) · 956 Bytes
/
NSwitch.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
const props = withDefaults(
defineProps<{
modelValue?: boolean
disabled?: boolean }>(),
{
modelValue: false,
disabled: false,
},
)
const emit = defineEmits<{ (...args: any): void }>()
const checked = useVModel(props, 'modelValue', emit, { passive: true })
</script>
<template>
<label
class="n-switch n-switch-base hover:n-switch-hover n-disabled:n-disabled"
:checked="checked || null"
:disabled="disabled || null"
>
<input
v-model="checked"
type="checkbox"
class="peer absolute op0"
:disabled="disabled"
@keypress.enter="checked = !checked"
>
<div class="n-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
<div class="n-checked:n-switch-thumb-checked n-switch-thumb n-transition" />
</div>
<slot />
</label>
</template>