adrema/resources/js/components/ui/TableToggleButton.vue

<template>
    <div class="flex space-x-2" :class="levelMap[level]">
        <a
            v-if="value.children_count > 0"
            v-tooltip="active ? 'Schließen' : 'Öffnen'"
            href="#"
            class="inline-flex items-center justify-center bg-blue-700 text-blue-100 rounded w-5 h-5"
            @click.prevent="emit('toggle')"
        >
            <ui-sprite class="w-3 h-3" :src="active ? 'close' : 'plus'"></ui-sprite>
        </a>
        <span v-if="text" v-text="text"></span>
        <slot></slot>
    </div>
</template>

<script setup>
const emit = defineEmits(['toggle']);

const levelMap = {
    0: '',
    1: 'pl-7',
    2: 'pl-14',
};

const props = defineProps({
    text: {
        required: false,
        type: String,
        default: () => '',
    },
    value: {
        type: Object,
        required: true,
    },
    active: {
        type: Boolean,
        required: true,
    },
    level: {
        required: true,
        type: Number,
    },
});
</script>