45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
/**
|
|
* Toast-Notification Component (Alpine.js)
|
|
*
|
|
* Renders the global notification queue from $store.notifications as a stack
|
|
* of toasts in the top-right corner. Pages include this component exactly once,
|
|
* typically in a shared layout fragment (e.g. app.html and index.html).
|
|
*
|
|
* Usage in HTML:
|
|
* <div x-data="toastContainer()" class="crm-toast-container" x-cloak>
|
|
* <template x-for="n in items" :key="n.id">
|
|
* <div class="crm-toast" :class="'toast-' + n.type"
|
|
* @click="dismiss(n.id)" x-text="n.message"></div>
|
|
* </template>
|
|
* </div>
|
|
*
|
|
* R-5: x-text only, never x-html.
|
|
*/
|
|
|
|
export function toastContainer() {
|
|
return {
|
|
get items() {
|
|
return window.Alpine ? Alpine.store('notifications').items : [];
|
|
},
|
|
dismiss(id) {
|
|
if (window.Alpine) Alpine.store('notifications').dismiss(id);
|
|
},
|
|
};
|
|
}
|
|
|
|
// Register the component as a global Alpine.data() factory. Pages can use
|
|
// `x-data="toastContainer()"` after this module is imported.
|
|
if (typeof window !== 'undefined') {
|
|
document.addEventListener('alpine:init', () => {
|
|
if (window.Alpine && !Alpine.$data_registry) {
|
|
// no-op: Alpine 3 stores factories on the global namespace
|
|
}
|
|
// Alpine 3: Alpine.data(name, factory) registers globally for x-data="name"
|
|
if (window.Alpine) {
|
|
window.Alpine.data('toastContainer', toastContainer);
|
|
}
|
|
});
|
|
}
|
|
|
|
export default toastContainer;
|