@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/upload.mjs

@@ -18,6 +18,19 @@ function isAccepted(file, accept) {
 }
 var fileIconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
 var xIconSvg = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+function parseSvg(source) {
+  try {
+    const doc = new DOMParser().parseFromString(source, "image/svg+xml");
+    const svg = doc.documentElement;
+    if (!svg || svg.tagName.toLowerCase() !== "svg") return null;
+    return document.importNode(svg, true);
+  } catch {
+    return null;
+  }
+}
+function sameFile(a, b) {
+  return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+}
 function setup(zone) {
   const el = zone;
   if (el.__icenUploadInit) return;
@@ -30,6 +43,7 @@ function setup(zone) {
   const accept = input.getAttribute("accept") ?? "";
   let currentFiles = [];
   const urlMap = /* @__PURE__ */ new Map();
+  let syncing = false;
   function getListEl() {
     if (!hasList) return null;
     let list = zone.querySelector(".upload-list");
@@ -43,8 +57,12 @@ function setup(zone) {
   function renderList() {
     const list = getListEl();
     if (!list) return;
-    urlMap.forEach((url) => URL.revokeObjectURL(url));
-    urlMap.clear();
+    urlMap.forEach((url, f) => {
+      if (!currentFiles.includes(f)) {
+        URL.revokeObjectURL(url);
+        urlMap.delete(f);
+      }
+    });
     list.textContent = "";
     if (currentFiles.length === 0) {
       list.hidden = true;
@@ -55,25 +73,29 @@ function setup(zone) {
       const li = document.createElement("li");
       li.className = "upload-list-item";
       const isImage = file.type.startsWith("image/");
+      let thumbUrl;
       if (isImage) {
-        try {
-          const url = URL.createObjectURL(file);
-          urlMap.set(file, url);
-          const img = document.createElement("img");
-          img.className = "upload-list-item-thumb";
-          img.src = url;
-          img.alt = file.name;
-          li.appendChild(img);
-        } catch {
-          const icon = document.createElement("span");
-          icon.className = "upload-list-item-icon";
-          icon.innerHTML = fileIconSvg;
-          li.appendChild(icon);
+        thumbUrl = urlMap.get(file);
+        if (!thumbUrl) {
+          try {
+            thumbUrl = URL.createObjectURL(file);
+            urlMap.set(file, thumbUrl);
+          } catch {
+            thumbUrl = void 0;
+          }
         }
+      }
+      if (thumbUrl) {
+        const img = document.createElement("img");
+        img.className = "upload-list-item-thumb";
+        img.src = thumbUrl;
+        img.alt = file.name;
+        li.appendChild(img);
       } else {
         const icon = document.createElement("span");
         icon.className = "upload-list-item-icon";
-        icon.innerHTML = fileIconSvg;
+        const svg = parseSvg(fileIconSvg);
+        if (svg) icon.appendChild(svg);
         li.appendChild(icon);
       }
       const info = document.createElement("div");
@@ -91,7 +113,8 @@ function setup(zone) {
       removeBtn.className = "upload-list-item-x";
       removeBtn.type = "button";
       removeBtn.setAttribute("aria-label", `\u79FB\u9664 ${file.name}`);
-      removeBtn.innerHTML = xIconSvg;
+      const xSvg = parseSvg(xIconSvg);
+      if (xSvg) removeBtn.appendChild(xSvg);
       removeBtn.addEventListener("click", (ev) => {
         ev.stopPropagation();
         currentFiles = currentFiles.filter((f) => f !== file);
@@ -107,9 +130,12 @@ function setup(zone) {
     try {
       const dt = new DataTransfer();
       for (const f of currentFiles) dt.items.add(f);
+      syncing = true;
       input.files = dt.files;
       input.dispatchEvent(new Event("change", { bubbles: true }));
     } catch {
+    } finally {
+      syncing = false;
     }
   }
   function validate(file) {
@@ -129,20 +155,28 @@ function setup(zone) {
     }
     if (valid.length === 0) return;
     if (hasList) {
+      const fresh = [];
+      for (const f of valid) {
+        if (currentFiles.some((c) => sameFile(c, f)) || fresh.some((c) => sameFile(c, f))) continue;
+        fresh.push(f);
+      }
+      if (fresh.length === 0) return;
       if (maxFiles > 0) {
         const remaining = maxFiles - currentFiles.length;
         if (remaining <= 0) {
           zone.dispatchEvent(new CustomEvent("icen:upload-error", {
             bubbles: true,
-            detail: { reason: `\u6700\u591A ${maxFiles} \u4E2A\u6587\u4EF6` }
+            detail: { file: null, reason: `\u6700\u591A ${maxFiles} \u4E2A\u6587\u4EF6` }
           }));
           return;
         }
-        valid.splice(remaining);
+        if (fresh.length > remaining) fresh.length = remaining;
       }
-      currentFiles.push(...valid);
+      currentFiles.push(...fresh);
       renderList();
       syncInputFiles();
+      zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: fresh } }));
+      return;
     }
     zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: valid } }));
   }
@@ -160,14 +194,13 @@ function setup(zone) {
     }
   });
   input.addEventListener("change", () => {
+    if (syncing) return;
     if (!input.files) return;
     const files = Array.from(input.files);
     if (hasList) {
-      handleFiles(files);
       input.value = "";
-    } else {
-      handleFiles(files);
     }
+    handleFiles(files);
   });
   zone.addEventListener("dragover", (ev) => {
     ev.preventDefault();
@@ -186,18 +219,22 @@ function setup(zone) {
       try {
         const dt = new DataTransfer();
         for (const f of Array.from(files)) dt.items.add(f);
+        syncing = true;
         input.files = dt.files;
         input.dispatchEvent(new Event("change", { bubbles: true }));
       } catch {
+      } finally {
+        syncing = false;
       }
     }
   });
 }
-function initUpload(root = document) {
+function initUpload(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const zones = [];
-  if (root instanceof HTMLElement && root.matches(".upload")) zones.push(root);
-  zones.push(...Array.from(root.querySelectorAll(".upload")));
+  if (scope instanceof HTMLElement && scope.matches(".upload")) zones.push(scope);
+  zones.push(...Array.from(scope.querySelectorAll(".upload")));
   for (const z of zones) setup(z);
 }
 export {