ezfw-core 1.0.0

package/services/toast.js

@@ -0,0 +1,214 @@
+import styles from '../components/toast/EzToast.module.scss';
+import { cx } from '../utils/cssModules.js';
+
+const cls = cx(styles);
+
+const POSITION_MAP = {
+    'top-right': 'topRight',
+    'top-left': 'topLeft',
+    'top-center': 'topCenter',
+    'bottom-right': 'bottomRight',
+    'bottom-left': 'bottomLeft',
+    'bottom-center': 'bottomCenter'
+};
+
+export class EzToastService {
+    constructor() {
+        this._container = null;
+        this._toasts = [];
+        this._position = 'top-right';
+        this._defaultDuration = 4000;
+    }
+
+    _getPositionClass() {
+        return POSITION_MAP[this._position] || 'topRight';
+    }
+
+    _ensureContainer() {
+        if (this._container) return;
+
+        this._container = document.createElement('div');
+        this._container.className = cls('toastContainer', this._getPositionClass());
+        document.body.appendChild(this._container);
+    }
+
+    configure(options = {}) {
+        if (options.position) {
+            this._position = options.position;
+            if (this._container) {
+                this._container.className = cls('toastContainer', this._getPositionClass());
+            }
+        }
+        if (options.duration !== undefined) {
+            this._defaultDuration = options.duration;
+        }
+    }
+
+    show(options) {
+        const config = typeof options === 'string'
+            ? { message: options }
+            : options;
+
+        const {
+            message,
+            title,
+            variant = 'info',
+            duration = this._defaultDuration,
+            position = null,
+            closable = true,
+            icon = null,
+            action = null
+        } = config;
+
+        // Use custom position or default
+        const activePosition = position || this._position;
+        const positionClass = POSITION_MAP[activePosition] || 'topRight';
+
+        // Ensure container exists and update position if needed
+        this._ensureContainer();
+        if (position && position !== this._position) {
+            this._container.className = cls('toastContainer', positionClass);
+        }
+
+        const toast = document.createElement('div');
+        toast.className = cls('toast', variant);
+
+        // Icon
+        const iconEl = document.createElement('div');
+        iconEl.className = cls('toastIcon');
+        iconEl.innerHTML = this._getIcon(variant, icon);
+        toast.appendChild(iconEl);
+
+        // Content
+        const content = document.createElement('div');
+        content.className = cls('toastContent');
+
+        if (title) {
+            const titleEl = document.createElement('div');
+            titleEl.className = cls('toastTitle');
+            titleEl.textContent = title;
+            content.appendChild(titleEl);
+        }
+
+        const messageEl = document.createElement('div');
+        messageEl.className = cls('toastMessage');
+        messageEl.textContent = message;
+        content.appendChild(messageEl);
+
+        toast.appendChild(content);
+
+        // Action button (optional)
+        if (action) {
+            const actionBtn = document.createElement('button');
+            actionBtn.type = 'button';
+            actionBtn.className = cls('toastAction');
+            actionBtn.textContent = action.text;
+            actionBtn.addEventListener('click', () => {
+                action.onClick?.();
+                this._dismiss(toast);
+            });
+            toast.appendChild(actionBtn);
+        }
+
+        // Close button
+        if (closable) {
+            const closeBtn = document.createElement('button');
+            closeBtn.type = 'button';
+            closeBtn.className = cls('toastClose');
+            closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+            closeBtn.addEventListener('click', () => this._dismiss(toast));
+            toast.appendChild(closeBtn);
+        }
+
+        // Progress bar for auto-dismiss
+        if (duration > 0) {
+            const progress = document.createElement('div');
+            progress.className = cls('toastProgress');
+            progress.style.animationDuration = `${duration}ms`;
+            toast.appendChild(progress);
+        }
+
+        // Add to container
+        this._container.appendChild(toast);
+        this._toasts.push(toast);
+
+        // Trigger enter animation
+        requestAnimationFrame(() => {
+            toast.classList.add(cls('toastVisible'));
+        });
+
+        // Auto dismiss
+        if (duration > 0) {
+            toast._timeout = setTimeout(() => {
+                this._dismiss(toast);
+            }, duration);
+        }
+
+        return {
+            dismiss: () => this._dismiss(toast)
+        };
+    }
+
+    _dismiss(toast) {
+        if (!toast || !toast.parentNode) return;
+
+        if (toast._timeout) {
+            clearTimeout(toast._timeout);
+        }
+
+        toast.classList.remove(cls('toastVisible'));
+        toast.classList.add(cls('toastExiting'));
+
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+            this._toasts = this._toasts.filter(t => t !== toast);
+        }, 300);
+    }
+
+    _getIcon(variant, customIcon) {
+        if (customIcon) return `<i class="${customIcon}"></i>`;
+
+        const icons = {
+            success: '<i class="fa-solid fa-circle-check"></i>',
+            error: '<i class="fa-solid fa-circle-xmark"></i>',
+            warning: '<i class="fa-solid fa-triangle-exclamation"></i>',
+            info: '<i class="fa-solid fa-circle-info"></i>'
+        };
+
+        return icons[variant] || icons.info;
+    }
+
+    success(messageOrConfig, options = {}) {
+        const config = typeof messageOrConfig === 'string'
+            ? { message: messageOrConfig, ...options }
+            : messageOrConfig;
+        return this.show({ ...config, variant: 'success' });
+    }
+
+    error(messageOrConfig, options = {}) {
+        const config = typeof messageOrConfig === 'string'
+            ? { message: messageOrConfig, ...options }
+            : messageOrConfig;
+        return this.show({ ...config, variant: 'error' });
+    }
+
+    warning(messageOrConfig, options = {}) {
+        const config = typeof messageOrConfig === 'string'
+            ? { message: messageOrConfig, ...options }
+            : messageOrConfig;
+        return this.show({ ...config, variant: 'warning' });
+    }
+
+    info(messageOrConfig, options = {}) {
+        const config = typeof messageOrConfig === 'string'
+            ? { message: messageOrConfig, ...options }
+            : messageOrConfig;
+        return this.show({ ...config, variant: 'info' });
+    }
+
+    dismissAll() {
+        [...this._toasts].forEach(toast => this._dismiss(toast));
+    }
+}

package/template/doc/EzDocs.js

@@ -0,0 +1,15 @@
+ez.define('EzDocs', {
+    eztype: 'EzComponent',
+    controller: 'EzDocsController',
+    cls: 'ez-docs',
+    items: [
+        {
+            eztype: 'EzDocsSidebar'
+        },
+        {
+            eztype: 'EzOutlet',
+            ref: 'docsOutlet',
+            cls: 'ez-docs-content'
+        }
+    ]
+});