juxscript 1.1.162 → 1.1.165

package/index.d.ts

@@ -12,6 +12,8 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
+import { dataframe } from './lib/components/dataframe.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -52,6 +54,7 @@ export { tabularDriver } from './lib/storage/TabularDriver.js';
 export { DataFrame } from './lib/storage/DataFrame.js';
 export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
 export { fileStorage } from './lib/storage/FileStorage.js';
+export { dataframe } from './lib/components/dataframe.js';
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
@@ -72,10 +75,12 @@ export declare const jux: {
     code: typeof code;
     container: typeof container;
     data: typeof data;
+    dataframe: typeof dataframe;
     datepicker: typeof datepicker;
     dialog: typeof dialog;
     divider: typeof divider;
     dropdown: typeof dropdown;
+    dropdownMenu: typeof dropdownMenu;
     element: typeof element;
     fileupload: typeof fileupload;
     grid: typeof grid;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -12,6 +12,8 @@ import { datepicker } from './lib/components/datepicker.js';
 import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
+import { dropdownMenu } from './lib/components/dropdown-menu.js';
+import { dataframe } from './lib/components/dataframe.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -55,6 +57,7 @@ export { tabularDriver } from './lib/storage/TabularDriver.js';
 export { DataFrame } from './lib/storage/DataFrame.js';
 export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
 export { fileStorage } from './lib/storage/FileStorage.js';
+export { dataframe } from './lib/components/dataframe.js';
 // Import Stack components (already added earlier)
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
@@ -78,10 +81,12 @@ export const jux = {
     code,
     container,
     data,
+    dataframe,
     datepicker,
     dialog,
     divider,
     dropdown,
+    dropdownMenu,
     element,
     fileupload,
     grid,

package/lib/components/dataframe.d.ts

@@ -0,0 +1,110 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { DataFrame } from '../storage/DataFrame.js';
+import { TabularDriver } from '../storage/TabularDriver.js';
+import { FileUpload } from './fileupload.js';
+import { Table } from './table.js';
+export interface DataFrameOptions {
+    dbName?: string;
+    storeName?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+    style?: string;
+    class?: string;
+}
+type DataFrameState = BaseState & {
+    loaded: boolean;
+    sourceName: string;
+    rowCount: number;
+    colCount: number;
+};
+export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
+    private _df;
+    private _driver;
+    private _table;
+    private _tableOptions;
+    private _uploadRef;
+    private _storageKey;
+    private _pendingSource;
+    constructor(id: string, options?: DataFrameOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    /**
+     * Load from IndexedDB by storage key
+     */
+    fromStorage(key: string): this;
+    /**
+     * Load from a FileUpload component — auto-wires change event
+     */
+    fromUpload(upload: FileUpload): this;
+    /**
+     * Load from raw data — array of objects or Record<string, any[]>
+     */
+    fromData(data: Record<string, any>[] | Record<string, any[]>): this;
+    /**
+     * Apply a transform to the current DataFrame and update the table
+     */
+    apply(fn: (df: DataFrame) => DataFrame): this;
+    /**
+     * Filter rows
+     */
+    filter(predicate: (row: Record<string, any>, index: number) => boolean): this;
+    /**
+     * Select columns
+     */
+    select(...cols: string[]): this;
+    /**
+     * Sort by column
+     */
+    sort(col: string, descending?: boolean): this;
+    /**
+     * Show first N rows
+     */
+    head(n?: number): this;
+    /**
+     * Show last N rows
+     */
+    tail(n?: number): this;
+    /**
+     * Add a computed column
+     */
+    withColumn(name: string, fn: (row: Record<string, any>, index: number) => any): this;
+    /**
+     * Where clause
+     */
+    where(col: string, op: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith', value: any): this;
+    /** Get the underlying DataFrame */
+    get df(): DataFrame | null;
+    /** Get the underlying TabularDriver */
+    get driver(): TabularDriver;
+    /** Get the internal Table component */
+    get table(): Table | null;
+    /** Get describe() stats */
+    describe(): Record<string, any> | null;
+    /** Export to CSV string */
+    toCSV(delimiter?: string): string;
+    /** Export to row objects */
+    toRows(): Record<string, any>[];
+    /** Get shape */
+    get shape(): [number, number];
+    /** Get column names */
+    get columns(): string[];
+    /** Save current DataFrame to IndexedDB */
+    save(key?: string): Promise<string | null>;
+    striped(v: boolean): this;
+    hoverable(v: boolean): this;
+    sortable(v: boolean): this;
+    filterable(v: boolean): this;
+    paginated(v: boolean): this;
+    rowsPerPage(v: number): this;
+    private _setDataFrame;
+    private _updateTable;
+    update(prop: string, value: any): void;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+}
+export declare function dataframe(id: string, options?: DataFrameOptions): DataFrameComponent;
+export {};
+//# sourceMappingURL=dataframe.d.ts.map

package/lib/components/dataframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -0,0 +1,292 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { DataFrame } from '../storage/DataFrame.js';
+import { TabularDriver } from '../storage/TabularDriver.js';
+import { Table } from './table.js';
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['load', 'error', 'transform'];
+export class DataFrameComponent extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            style: options.style ?? '',
+            class: options.class ?? '',
+            loaded: false,
+            sourceName: '',
+            rowCount: 0,
+            colCount: 0
+        });
+        this._df = null;
+        this._table = null;
+        this._uploadRef = null;
+        this._storageKey = null;
+        this._pendingSource = null;
+        this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
+        this._tableOptions = {
+            striped: options.striped ?? true,
+            hoverable: options.hoverable ?? true,
+            sortable: options.sortable ?? true,
+            filterable: options.filterable ?? true,
+            paginated: options.paginated ?? true,
+            rowsPerPage: options.rowsPerPage ?? 25
+        };
+    }
+    getTriggerEvents() { return TRIGGER_EVENTS; }
+    getCallbackEvents() { return CALLBACK_EVENTS; }
+    /* ═══════════════════════════════════════════════════
+     * DATA SOURCES
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * Load from IndexedDB by storage key
+     */
+    fromStorage(key) {
+        this._storageKey = key;
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                let df = await this._driver.loadByName(key);
+                if (!df) {
+                    this._triggerCallback('error', 'No table found with key: ' + key, null, this);
+                    this.state.loading = false;
+                    return;
+                }
+                this._setDataFrame(df, 'storage: ' + key);
+            }
+            catch (err) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+    /**
+     * Load from a FileUpload component — auto-wires change event
+     */
+    fromUpload(upload) {
+        this._uploadRef = upload;
+        this._pendingSource = async () => {
+            // Wire upload's change event to parse incoming files
+            upload.bind('change', async (files) => {
+                if (!files || files.length === 0)
+                    return;
+                const file = files[0];
+                this.state.loading = true;
+                try {
+                    const df = await this._driver.streamFile(file);
+                    // Auto-persist to IndexedDB
+                    await this._driver.store(file.name, df, { source: file.name });
+                    this._setDataFrame(df, 'upload: ' + file.name);
+                }
+                catch (err) {
+                    this._triggerCallback('error', err.message, null, this);
+                    this.state.loading = false;
+                }
+            });
+        };
+        return this;
+    }
+    /**
+     * Load from raw data — array of objects or Record<string, any[]>
+     */
+    fromData(data) {
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                const df = new DataFrame(data);
+                this._setDataFrame(df, 'inline data');
+            }
+            catch (err) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API (returns new DataFrameComponent view)
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * Apply a transform to the current DataFrame and update the table
+     */
+    apply(fn) {
+        if (!this._df)
+            return this;
+        const result = fn(this._df);
+        this._setDataFrame(result, this.state.sourceName + ' (transformed)');
+        this._triggerCallback('transform', result, null, this);
+        return this;
+    }
+    /**
+     * Filter rows
+     */
+    filter(predicate) {
+        return this.apply(df => df.filter(predicate));
+    }
+    /**
+     * Select columns
+     */
+    select(...cols) {
+        return this.apply(df => df.select(...cols));
+    }
+    /**
+     * Sort by column
+     */
+    sort(col, descending) {
+        return this.apply(df => df.sort(col, descending));
+    }
+    /**
+     * Show first N rows
+     */
+    head(n = 5) {
+        return this.apply(df => df.head(n));
+    }
+    /**
+     * Show last N rows
+     */
+    tail(n = 5) {
+        return this.apply(df => df.tail(n));
+    }
+    /**
+     * Add a computed column
+     */
+    withColumn(name, fn) {
+        return this.apply(df => df.withColumn(name, fn));
+    }
+    /**
+     * Where clause
+     */
+    where(col, op, value) {
+        return this.apply(df => df.where(col, op, value));
+    }
+    /* ═══════════════════════════════════════════════════
+     * ACCESSORS
+     * ═══════════════════════════════════════════════════ */
+    /** Get the underlying DataFrame */
+    get df() { return this._df; }
+    /** Get the underlying TabularDriver */
+    get driver() { return this._driver; }
+    /** Get the internal Table component */
+    get table() { return this._table; }
+    /** Get describe() stats */
+    describe() {
+        return this._df?.describe() ?? null;
+    }
+    /** Export to CSV string */
+    toCSV(delimiter) {
+        return this._df?.toCSV(delimiter) ?? '';
+    }
+    /** Export to row objects */
+    toRows() {
+        return this._df?.toRows() ?? [];
+    }
+    /** Get shape */
+    get shape() {
+        return this._df?.shape ?? [0, 0];
+    }
+    /** Get column names */
+    get columns() {
+        return this._df?.columns ?? [];
+    }
+    /** Save current DataFrame to IndexedDB */
+    async save(key) {
+        if (!this._df)
+            return null;
+        const name = key ?? this._storageKey ?? this._id;
+        return this._driver.store(name, this._df);
+    }
+    /* ═══════════════════════════════════════════════════
+     * TABLE OPTIONS (fluent, pre-render)
+     * ═══════════════════════════════════════════════════ */
+    striped(v) { this._tableOptions.striped = v; return this; }
+    hoverable(v) { this._tableOptions.hoverable = v; return this; }
+    sortable(v) { this._tableOptions.sortable = v; return this; }
+    filterable(v) { this._tableOptions.filterable = v; return this; }
+    paginated(v) { this._tableOptions.paginated = v; return this; }
+    rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
+    /* ═══════════════════════════════════════════════════
+     * INTERNAL
+     * ═══════════════════════════════════════════════════ */
+    _setDataFrame(df, sourceName) {
+        this._df = df;
+        this.state.loaded = true;
+        this.state.loading = false;
+        this.state.sourceName = sourceName;
+        this.state.rowCount = df.height;
+        this.state.colCount = df.width;
+        // Clean __EMPTY columns from xlsx artifacts
+        const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
+        if (cleanCols.length < df.columns.length) {
+            this._df = df.select(...cleanCols);
+        }
+        this._updateTable();
+        this._triggerCallback('load', this._df, null, this);
+    }
+    _updateTable() {
+        if (!this._table || !this._df)
+            return;
+        this._table.columns(this._df.columns).rows(this._df.toRows());
+    }
+    update(prop, value) { }
+    /* ═══════════════════════════════════════════════════
+     * RENDER
+     * ═══════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dataframe';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Status bar
+        const statusBar = document.createElement('div');
+        statusBar.className = 'jux-dataframe-status';
+        statusBar.id = `${this._id}-status`;
+        statusBar.style.cssText = 'font-size:13px;color:#888;margin-bottom:8px;';
+        statusBar.textContent = 'No data loaded.';
+        wrapper.appendChild(statusBar);
+        container.appendChild(wrapper);
+        // Create internal table
+        this._table = new Table(`${this._id}-table`, {
+            striped: this._tableOptions.striped,
+            hoverable: this._tableOptions.hoverable,
+            sortable: this._tableOptions.sortable,
+            filterable: this._tableOptions.filterable,
+            paginated: this._tableOptions.paginated,
+            rowsPerPage: this._tableOptions.rowsPerPage
+        });
+        this._table.render(wrapper);
+        // Watch state for status updates
+        const origUpdate = this.update.bind(this);
+        this.update = (prop, value) => {
+            origUpdate(prop, value);
+            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
+                const el = document.getElementById(`${this._id}-status`);
+                if (el) {
+                    if (this.state.loading) {
+                        el.textContent = '⏳ Loading...';
+                    }
+                    else if (this.state.loaded) {
+                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
+                    }
+                    else {
+                        el.textContent = 'No data loaded.';
+                    }
+                }
+            }
+        };
+        // Execute pending data source
+        if (this._pendingSource) {
+            this._pendingSource();
+            this._pendingSource = null;
+        }
+        this._wireStandardEvents(wrapper);
+        return this;
+    }
+}
+export function dataframe(id, options = {}) {
+    return new DataFrameComponent(id, options);
+}