@nuralyui/file-upload 0.0.11 → 0.0.12

package/bundle.js

@@ -1 +1,384 @@
-import{css as i,LitElement as e,html as t}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";const l=i`:host{display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.upload{width:100%}.upload-dragger{background-color:#f8f9fa;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:100%;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s;display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-dragger:hover{border-color:#409eff}.upload-dragger.is-dragover{background-color:rgba(64,158,255,.06);border-color:#409eff}.upload-icon{font-size:28px;color:#c0c4cc;margin-bottom:8px}.upload-text{color:#606266;font-size:14px;text-align:center;padding:0 12px}.upload-tip{font-size:12px;color:#909399;margin-top:7px;padding:0 12px}.upload-button{padding:8px 16px;background-color:#409eff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.upload-button:hover{background-color:#66b1ff}.file-list{margin-top:10px;width:100%}.file-item{display:flex;align-items:center;margin-bottom:8px;transition:all .3s;padding:8px;border-radius:4px;gap:8px;width:100%;box-sizing:border-box;min-width:0;flex-wrap:nowrap;overflow:hidden;max-width:100%}.file-item:hover{background-color:#f8f9fa}.file-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#606266;min-width:0;max-width:100%;word-break:break-all;width:0}.file-size{color:#909399;font-size:12px;flex-shrink:0;margin-left:8px;white-space:nowrap}.file-status{display:flex;align-items:center;flex-shrink:0}.file-actions{display:flex;gap:4px;flex-shrink:0}.file-actions button{background:0 0;border:none;padding:4px;cursor:pointer;color:#909399}.file-actions button:hover{color:#409eff}.progress-bar{height:2px;width:100%;background-color:#e6e6e6;margin-top:4px;position:relative;border-radius:2px;overflow:hidden}.progress-inner{height:100%;background-color:#409eff;position:absolute;left:0;top:0;transition:width .3s ease}.progress-percentage{position:absolute;right:0;top:-18px;font-size:12px;color:#409eff}.hidden{display:none}.success{color:#67c23a}.error{color:#f56c6c}.icon-delete{color:#f56c6c}.file-preview{width:100%;margin-top:4px}.image-preview{display:block;max-width:100%;max-height:200px;border-radius:4px;object-fit:contain;cursor:zoom-in}.preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}.preview-modal img{max-width:90%;max-height:90%;object-fit:contain}.preview-close{position:absolute;top:20px;right:20px;color:#fff;font-size:30px;background:0 0;border:none;cursor:pointer}.preview-icon{padding:4px;color:#409eff;cursor:zoom-in}.file-container{width:100%;position:relative;overflow:hidden}@media (max-width:600px){.upload-dragger{height:140px;padding:12px}.upload-icon{font-size:24px}.upload-text,.upload-tip{font-size:13px}.file-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon filename" "size status" "progress progress" "actions actions";gap:4px 8px;align-items:center;padding:8px;width:100%;box-sizing:border-box;overflow:hidden}.file-item>svg:first-child{grid-area:icon;align-self:start}.file-name{grid-area:filename;margin:0;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;max-width:100%;word-break:break-all;flex:1}.file-size{grid-area:size;margin:0}.file-status{grid-area:status;justify-self:end}.progress-bar{grid-area:progress;width:100%}.file-actions{grid-area:actions;margin:4px 0 0 0;justify-content:flex-end;width:100%}.upload-button{width:100%;font-size:16px}}`,n={isImageFile:i=>i.type.startsWith("image/"),formatFileSize(i){if(0===i)return"0 B";const e=Math.floor(Math.log(i)/Math.log(1024));return parseFloat((i/Math.pow(1024,e)).toFixed(2))+" "+["B","KB","MB","GB","TB"][e]},createFilePreview:i=>new Promise((e=>{const t=new FileReader;t.onload=i=>{var t;e(null===(t=i.target)||void 0===t?void 0:t.result)},t.readAsDataURL(i)}))};var a=function(i,e,t,o){for(var s,r=arguments.length,l=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o,n=i.length-1;n>=0;n--)(s=i[n])&&(l=(r<3?s(l):r>3?s(e,t,l):s(e,t))||l);return r>3&&l&&Object.defineProperty(e,t,l),l},d=function(i,e,t,o){return new(t||(t=Promise))((function(s,r){function l(i){try{a(o.next(i))}catch(i){r(i)}}function n(i){try{a(o.throw(i))}catch(i){r(i)}}function a(i){var e;i.done?s(i.value):(e=i.value,e instanceof t?e:new t((function(i){i(e)}))).then(l,n)}a((o=o.apply(i,e||[])).next())}))};let h=class extends e{constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=i=>{i.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=i=>{i.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=i=>{i.target===this||this.contains(i.target)||(i.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=i=>{i.preventDefault();const e=i.composedPath().includes(this);this.isDragOver=!!e},this._onDrop=i=>{var e;i.preventDefault(),i.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(e=i.dataTransfer)||void 0===e?void 0:e.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:i.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:i.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(i.dataTransfer.files))},this._onClick=()=>{var i;null===(i=this.inputElement)||void 0===i||i.click()},this._onChange=i=>{const e=i.target;e.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.files,bubbles:!0,composed:!0})),this._handleFiles(e.files),e.value="")}}connectedCallback(){super.connectedCallback(),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(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(i){var e;super.firstUpdated(i),this.inputElement=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="file"]'))||null}_handleFiles(i){return d(this,void 0,void 0,(function*(){if(this.multiple&&this.limit>0&&this.fileList.length+i.length>this.limit)return void this._dispatchEvent("exceed",{files:i});if(!this.multiple&&i.length>0){const e=i[i.length-1];this.previewImage&&this.fileList.some((i=>i.url===this.previewImage))&&(this.previewImage=null);const t=[...this.fileList];for(const i of t)this._dispatchEvent("remove",{file:i});this.fileList=[];const o=n.isImageFile(e),s={name:e.name,size:n.formatFileSize(e.size),raw:e,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield n.createFilePreview(e)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const e=[];for(const t of Array.from(i)){const i=n.isImageFile(t),o={name:t.name,size:n.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:i};this.preview&&this.generatePreviewOnUpload&&i&&(o.url=yield n.createFilePreview(t)),this.fileList=[...this.fileList,o],e.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:e,fileList:this.fileList})}))}updateFileStatus(i,e,t){const o=this.fileList.find((e=>e.uid===i));o&&(o.status=e,void 0!==t&&(o.percentage=t),this._updateFile(o))}_updateFile(i){this.fileList=this.fileList.map((e=>e.uid===i.uid?i:e)),this.requestUpdate()}_removeFile(i){const e=this.fileList.find((e=>e.uid===i));this.fileList=this.fileList.filter((e=>e.uid!==i)),e&&this._dispatchEvent("remove",{file:e}),this.requestUpdate()}_dispatchEvent(i,e){this.dispatchEvent(new CustomEvent(`file-${i}`,{detail:e,bubbles:!0,composed:!0}))}_showPreview(i){this.previewImage=i}_closePreview(){this.previewImage=null}render(){return t`<div class="upload" @drop="${this._onDrop}" @dragover="${i=>i.preventDefault()}"><input type="file" class="hidden" accept="${this.accept}" ?multiple="${this.multiple}" @change="${this._onChange}"> ${this.showDragArea?t`<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?t`<div class="upload-tip">${this.tip}</div>`:""}</div>`:t`<nr-button @click="${this._onClick}">Upload File</nr-button>${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}`}<div class="file-list">${this.fileList.map((i=>t`<div class="file-item">${i.isImage?t`<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>`:t`<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">${i.name}</div><div class="file-size">${i.size}</div><div class="file-status">${"success"===i.status?t`<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>`:"error"===i.status?t`<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>`:"uploading"===i.status?t`${i.percentage}%`:""}</div><div class="file-actions">${i.isImage&&i.url?t`<button class="preview-icon" @click="${()=>this._showPreview(i.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(i.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>${"uploading"===i.status?t`<div class="progress-bar"><div class="progress-inner" style="width:${i.percentage}"></div></div>`:""}</div>${this.preview&&i.isImage&&i.url?t`<div class="file-preview"><img class="image-preview" src="${i.url}" alt="${i.name}" @click="${()=>this._showPreview(i.url)}"></div>`:""}`))}</div>${this.previewImage?t`<div class="preview-modal" @click="${this._closePreview}"><button class="preview-close">×</button> <img src="${this.previewImage}" alt="Preview"></div>`:""}</div>`}};h.styles=l,a([o({type:String})],h.prototype,"accept",void 0),a([o({type:Boolean})],h.prototype,"multiple",void 0),a([o({type:Boolean})],h.prototype,"drag",void 0),a([o({type:String})],h.prototype,"tip",void 0),a([o({type:Number})],h.prototype,"limit",void 0),a([o({type:Boolean})],h.prototype,"preview",void 0),a([o({type:Boolean})],h.prototype,"generatePreviewOnUpload",void 0),a([s()],h.prototype,"fileList",void 0),a([s()],h.prototype,"isDragOver",void 0),a([s()],h.prototype,"showDragArea",void 0),a([s()],h.prototype,"inputElement",void 0),a([s()],h.prototype,"dragCounter",void 0),a([s()],h.prototype,"previewImage",void 0),h=a([r("nr-file-upload")],h);export{h as FileUpload};
+import{css as i,LitElement as e,html as t}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";const n=i`
+:host {
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+.upload {
+  width: 100%;
+}
+.upload-dragger {
+  background-color: #f8f9fa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.3s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.upload-dragger:hover {
+  border-color: #409eff;
+}
+.upload-dragger.is-dragover {
+  background-color: rgba(64, 158, 255, 0.06);
+  border-color: #409eff;
+}
+.upload-icon {
+  font-size: 28px;
+  color: #c0c4cc;
+  margin-bottom: 8px;
+}
+.upload-text {
+  color: #606266;
+  font-size: 14px;
+  text-align: center;
+  padding: 0 12px;
+}
+.upload-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 7px;
+  padding: 0 12px;
+}
+.upload-button {
+  padding: 8px 16px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+.upload-button:hover {
+  background-color: #66b1ff;
+}
+.file-list {
+  margin-top: 10px;
+  width: 100%;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  transition: all 0.3s;
+  padding: 8px;
+  border-radius: 4px;
+  gap: 8px; 
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0; 
+  flex-wrap: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+.file-item:hover {
+  background-color: #f8f9fa;
+}
+.file-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  min-width: 0; 
+  max-width: 100%;
+  word-break: break-all; 
+  width: 0;
+}
+.file-size {
+  color: #909399;
+  font-size: 12px;
+  flex-shrink: 0;
+  margin-left: 8px; 
+  white-space: nowrap;
+}
+.file-status {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.file-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0; /* Prevent shrinking */
+}
+.file-actions button {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #909399;
+}
+.file-actions button:hover {
+  color: #409eff;
+}
+
+/* Progress bar styles - fixed to ensure full width */
+.progress-bar {
+  height: 2px;
+  width: 100%;
+  background-color: #e6e6e6;
+  margin-top: 4px;
+  position: relative;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.progress-inner {
+  height: 100%;
+  background-color: #409eff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: width 0.3s ease;
+}
+
+/* Progress percentage indicator */
+.progress-percentage {
+  position: absolute;
+  right: 0;
+  top: -18px;
+  font-size: 12px;
+  color: #409eff;
+}
+
+.hidden {
+  display: none;
+}
+.success {
+  color: #67c23a;
+}
+.error {
+  color: #f56c6c;
+}
+.icon-delete {
+  color: #f56c6c;
+}
+.file-preview {
+  width: 100%;
+  margin-top: 4px;
+}
+.image-preview {
+  display: block;
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: 4px;
+  object-fit: contain;
+  cursor: zoom-in;
+}
+.preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.preview-modal img {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+}
+.preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: white;
+  font-size: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.preview-icon {
+  padding: 4px;
+  color: #409eff;
+  cursor: zoom-in;
+}
+
+/* File item container with progress bar */
+.file-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden; /* Prevent child overflow */
+}
+
+/* Responsive styles */
+@media (max-width: 600px) {
+  .upload-dragger {
+    height: 140px;
+    padding: 12px;
+  }
+  .upload-icon {
+    font-size: 24px;
+  }
+  .upload-text,
+  .upload-tip {
+    font-size: 13px;
+  }
+  .file-item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 
+      "icon filename"
+      "size status"
+      "progress progress"
+      "actions actions";
+    gap: 4px 8px;
+    align-items: center;
+    padding: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden; /* Hide content that overflows */
+  }
+  .file-item > svg:first-child {
+    grid-area: icon;
+    align-self: start;
+  }
+  .file-name {
+    grid-area: filename;
+    margin: 0;
+    padding: 2px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 0; /* Force shrinking to minimum width */
+    max-width: 100%; /* Ensure it doesn't exceed its container */
+    word-break: break-all; /* Break extremely long words if necessary */
+    flex: 1; /* Take available space */
+  }
+  .file-size {
+    grid-area: size;
+    margin: 0;
+  }
+  .file-status {
+    grid-area: status;
+    justify-self: end;
+  }
+  .progress-bar {
+    grid-area: progress;
+    width: 100%;
+  }
+  .file-actions {
+    grid-area: actions;
+    margin: 4px 0 0 0;
+    justify-content: flex-end;
+    width: 100%;
+  }
+  .upload-button {
+    width: 100%;
+    font-size: 16px;
+  }
+}
+`,l={isImageFile:i=>i.type.startsWith("image/"),formatFileSize(i){if(0===i)return"0 B";const e=Math.floor(Math.log(i)/Math.log(1024));return parseFloat((i/Math.pow(1024,e)).toFixed(2))+" "+["B","KB","MB","GB","TB"][e]},createFilePreview:i=>new Promise((e=>{const t=new FileReader;t.onload=i=>{var t;e(null===(t=i.target)||void 0===t?void 0:t.result)},t.readAsDataURL(i)}))};var a=function(i,e,t,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o,l=i.length-1;l>=0;l--)(s=i[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},d=function(i,e,t,o){return new(t||(t=Promise))((function(s,r){function n(i){try{a(o.next(i))}catch(i){r(i)}}function l(i){try{a(o.throw(i))}catch(i){r(i)}}function a(i){var e;i.done?s(i.value):(e=i.value,e instanceof t?e:new t((function(i){i(e)}))).then(n,l)}a((o=o.apply(i,e||[])).next())}))};let h=class extends e{constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=i=>{i.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=i=>{i.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=i=>{i.target===this||this.contains(i.target)||(i.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=i=>{i.preventDefault();const e=i.composedPath().includes(this);this.isDragOver=!!e},this._onDrop=i=>{var e;i.preventDefault(),i.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(e=i.dataTransfer)||void 0===e?void 0:e.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:i.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:i.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(i.dataTransfer.files))},this._onClick=()=>{var i;null===(i=this.inputElement)||void 0===i||i.click()},this._onChange=i=>{const e=i.target;e.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.files,bubbles:!0,composed:!0})),this._handleFiles(e.files),e.value="")}}connectedCallback(){super.connectedCallback(),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(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(i){var e;super.firstUpdated(i),this.inputElement=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="file"]'))||null}_handleFiles(i){return d(this,void 0,void 0,(function*(){if(this.multiple&&this.limit>0&&this.fileList.length+i.length>this.limit)return void this._dispatchEvent("exceed",{files:i});if(!this.multiple&&i.length>0){const e=i[i.length-1];this.previewImage&&this.fileList.some((i=>i.url===this.previewImage))&&(this.previewImage=null);const t=[...this.fileList];for(const i of t)this._dispatchEvent("remove",{file:i});this.fileList=[];const o=l.isImageFile(e),s={name:e.name,size:l.formatFileSize(e.size),raw:e,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield l.createFilePreview(e)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const e=[];for(const t of Array.from(i)){const i=l.isImageFile(t),o={name:t.name,size:l.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:i};this.preview&&this.generatePreviewOnUpload&&i&&(o.url=yield l.createFilePreview(t)),this.fileList=[...this.fileList,o],e.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:e,fileList:this.fileList})}))}updateFileStatus(i,e,t){const o=this.fileList.find((e=>e.uid===i));o&&(o.status=e,void 0!==t&&(o.percentage=t),this._updateFile(o))}_updateFile(i){this.fileList=this.fileList.map((e=>e.uid===i.uid?i:e)),this.requestUpdate()}_removeFile(i){const e=this.fileList.find((e=>e.uid===i));this.fileList=this.fileList.filter((e=>e.uid!==i)),e&&this._dispatchEvent("remove",{file:e}),this.requestUpdate()}_dispatchEvent(i,e){this.dispatchEvent(new CustomEvent(`file-${i}`,{detail:e,bubbles:!0,composed:!0}))}_showPreview(i){this.previewImage=i}_closePreview(){this.previewImage=null}render(){return t`
+      <div class="upload" @drop=${this._onDrop} @dragover=${i=>i.preventDefault()}>
+        <input 
+          type="file" 
+          class="hidden" 
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          @change=${this._onChange}
+        />
+
+        ${this.showDragArea?t`
+          <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?t`<div class="upload-tip">${this.tip}</div>`:""}
+          </div>
+        `:t`
+        <nr-button  @click=${this._onClick}>Upload File</nr-button>
+          ${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}
+        `}
+
+        <div class="file-list">
+          ${this.fileList.map((i=>t`
+            <div class="file-item">
+              ${i.isImage?t`
+                <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>
+              `:t`
+                <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">${i.name}</div>
+              <div class="file-size">${i.size}</div>
+              <div class="file-status">
+                ${"success"===i.status?t`
+                  <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>
+                `:"error"===i.status?t`
+                  <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>
+                `:"uploading"===i.status?t`${i.percentage}%`:""}
+              </div>
+              <div class="file-actions">
+                ${i.isImage&&i.url?t`
+                  <button class="preview-icon" @click=${()=>this._showPreview(i.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(i.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>
+              ${"uploading"===i.status?t`
+                <div class="progress-bar">
+                  <div class="progress-inner" style="width: ${i.percentage}%"></div>
+                </div>
+              `:""}
+            </div>
+            ${this.preview&&i.isImage&&i.url?t`
+              <div class="file-preview">
+                <img 
+                  class="image-preview" 
+                  src="${i.url}" 
+                  alt="${i.name}" 
+                  @click=${()=>this._showPreview(i.url)}
+                />
+              </div>
+            `:""}
+          `))}
+        </div>
+
+        ${this.previewImage?t`
+          <div class="preview-modal" @click=${this._closePreview}>
+            <button class="preview-close">×</button>
+            <img src="${this.previewImage}" alt="Preview" />
+          </div>
+        `:""}
+      </div>
+    `}};h.styles=n,a([o({type:String})],h.prototype,"accept",void 0),a([o({type:Boolean})],h.prototype,"multiple",void 0),a([o({type:Boolean})],h.prototype,"drag",void 0),a([o({type:String})],h.prototype,"tip",void 0),a([o({type:Number})],h.prototype,"limit",void 0),a([o({type:Boolean})],h.prototype,"preview",void 0),a([o({type:Boolean})],h.prototype,"generatePreviewOnUpload",void 0),a([s()],h.prototype,"fileList",void 0),a([s()],h.prototype,"isDragOver",void 0),a([s()],h.prototype,"showDragArea",void 0),a([s()],h.prototype,"inputElement",void 0),a([s()],h.prototype,"dragCounter",void 0),a([s()],h.prototype,"previewImage",void 0),h=a([r("nr-file-upload")],h);export{h as FileUpload};

package/package.json

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