1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import { defineAsyncComponent } from 'vue';
function attachComponents(app, configuredComponents) {
configuredComponents.forEach(component => {
const name = component.split('/').reverse()[0];
app.component(name, defineAsyncComponent(() => {
const temp = import(`../../../vue/components/${component}.vue`);
temp.then(({default: c}) => {
const mounted = c.mounted ?? null;
c.mounted = function (...args) {
if (
this.$el instanceof Element
&& this.$el.closest('.studip-dialog')
&& this.$el.querySelector('[data-dialog-button]')
) {
this.$el.closest('.studip-dialog')
.querySelector('.ui-dialog-buttonpane')
?.remove();
}
if (mounted) {
mounted.call(this, args);
}
};
return c;
})
return temp;
}));
});
}
STUDIP.ready(() => {
document.querySelectorAll('[data-vue-app]:not([data-vue-app-created])').forEach(async (node) => {
node.dataset.vueAppCreated = 'true';
const config = Object.assign(
{
components: [],
plugins: {},
stores: {}
},
JSON.parse(node.dataset.vueApp)
);
const { createApp, store } = await STUDIP.Vue.load();
const promises = [Promise.resolve()];
for (const [index, name] of Object.entries(config.stores)) {
promises.push(
import(`../../../vue/store/${name}.js`).then(storeConfig => {
store.registerModule(index, storeConfig.default);
const dataElement = document.getElementById(`vue-store-data-${index}`);
if (dataElement) {
const data = JSON.parse(dataElement.innerText);
Object.keys(data).forEach(command => {
store.commit(`${index}/${command}`, data[command]);
});
dataElement.remove();
}
})
);
}
const plugins = [];
for (const [plugin, filename] of Object.entries(config.plugins)) {
promises.push(
import(`../../../vue/plugins/${filename}.js`)
.then((temp) => plugins.push(temp[plugin]))
);
}
await Promise.all(promises);
const app = createApp({
store,
beforeCreate() {
STUDIP.Vue.emit('VueAppWillCreate', this);
},
created() {
STUDIP.Vue.emit('VueAppDidCreate', this);
},
beforeMount() {
STUDIP.Vue.emit('VueAppWillMount', this);
},
mounted() {
STUDIP.Vue.emit('VueAppDidMount', this);
},
beforeUpdate() {
STUDIP.Vue.emit('VueAppWillUpdate', this);
},
updated() {
STUDIP.Vue.emit('VueAppDidUpdate', this);
},
beforeUnmount() {
STUDIP.Vue.emit('VueAppWillUnmount', this);
},
unmounted() {
STUDIP.Vue.emit('VueAppDidUnmount', this);
},
});
attachComponents(app, config.components);
plugins.forEach(plugin => app.use(plugin, { store }))
app.mount(node);
});
});
|
