juxscript 1.1.239 → 1.1.243

package/lib/components/dataframe.js

@@ -1,470 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { DataFrame } from '../storage/DataFrame.js';
-import { FileUpload } from './fileupload.js';
-import { Table } from './table.js';
-import { Tabs } from './tabs.js';
-import { Button } from './button.js';
-import { dataFrameSource } from './dataframe/DataFrameSource.js';
-import { ImportSettingsModal } from './dataframe/ImportSettingsModal.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._table = null;
-        this._tabs = null;
-        this._uploadRef = null;
-        this._inlineUpload = null;
-        this._uploadButtonLabel = 'Upload File';
-        this._uploadButtonIcon = 'upload';
-        this._uploadButtonVariant = 'outline';
-        this._uploadAccept = '.csv,.tsv,.txt,.xlsx,.xls';
-        this._uploadDescription = '';
-        this._showUploadIcon = true;
-        this._pendingSource = null;
-        // Initialize data source
-        this._source = dataFrameSource({
-            maxFileSize: options.maxFileSize ?? 50,
-            maxSheetSize: options.maxSheetSize ?? 100000,
-            sheetChunkSize: options.sheetChunkSize ?? 10000,
-            persistToIndexedDB: options.persistToIndexedDB ?? false,
-            dbName: options.dbName ?? 'jux-dataframes',
-            storeName: options.storeName ?? 'frames'
-        });
-        // Wire up source callbacks
-        this._source.onLoad((result) => this._handleLoadResult(result));
-        this._source.onError((message) => this._handleError(message));
-        this._source.onProgress((loaded, total) => this._handleProgress(loaded, total));
-        // Initialize import settings modal
-        this._importModal = new ImportSettingsModal(id, this._source.driver, {
-            maxSheetSize: options.maxSheetSize ?? 100000,
-            sheetChunkSize: options.sheetChunkSize ?? 10000
-        });
-        this._tableOptions = {
-            striped: options.striped ?? true,
-            hoverable: options.hoverable ?? true,
-            sortable: options.sortable ?? true,
-            filterable: options.filterable ?? false,
-            paginated: options.paginated ?? true,
-            rowsPerPage: options.rowsPerPage ?? 25
-        };
-    }
-    getTriggerEvents() { return TRIGGER_EVENTS; }
-    getCallbackEvents() { return CALLBACK_EVENTS; }
-    /* ═══════════════════════════════════════════════════
-     * DATA SOURCE METHODS (Delegate to DataFrameSource)
-     * ═══════════════════════════════════════════════════ */
-    /**
-     * Load from IndexedDB storage
-     */
-    fromStorage(key) {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Loading...', 'loading');
-            await this._source.fromStorage(key);
-        };
-        if (this._table) {
-            loadFn();
-        }
-        else {
-            this._pendingSource = loadFn;
-        }
-        return this;
-    }
-    /**
-     * Load from a FileUpload component
-     */
-    fromUpload(upload) {
-        this._uploadRef = upload;
-        this._pendingSource = async () => {
-            this._source.fromUpload(upload);
-        };
-        return this;
-    }
-    /**
-     * Load from inline data
-     */
-    fromData(data) {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Loading data...', 'loading');
-            this._source.fromData(data);
-        };
-        if (this._table) {
-            loadFn();
-        }
-        else {
-            this._pendingSource = loadFn;
-        }
-        return this;
-    }
-    /**
-     * Load from a URL
-     */
-    fromUrl(url) {
-        const loadFn = async () => {
-            this.state.loading = true;
-            this._updateStatus('Fetching...', 'loading');
-            await this._source.fromUrl(url);
-        };
-        if (this._table) {
-            loadFn();
-        }
-        else {
-            this._pendingSource = loadFn;
-        }
-        return this;
-    }
-    /**
-     * Enable inline file upload UI
-     */
-    withUpload(label = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls', icon = 'upload') {
-        this._inlineUpload = { label, accept, icon };
-        this._uploadButtonLabel = label;
-        this._uploadAccept = accept;
-        this._uploadButtonIcon = icon;
-        return this;
-    }
-    /* ═══════════════════════════════════════════════════
-     * UPLOAD UI CONFIGURATION
-     * ═══════════════════════════════════════════════════ */
-    uploadLabel(label) { this._uploadButtonLabel = label; return this; }
-    uploadIcon(icon) { this._uploadButtonIcon = icon; this._showUploadIcon = !!icon; return this; }
-    uploadVariant(variant) { this._uploadButtonVariant = variant; return this; }
-    uploadAccept(accept) { this._uploadAccept = accept; return this; }
-    uploadDescription(description) { this._uploadDescription = description; return this; }
-    showUploadIcon(show) { this._showUploadIcon = show; return this; }
-    /* ═══════════════════════════════════════════════════
-     * TABLE OPTIONS
-     * ═══════════════════════════════════════════════════ */
-    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; }
-    /* ═══════════════════════════════════════════════════
-     * ACCESSORS (Delegate to DataFrameSource)
-     * ═══════════════════════════════════════════════════ */
-    get df() { return this._source.df; }
-    get source() { return this._source; }
-    get table() { return this._table; }
-    get shape() { return this._source.shape; }
-    get columns() { return this._source.columns; }
-    toRows() { return this._source.df?.toRows() ?? []; }
-    toCSV(delimiter) { return this._source.df?.toCSV(delimiter) ?? ''; }
-    describe() { return this._source.df?.describe() ?? null; }
-    async save(key) {
-        return this._source.save(key);
-    }
-    /* ═══════════════════════════════════════════════════
-     * TRANSFORM API (Operate on underlying DataFrame)
-     * ═══════════════════════════════════════════════════ */
-    apply(fn) {
-        const df = this._source.df;
-        if (!df)
-            return this;
-        const result = fn(df);
-        this._source.fromData(result.toRows(), this.state.sourceName + ' (transformed)');
-        this._triggerCallback('transform', result, null, this);
-        return this;
-    }
-    filter(predicate) {
-        return this.apply(df => df.filter(predicate));
-    }
-    select(...cols) {
-        return this.apply(df => df.select(...cols));
-    }
-    sort(col, descending) {
-        return this.apply(df => df.sort(col, descending));
-    }
-    head(n = 5) {
-        return this.apply(df => df.head(n));
-    }
-    tail(n = 5) {
-        return this.apply(df => df.tail(n));
-    }
-    /* ═══════════════════════════════════════════════════
-     * CLEAR / RESET
-     * ═══════════════════════════════════════════════════ */
-    async clear() {
-        await this._source.clearStorage();
-        this._source.clear();
-        this.state.loaded = false;
-        this.state.sourceName = '';
-        this.state.rowCount = 0;
-        this.state.colCount = 0;
-        if (this._table) {
-            this._table.columns([]).rows([]);
-        }
-        this._hideDataView();
-        this._uploadRef?.clear();
-        return this;
-    }
-    /* ═══════════════════════════════════════════════════
-     * INTERNAL HANDLERS
-     * ═══════════════════════════════════════════════════ */
-    _handleLoadResult(result) {
-        if (result.error) {
-            this._handleError(result.error);
-            return;
-        }
-        this.state.loading = false;
-        this.state.loaded = true;
-        this.state.sourceName = result.sourceName;
-        this.state.rowCount = result.df?.height ?? 0;
-        this.state.colCount = result.df?.width ?? 0;
-        if (result.isMultiSheet && result.sheets) {
-            this._renderMultiSheet(result.sheets, result.sourceName);
-        }
-        else if (result.df) {
-            this._renderSingleSheet(result.df);
-        }
-        this._updateStatus('', 'success');
-        this._triggerCallback('load', result.df, null, this);
-    }
-    _handleError(message) {
-        this.state.loading = false;
-        this._updateStatus(message, 'error');
-        this._triggerCallback('error', message, null, this);
-    }
-    _handleProgress(loaded, total) {
-        const pct = total ? Math.round((loaded / total) * 100) : 0;
-        this._updateStatus(`Loading... ${pct}%`, 'loading');
-    }
-    _renderSingleSheet(df) {
-        if (this._table) {
-            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
-            this._table.columns(columnDefs).rows(df.toRows());
-        }
-        this._showDataView();
-    }
-    _renderMultiSheet(sheets, sourceName) {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper)
-            return;
-        // Clear existing tabs
-        const existingTabs = wrapper.querySelector('.jux-tabs');
-        if (existingTabs)
-            existingTabs.remove();
-        const sheetNames = Object.keys(sheets);
-        const sanitizeId = (name) => name.replace(/[^a-zA-Z0-9_-]/g, '_');
-        const tabDefs = sheetNames.map(name => ({
-            id: sanitizeId(name),
-            label: name,
-            content: ''
-        }));
-        this._tabs = new Tabs(`${this._id}-tabs`, {
-            tabs: tabDefs,
-            activeTab: sanitizeId(sheetNames[0])
-        });
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data');
-        if (dataContainer) {
-            dataContainer.style.display = '';
-            const tabsContainer = document.createElement('div');
-            tabsContainer.className = 'jux-dataframe-tabs';
-            dataContainer.appendChild(tabsContainer);
-            this._tabs.render(tabsContainer);
-        }
-        sheetNames.forEach(sheetName => {
-            const df = sheets[sheetName];
-            const safeId = sanitizeId(sheetName);
-            const table = new Table(`${this._id}-table-${safeId}`, this._tableOptions);
-            const columnDefs = df.columns.map(col => ({ key: col, label: col }));
-            table.columns(columnDefs).rows(df.toRows());
-            const settingsBtn = new Button(`${this._id}-settings-${safeId}`, {
-                label: '⚙️ Import Settings',
-                variant: 'ghost',
-                size: 'small'
-            });
-            settingsBtn.bind('click', () => this._showImportSettings());
-            this._tabs.addTabContent(safeId, [settingsBtn, table]);
-        });
-        this._showDataView();
-    }
-    /* ═══════════════════════════════════════════════════
-     * UI HELPERS
-     * ═══════════════════════════════════════════════════ */
-    _updateStatus(text, type) {
-        const el = document.getElementById(`${this._id}-status`);
-        if (!el)
-            return;
-        if (type === 'loading' || type === 'error') {
-            el.style.display = '';
-            el.className = `jux-dataframe-status jux-dataframe-status-${type}`;
-            el.textContent = text;
-        }
-        else {
-            el.style.display = 'none';
-        }
-    }
-    _showDataView() {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper)
-            return;
-        const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
-        if (uploadArea)
-            uploadArea.style.display = 'none';
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data');
-        if (dataContainer)
-            dataContainer.style.display = '';
-        this._updateSettingsGear();
-    }
-    _hideDataView() {
-        const wrapper = document.getElementById(this._id);
-        if (!wrapper)
-            return;
-        const uploadArea = wrapper.querySelector('.jux-dataframe-upload-area');
-        if (uploadArea)
-            uploadArea.style.display = '';
-        const dataContainer = wrapper.querySelector('.jux-dataframe-data');
-        if (dataContainer)
-            dataContainer.style.display = 'none';
-    }
-    _updateSettingsGear() {
-        const gear = document.getElementById(`${this._id}-settings-gear`);
-        if (!gear || !this._source.df)
-            return;
-        const isMalformed = this._source.detectMalformed();
-        if (isMalformed) {
-            gear.classList.add('jux-dataframe-gear-warning');
-            gear.title = `${this.state.sourceName} — May need reformatting`;
-        }
-        else {
-            gear.classList.remove('jux-dataframe-gear-warning');
-            gear.title = `${this.state.sourceName} — ${this._source.height} rows × ${this._source.width} cols`;
-        }
-    }
-    _showSettingsModal() {
-        this._importModal.showSettings({
-            fileName: this._source.rawFileData?.file?.name || this.state.sourceName,
-            fileSize: this._source.rawFileData?.file?.size,
-            rowCount: this._source.height,
-            colCount: this._source.width,
-            isMalformed: this._source.detectMalformed(),
-            hasRawFileData: !!this._source.rawFileData
-        }, {
-            onClear: async () => { await this.clear(); },
-            onAdjustImport: () => { this._showImportSettings(); }
-        });
-    }
-    _showImportSettings() {
-        const rawData = this._source.rawFileData;
-        if (!rawData)
-            return;
-        this._importModal.showImportSettings(rawData, {
-            onReimport: async (result, sourceName) => {
-                if (result instanceof DataFrame) {
-                    this._source.fromData(result.toRows(), sourceName);
-                }
-                else {
-                    // Multi-sheet - handled by source callbacks
-                }
-            },
-            onError: (message) => this._handleError(message),
-            onStatusUpdate: (text, type) => {
-                this.state.loading = type === 'loading';
-                this._updateStatus(text, type);
-            }
-        });
-    }
-    /* ═══════════════════════════════════════════════════
-     * RENDER
-     * ═══════════════════════════════════════════════════ */
-    update(_prop, _value) { }
-    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);
-        // Upload area
-        if (this._inlineUpload) {
-            const uploadArea = document.createElement('div');
-            uploadArea.className = 'jux-dataframe-upload-area';
-            const uploadOpts = {
-                label: this._uploadButtonLabel,
-                accept: this._uploadAccept,
-                variant: this._uploadButtonVariant,
-            };
-            if (this._showUploadIcon)
-                uploadOpts.icon = this._uploadButtonIcon;
-            const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
-            this._uploadRef = upload;
-            // Wire upload to source
-            upload.bind('change', async (files) => {
-                if (!files || files.length === 0) {
-                    await this.clear();
-                    return;
-                }
-                this.state.loading = true;
-                this._updateStatus(`Parsing ${files[0].name}...`, 'loading');
-                await this._source.fromFile(files[0]);
-            });
-            const uploadContainer = document.createElement('div');
-            uploadContainer.className = 'jux-dataframe-upload';
-            uploadArea.appendChild(uploadContainer);
-            const statusBar = document.createElement('div');
-            statusBar.className = 'jux-dataframe-status';
-            statusBar.id = `${this._id}-status`;
-            statusBar.style.display = 'none';
-            uploadArea.appendChild(statusBar);
-            if (this._uploadDescription) {
-                const descEl = document.createElement('div');
-                descEl.className = 'jux-dataframe-upload-description';
-                descEl.textContent = this._uploadDescription;
-                uploadArea.appendChild(descEl);
-            }
-            wrapper.appendChild(uploadArea);
-            container.appendChild(wrapper);
-            upload.render(uploadContainer);
-        }
-        else {
-            container.appendChild(wrapper);
-        }
-        // Data container
-        const dataContainer = document.createElement('div');
-        dataContainer.className = 'jux-dataframe-data';
-        dataContainer.style.display = 'none';
-        const toolbar = document.createElement('div');
-        toolbar.className = 'jux-dataframe-toolbar';
-        const settingsGear = document.createElement('button');
-        settingsGear.className = 'jux-dataframe-gear';
-        settingsGear.id = `${this._id}-settings-gear`;
-        settingsGear.type = 'button';
-        settingsGear.innerHTML = '⚙️';
-        settingsGear.title = 'Data Settings';
-        settingsGear.addEventListener('click', () => this._showSettingsModal());
-        toolbar.appendChild(settingsGear);
-        dataContainer.appendChild(toolbar);
-        wrapper.appendChild(dataContainer);
-        // Table
-        const tbl = new Table(`${this._id}-table`, this._tableOptions);
-        tbl.render(dataContainer);
-        this._table = tbl;
-        if (this._pendingSource) {
-            const fn = this._pendingSource;
-            this._pendingSource = null;
-            fn();
-        }
-        this._wireStandardEvents(wrapper);
-        return this;
-    }
-}
-export function dataframe(id, options = {}) {
-    return new DataFrameComponent(id, options);
-}

package/lib/components/datepicker.d.ts

@@ -1,40 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface DatePickerOptions {
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    min?: string;
-    max?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-interface DatePickerState extends BaseState {
-    value: string;
-    placeholder: string;
-    min?: string;
-    max?: string;
-}
-export declare class DatePicker extends BaseComponent<DatePickerState> {
-    constructor(id: string, options?: DatePickerOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    value(value: string): this;
-    placeholder(value: string): this;
-    min(value: string): this;
-    max(value: string): this;
-    getValue(): string;
-    setValue(value: string): this;
-    getDate(): Date | null;
-    validate(): boolean;
-    isValid(): boolean;
-    protected _validateValue(value: string): boolean | string;
-    protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function datepicker(id: string, options?: DatePickerOptions): DatePicker;
-export {};
-//# sourceMappingURL=datepicker.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;gBAC9C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAuBvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,IAAI,IAAI,GAAG,IAAI;IAMtB,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAuCzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAuB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA2DrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}