diff options
| author | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2025-06-20 16:32:37 +0200 |
|---|---|---|
| committer | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2025-11-21 14:21:50 +0100 |
| commit | 06cdd050a45f92eccb993f2dc65560cc8bdc074a (patch) | |
| tree | 73c1d0a06002717d235f3eb1c95aa11ec9a11cae | |
| parent | 5d2bd227837aba6b1fb3af82aebc3327df7d0c0a (diff) | |
fix slot properties
| -rw-r--r-- | resources/assets/javascripts/bootstrap/vue.js | 27 |
1 files changed, 26 insertions, 1 deletions
diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js index a1a4a90..43cae60 100644 --- a/resources/assets/javascripts/bootstrap/vue.js +++ b/resources/assets/javascripts/bootstrap/vue.js @@ -1,3 +1,5 @@ +import {defineComponent} from "vue"; + STUDIP.ready(async () => { const vueAppNodes = document.querySelectorAll('[data-vue-app]:not([data-vue-app-created])'); for (const node of vueAppNodes) { @@ -5,6 +7,13 @@ STUDIP.ready(async () => { } }); +function sanitizeSlotProps(props) { + const reserved = new Set(['key', 'ref', 'is', 'slot', 'style', 'class']); + return Object.fromEntries( + Object.entries(props).filter(([k]) => !reserved.has(k)) + ); +} + async function mountVueApp(node) { node.dataset.vueAppCreated = 'true'; @@ -23,7 +32,23 @@ async function mountVueApp(node) { config.props, Object.fromEntries( Object.entries(config.slots).map(([slot, template]) => { - return [slot, () => h({ template })]; + return [ + slot, + (slotProps) => { + try { + return h( + defineComponent({ + template, + props: Object.keys(sanitizeSlotProps(slotProps)), + }), + {...slotProps} + ); + } catch (e) { + console.error(`Fehler im Slot "${slot}":`, e); + return h('div', {}, `Fehler im Slot "${slot}"`); + } + } + ]; }), ), ), |