2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
2024-09-05 10:37:48 +00:00
|
|
|
<label class="text-k-highlight text-base inline-block md:hidden ml-2">
|
2024-04-04 22:20:42 +00:00
|
|
|
<input v-model="value" class="hidden" type="checkbox">
|
2023-11-10 13:16:06 +00:00
|
|
|
<Icon :icon="value ? faCaretUp : faCaretDown" class="toggle" />
|
2024-04-04 22:20:42 +00:00
|
|
|
<span class="hidden">Toggle the song list controls</span>
|
2022-09-11 08:06:34 +00:00
|
|
|
</label>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
<script lang="ts" setup>
|
2022-10-25 18:25:58 +00:00
|
|
|
import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons'
|
2022-09-11 08:06:34 +00:00
|
|
|
import { computed } from 'vue'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-09-11 08:06:34 +00:00
|
|
|
const props = withDefaults(defineProps<{ modelValue?: boolean }>(), { modelValue: false })
|
|
|
|
|
2022-11-13 15:18:24 +00:00
|
|
|
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
2022-09-11 08:06:34 +00:00
|
|
|
|
|
|
|
const value = computed({
|
|
|
|
get: () => props.modelValue,
|
|
|
|
set: value => emit('update:modelValue', value)
|
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
</script>
|