@nuralyui/file-upload 0.0.1 → 0.0.2

package/demo/file-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import "../file-upload.component";
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    uploadProcesses: Map<string, number>;
+    firstUpdated(): void;
+    private _handleFileSelect;
+    private _handleFileRemove;
+    private _handleFileExceed;
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=file-demo.d.ts.map

package/demo/file-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/file-upload/demo/file-demo.ts"],"names":[],"mappings":"AACA;;;;GAIG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,0BAA0B,CAAC;AAGlC,qBACa,cAAe,SAAQ,UAAU;IACnC,KAAK,SAAU;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IAEjD,YAAY;IAYrB,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;cAMN,MAAM;IA0BzB,OAAgB,MAAM,4BA6CpB;CACH"}

package/demo/file-demo.js

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import "../file-upload.component";
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+        this.uploadProcesses = new Map();
+    }
+    firstUpdated() {
+        var _a;
+        // Get reference to the file upload component
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (fileUpload) {
+            // Add event listeners to the component
+            fileUpload.addEventListener('file-select', this._handleFileSelect.bind(this));
+            fileUpload.addEventListener('file-remove', this._handleFileRemove.bind(this));
+            fileUpload.addEventListener('file-exceed', this._handleFileExceed.bind(this));
+        }
+    }
+    _handleFileSelect(event) {
+        var _a;
+        const { files } = event.detail;
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (!fileUpload)
+            return;
+        files.forEach((file) => {
+            // Update status to 'uploading'
+            fileUpload.updateFileStatus(file.uid, 'uploading', 0);
+            // Simulate upload process with interval
+            const intervalId = window.setInterval(() => {
+                const currentPercentage = file.percentage || 0;
+                const percentage = Math.min(100, currentPercentage + 10);
+                fileUpload.updateFileStatus(file.uid, 'uploading', percentage);
+                if (percentage === 100) {
+                    window.clearInterval(intervalId);
+                    // Set file as successfully uploaded after a small delay
+                    setTimeout(() => {
+                        fileUpload.updateFileStatus(file.uid, 'success');
+                    }, 300);
+                    // Remove from tracking
+                    this.uploadProcesses.delete(file.uid);
+                }
+            }, 500);
+            // Store the interval ID for potential cancellation
+            this.uploadProcesses.set(file.uid, intervalId);
+        });
+    }
+    _handleFileRemove(event) {
+        const { file } = event.detail;
+        console.log(`File removed: ${file.name}`);
+        // Cancel upload process if it's still running
+        if (this.uploadProcesses.has(file.uid)) {
+            window.clearInterval(this.uploadProcesses.get(file.uid));
+            this.uploadProcesses.delete(file.uid);
+        }
+    }
+    _handleFileExceed(event) {
+        const { files } = event.detail;
+        console.warn(`Upload limit exceeded. Tried to upload ${files.length} additional files.`);
+        // Could show a notification or alert here
+    }
+    render() {
+        return html `
+      <div class="demo-container">
+        <h2>File Upload Demo</h2>
+        <nr-file-upload
+          accept="image/*"
+          multiple
+          drag
+          limit="5"
+          tip="JPG/PNG files up to 500kb">
+        </nr-file-upload>
+        
+        <div class="usage-info">
+          <h3>Usage:</h3>
+          <ul>
+            <li>Drag & drop files here</li>
+            <li>Or click to select files</li>
+            <li>Files will automatically start uploading</li>
+            <li>Use the X button to remove files</li>
+            <li>Click on eye icon to preview images</li>
+          </ul>
+        </div>
+      </div>
+    `;
+    }
+};
+ElMeenuElement.styles = [
+    css `
+      :host {
+        width: 800px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: sans-serif;
+      }
+      
+      .demo-container {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        background-color: #fff;
+      }
+      
+      h2 {
+        color: #333;
+        margin-top: 0;
+      }
+      
+      .usage-info {
+        margin-top: 30px;
+        padding: 15px;
+        background-color: #f5f5f5;
+        border-radius: 6px;
+      }
+      
+      .usage-info h3 {
+        margin-top: 0;
+        color: #555;
+      }
+      
+      ul {
+        padding-left: 20px;
+      }
+      
+      li {
+        margin-bottom: 8px;
+        color: #666;
+      }
+    `,
+];
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "uploadProcesses", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-file-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=file-demo.js.map

