42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<!-- Ported from legacy henza_pwa/src/components/dropDown.vue -->
|
|
<template>
|
|
<div :class="`rounded-[5px] border border-solid text-primary px-[15px] py-[15px] ${show ? 'border-secondary' : 'border-lightGray/20'}`">
|
|
<div class="flex w-full justify-between cursor-pointer" @click="show = !show">
|
|
<h5 class="flex-1 m-0">
|
|
<slot name="text">{{ text }}</slot>
|
|
</h5>
|
|
<Icon icon="vuesax-linear:arrow-down" :class="`transition-all duration-200 ease-linear ${show ? 'rotate-180' : undefined}`" size="25" />
|
|
</div>
|
|
<transition name="drop" mode="out-in" appear>
|
|
<div class="w-full" style="overflow: hidden" v-if="show">
|
|
<slot />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Icon from '../icon/Icon.vue'
|
|
|
|
withDefaults(defineProps<{ text?: string }>(), {})
|
|
const show = ref(false)
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.drop-enter-active {
|
|
animation: drop 0.2s cubic-bezier(0.33, 1, 0.68, 1);
|
|
}
|
|
.drop-leave-to {
|
|
animation: drop 0.2s cubic-bezier(0.33, 1, 0.68, 1) reverse;
|
|
}
|
|
@keyframes drop {
|
|
0% {
|
|
max-height: 0;
|
|
}
|
|
100% {
|
|
max-height: 120px;
|
|
}
|
|
}
|
|
</style>
|