ezfw-core 1.0.0

package/components/chart/EzChart.ts

@@ -0,0 +1,279 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import styles from './EzChart.module.scss';
+
+declare const ez: {
+    registerComponent(name: string, component: unknown): void;
+};
+
+declare const Chart: new (canvas: HTMLCanvasElement, config: ChartConfiguration) => ChartInstance;
+
+interface ChartInstance {
+    data: ChartData;
+    update(): void;
+    destroy(): void;
+}
+
+interface ChartData {
+    labels?: string[];
+    datasets?: ChartDataset[];
+}
+
+interface ChartDataset {
+    data?: number[];
+    backgroundColor?: string | string[];
+    borderColor?: string;
+    borderWidth?: number;
+    tension?: number;
+    fill?: boolean;
+    pointRadius?: number;
+    pointHoverRadius?: number;
+    borderRadius?: number;
+    borderSkipped?: boolean | string;
+    [key: string]: unknown;
+}
+
+interface ChartConfiguration {
+    type: string;
+    data: ChartData;
+    options?: ChartOptions;
+}
+
+interface ChartOptions {
+    responsive?: boolean;
+    maintainAspectRatio?: boolean;
+    plugins?: {
+        legend?: {
+            display?: boolean;
+            position?: string;
+            labels?: {
+                color?: string;
+                font?: { size?: number; family?: string };
+                padding?: number;
+                usePointStyle?: boolean;
+            };
+        };
+        tooltip?: {
+            backgroundColor?: string;
+            titleColor?: string;
+            bodyColor?: string;
+            padding?: number;
+            cornerRadius?: number;
+            titleFont?: { size?: number };
+            bodyFont?: { size?: number };
+        };
+    };
+    scales?: {
+        x?: {
+            ticks?: { color?: string };
+            grid?: { color?: string; drawBorder?: boolean };
+        };
+        y?: {
+            ticks?: { color?: string };
+            grid?: { color?: string; drawBorder?: boolean };
+            beginAtZero?: boolean;
+        };
+    };
+    cutout?: string;
+    [key: string]: unknown;
+}
+
+interface ThemeColors {
+    primary: string;
+    primaryLight: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
+    text: string;
+    border: string;
+    palette: string[];
+}
+
+let chartJsLoaded = false;
+let chartJsLoading: Promise<void> | null = null;
+
+export interface EzChartConfig extends EzBaseComponentConfig {
+    type?: string;
+    data?: ChartData;
+    options?: ChartOptions;
+    height?: number | string;
+    showLegend?: boolean;
+    legendPosition?: string;
+    labels?: string[];
+    datasets?: ChartDataset[];
+    values?: number[];
+    colors?: string[];
+    datasetOptions?: Record<string, unknown>;
+}
+
+export class EzChart extends EzBaseComponent {
+    declare config: EzChartConfig;
+
+    protected _chart: ChartInstance | null = null;
+    protected _el: HTMLElement | null = null;
+    protected _canvas: HTMLCanvasElement | null = null;
+
+    constructor(config: EzChartConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLElement> {
+        await this._ensureChartJs();
+
+        const { height = 280, cls = '' } = this.config;
+
+        const el = document.createElement('div');
+        el.className = `${styles.container} ${cls}`.trim();
+        if (height) {
+            el.style.height = typeof height === 'number' ? `${height}px` : height;
+        }
+
+        const canvas = document.createElement('canvas');
+        el.appendChild(canvas);
+
+        this.applyStyles(el);
+
+        requestAnimationFrame(() => {
+            this._initChart(canvas);
+        });
+
+        this._el = el;
+        this._canvas = canvas;
+        return el;
+    }
+
+    protected async _ensureChartJs(): Promise<void> {
+        if (chartJsLoaded) return;
+
+        if (chartJsLoading) {
+            await chartJsLoading;
+            return;
+        }
+
+        chartJsLoading = new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
+            script.onload = () => {
+                chartJsLoaded = true;
+                resolve();
+            };
+            script.onerror = () => {
+                reject(new Error('[EzChart] Failed to load Chart.js'));
+            };
+            document.head.appendChild(script);
+        });
+
+        await chartJsLoading;
+    }
+
+    protected _getThemeColors(): ThemeColors {
+        const root = getComputedStyle(document.documentElement);
+        return {
+            primary: root.getPropertyValue('--ez-primary').trim() || '#005871',
+            primaryLight: root.getPropertyValue('--ez-primary-light').trim() || 'rgba(0, 88, 113, 0.1)',
+            accent: root.getPropertyValue('--ez-accent').trim() || '#2E5283',
+            success: '#059669',
+            warning: '#d97706',
+            danger: '#dc2626',
+            text: root.getPropertyValue('--ez-text-secondary').trim() || '#64748b',
+            border: root.getPropertyValue('--ez-border').trim() || '#e2e8f0',
+            palette: ['#005871', '#98DDDF', '#2E5283', '#E3BD33', '#059669', '#d97706']
+        };
+    }
+
+    protected _initChart(canvas: HTMLCanvasElement): void {
+        const { type, data, options = {} } = this.config;
+
+        if (!type || !data) {
+            console.warn('[EzChart] type and data are required');
+            return;
+        }
+
+        const theme = this._getThemeColors();
+        const defaultOptions = this._getDefaultOptions(type, theme);
+        const mergedOptions = this._deepMerge(defaultOptions, options);
+
+        this._chart = new Chart(canvas, {
+            type,
+            data,
+            options: mergedOptions
+        });
+    }
+
+    protected _getDefaultOptions(type: string, theme: ThemeColors): ChartOptions {
+        const baseOptions: ChartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: this.config.showLegend ?? (type === 'doughnut' || type === 'pie'),
+                    position: this.config.legendPosition || 'bottom',
+                    labels: {
+                        color: theme.text,
+                        font: { size: 12, family: 'inherit' },
+                        padding: 16,
+                        usePointStyle: true
+                    }
+                },
+                tooltip: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    titleColor: '#ffffff',
+                    bodyColor: '#ffffff',
+                    padding: 12,
+                    cornerRadius: 8,
+                    titleFont: { size: 13 },
+                    bodyFont: { size: 12 }
+                }
+            }
+        };
+
+        if (type !== 'doughnut' && type !== 'pie' && type !== 'polarArea' && type !== 'radar') {
+            baseOptions.scales = {
+                x: {
+                    ticks: { color: theme.text },
+                    grid: { color: theme.border, drawBorder: false }
+                },
+                y: {
+                    ticks: { color: theme.text },
+                    grid: { color: theme.border, drawBorder: false },
+                    beginAtZero: true
+                }
+            };
+        }
+
+        return baseOptions;
+    }
+
+    protected _deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
+        const result: Record<string, unknown> = { ...target };
+        for (const key in source) {
+            if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                result[key] = this._deepMerge(
+                    (result[key] as Record<string, unknown>) || {},
+                    source[key] as Record<string, unknown>
+                );
+            } else {
+                result[key] = source[key];
+            }
+        }
+        return result;
+    }
+
+    updateData(newData: ChartData): void {
+        if (this._chart) {
+            this._chart.data = newData;
+            this._chart.update();
+        }
+    }
+
+    destroy(): void {
+        if (this._chart) {
+            this._chart.destroy();
+            this._chart = null;
+        }
+        super.destroy();
+    }
+}
+
+ez.registerComponent('EzChart', EzChart);

