ezfw-core 1.0.0

package/components/button/EzButton.ts

@@ -0,0 +1,175 @@
+import styles from './EzButton.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
+const VARIANT_MAP: Record<string, string> = {
+    'primary': 'primary',
+    'danger': 'danger',
+    'success': 'success',
+    'warning': 'warning',
+    'ghost': 'ghost',
+    'text': 'text',
+    'outline': 'outline',
+    'outline-primary': 'outlinePrimary',
+    'outline-danger': 'outlineDanger',
+    'outline-success': 'outlineSuccess',
+    'outline-warning': 'outlineWarning'
+};
+
+export interface EzButtonConfig extends EzBaseComponentConfig {
+    text?: string;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    variant?: 'primary' | 'danger' | 'success' | 'warning' | 'ghost' | 'text' | 'outline' | 'outline-primary' | 'outline-danger' | 'outline-success' | 'outline-warning';
+    size?: 'sm' | 'lg';
+    block?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    htmlType?: 'button' | 'submit' | 'reset';
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: (e: MouseEvent, component: EzButton) => void;
+    tooltip?: string;
+}
+
+export class EzButton extends EzBaseComponent {
+    declare config: EzButtonConfig;
+    declare el: HTMLButtonElement;
+
+    private _loading: boolean = false;
+
+    constructor(config: EzButtonConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLButtonElement> {
+        const cfg = this.config;
+
+        const el = await ez._createElement({
+            eztype: 'button',
+            cls: this._buildClasses(),
+            type: cfg.htmlType || cfg.type || 'button',
+            disabled: cfg.disabled || cfg.loading,
+            style: cfg.style,
+            onClick: cfg.onClick ? (e: MouseEvent) => {
+                if (this._loading) return;
+                cfg.onClick!(e, this);
+            } : undefined,
+            items: this._buildItems()
+        }) as HTMLButtonElement;
+
+        if (cfg.loading) {
+            this._applyLoadingState(el, true);
+        }
+
+        this.applyTooltip(el);
+        this.el = el;
+
+        return el;
+    }
+
+    private _buildClasses(): string[] {
+        const cfg = this.config;
+        const classes: string[] = [cls('button')];
+
+        if (cfg.variant && VARIANT_MAP[cfg.variant]) {
+            classes.push(cls(VARIANT_MAP[cfg.variant]));
+        }
+
+        if (cfg.size) {
+            classes.push(cls(cfg.size));
+        }
+
+        if (cfg.block) {
+            classes.push(cls('block'));
+        }
+
+        if (cfg.icon && !cfg.text) {
+            classes.push(cls('iconOnly'));
+        }
+
+        return classes;
+    }
+
+    private _buildItems(): unknown[] {
+        const cfg = this.config;
+        const items: unknown[] = [];
+        const iconPosition = cfg.iconPosition || 'left';
+
+        const textItem = cfg.text ? {
+            eztype: 'span',
+            cls: cls('buttonText'),
+            text: cfg.text
+        } : null;
+
+        const iconItem = cfg.icon ? {
+            eztype: 'i',
+            cls: [cls('buttonIcon'), cfg.icon].join(' ')
+        } : null;
+
+        if (iconPosition === 'right') {
+            if (textItem) items.push(textItem);
+            if (iconItem) items.push(iconItem);
+        } else {
+            if (iconItem) items.push(iconItem);
+            if (textItem) items.push(textItem);
+        }
+
+        return items;
+    }
+
+    private _applyLoadingState(el: HTMLButtonElement, loading: boolean): void {
+        const spinnerClass = cls('spinner');
+
+        if (loading) {
+            el.classList.add(cls('loading'));
+            el.disabled = true;
+
+            if (!el.querySelector(`.${spinnerClass}`)) {
+                const spinner = document.createElement('span');
+                spinner.className = spinnerClass;
+                el.insertBefore(spinner, el.firstChild);
+            }
+        } else {
+            el.classList.remove(cls('loading'));
+            el.disabled = this.config.disabled || false;
+
+            const spinner = el.querySelector(`.${spinnerClass}`);
+            if (spinner) spinner.remove();
+        }
+    }
+
+    setLoading(loading: boolean): void {
+        this._loading = loading;
+        if (this.el) {
+            this._applyLoadingState(this.el, loading);
+        }
+    }
+
+    isLoading(): boolean {
+        return this._loading;
+    }
+
+    setDisabled(disabled: boolean): void {
+        this.config.disabled = disabled;
+        if (this.el && !this._loading) {
+            this.el.disabled = disabled;
+        }
+    }
+
+    setText(text: string): void {
+        this.config.text = text;
+        if (this.el) {
+            const textSpan = this.el.querySelector(`.${cls('buttonText')}`);
+            if (textSpan) {
+                textSpan.textContent = text;
+            }
+        }
+    }
+}

package/components/button/EzButtonGroup.ts

@@ -0,0 +1,48 @@
+import styles from './EzButton.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createElement(config: unknown, controller?: unknown, parent?: unknown): Promise<HTMLElement>;
+};
+
+const cls = cx(styles);
+
+export interface EzButtonGroupConfig extends EzBaseComponentConfig {
+    vertical?: boolean;
+    items?: unknown[];
+    controller?: string | null;
+}
+
+export class EzButtonGroup extends EzBaseComponent {
+    declare config: EzButtonGroupConfig;
+    declare el: HTMLDivElement;
+
+    constructor(config: EzButtonGroupConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        const cfg = this.config;
+        const el = document.createElement('div');
+
+        el.classList.add(cls('buttonGroup'));
+
+        if (cfg.vertical) {
+            el.classList.add(cls('buttonGroupVertical'));
+        }
+
+        if (Array.isArray(cfg.items)) {
+            for (const item of cfg.items) {
+                const child = await ez._createElement(item, cfg.controller || null, this);
+                el.appendChild(child);
+            }
+        }
+
+        this.applyStyles(el);
+        this.el = el;
+
+        return el;
+    }
+}

