@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/command-palette.d.mts

@@ -0,0 +1,8 @@
+/** 打开指定 id 的命令面板。 */
+declare function openCommandPalette(id: string): void;
+/** 关闭指定 id 的命令面板（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。 */
+declare function closeCommandPalette(id: string): void;
+/** 初始化：委托监听触发器 / 搜索 / 外点 / 全局快捷键。 */
+declare function initCommandPalette(root?: ParentNode): void;
+
+export { closeCommandPalette, initCommandPalette, openCommandPalette };

package/dist/behaviors/command-palette.mjs

@@ -0,0 +1,189 @@
+// src/behaviors/command-palette.ts
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openId = null;
+var restoreFocusTo = null;
+var prevBodyOverflow = "";
+var keyHandler = null;
+var globalKeyHandler = null;
+var initialized = false;
+function findBackdrop(id) {
+  return document.querySelector(
+    `.command-palette-backdrop[data-command-palette="${CSS.escape(id)}"]`
+  );
+}
+function getVisibleItems(panel) {
+  return Array.from(
+    panel.querySelectorAll(
+      '.command-palette-item:not([hidden]):not([disabled]):not([aria-disabled="true"])'
+    )
+  ).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+}
+function isDisabledItem(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+}
+function setActive(panel, idx) {
+  const items = getVisibleItems(panel);
+  items.forEach((el, i) => el.classList.toggle("is-active", i === idx));
+  const active = items[idx];
+  if (active && typeof active.scrollIntoView === "function") {
+    active.scrollIntoView({ block: "nearest" });
+  }
+}
+function filterPanel(panel, query) {
+  const q = query.trim().toLowerCase();
+  let visibleCount = 0;
+  panel.querySelectorAll(".command-palette-item").forEach((item) => {
+    if (isDisabledItem(item)) return;
+    const label = (item.querySelector(".command-palette-item-label")?.textContent ?? "").toLowerCase();
+    const hint = (item.querySelector(".command-palette-item-hint")?.textContent ?? "").toLowerCase();
+    const keyword = (item.dataset.commandPaletteKeyword ?? "").toLowerCase();
+    const match = !q || label.includes(q) || hint.includes(q) || keyword.includes(q);
+    item.hidden = !match;
+    item.classList.remove("is-active");
+    if (match) visibleCount++;
+  });
+  panel.querySelectorAll(".command-palette-group").forEach((group) => {
+    const hasVisible = Array.from(group.querySelectorAll(".command-palette-item")).some(
+      (it) => !it.hidden
+    );
+    group.hidden = !hasVisible;
+  });
+  const empty = panel.querySelector(".command-palette-empty");
+  if (empty) empty.hidden = visibleCount !== 0;
+  if (visibleCount > 0) setActive(panel, 0);
+}
+function openCommandPalette(id) {
+  if (typeof document === "undefined") return;
+  if (openId === id) return;
+  if (openId) closeCommandPalette(openId);
+  const backdrop = findBackdrop(id);
+  if (!backdrop) {
+    console.warn(`[@icen.ai/ui] command-palette: \u672A\u627E\u5230 data-command-palette="${id}" \u7684 .command-palette-backdrop\uFF0C\u5DF2\u8DF3\u8FC7\u6253\u5F00`);
+    return;
+  }
+  const panel = backdrop.querySelector(".command-palette");
+  if (!panel) return;
+  if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
+  restoreFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  openId = id;
+  backdrop.hidden = false;
+  prevBodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  const input = panel.querySelector(".command-palette-input");
+  if (input) {
+    input.value = "";
+    input.focus();
+  } else {
+    panel.focus();
+  }
+  filterPanel(panel, "");
+  keyHandler = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeCommandPalette(id);
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = getVisibleItems(panel);
+      if (items.length === 0) return;
+      const cur = items.findIndex((el) => el.classList.contains("is-active"));
+      const next = e.key === "ArrowDown" ? (cur + 1) % items.length : (cur - 1 + items.length) % items.length;
+      setActive(panel, next);
+      return;
+    }
+    if (e.key === "Enter") {
+      const active = panel.querySelector(".command-palette-item.is-active");
+      if (active && !isDisabledItem(active)) {
+        e.preventDefault();
+        active.click();
+      }
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const els = Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+        (el) => !el.hidden && el.offsetParent !== null
+      );
+      if (els.length === 0) return;
+      const cur = els.findIndex((el) => el === document.activeElement);
+      const next = e.shiftKey ? (cur - 1 + els.length) % els.length : (cur + 1) % els.length;
+      els[next]?.focus();
+    }
+  };
+  window.addEventListener("keydown", keyHandler);
+}
+function closeCommandPalette(id) {
+  if (typeof document === "undefined") return;
+  const backdrop = findBackdrop(id);
+  if (backdrop) backdrop.hidden = true;
+  if (openId !== id) return;
+  openId = null;
+  if (keyHandler) {
+    window.removeEventListener("keydown", keyHandler);
+    keyHandler = null;
+  }
+  document.body.style.overflow = prevBodyOverflow;
+  if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
+  restoreFocusTo = null;
+}
+function initCommandPalette(root) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-command-palette-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  if (initialized) return;
+  initialized = true;
+  document.addEventListener("click", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const opener = target.closest("[data-command-palette-open]");
+    if (opener?.dataset.commandPaletteOpen) {
+      openCommandPalette(opener.dataset.commandPaletteOpen);
+      return;
+    }
+    const item = target.closest(".command-palette-item");
+    if (item) {
+      const backdrop = item.closest("[data-command-palette]");
+      if (backdrop?.dataset.commandPalette) {
+        if (!item.hasAttribute("data-command-palette-keep-open")) {
+          closeCommandPalette(backdrop.dataset.commandPalette);
+        }
+      }
+      return;
+    }
+    if (target instanceof HTMLElement && target.classList.contains("command-palette-backdrop") && target.dataset.commandPalette) {
+      closeCommandPalette(target.dataset.commandPalette);
+    }
+  });
+  document.addEventListener("input", (e) => {
+    if (!(e.target instanceof HTMLElement)) return;
+    if (!e.target.matches(".command-palette-input")) return;
+    const backdrop = e.target.closest("[data-command-palette]");
+    const panel = backdrop?.querySelector(".command-palette");
+    if (panel) filterPanel(panel, e.target.value);
+  });
+  globalKeyHandler = (e) => {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    const key = e.key.toLowerCase();
+    const palettes = document.querySelectorAll(
+      ".command-palette-backdrop[data-command-palette]"
+    );
+    for (const backdrop of Array.from(palettes)) {
+      const paletteKey = (backdrop.dataset.commandPaletteKey ?? "k").toLowerCase();
+      if (paletteKey !== key) continue;
+      const id = backdrop.dataset.commandPalette;
+      if (!id) continue;
+      e.preventDefault();
+      if (openId === id) closeCommandPalette(id);
+      else openCommandPalette(id);
+      return;
+    }
+  };
+  window.addEventListener("keydown", globalKeyHandler);
+}
+export {
+  closeCommandPalette,
+  initCommandPalette,
+  openCommandPalette
+};

