From 8225483d18ac3d7f47c8fe039938247fc626cb71 Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Wed, 2 Oct 2024 21:18:22 +0200 Subject: [PATCH] WIP --- demo-app/resources/js/app.js | 4 ++-- vue/src/ModalLink.vue | 30 ++++++++++++++++-------------- vue/src/ModalResolver.vue | 28 ++++++++++++++++++++++++++++ vue/src/ModalRoot.vue | 15 +++++++++++++++ vue/src/ModalWrapper.vue | 10 +++++++++- vue/src/inertiauiModal.js | 3 ++- 6 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 vue/src/ModalResolver.vue create mode 100644 vue/src/ModalRoot.vue diff --git a/demo-app/resources/js/app.js b/demo-app/resources/js/app.js index 115f572..2e58cea 100644 --- a/demo-app/resources/js/app.js +++ b/demo-app/resources/js/app.js @@ -5,7 +5,7 @@ import { createApp, h } from 'vue' import { createInertiaApp } from '@inertiajs/vue3' import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers' import { ZiggyVue } from '../../vendor/tightenco/ziggy' -import { putConfig } from 'inertiaui/modal' +import { putConfig, ModalRoot } from 'inertiaui/modal' const appName = import.meta.env.VITE_APP_NAME || 'Laravel' @@ -13,7 +13,7 @@ createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), setup({ el, App, props, plugin }) { - return createApp({ render: () => h(App, props) }) + return createApp({ render: () => h(ModalRoot, [h(App, props)]) }) .use(plugin) .use(ZiggyVue) .mount(el) diff --git a/vue/src/ModalLink.vue b/vue/src/ModalLink.vue index 63bbf7b..4733f41 100644 --- a/vue/src/ModalLink.vue +++ b/vue/src/ModalLink.vue @@ -102,13 +102,19 @@ onMounted(() => { const $attrs = useAttrs() -function handleEmittedEvent(event, ...args) { - // // e.g. refresh-key -> onRefreshKey - const kebabEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase()) - const listener = `on${kebabEvent.charAt(0).toUpperCase()}${kebabEvent.slice(1)}` - if (listener in $attrs) { - $attrs[listener](...args) - } +function registerEventListeners() { + Object.keys($attrs) + .filter((key) => key.startsWith('on')) + .forEach((key) => { + // e.g. onRefreshKey -> refresh-key + const snakeCaseKey = key + .replace(/^on/, '') + .replace(/^./, (firstLetter) => firstLetter.toLowerCase()) + .replace(/([A-Z])/g, '-$1') + .toLowerCase() + + modalContext.value.on(snakeCaseKey, $attrs[key]) + }) } watch(modalContext, (value, oldValue) => { @@ -117,6 +123,9 @@ watch(modalContext, (value, oldValue) => { window.location.hash = props.fragment } + // TODO: after unmounting, remove event listeners + registerEventListeners() + nextTick(() => { modalContext.value.open = true emit('success') @@ -168,11 +177,4 @@ function handle() { > - - diff --git a/vue/src/ModalResolver.vue b/vue/src/ModalResolver.vue new file mode 100644 index 0000000..2c4f173 --- /dev/null +++ b/vue/src/ModalResolver.vue @@ -0,0 +1,28 @@ + + + diff --git a/vue/src/ModalRoot.vue b/vue/src/ModalRoot.vue new file mode 100644 index 0000000..3741b0e --- /dev/null +++ b/vue/src/ModalRoot.vue @@ -0,0 +1,15 @@ + + + diff --git a/vue/src/ModalWrapper.vue b/vue/src/ModalWrapper.vue index 1090233..2c8fdb8 100644 --- a/vue/src/ModalWrapper.vue +++ b/vue/src/ModalWrapper.vue @@ -1,9 +1,10 @@ @@ -113,6 +116,11 @@ Object.keys($attrs) :modal-context="modalContext" :modal-props="modalProps" /> + + diff --git a/vue/src/inertiauiModal.js b/vue/src/inertiauiModal.js index f0c7ae6..248f5f7 100644 --- a/vue/src/inertiauiModal.js +++ b/vue/src/inertiauiModal.js @@ -1,5 +1,6 @@ import { getConfig, putConfig, resetConfig } from './config.js' import Modal from './Modal.vue' import ModalLink from './ModalLink.vue' +import ModalRoot from './ModalRoot.vue' -export { Modal, ModalLink, getConfig, putConfig, resetConfig } +export { Modal, ModalLink, ModalRoot, getConfig, putConfig, resetConfig }