@icen.ai/ui 0.5.0 → 0.8.1

package/dist/behaviors/upload.mjs

@@ -1,3 +1,10 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/upload.ts
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -18,18 +25,32 @@ 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;
-  el.__icenUploadInit = true;
   const input = zone.querySelector('input[type="file"]');
   if (!input) return;
+  el.__icenUploadInit = true;
   const hasList = zone.hasAttribute("data-upload-list");
   const maxSize = Number(zone.getAttribute("data-max-size")) || 0;
   const maxFiles = Number(zone.getAttribute("data-max-files")) || 0;
   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 +64,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 +80,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,11 +120,12 @@ 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);
-        zone.dispatchEvent(new CustomEvent("icen:upload-remove", { bubbles: true, detail: { file } }));
+        emitIcen(zone, "icen:upload-remove", { file });
         renderList();
         syncInputFiles();
       });
@@ -103,15 +133,21 @@ function setup(zone) {
       list.appendChild(li);
     }
   }
-  function syncInputFiles() {
+  function setInputFiles(files) {
     try {
       const dt = new DataTransfer();
-      for (const f of currentFiles) dt.items.add(f);
+      for (const f of files) dt.items.add(f);
+      syncing = true;
       input.files = dt.files;
       input.dispatchEvent(new Event("change", { bubbles: true }));
     } catch {
+    } finally {
+      syncing = false;
     }
   }
+  function syncInputFiles() {
+    setInputFiles(currentFiles);
+  }
   function validate(file) {
     if (accept && !isAccepted(file, accept)) return "\u6587\u4EF6\u7C7B\u578B\u4E0D\u652F\u6301";
     if (maxSize > 0 && file.size > maxSize) return `\u6587\u4EF6\u8D85\u8FC7 ${formatSize(maxSize)}`;
@@ -122,29 +158,34 @@ function setup(zone) {
     for (const file of files) {
       const reason = validate(file);
       if (reason) {
-        zone.dispatchEvent(new CustomEvent("icen:upload-error", { bubbles: true, detail: { file, reason } }));
+        emitIcen(zone, "icen:upload-error", { file, reason });
         continue;
       }
       valid.push(file);
     }
     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` }
-          }));
+          emitIcen(zone, "icen:upload-error", { 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();
+      emitIcen(zone, "icen:upload", { files: fresh });
+      return;
     }
-    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: valid } }));
+    emitIcen(zone, "icen:upload", { files: valid });
   }
   const openPicker = () => input.click();
   zone.addEventListener("click", (ev) => {
@@ -155,19 +196,20 @@ function setup(zone) {
   });
   zone.addEventListener("keydown", (ev) => {
     if (ev.key === "Enter" || ev.key === " ") {
+      const tgt = ev.target;
+      if (tgt instanceof Element && tgt.closest(".upload-list")) return;
       ev.preventDefault();
       openPicker();
     }
   });
   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();
@@ -182,22 +224,15 @@ function setup(zone) {
     const files = ev.dataTransfer?.files;
     if (!files || files.length === 0) return;
     handleFiles(Array.from(files));
-    if (!hasList) {
-      try {
-        const dt = new DataTransfer();
-        for (const f of Array.from(files)) dt.items.add(f);
-        input.files = dt.files;
-        input.dispatchEvent(new Event("change", { bubbles: true }));
-      } catch {
-      }
-    }
+    if (!hasList) setInputFiles(Array.from(files));
   });
 }
-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 {

package/dist/cli.mjs

@@ -7,7 +7,7 @@
  * 用法：
  *   bunx --bun @icen.ai/ui add <slug...>   打印引入行（多个 slug 空格分隔）
  *   bunx --bun @icen.ai/ui list            列出全部组件 slug
- * 数据源：同目录 registry.json（构建期由 scripts/slugs.mjs 生成）。
+ * 数据源：同目录 registry.json（构建期由 scripts/build-css.ts 写入，映射数据源为 scripts/slugs.mjs）。
  */
 import { readFileSync } from 'node:fs';