Source: components/help-dialog.vue

<template>
    <q-dialog @keydown.esc="closeDialog" @hide="closeDialog" v-model="$store.popups.help.show"
        :max-width="computedOptions.width" :style="{ zIndex: computedOptions.zIndex }">
        <q-card class="max-width" v-if="edit">
            <html-editor v-model="helpTextEdit" saveCancel @save="saveHelp" @cancel="edit = false" />
        </q-card>
        <q-card v-else class="max-width">
            <q-toolbar dark :color="computedOptions.color" dense flat>
                <q-toolbar-title class="white--text text-subtitle1">{{ $store.popups.help.caption }}</q-toolbar-title>
                <q-btn v-if="isAdmin" round margin="xs" size="sm" padding="xs" icon="edit" @click="edit = true" />
                <q-btn round margin="xs" size="sm" padding="xs" icon="close" @click="closeDialog" />
            </q-toolbar>
            <q-card-section>
                <div class="text-body2" v-html="replaceIcons($store.popups.help.text)"></div>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>
<script>

/**
 * Represents the help dialog component.
 * 
 * @component
 * @name HelpButton
 * @example
 * <HelpDialog />
 */
import HtmlEditor from "./html-editor.vue";
export default {
    name: "HelpDialog",
    components: {
        HtmlEditor,
    },
    props: {
        name: String,
        options: {},
        titleToShow: String,
    },
    watch: {
        edit: function (val) {
            this.helpTextEdit = this.$store.popups.help.text;  //this.helpText;
        }
    },
    data: () => ({
        //helpText: "",
        helpTextEdit: "",
        caption: null,
        edit: false,
        computedOptions: {
            color: "primary",
            width: "unset",
            zIndex: 9999,
        },
    }),
    mounted() {
        Object.assign(this.computedOptions, this.options);
    },
    methods: {

        /**
         * Saves the help information.
         *
         * @param {Object} help - The help information to be saved.
         * @returns {Promise} - A promise that resolves when the help information is saved successfully.
         */
        async saveHelp(help) {
            await this.put("User/SetHelp/" + this.$store.popups.help.name, { help: help });
            //this.helpText = this.replaceIcons(help);
            this.$store.popups.help.text = help;
            this.edit = false;
        },

        /**
         * Closes the dialog.
         */
        closeDialog() {
            this.$store.popups.help.show = false;
            this.edit = false;
        },
    },
};
</script>