41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<box size="none" class="opacity-[0.8] hover:opacity-[1.0]" :type="type">
|
|
<div href="#" @click.prevent="emit('update:model-value', modelValue === index ? -1 : index)" class="flex items-center justify-between p-2 cursor-pointer">
|
|
<div v-text="title"></div>
|
|
<div class="flex items-center space-x-2">
|
|
<slot name="buttons"></slot>
|
|
<chevron :class="{'rotate-180': modelValue === index}" class="w-3 h-3"></chevron>
|
|
</div>
|
|
</div>
|
|
<div v-if="modelValue === index" class="p-2 pt-0">
|
|
<slot />
|
|
</div>
|
|
</box>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Box from './Box.vue';
|
|
import Chevron from './icons/Chevron.vue';
|
|
|
|
const emit = defineEmits(['update:model-value']);
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
title: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
modelValue: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
index: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
});
|
|
</script>
|