wf4/app/components/Spoiler.vue
2025-05-28 06:30:44 +02:00

23 lines
No EOL
503 B
Vue

<template>
<details class="Spoiler" :open="open" @click="toggle">
<summary><Icon class="icon" :name="`ph:${open ? 'minus' : 'plus'}-circle-duotone`" mode="svg" />{{ header }}</summary>
<div>
<p v-for="text in content">{{ text }}</p>
</div>
</details>
</template>
<script setup lang="ts">
type Props = {
header: string
content: string[]
}
defineProps<Props>()
const open = ref(false)
const toggle = (event) => {
event.preventDefault()
open.value = !open.value
}
</script>