@nuraly/lumenui 0.1.0

package/dist/src/components/file-upload/file-upload.component.js

@@ -0,0 +1,398 @@
+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.js';
+import { fileUtils } from './utils.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.accept = '';
+        this.multiple = false;
+        this.drag = true;
+        this.tip = '';
+        this.limit = 0;
+        this.preview = true;
+        this.generatePreviewOnUpload = false;
+        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.dispatchEvent(new CustomEvent(`files-changed`, {
+                    detail: e.dataTransfer.files,
+                    bubbles: true,
+                    composed: true
+                }));
+                this.dispatchEvent(new CustomEvent(`file-drop`, {
+                    detail: { files: e.dataTransfer.files },
+                    bubbles: true,
+                    composed: true
+                }));
+                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.dispatchEvent(new CustomEvent(`files-changed`, {
+                    detail: target.files,
+                    bubbles: true,
+                    composed: true
+                }));
+                this._handleFiles(target.files);
+                target.value = '';
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._updateThemeAttribute();
+        if (this.drag) {
+            document.addEventListener('dragenter', this._onDocumentDragEnter);
+            document.addEventListener('dragleave', this._onDocumentDragLeave);
+            document.addEventListener('drop', this._onDocumentDrop);
+            document.addEventListener('dragover', this._onDocumentDragOver);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this._updateThemeAttribute();
+    }
+    _updateThemeAttribute() {
+        // Use explicitTheme from mixin - only data-theme attribute, no system preference fallback
+        const theme = this.explicitTheme;
+        if (theme) {
+            this.setAttribute('data-theme', theme);
+        }
+        else {
+            this.removeAttribute('data-theme');
+        }
+    }
+    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* () {
+            // Early check for multiple mode
+            if (this.multiple && this.limit > 0 && this.fileList.length + files.length > this.limit) {
+                this._dispatchEvent('exceed', { files });
+                return;
+            }
+            // If not multiple, keep only the last file
+            if (!this.multiple && files.length > 0) {
+                // Get the last file from the FileList
+                const lastFile = files[files.length - 1];
+                // If preview modal is showing a preview from a file that's being replaced, close it
+                if (this.previewImage && this.fileList.some(file => file.url === this.previewImage)) {
+                    this.previewImage = null;
+                }
+                // If there are existing files, dispatch remove events for each one
+                const oldFiles = [...this.fileList];
+                for (const file of oldFiles) {
+                    this._dispatchEvent('remove', { file });
+                }
+                // Clear the file list
+                this.fileList = [];
+                // Process only the last file
+                const isImage = fileUtils.isImageFile(lastFile);
+                const fileObj = {
+                    name: lastFile.name,
+                    size: fileUtils.formatFileSize(lastFile.size),
+                    raw: lastFile,
+                    status: 'ready',
+                    percentage: 0,
+                    uid: Date.now() + Math.random().toString(36).substring(2),
+                    isImage
+                };
+                if (this.preview && this.generatePreviewOnUpload && isImage) {
+                    fileObj.url = yield fileUtils.createFilePreview(lastFile);
+                }
+                this.fileList = [fileObj];
+                this.requestUpdate();
+                // Emit file-selected event with the new file
+                this._dispatchEvent('select', { files: [fileObj], fileList: this.fileList });
+                return;
+            }
+            // For multiple mode, process all files
+            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
+                };
+                if (this.preview && this.generatePreviewOnUpload && 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 `
+        <nr-button  @click=${this._onClick}>Upload File</nr-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([
+    property({ type: Boolean })
+], FileUpload.prototype, "generatePreviewOnUpload", 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-upload.component.js.map

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

@@ -0,0 +1,2 @@
+export * from './file-upload.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/file-upload/index.js

@@ -0,0 +1,2 @@
+export * from './file-upload.component.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+import { FileUpload } from './file-upload.component.js';
+export declare const HyFileUpload: import("@lit-labs/react").ReactWebComponent<FileUpload, {
+    fileChange: string;
+    uploadComplete: string;
+    uploadError: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/file-upload/react.js

@@ -0,0 +1,14 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { FileUpload } from './file-upload.component.js';
+export const HyFileUpload = createComponent({
+    tagName: 'nr-file-upload',
+    elementClass: FileUpload,
+    react: React,
+    events: {
+        fileChange: 'file-change',
+        uploadComplete: 'upload-complete',
+        uploadError: 'upload-error',
+    },
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map