43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex gap-2">
|
|
<div
|
|
class="flex flex-wrap"
|
|
:class="[
|
|
'overflow-hidden transition-all duration-200',
|
|
isExpanded ? 'max-h-[1000px]' : 'max-h-[2rem]',
|
|
]"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
<button @click="isExpanded = !isExpanded" class="flex-shrink-0 w-6 h-6 mt-1">
|
|
<!-- <svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
:class="[
|
|
'transform transition-transform duration-200',
|
|
isExpanded ? 'rotate-90' : '',
|
|
]"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
> -->
|
|
<ChevronsDown size="20" class="text-gray-600" :class="[
|
|
'transform transition-transform duration-200',
|
|
isExpanded ? 'rotate-180' : '',
|
|
]"
|
|
viewBox></ChevronsDown>
|
|
|
|
<!-- <polyline points="9 18 15 12 9 6" /> -->
|
|
<!-- </svg> -->
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ChevronsDown
|
|
} from "lucide-vue-next";
|
|
import { ref } from "vue";
|
|
const isExpanded = ref(false);
|
|
</script>
|