tethys.backend/resources/js/Components/CardBoxModal.vue

<script setup lang="ts">
import { computed } from 'vue';
import { mdiClose } from '@mdi/js';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import CardBox from '@/Components/CardBox.vue';
import OverlayLayer from '@/Components/OverlayLayer.vue';

const props = defineProps({
    title: {
        type: String,
        default: null,
    },
    largeTitle: {
        type: String,
        default: null,
    },
    button: {
        type: String,
        default: 'info',
    },
    buttonLabel: {
        type: String,
        default: 'Done',
    },
    hasCancel: Boolean,
    modelValue: {
        type: [String, Number, Boolean],
        default: null,
    },
});

const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);

const value = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const confirmCancel = (mode) => {
    value.value = false;
    emit(mode);
};

const confirm = () => confirmCancel('confirm');

const cancel = () => confirmCancel('cancel');
</script>

<template>
    <OverlayLayer v-show="value" @overlay-click="cancel">
        <CardBox
            v-show="value"
            :title="title"
            class="shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50"
            :header-icon="mdiClose"
            modal
            @header-icon-click="cancel"
        >
            <div class="space-y-3">
                <h1 v-if="largeTitle" class="text-2xl">
                    {{ largeTitle }}
                </h1>
                <slot />
            </div>

            <template #footer>
                <BaseButtons>
                    <BaseButton :label="buttonLabel" :color="button" @click="confirm" />
                    <BaseButton v-if="hasCancel" label="Cancel" :color="button" outline @click="cancel" />
                </BaseButtons>
            </template>
        </CardBox>
    </OverlayLayer>
</template>