@llui/components 0.0.1

package/dist/components/file-upload.d.ts

@@ -0,0 +1,251 @@
+import type { Send } from '@llui/dom';
+/**
+ * File upload — input element + drag-and-drop zone. Tracks selected files,
+ * drag state, accept filters, validation errors. Multiple or single selection.
+ *
+ * `accept` can be either a raw HTML-accept string (`"image/*,.pdf"`) or a
+ * MIME-object (`{ 'image/*': ['.png', '.jpg'], 'application/pdf': [] }`).
+ * The object form is validated client-side per file; the raw string form
+ * only drives the browser's native picker filter.
+ *
+ * Files that fail validation (too large, too small, wrong type, over the
+ * count limit) flow into `rejectedFiles` with a list of `FileError` codes
+ * attached. The view can render them alongside accepted files.
+ */
+export type AcceptValue = string | Record<string, string[]>;
+export type FileError = {
+    code: 'TOO_LARGE';
+    max: number;
+} | {
+    code: 'TOO_SMALL';
+    min: number;
+} | {
+    code: 'INVALID_TYPE';
+} | {
+    code: 'TOO_MANY';
+    max: number;
+} | {
+    code: 'CUSTOM';
+    message: string;
+};
+export interface RejectedFile {
+    file: File;
+    errors: FileError[];
+}
+export interface FileUploadState {
+    files: File[];
+    rejectedFiles: RejectedFile[];
+    disabled: boolean;
+    multiple: boolean;
+    accept: AcceptValue;
+    maxFiles: number;
+    maxSize: number;
+    minFileSize: number;
+    required: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    dragging: boolean;
+}
+export type FileUploadMsg = {
+    type: 'setFiles';
+    files: File[];
+    customRejected?: RejectedFile[];
+} | {
+    type: 'addFiles';
+    files: File[];
+    customRejected?: RejectedFile[];
+} | {
+    type: 'removeFile';
+    index: number;
+} | {
+    type: 'removeRejected';
+    index: number;
+} | {
+    type: 'clear';
+} | {
+    type: 'clearRejected';
+} | {
+    type: 'dragEnter';
+} | {
+    type: 'dragLeave';
+} | {
+    type: 'drop';
+} | {
+    type: 'setInvalid';
+    invalid: boolean;
+};
+export interface FileUploadInit {
+    files?: File[];
+    disabled?: boolean;
+    multiple?: boolean;
+    accept?: AcceptValue;
+    maxFiles?: number;
+    maxSize?: number;
+    minFileSize?: number;
+    required?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+}
+export declare function init(opts?: FileUploadInit): FileUploadState;
+/**
+ * Serialize an AcceptValue into a comma-joined string suitable for the
+ * HTML `accept` attribute. Both MIME types and extensions are emitted.
+ */
+export declare function acceptToString(accept: AcceptValue): string;
+/**
+ * Check whether a file matches the accept configuration. Raw-string accept
+ * is passed through to the browser picker so we always return true here;
+ * MIME-object accept is validated by checking MIME type (with wildcards)
+ * and extension membership.
+ */
+export declare function fileMatchesAccept(file: File, accept: AcceptValue): boolean;
+/**
+ * Partition incoming files into accepted and rejected based on state's
+ * accept/size/count constraints. The current accepted-file count is used
+ * to enforce `maxFiles` — the caller is responsible for passing the
+ * post-combine accepted total when appending.
+ */
+export declare function validateFiles(incoming: File[], state: FileUploadState, existingAcceptedCount: number): {
+    accepted: File[];
+    rejected: RejectedFile[];
+};
+export declare function update(state: FileUploadState, msg: FileUploadMsg): [FileUploadState, never[]];
+export declare function totalSize(state: FileUploadState): number;
+/**
+ * Install a document-level dragover/drop blocker. Without this, dragging a
+ * file outside the dropzone causes the browser to navigate away from the
+ * page. Call from onMount and invoke the returned disposer on unmount.
+ */
+export declare function preventDocumentDrop(): () => void;
+export interface FileUploadItemParts<_S> {
+    item: {
+        'data-scope': 'file-upload';
+        'data-part': 'item';
+        'data-index': string;
+    };
+    itemName: {
+        'data-scope': 'file-upload';
+        'data-part': 'item-name';
+    };
+    itemSizeText: {
+        'data-scope': 'file-upload';
+        'data-part': 'item-size-text';
+    };
+    itemPreview: {
+        'data-scope': 'file-upload';
+        'data-part': 'item-preview';
+    };
+    removeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'file-upload';
+        'data-part': 'item-remove';
+        onClick: (e: MouseEvent) => void;
+    };
+    /** Zag-aligned alias for removeTrigger. Same wiring. */
+    itemDeleteTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'file-upload';
+        'data-part': 'item-delete-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface FileUploadParts<S> {
+    root: {
+        'data-scope': 'file-upload';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-dragging': (s: S) => '' | undefined;
+        'data-invalid': (s: S) => '' | undefined;
+        'data-readonly': (s: S) => '' | undefined;
+    };
+    dropzone: {
+        'data-scope': 'file-upload';
+        'data-part': 'dropzone';
+        'data-dragging': (s: S) => '' | undefined;
+        onClick: (e: MouseEvent) => void;
+        onDragEnter: (e: DragEvent) => void;
+        onDragOver: (e: DragEvent) => void;
+        onDragLeave: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+    };
+    trigger: {
+        type: 'button';
+        'data-scope': 'file-upload';
+        'data-part': 'trigger';
+        disabled: (s: S) => boolean;
+        onClick: (e: MouseEvent) => void;
+    };
+    hiddenInput: {
+        type: 'file';
+        tabIndex: -1;
+        style: string;
+        disabled: (s: S) => boolean;
+        multiple: (s: S) => boolean;
+        accept: (s: S) => string;
+        required: (s: S) => boolean;
+        'aria-invalid': (s: S) => 'true' | undefined;
+        capture?: string | boolean;
+        webkitdirectory?: '' | undefined;
+        'data-scope': 'file-upload';
+        'data-part': 'hidden-input';
+        id: string;
+        onChange: (e: Event) => void;
+    };
+    label: {
+        for: string;
+        'data-scope': 'file-upload';
+        'data-part': 'label';
+    };
+    clearTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'file-upload';
+        'data-part': 'clear-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    itemGroup: {
+        'data-scope': 'file-upload';
+        'data-part': 'item-group';
+    };
+    item: (index: number) => FileUploadItemParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    removeLabel?: string;
+    clearLabel?: string;
+    /**
+     * Hints the browser to use the device camera/microphone for capture. Only
+     * applies to mobile. Pass `'user'` for the front camera, `'environment'`
+     * for the back, or `true` to accept either.
+     */
+    capture?: 'user' | 'environment' | boolean;
+    /** Show a directory-picker instead of a file-picker (webkit only). */
+    directory?: boolean;
+    /**
+     * Per-file synchronous validator. Return a non-empty array of `FileError`
+     * codes to reject the file, or null/empty to accept. Runs in addition to
+     * the state-driven accept/size/count checks — its errors accumulate into
+     * `rejectedFiles` alongside the built-in errors.
+     */
+    validate?: (file: File) => FileError[] | null;
+    /**
+     * Optional transform pipeline. Runs before validation. Can return a
+     * Promise; onChange awaits it before dispatching. Use for image resizing,
+     * format conversion, etc.
+     */
+    transformFiles?: (files: File[]) => File[] | Promise<File[]>;
+}
+export declare function connect<S>(get: (s: S) => FileUploadState, send: Send<FileUploadMsg>, opts: ConnectOptions): FileUploadParts<S>;
+export declare const fileUpload: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    totalSize: typeof totalSize;
+    acceptToString: typeof acceptToString;
+    fileMatchesAccept: typeof fileMatchesAccept;
+    validateFiles: typeof validateFiles;
+    preventDocumentDrop: typeof preventDocumentDrop;
+};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload.d.ts.map

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

