source: main/trunk/model-interfaces-dev/atea/ocr/src/components/ModalDialog.vue@ 35752

<template>
<div class="background-cover">
    <div class="paper modal">
        <span class="heading3">{{ title }}</span>
        <hr />

        <span>{{ description }}</span>

        <div class="buttons">
            <button v-for="name in buttons" :key="name" class="btn-primary" @click="$emit('close', name)">{{ name }}</button>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
.background-cover {
    position: absolute;
    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #00000033;
    z-index: 9999;
}

.modal {
    max-width: 50%;
}

.buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin-top: 1em;
}

hr {
    margin: 0.5em 0;
    width: 100%;
}
</style>

<script>
export default {
    name: "ModalDialog",
    props: {
        title: String,
        description: String,
        buttons: Array
    },
    emits: [ "close" ]
}
</script>