<template>
    <transition name="fade">
        <div v-if="show" class="bubble" :class="{ [type]: true, [level]: true }" @click.stop>
            <div class="bubble-layer">
                <div class="bubble-arr" />
                <slot />
            </div>
        </div>
    </transition>
</template>

<script setup lang="ts">
defineOptions({
    name: 'UIBubble',
})
defineProps({
    type: {
        type: String,
        default: 'right',
    },
    show: {
        type: Boolean,
        default: true,
    },
    level: {
        type: String,
        require: false,
    },
})
</script>
