<script setup>
import { useDialogPluginComponent } from 'quasar';

defineProps({
    id: {
        type: Number,
        required: true,
    },
    summary: {
        type: Object,
        required: true,
    },
    width: {
        type: String,
        default: 'md-width',
    },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>
<template>
    <QDialog ref="dialogRef" @hide="onDialogHide">
        <component :is="summary" :id="id" :class="width" />
    </QDialog>
</template>

<style lang="scss" scoped>
.md-width {
    max-width: $width-md;
}
.lg-width {
    max-width: $width-lg;
}
.xlg-width {
    max-width: $width-xl;
}
</style>
