juxscript 1.1.240 → 1.1.244

package/lib/components/fileupload.js

@@ -1,351 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js';
-import { TabularDriver } from '../storage/TabularDriver.js';
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change', 'filesSelected', 'clear', 'stored'];
-export class FileUpload extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id),
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            files: [],
-            accept: options.accept ?? '',
-            multiple: options.multiple ?? false,
-            icon: options.icon ?? 'upload',
-            variant: options.variant ?? 'outline',
-            showFileList: options.showFileList ?? true,
-            maxFiles: options.maxFiles ?? 10,
-            maxFileSize: options.maxFileSize ?? 10,
-        });
-        this._fileListElement = null;
-        this._storage = null;
-        /** IndexedDB caching */
-        this._cacheEnabled = false;
-        this._cacheDriver = null;
-        this._cacheDbName = 'jux-dataframes';
-        this._cacheStoreName = 'frames';
-        this._cacheKeyPrefix = '';
-        this._storageKeys = new Map();
-        this._lastStorageKey = null;
-        this._cachedDataFrames = new Map();
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-        this._storage = options.storage ?? null;
-        this._metadata = options.metadata;
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    accept(value) {
-        this.state.accept = value;
-        return this;
-    }
-    multiple(value) {
-        this.state.multiple = value;
-        return this;
-    }
-    icon(value) {
-        this.state.icon = value;
-        return this;
-    }
-    variant(value) {
-        this.state.variant = value;
-        return this;
-    }
-    storage(store, metadata) {
-        this._storage = store;
-        this._metadata = metadata;
-        return this;
-    }
-    /**
-     * Enable IndexedDB caching of uploaded files.
-     * After upload, the file is parsed and stored as a DataFrame.
-     * The storage key is available via .storageKey and a 'stored' event fires.
-     *
-     * Usage:
-     *   jux.fileUpload('my-upload', { accept: '.csv' })
-     *       .cache()                          // enable with defaults
-     *       .cache({ prefix: 'raw/' })        // key prefix
-     *       .cache({ dbName: 'my-db' })       // custom DB
-     *
-     *   upload.bind('stored', (key, df) => {
-     *       await data().fromStorage(key).into(myTable);
-     *   });
-     */
-    cache(options = {}) {
-        this._cacheEnabled = options.enabled ?? true;
-        if (options.dbName)
-            this._cacheDbName = options.dbName;
-        if (options.storeName)
-            this._cacheStoreName = options.storeName;
-        if (options.prefix)
-            this._cacheKeyPrefix = options.prefix;
-        if (this._cacheEnabled && !this._cacheDriver) {
-            this._cacheDriver = new TabularDriver(this._cacheDbName, this._cacheStoreName);
-        }
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * STORAGE KEY ACCESSORS
-     * ═════════════════════════════════════════════════════════════════ */
-    /** The IndexedDB key for the most recently cached upload, or null. */
-    get storageKey() {
-        return this._lastStorageKey;
-    }
-    /** Map of filename → storage key for all cached files this session. */
-    get storageKeys() {
-        return this._storageKeys;
-    }
-    /** Get the storage key for a specific filename. */
-    storageKeyFor(filename) {
-        return this._storageKeys.get(filename) ?? null;
-    }
-    /** The cached DataFrame for the most recent upload (after 'stored' fires). */
-    get cachedDf() {
-        if (!this._lastStorageKey)
-            return null;
-        return this._cachedDataFrames.get(this._lastStorageKey) ?? null;
-    }
-    clear() {
-        this.state.files = [];
-        if (this._inputElement) {
-            this._inputElement.value = '';
-        }
-        if (this._fileListElement) {
-            this._fileListElement.innerHTML = '';
-        }
-        this._lastStorageKey = null;
-        this._triggerCallback('clear', null, null, this);
-        return this;
-    }
-    clearFiles() {
-        this.state.files = [];
-        this._updateFileList();
-        this._triggerCallback('change', [], null, this);
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-    getValue() {
-        return this.state.files;
-    }
-    setValue(files) {
-        this.state.files = files;
-        this._updateFileList();
-        return this;
-    }
-    validate() {
-        this._hasBeenValidated = true;
-        const files = this.getValue();
-        const result = this._validateValue(files);
-        if (result === true) {
-            this._clearError();
-            return true;
-        }
-        else {
-            this._showError(result);
-            return false;
-        }
-    }
-    isValid() {
-        const files = this.getValue();
-        return this._validateValue(files) === true;
-    }
-    _validateValue(files) {
-        const { required } = this.state;
-        if (required && files.length === 0) {
-            return 'Please select at least one file';
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(files);
-            if (result !== true) {
-                return result || 'Invalid files';
-            }
-        }
-        return true;
-    }
-    _updateFileList() {
-        if (!this._fileListElement)
-            return;
-        this._fileListElement.innerHTML = '';
-        if (this.state.files.length === 0) {
-            return;
-        }
-        this.state.files.forEach((file, index) => {
-            const fileItem = document.createElement('div');
-            fileItem.className = 'jux-fileupload-item';
-            fileItem.innerHTML = `
-                <span class="jux-fileupload-filename">${file.name}</span>
-                <span class="jux-fileupload-filesize">${this._formatFileSize(file.size)}</span>
-                <button class="jux-fileupload-remove" data-index="${index}">×</button>
-            `;
-            const removeBtn = fileItem.querySelector('.jux-fileupload-remove');
-            removeBtn?.addEventListener('click', () => {
-                this.state.files = this.state.files.filter((_, i) => i !== index);
-                this._updateFileList();
-                this._triggerCallback('change', this.state.files, null, this);
-            });
-            this._fileListElement.appendChild(fileItem);
-        });
-    }
-    _formatFileSize(bytes) {
-        if (bytes === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * INTERNAL — CACHE FILE TO INDEXEDDB
-     * ═════════════════════════════════════════════════════════════════ */
-    async _cacheFile(file) {
-        if (!this._cacheEnabled || !this._cacheDriver)
-            return;
-        try {
-            const key = this._cacheKeyPrefix + file.name;
-            let df;
-            const isExcel = /\.(xlsx?|xls)$/i.test(file.name);
-            if (isExcel) {
-                const sheets = await this._cacheDriver.streamFileMultiSheet(file, {});
-                const sheetNames = Object.keys(sheets);
-                if (sheetNames.length === 0)
-                    return;
-                df = sheets[sheetNames[0]];
-            }
-            else {
-                const text = await file.text();
-                df = this._cacheDriver.parseCSV(text, {
-                    autoDetectDelimiter: true,
-                    hasHeader: true
-                });
-            }
-            await this._cacheDriver.store(key, df, {
-                source: file.name,
-                size: file.size,
-                type: file.type,
-                cachedAt: new Date().toISOString(),
-                ...this._metadata
-            });
-            this._lastStorageKey = key;
-            this._storageKeys.set(file.name, key);
-            this._cachedDataFrames.set(key, df);
-            this._triggerCallback('stored', key, null, this);
-        }
-        catch (err) {
-            console.warn(`[FileUpload] Failed to cache ${file.name}:`, err.message);
-        }
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        // No reactive updates needed
-    }
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { label, accept, multiple, icon, variant, showFileList, style, class: className } = this.state;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-fileupload';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        const fileInput = document.createElement('input');
-        fileInput.type = 'file';
-        fileInput.accept = accept;
-        fileInput.multiple = multiple;
-        fileInput.style.display = 'none';
-        fileInput.id = `${this._id}-input`;
-        this._inputElement = fileInput;
-        const btn = document.createElement('button');
-        btn.className = `jux-fileupload-button jux-button-${variant}`;
-        btn.type = 'button';
-        if (icon) {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-fileupload-icon';
-            iconEl.appendChild(renderIcon(icon));
-            btn.appendChild(iconEl);
-        }
-        const labelSpan = document.createElement('span');
-        labelSpan.textContent = label;
-        btn.appendChild(labelSpan);
-        const buttonContainer = document.createElement('div');
-        buttonContainer.className = 'jux-fileupload-button-container';
-        buttonContainer.appendChild(fileInput);
-        buttonContainer.appendChild(btn);
-        wrapper.appendChild(buttonContainer);
-        if (showFileList) {
-            const fileList = document.createElement('div');
-            fileList.className = 'jux-fileupload-filelist';
-            this._fileListElement = fileList;
-            wrapper.appendChild(fileList);
-        }
-        wrapper.appendChild(this._renderError());
-        btn.addEventListener('click', () => fileInput.click());
-        // Wire up file input change — with caching
-        fileInput.addEventListener('change', async (e) => {
-            const files = Array.from(fileInput.files || []);
-            this.state.files = files;
-            this._updateFileList();
-            this._clearError();
-            this._triggerCallback('change', files, e, this);
-            this._triggerCallback('filesSelected', files, e, this);
-            if (this._storage && files.length > 0) {
-                this._storage.storeAll(files, this._metadata).then((stored) => {
-                    this._triggerCallback('stored', stored, e, this);
-                }).catch((err) => {
-                    console.error('[FileUpload] Storage error:', err);
-                });
-            }
-            // Cache to IndexedDB as parsed DataFrames
-            if (this._cacheEnabled && files.length > 0) {
-                for (const file of files) {
-                    await this._cacheFile(file);
-                }
-            }
-        });
-        this._wireStandardEvents(wrapper);
-        fileInput.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                this.validate();
-            }
-        });
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v) => String(v));
-            labelSync.stateObj.subscribe((val) => {
-                this.label(transform(val));
-            });
-        }
-        container.appendChild(wrapper);
-        requestAnimationFrame(() => {
-            if (window.lucide) {
-                window.lucide.createIcons();
-            }
-        });
-        return this;
-    }
-}
-export function fileupload(id, options = {}) {
-    return new FileUpload(id, options);
-}