opnform/client/components/global/transitions/Collapsible.vue

44 lines
914 B
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
2023-12-19 15:45:23 +00:00
<transition @leave="(el,done)=>motions.collapsible.leave(done)">
2023-12-09 14:47:03 +00:00
<div
2023-12-19 15:45:23 +00:00
ref="collapsible"
2023-12-09 14:47:03 +00:00
v-if="modelValue"
v-motion="'collapsible'"
2023-12-19 15:45:23 +00:00
:variants="variants"
2023-12-09 14:47:03 +00:00
v-on-click-outside.bubble="close"
>
2023-12-19 15:45:23 +00:00
<slot/>
2023-12-09 14:47:03 +00:00
</div>
</transition>
</template>
2023-12-19 15:45:23 +00:00
<script setup>
import {vOnClickOutside} from '@vueuse/components'
2023-12-09 14:47:03 +00:00
2023-12-19 15:45:23 +00:00
const props = defineProps({
modelValue: {type: Boolean},
closeOnClickAway: {type: Boolean, default: true},
maxHeight: {type: Number, default: 200},
})
const emits = defineEmits(['update:modelValue'])
const motions = useMotions()
const variants = ref({
enter: {
opacity: 1,
y: 0,
transition: {duration: 150, ease: 'easeOut'}
2023-12-09 14:47:03 +00:00
},
2023-12-19 15:45:23 +00:00
initial: {
opacity: 0,
y: -10,
transition: {duration: 75, ease: 'easeIn'}
2023-12-09 14:47:03 +00:00
},
2023-12-19 15:45:23 +00:00
})
const close = () => {
if (props.closeOnClickAway) {
emits('update:modelValue', false)
2023-12-09 14:47:03 +00:00
}
}
</script>