package/demo/file-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-demo.js","sourceRoot":"","sources":["../../../../src/components/file-upload/demo/file-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\nimport { LitElement, css, html } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport \"../file-upload.component\";\nimport { UploadFile } from '../types';\n\n@customElement('hy-file-demo')\nexport class ElMeenuElement extends LitElement {\n  @state() float = 'left';\n  @state() uploadProcesses: Map<string, number> = new Map();\n\n  override firstUpdated() {\n    // Get reference to the file upload component\n    const fileUpload : any = this.shadowRoot?.querySelector('nr-file-upload');\n    \n    if (fileUpload) {\n      // Add event listeners to the component\n      fileUpload.addEventListener('file-select', this._handleFileSelect.bind(this));\n      fileUpload.addEventListener('file-remove', this._handleFileRemove.bind(this));\n      fileUpload.addEventListener('file-exceed', this._handleFileExceed.bind(this));\n    }\n  }\n\n  private _handleFileSelect(event: CustomEvent) {\n    const { files } = event.detail;\n    const fileUpload : any= this.shadowRoot?.querySelector('nr-file-upload');\n    \n    if (!fileUpload) return;\n    \n    files.forEach((file: UploadFile) => {\n      // Update status to 'uploading'\n      fileUpload.updateFileStatus(file.uid, 'uploading', 0);\n      \n      // Simulate upload process with interval\n      const intervalId = window.setInterval(() => {\n        const currentPercentage = file.percentage || 0;\n        const percentage = Math.min(100, currentPercentage + 10);\n        \n        fileUpload.updateFileStatus(file.uid, 'uploading', percentage);\n        \n        if (percentage === 100) {\n          window.clearInterval(intervalId);\n          // Set file as successfully uploaded after a small delay\n          setTimeout(() => {\n            fileUpload.updateFileStatus(file.uid, 'success');\n          }, 300);\n          \n          // Remove from tracking\n          this.uploadProcesses.delete(file.uid);\n        }\n      }, 500);\n      \n      // Store the interval ID for potential cancellation\n      this.uploadProcesses.set(file.uid, intervalId);\n    });\n  }\n\n  private _handleFileRemove(event: CustomEvent) {\n    const { file } = event.detail;\n    console.log(`File removed: ${file.name}`);\n    \n    // Cancel upload process if it's still running\n    if (this.uploadProcesses.has(file.uid)) {\n      window.clearInterval(this.uploadProcesses.get(file.uid));\n      this.uploadProcesses.delete(file.uid);\n    }\n  }\n\n  private _handleFileExceed(event: CustomEvent) {\n    const { files } = event.detail;\n    console.warn(`Upload limit exceeded. Tried to upload ${files.length} additional files.`);\n    // Could show a notification or alert here\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"demo-container\">\n        <h2>File Upload Demo</h2>\n        <nr-file-upload\n          accept=\"image/*\"\n          multiple\n          drag\n          limit=\"5\"\n          tip=\"JPG/PNG files up to 500kb\">\n        </nr-file-upload>\n        \n        <div class=\"usage-info\">\n          <h3>Usage:</h3>\n          <ul>\n            <li>Drag & drop files here</li>\n            <li>Or click to select files</li>\n            <li>Files will automatically start uploading</li>\n            <li>Use the X button to remove files</li>\n            <li>Click on eye icon to preview images</li>\n          </ul>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [\n    css`\n      :host {\n        width: 800px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        font-family: sans-serif;\n      }\n      \n      .demo-container {\n        width: 100%;\n        max-width: 700px;\n        padding: 20px;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        background-color: #fff;\n      }\n      \n      h2 {\n        color: #333;\n        margin-top: 0;\n      }\n      \n      .usage-info {\n        margin-top: 30px;\n        padding: 15px;\n        background-color: #f5f5f5;\n        border-radius: 6px;\n      }\n      \n      .usage-info h3 {\n        margin-top: 0;\n        color: #555;\n      }\n      \n      ul {\n        padding-left: 20px;\n      }\n      \n      li {\n        margin-bottom: 8px;\n        color: #666;\n      }\n    `,\n  ];\n}\n"]}

