Michael Winter
61332c28ef
- Upgrade from Nuxt 3.6.0 to Nuxt 4.3.1 - Replace nuxt-icon with @nuxt/icon (Nuxt 4 compatible) - Install missing icon collections (@iconify-json/ion, heroicons, etc.) - Fix icon colors: use style instead of color prop - Add AGENTS.md with coding guidelines - Fix icon alignment in index.vue (items-center)
55 lines
1 KiB
Vue
55 lines
1 KiB
Vue
<script lang="ts" setup>
|
|
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
|
import { ref, toRefs, watch } from 'vue'
|
|
import Collapsible from './Collapsible.vue'
|
|
|
|
interface CollapsibleItem {
|
|
title: string
|
|
content: string
|
|
isOpen?: boolean
|
|
}
|
|
|
|
const props
|
|
= defineProps<{
|
|
items?: CollapsibleItem[]
|
|
classes?: {
|
|
wrapper?: string
|
|
button?: string
|
|
title?: string
|
|
panel?: string
|
|
}
|
|
accordion?: boolean
|
|
}>()
|
|
|
|
const { items } = toRefs(props)
|
|
|
|
const children = ref(props.items)
|
|
|
|
watch(items, (val) => {
|
|
children.value = val
|
|
})
|
|
|
|
const onToggle = (item: CollapsibleItem) => {
|
|
if (props.accordion) {
|
|
children.value.forEach((child) => {
|
|
child.isOpen = false
|
|
})
|
|
item.isOpen = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full p-2" :class="classes?.wrapper">
|
|
<slot>
|
|
<Collapsible
|
|
v-for="(item, idx) in children"
|
|
:key="idx"
|
|
v-bind="item"
|
|
v-model="item.isOpen"
|
|
@toggle="onToggle(item)"
|
|
/>
|
|
</slot>
|
|
</div>
|
|
</template>
|