elk/components/status/StatusSpoiler.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>