| 1 |
<template> |
| 2 |
<div |
| 3 |
class="accordion-card" |
| 4 |
:class="{ |
| 5 |
'accordion-card--is-toggleable': props.togglable, |
| 6 |
'accordion-card--is-hidden': !cardVisible, |
| 7 |
}" |
| 8 |
> |
| 9 |
<div |
| 10 |
class="accordion-card__header" |
| 11 |
@click.prevent="toggleCard" |
| 12 |
> |
| 13 |
<div class="accordion-card__title"> |
| 14 |
<slot name="title" /> |
| 15 |
</div> |
| 16 |
<div |
| 17 |
v-if="slots['title-right']" |
| 18 |
class="accordion-card__title accordion-card__title--align-right" |
| 19 |
> |
| 20 |
<slot name="title-right" /> |
| 21 |
</div> |
| 22 |
<div |
| 23 |
v-if="props.togglable" |
| 24 |
class="accordion-card__arrow" |
| 25 |
> |
| 26 |
<svg |
| 27 |
xmlns="http://www.w3.org/2000/svg" |
| 28 |
width="24" |
| 29 |
height="24" |
| 30 |
viewBox="0 0 24 24" |
| 31 |
fill="none" |
| 32 |
> |
| 33 |
<path |
| 34 |
d="M11.9998 14.95C11.8665 14.95 11.7415 14.9292 11.6248 14.8875C11.5081 14.8458 11.3998 14.775 11.2998 14.675L6.6998 10.075C6.51647 9.89166 6.4248 9.65833 6.4248 9.37499C6.4248 9.09166 6.51647 8.85833 6.6998 8.67499C6.88314 8.49166 7.11647 8.39999 7.3998 8.39999C7.68314 8.39999 7.91647 8.49166 8.0998 8.67499L11.9998 12.575L15.8998 8.67499C16.0831 8.49166 16.3165 8.39999 16.5998 8.39999C16.8831 8.39999 17.1165 8.49166 17.2998 8.67499C17.4831 8.85833 17.5748 9.09166 17.5748 9.37499C17.5748 9.65833 17.4831 9.89166 17.2998 10.075L12.6998 14.675C12.5998 14.775 12.4915 14.8458 12.3748 14.8875C12.2581 14.9292 12.1331 14.95 11.9998 14.95Z" |
| 35 |
fill="#673DE6" |
| 36 |
/> |
| 37 |
</svg> |
| 38 |
</div> |
| 39 |
</div> |
| 40 |
<Vue3SlideUpDown |
| 41 |
v-model="cardVisible" |
| 42 |
:duration="400" |
| 43 |
> |
| 44 |
<div class="accordion-card__body"> |
| 45 |
<slot name="body" /> |
| 46 |
</div> |
| 47 |
</Vue3SlideUpDown> |
| 48 |
</div> |
| 49 |
</template> |
| 50 |
|
| 51 |
<script lang="ts" setup> |
| 52 |
import { ref, useSlots } from "vue"; |
| 53 |
import { Vue3SlideUpDown } from "vue3-slide-up-down"; |
| 54 |
|
| 55 |
const props = defineProps({ |
| 56 |
togglable: { |
| 57 |
type: Boolean, |
| 58 |
default: false, |
| 59 |
required: false |
| 60 |
}, |
| 61 |
isVisible: { |
| 62 |
type: Boolean, |
| 63 |
default: true, |
| 64 |
required: false |
| 65 |
} |
| 66 |
}); |
| 67 |
|
| 68 |
const slots = useSlots(); |
| 69 |
|
| 70 |
const cardVisible = ref(true); |
| 71 |
|
| 72 |
if (!props.isVisible) { |
| 73 |
cardVisible.value = false; |
| 74 |
} |
| 75 |
|
| 76 |
const toggleCard = () => { |
| 77 |
if (props.togglable) { |
| 78 |
cardVisible.value = !cardVisible.value; |
| 79 |
} |
| 80 |
}; |
| 81 |
</script> |
| 82 |
|