package/dist/components/file-upload.js

@@ -0,0 +1,324 @@
+export function init(opts = {}) {
+    return {
+        files: opts.files ?? [],
+        rejectedFiles: [],
+        disabled: opts.disabled ?? false,
+        multiple: opts.multiple ?? false,
+        accept: opts.accept ?? '',
+        maxFiles: opts.maxFiles ?? 0,
+        maxSize: opts.maxSize ?? 0,
+        minFileSize: opts.minFileSize ?? 0,
+        required: opts.required ?? false,
+        readOnly: opts.readOnly ?? false,
+        invalid: opts.invalid ?? false,
+        dragging: false,
+    };
+}
+/**
+ * Serialize an AcceptValue into a comma-joined string suitable for the
+ * HTML `accept` attribute. Both MIME types and extensions are emitted.
+ */
+export function acceptToString(accept) {
+    if (typeof accept === 'string')
+        return accept;
+    const parts = [];
+    for (const [mime, exts] of Object.entries(accept)) {
+        parts.push(mime);
+        for (const ext of exts)
+            parts.push(ext);
+    }
+    return parts.join(',');
+}
+/**
+ * Check whether a file matches the accept configuration. Raw-string accept
+ * is passed through to the browser picker so we always return true here;
+ * MIME-object accept is validated by checking MIME type (with wildcards)
+ * and extension membership.
+ */
+export function fileMatchesAccept(file, accept) {
+    if (typeof accept === 'string' || Object.keys(accept).length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    for (const [mime, exts] of Object.entries(accept)) {
+        if (matchMime(file.type, mime))
+            return true;
+        for (const ext of exts) {
+            if (name.endsWith(ext.toLowerCase()))
+                return true;
+        }
+    }
+    return false;
+}
+function matchMime(fileType, pattern) {
+    if (!fileType)
+        return false;
+    if (pattern === fileType)
+        return true;
+    // Wildcard support: "image/*" matches "image/png"
+    if (pattern.endsWith('/*')) {
+        const prefix = pattern.slice(0, -1); // "image/"
+        return fileType.startsWith(prefix);
+    }
+    return false;
+}
+/**
+ * Partition incoming files into accepted and rejected based on state's
+ * accept/size/count constraints. The current accepted-file count is used
+ * to enforce `maxFiles` — the caller is responsible for passing the
+ * post-combine accepted total when appending.
+ */
+export function validateFiles(incoming, state, existingAcceptedCount) {
+    const accepted = [];
+    const rejected = [];
+    let count = existingAcceptedCount;
+    for (const f of incoming) {
+        const errors = [];
+        if (state.maxSize > 0 && f.size > state.maxSize) {
+            errors.push({ code: 'TOO_LARGE', max: state.maxSize });
+        }
+        if (state.minFileSize > 0 && f.size < state.minFileSize) {
+            errors.push({ code: 'TOO_SMALL', min: state.minFileSize });
+        }
+        if (!fileMatchesAccept(f, state.accept)) {
+            errors.push({ code: 'INVALID_TYPE' });
+        }
+        if (state.maxFiles > 0 && count >= state.maxFiles) {
+            errors.push({ code: 'TOO_MANY', max: state.maxFiles });
+        }
+        if (errors.length > 0) {
+            rejected.push({ file: f, errors });
+        }
+        else {
+            accepted.push(f);
+            count++;
+        }
+    }
+    return { accepted, rejected };
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'clear' && msg.type !== 'clearRejected') {
+        return [state, []];
+    }
+    if (state.readOnly && (msg.type === 'setFiles' || msg.type === 'addFiles')) {
+        return [state, []];
+    }
+    switch (msg.type) {
+        case 'setFiles': {
+            const { accepted, rejected } = validateFiles(msg.files, state, 0);
+            const merged = msg.customRejected ? [...rejected, ...msg.customRejected] : rejected;
+            return [{ ...state, files: accepted, rejectedFiles: merged }, []];
+        }
+        case 'addFiles': {
+            const base = state.multiple ? state.files : [];
+            const { accepted, rejected } = validateFiles(msg.files, state, base.length);
+            const combined = state.multiple ? [...base, ...accepted] : accepted;
+            const merged = msg.customRejected ? [...rejected, ...msg.customRejected] : rejected;
+            return [{ ...state, files: combined, rejectedFiles: merged }, []];
+        }
+        case 'removeFile':
+            return [{ ...state, files: state.files.filter((_, i) => i !== msg.index) }, []];
+        case 'removeRejected':
+            return [
+                { ...state, rejectedFiles: state.rejectedFiles.filter((_, i) => i !== msg.index) },
+                [],
+            ];
+        case 'clear':
+            return [{ ...state, files: [], rejectedFiles: [] }, []];
+        case 'clearRejected':
+            return [{ ...state, rejectedFiles: [] }, []];
+        case 'setInvalid':
+            return [{ ...state, invalid: msg.invalid }, []];
+        case 'dragEnter':
+            return [{ ...state, dragging: true }, []];
+        case 'dragLeave':
+        case 'drop':
+            return [{ ...state, dragging: false }, []];
+    }
+}
+export function totalSize(state) {
+    let total = 0;
+    for (const f of state.files)
+        total += f.size;
+    return total;
+}
+/**
+ * Install a document-level dragover/drop blocker. Without this, dragging a
+ * file outside the dropzone causes the browser to navigate away from the
+ * page. Call from onMount and invoke the returned disposer on unmount.
+ */
+export function preventDocumentDrop() {
+    const prevent = (e) => {
+        // Only prevent default if the drop is NOT on an element inside a
+        // file-upload dropzone — let those handle their own drops.
+        const target = e.target;
+        if (target?.closest('[data-scope="file-upload"][data-part="dropzone"]'))
+            return;
+        e.preventDefault();
+    };
+    document.addEventListener('dragover', prevent);
+    document.addEventListener('drop', prevent);
+    return () => {
+        document.removeEventListener('dragover', prevent);
+        document.removeEventListener('drop', prevent);
+    };
+}
+const HIDDEN_STYLE = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;';
+export function connect(get, send, opts) {
+    const inputId = `${opts.id}:input`;
+    const removeLabel = opts.removeLabel ?? 'Remove file';
+    const clearLabel = opts.clearLabel ?? 'Clear files';
+    const runPipeline = async (raw) => {
+        let files = raw;
+        if (opts.transformFiles)
+            files = await opts.transformFiles(files);
+        const customRejected = [];
+        if (opts.validate) {
+            const passed = [];
+            for (const f of files) {
+                const errors = opts.validate(f);
+                if (errors && errors.length > 0)
+                    customRejected.push({ file: f, errors });
+                else
+                    passed.push(f);
+            }
+            files = passed;
+        }
+        return { files, customRejected };
+    };
+    const dispatchAdd = (raw) => {
+        if (!opts.transformFiles && !opts.validate) {
+            send({ type: 'addFiles', files: raw });
+            return;
+        }
+        // Fire-and-forget — transforms may be async.
+        void runPipeline(raw).then(({ files, customRejected }) => {
+            send({ type: 'addFiles', files, customRejected });
+        });
+    };
+    const openPicker = (e) => {
+        const target = e.target;
+        if (target.getAttribute('data-part') === 'hidden-input')
+            return;
+        const root = e.currentTarget.closest('[data-scope="file-upload"][data-part="root"]');
+        const input = root?.querySelector('[data-scope="file-upload"][data-part="hidden-input"]');
+        input?.click();
+    };
+    return {
+        root: {
+            'data-scope': 'file-upload',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-dragging': (s) => (get(s).dragging ? '' : undefined),
+            'data-invalid': (s) => (get(s).invalid ? '' : undefined),
+            'data-readonly': (s) => (get(s).readOnly ? '' : undefined),
+        },
+        dropzone: {
+            'data-scope': 'file-upload',
+            'data-part': 'dropzone',
+            'data-dragging': (s) => (get(s).dragging ? '' : undefined),
+            onClick: openPicker,
+            onDragEnter: (e) => {
+                e.preventDefault();
+                send({ type: 'dragEnter' });
+            },
+            onDragOver: (e) => e.preventDefault(),
+            onDragLeave: (e) => {
+                e.preventDefault();
+                send({ type: 'dragLeave' });
+            },
+            onDrop: (e) => {
+                e.preventDefault();
+                const files = Array.from(e.dataTransfer?.files ?? []);
+                send({ type: 'drop' });
+                dispatchAdd(files);
+            },
+        },
+        trigger: {
+            type: 'button',
+            'data-scope': 'file-upload',
+            'data-part': 'trigger',
+            disabled: (s) => get(s).disabled,
+            onClick: openPicker,
+        },
+        hiddenInput: {
+            type: 'file',
+            tabIndex: -1,
+            style: HIDDEN_STYLE,
+            disabled: (s) => get(s).disabled,
+            multiple: (s) => get(s).multiple,
+            accept: (s) => acceptToString(get(s).accept),
+            required: (s) => get(s).required,
+            'aria-invalid': (s) => (get(s).invalid ? 'true' : undefined),
+            ...(opts.capture !== undefined ? { capture: opts.capture } : {}),
+            ...(opts.directory === true ? { webkitdirectory: '' } : {}),
+            'data-scope': 'file-upload',
+            'data-part': 'hidden-input',
+            id: inputId,
+            onChange: (e) => {
+                const input = e.target;
+                const files = input.files ? Array.from(input.files) : [];
+                dispatchAdd(files);
+                input.value = '';
+            },
+        },
+        label: {
+            for: inputId,
+            'data-scope': 'file-upload',
+            'data-part': 'label',
+        },
+        clearTrigger: {
+            type: 'button',
+            'aria-label': clearLabel,
+            'data-scope': 'file-upload',
+            'data-part': 'clear-trigger',
+            onClick: () => send({ type: 'clear' }),
+        },
+        itemGroup: {
+            'data-scope': 'file-upload',
+            'data-part': 'item-group',
+        },
+        item: (index) => ({
+            item: {
+                'data-scope': 'file-upload',
+                'data-part': 'item',
+                'data-index': String(index),
+            },
+            itemName: {
+                'data-scope': 'file-upload',
+                'data-part': 'item-name',
+            },
+            itemSizeText: {
+                'data-scope': 'file-upload',
+                'data-part': 'item-size-text',
+            },
+            itemPreview: {
+                'data-scope': 'file-upload',
+                'data-part': 'item-preview',
+            },
+            removeTrigger: {
+                type: 'button',
+                'aria-label': removeLabel,
+                'data-scope': 'file-upload',
+                'data-part': 'item-remove',
+                onClick: () => send({ type: 'removeFile', index }),
+            },
+            itemDeleteTrigger: {
+                type: 'button',
+                'aria-label': removeLabel,
+                'data-scope': 'file-upload',
+                'data-part': 'item-delete-trigger',
+                onClick: () => send({ type: 'removeFile', index }),
+            },
+        }),
+    };
+}
+export const fileUpload = {
+    init,
+    update,
+    connect,
+    totalSize,
+    acceptToString,
+    fileMatchesAccept,
+    validateFiles,
+    preventDocumentDrop,
+};