package/components/chart/EzDoughnutChart.ts

@@ -0,0 +1,47 @@
+import { EzChart, EzChartConfig } from './EzChart.js';
+
+declare const ez: {
+    registerComponent(name: string, component: unknown): void;
+};
+
+export interface EzDoughnutChartConfig extends EzChartConfig {
+    labels?: string[];
+    values?: number[];
+    colors?: string[];
+    datasetOptions?: Record<string, unknown>;
+}
+
+export class EzDoughnutChart extends EzChart {
+    constructor(config: EzDoughnutChartConfig = {}) {
+        const doughnutDefaults: EzChartConfig = {
+            type: 'doughnut',
+            showLegend: true,
+            legendPosition: 'bottom',
+            ...config,
+            options: {
+                cutout: '65%',
+                ...config.options
+            }
+        };
+
+        if (doughnutDefaults.labels && doughnutDefaults.values) {
+            doughnutDefaults.data = {
+                labels: doughnutDefaults.labels,
+                datasets: [{
+                    data: doughnutDefaults.values,
+                    backgroundColor: doughnutDefaults.colors || ['#005871', '#98DDDF', '#2E5283', '#E3BD33', '#059669', '#d97706'],
+                    borderWidth: 0,
+                    ...doughnutDefaults.datasetOptions
+                }]
+            };
+            delete doughnutDefaults.labels;
+            delete doughnutDefaults.values;
+            delete doughnutDefaults.colors;
+            delete doughnutDefaults.datasetOptions;
+        }
+
+        super(doughnutDefaults);
+    }
+}
+
+ez.registerComponent('EzDoughnutChart', EzDoughnutChart);

package/components/chart/EzLineChart.ts

@@ -0,0 +1,53 @@
+import { EzChart, EzChartConfig } from './EzChart.js';
+
+declare const ez: {
+    registerComponent(name: string, component: unknown): void;
+};
+
+interface LineDataset {
+    data?: number[];
+    label?: string;
+    tension?: number;
+    fill?: boolean;
+    borderWidth?: number;
+    pointRadius?: number;
+    pointHoverRadius?: number;
+    backgroundColor?: string;
+    borderColor?: string;
+    [key: string]: unknown;
+}
+
+export interface EzLineChartConfig extends EzChartConfig {
+    labels?: string[];
+    datasets?: LineDataset[];
+}
+
+export class EzLineChart extends EzChart {
+    constructor(config: EzLineChartConfig = {}) {
+        const lineDefaults: EzChartConfig = {
+            type: 'line',
+            showLegend: (config.datasets?.length || 0) > 1,
+            ...config
+        };
+
+        if (lineDefaults.labels && lineDefaults.datasets) {
+            lineDefaults.data = {
+                labels: lineDefaults.labels,
+                datasets: lineDefaults.datasets.map((ds) => ({
+                    tension: 0.4,
+                    fill: true,
+                    borderWidth: 2,
+                    pointRadius: 3,
+                    pointHoverRadius: 5,
+                    ...ds
+                }))
+            };
+            delete lineDefaults.labels;
+            delete lineDefaults.datasets;
+        }
+
+        super(lineDefaults);
+    }
+}
+
+ez.registerComponent('EzLineChart', EzLineChart);

