73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
/*
|
|
title: title
|
|
data: [{
|
|
title: subtitle,
|
|
key,
|
|
}]
|
|
*/
|
|
|
|
const props = defineProps({
|
|
open: Boolean,
|
|
title: String,
|
|
data: Array,
|
|
toggle: Function,
|
|
borderIsActive: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
borderClass: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
tabindex="0"
|
|
:class="
|
|
twMerge(
|
|
'collapse collapse-arrow bg-transparent rounded-none accordion',
|
|
open ? 'collapse-open ' : 'collapse-close'
|
|
)
|
|
"
|
|
>
|
|
<div
|
|
:class="
|
|
twMerge(
|
|
'collapse-title text-2xl font-bold w-full flex justify-between items-center text-white px-2 border-b cursor-pointer',
|
|
borderIsActive ? 'border-info' : borderClass
|
|
)
|
|
"
|
|
@click="toggle"
|
|
>
|
|
<slot name="collapseTitle" v-bind="{ data: d }">
|
|
{{ title }}
|
|
</slot>
|
|
</div>
|
|
<div
|
|
v-show="open"
|
|
:class="
|
|
twMerge(
|
|
'collapse-content border-b bg-normal m-0 p-4',
|
|
borderIsActive ? 'border-info' : borderClass
|
|
)
|
|
"
|
|
>
|
|
<ul>
|
|
<li v-for="d in data" class="cursor-pointer text-base text-white py-2">
|
|
<slot name="collapseContent" v-bind="{ data: d }">
|
|
{{ d.title }}
|
|
</slot>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped></style>
|