ezfw-core 1.0.0

package/components/store/EzStore.ts

@@ -0,0 +1,344 @@
+/**
+ * EzStore - Abstract data store for components
+ *
+ * Handles remote data loading, pagination, filtering, and sorting.
+ * Can be shared between multiple components (EzGrid, EzDataView, etc.)
+ */
+
+// ============================================================
+// Types
+// ============================================================
+
+export interface EzStoreRemoteConfig {
+    api: string;
+    source?: {
+        dataPath?: string;
+        countPath?: string;
+    };
+}
+
+export interface EzStoreConfig {
+    remote?: string | EzStoreRemoteConfig;
+    model?: string;
+    pageSize?: number;
+    autoLoad?: boolean;
+}
+
+export interface EzStoreState {
+    data: unknown[];
+    loading: boolean;
+    error: Error | null;
+    page: number;
+    pageSize: number;
+    total: number;
+    filters: Record<string, unknown>;
+    sort: { field: string; order: 'asc' | 'desc' } | null;
+}
+
+export interface EzStorePageChangeEvent {
+    page: number;
+    pageSize: number;
+}
+
+export type EzStoreEventMap = {
+    datachange: unknown[];
+    loadingchange: boolean;
+    pagechange: EzStorePageChangeEvent;
+    filterchange: Record<string, unknown>;
+    sortchange: { field: string; order: 'asc' | 'desc' } | null;
+    error: Error;
+};
+
+export type EzStoreEventName = keyof EzStoreEventMap;
+
+export interface EzStore {
+    readonly _isEzStore: true;
+    readonly config: EzStoreConfig;
+    readonly state: EzStoreState;
+
+    // State accessors
+    getState(): EzStoreState;
+    getData(): unknown[];
+    getTotalPages(): number;
+    isFirstPage(): boolean;
+    isLastPage(): boolean;
+
+    // Events
+    on<K extends EzStoreEventName>(event: K, fn: (payload: EzStoreEventMap[K]) => void): () => void;
+    off<K extends EzStoreEventName>(event: K, fn: (payload: EzStoreEventMap[K]) => void): void;
+    emit<K extends EzStoreEventName>(event: K, payload: EzStoreEventMap[K]): void;
+
+    // Data operations
+    load(params?: Record<string, unknown>): Promise<unknown[]>;
+    reload(): Promise<unknown[]>;
+    setData(data: unknown[], meta?: { total?: number }): void;
+
+    // Pagination
+    setPage(page: number): Promise<unknown[]> | undefined;
+    setPageSize(size: number): Promise<unknown[]> | undefined;
+    goToFirstPage(): Promise<unknown[]> | undefined;
+    goToLastPage(): Promise<unknown[]> | undefined;
+    goToPrevPage(): Promise<unknown[]> | undefined;
+    goToNextPage(): Promise<unknown[]> | undefined;
+
+    // Filtering & Sorting
+    setFilters(filters: Record<string, unknown>): Promise<unknown[]>;
+    setSort(field: string | null, order?: 'asc' | 'desc'): Promise<unknown[]>;
+}
+
+// ============================================================
+// Declare global ez object
+// ============================================================
+
+declare const ez: {
+    _api: {
+        request(api: string, options?: { params?: Record<string, unknown> }): Promise<unknown>;
+    };
+    _loader: {
+        resolveModel(name: string): Promise<void>;
+    };
+    getModelSync(name: string): {
+        processAll(data: unknown[]): unknown[];
+    } | null;
+};
+
+// ============================================================
+// Implementation
+// ============================================================
+
+type EventCallback = (payload: unknown) => void;
+type ListenerMap = Record<string, EventCallback[]>;
+
+function getNestedValue(obj: unknown, path: string): unknown {
+    if (!path) return obj;
+    return path.split('.').reduce((acc: unknown, key: string) => {
+        if (acc && typeof acc === 'object' && key in acc) {
+            return (acc as Record<string, unknown>)[key];
+        }
+        return undefined;
+    }, obj);
+}
+
+export function createEzStore(config: EzStoreConfig = {}): EzStore {
+    const listeners: ListenerMap = Object.create(null);
+
+    const state: EzStoreState = {
+        data: [],
+        loading: false,
+        error: null,
+        page: 1,
+        pageSize: config.pageSize || 25,
+        total: 0,
+        filters: {},
+        sort: null
+    };
+
+    function on<K extends EzStoreEventName>(
+        event: K,
+        fn: (payload: EzStoreEventMap[K]) => void
+    ): () => void {
+        (listeners[event] ??= []).push(fn as EventCallback);
+        return () => off(event, fn);
+    }
+
+    function off<K extends EzStoreEventName>(
+        event: K,
+        fn: (payload: EzStoreEventMap[K]) => void
+    ): void {
+        const eventListeners = listeners[event];
+        if (!eventListeners) return;
+        listeners[event] = eventListeners.filter(l => l !== fn);
+    }
+
+    function emit<K extends EzStoreEventName>(
+        event: K,
+        payload: EzStoreEventMap[K]
+    ): void {
+        const eventListeners = listeners[event];
+        if (!eventListeners) return;
+        for (const fn of eventListeners) {
+            fn(payload);
+        }
+    }
+
+    async function load(params: Record<string, unknown> = {}): Promise<unknown[]> {
+        const remote = config.remote;
+        if (!remote) {
+            console.warn('[EzStore] No remote config provided');
+            return [];
+        }
+
+        const api = typeof remote === 'string' ? remote : remote.api;
+        if (!api) {
+            console.warn('[EzStore] No API endpoint provided');
+            return [];
+        }
+
+        state.loading = true;
+        state.error = null;
+        emit('loadingchange', true);
+
+        try {
+            const requestParams: Record<string, unknown> = {
+                page: state.page,
+                pageSize: state.pageSize,
+                ...state.filters,
+                ...params
+            };
+
+            if (state.sort) {
+                requestParams.sort = state.sort.field;
+                requestParams.order = state.sort.order;
+            }
+
+            const result = await ez._api.request(api, { params: requestParams });
+
+            const source = typeof remote === 'object' ? remote.source : undefined;
+            const dataPath = source?.dataPath || 'data';
+            const countPath = source?.countPath || 'total';
+
+            let data = (getNestedValue(result, dataPath) as unknown[]) || [];
+            const total = getNestedValue(result, countPath);
+            state.total = typeof total === 'number' ? total : data.length;
+
+            if (config.model) {
+                await ez._loader.resolveModel(config.model);
+                const model = ez.getModelSync(config.model);
+                if (model) {
+                    data = model.processAll(data);
+                }
+            }
+
+            state.data = data;
+            emit('datachange', state.data);
+
+            return state.data;
+        } catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            state.error = error;
+            emit('error', error);
+            console.error('[EzStore] Load error:', error);
+            throw error;
+        } finally {
+            state.loading = false;
+            emit('loadingchange', false);
+        }
+    }
+
+    function reload(): Promise<unknown[]> {
+        return load();
+    }
+
+    function setPage(page: number): Promise<unknown[]> | undefined {
+        const next = Number(page);
+        if (!Number.isInteger(next) || next < 1) return;
+        if (state.page === next) return;
+
+        state.page = next;
+        emit('pagechange', { page: next, pageSize: state.pageSize });
+        return load();
+    }
+
+    function setPageSize(size: number): Promise<unknown[]> | undefined {
+        const next = Number(size);
+        if (!Number.isInteger(next) || next < 1) return;
+        if (state.pageSize === next) return;
+
+        state.pageSize = next;
+        state.page = 1;
+        emit('pagechange', { page: 1, pageSize: next });
+        return load();
+    }
+
+    function setFilters(filters: Record<string, unknown>): Promise<unknown[]> {
+        state.filters = filters || {};
+        state.page = 1;
+        emit('filterchange', state.filters);
+        return load();
+    }
+
+    function setSort(field: string | null, order: 'asc' | 'desc' = 'asc'): Promise<unknown[]> {
+        if (field === null) {
+            state.sort = null;
+        } else {
+            state.sort = { field, order };
+        }
+        emit('sortchange', state.sort);
+        return load();
+    }
+
+    function setData(data: unknown[], meta: { total?: number } = {}): void {
+        state.data = Array.isArray(data) ? data : [];
+        state.total = meta.total ?? state.data.length;
+        emit('datachange', state.data);
+    }
+
+    function getData(): unknown[] {
+        return state.data;
+    }
+
+    function getState(): EzStoreState {
+        return { ...state };
+    }
+
+    function getTotalPages(): number {
+        return Math.max(1, Math.ceil(state.total / state.pageSize));
+    }
+
+    function isFirstPage(): boolean {
+        return state.page <= 1;
+    }
+
+    function isLastPage(): boolean {
+        return state.page >= getTotalPages();
+    }
+
+    function goToFirstPage(): Promise<unknown[]> | undefined {
+        return setPage(1);
+    }
+
+    function goToLastPage(): Promise<unknown[]> | undefined {
+        return setPage(getTotalPages());
+    }
+
+    function goToPrevPage(): Promise<unknown[]> | undefined {
+        return setPage(state.page - 1);
+    }
+
+    function goToNextPage(): Promise<unknown[]> | undefined {
+        return setPage(state.page + 1);
+    }
+
+    const store: EzStore = {
+        _isEzStore: true,
+        config,
+        state,
+        getState,
+        getData,
+        getTotalPages,
+        isFirstPage,
+        isLastPage,
+        on,
+        off,
+        emit,
+        load,
+        reload,
+        setData,
+        setPage,
+        setPageSize,
+        goToFirstPage,
+        goToLastPage,
+        goToPrevPage,
+        goToNextPage,
+        setFilters,
+        setSort
+    };
+
+    if (config.autoLoad !== false && config.remote) {
+        queueMicrotask(() => { void load(); });
+    }
+
+    return store;
+}
+
+export default createEzStore;

