ezfw-core 1.0.0

package/components/dataview/EzDataView.module.scss

@@ -0,0 +1,115 @@
+.dataview {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    background: var(--ez-surface);
+    border-radius: var(--ez-radius, 8px);
+    border: 1px solid var(--ez-border);
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ez-border);
+    gap: 12px;
+    background: var(--ez-surface);
+}
+
+.toolbarTools {
+    display: flex;
+    gap: 8px;
+}
+
+.modeSwitch {
+    display: flex;
+    gap: 2px;
+    background: var(--ez-surface-secondary);
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.modeSwitchBtn {
+    padding: 6px 10px;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--ez-text-secondary);
+    transition: all 0.15s ease;
+
+    &:hover {
+        color: var(--ez-text-primary);
+        background: var(--ez-surface);
+    }
+
+    &.active {
+        background: var(--ez-surface);
+        color: var(--ez-primary);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.cardsContainer {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.cardsGrid {
+    display: grid;
+    gap: 16px;
+}
+
+.cardsEmpty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--ez-text-tertiary);
+
+    .emptyIcon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+    }
+
+    .emptyText {
+        font-size: 15px;
+    }
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-top: 1px solid var(--ez-border);
+    background: var(--ez-surface);
+    gap: 16px;
+    font-size: 13px;
+}
+
+.footerNav {
+    display: flex;
+    gap: 4px;
+}
+
+.footerInfo {
+    color: var(--ez-text-secondary);
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-height: 200px;
+    color: var(--ez-text-tertiary);
+}

package/components/dataview/EzDataView.ts

