<template>
    <component
        :is="type"
        :tag="tag"
        @before-enter="setAbsolutePosition"
        @after-enter="cleanUp"
        @before-leave="setAbsolutePosition"
        @after-leave="cleanUp"
    >
        <slot></slot>
    </component>
</template>

<script setup lang="ts">
import { computed, Transition, TransitionGroup } from 'vue';

interface Props {
    speed?: string;
    enterClass?: string;
    leaveClass?: string;
    group?: boolean;
    tag?: string;
}

const props = withDefaults(defineProps<Props>(), {
    speed: 'normal',
    enterClass: 'slide-in-right',
    leaveClass: 'slide-out-right',
    group: false,
    tag: 'div'
});

const type = computed(() => (props.group ? TransitionGroup : Transition));

const setAbsolutePosition = (el: Element) => {
    const element = el as HTMLElement;
    element.style.width = 'calc(100% + 30px)';
    element.style.position = 'absolute';
};

const cleanUp = (el: Element) => {
    const element = el as HTMLElement;
    element.style.width = '';
    element.style.position = '';
};
</script>

<style scoped>
/* Add any necessary styles for transitions here if needed */
</style>
