Build a modal popup

Within the LokiComponents library, there is the option to display a given HTML element in a modal popup. This is directly based on the native HTML element <dialog>, driven by Alpine logic. Building a new modal simply means calling upon the right Alpine.js diretives from within the template. And depending upon your scenario, you can opt for a plain Alpine.js component or a component partial to mix into your custom Loki Component.

A simple modal component

First, there is a simple Alpine component data definition LokiModal, that could be used quickly in any PHTML template. By using the x-data HTML attribute with a value LokiModal (which is part of the Loki_Components module), the modal behaviour comes to life.

<div class="<?= $css('card my-2') ?>" x-data="LokiModal">
    <button @click="toggleModal" :disabled="isModalOpen">Pop up</button>

    <dialog x-ref="modal" class="border border-zinc-200 rounded-lg shadow-lg">
        <div>
            <button @click="toggleModal" class="float-right m-4 cursor-pointer w-4">Close</button>
            <p>Hello World</p>
        </div>
    </dialog>
</div>

The LokiModal definition includes the methods toggleModal, isModalOpen and isModalClosed so that you don't need to implement themselves. The actual <dialog> is reached by these methods via x-ref="modal" (so this.$refs.modal in the JavaScript code).

Adding modal behaviour to your own custom component

But what if you would like to add the same Alpine.js methods to your own existing component? The good news is that the LokiModal (and its Loki Component version LokiComponentModal) is based on a component partial LokiModalComponentPartial.

Imagine for instance that you already have an existing component ExampleLokiModalComponent (which is a Loki Component). To add modal behaviour, the component definition could be extended by destructuring the LokiModalComponentPartial object:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('ExampleLokiModalComponent', () => ({
            ...LokiComponentType,
            ...LokiModalComponentPartial,
        }));
    });
</script>

Using nested components

An alternative to merging the LokiModalComponentPartial object into your own Alpine component could be to make use of nested components:

<div x-data="ExampleLokiModalComponent">
    <div x-data="LokiModal">
        ...
    </div>
</div>

As long as the component properties and methods do not overlap, there is no harm in this.