@@ -0,0 +1,355 @@
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+import { createEzStore } from '../store/EzStore.js';
+import buttonStyles from '../button/EzButton.module.scss';
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
+    getControllerSync(name: string): EzController | null;
+    define(name: string, component: unknown): void;
+};
+
+interface EzController {
+    [key: string]: unknown;
+}
+
+interface EzStore {
+    load(): Promise<void>;
+    state: {
+        data: unknown[];
+        loading: boolean;
+        page: number;
+        pageSize: number;
+        total: number;
+    };
+    on(event: string, callback: (...args: unknown[]) => void): () => void;
+    getTotalPages(): number;
+    isFirstPage(): boolean;
+    isLastPage(): boolean;
+    goToFirstPage(): void;
+    goToPrevPage(): void;
+    goToNextPage(): void;
+    goToLastPage(): void;
+    setPageSize(size: number): void;
+    reload(): Promise<void>;
+}
+
+interface ToolConfig {
+    onClick?: string | ((dataView: EzDataView) => void);
+    [key: string]: unknown;
+}
+
+interface GridConfig {
+    columns?: unknown[];
+    [key: string]: unknown;
+}
+
+interface CardsConfig {
+    columns?: number | 'auto';
+    minWidth?: number;
+    gap?: number;
+    itemRender?: (item: unknown, index: number, meta: { isFirst: boolean; isLast: boolean; isEven: boolean }) => unknown;
+    [key: string]: unknown;
+}
+
+interface StoreConfig {
+    remote?: unknown;
+    model?: string;
+    autoLoad?: boolean;
+    [key: string]: unknown;
+}
+
+type DataViewMode = 'grid' | 'cards';
+
+export interface EzDataViewConfig extends EzBaseComponentConfig {
+    modes?: DataViewMode[];
+    defaultMode?: DataViewMode;
+    store?: EzStore | StoreConfig;
+    remote?: unknown;
+    model?: string;
+    pageSize?: number;
+    autoLoad?: boolean;
+    grid?: GridConfig;
+    cards?: CardsConfig;
+    tools?: ToolConfig[];
+}
+
+interface EzGridInstance {
+    [key: string]: unknown;
+}
+
+export class EzDataView extends EzBaseComponent {
+    declare config: EzDataViewConfig;
+    declare el: HTMLElement;
+
+    private _currentMode: DataViewMode;
+    private _store: EzStore | null;
+    private _modeBtns: Record<string, HTMLElement> = {};
+    private _contentEl: HTMLElement | null = null;
+    private _gridInstance: EzGridInstance | null = null;
+    private _cardsInstance: unknown = null;
+
+    constructor(config: EzDataViewConfig = {}) {
+        super(config);
+
+        this.config = config;
+        this.config.cls = [
+            ...(Array.isArray(config.cls) ? config.cls : [config.cls]),
+            'ez-dataview'
+        ].filter(Boolean) as string[];
+
+        this.config.flex = config.flex ?? 1;
+
+        this._currentMode = config.defaultMode || 'grid';
+        this._store = this._resolveStore(config);
+
+        this._buildParts();
+    }
+
+    private _resolveStore(config: EzDataViewConfig): EzStore | null {
+        if (config.store && typeof config.store === 'object' && typeof (config.store as EzStore).load === 'function') {
+            return config.store as EzStore;
+        }
+
+        if (config.store && typeof config.store === 'object') {
+            return createEzStore({
+                ...(config.store as StoreConfig),
+                autoLoad: false
+            } as unknown as Parameters<typeof createEzStore>[0]) as unknown as EzStore;
+        }
+
+        if (config.remote) {
+            return createEzStore({
+                remote: config.remote,
+                model: config.model,
+                pageSize: config.pageSize || 25,
+                autoLoad: false
+            } as unknown as Parameters<typeof createEzStore>[0]) as unknown as EzStore;
+        }
+
+        return null;
+    }
+
+    private _buildParts(): void {
+        (this.config as { items: unknown[] }).items = [
+            this._buildToolbar(),
+            this._buildContent()
+        ];
+    }
+
+    private _buildToolbar(): unknown {
+        const modes = this.config.modes || ['grid', 'cards'];
+        const tools = this.config.tools || [];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-dataview-toolbar',
+            layout: 'hbox',
+            style: {
+                padding: '12px 16px',
+                borderBottom: '1px solid var(--ez-border)',
+                alignItems: 'center',
+                gap: '12px'
+            },
+            items: [
+                ...(tools.length > 0 ? [{
+                    eztype: 'EzComponent',
+                    layout: 'hbox',
+                    style: { gap: '8px' },
+                    items: tools.map(tool => ({
+                        ...tool,
+                        onClick: () => this._handleToolClick(tool)
+                    }))
+                }] : []),
+                { eztype: 'EzComponent', flex: 1 },
+                ...(modes.length > 1 ? [this._buildModeSwitch(modes)] : [])
+            ]
+        };
+    }
+
+    private _buildModeSwitch(modes: DataViewMode[]): unknown {
+        return {
+            eztype: 'EzComponent',
+            layout: 'hbox',
+            style: {
+                gap: '2px',
+                background: 'var(--ez-surface-secondary)',
+                borderRadius: '6px',
+                padding: '2px'
+            },
+            items: modes.map(mode => ({
+                eztype: 'EzButton',
+                variant: this._currentMode === mode ? 'primary' : 'ghost',
+                size: 'sm',
+                icon: mode === 'grid' ? 'fa-solid fa-table-cells' : 'fa-solid fa-grip',
+                _ezAfterRender: (el: HTMLElement) => {
+                    this._modeBtns ??= {};
+                    this._modeBtns[mode] = el;
+                },
+                onClick: () => this._setMode(mode)
+            }))
+        };
+    }
+
+    private _buildContent(): unknown {
+        const viewConfig = this._buildCurrentModeView();
+        (viewConfig as { _ezAfterRender: (el: HTMLElement) => void })._ezAfterRender = (el: HTMLElement) => {
+            this._contentEl = el;
+        };
+        return viewConfig;
+    }
+
+    private _buildCurrentModeView(): unknown {
+        if (this._currentMode === 'grid') {
+            return this._buildGridView();
+        } else {
+            return this._buildCardsView();
+        }
+    }
+
+    private _buildGridView(): unknown {
+        const gridConfig = this.config.grid || {};
+
+        if (this._store) {
+            return {
+                eztype: 'EzGrid',
+                flex: 1,
+                ...gridConfig,
+                store: this._store,
+                autoLoad: this.config.autoLoad !== false,
+                title: null,
+                _ezAfterRender: (_el: HTMLElement, instance: EzGridInstance) => {
+                    this._gridInstance = instance;
+                }
+            };
+        }
+
+        return {
+            eztype: 'EzGrid',
+            flex: 1,
+            ...gridConfig,
+            model: this.config.model,
+            remote: this.config.remote,
+            autoLoad: this.config.autoLoad !== false,
+            pageSize: this.config.pageSize || 25,
+            title: null,
+            _ezAfterRender: (_el: HTMLElement, instance: EzGridInstance) => {
+                this._gridInstance = instance;
+            }
+        };
+    }
+
+    private _buildCardsView(): unknown {
+        const cardsConfig = this.config.cards || {};
+
+        return {
+            eztype: 'EzDataViewCards',
+            store: this._store,
+            cardsConfig,
+            _ezAfterRender: (_el: HTMLElement, instance: unknown) => {
+                this._cardsInstance = instance;
+            }
+        };
+    }
+
+    private _handleToolClick(tool: ToolConfig): void {
+        if (typeof tool.onClick === 'function') {
+            tool.onClick(this);
+        } else if (typeof tool.onClick === 'string') {
+            const ctrl = ez.getControllerSync(this.config.controller as string);
+            const method = ctrl?.[tool.onClick] as ((dataView: EzDataView) => void) | undefined;
+            method?.(this);
+        }
+    }
+
+    private async _setMode(mode: DataViewMode): Promise<void> {
+        if (this._currentMode === mode) return;
+
+        this._currentMode = mode;
+        this._updateModeButtons();
+
+        if (this._contentEl && this._contentEl.parentNode) {
+            const parent = this._contentEl.parentNode;
+            const oldContent = this._contentEl;
+
+            const viewConfig = this._buildCurrentModeView() as { _ezAfterRender?: (el: HTMLElement) => void };
+            viewConfig._ezAfterRender = (el: HTMLElement) => {
+                this._contentEl = el;
+            };
+
+            const children = await ez._createChildElements([viewConfig], null, null);
+
+            if (children[0] instanceof Node) {
+                parent.replaceChild(children[0], oldContent);
+                this._contentEl = children[0] as HTMLElement;
+            }
+        }
+    }
+
+    private _updateModeButtons(): void {
+        if (!this._modeBtns) return;
+
+        const primaryCls = buttonStyles.primary;
+        const ghostCls = buttonStyles.ghost;
+
+        for (const [mode, el] of Object.entries(this._modeBtns)) {
+            const isActive = mode === this._currentMode;
+            el.classList.toggle(primaryCls, isActive);
+            el.classList.toggle(ghostCls, !isActive);
+        }
+    }
+
+    getMode(): DataViewMode {
+        return this._currentMode;
+    }
+
+    getStore(): EzStore | null {
+        return this._store;
+    }
+
+    getGridInstance(): EzGridInstance | null {
+        return this._gridInstance;
+    }
+
+    async render(): Promise<HTMLElement> {
+        const el = document.createElement('div');
+
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.minHeight = '0';
+
+        if (this.config.flex) {
+            el.style.flex = String(this.config.flex);
+        }
+
+        if (this.config.style) {
+            Object.assign(el.style, this.config.style);
+        }
+
+        this.applyCls(el);
+
+        const items = (this.config as { items?: unknown[] }).items;
+        if (items) {
+            const children = await ez._createChildElements(
+                items,
+                this.config.controller || null,
+                null
+            );
+
+            for (const child of children) {
+                if (child instanceof Node) {
+                    el.appendChild(child);
+                }
+            }
+        }
+
+        this.el = el;
+
+        if (this._store && this.config.autoLoad !== false) {
+            this._store.load();
+        }
+
+        return el;
+    }
+}
+
+ez.define('EzDataView', EzDataView);