From 64b5f4f1727f2dd9c71d17ee4b62029060831a92 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> Date: Fri, 18 Oct 2024 11:14:29 +0000 Subject: [PATCH] Bug 37911: (follow-up) Remove example islands for core submission Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> --- .../prog/en/modules/intranet-main.tt | 40 ------- .../vue/components/Islands/DialogIsland.vue | 107 ------------------ .../vue/components/Islands/HelloIslands.vue | 56 --------- .../js/vue/components/Islands/HelloWorld.vue | 18 --- .../prog/js/vue/modules/islands.ts | 64 ++++------- .../intranet-tmpl/prog/js/vue/stores/main.js | 1 - .../prog/js/vue/stores/navigation.js | 1 - 7 files changed, 20 insertions(+), 267 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt index a4d66045f76..388d49eed25 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt @@ -331,54 +331,14 @@ <!-- /.row --> </div> <!-- /#container-main.container-fluid --> -<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">-<!-- <hello-world></hello-world> --></span><br /> - <span class="font-monospace text-success">+<hello-world></hello-world></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> - [% MACRO jsinclude BLOCK %] [% INCLUDE 'calendar.inc' %] - [% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %] - <!-- - [% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %] - <script src="[% islands %]" type="module"> -</script> - <script type="module"> - import { hydrate } from "[% islands %]"; - hydrate(); - </script> - --> <script> var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone."); $(document).ready(function () { $(".news_delete").on("click", function () { return confirmDelete(MSG_CONFIRM_DELETE); }); - - 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>`); - }); }); </script> [% END %] diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue deleted file mode 100644 index dd9a5da0a68..00000000000 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue +++ /dev/null @@ -1,107 +0,0 @@ -<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> diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue deleted file mode 100644 index db824ba6d7b..00000000000 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue +++ /dev/null @@ -1,56 +0,0 @@ -<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> diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue deleted file mode 100644 index 91494fb47e7..00000000000 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue +++ /dev/null @@ -1,18 +0,0 @@ -<!-- -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> diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts index 9a96915af84..af004592a29 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts @@ -19,52 +19,28 @@ type WebComponentDynamicImport = { /** * A registry for Vue components. * @type {Map<string, WebComponentDynamicImport>} + * @property {string} key - The name of the component. + * @property {WebComponentDynamicImport} value - The configuration for the component. Includes the import function and optional configuration. + * @example + * // + * [ + * "hello-islands", + * { + * importFn: async () => { + * const module = await import( + * /* webpackChunkName: "hello-islands" */ +/** "../components/Islands/HelloIslands.vue" + * ); + * return module.default; + * }, + * config: { + * stores: ["mainStore", "navigationStore"], + * }, + * }, + * ], */ export const componentRegistry: Map<string, WebComponentDynamicImport> = - new Map([ - [ - "hello-islands", - { - importFn: async () => { - const module = await import( - /* webpackChunkName: "hello-islands" */ - "../components/Islands/HelloIslands.vue" - ); - return module.default; - }, - config: { - stores: ["mainStore", "navigationStore"], - }, - }, - ], - [ - "hello-world", - { - importFn: async () => { - const module = await import( - /* webpackChunkName: "hello-world" */ - "../components/Islands/HelloWorld.vue" - ); - return module.default; - }, - }, - ], - [ - "dialog-island", - { - importFn: async () => { - const module = await import( - /* webpackChunkName: "vue-dialog" */ - "../components/Islands/DialogIsland.vue" - ); - return module.default; - }, - config: { - stores: ["mainStore"], - }, - }, - ], - ]); + new Map([]); /** * Hydrates custom elements by scanning the document and loading only necessary components. diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js index b9317d79721..7a0c9e65166 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js @@ -12,7 +12,6 @@ export const useMainStore = defineStore("main", { displayed_already: false, _is_submitting: false, _is_loading: false, - stringFromStore: "Hello from main store", }), actions: { setMessage(message, displayed = false) { diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js index e76802b7e2e..1e3ecb58b36 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js @@ -11,7 +11,6 @@ export const useNavigationStore = defineStore("navigation", { }, current: null, params: {}, - anotherStoreString: "Hello from nav store", }), actions: { setRoutes(routesDef) { -- 2.48.1