24 lines
No EOL
515 B
Vue
24 lines
No EOL
515 B
Vue
<template>
|
|
<details class="Spoiler" :open="open">
|
|
<summary @click="toggle"><Icon class="icon" :name="icon" mode="svg" />{{ title }}</summary>
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
</details>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
title: string
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const open = ref(false)
|
|
const toggle = (event : MouseEvent) => {
|
|
event.preventDefault()
|
|
open.value = !open.value
|
|
}
|
|
|
|
const icon = computed(() => open.value ? 'ph:minus-circle-duotone' : 'ph:plus-circle-duotone')
|
|
</script> |