diff --git a/CHANGELOG.md b/CHANGELOG.md index b094fa7909896d47220588013000e4758a96b43a..0df59bc6958fadd2956de19fc89ed79d6fc91db3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ CHANGELOG ========= +6.2.6 (07/01/2025) +------------------ + +- [Fix] Les composants Vue sont aussi chargés à l'intérieur de HTML renvoyé en Ajax + + 6.2.5 (19/09/2024) ------------------ diff --git a/js/Client/main.js b/js/Client/main.js index b1dda1c760d543727a38a059587826780a71e2c7..51698c093d1ce6bed7910731c81473bc9b0631ec 100644 --- a/js/Client/main.js +++ b/js/Client/main.js @@ -1,54 +1,76 @@ import {createApp} from 'vue'; import {createBootstrap} from 'bootstrap-vue-next'; - -// on met en place le client d'UnicaenVue import unicaenVue from './unicaenVue'; function init(vues, options) { - const components = {} + const components = {}; - if (undefined === options){ + if (undefined === options) { options = {}; } + // Convertir les chemins des composants en noms de composants for (const path in vues) { let compPath = path.slice(2, -4); let compName = compPath.replaceAll('/', ''); - components[compName] = vues[path].default; } - // instantiate the Vue apps - // Note our lookup is a wrapping div with .vue-app class - for (const el of document.getElementsByClassName('vue-app')) { + // Fonction pour initialiser une application Vue sur un élément + function mountVueApp(el) + { let app = createApp({ template: el.innerHTML, components: components }); - if (undefined !== options.beforeMount){ + if (undefined !== options.beforeMount) { options.beforeMount(app); } - //autoload de tous les composants déclarés - if (undefined !== options.autoloads){ - + // Autoload des composants déclarés + if (undefined !== options.autoloads) { for (const alias in options.autoloads) { let compName = options.autoloads[alias].replaceAll('/', ''); app.component(alias, components[compName]); } } - app.use(createBootstrap({components: true, directives: true})) + app.use(createBootstrap({components: true, directives: true})); app.mount(el); - if (undefined !== options.afterMount){ + if (undefined !== options.afterMount) { options.afterMount(app); } } + + // Initialiser les applications Vue sur les éléments existants + for (const el of document.getElementsByClassName('vue-app')) { + mountVueApp(el); + } + + // Observer les changements du DOM pour détecter les nouveaux éléments chargés en AJAX + const observer = new MutationObserver((mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + // Vérifier si de nouveaux éléments avec la classe .vue-app ont été ajoutés + for (const node of mutation.addedNodes) { + if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('vue-app')) { + mountVueApp(node); + } + } + } + } + }); + + // Démarrer l'observation du DOM + observer.observe(document.body, { + childList: true, // Observer les ajouts/suppressions d'enfants + subtree: true, // Observer tout le sous-arbre du DOM + }); } export default { init -} \ No newline at end of file +}; \ No newline at end of file