package/dist/behaviors/context-menu.d.mts

@@ -0,0 +1,36 @@
+interface ContextMenuEntry {
+    label: string;
+    subLabel?: string;
+    /** 可信 svg 字符串（唯一走 innerHTML 的字段） */
+    icon?: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface ContextMenuSeparator {
+    type: 'separator';
+}
+interface ContextMenuHeader {
+    type: 'header';
+    label: string;
+    description?: string;
+}
+type ContextMenuItem = ContextMenuEntry | ContextMenuSeparator | ContextMenuHeader;
+interface ContextMenuOptions {
+    /** 替换内置默认菜单（未命中任何注册 id 时使用） */
+    items?: ContextMenuItem[];
+}
+/** 注册指定 id 的右键菜单项（对应 DOM 中的 [data-context-menu="id"]）。 */
+declare function registerContextMenu(id: string, items: ContextMenuItem[]): void;
+/** 在 (x, y) 打开右键菜单（视口边缘自动翻转并 clamp）。 */
+declare function openContextMenu(x: number, y: number, items: ContextMenuItem[]): void;
+/** 关闭当前右键菜单（未打开时为 no-op）。 */
+declare function closeMenu(): void;
+/**
+ * 启动全局右键菜单（重复调用安全）。
+ * opts.items 提供时替换内置默认菜单。
+ */
+declare function initContextMenu(opts?: ContextMenuOptions): void;
+
+export { type ContextMenuEntry, type ContextMenuHeader, type ContextMenuItem, type ContextMenuOptions, type ContextMenuSeparator, closeMenu, initContextMenu, openContextMenu, registerContextMenu };

package/dist/behaviors/context-menu.mjs

@@ -127,7 +127,7 @@ function openContextMenu(x, y, items) {
     setFocused(0);
   });
   document.addEventListener("pointerdown", onOutsidePointerDown, true);