package/components/checkbox/EzCheckbox.module.scss

@@ -0,0 +1,145 @@
+.checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    width: 18px;
+    height: 18px;
+
+    background: var(--ez-input-bg, #ffffff);
+    border: 2px solid var(--ez-border, #cbd5e1);
+    border-radius: var(--ez-radius-sm, 4px);
+
+    transition: all 0.15s ease;
+}
+
+.check {
+    font-size: 10px;
+    color: #ffffff;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.15s ease;
+}
+
+// Checked state
+.input:checked + .box {
+    background: var(--ez-primary, #2563eb);
+    border-color: var(--ez-primary, #2563eb);
+
+    .check {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+// Focus state
+.input:focus-visible + .box {
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.3));
+}
+
+// Hover state
+.checkbox:hover:not(.disabled) .box {
+    border-color: var(--ez-primary, #2563eb);
+}
+
+.label {
+    font-size: 14px;
+    color: var(--ez-text-primary, #1e293b);
+}
+
+// Disabled state
+.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+
+    .box {
+        background: var(--ez-surface-primary, #f1f5f9);
+    }
+
+    .input:checked + .box {
+        background: var(--ez-primary, #2563eb);
+        opacity: 0.6;
+    }
+
+    .label {
+        color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+// Sizes
+.sm {
+    gap: 6px;
+
+    .box {
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
+    }
+
+    .check {
+        font-size: 8px;
+    }
+
+    .label {
+        font-size: 13px;
+    }
+}
+
+.lg {
+    gap: 10px;
+
+    .box {
+        width: 22px;
+        height: 22px;
+        border-radius: 5px;
+    }
+
+    .check {
+        font-size: 12px;
+    }
+
+    .label {
+        font-size: 15px;
+    }
+}
+
+// Error state
+.hasError {
+    .box {
+        border-color: var(--ez-danger, #dc2626);
+    }
+
+    .input:checked + .box {
+        background: var(--ez-danger, #dc2626);
+        border-color: var(--ez-danger, #dc2626);
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+    margin-left: auto;
+}
+
+.fieldErrorVisible {
+    display: block;
+}

package/components/checkbox/EzCheckbox.ts

@@ -0,0 +1,115 @@
+import styles from './EzCheckbox.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface EzCheckboxConfig extends EzBaseComponentConfig {
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    value?: boolean;
+    name?: string;
+    formData?: string;
+    label?: string;
+}
+
+export class EzCheckbox extends EzBaseComponent {
+    declare config: EzCheckboxConfig;
+
+    private _wrapper: HTMLLabelElement | null = null;
+    private _input: HTMLInputElement | null = null;
+    private _error: HTMLDivElement | null = null;
+
+    render(): HTMLLabelElement {
+        const cfg = this.config;
+
+        const wrapper = document.createElement('label');
+        wrapper.className = cls(
+            'checkbox',
+            cfg.size,
+            cfg.disabled && 'disabled'
+        );
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = cls('input');
+        input.checked = !!cfg.value;
+
+        if (cfg.disabled) input.disabled = true;
+        if (cfg.name) input.name = cfg.name;
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        const box = document.createElement('span');
+        box.className = cls('box');
+
+        const check = document.createElement('i');
+        check.className = cls('check', 'fa-solid fa-check');
+        box.appendChild(check);
+
+        this.applyCommonBindings(input);
+
+        const onChange = this._createOnChangeHandler();
+
+        input.addEventListener('change', e => {
+            if (onChange) {
+                onChange((e.target as HTMLInputElement).checked);
+            }
+        });
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(box);
+
+        if (cfg.label) {
+            const label = document.createElement('span');
+            label.className = cls('label');
+            label.textContent = cfg.label;
+            wrapper.appendChild(label);
+        }
+
+        const error = document.createElement('div');
+        error.className = cls('fieldError');
+        wrapper.appendChild(error);
+
+        this._wrapper = wrapper;
+        this._input = input;
+        this._error = error;
+
+        return wrapper;
+    }
+
+    getValue(): boolean {
+        return this._input?.checked ?? false;
+    }
+
+    setValue(value: boolean): void {
+        if (this._input) {
+            this._input.checked = !!value;
+        }
+    }
+
+    toggle(): void {
+        if (this._input && !this._input.disabled) {
+            this._input.checked = !this._input.checked;
+            this._input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+
+    showError(message: string): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.add(cls('hasError'));
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.remove(cls('hasError'));
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+}