<template>
    <span style="position: relative; display: inline-block;">
        <div class="delete-button">
            <button class="btn btn-danger btn-sm" @click="triggerDelete">
                <b-icon-trash></b-icon-trash>
            </button>
        </div>
        <slot></slot>
    </span>
</template>

<style scoped>
.delete-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
</style>

<script>
import * as BIcons from "bootstrap-icons-vue";

export default {
    name: "DeletableWrapper",
    components: {
        ...BIcons
    },
    emits: ["delete"],
    methods: {
        triggerDelete() {
            this.$emit("delete");
        }
    }
}
</script>