-  document.addEventListener("scroll", onCloseSignal, true);
+  document.addEventListener("scroll", onScrollSignal, true);
   window.addEventListener("resize", onCloseSignal);
   window.addEventListener("keydown", onKeyDown);
 }
@@ -138,7 +138,7 @@ function closeMenu() {
   focusableItems = [];
   focusedIndex = -1;
   document.removeEventListener("pointerdown", onOutsidePointerDown, true);
-  document.removeEventListener("scroll", onCloseSignal, true);
+  document.removeEventListener("scroll", onScrollSignal, true);
   window.removeEventListener("resize", onCloseSignal);
   window.removeEventListener("keydown", onKeyDown);
 }
@@ -152,6 +152,10 @@ function onOutsidePointerDown(e) {
   const target = e.target;
   if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
 }
+function onScrollSignal(e) {
+  if (panel && e.target instanceof Node && panel.contains(e.target)) return;
+  closeMenu();
+}
 function onCloseSignal() {
   closeMenu();
 }

package/dist/behaviors/copy.d.mts

@@ -0,0 +1,4 @@
+/** 委托监听 click；同一 root（含默认的 document）重复调用幂等。 */
+declare function initCopy(root?: ParentNode): void;
+
+export { initCopy };

package/dist/behaviors/copy.mjs

@@ -34,10 +34,10 @@ function flashDone(btn) {
   const iconOnly = btn.hasAttribute("data-copy-icon");
   const original = prev ? prev.original : iconOnly ? null : btn.textContent;
   if (!iconOnly) btn.textContent = "\u5DF2\u590D\u5236";
-  btn.classList.add("done");
+  btn.classList.add("is-done");
   const timer = window.setTimeout(() => {
     if (!iconOnly) btn.textContent = original;
-    btn.classList.remove("done");
+    btn.classList.remove("is-done");
     flashing.delete(btn);
   }, 1400);
   flashing.set(btn, { original, timer });
@@ -52,11 +52,12 @@ function onClick(root, ev) {
     if (ok) flashDone(btn);
   });
 }
