Source: components/popup.vue

<template>
    <q-dialog v-model="$store.popup.show" :persistent="$store.popup.props.persistent" @hide="closeDialog"
        @keyup.esc="closeDialog" :maximized="$store.popup.props.maximized" @keydown.f9="translate">
        <q-card flat class="max-width">
            <q-card-section dense class="row items-center text-bold q-pa-sm background">
                {{ $store.popup.props.title }}
                <q-space />
                <help-button v-if="$store.popup.props.help" :name="$t($store.popup.props.help)"
                    :titleToShow="$store.popup.props.titleToShow ? $t($store.popup.props.titleToShow) : $t($store.popup.props.help)" />
                <q-btn dense size="sm" flat round icon="close" @click="closeDialog" />
            </q-card-section>
            <q-card-section class="q-pa-none">
                <component v-if="component" :is="component" />
            </q-card-section>
        </q-card>
    </q-dialog>
</template>

<script>
/**
 * Popup component for displaying various components.
 * 
 * @component
 * @name Popup
 * @example
 * <Popup />
 */

import { markRaw } from 'vue';
import HelpButton from './help-button.vue';

export default {
    name: 'Popup',
    components: {
        HelpButton
    },
    data() {
        return {
            component: null
        }
    },
    async mounted() {
        this.loadComponent();
    },
    methods: {
        /**
         * Loads the component.
         */
        async loadComponent() {
            const { default: component } = await import(`../components/${this.$store.popup.component}.vue`);
            this.component = markRaw(component);
        },
        closeDialog() {
            if (!this.$store.formChanged) this.$store.popup.show = false;
        }
    }
}
</script>