33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
Vue
<template>
|
|
<div class="border-b border-border last:border-b-0">
|
|
<button
|
|
@click="open = !open"
|
|
class="w-full flex items-center gap-2 px-3 py-2 bg-section hover:bg-section/80 transition-colors cursor-pointer select-none"
|
|
>
|
|
<span
|
|
class="inline-block w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[5px] border-t-label transition-transform duration-200"
|
|
:class="{ '-rotate-90': !open }"
|
|
></span>
|
|
<span class="text-[11px] font-semibold uppercase tracking-[0.1em] text-label">{{ title }}</span>
|
|
<span v-if="badge !== undefined" class="ml-auto text-[10px] text-muted bg-deep px-1.5 py-0.5 rounded-sm">{{ badge }}</span>
|
|
</button>
|
|
<div class="folder-content" :class="{ 'folder-collapsed': !open }">
|
|
<div class="px-3 py-3">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
title: { type: String, required: true },
|
|
badge: { type: [String, Number], default: undefined },
|
|
defaultOpen: { type: Boolean, default: true },
|
|
});
|
|
|
|
const open = ref(props.defaultOpen);
|
|
</script>
|