ConfirmModal.vue

<template>
    <modal :show="show"
           modal-class="flex justify-center items-center"
           max-width="sm"
           :closeable="closeable"
           @close="$emit('cancelled')">
        <div class="px-6 py-4">
            <div class="text-lg">
                <slot name="title"/>
            </div>

            <div class="mt-4">
                <slot name="content"/>
            </div>
        </div>

        <div class="flex justify-end w-full px-6 py-4">
            <cancel-button class="mr-2" @click.prevent="$emit('cancelled')">
                <slot name="cancel">
                    {{ trans("general.actions.cancel") }}
                </slot>
            </cancel-button>
            <primary-button class="bg-red-500" @click.prevent="$emit('confirmed')">
                <slot name="confirm">
                    {{ trans("general.actions.confirm") }}
                </slot>
            </primary-button>
        </div>
    </modal>
</template>

<script>
    import useTrans      from "../../Composables/useTrans"
    import CancelButton  from "../Buttons/CancelButton"
    import PrimaryButton from "../Buttons/PrimaryButton"
    import Modal         from "./Modal"

    export default {
        name: "ConfirmModal",

        emits: ["confirmed", "cancelled"],

        components: {
            PrimaryButton,
            CancelButton,
            Modal,
        },

        props: {
            show: { type: Boolean, required: false, default: false },
            closeable: { type: Boolean, required: false, default: true },
        },

        setup() {
            const trans = useTrans()

            return { trans }
        },
    }
</script>

DeleteConfirm.vue

<template>
    <slot :click="() => setShow(true)"/>

    <confirm-modal :show="show" @cancelled="handleCancelled" @confirmed="handleConfirmed">
        <template #title>
            {{ trans("general.messages.are_you_sure") }}
        </template>

        <template #content>
            {{ trans("general.messages.once_confirmed_it_cannot_be_undone") }}
        </template>

        <template #confirm>
            {{ trans("general.actions.delete") }}
        </template>
    </confirm-modal>
</template>

<script type="text/ecmascript-6">
    import useState     from "../../Composables/useState"
    import useTrans     from "../../Composables/useTrans"
    import ConfirmModal from "./ConfirmModal"

    export default {
        name: "DeleteConfirm",

        emits: ["cancelled", "confirmed"],

        components: { ConfirmModal },

        setup(props, { emit }) {
            const [show, setShow] = useState(false)

            const trans = useTrans()

            const handleCancelled = () => {
                setShow(false)
                emit("cancelled")
            }

            const handleConfirmed = () => {
                setShow(false)
                emit("confirmed")
            }

            return { show, trans, setShow, handleCancelled, handleConfirmed }
        },
    }
</script>

index.vue

<DeleteConfirm v-if="can('COMPANIES.DELETE')" @confirmed="deleteCompany(row.id)">
                        <template #default="{click}">
                            <Tooltip type="danger">
                                <ButtonComponent class="px-1 py-0 hover:text-red-500" @click.stop="click">
                                    <DeleteIcon class="!w-5 !h-5"/>
                                </ButtonComponent>

                                <template #content>
                                    {{ trans("general.actions.delete") }}
                                </template>
                            </Tooltip>
                        </template>
                    </DeleteConfirm>