ezfw-core 1.0.0

package/components/tabs/EzTabPanel.module.scss

@@ -0,0 +1,181 @@
+// ==========================================================
+// EzTabPanel - CSS Module
+// ==========================================================
+
+.tabPanel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+// ----------------------------------------------------------
+// Tab Header
+// ----------------------------------------------------------
+.tabHeader {
+  display: flex;
+  gap: 0;
+  background: var(--ez-surface-tertiary, #f8fafc);
+  border-bottom: 1px solid var(--ez-border-primary, #e2e8f0);
+  padding: 0 8px;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ez-text-secondary, #64748b);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+
+  i {
+    font-size: 14px;
+  }
+
+  &:hover {
+    color: var(--ez-text-primary, #1e293b);
+    background: var(--ez-surface-primary, #f1f5f9);
+  }
+}
+
+.tabClose {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-left: 4px;
+  border-radius: 4px;
+  color: var(--ez-text-tertiary, #94a3b8);
+  transition: all 0.15s ease;
+
+  i {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: var(--ez-danger-light, rgba(239, 68, 68, 0.1));
+    color: var(--ez-danger, #dc2626);
+  }
+}
+
+.tabActive {
+  color: var(--ez-primary, #2563eb);
+  border-bottom-color: var(--ez-primary, #2563eb);
+  background: transparent;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+// ----------------------------------------------------------
+// Tab Content
+// ----------------------------------------------------------
+.tabContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.tabPane {
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.tabPaneActive {
+  display: flex;
+}
+
+// ----------------------------------------------------------
+// Variants
+// ----------------------------------------------------------
+
+// Boxed variant - tabs with background
+.boxed {
+  .tabHeader {
+    background: var(--ez-surface-secondary, #ffffff);
+    padding: 8px 8px 0;
+    gap: 4px;
+  }
+
+  .tab {
+    background: var(--ez-surface-primary, #f1f5f9);
+    border-radius: var(--ez-radius-md, 6px) var(--ez-radius-md, 6px) 0 0;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .tabActive {
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border-primary, #e2e8f0);
+    border-bottom-color: var(--ez-surface-secondary, #ffffff);
+    margin-bottom: -1px;
+  }
+
+  .tabContent {
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border-primary, #e2e8f0);
+    border-top: none;
+  }
+}
+
+// Pill variant - rounded pill tabs
+.pills {
+  .tabHeader {
+    background: transparent;
+    border-bottom: none;
+    padding: 8px;
+    gap: 8px;
+  }
+
+  .tab {
+    background: var(--ez-surface-primary, #f1f5f9);
+    border-radius: var(--ez-radius-full, 20px);
+    border-bottom: none;
+    margin-bottom: 0;
+    padding: 8px 16px;
+  }
+
+  .tabActive {
+    background: var(--ez-primary, #2563eb);
+    color: var(--ez-text-inverse, #ffffff);
+  }
+}
+
+// Minimal variant - just underline
+.minimal {
+  .tabHeader {
+    background: transparent;
+    padding: 0;
+  }
+
+  .tab {
+    padding: 8px 12px;
+  }
+}
+
+// Compact variant - smaller tabs
+.compact {
+  .tab {
+    padding: 8px 12px;
+    font-size: 12px;
+
+    i {
+      font-size: 12px;
+    }
+  }
+}

package/components/tabs/EzTabPanel.ts

@@ -0,0 +1,402 @@
+import styles from './EzTabPanel.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
+};
+
+const cls = cx(styles);
+
+interface TabConfig {
+    id?: string | number;
+    title?: string;
+    icon?: string;
+    closable?: boolean;
+    items?: unknown[];
+    restoreData?: unknown;
+}
+
+interface SavedTabState {
+    id: string | number;
+    title?: string;
+    icon?: string;
+    closable?: boolean;
+    restoreData?: unknown;
+}
+
+interface SavedState {
+    activeTab: string | number | null;
+    dynamicTabs: SavedTabState[];
+}
+
+export interface EzTabPanelConfig extends EzBaseComponentConfig {
+    id?: string;
+    tabs?: TabConfig[];
+    activeTab?: string | number;
+    variant?: string;
+    stateful?: boolean;
+    statefulPersist?: boolean;
+    onTabChange?: (tabId: string | number) => void;
+    onTabAdd?: (tabId: string | number, config: TabConfig) => void;
+    onTabClose?: (tabId: string | number) => void;
+    onTabRestore?: (tabData: SavedTabState, tabPanel: EzTabPanel) => Promise<void>;
+}
+
+export class EzTabPanel extends EzBaseComponent {
+    declare config: EzTabPanelConfig;
+    declare el: HTMLElement;
+
+    private _activeTabId: string | number | null = null;
+    private _tabElements: Map<string | number, HTMLElement> = new Map();
+    private _contentElements: Map<string | number, HTMLElement> = new Map();
+    private _tabConfigs: Map<string | number, TabConfig> = new Map();
+    private _headerEl: HTMLElement | null = null;
+    private _contentEl: HTMLElement | null = null;
+    private _dynamicTabs: SavedTabState[] = [];
+    private _isRestoring: boolean = false;
+
+    stateful: boolean;
+    statefulPersist: boolean;
+
+    constructor(config: EzTabPanelConfig = {}) {
+        super(config);
+        this.config = config;
+
+        this.stateful = config.stateful || false;
+        this.statefulPersist = config.statefulPersist || false;
+    }
+
+    private _getStorageKey(): string | null {
+        if (!this.config.id) return null;
+        return `ez-tabpanel-${this.config.id}`;
+    }
+
+    private _saveState(): void {
+        if (!this.stateful || this._isRestoring) return;
+
+        const key = this._getStorageKey();
+        if (!key) return;
+
+        const state: SavedState = {
+            activeTab: this._activeTabId,
+            dynamicTabs: this._dynamicTabs.map(tab => ({
+                id: tab.id,
+                title: tab.title,
+                icon: tab.icon,
+                closable: tab.closable,
+                restoreData: tab.restoreData || null
+            }))
+        };
+
+        const storage = this.statefulPersist ? localStorage : sessionStorage;
+        storage.setItem(key, JSON.stringify(state));
+    }
+
+    private _loadState(): SavedState | null {
+        if (!this.stateful) return null;
+
+        const key = this._getStorageKey();
+        if (!key) return null;
+
+        const storage = this.statefulPersist ? localStorage : sessionStorage;
+        const data = storage.getItem(key);
+
+        if (!data) return null;
+
+        try {
+            return JSON.parse(data);
+        } catch {
+            console.warn('[EzTabPanel] Failed to parse saved state');
+            return null;
+        }
+    }
+
+    private async _restoreState(state: SavedState): Promise<void> {
+        if (!state?.dynamicTabs?.length) return;
+
+        this._isRestoring = true;
+
+        for (const tabData of state.dynamicTabs) {
+            if (this._tabConfigs.has(tabData.id)) continue;
+
+            if (this.config.onTabRestore) {
+                await this.config.onTabRestore(tabData, this);
+            }
+        }
+
+        this._isRestoring = false;
+
+        if (state.activeTab && this._tabConfigs.has(state.activeTab)) {
+            this._setActiveTabInternal(state.activeTab);
+        }
+    }
+
+    async render(): Promise<HTMLElement> {
+        const cfg = this.config;
+        const el = document.createElement('div');
+
+        el.classList.add(cls('tabPanel'));
+
+        if (cfg.variant) {
+            el.classList.add(cls(cfg.variant));
+        }
+
+        this._headerEl = document.createElement('div');
+        this._headerEl.classList.add(cls('tabHeader'));
+
+        this._contentEl = document.createElement('div');
+        this._contentEl.classList.add(cls('tabContent'));
+
+        const tabs = cfg.tabs || [];
+
+        let activeTabId: string | number | undefined = cfg.activeTab;
+        if (activeTabId === undefined && tabs.length > 0) {
+            activeTabId = tabs[0].id ?? 0;
+        }
+
+        for (let i = 0; i < tabs.length; i++) {
+            const tab = tabs[i];
+            await this._createTab(tab, i);
+        }
+
+        el.appendChild(this._headerEl);
+        el.appendChild(this._contentEl);
+
+        this.applyStyles(el);
+        this.el = el;
+
+        if (activeTabId != null) {
+            this._setActiveTabInternal(activeTabId);
+        }
+
+        const savedState = this._loadState();
+        if (savedState) {
+            await this._restoreState(savedState);
+        }
+
+        return el;
+    }
+
+    private async _createTab(tab: TabConfig, index: number): Promise<string | number> {
+        const tabId = tab.id ?? index;
+
+        this._tabConfigs.set(tabId, tab);
+
+        const tabBtn = document.createElement('button');
+        tabBtn.classList.add(cls('tab'));
+        tabBtn.setAttribute('data-tab-id', String(tabId));
+
+        if (tab.icon) {
+            const icon = document.createElement('i');
+            icon.className = tab.icon;
+            tabBtn.appendChild(icon);
+        }
+
+        if (tab.title) {
+            const span = document.createElement('span');
+            span.textContent = tab.title;
+            tabBtn.appendChild(span);
+        }
+
+        if (tab.closable) {
+            const closeBtn = document.createElement('span');
+            closeBtn.classList.add(cls('tabClose'));
+            closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+            closeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.removeTab(tabId);
+            });
+            tabBtn.appendChild(closeBtn);
+        }
+
+        tabBtn.addEventListener('click', () => this.setActiveTab(tabId));
+        this._headerEl!.appendChild(tabBtn);
+        this._tabElements.set(tabId, tabBtn);
+
+        const pane = document.createElement('div');
+        pane.classList.add(cls('tabPane'));
+        pane.setAttribute('data-tab-id', String(tabId));
+
+        if (Array.isArray(tab.items)) {
+            for (const item of tab.items) {
+                const child = await ez._createElement(item, this.config.controller || null, this);
+                pane.appendChild(child);
+            }
+        }
+
+        this._contentEl!.appendChild(pane);
+        this._contentElements.set(tabId, pane);
+
+        return tabId;
+    }
+
+    async addTab(tabConfig: TabConfig, activate: boolean = true): Promise<string | number> {
+        const index = this._tabConfigs.size;
+        const tabId = tabConfig.id ?? `tab-${Date.now()}`;
+
+        if (this._tabConfigs.has(tabId)) {
+            console.warn(`[EzTabPanel] Tab with id "${tabId}" already exists`);
+            if (activate) {
+                this.setActiveTab(tabId);
+            }
+            return tabId;
+        }
+
+        await this._createTab({ ...tabConfig, id: tabId }, index);
+
+        if (tabConfig.closable) {
+            this._dynamicTabs.push({
+                id: tabId,
+                title: tabConfig.title,
+                icon: tabConfig.icon,
+                closable: true,
+                restoreData: tabConfig.restoreData || null
+            });
+            this._saveState();
+        }
+
+        if (activate) {
+            this.setActiveTab(tabId);
+        }
+
+        if (this.config.onTabAdd) {
+            this.config.onTabAdd(tabId, tabConfig);
+        }
+
+        return tabId;
+    }
+
+    removeTab(tabId: string | number): boolean {
+        const tabBtn = this._tabElements.get(tabId);
+        const pane = this._contentElements.get(tabId);
+
+        if (!tabBtn || !pane) {
+            console.warn(`[EzTabPanel] Tab "${tabId}" not found`);
+            return false;
+        }
+
+        if (this._activeTabId === tabId) {
+            const nextTabId = this._findNextTab(tabId);
+
+            if (nextTabId != null) {
+                this.setActiveTab(nextTabId);
+            } else {
+                this._activeTabId = null;
+            }
+        }
+
+        tabBtn.remove();
+        pane.remove();
+
+        this._tabElements.delete(tabId);
+        this._contentElements.delete(tabId);
+        this._tabConfigs.delete(tabId);
+
+        const dynamicIndex = this._dynamicTabs.findIndex(t => t.id === tabId);
+        if (dynamicIndex !== -1) {
+            this._dynamicTabs.splice(dynamicIndex, 1);
+            this._saveState();
+        }
+
+        if (this.config.onTabClose) {
+            this.config.onTabClose(tabId);
+        }
+
+        return true;
+    }
+
+    hasTab(tabId: string | number): boolean {
+        return this._tabConfigs.has(tabId);
+    }
+
+    getTab(tabId: string | number): TabConfig | null {
+        return this._tabConfigs.get(tabId) || null;
+    }
+
+    getTabIds(): (string | number)[] {
+        return Array.from(this._tabConfigs.keys());
+    }
+
+    setActiveTab(tabId: string | number): void {
+        this._setActiveTabInternal(tabId);
+        this._saveState();
+
+        if (this.config.onTabChange) {
+            this.config.onTabChange(tabId);
+        }
+    }
+
+    getActiveTab(): string | number | null {
+        return this._activeTabId;
+    }
+
+    private _findNextTab(closingTabId: string | number): string | number | null {
+        const tabIds = Array.from(this._tabConfigs.keys());
+        const currentIndex = tabIds.indexOf(closingTabId);
+
+        if (tabIds.length <= 1) return null;
+
+        interface Candidate {
+            id: string | number;
+            index: number;
+            isClosable: boolean;
+        }
+
+        const candidates: Candidate[] = [];
+        for (const id of tabIds) {
+            if (id === closingTabId) continue;
+            const config = this._tabConfigs.get(id);
+            const isClosable = config?.closable === true;
+            const index = tabIds.indexOf(id);
+            candidates.push({ id, index, isClosable });
+        }
+
+        if (candidates.length === 0) return null;
+
+        candidates.sort((a, b) => {
+            if (a.isClosable !== b.isClosable) {
+                return a.isClosable ? 1 : -1;
+            }
+
+            const distA = Math.abs(a.index - currentIndex);
+            const distB = Math.abs(b.index - currentIndex);
+            if (distA !== distB) return distA - distB;
+
+            return a.index - b.index;
+        });
+
+        return candidates[0].id;
+    }
+
+    private _setActiveTabInternal(tabId: string | number): void {
+        if (this._activeTabId != null) {
+            const prevTab = this._tabElements.get(this._activeTabId);
+            const prevPane = this._contentElements.get(this._activeTabId);
+            prevTab?.classList.remove(cls('tabActive'));
+            prevPane?.classList.remove(cls('tabPaneActive'));
+        }
+
+        const newTab = this._tabElements.get(tabId);
+        const newPane = this._contentElements.get(tabId);
+        newTab?.classList.add(cls('tabActive'));
+        newPane?.classList.add(cls('tabPaneActive'));
+
+        this._activeTabId = tabId;
+    }
+
+    setTabTitle(tabId: string | number, title: string): void {
+        const tabBtn = this._tabElements.get(tabId);
+        if (tabBtn) {
+            const span = tabBtn.querySelector(`span:not(.${cls('tabClose')})`);
+            if (span) {
+                span.textContent = title;
+            }
+        }
+
+        const config = this._tabConfigs.get(tabId);
+        if (config) {
+            config.title = title;
+        }
+    }
+}

package/components/textarea/EzTextarea.module.scss

@@ -0,0 +1,131 @@
+.textareaGroup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.textarea {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 80px;
+    padding: 10px 12px;
+
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--ez-input-text, #1e293b);
+
+    background: var(--ez-input-bg, #ffffff);
+    border: 1px solid var(--ez-input-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 6px);
+
+    resize: vertical;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--ez-input-placeholder, #94a3b8);
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--ez-text-tertiary, #94a3b8);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--ez-primary, #2563eb);
+        box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+    }
+}
+
+.hasRows .textarea {
+    min-height: auto;
+}
+
+.noResize {
+    .textarea {
+        resize: none;
+    }
+}
+
+.counter {
+    align-self: flex-end;
+    font-size: 12px;
+    color: var(--ez-text-tertiary, #94a3b8);
+}
+
+.counterWarning {
+    color: var(--ez-warning, #f59e0b);
+}
+
+.counterError {
+    color: var(--ez-danger, #dc2626);
+}
+
+// Disabled state
+.disabled {
+    .textarea {
+        background: var(--ez-surface-primary, #f8fafc);
+        color: var(--ez-text-tertiary, #94a3b8);
+        cursor: not-allowed;
+        resize: none;
+
+        &:hover {
+            border-color: var(--ez-input-border, #e2e8f0);
+        }
+    }
+}
+
+// Sizes
+.sm {
+    .textarea {
+        min-height: 60px;
+        padding: 8px 10px;
+        font-size: 13px;
+    }
+
+    .counter {
+        font-size: 11px;
+    }
+}
+
+.lg {
+    .textarea {
+        min-height: 120px;
+        padding: 12px 14px;
+        font-size: 15px;
+    }
+
+    .counter {
+        font-size: 13px;
+    }
+}
+
+// Override min-height for sizes when rows is set
+.hasRows.sm .textarea,
+.hasRows.lg .textarea {
+    min-height: auto;
+}
+
+// Error state
+.hasError {
+    .textarea {
+        border-color: var(--ez-danger, #dc2626);
+
+        &:focus {
+            border-color: var(--ez-danger, #dc2626);
+            box-shadow: 0 0 0 2px var(--ez-danger-light, rgba(220, 38, 38, 0.15));
+        }
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+}
+
+.fieldErrorVisible {
+    display: block;
+}