-function initCopy(root = document) {
+function initCopy(root) {
   if (typeof document === "undefined") return;
-  if (initialized.has(root)) return;
-  initialized.add(root);
-  root.addEventListener("click", (ev) => onClick(root, ev));
+  const scope = root ?? document;
+  if (initialized.has(scope)) return;
+  initialized.add(scope);
+  scope.addEventListener("click", (ev) => onClick(scope, ev));
 }
 export {
   initCopy

package/dist/behaviors/datatable.d.mts

@@ -0,0 +1,78 @@
+import { ContextMenuItem } from './context-menu.js';
+
+interface TableColumn<Row = Record<string, unknown>> {
+    key: string;
+    title: string;
+    /** CSS 宽度：'72px' / '120px' / '2fr'；缺省 minmax(0,1fr) */
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    /** 自定义比较（默认：数字感知的 localeCompare） */
+    sortFn?: (a: Row, b: Row) => number;
+    filterable?: boolean;
+    /** 返回 Node 可嵌套任意组件；返回 string/number 走 textContent（安全） */
+    render?: (value: unknown, row: Row, rowIndex: number) => Node | string | number | null;
+    hidden?: boolean;
+    /** 冻结列（左固定，横向滚动时不跟随） */
+    frozen?: boolean;
+}
+interface TableOptions<Row = Record<string, unknown>> {
+    columns: TableColumn<Row>[];
+    data: Row[];
+    /** 行唯一键：字段名或函数（多选/展开跨页保持的依据），缺省用行索引 */
+    rowKey?: keyof Row | ((row: Row) => string);
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    /** 分页（默认开启，pageSize 默认 10 条/页；传 false 关闭；virtual 时忽略） */
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizes?: number[];
+    /** 虚拟滚动（大数据量；与 pagination 互斥，virtual 优先） */
+    virtual?: boolean;
+    /** 虚拟行高 px（默认 44）与窗口高度（默认 '420px'） */
+    rowHeight?: number;
+    height?: string;
+    /** 行展开内容（虚拟模式下忽略） */
+    expandable?: (row: Row) => Node | string;
+    /** 行右键菜单（复用 context-menu；需 menu.css，kit 入口已带） */
+    contextMenu?: (row: Row) => ContextMenuItem[];
+    striped?: boolean;
+    emptyLabel?: string;
+    loading?: boolean;
+    /** 密度：normal 默认 44px 行高 / compact 紧凑 32px */
+    density?: 'normal' | 'compact';
+    /** 列宽可拖拽调整（默认 true） */
+    resizable?: boolean;
+    /** 工具栏列显隐开关（默认 false） */
+    columnVisibility?: boolean;
+    /** 导出 CSV 按钮显示在工具栏（默认 false） */
+    exportable?: boolean;
+    /** 行自定义 class（条件着色 / 状态行） */
+    rowClassName?: (row: Row, index: number) => string;
+    onSelectionChange?: (rows: Row[]) => void;
+    onRowClick?: (row: Row) => void;
+    onSortChange?: (key: string | null, dir: 'asc' | 'desc') => void;
+}
+interface TableHandle<Row = Record<string, unknown>> {
+    setData(data: Row[]): void;
+    getSelected(): Row[];
+    clearSelection(): void;
+    setSearch(query: string): void;
+    /** values=null 清除该列筛选 */
+    setFilter(key: string, values: string[] | null): void;
+    setSort(key: string | null, dir?: 'asc' | 'desc'): void;
+    /** 获取当前管线（搜索→筛选→排序）后的数据 */
+    getData(): Row[];
+    /** 导出当前管线数据为 CSV 并触发下载 */
+    exportCSV(filename?: string): void;
+    /** 显示/隐藏列 */
+    showColumn(key: string): void;
+    hideColumn(key: string): void;
+    /** 数据被外部原地修改后重渲 */
+    refresh(): void;
+    destroy(): void;
+}
+declare function createTable<Row = Record<string, unknown>>(el: HTMLElement, opts: TableOptions<Row>): TableHandle<Row>;
+
+export { type TableColumn, type TableHandle, type TableOptions, createTable };

package/dist/behaviors/datatable.mjs

@@ -87,7 +87,7 @@ function openContextMenu(x, y, items) {
     setFocused(0);
   });
   document.addEventListener("pointerdown", onOutsidePointerDown, true);
-  document.addEventListener("scroll", onCloseSignal, true);
+  document.addEventListener("scroll", onScrollSignal, true);
   window.addEventListener("resize", onCloseSignal);
   window.addEventListener("keydown", onKeyDown);
 }
@@ -98,7 +98,7 @@ function closeMenu() {
   focusableItems = [];
   focusedIndex = -1;
   document.removeEventListener("pointerdown", onOutsidePointerDown, true);
-  document.removeEventListener("scroll", onCloseSignal, true);
+  document.removeEventListener("scroll", onScrollSignal, true);
   window.removeEventListener("resize", onCloseSignal);
   window.removeEventListener("keydown", onKeyDown);
 }
@@ -112,6 +112,10 @@ function onOutsidePointerDown(e) {
   const target = e.target;
   if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
 }
+function onScrollSignal(e) {
+  if (panel && e.target instanceof Node && panel.contains(e.target)) return;
+  closeMenu();
+}
 function onCloseSignal() {
   closeMenu();
 }
@@ -410,7 +414,7 @@ function createTable(el, opts) {
         else allKeys.forEach((k) => selected.delete(k));
         emitSelection();
         renderBody();
-        renderHead();
+        syncHeadState();
       });
       cell.appendChild(box);
       headRow.appendChild(cell);
@@ -466,6 +470,7 @@ function createTable(el, opts) {
         const btn = document.createElement("button");
         btn.type = "button";
         btn.className = "dt-filter-btn";
+        btn.dataset.colKey = col.key;
         if (hasFilter) btn.classList.add("is-active");
         btn.setAttribute("aria-label", `\u7B5B\u9009\u300C${col.title}\u300D`);
         btn.appendChild(svgIcon(ICON_FUNNEL, 12));
@@ -491,6 +496,33 @@ function createTable(el, opts) {
       headRow.appendChild(cell);
     }
   }
