<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">

            <h1>🚧 Static Page with Vue Components 🚧</h1>

            <hello-islands message="This is an attribute on the web component, that's bound to a prop in the Vue component. Cool, right?" color="dodgerblue"></hello-islands>

        </div> <!-- /.row -->

        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">

            <p>

                <span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br>

                <span class="font-monospace text-danger">-&lt;!-- &lt;hello-world&gt;&lt;/hello-world&gt; --&gt;</span><br>

                <span class="font-monospace text-success">+&lt;hello-world&gt;&lt;/hello-world&gt;</span>

            </p>

            <!-- <hello-world></hello-world> -->

        </div> <!-- /.row -->

        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">

            <dialog-island id="surprise"></dialog-island>

            <button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button>

        </div>

            setTimeout(() => {

                const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");

                firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.'

            }, 2000);

            $("#surprise-button").on("click", () => {

                $("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`);

            });

<template>

    <Dialog />

</template>

<script>

import { inject, watch } from "vue"

import Dialog from "../Dialog.vue"

export default {

    props: {

        message: {

            type: String,

            default: null,

        },

        error: {

            type: String,

            default: null,

        },

        warning: {

            type: String,

            default: null,

        },

        confirmation: {

            type: Object,

            default: () => null,

        },

        isSubmitting: {

            type: Boolean,

            default: false,

        },

        isLoading: {

            type: Boolean,

            default: false,

        },

        acceptCallback: {

            type: Function,

            default: null,

        },

    },

    setup(props) {

        const mainStore = inject("mainStore")

        const {

            setMessage,

            setError,

            setWarning,

            setConfirmation,

            setSubmitting,

            setLoading,

            setAcceptCallback,

        } = mainStore

        watch(

            () => props.message,

            newVal => {

                setMessage(newVal)

            }

        )

        watch(

            () => props.error,

            newVal => {

                setError(newVal)

            }

        )

        watch(

            () => props.warning,

            newVal => {

                setWarning(newVal)

            }

        )

        watch(

            () => props.confirmation,

            newVal => {

                setConfirmation(newVal)

            }

        )

        watch(

            () => props.isSubmitting,

            newVal => {

                setSubmitting(newVal)

            }

        )

        watch(

            () => props.isLoading,

            newVal => {

                setLoading(newVal)

            }

        )

        watch(

            () => props.acceptCallback,

            newVal => {

                setAcceptCallback(newVal)

            }

        )

        return {}

    },

    components: {

        Dialog,

    },

}

</script>

<template>

    <h2 :style="{ color }">Hello from Islands!</h2>

    <p>This component is rendered as an island in a static HTML page.</p>

    <!-- Display message prop -->

    <p v-if="message">{{ message }}</p>

    <!-- Display store data -->

    <p v-if="stringFromStore">{{ stringFromStore }}</p>

    <p v-if="anotherStoreString">{{ anotherStoreString }}</p>

    <!-- Reactive counter example -->

    <p>Counter: {{ count }}</p>

    <!-- Koha's bootstrap works in here! -->

    <button @click="incrementCounter" class="btn btn-primary">

        Increment Counter

    </button>

</template>

<script>

import { ref } from "vue"

import { inject } from "vue"

export default {

    props: {

        message: {

            type: String,

            default: "No content",

        },

        color: {

            type: String,

            default: "crimson",

        },

    },

    setup() {

        const mainStore = inject("mainStore")

        const { stringFromStore } = mainStore

        const navigationStore = inject("navigationStore")

        const { anotherStoreString } = navigationStore

        return {

            stringFromStore,

            anotherStoreString,

        }

    },

    data() {

        return {

            count: 0,

        }

    },

    methods: {

        incrementCounter() {

            this.count++

        },

    },

}

</script>

<!--

Say Hello World with Vue!

-->

<script setup>

import { ref } from "vue"

// A "ref" is a reactive data source that stores a value.

// Technically, we don't need to wrap the string with ref()

// in order to display it, but we will see in the next

// example why it is needed if we ever intend to change

// the value.

const message = ref("Hello World!")

</script>

<template>

    <h1>{{ message }}</h1>

</template>

        stringFromStore: "Hello from main store",

        anotherStoreString: "Hello from nav store",

-