package/components/card/EzCard.module.scss

@@ -0,0 +1,71 @@
+// ==========================================================
+// EzCard - Base Card Styles
+// ==========================================================
+
+.card {
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--ez-border, #e2e8f0);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.titleWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ez-text-primary, #1e293b);
+    margin: 0;
+    line-height: 1.3;
+}
+
+.subtitle {
+    font-size: 13px;
+    color: var(--ez-text-tertiary, #94a3b8);
+    margin: 0;
+}
+
+.actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.body {
+    padding: 20px;
+}
+
+.noPadding {
+    padding: 0;
+}
+
+// ==========================================================
+// Variants
+// ==========================================================
+
+.elevated {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: none;
+}
+
+.flat {
+    border: none;
+    background: var(--ez-surface-primary, #f8fafc);
+}
+
+.outlined {
+    background: transparent;
+}

package/components/card/EzCard.ts

@@ -0,0 +1,120 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import styles from './EzCard.module.scss';
+import { cx } from '../../utils/cssModules.js';
+
+const cls = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    registerComponent(name: string, component: unknown): void;
+};
+
+export interface EzCardConfig extends EzBaseComponentConfig {
+    title?: string;
+    subtitle?: string;
+    headerActions?: unknown[];
+    variant?: 'default' | 'bordered' | 'elevated';
+    noPadding?: boolean;
+    items?: unknown[];
+    controller?: string | null;
+    css?: unknown;
+}
+
+export class EzCard extends EzBaseComponent {
+    declare config: EzCardConfig;
+
+    constructor(config: EzCardConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        const cfg = this.config;
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: this._buildClasses(),
+            style: cfg.style,
+            items: this._buildItems()
+        }) as HTMLDivElement;
+
+        return el;
+    }
+
+    private _buildClasses(): string[] {
+        const { variant = 'default', cls: userCls } = this.config;
+        const classes: string[] = [cls('card')];
+
+        if (variant !== 'default') {
+            classes.push(cls(variant));
+        }
+
+        if (userCls) {
+            if (Array.isArray(userCls)) {
+                classes.push(...userCls);
+            } else {
+                classes.push(userCls);
+            }
+        }
+
+        return classes;
+    }
+
+    private _buildItems(): unknown[] {
+        const { title, subtitle, headerActions, noPadding, items = [] } = this.config;
+        const result: unknown[] = [];
+
+        // Header (if title or actions exist)
+        if (title || (headerActions && headerActions.length > 0)) {
+            result.push(this._buildHeader());
+        }
+
+        // Body
+        result.push({
+            eztype: 'div',
+            cls: noPadding ? [cls('body'), cls('noPadding')] : cls('body'),
+            items: items
+        });
+
+        return result;
+    }
+
+    private _buildHeader(): unknown {
+        const { title, subtitle, headerActions } = this.config;
+        const headerItems: unknown[] = [];
+
+        // Title wrapper
+        if (title) {
+            const titleItems: unknown[] = [
+                { eztype: 'h3', cls: cls('title'), text: title }
+            ];
+
+            if (subtitle) {
+                titleItems.push({ eztype: 'p', cls: cls('subtitle'), text: subtitle });
+            }
+
+            headerItems.push({
+                eztype: 'div',
+                cls: cls('titleWrapper'),
+                items: titleItems
+            });
+        }
+
+        // Actions
+        if (headerActions && headerActions.length > 0) {
+            headerItems.push({
+                eztype: 'div',
+                cls: cls('actions'),
+                items: headerActions
+            });
+        }
+
+        return {
+            eztype: 'div',
+            cls: cls('header'),
+            items: headerItems
+        };
+    }
+}
+
+ez.registerComponent('EzCard', EzCard);

package/components/chart/EzBarChart.ts

@@ -0,0 +1,47 @@
+import { EzChart, EzChartConfig } from './EzChart.js';
+
+declare const ez: {
+    registerComponent(name: string, component: unknown): void;
+};
+
+interface BarDataset {
+    data?: number[];
+    label?: string;
+    borderRadius?: number;
+    borderSkipped?: boolean | string;
+    backgroundColor?: string | string[];
+    borderColor?: string;
+    [key: string]: unknown;
+}
+
+export interface EzBarChartConfig extends EzChartConfig {
+    labels?: string[];
+    datasets?: BarDataset[];
+}
+
+export class EzBarChart extends EzChart {
+    constructor(config: EzBarChartConfig = {}) {
+        const barDefaults: EzChartConfig = {
+            type: 'bar',
+            showLegend: (config.datasets?.length || 0) > 1,
+            ...config
+        };
+
+        if (barDefaults.labels && barDefaults.datasets) {
+            barDefaults.data = {
+                labels: barDefaults.labels,
+                datasets: barDefaults.datasets.map((ds) => ({
+                    borderRadius: 6,
+                    borderSkipped: false,
+                    ...ds
+                }))
+            };
+            delete barDefaults.labels;
+            delete barDefaults.datasets;
+        }
+
+        super(barDefaults);
+    }
+}
+
+ez.registerComponent('EzBarChart', EzBarChart);

package/components/chart/EzChart.module.scss

@@ -0,0 +1,14 @@
+// ==========================================================
+// EzChart - Chart Container Styles
+// ==========================================================
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 280px;
+
+    canvas {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}