package/components/switch/EzSwitch.module.scss

@@ -0,0 +1,164 @@
+.switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.labelLeft {
+    flex-direction: row-reverse;
+}
+
+.input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    width: 44px;
+    height: 24px;
+    padding: 2px;
+
+    background: var(--ez-border, #cbd5e1);
+    border-radius: 12px;
+
+    transition: background 0.2s ease;
+}
+
+.thumb {
+    position: absolute;
+    left: 2px;
+
+    width: 20px;
+    height: 20px;
+
+    background: #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+    transition: transform 0.2s ease;
+}
+
+// Checked state
+.input:checked + .track {
+    background: var(--ez-primary, #2563eb);
+
+    .thumb {
+        transform: translateX(20px);
+    }
+}
+
+// Focus state
+.input:focus-visible + .track {
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.3));
+}
+
+// Hover state
+.switch:hover:not(.disabled) .track {
+    background: var(--ez-text-tertiary, #94a3b8);
+}
+
+.switch:hover:not(.disabled) .input:checked + .track {
+    background: var(--ez-primary-dark, #1d4ed8);
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ez-text-primary, #1e293b);
+}
+
+// Disabled state
+.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+
+    .track {
+        background: var(--ez-surface-primary, #e2e8f0);
+    }
+
+    .input:checked + .track {
+        background: var(--ez-primary, #2563eb);
+        opacity: 0.5;
+    }
+
+    .label {
+        color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+// Sizes
+.sm {
+    .track {
+        width: 36px;
+        height: 20px;
+        border-radius: 10px;
+    }
+
+    .thumb {
+        width: 16px;
+        height: 16px;
+    }
+
+    .input:checked + .track .thumb {
+        transform: translateX(16px);
+    }
+
+    .label {
+        font-size: 13px;
+    }
+}
+
+.lg {
+    .track {
+        width: 52px;
+        height: 28px;
+        border-radius: 14px;
+        padding: 3px;
+    }
+
+    .thumb {
+        width: 22px;
+        height: 22px;
+    }
+
+    .input:checked + .track .thumb {
+        transform: translateX(24px);
+    }
+
+    .label {
+        font-size: 15px;
+    }
+}
+
+// Error state
+.hasError {
+    .track {
+        background: var(--ez-danger-light, rgba(220, 38, 38, 0.2));
+    }
+
+    .input:checked + .track {
+        background: var(--ez-danger, #dc2626);
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+    margin-left: auto;
+}
+
+.fieldErrorVisible {
+    display: block;
+}

package/components/switch/EzSwitch.ts

@@ -0,0 +1,117 @@
+import styles from './EzSwitch.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface EzSwitchConfig extends EzBaseComponentConfig {
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    value?: boolean;
+    name?: string;
+    formData?: string;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+}
+
+export class EzSwitch extends EzBaseComponent {
+    declare config: EzSwitchConfig;
+
+    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(
+            'switch',
+            cfg.size,
+            cfg.disabled && 'disabled',
+            cfg.labelPosition === 'left' && 'labelLeft'
+        );
+
+        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 track = document.createElement('span');
+        track.className = cls('track');
+
+        const thumb = document.createElement('span');
+        thumb.className = cls('thumb');
+        track.appendChild(thumb);
+
+        this.applyCommonBindings(input);
+
+        const onChange = this._createOnChangeHandler();
+
+        input.addEventListener('change', e => {
+            if (onChange) {
+                onChange((e.target as HTMLInputElement).checked);
+            }
+        });
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(track);
+
+        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 = '';
+        }
+    }
+}