package/file.component.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from 'lit';
+import { UploadFile } from './types';
+export declare class FileUpload extends LitElement {
+    static styles: import("lit").CSSResult;
+    accept: string;
+    multiple: boolean;
+    drag: boolean;
+    tip: string;
+    limit: number;
+    preview: boolean;
+    fileList: UploadFile[];
+    isDragOver: boolean;
+    showDragArea: boolean;
+    inputElement: HTMLInputElement | null;
+    dragCounter: number;
+    previewImage: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    private _onDocumentDragEnter;
+    private _onDocumentDragLeave;
+    private _onDocumentDrop;
+    private _onDocumentDragOver;
+    private _onDrop;
+    private _onClick;
+    private _onChange;
+    private _handleFiles;
+    updateFileStatus(uid: string, status: 'ready' | 'uploading' | 'success' | 'error', percentage?: number): void;
+    private _updateFile;
+    private _removeFile;
+    private _dispatchEvent;
+    private _showPreview;
+    private _closePreview;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=file.component.d.ts.map

package/file.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.component.d.ts","sourceRoot":"","sources":["../../../src/components/file-upload/file.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEJ,MAAM,EAAE,MAAM,CAAM;IACnB,QAAQ,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,OAAO,CAAQ;IACtB,GAAG,EAAE,MAAM,CAAM;IACjB,KAAK,EAAE,MAAM,CAAK;IACjB,OAAO,EAAE,OAAO,CAAQ;IAE5C,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,UAAU,EAAE,OAAO,CAAS;IAC5B,YAAY,EAAE,OAAO,CAAS;IAC9B,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC7C,WAAW,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEnC,iBAAiB;IAUjB,oBAAoB;IAUpB,YAAY,CAAC,kBAAkB,EAAE,cAAc;IAKxD,OAAO,CAAC,oBAAoB,CAO1B;IAEF,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,eAAe,CAOrB;IAEF,OAAO,CAAC,mBAAmB,CAYzB;IAEF,OAAO,CAAC,OAAO,CAWb;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,SAAS,CAMf;YAEY,YAAY;IAmCnB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM;IAY7G,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAwGhB"}

package/file.component.js

@@ -0,0 +1,327 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+import { fileUtils } from './utils';
+let FileUpload = class FileUpload extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.accept = '';
+        this.multiple = false;
+        this.drag = true;
+        this.tip = '';
+        this.limit = 0;
+        this.preview = true;
+        this.fileList = [];
+        this.isDragOver = false;
+        this.showDragArea = false;
+        this.inputElement = null;
+        this.dragCounter = 0;
+        this.previewImage = null;
+        this._onDocumentDragEnter = (e) => {
+            e.preventDefault();
+            this.dragCounter++;
+            if (this.dragCounter === 1) {
+                this.showDragArea = true;
+            }
+        };
+        this._onDocumentDragLeave = (e) => {
+            e.preventDefault();
+            this.dragCounter--;
+            if (this.dragCounter === 0) {
+                this.showDragArea = false;
+                this.isDragOver = false;
+            }
+        };
+        this._onDocumentDrop = (e) => {
+            if (e.target !== this && !this.contains(e.target)) {
+                e.preventDefault();
+                this.dragCounter = 0;
+                this.showDragArea = false;
+                this.isDragOver = false;
+            }
+        };
+        this._onDocumentDragOver = (e) => {
+            e.preventDefault();
+            // Determine if the drag is over our component
+            const path = e.composedPath();
+            const isOverComponent = path.includes(this);
+            if (isOverComponent) {
+                this.isDragOver = true;
+            }
+            else {
+                this.isDragOver = false;
+            }
+        };
+        this._onDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            this.dragCounter = 0;
+            this.isDragOver = false;
+            this.showDragArea = false;
+            if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                this._handleFiles(e.dataTransfer.files);
+            }
+        };
+        this._onClick = () => {
+            var _a;
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this._onChange = (e) => {
+            const target = e.target;
+            if (target.files) {
+                this._handleFiles(target.files);
+                target.value = ''; // Reset so same file can be selected again
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.drag) {
+            document.addEventListener('dragenter', this._onDocumentDragEnter);
+            document.addEventListener('dragleave', this._onDocumentDragLeave);
+            document.addEventListener('drop', this._onDocumentDrop);
+            document.addEventListener('dragover', this._onDocumentDragOver);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.drag) {
+            document.removeEventListener('dragenter', this._onDocumentDragEnter);
+            document.removeEventListener('dragleave', this._onDocumentDragLeave);
+            document.removeEventListener('drop', this._onDocumentDrop);
+            document.removeEventListener('dragover', this._onDocumentDragOver);
+        }
+    }
+    firstUpdated(_changedProperties) {
+        var _a;
+        super.firstUpdated(_changedProperties);
+        this.inputElement = ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="file"]')) || null;
+    }
+    _handleFiles(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.limit > 0 && this.fileList.length + files.length > this.limit) {
+                this._dispatchEvent('exceed', { files });
+                return;
+            }
+            const newFiles = [];
+            for (const file of Array.from(files)) {
+                const isImage = fileUtils.isImageFile(file);
+                const fileObj = {
+                    name: file.name,
+                    size: fileUtils.formatFileSize(file.size),
+                    raw: file,
+                    status: 'ready',
+                    percentage: 0,
+                    uid: Date.now() + Math.random().toString(36).substring(2),
+                    isImage
+                };
+                // Create preview URL for images if preview is enabled
+                if (this.preview && isImage) {
+                    fileObj.url = yield fileUtils.createFilePreview(file);
+                }
+                this.fileList = [...this.fileList, fileObj];
+                newFiles.push(fileObj);
+            }
+            this.requestUpdate();
+            // Emit file-selected event with the new files
+            this._dispatchEvent('select', { files: newFiles, fileList: this.fileList });
+        });
+    }
+    updateFileStatus(uid, status, percentage) {
+        const file = this.fileList.find(f => f.uid === uid);
+        if (file) {
+            file.status = status;
+            if (percentage !== undefined) {
+                file.percentage = percentage;
+            }
+            this._updateFile(file);
+        }
+    }
+    _updateFile(updatedFile) {
+        this.fileList = this.fileList.map(file => file.uid === updatedFile.uid ? updatedFile : file);
+        this.requestUpdate();
+    }
+    _removeFile(uid) {
+        const file = this.fileList.find(file => file.uid === uid);
+        this.fileList = this.fileList.filter(file => file.uid !== uid);
+        if (file) {
+            this._dispatchEvent('remove', { file });
+        }
+        this.requestUpdate();
+    }
+    _dispatchEvent(name, data) {
+        this.dispatchEvent(new CustomEvent(`file-${name}`, {
+            detail: data,
+            bubbles: true,
+            composed: true
+        }));
+    }
+    _showPreview(url) {
+        this.previewImage = url;
+    }
+    _closePreview() {
+        this.previewImage = null;
+    }
+    render() {
+        return html `
+      <div class="upload" @drop=${this._onDrop} @dragover=${(e) => e.preventDefault()}>
+        <input 
+          type="file" 
+          class="hidden" 
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          @change=${this._onChange}
+        />
+
+        ${this.showDragArea ? html `
+          <div 
+            class="upload-dragger ${this.isDragOver ? 'is-dragover' : ''}" 
+            @click=${this._onClick}
+          >
+            <div class="upload-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="17 8 12 3 7 8"></polyline>
+                <line x1="12" y1="3" x2="12" y2="15"></line>
+              </svg>
+            </div>
+            <div class="upload-text">Drop file here or click to upload</div>
+            ${this.tip ? html `<div class="upload-tip">${this.tip}</div>` : ''}
+          </div>
+        ` : html `
+          <button class="upload-button" @click=${this._onClick}>Upload File</button>
+          ${this.tip ? html `<div class="upload-tip">${this.tip}</div>` : ''}
+        `}
+
+        <div class="file-list">
+          ${this.fileList.map(file => html `
+            <div class="file-item">
+              ${file.isImage ? html `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                  <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+              ` : html `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                  <polyline points="14 2 14 8 20 8"></polyline>
+                </svg>
+              `}
+              <div class="file-name">${file.name}</div>
+              <div class="file-size">${file.size}</div>
+              <div class="file-status">
+                ${file.status === 'success' ? html `
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#67c23a" stroke-width="2">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                ` : file.status === 'error' ? html `
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f56c6c" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                ` : file.status === 'uploading' ? html `${file.percentage}%` : ''}
+              </div>
+              <div class="file-actions">
+                ${file.isImage && file.url ? html `
+                  <button class="preview-icon" @click=${() => this._showPreview(file.url)}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>
+                  </button>
+                ` : ''}
+                <button @click=${() => this._removeFile(file.uid)}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              </div>
+              ${file.status === 'uploading' ? html `
+                <div class="progress-bar">
+                  <div class="progress-inner" style="width: ${file.percentage}%"></div>
+                </div>
+              ` : ''}
+            </div>
+            ${this.preview && file.isImage && file.url ? html `
+              <div class="file-preview">
+                <img 
+                  class="image-preview" 
+                  src="${file.url}" 
+                  alt="${file.name}" 
+                  @click=${() => this._showPreview(file.url)}
+                />
+              </div>
+            ` : ''}
+          `)}
+        </div>
+
+        ${this.previewImage ? html `
+          <div class="preview-modal" @click=${this._closePreview}>
+            <button class="preview-close">×</button>
+            <img src="${this.previewImage}" alt="Preview" />
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+};
+FileUpload.styles = styles;
+__decorate([
+    property({ type: String })
+], FileUpload.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean })
+], FileUpload.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], FileUpload.prototype, "drag", void 0);
+__decorate([
+    property({ type: String })
+], FileUpload.prototype, "tip", void 0);
+__decorate([
+    property({ type: Number })
+], FileUpload.prototype, "limit", void 0);
+__decorate([
+    property({ type: Boolean })
+], FileUpload.prototype, "preview", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "fileList", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "isDragOver", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "showDragArea", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "inputElement", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "dragCounter", void 0);
+__decorate([
+    state()
+], FileUpload.prototype, "previewImage", void 0);
+FileUpload = __decorate([
+    customElement('nr-file-upload')
+], FileUpload);
+export { FileUpload };
+//# sourceMappingURL=file.component.js.map

