mirror of
https://github.com/koel/koel
synced 2024-12-25 20:13:06 +00:00
25 lines
903 B
Vue
25 lines
903 B
Vue
|
<template>
|
||
|
|
<label
|
||
|
|
class="btn-toggle hidden md:flex w-[24px] aspect-square absolute rounded-full -right-[12px] top-[27px] items-center
|
||
|
|
justify-center z-10 text-k-text-secondary bg-k-bg-secondary border-[1.5px] border-white/20 cursor-pointer
|
||
|
|
hover:text-k-text-primary hover:bg-k-bg-secondary"
|
||
|
|
>
|
||
|
|
<input v-model="value" type="checkbox" class="hidden">
|
||
|
|
<Icon v-if="value" :icon="faAngleLeft" />
|
||
|
|
<Icon v-else :icon="faAngleRight" />
|
||
|
|
</label>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<{ modelValue?: boolean }>(), { modelValue: false })
|
||
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
||
|
|
|
||
|
|
const value = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: value => emit('update:modelValue', value)
|
||
|
|
})
|
||
|
|
</script>
|