ezfw-core 1.0.0

package/components/toast/EzToast.module.scss

@@ -0,0 +1,291 @@
+.toastContainer {
+    position: fixed;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    pointer-events: none;
+    max-width: 420px;
+    width: 100%;
+    padding: 16px;
+}
+
+// Position classes (standalone for CSS modules)
+.topRight {
+    top: 0;
+    right: 0;
+}
+
+.topLeft {
+    top: 0;
+    left: 0;
+}
+
+.topCenter {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.bottomRight {
+    bottom: 0;
+    right: 0;
+    flex-direction: column-reverse;
+}
+
+.bottomLeft {
+    bottom: 0;
+    left: 0;
+    flex-direction: column-reverse;
+}
+
+.bottomCenter {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+}
+
+.toast {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+
+    position: relative;
+    overflow: hidden;
+
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-lg, 8px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+
+    padding: 14px 16px;
+    pointer-events: auto;
+
+    opacity: 0;
+    transform: translateX(100%);
+    transition: all 0.3s ease;
+
+    // Left border accent
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: var(--toast-color);
+    }
+}
+
+.toastVisible {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.toastExiting {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+// Variants
+.success {
+    --toast-color: var(--ez-success, #10b981);
+
+    .toastIcon {
+        color: var(--ez-success, #10b981);
+    }
+}
+
+.error {
+    --toast-color: var(--ez-danger, #ef4444);
+
+    .toastIcon {
+        color: var(--ez-danger, #ef4444);
+    }
+}
+
+.warning {
+    --toast-color: var(--ez-warning, #f59e0b);
+
+    .toastIcon {
+        color: var(--ez-warning, #f59e0b);
+    }
+}
+
+.info {
+    --toast-color: var(--ez-primary, #2563eb);
+
+    .toastIcon {
+        color: var(--ez-primary, #2563eb);
+    }
+}
+
+.toastIcon {
+    font-size: 18px;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+
+.toastContent {
+    flex: 1;
+    min-width: 0;
+}
+
+.toastTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ez-text-primary, #1e293b);
+    margin-bottom: 2px;
+}
+
+.toastMessage {
+    font-size: 13px;
+    color: var(--ez-text-secondary, #64748b);
+    line-height: 1.4;
+}
+
+.toastAction {
+    flex-shrink: 0;
+    align-self: center;
+
+    padding: 6px 12px;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--toast-color);
+
+    background: transparent;
+    border: 1px solid var(--toast-color);
+    border-radius: var(--ez-radius-sm, 4px);
+
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--toast-color);
+        color: #ffffff;
+    }
+}
+
+.toastClose {
+    flex-shrink: 0;
+    align-self: flex-start;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: -4px -4px -4px 0;
+
+    font-size: 14px;
+    color: var(--ez-text-tertiary, #94a3b8);
+
+    background: transparent;
+    border: none;
+    border-radius: var(--ez-radius-sm, 4px);
+
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--ez-surface-primary, #f1f5f9);
+        color: var(--ez-text-secondary, #64748b);
+    }
+}
+
+.toastProgress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+
+    background: var(--toast-color);
+    opacity: 0.3;
+
+    transform-origin: left;
+    animation: toastProgress linear forwards;
+}
+
+@keyframes toastProgress {
+    from {
+        transform: scaleX(1);
+    }
+    to {
+        transform: scaleX(0);
+    }
+}
+
+// Position variants for animation direction
+.topLeft,
+.bottomLeft {
+    .toast {
+        transform: translateX(-100%);
+    }
+
+    .toastVisible {
+        transform: translateX(0);
+    }
+
+    .toastExiting {
+        transform: translateX(-100%);
+    }
+}
+
+.topCenter,
+.bottomCenter {
+    .toast {
+        transform: translateY(-20px);
+    }
+
+    .toastVisible {
+        transform: translateY(0);
+    }
+
+    .toastExiting {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+}
+
+.bottomRight,
+.bottomLeft,
+.bottomCenter {
+    .toast {
+        transform: translateY(20px);
+    }
+
+    .toastVisible {
+        transform: translateY(0);
+    }
+
+    .toastExiting {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+}
+
+// Override for left positions
+.bottomLeft {
+    .toast {
+        transform: translateX(-100%);
+    }
+
+    .toastExiting {
+        transform: translateX(-100%);
+    }
+}
+
+.bottomRight {
+    .toast {
+        transform: translateX(100%);
+    }
+
+    .toastExiting {
+        transform: translateX(100%);
+    }
+}

package/components/tooltip/EzTooltip.module.scss

@@ -0,0 +1,124 @@
+.tooltipWrapper {
+    display: inline-flex;
+}
+
+.tooltip {
+    position: fixed;
+    z-index: 10001;
+
+    max-width: 250px;
+    padding: 6px 10px;
+
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: center;
+    white-space: normal;
+    word-wrap: break-word;
+
+    border-radius: var(--ez-radius-sm, 4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+    pointer-events: none;
+    transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    transform: rotate(45deg);
+}
+
+// Dark variant (default)
+.dark {
+    background: var(--ez-text-primary, #1e293b);
+    color: #ffffff;
+
+    .arrow {
+        background: var(--ez-text-primary, #1e293b);
+    }
+}
+
+// Light variant
+.light {
+    background: #ffffff;
+    color: var(--ez-text-primary, #1e293b);
+    border: 1px solid var(--ez-border, #e2e8f0);
+
+    .arrow {
+        background: #ffffff;
+        border: 1px solid var(--ez-border, #e2e8f0);
+        border-top: none;
+        border-left: none;
+    }
+}
+
+// Primary variant
+.primary {
+    background: var(--ez-primary, #2563eb);
+    color: #ffffff;
+
+    .arrow {
+        background: var(--ez-primary, #2563eb);
+    }
+}
+
+// Position-based arrow placement
+.top {
+    .arrow {
+        bottom: -4px;
+        left: 50%;
+        margin-left: -4px;
+    }
+}
+
+.bottom {
+    .arrow {
+        top: -4px;
+        left: 50%;
+        margin-left: -4px;
+    }
+}
+
+.left {
+    .arrow {
+        right: -4px;
+        top: 50%;
+        margin-top: -4px;
+    }
+}
+
+.right {
+    .arrow {
+        left: -4px;
+        top: 50%;
+        margin-top: -4px;
+    }
+}
+
+// Light variant arrow fixes for borders
+.light.top .arrow {
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-top: none;
+    border-left: none;
+}
+
+.light.bottom .arrow {
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-bottom: none;
+    border-right: none;
+}
+
+.light.left .arrow {
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-bottom: none;
+    border-left: none;
+}
+
+.light.right .arrow {
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-top: none;
+    border-right: none;
+}

package/components/tooltip/EzTooltip.ts

@@ -0,0 +1,153 @@
+import styles from './EzTooltip.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
+};
+
+const cls = cx(styles);
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface EzTooltipConfig extends EzBaseComponentConfig {
+    text?: string;
+    position?: TooltipPosition;
+    variant?: 'dark' | 'light';
+    delay?: number;
+    hideDelay?: number;
+    items?: unknown[];
+}
+
+export class EzTooltip extends EzBaseComponent {
+    declare config: EzTooltipConfig;
+
+    private _wrapper: HTMLElement | null = null;
+    private _tooltipEl: HTMLElement | null = null;
+    private _position: TooltipPosition = 'top';
+    private _delay: number = 200;
+    private _hideDelay: number = 0;
+    private _showTimeout: ReturnType<typeof setTimeout> | null = null;
+    private _hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    async render(): Promise<HTMLElement> {
+        const cfg = this.config;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = cls('tooltipWrapper');
+
+        if (cfg.items && cfg.items.length > 0) {
+            const children = await ez._createChildElements(
+                cfg.items,
+                this.config.controller || null,
+                null
+            );
+            for (const child of children) {
+                if (child instanceof Node) {
+                    wrapper.appendChild(child);
+                }
+            }
+        }
+
+        const tooltip = document.createElement('div');
+        tooltip.className = cls(
+            'tooltip',
+            cfg.variant || 'dark'
+        );
+        tooltip.textContent = cfg.text || '';
+        tooltip.style.opacity = '0';
+        tooltip.style.visibility = 'hidden';
+
+        const arrow = document.createElement('div');
+        arrow.className = cls('arrow');
+        tooltip.appendChild(arrow);
+
+        document.body.appendChild(tooltip);
+
+        this._wrapper = wrapper;
+        this._tooltipEl = tooltip;
+        this._position = cfg.position || 'top';
+        this._delay = cfg.delay ?? 200;
+        this._hideDelay = cfg.hideDelay ?? 0;
+
+        wrapper.addEventListener('mouseenter', () => this._scheduleShow());
+        wrapper.addEventListener('mouseleave', () => this._scheduleHide());
+        wrapper.addEventListener('focus', () => this._scheduleShow(), true);
+        wrapper.addEventListener('blur', () => this._scheduleHide(), true);
+
+        return wrapper;
+    }
+
+    private _scheduleShow(): void {
+        if (this._hideTimeout) clearTimeout(this._hideTimeout);
+        this._showTimeout = setTimeout(() => this._show(), this._delay);
+    }
+
+    private _scheduleHide(): void {
+        if (this._showTimeout) clearTimeout(this._showTimeout);
+        this._hideTimeout = setTimeout(() => this._hide(), this._hideDelay);
+    }
+
+    private _show(): void {
+        if (!this._wrapper || !this._tooltipEl) return;
+
+        const rect = this._wrapper.getBoundingClientRect();
+        const tooltipRect = this._tooltipEl.getBoundingClientRect();
+        const position = this._position;
+
+        let top: number, left: number;
+
+        switch (position) {
+            case 'top':
+                top = rect.top - tooltipRect.height - 8;
+                left = rect.left + (rect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = rect.bottom + 8;
+                left = rect.left + (rect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = rect.top + (rect.height - tooltipRect.height) / 2;
+                left = rect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = rect.top + (rect.height - tooltipRect.height) / 2;
+                left = rect.right + 8;
+                break;
+            default:
+                top = rect.top - tooltipRect.height - 8;
+                left = rect.left + (rect.width - tooltipRect.width) / 2;
+        }
+
+        const padding = 8;
+        if (left < padding) left = padding;
+        if (left + tooltipRect.width > window.innerWidth - padding) {
+            left = window.innerWidth - tooltipRect.width - padding;
+        }
+        if (top < padding) top = padding;
+        if (top + tooltipRect.height > window.innerHeight - padding) {
+            top = window.innerHeight - tooltipRect.height - padding;
+        }
+
+        this._tooltipEl.style.top = `${top + window.scrollY}px`;
+        this._tooltipEl.style.left = `${left + window.scrollX}px`;
+        this._tooltipEl.className = cls('tooltip', this.config.variant || 'dark', position);
+        this._tooltipEl.style.opacity = '1';
+        this._tooltipEl.style.visibility = 'visible';
+    }
+
+    private _hide(): void {
+        if (this._tooltipEl) {
+            this._tooltipEl.style.opacity = '0';
+            this._tooltipEl.style.visibility = 'hidden';
+        }
+    }
+
+    destroy(): void {
+        if (this._showTimeout) clearTimeout(this._showTimeout);
+        if (this._hideTimeout) clearTimeout(this._hideTimeout);
+        if (this._tooltipEl && this._tooltipEl.parentNode) {
+            this._tooltipEl.parentNode.removeChild(this._tooltipEl);
+        }
+    }
+}