ezfw-core 1.0.0

package/components/dropdown/EzDropdown.module.scss

@@ -0,0 +1,107 @@
+.dropdown {
+    position: relative;
+    display: inline-flex;
+}
+
+.trigger {
+    // Styles come from the trigger component
+}
+
+.isOpen {
+    .trigger {
+        // Can add active state styles
+    }
+}
+
+.menu {
+    position: fixed;
+    z-index: 10000;
+
+    min-width: 160px;
+    padding: 4px;
+
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 6px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+
+    transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+
+    padding: 8px 12px;
+
+    font-size: 13px;
+    font-weight: 500;
+    text-align: left;
+    color: var(--ez-text-primary, #1e293b);
+
+    background: transparent;
+    border: none;
+    border-radius: var(--ez-radius-sm, 4px);
+
+    cursor: pointer;
+    transition: background 0.1s ease;
+
+    &:hover:not(.disabled) {
+        background: var(--ez-surface-primary, #f1f5f9);
+    }
+
+    &:active:not(.disabled) {
+        background: var(--ez-surface-secondary, #e2e8f0);
+    }
+}
+
+.itemIcon {
+    width: 16px;
+    font-size: 14px;
+    color: var(--ez-text-tertiary, #64748b);
+    text-align: center;
+}
+
+.itemText {
+    flex: 1;
+}
+
+.shortcut {
+    font-size: 11px;
+    color: var(--ez-text-tertiary, #94a3b8);
+    margin-left: auto;
+}
+
+.danger {
+    color: var(--ez-danger, #ef4444);
+
+    .itemIcon {
+        color: var(--ez-danger, #ef4444);
+    }
+
+    &:hover:not(.disabled) {
+        background: var(--ez-danger-light, rgba(239, 68, 68, 0.1));
+    }
+}
+
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.divider {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--ez-border, #e2e8f0);
+}
+
+.header {
+    padding: 8px 12px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--ez-text-tertiary, #94a3b8);
+}

package/components/dropdown/EzDropdown.ts

@@ -0,0 +1,235 @@
+import styles from './EzDropdown.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
+const cls = cx(styles);
+
+export interface DropdownItem {
+    text?: string;
+    icon?: string;
+    shortcut?: string;
+    divider?: boolean;
+    header?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    closeOnClick?: boolean;
+    onClick?: (e: MouseEvent) => void;
+}
+
+export interface EzDropdownConfig extends EzBaseComponentConfig {
+    trigger?: unknown;
+    items?: DropdownItem[];
+    position?: 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';
+}
+
+export class EzDropdown extends EzBaseComponent {
+    declare config: EzDropdownConfig;
+
+    private _wrapper: HTMLDivElement | null = null;
+    private _menu: HTMLDivElement | null = null;
+    private _triggerEl: HTMLElement | null = null;
+    private _isOpen: boolean = false;
+    private _position: string = 'bottom-start';
+    private _onOutsideClick: ((e: MouseEvent) => void) | null = null;
+    private _onEscape: ((e: KeyboardEvent) => void) | null = null;
+
+    async render(): Promise<HTMLDivElement> {
+        const cfg = this.config;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = cls('dropdown');
+
+        if (cfg.trigger) {
+            const triggerEl = await ez._createElement(cfg.trigger);
+            triggerEl.classList.add(cls('trigger'));
+            triggerEl.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this._toggle();
+            });
+            wrapper.appendChild(triggerEl);
+            this._triggerEl = triggerEl;
+        }
+
+        const menu = document.createElement('div');
+        menu.className = cls('menu');
+        menu.style.opacity = '0';
+        menu.style.visibility = 'hidden';
+
+        this._buildItems(menu, cfg.items || []);
+
+        document.body.appendChild(menu);
+
+        this._wrapper = wrapper;
+        this._menu = menu;
+        this._isOpen = false;
+        this._position = cfg.position || 'bottom-start';
+
+        this._onOutsideClick = (e: MouseEvent) => {
+            if (!wrapper.contains(e.target as Node) && !menu.contains(e.target as Node)) {
+                this._close();
+            }
+        };
+        document.addEventListener('click', this._onOutsideClick);
+
+        this._onEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this._isOpen) {
+                this._close();
+            }
+        };
+        document.addEventListener('keydown', this._onEscape);
+
+        return wrapper;
+    }
+
+    private _buildItems(menu: HTMLDivElement, items: DropdownItem[]): void {
+        items.forEach(item => {
+            if (item.divider) {
+                const divider = document.createElement('div');
+                divider.className = cls('divider');
+                menu.appendChild(divider);
+                return;
+            }
+
+            if (item.header) {
+                const header = document.createElement('div');
+                header.className = cls('header');
+                header.textContent = item.header;
+                menu.appendChild(header);
+                return;
+            }
+
+            const menuItem = document.createElement('button');
+            menuItem.type = 'button';
+            menuItem.className = cls(
+                'item',
+                item.danger && 'danger',
+                item.disabled && 'disabled'
+            );
+
+            if (item.disabled) {
+                menuItem.disabled = true;
+            }
+
+            if (item.icon) {
+                const icon = document.createElement('i');
+                icon.className = cls('itemIcon', item.icon);
+                menuItem.appendChild(icon);
+            }
+
+            const text = document.createElement('span');
+            text.className = cls('itemText');
+            text.textContent = item.text || '';
+            menuItem.appendChild(text);
+
+            if (item.shortcut) {
+                const shortcut = document.createElement('span');
+                shortcut.className = cls('shortcut');
+                shortcut.textContent = item.shortcut;
+                menuItem.appendChild(shortcut);
+            }
+
+            menuItem.addEventListener('click', (e) => {
+                if (item.disabled) return;
+                if (item.onClick) {
+                    item.onClick(e);
+                }
+                if (item.closeOnClick !== false) {
+                    this._close();
+                }
+            });
+
+            menu.appendChild(menuItem);
+        });
+    }
+
+    private _toggle(): void {
+        if (this._isOpen) {
+            this._close();
+        } else {
+            this._open();
+        }
+    }
+
+    private _open(): void {
+        if (!this._triggerEl || !this._menu) return;
+
+        const rect = this._triggerEl.getBoundingClientRect();
+        const menuRect = this._menu.getBoundingClientRect();
+
+        let top: number, left: number;
+
+        switch (this._position) {
+            case 'bottom-start':
+                top = rect.bottom + 4;
+                left = rect.left;
+                break;
+            case 'bottom-end':
+                top = rect.bottom + 4;
+                left = rect.right - menuRect.width;
+                break;
+            case 'bottom':
+                top = rect.bottom + 4;
+                left = rect.left + (rect.width - menuRect.width) / 2;
+                break;
+            case 'top-start':
+                top = rect.top - menuRect.height - 4;
+                left = rect.left;
+                break;
+            case 'top-end':
+                top = rect.top - menuRect.height - 4;
+                left = rect.right - menuRect.width;
+                break;
+            case 'top':
+                top = rect.top - menuRect.height - 4;
+                left = rect.left + (rect.width - menuRect.width) / 2;
+                break;
+            default:
+                top = rect.bottom + 4;
+                left = rect.left;
+        }
+
+        const padding = 8;
+        if (left < padding) left = padding;
+        if (left + menuRect.width > window.innerWidth - padding) {
+            left = window.innerWidth - menuRect.width - padding;
+        }
+        if (top + menuRect.height > window.innerHeight - padding) {
+            top = rect.top - menuRect.height - 4;
+        }
+        if (top < padding) top = padding;
+
+        this._menu.style.top = `${top + window.scrollY}px`;
+        this._menu.style.left = `${left + window.scrollX}px`;
+        this._menu.style.opacity = '1';
+        this._menu.style.visibility = 'visible';
+
+        this._wrapper?.classList.add(cls('isOpen'));
+        this._isOpen = true;
+    }
+
+    private _close(): void {
+        if (!this._menu) return;
+
+        this._menu.style.opacity = '0';
+        this._menu.style.visibility = 'hidden';
+        this._wrapper?.classList.remove(cls('isOpen'));
+        this._isOpen = false;
+    }
+
+    destroy(): void {
+        if (this._onOutsideClick) {
+            document.removeEventListener('click', this._onOutsideClick);
+        }
+        if (this._onEscape) {
+            document.removeEventListener('keydown', this._onEscape);
+        }
+        if (this._menu?.parentNode) {
+            this._menu.parentNode.removeChild(this._menu);
+        }
+        super.destroy();
+    }
+}

package/components/feed/EzActivityFeed.module.scss

@@ -0,0 +1,90 @@
+// ==========================================================
+// EzActivityFeed - Activity Feed Styles
+// ==========================================================
+
+.list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+}
+
+.item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--ez-border, #e2e8f0);
+    transition: background 0.15s ease;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:hover {
+        background: var(--ez-surface-primary, #f8fafc);
+    }
+}
+
+.icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 14px;
+}
+
+.content {
+    flex: 1;
+    min-width: 0;
+}
+
+.description {
+    font-size: 13px;
+    color: var(--ez-text-primary, #1e293b);
+    line-height: 1.4;
+    margin: 0;
+}
+
+.timestamp {
+    font-size: 12px;
+    color: var(--ez-text-tertiary, #94a3b8);
+    margin: 2px 0 0 0;
+}
+
+// ==========================================================
+// Icon Variants
+// ==========================================================
+
+.primary {
+    background: rgba(0, 88, 113, 0.1);
+    color: var(--ez-primary, #005871);
+}
+
+.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: #059669;
+}
+
+.warning {
+    background: rgba(245, 158, 11, 0.1);
+    color: #d97706;
+}
+
+.danger {
+    background: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+}
+
+.info {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+}
+
+.accent {
+    background: rgba(46, 82, 131, 0.1);
+    color: #2E5283;
+}

package/components/feed/EzActivityFeed.ts

@@ -0,0 +1,78 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import styles from './EzActivityFeed.module.scss';
+
+declare const ez: {
+    registerComponent(name: string, component: unknown): void;
+};
+
+interface ActivityItem {
+    icon: string;
+    variant?: string;
+    iconColor?: string;
+    description?: string;
+    text?: string;
+    timestamp?: string;
+    time?: string;
+}
+
+export interface EzActivityFeedConfig extends EzBaseComponentConfig {
+    items?: ActivityItem[];
+    maxHeight?: number | string;
+}
+
+export class EzActivityFeed extends EzBaseComponent {
+    declare config: EzActivityFeedConfig;
+
+    constructor(config: EzActivityFeedConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    render(): HTMLElement {
+        const {
+            items = [],
+            maxHeight = 320,
+            cls = ''
+        } = this.config;
+
+        const el = document.createElement('ul');
+        el.className = `${styles.list} ${cls}`.trim();
+        if (maxHeight) {
+            el.style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : String(maxHeight);
+        }
+
+        items.forEach(item => {
+            const li = document.createElement('li');
+            li.className = styles.item;
+
+            const iconWrapper = document.createElement('div');
+            const variantClass = styles[item.variant || item.iconColor || 'primary'] || '';
+            iconWrapper.className = `${styles.icon} ${variantClass}`.trim();
+            iconWrapper.innerHTML = `<i class="${item.icon}"></i>`;
+            li.appendChild(iconWrapper);
+
+            const content = document.createElement('div');
+            content.className = styles.content;
+
+            const description = document.createElement('p');
+            description.className = styles.description;
+            description.textContent = item.description || item.text || '';
+            content.appendChild(description);
+
+            if (item.timestamp || item.time) {
+                const timestamp = document.createElement('p');
+                timestamp.className = styles.timestamp;
+                timestamp.textContent = item.timestamp || item.time || '';
+                content.appendChild(timestamp);
+            }
+
+            li.appendChild(content);
+            el.appendChild(li);
+        });
+
+        this.applyStyles(el);
+        return el;
+    }
+}
+
+ez.registerComponent('EzActivityFeed', EzActivityFeed);