+  function syncHeadState() {
+    const headBox = headRow.querySelector(".dt-cell--check .dt-check");
+    if (headBox) {
+      const allKeys = pipeline().map((r) => keyOfRow(r));
+      const selCount = allKeys.filter((k) => selected.has(k)).length;
+      headBox.checked = selCount > 0 && selCount === allKeys.length;
+      headBox.indeterminate = selCount > 0 && selCount < allKeys.length;
+    }
+    headRow.querySelectorAll(".dt-filter-btn").forEach((b) => {
+      const key = b.dataset.colKey;
+      if (key) b.classList.toggle("is-active", filters.has(key));
+    });
+  }
+  function renderHeadKeepPanel() {
+    const keep = openPanel;
+    renderHead();
+    if (!keep) return;
+    openPanel = keep;
+    document.body.appendChild(keep.el);
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+    if (keep.key !== "__cols") {
+      headRow.querySelectorAll(".dt-filter-btn").forEach((b) => {
+        if (b.dataset.colKey === keep.key) b.classList.add("is-open");
+      });
+    }
+  }
   function attachResize(handle, col) {
     handle.addEventListener("pointerdown", (ev) => {
       ev.preventDefault();
@@ -508,12 +540,17 @@ function createTable(el, opts) {
         });
       };
       const onUp = (e) => {
-        handle.releasePointerCapture(e.pointerId);
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch {
+        }
         handle.removeEventListener("pointermove", onMove);
         handle.removeEventListener("pointerup", onUp);
+        handle.removeEventListener("pointercancel", onUp);
       };
       handle.addEventListener("pointermove", onMove);
       handle.addEventListener("pointerup", onUp);
+      handle.addEventListener("pointercancel", onUp);
     });
   }
   function openColumnPanel(btn) {
@@ -533,7 +570,8 @@ function createTable(el, opts) {
         if (box.checked) colHidden.delete(col.key);
         else colHidden.set(col.key, true);
         invalidate();
-        renderAll();
+        renderBody();
+        renderHeadKeepPanel();
       });
       const text = document.createElement("span");
       text.textContent = col.title;
@@ -569,7 +607,7 @@ function createTable(el, opts) {
     a.href = url;
     a.download = filename ?? "export.csv";
     a.click();
-    URL.revokeObjectURL(url);
+    window.setTimeout(() => URL.revokeObjectURL(url), 1e3);
   }
   function csvEscape(s) {
     if (/[",\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
@@ -595,7 +633,8 @@ function createTable(el, opts) {
         else filters.set(col.key, cur);
         invalidate();
         page = 1;
-        renderAll();
+        renderBody();
+        syncHeadState();
       });
       const text = document.createElement("span");
       text.textContent = v === "" ? "\uFF08\u7A7A\uFF09" : v;
@@ -612,8 +651,11 @@ function createTable(el, opts) {
       filters.delete(col.key);
       invalidate();
       page = 1;
-      closeFilterPanel();
-      renderAll();
+      list.querySelectorAll(".dt-check").forEach((b) => {
+        b.checked = true;
+      });
+      renderBody();
+      syncHeadState();
     });
     footRow.appendChild(reset);
     panel2.append(list, footRow);
@@ -661,7 +703,7 @@ function createTable(el, opts) {
         }
         lastClickedIndex = rowIndex;
         emitSelection();
-        renderHead();
+        syncHeadState();
         renderFoot(pipeline().length);
       });
       cell.appendChild(box);
@@ -797,7 +839,8 @@ function createTable(el, opts) {
       clear.addEventListener("click", () => {
         selected.clear();
         emitSelection();
-        renderAll();
+        renderBody();
+        syncHeadState();
       });
       sel.appendChild(clear);
       foot.appendChild(sel);

package/dist/behaviors/date-picker.d.mts

@@ -0,0 +1,4 @@
+/** 初始化：扫描 root 下的 .date-picker[data-date-picker]。 */
+declare function initDatePicker(root?: ParentNode): void;
+
+export { initDatePicker };