19 lines
868 B
Vue
19 lines
868 B
Vue
<script setup lang="ts">
|
|
const collapsed = defineModel<boolean>({
|
|
default: true,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div @click="collapsed = !collapsed" class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" :class="$attrs.class">
|
|
<div class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 8L12 17L21 8"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="font-semibold xl:text-base text-sm flex-1"><slot name="header"></slot></div>
|
|
</div>
|
|
<div v-if="!collapsed">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</template> |