1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-25 12:07:59 +09:00
elk/components/status/StatusSpoiler.vue
2022-11-27 15:20:33 +08:00

21 lines
523 B
Vue

<script setup lang="ts">
const props = defineProps<{ enabled: boolean }>()
const showContent = ref(!props.enabled)
const toggleContent = useToggle(showContent)
watchEffect(() => {
showContent.value = !props.enabled
})
</script>
<template>
<div v-if="enabled" flex flex-col items-start gap-2>
<slot name="spoiler" />
<button btn-outline px-2 py-1 text-3 @click="toggleContent()">
{{ showContent ? 'Show less' : 'Show more' }}
</button>
</div>
<slot v-if="!enabled || showContent" />
</template>