34 lines
784 B
Vue
34 lines
784 B
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
interface Props {
|
|
title: string
|
|
}
|
|
|
|
const icons = ['mdi-chevron-right', 'mdi-chevron-down']
|
|
const isOpen = ref(true)
|
|
const { title } = defineProps<Props>()
|
|
|
|
const icon = computed(() => {
|
|
return isOpen.value ? icons[1] : icons[0]
|
|
})
|
|
|
|
const open = () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex flex-column ga-1">
|
|
<div class="d-flex align-center ga-1">
|
|
<v-btn density="compact" size="small" :icon="icon" @click="open" />
|
|
<div @click="open" class="font-weight-bold text-capitalize text-title-medium cursor-pointer">{{ title }}</div>
|
|
</div>
|
|
<div v-if="isOpen" class="ml-6 mt-2">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|