@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-upload/x-upload.js

@@ -135,6 +135,19 @@ export class XUpload {
      * <x-upload progress={{ strokeWidth: 2 }}></x-upload>
      */
     progress;
+    /**
+     * Maximum file size in bytes
+     * @example
+     * <x-upload maxFileSize={1024 * 1024 * 10}></x-upload>
+     */
+    maxFileSize;
+    /**
+     * Hook function which will be executed before uploading.
+     * Returning false or a Promise which then is rejected will stop uploading.
+     * @example
+     * <x-upload beforeUpload={(file) => file.size < 1024 * 1024}></x-upload>
+     */
+    beforeUpload;
     /**
      * Custom class names for semantic DOM
      * @example
@@ -178,6 +191,12 @@ export class XUpload {
      * <x-upload onXDrop={(ev) => console.log(ev.detail)}></x-upload>
      */
     xDrop;
+    /**
+     * Callback when validation fails (maxCount, maxFileSize, beforeUpload)
+     * @example
+     * <x-upload onXError={(ev) => message.error(ev.detail.message)}></x-upload>
+     */
+    xError;
     // ==================== State ====================
     /**
      * Internal file list for uncontrolled mode.
@@ -205,12 +224,87 @@ export class XUpload {
      * 2. If not, check if `defaultFileList` is provided.
      * 3. Initialize `internalFileList` with the found list or an empty array.
      */
+    normalizeFileList(value) {
+        if (!value)
+            return [];
+        // If it's a string (e.g. a single URL)
+        if (typeof value === 'string') {
+            if (value.trim() === '')
+                return [];
+            return [this.createFileFromUrl(value)];
+        }
+        // If it's an array
+        if (Array.isArray(value)) {
+            return value.map((item, index) => {
+                if (typeof item === 'string') {
+                    return this.createFileFromUrl(item, index);
+                }
+                if (item && typeof item === 'object') {
+                    // If it's already an UploadFile structure, return it
+                    if ('uid' in item && 'name' in item) {
+                        return item;
+                    }
+                    // If it has a url or path property
+                    const url = item.url || item.path || item.thumbUrl || '';
+                    const name = item.name || item.fileName || (typeof url === 'string' ? url.substring(url.lastIndexOf('/') + 1) : '') || `file-${index}`;
+                    return {
+                        uid: item.uid || `upload-normalized-${index}-${Date.now()}`,
+                        name: name,
+                        fileName: name,
+                        status: item.status || 'done',
+                        url: url,
+                        thumbUrl: item.thumbUrl || url,
+                        size: item.size || 0,
+                        type: item.type || '',
+                    };
+                }
+                return item;
+            }).filter(Boolean);
+        }
+        // If it's a single object (not an array)
+        if (typeof value === 'object') {
+            if ('uid' in value && 'name' in value) {
+                return [value];
+            }
+            const url = value.url || value.path || value.thumbUrl || '';
+            const name = value.name || value.fileName || (typeof url === 'string' ? url.substring(url.lastIndexOf('/') + 1) : '') || 'file';
+            return [{
+                    uid: value.uid || `upload-normalized-0-${Date.now()}`,
+                    name: name,
+                    fileName: name,
+                    status: value.status || 'done',
+                    url: url,
+                    thumbUrl: value.thumbUrl || url,
+                    size: value.size || 0,
+                    type: value.type || '',
+                }];
+        }
+        return [];
+    }
+    createFileFromUrl(url, index = 0) {
+        let cleanUrl = url;
+        try {
+            cleanUrl = new URL(url).pathname;
+        }
+        catch (e) {
+            const qIndex = url.indexOf('?');
+            if (qIndex !== -1) {
+                cleanUrl = url.substring(0, qIndex);
+            }
+        }
+        const name = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1) || 'file';
+        return {
+            uid: `upload-url-${index}-${Date.now()}`,
+            name: name,
+            fileName: name,
+            status: 'done',
+            url: url,
+            thumbUrl: url,
+            percent: 100,
+        };
+    }
     componentWillLoad() {
-        this.internalFileList = this.fileList?.length
-            ? [...this.fileList]
-            : this.defaultFileList?.length
-                ? [...this.defaultFileList]
-                : [];
+        this.internalFileList = this.normalizeFileList(this.fileList || this.defaultFileList);
     }
     /**
      * Abort pending uploads on disconnect.
@@ -231,9 +325,7 @@ export class XUpload {
      * @param newValue - New file list.
      */
     handleFileListChange(newValue) {
-        if (newValue) {
-            this.internalFileList = [...newValue];
-        }
+        this.internalFileList = this.normalizeFileList(newValue);
     }
     // ==================== Public Methods ====================
     /**
@@ -279,6 +371,10 @@ export class XUpload {
     handleClick = () => {
         if (this.disabled || !this.openFileDialogOnClick)
             return;
+        const effectiveMaxCount = this.maxCount !== undefined ? this.maxCount : (this.multiple ? undefined : 1);
+        if (effectiveMaxCount !== undefined && this.internalFileList.length >= effectiveMaxCount) {
+            return;
+        }
         this.fileInputRef?.click();
     };
     /**
@@ -299,31 +395,107 @@ export class XUpload {
      *
      * Flow:
      * 1. Filter files based on `maxCount`.
-     * 2. Map `File` objects to `UploadFile` structure with initial 'uploading' status.
-     * 3. Update `internalFileList` (replace if maxCount is 1, otherwise append).
-     * 4. Emit `xChange` event for each new file.
-     * 5. Initiate upload if `action` is provided, otherwise mark as 'done'.
+     * 2. Validate files with `maxFileSize` and `beforeUpload` hook.
+     * 3. Map `File` objects to `UploadFile` structure.
+     * 4. Update `internalFileList` (replace if maxCount is 1, otherwise append).
+     * 5. Emit `xChange` event for each new file.
      * @param files - Array of File objects to process.
      */