package/file.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.component.js","sourceRoot":"","sources":["../../../src/components/file-upload/file.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG8B,WAAM,GAAW,EAAE,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAY,IAAI,CAAC;QACtB,QAAG,GAAW,EAAE,CAAC;QACjB,UAAK,GAAW,CAAC,CAAC;QACjB,YAAO,GAAY,IAAI,CAAC;QAE5C,aAAQ,GAAiB,EAAE,CAAC;QAC5B,eAAU,GAAY,KAAK,CAAC;QAC5B,iBAAY,GAAY,KAAK,CAAC;QAC9B,iBAAY,GAA4B,IAAI,CAAC;QAC7C,gBAAW,GAAW,CAAC,CAAC;QACxB,iBAAY,GAAkB,IAAI,CAAC;QA2BpC,yBAAoB,GAAG,CAAC,CAAY,EAAE,EAAE;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;gBAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;aAC1B;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,CAAY,EAAE,EAAE;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;gBAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,CAAY,EAAE,EAAE;YACzC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;gBACzD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;gBACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,CAAY,EAAE,EAAE;YAC7C,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,8CAA8C;YAC9C,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;YAC9B,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAE5C,IAAI,eAAe,EAAE;gBACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;aACxB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,CAAY,EAAE,EAAE;;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAE1B,IAAI,MAAA,CAAC,CAAC,YAAY,0CAAE,KAAK,EAAE;gBACzB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aACzC;QACH,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;;YACtB,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,MAAM,CAAC,KAAK,EAAE;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,2CAA2C;aAC/D;QACH,CAAC,CAAC;IAyLJ,CAAC;IAnRU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAClE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAClE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACxD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;SACjE;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACrE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACrE,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;SACpE;IACH,CAAC;IAEQ,YAAY,CAAC,kBAAkC;;QACtD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAC,KAAI,IAAI,CAAC;IACnF,CAAC;IAqEa,YAAY,CAAC,KAAe;;YACxC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;gBACtE,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;gBACzC,OAAO;aACR;YAED,MAAM,QAAQ,GAAiB,EAAE,CAAC;YAElC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBACpC,MAAM,OAAO,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAC5C,MAAM,OAAO,GAAe;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,IAAI,EAAE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;oBACzC,GAAG,EAAE,IAAI;oBACT,MAAM,EAAE,OAAO;oBACf,UAAU,EAAE,CAAC;oBACb,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;oBACzD,OAAO;iBACR,CAAC;gBAEF,sDAAsD;gBACtD,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE;oBAC3B,OAAO,CAAC,GAAG,GAAG,MAAM,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;iBACvD;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBAC5C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACxB;YAED,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,8CAA8C;YAC9C,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9E,CAAC;KAAA;IAEM,gBAAgB,CAAC,GAAW,EAAE,MAAmD,EAAE,UAAmB;QAC3G,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAEpD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,UAAU,KAAK,SAAS,EAAE;gBAC5B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;aAC9B;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACxB;IACH,CAAC;IAEO,WAAW,CAAC,WAAuB;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACvC,IAAI,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAClD,CAAC;QACF,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,WAAW,CAAC,GAAW;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAC/D,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,cAAc,CAAC,IAAY,EAAE,IAAS;QAC5C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,IAAI,EAAE,EAAE;YACjD,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,YAAY,CAAC,GAAW;QAC9B,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;IAC1B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,OAAO,cAAc,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;;;mBAI7E,IAAI,CAAC,MAAM;sBACR,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,SAAS;;;UAGxB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;oCAEE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;qBACnD,IAAI,CAAC,QAAQ;;;;;;;;;;cAUpB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAEpE,CAAC,CAAC,CAAC,IAAI,CAAA;iDACiC,IAAI,CAAC,QAAQ;YAClD,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE;SAClE;;;YAGG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;gBAE1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;eAMpB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;eAKP;uCACwB,IAAI,CAAC,IAAI;uCACT,IAAI,CAAC,IAAI;;kBAE9B,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;iBAIjC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;iBAKjC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;;;kBAG9D,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;wDACO,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAI,CAAC;;;;;;iBAMzE,CAAC,CAAC,CAAC,EAAE;iCACW,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;gBAOjD,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;8DAEY,IAAI,CAAC,UAAU;;eAE9D,CAAC,CAAC,CAAC,EAAE;;cAEN,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;;;;yBAIpC,IAAI,CAAC,GAAG;yBACR,IAAI,CAAC,IAAI;2BACP,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAI,CAAC;;;aAGhD,CAAC,CAAC,CAAC,EAAE;WACP,CAAC;;;UAGF,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;8CACY,IAAI,CAAC,aAAa;;wBAExC,IAAI,CAAC,YAAY;;SAEhC,CAAC,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAnSiB,iBAAM,GAAG,MAAO,CAAA;AAEJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAqB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAA2B;AAC1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAsB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAyB;AAE5C;IAAR,KAAK,EAAE;4CAA6B;AAC5B;IAAR,KAAK,EAAE;8CAA6B;AAC5B;IAAR,KAAK,EAAE;gDAA+B;AAC9B;IAAR,KAAK,EAAE;gDAA8C;AAC7C;IAAR,KAAK,EAAE;+CAAyB;AACxB;IAAR,KAAK,EAAE;gDAAoC;AAfjC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAoStB;SApSY,UAAU","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { UploadFile } from './types';\nimport { styles } from './styles';\nimport { fileUtils } from './utils';\n\n@customElement('nr-file-upload')\nexport class FileUpload extends LitElement {\n  static override styles = styles;\n\n  @property({ type: String }) accept: string = '';\n  @property({ type: Boolean }) multiple: boolean = false;\n  @property({ type: Boolean }) drag: boolean = true;\n  @property({ type: String }) tip: string = '';\n  @property({ type: Number }) limit: number = 0;\n  @property({ type: Boolean }) preview: boolean = true;\n\n  @state() fileList: UploadFile[] = [];\n  @state() isDragOver: boolean = false;\n  @state() showDragArea: boolean = false;\n  @state() inputElement: HTMLInputElement | null = null;\n  @state() dragCounter: number = 0;\n  @state() previewImage: string | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.drag) {\n      document.addEventListener('dragenter', this._onDocumentDragEnter);\n      document.addEventListener('dragleave', this._onDocumentDragLeave);\n      document.addEventListener('drop', this._onDocumentDrop);\n      document.addEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.drag) {\n      document.removeEventListener('dragenter', this._onDocumentDragEnter);\n      document.removeEventListener('dragleave', this._onDocumentDragLeave);\n      document.removeEventListener('drop', this._onDocumentDrop);\n      document.removeEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n    this.inputElement = this.shadowRoot?.querySelector('input[type=\"file\"]') || null;\n  }\n\n  private _onDocumentDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter++;\n    \n    if (this.dragCounter === 1) {\n      this.showDragArea = true;\n    }\n  };\n\n  private _onDocumentDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter--;\n    \n    if (this.dragCounter === 0) {\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDrop = (e: DragEvent) => {\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      e.preventDefault();\n      this.dragCounter = 0;\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    \n    // Determine if the drag is over our component\n    const path = e.composedPath();\n    const isOverComponent = path.includes(this);\n    \n    if (isOverComponent) {\n      this.isDragOver = true;\n    } else {\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    this.dragCounter = 0;\n    this.isDragOver = false;\n    this.showDragArea = false;\n\n    if (e.dataTransfer?.files) {\n      this._handleFiles(e.dataTransfer.files);\n    }\n  };\n\n  private _onClick = () => {\n    this.inputElement?.click();\n  };\n\n  private _onChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    if (target.files) {\n      this._handleFiles(target.files);\n      target.value = ''; // Reset so same file can be selected again\n    }\n  };\n\n  private async _handleFiles(files: FileList) {\n    if (this.limit > 0 && this.fileList.length + files.length > this.limit) {\n      this._dispatchEvent('exceed', { files });\n      return;\n    }\n\n    const newFiles: UploadFile[] = [];\n\n    for (const file of Array.from(files)) {\n      const isImage = fileUtils.isImageFile(file);\n      const fileObj: UploadFile = {\n        name: file.name,\n        size: fileUtils.formatFileSize(file.size),\n        raw: file,\n        status: 'ready',\n        percentage: 0,\n        uid: Date.now() + Math.random().toString(36).substring(2),\n        isImage\n      };\n\n      // Create preview URL for images if preview is enabled\n      if (this.preview && isImage) {\n        fileObj.url = await fileUtils.createFilePreview(file);\n      }\n\n      this.fileList = [...this.fileList, fileObj];\n      newFiles.push(fileObj);\n    }\n\n    this.requestUpdate();\n\n    // Emit file-selected event with the new files\n    this._dispatchEvent('select', { files: newFiles, fileList: this.fileList });\n  }\n\n  public updateFileStatus(uid: string, status: 'ready' | 'uploading' | 'success' | 'error', percentage?: number) {\n    const file = this.fileList.find(f => f.uid === uid);\n    \n    if (file) {\n      file.status = status;\n      if (percentage !== undefined) {\n        file.percentage = percentage;\n      }\n      this._updateFile(file);\n    }\n  }\n\n  private _updateFile(updatedFile: UploadFile) {\n    this.fileList = this.fileList.map(file =>\n      file.uid === updatedFile.uid ? updatedFile : file\n    );\n    this.requestUpdate();\n  }\n\n  private _removeFile(uid: string) {\n    const file = this.fileList.find(file => file.uid === uid);\n    this.fileList = this.fileList.filter(file => file.uid !== uid);\n    if (file) {\n      this._dispatchEvent('remove', { file });\n    }\n    this.requestUpdate();\n  }\n\n  private _dispatchEvent(name: string, data: any) {\n    this.dispatchEvent(new CustomEvent(`file-${name}`, {\n      detail: data,\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _showPreview(url: string) {\n    this.previewImage = url;\n  }\n\n  private _closePreview() {\n    this.previewImage = null;\n  }\n\n  override render() {\n    return html`\n      <div class=\"upload\" @drop=${this._onDrop} @dragover=${(e: DragEvent) => e.preventDefault()}>\n        <input \n          type=\"file\" \n          class=\"hidden\" \n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onChange}\n        />\n\n        ${this.showDragArea ? html`\n          <div \n            class=\"upload-dragger ${this.isDragOver ? 'is-dragover' : ''}\" \n            @click=${this._onClick}\n          >\n            <div class=\"upload-icon\">\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                <polyline points=\"17 8 12 3 7 8\"></polyline>\n                <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n              </svg>\n            </div>\n            <div class=\"upload-text\">Drop file here or click to upload</div>\n            ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n          </div>\n        ` : html`\n          <button class=\"upload-button\" @click=${this._onClick}>Upload File</button>\n          ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n        `}\n\n        <div class=\"file-list\">\n          ${this.fileList.map(file => html`\n            <div class=\"file-item\">\n              ${file.isImage ? html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n                  <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n                  <polyline points=\"21 15 16 10 5 21\"></polyline>\n                </svg>\n              ` : html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n                  <polyline points=\"14 2 14 8 20 8\"></polyline>\n                </svg>\n              `}\n              <div class=\"file-name\">${file.name}</div>\n              <div class=\"file-size\">${file.size}</div>\n              <div class=\"file-status\">\n                ${file.status === 'success' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#67c23a\" stroke-width=\"2\">\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                ` : file.status === 'error' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f56c6c\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                ` : file.status === 'uploading' ? html`${file.percentage}%` : ''}\n              </div>\n              <div class=\"file-actions\">\n                ${file.isImage && file.url ? html`\n                  <button class=\"preview-icon\" @click=${() => this._showPreview(file.url!)}>\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                      <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                    </svg>\n                  </button>\n                ` : ''}\n                <button @click=${() => this._removeFile(file.uid)}>\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                </button>\n              </div>\n              ${file.status === 'uploading' ? html`\n                <div class=\"progress-bar\">\n                  <div class=\"progress-inner\" style=\"width: ${file.percentage}%\"></div>\n                </div>\n              ` : ''}\n            </div>\n            ${this.preview && file.isImage && file.url ? html`\n              <div class=\"file-preview\">\n                <img \n                  class=\"image-preview\" \n                  src=\"${file.url}\" \n                  alt=\"${file.name}\" \n                  @click=${() => this._showPreview(file.url!)}\n                />\n              </div>\n            ` : ''}\n          `)}\n        </div>\n\n        ${this.previewImage ? html`\n          <div class=\"preview-modal\" @click=${this._closePreview}>\n            <button class=\"preview-close\">×</button>\n            <img src=\"${this.previewImage}\" alt=\"Preview\" />\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/file-upload",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "",
     "main": "index.js",
     "type": "module",