chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Test.vue

<template>
    <div class="vue-component">
        <h2>Tests</h2>

        <!-- Modal -->
        <ul class="record_actions">
            <li>
                <button class="btn btn-create" @click="modal1.showModal = true">
                    {{ $t("action.show_modal") }}
                </button>
            </li>
            <li>
                <button class="btn btn-create" @click="modal2.showModal = true">
                    Ouvrir une seconde modale
                </button>
            </li>
        </ul>

        <teleport to="body">
            <modal
                v-if="modal1.showModal"
                :modal-dialog-class="modal1.modalDialogClass"
                @close="modal1.showModal = false"
            >
                <template #header>
                    <h2 class="modal-title">Le titre de ma modale</h2>
                </template>
                <template #body>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus luctus facilisis suscipit. Cras pulvinar,
                        purus sagittis pulvinar porta, enim ex posuere lacus, in
                        pulvinar lectus magna in odio. Nullam iaculis congue
                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
                        viverra. Morbi dictum placerat suscipit.
                    </p>
                    <p>
                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
                        nisl. Nunc id enim ut sem pretium interdum consectetur
                        eu quam. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia curae; Etiam posuere
                        erat eget augue finibus luctus. Maecenas auctor, tortor
                        non luctus ultrices, neque neque porttitor ex, nec
                        lacinia lorem ligula et elit. Sed tempor nulla vitae
                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
                        pulvinar pretium. Phasellus facilisis metus sed diam
                        luctus, feugiat scelerisque velit dignissim.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus luctus facilisis suscipit. Cras pulvinar,
                        purus sagittis pulvinar porta, enim ex posuere lacus, in
                        pulvinar lectus magna in odio. Nullam iaculis congue
                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
                        viverra. Morbi dictum placerat suscipit.
                    </p>
                    <p>
                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
                        nisl. Nunc id enim ut sem pretium interdum consectetur
                        eu quam. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia curae; Etiam posuere
                        erat eget augue finibus luctus. Maecenas auctor, tortor
                        non luctus ultrices, neque neque porttitor ex, nec
                        lacinia lorem ligula et elit. Sed tempor nulla vitae
                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
                        pulvinar pretium. Phasellus facilisis metus sed diam
                        luctus, feugiat scelerisque velit dignissim.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus luctus facilisis suscipit. Cras pulvinar,
                        purus sagittis pulvinar porta, enim ex posuere lacus, in
                        pulvinar lectus magna in odio. Nullam iaculis congue
                        lorem ac suscipit. Proin ut rutrum augue. Ut vehicula
                        risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
                        viverra. Morbi dictum placerat suscipit.
                    </p>
                    <p>
                        Quisque non erat tincidunt, lacinia justo ut, pulvinar
                        nisl. Nunc id enim ut sem pretium interdum consectetur
                        eu quam. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia curae; Etiam posuere
                        erat eget augue finibus luctus. Maecenas auctor, tortor
                        non luctus ultrices, neque neque porttitor ex, nec
                        lacinia lorem ligula et elit. Sed tempor nulla vitae
                        lorem sollicitudin dictum. Vestibulum nec arcu eget elit
                        pulvinar pretium. Phasellus facilisis metus sed diam
                        luctus, feugiat scelerisque velit dignissim.
                    </p>
                </template>
                <template #footer>
                    <button
                        class="btn btn-create"
                        @click="
                            modal1.showModal = false;
                            modal2.showModal = true;
                        "
                    >
                        {{ $t("action.next") }}
                    </button>
                </template>
            </modal>
        </teleport>

        <teleport to="body">
            <modal
                v-if="modal2.showModal"
                :modal-dialog-class="modal2.modalDialogClass"
                @close="modal2.showModal = false"
            >
                <template #header>
                    <h2 class="modal-title">Une autre modale</h2>
                </template>
                <template #body>
                    <p>modal 2</p>
                </template>
                <template #footer>
                    <button
                        class="btn btn-create"
                        @click="modal2.showModal = false"
                    >
                        {{ $t("action.save") }}
                    </button>
                </template>
            </modal>
        </teleport>
        <!-- END Modal -->
    </div>
</template>

<script>
import Modal from "ChillMainAssets/vuejs/_components/Modal";

export default {
    name: "Test",
    components: {
        Modal,
    },
    data() {
        return {
            modal1: {
                showModal: false,
                modalDialogClass: "modal-dialog-scrollable modal-xl", // modal-lg modal-md modal-sm
            },
            modal2: {
                showModal: false,
                modalDialogClass: "modal-dialog-centered modal-sm", // modal-lg modal-md modal-sm
            },
        };
    },
    computed: {},
};
</script>