-    processFiles(files) {
+    async processFiles(files) {
+        const effectiveMaxCount = this.maxCount !== undefined ? this.maxCount : (this.multiple ? undefined : 1);
         // Check maxCount
-        if (this.maxCount !== undefined) {
-            const remainingSlots = this.maxCount - this.internalFileList.length;
-            if (remainingSlots <= 0)
+        if (effectiveMaxCount !== undefined) {
+            const remainingSlots = effectiveMaxCount - this.internalFileList.length;
+            if (remainingSlots <= 0) {
+                this.xError.emit({
+                    type: 'maxCount',
+                    message: `Maximum count of ${effectiveMaxCount} files reached.`,
+                });
                 return;
-            files = files.slice(0, remainingSlots);
+            }
+            if (files.length > remainingSlots) {
+                const rejectedFiles = files.slice(remainingSlots);
+                rejectedFiles.forEach(file => {
+                    this.xError.emit({
+                        file,
+                        type: 'maxCount',
+                        message: `File ${file.name} was rejected because maxCount (${effectiveMaxCount}) was reached.`,
+                    });
+                });
+                files = files.slice(0, remainingSlots);
+            }
+        }
+        const validFiles = [];
+        for (const file of files) {
+            // Check accept
+            if (!this.isAcceptedFile(file)) {
+                this.xError.emit({
+                    file,
+                    type: 'accept',
+                    message: `File ${file.name} is not an accepted file type (${this.accept}).`,
+                });
+                continue;
+            }
+            // Check maxFileSize
+            if (this.maxFileSize !== undefined && file.size > this.maxFileSize) {
+                this.xError.emit({
+                    file,
+                    type: 'maxFileSize',
+                    message: `File ${file.name} exceeds the maximum file size of ${this.maxFileSize} bytes.`,
+                });
+                continue;
+            }
+            // Check beforeUpload hook
+            if (this.beforeUpload) {
+                try {
+                    const result = await Promise.resolve(this.beforeUpload(file, files));
+                    if (result === false) {
+                        this.xError.emit({
+                            file,
+                            type: 'beforeUpload',
+                            message: `Upload for ${file.name} was rejected by beforeUpload hook.`,
+                        });
+                        continue;
+                    }
+                }
+                catch (err) {
+                    this.xError.emit({
+                        file,
+                        type: 'beforeUpload',
+                        message: `beforeUpload hook failed for ${file.name}`,
+                        error: err,
+                    });
+                    continue;
+                }
+            }
+            validFiles.push(file);
         }
-        const uploadFiles = files.map(file => ({
-            uid: this.generateUid(),
-            name: file.name,
-            fileName: file.name,
-            size: file.size,
-            type: file.type,
-            lastModified: file.lastModified,
-            originFileObj: file,
-            status: 'uploading',
-            percent: 0,
-        }));
+        if (validFiles.length === 0)
+            return;
+        const uploadFiles = validFiles.map(file => {
+            const isImg = file.type ? file.type.startsWith('image/') : ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.svg'].some(ext => file.name.toLowerCase().endsWith(ext));
+            let thumbUrl = undefined;
+            if (isImg) {
+                try {
+                    thumbUrl = URL.createObjectURL(file);
+                }
+                catch (e) {
+                    console.error('Failed to create object URL for file preview:', e);
+                }
+            }
+            return {
+                uid: this.generateUid(),
+                name: file.name,
+                fileName: file.name,
+                size: file.size,
+                type: file.type,
+                lastModified: file.lastModified,
+                originFileObj: file,
+                status: 'uploading',
+                percent: 0,
+                thumbUrl,
+            };
+        });
         // Handle maxCount === 1 case (replace mode)
         if (this.maxCount === 1 && uploadFiles.length > 0) {
             this.internalFileList = [uploadFiles[0]];
@@ -333,17 +505,22 @@ export class XUpload {
         }
         // Emit change for each file
         uploadFiles.forEach(file => {
-            this.xChange.emit({
-                file,
-                fileList: this.internalFileList,
-            });
             // Start upload if action is provided
             if (this.action) {
+                this.xChange.emit({
+                    file,
+                    fileList: this.internalFileList,
+                });
                 this.uploadFile(file);
             }
             else {
                 // Mark as done if no action (manual upload mode)
                 this.updateFileStatus(file.uid, 'done', 100);
+                const updatedFile = this.internalFileList.find(f => f.uid === file.uid);
+                this.xChange.emit({
+                    file: updatedFile || { ...file, status: 'done', percent: 100 },
+                    fileList: this.internalFileList,
+                });
             }
         });
     }
@@ -474,6 +651,12 @@ export class XUpload {
             xhr.abort();
             this.uploadingXhrs.delete(file.uid);
         }
+        if (file.thumbUrl && file.thumbUrl.startsWith('blob:')) {
+            try {
+                URL.revokeObjectURL(file.thumbUrl);
+            }
+            catch (ex) { }
+        }
         const removedFile = { ...file, status: 'removed' };
         const newFileList = this.internalFileList.filter(f => f.uid !== file.uid);
         this.internalFileList = newFileList;
@@ -493,7 +676,13 @@ export class XUpload {
      */
     handlePreview = (file, e) => {
         e.stopPropagation();
-        this.xPreview.emit({ file });
+        const previewEvent = this.xPreview.emit({ file });
+        if (!previewEvent.defaultPrevented) {
+            const url = file.url || file.thumbUrl || file.preview;
+            if (url) {
+                window.open(url, '_blank');
+            }
+        }
     };
     /**
      * Handle file download click.
@@ -547,6 +736,14 @@ export class XUpload {
             return;
         const files = e.dataTransfer?.files;
         if (files && files.length > 0) {
+            const effectiveMaxCount = this.maxCount !== undefined ? this.maxCount : (this.multiple ? undefined : 1);
+            if (effectiveMaxCount !== undefined && this.internalFileList.length >= effectiveMaxCount) {
+                this.xError.emit({
+                    type: 'maxCount',
+                    message: `Maximum count of ${effectiveMaxCount} files reached.`,
+                });
+                return;
+            }
             this.xDrop.emit({ files, event: e });
             this.processFiles(Array.from(files));
         }
@@ -570,6 +767,31 @@ export class XUpload {
             showDownloadIcon: this.showUploadList.showDownloadIcon ?? false,
         };
     }
+    /**
+     * Check if a file is accepted based on the 'accept' prop.
+     * @param file - File object.
+     * @returns boolean.
+     */
+    isAcceptedFile(file) {
+        if (!this.accept)
+            return true;
+        const acceptedTypes = this.accept.split(',').map(type => type.trim().toLowerCase());
+        const fileName = file.name.toLowerCase();
+        const mimeType = file.type.toLowerCase();
+        return acceptedTypes.some(type => {
+            if (type.startsWith('.')) {
+                // Check extension
+                return fileName.endsWith(type);
+            }
+            if (type.endsWith('/*')) {
+                // Check MIME type group (e.g. image/*)
+                const baseMimeType = type.replace('/*', '');
+                return mimeType.startsWith(baseMimeType);
+            }
+            // Check exact MIME type
+            return mimeType === type;
+        });
+    }
     /**
      * Check if a file is an image based on type or extension.
      * @param file - File entry.
@@ -613,7 +835,8 @@ export class XUpload {
      */
     renderUploadButton() {
         const isPictureCard = this.listType === 'picture-card' || this.listType === 'picture-circle';
-        const hideButton = isPictureCard && this.maxCount !== undefined && this.internalFileList.length >= this.maxCount;
+        const effectiveMaxCount = this.maxCount !== undefined ? this.maxCount : (this.multiple ? undefined : 1);
+        const hideButton = effectiveMaxCount !== undefined && this.internalFileList.length >= effectiveMaxCount;
         if (hideButton)
             return null;
         return (h("div", { class: {
@@ -674,7 +897,7 @@ export class XUpload {
                     e.preventDefault();
                     this.handlePreview(file, e);
                 }
-            } }, file.name)), file.status === 'uploading' && (h("span", { class: "x-upload-list-item-progress" }, h("span", { class: "x-upload-icon x-upload-icon-loading" }, this.renderIcon('loading')), !isPictureCard && file.percent !== undefined && (h("span", { class: "x-upload-list-item-percent" }, Math.round(file.percent), "%")))), h("span", { class: "x-upload-list-item-actions" }, listOptions.showPreviewIcon && file.status === 'done' && (file.url || file.thumbUrl) && (h("button", { type: "button", title: "Preview", class: "x-upload-list-item-action", onClick: e => this.handlePreview(file, e) }, this.renderIcon('eye'))), listOptions.showDownloadIcon && file.status === 'done' && file.url && (h("button", { type: "button", title: "Download", class: "x-upload-list-item-action", onClick: e => this.handleDownload(file, e) }, this.renderIcon('download'))), listOptions.showRemoveIcon && (h("button", { type: "button", title: "Remove", class: "x-upload-list-item-action x-upload-list-item-action-remove", onClick: e => this.handleRemove(file, e) }, this.renderIcon('delete')))))), file.status === 'uploading' && file.percent !== undefined && (h("div", { class: "x-upload-list-item-progress-bar" }, h("div", { class: "x-upload-list-item-progress-bar-inner", style: { width: `${file.percent}%` } })))));
+            } }, file.name)), file.status === 'uploading' && this.progress?.showInfo !== false && (h("span", { class: "x-upload-list-item-progress" }, h("span", { class: "x-upload-icon x-upload-icon-loading" }, this.renderIcon('loading')), !isPictureCard && file.percent !== undefined && h("span", { class: "x-upload-list-item-percent" }, Math.round(file.percent), "%"))), h("span", { class: "x-upload-list-item-actions" }, listOptions.showPreviewIcon && file.status === 'done' && (file.url || file.thumbUrl) && (h("button", { type: "button", title: "Preview", class: "x-upload-list-item-action", onClick: e => this.handlePreview(file, e) }, this.renderIcon('eye'))), listOptions.showDownloadIcon && file.status === 'done' && file.url && (h("button", { type: "button", title: "Download", class: "x-upload-list-item-action", onClick: e => this.handleDownload(file, e) }, this.renderIcon('download'))), listOptions.showRemoveIcon && (h("button", { type: "button", title: "Remove", class: "x-upload-list-item-action x-upload-list-item-action-remove", onClick: e => this.handleRemove(file, e) }, this.renderIcon('delete')))))), file.status === 'uploading' && file.percent !== undefined && this.progress?.showInfo !== false && (h("div", { class: "x-upload-list-item-progress-bar" }, h("div", { class: "x-upload-list-item-progress-bar-inner", style: { width: `${file.percent}%` } })))));
     }
     /**
      * Render the upload component.
@@ -688,7 +911,7 @@ export class XUpload {
             'x-upload-drag-mode': this.drag,
             [this.classNames?.root ?? '']: !!this.classNames?.root,
         };
-        return (h(Host, { key: '2343850a21dc38e8649a8f2cc3620dba448cb495', class: hostClasses, style: this.styles?.root }, this.drag ? this.renderDragArea() : this.renderUploadButton(), this.renderFileList()));
+        return (h(Host, { key: '525c719e96c6124be1fd546c6daadd363dc23d82', class: hostClasses, style: this.styles?.root }, this.drag ? this.renderDragArea() : this.renderUploadButton(), this.renderFileList()));
     }
     static get is() { return "x-upload"; }
     static get encapsulation() { return "shadow"; }
@@ -860,19 +1083,12 @@ export class XUpload {
                 "defaultValue": "'file'"
             },
             "fileList": {
-                "type": "unknown",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "UploadFile[]",
-                    "resolved": "UploadFile<any>[]",
-                    "references": {
-                        "UploadFile": {
-                            "location": "import",
-                            "path": "./types",
-                            "id": "src/components/x-upload/types.ts::UploadFile",
-                            "referenceLocation": "UploadFile"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -884,7 +1100,9 @@ export class XUpload {
                     "text": "List of files that have been uploaded (controlled)"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-list"
             },
             "defaultFileList": {
                 "type": "unknown",
@@ -1182,6 +1400,57 @@ export class XUpload {
                 "getter": false,
                 "setter": false
             },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload maxFileSize={1024 * 1024 * 10}></x-upload>"
+                        }],
+                    "text": "Maximum file size in bytes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-size"
+            },
+            "beforeUpload": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(file: File, fileList: File[]) => boolean | Promise<any>",
+                    "resolved": "(file: File, fileList: File[]) => boolean | Promise<any>",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload beforeUpload={(file) => file.size < 1024 * 1024}></x-upload>"
+                        }],
+                    "text": "Hook function which will be executed before uploading.\nReturning false or a Promise which then is rejected will stop uploading."
+                },
+                "getter": false,
+                "setter": false
+            },
             "classNames": {
                 "type": "unknown",
                 "mutable": false,
@@ -1370,6 +1639,31 @@ export class XUpload {
                         }
                     }
                 }
+            }, {
+                "method": "xError",
+                "name": "xError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXError={(ev) => message.error(ev.detail.message)}></x-upload>"
+                        }],
+                    "text": "Callback when validation fails (maxCount, maxFileSize, beforeUpload)"
+                },
+                "complexType": {
+                    "original": "UploadErrorEventDetail",
+                    "resolved": "UploadErrorEventDetail",
+                    "references": {
+                        "UploadErrorEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadErrorEventDetail",
+                            "referenceLocation": "UploadErrorEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/x-virtual-scroll/x-virtual-scroll.js

@@ -151,16 +151,16 @@ export class XVirtualScroll {
         const offsetY = visibleRange.start * itemHeight;
         // Get visible items
         const visibleItems = items.slice(visibleRange.start, visibleRange.end + 1);
-        return (h(Host, { key: 'd717a359fa4fa3037a75f1363aacbb4dcea2ccaa', class: "x-virtual-scroll-host", style: {
+        return (h(Host, { key: 'f34b05f2ee3c0a715b50f6c015438e4496f4d633', class: "x-virtual-scroll-host", style: {
                 width: width,
-            } }, h("div", { key: 'ff88b01940db972a4685e7ac349a61ba338bc860', class: "x-virtual-scroll-container", style: {
+            } }, h("div", { key: '9d9ee1bea57167c2aa63cbb7d734eb4f929f9a1b', class: "x-virtual-scroll-container", style: {
                 height: `${height}px`,
                 overflow: 'auto',
                 position: 'relative',
-            }, onScroll: this.handleScroll, ref: (el) => (this.scrollContainerRef = el) }, h("div", { key: '7d32d8c277a41209eadf6ae8d260396972c84a6f', class: "x-virtual-scroll-spacer", style: {
+            }, onScroll: this.handleScroll, ref: el => (this.scrollContainerRef = el) }, h("div", { key: '914bb32723c745a79397f7d7ef964270181ca6ee', class: "x-virtual-scroll-spacer", style: {
                 height: `${totalHeight}px`,
                 position: 'relative',
-            } }, h("div", { key: 'a582f1e5d2b6da550ab4c4af630dfdff8b1c6a5d', class: "x-virtual-scroll-items", style: {
+            } }, h("div", { key: 'e2e5f20c795455c9512fe7efed438b214dbf8dca', class: "x-virtual-scroll-items", style: {
                 transform: `translateY(${offsetY}px)`,
                 position: 'absolute',
                 top: '0',
@@ -201,7 +201,7 @@ export class XVirtualScroll {
                     "references": {
                         "VirtualScrollItem": {
                             "location": "local",
-                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-virtual-scroll/x-virtual-scroll.tsx",
+                            "path": "/run/media/cpanel/volumes/projects/fintvn/labs/packages/core/src/components/x-virtual-scroll/x-virtual-scroll.tsx",
                             "id": "src/components/x-virtual-scroll/x-virtual-scroll.tsx::VirtualScrollItem"
                         }
                     }

package/dist/collection/components/x-workflow/x-workflow.css

@@ -41,7 +41,9 @@
   will-change: transform;
 }
 
-.nodes-layer, .edges-svg, .drawings-layer {
+.nodes-layer,
+.edges-svg,
+.drawings-layer {
   position: absolute;
   top: 0;
   left: 0;