@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/dropdown.mjs

@@ -75,7 +75,10 @@ function onOutsidePointerDown(e) {
   if (active.panel.contains(target) || active.trigger.contains(target)) return;
   closeDropdown();
 }
-function onScroll() {
+function onScroll(e) {
+  if (!active) return;
+  const target = e.target;
+  if (target instanceof Node && active.panel.contains(target)) return;
   closeDropdown();
 }
 function onKeyDown(e) {
@@ -101,9 +104,10 @@ function onKeyDown(e) {
     item.click();
   }
 }
-function initDropdown(root = document) {
+function initDropdown(root) {
   if (typeof document === "undefined") return;
-  root.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
   if (initialized) return;
   initialized = true;
   document.addEventListener("click", (e) => {

package/dist/behaviors/input.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下所有输入类结构初始化（root 自身匹配也算）。幂等。 */
+declare function initInput(root?: ParentNode): void;
+
+export { initInput };

package/dist/behaviors/input.mjs

@@ -53,9 +53,12 @@ function setupAutosize(ta) {
   resizeTextarea(ta);
 }
 function setupCounter(field) {
+  const el = field;
+  if (el.__icenCounterInit) return;
   const maxAttr = field.getAttribute("maxlength");
   const dataCount = field.getAttribute("data-count");
   if (!maxAttr && dataCount === null) return;
+  el.__icenCounterInit = true;
   const max = maxAttr ? Number(maxAttr) : 0;
   let counter = null;
   const wrap = field.closest(".input-wrap, .textarea-wrap");
@@ -88,8 +91,11 @@ function setupCounter(field) {
   update();
 }
 function setupMask(field) {
+  const el = field;
+  if (el.__icenMaskInit) return;
   const mask = field.getAttribute("data-mask");
   if (!mask) return;
+  el.__icenMaskInit = true;
   const maskChars = [];
   for (const ch of mask) maskChars.push(ch);
   function isInputSlot(ch) {
@@ -163,10 +169,6 @@ function setupMask(field) {
     if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
     if (["Backspace", "Delete", "Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End", "Enter"].includes(ev.key)) return;
     const currentRaw = extractRaw(field.value);
-    const nextSlotIdx = maskChars.findIndex((ch, i) => {
-      if (!isInputSlot(ch)) return false;
-      return i >= field.value.length || !isInputSlot(maskChars[Math.min(field.value.length, maskChars.length - 1)]);
-    });
     const nextSlot = maskChars.find((ch, i) => {
       const filledSlots = maskChars.slice(0, i).filter(isInputSlot).length;
       return isInputSlot(ch) && filledSlots >= currentRaw.length;
@@ -178,6 +180,9 @@ function setupMask(field) {
 }
 function setupTrim(field) {
   if (!field.hasAttribute("data-trim")) return;
+  const el = field;
+  if (el.__icenTrimInit) return;
+  el.__icenTrimInit = true;
   field.addEventListener("blur", () => {
     const trimmed = field.value.trim();
     if (trimmed !== field.value) {
@@ -234,16 +239,18 @@ function setupOtp(group) {
   const fireComplete = () => {
     const code = cells.map((c) => c.value).join("");
     if (code.length === cells.length && cells.every((c) => c.value.length > 0)) {
+      group.dispatchEvent(new CustomEvent("icen:otp-complete", { detail: { code }, bubbles: true }));
       group.dispatchEvent(new CustomEvent("otp:complete", { detail: { code }, bubbles: true }));
     }
   };
   cells.forEach((cell) => cell.addEventListener("input", fireComplete));
 }
-function initInput(root = document) {
+function initInput(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const wraps = [];
-  if (root instanceof Element && root.matches(".input-wrap")) wraps.push(root);
-  wraps.push(...Array.from(root.querySelectorAll(".input-wrap")));
+  if (scope instanceof Element && scope.matches(".input-wrap")) wraps.push(scope);
+  wraps.push(...Array.from(scope.querySelectorAll(".input-wrap")));
   for (const w of wraps) {
     const el = w;
     if (el.__icenInputInit) continue;
@@ -252,37 +259,37 @@ function initInput(root = document) {
     setupPasswordToggle(w);
   }
   const textareas = [];
-  if (root instanceof HTMLTextAreaElement && root.matches("[data-autosize]")) textareas.push(root);
-  textareas.push(...Array.from(root.querySelectorAll("textarea[data-autosize]")));
+  if (scope instanceof HTMLTextAreaElement && scope.matches("[data-autosize]")) textareas.push(scope);
+  textareas.push(...Array.from(scope.querySelectorAll("textarea[data-autosize]")));
   for (const ta of textareas) setupAutosize(ta);
   const countedFields = [];
-  if (root instanceof Element) {
-    const fields = Array.from(root.querySelectorAll(
+  if (scope instanceof Element) {
+    const fields = Array.from(scope.querySelectorAll(
       "input[maxlength], input[data-count], textarea[maxlength], textarea[data-count]"
     ));
     countedFields.push(...fields);
-    if (root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) {
-      if (root.hasAttribute("maxlength") || root.hasAttribute("data-count")) countedFields.push(root);
+    if (scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) {
+      if (scope.hasAttribute("maxlength") || scope.hasAttribute("data-count")) countedFields.push(scope);
     }
   }
   for (const f of countedFields) setupCounter(f);
   const maskedInputs = [];
-  if (root instanceof Element) {
-    maskedInputs.push(...Array.from(root.querySelectorAll("input[data-mask]")));
-    if (root instanceof HTMLInputElement && root.hasAttribute("data-mask")) maskedInputs.push(root);
+  if (scope instanceof Element) {
+    maskedInputs.push(...Array.from(scope.querySelectorAll("input[data-mask]")));
+    if (scope instanceof HTMLInputElement && scope.hasAttribute("data-mask")) maskedInputs.push(scope);
   }
   for (const inp of maskedInputs) setupMask(inp);
   const trimFields = [];
-  if (root instanceof Element) {
-    trimFields.push(...Array.from(root.querySelectorAll("[data-trim]")));
-    if ((root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) && root.hasAttribute("data-trim")) {
-      trimFields.push(root);
+  if (scope instanceof Element) {
+    trimFields.push(...Array.from(scope.querySelectorAll("[data-trim]")));
+    if ((scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) && scope.hasAttribute("data-trim")) {
+      trimFields.push(scope);
     }
   }
   for (const f of trimFields) setupTrim(f);
   const otps = [];
-  if (root instanceof Element && root.matches(".otp")) otps.push(root);
-  otps.push(...Array.from(root.querySelectorAll(".otp")));
+  if (scope instanceof Element && scope.matches(".otp")) otps.push(scope);
+  otps.push(...Array.from(scope.querySelectorAll(".otp")));
   for (const g of otps) setupOtp(g);
 }
 export {

package/dist/behaviors/modal.d.mts

@@ -0,0 +1,11 @@
+/** 打开指定 id 的 modal；已有其他 modal 打开时先关闭它。 */
+declare function openModal(id: string): void;
+/** 关闭指定 id 的 modal（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。 */
+declare function closeModal(id: string): void;
+/**
+ * 绑定触发器/关闭钮/backdrop 点击（document 级事件委托，重复调用安全）。
+ * root 用于扫描 [data-modal-open] 补 aria-haspopup=dialog。
+ */
+declare function initModal(root?: ParentNode): void;
+
+export { closeModal, initModal, openModal };

package/dist/behaviors/modal.mjs

@@ -16,7 +16,10 @@ function openModal(id) {
   if (openId === id) return;
   if (openId) closeModal(openId);
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
+  if (!backdrop) {
+    console.warn(`[@icen.ai/ui] modal: \u672A\u627E\u5230 data-modal="${id}" \u7684 .modal-backdrop\uFF0C\u5DF2\u8DF3\u8FC7\u6253\u5F00`);
+    return;
+  }
   const panel = backdrop.querySelector(".modal");
   if (!panel) return;
   portal(backdrop);
@@ -52,7 +55,9 @@ function openModal(id) {
       return;
     }
     if (e.key !== "Tab") return;
-    const els = panel.querySelectorAll(FOCUSABLE);
+    const els = Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+      (el) => !el.hidden && el.offsetParent !== null
+    );
     if (els.length === 0) {
       e.preventDefault();
       panel.focus();
@@ -77,8 +82,7 @@ function openModal(id) {
 function closeModal(id) {
   if (typeof document === "undefined") return;
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
-  backdrop.hidden = true;
+  if (backdrop) backdrop.hidden = true;
   if (openId !== id) return;
   openId = null;
   if (keyHandler) {
@@ -89,9 +93,10 @@ function closeModal(id) {
   if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
   restoreFocusTo = null;
 }
-function initModal(root = document) {
+function initModal(root) {
   if (typeof document === "undefined") return;
-  root.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
   if (initialized) return;
   initialized = true;
   document.addEventListener("click", (e) => {

package/dist/behaviors/nav.d.mts

@@ -0,0 +1,7 @@
+/**
+ * 为 root 下每个 .nav[data-scroll-reactive] 初始化（root 自身匹配也算）。
+ * 返回销毁函数：移除本次初始化挂上的全部 window scroll/resize 监听。
+ */
+declare function initNav(root?: ParentNode): () => void;
+
+export { initNav };

package/dist/behaviors/nav.mjs

@@ -5,9 +5,11 @@ function prefersReducedMotion() {
 }
 function setup(nav) {
   const el = nav;
-  if (el.__icenNavInit) return;
+  if (el.__icenNavInit) return void 0;
   el.__icenNavInit = true;
-  const threshold = Number(nav.dataset.navThreshold ?? "12") || 12;
+  const rawThreshold = nav.dataset.navThreshold;
+  const parsedThreshold = rawThreshold === void 0 || rawThreshold === "" ? NaN : Number(rawThreshold);
+  const threshold = Number.isFinite(parsedThreshold) ? parsedThreshold : 12;
   const hideOnScroll = nav.hasAttribute("data-nav-hide-on-scroll");
   let ticking = false;
   let lastY = window.scrollY;
@@ -42,14 +44,28 @@ function setup(nav) {
   window.addEventListener("scroll", onScroll, { passive: true });
   window.addEventListener("resize", onResize, { passive: true });
   apply();
+  return () => {
+    window.removeEventListener("scroll", onScroll);
+    window.removeEventListener("resize", onResize);
+    el.__icenNavInit = false;
+  };
 }
-function initNav(root = document) {
-  if (typeof document === "undefined") return;
-  if (typeof window === "undefined") return;
-  const navs = [];
-  if (root instanceof Element && root.matches(".nav[data-scroll-reactive]")) navs.push(root);
-  navs.push(...Array.from(root.querySelectorAll(".nav[data-scroll-reactive]")));
-  for (const n of navs) setup(n);
+function initNav(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined" && typeof window !== "undefined") {
+    const scope = root ?? document;
+    const navs = [];
+    if (scope instanceof Element && scope.matches(".nav[data-scroll-reactive]")) navs.push(scope);
+    navs.push(...Array.from(scope.querySelectorAll(".nav[data-scroll-reactive]")));
+    for (const n of navs) {
+      const cleanup = setup(n);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initNav

package/dist/behaviors/notification.d.mts

@@ -0,0 +1,172 @@
+type NotificationKind = 'success' | 'warning' | 'error' | 'info';
+interface NotificationAction {
+    /** 按钮文字 */
+    label: string;
+    /** 点击回调；返回 false 阻止通知关闭 */
+    onClick?: () => void | Promise<void> | boolean;
+    /** 视觉变体：默认 ghost / primary 实底 / danger 危险色 */
+    type?: 'primary' | 'ghost' | 'danger';
+    /** 点击后是否保持通知打开（默认 false） */
+    keepOpen?: boolean;
+}
+interface NotificationOptions {
+    /** 显式 id（不传自动生成；用于后续 update/dismiss/get） */
+    id?: string;
+    /** 副标题（正文） */
+    description?: string;
+    /** 自动关闭延时（毫秒），默认 0 = 不自动关闭 */
+    duration?: number;
+    /** 是否显示关闭按钮，默认 true */
+    closable?: boolean;
+    /** hover 时暂停自动关闭倒计时，默认跟随全局 config.pauseOnHover */
+    pauseOnHover?: boolean;
+    /** duration > 0 时是否显示底部倒计时进度条，默认 true */
+    showCountdown?: boolean;
+    /** 自定义图标：SVG 字符串 / 图片 URL / false（关闭） */
+    icon?: string | false;
+    /** 头像 URL（会覆盖 kind 图标） */
+    avatar?: string;
+    /** 优先级：normal（默认）/ high（置顶） */
+    priority?: 'normal' | 'high';
+    /** 未读标记，默认 false（push 后可 markRead） */
+    unread?: boolean;
+    /** 多动作按钮（actions 优先于 actionLabel） */
+    actions?: NotificationAction[];
+    /** 兼容旧版单按钮 */
+    actionLabel?: string;
+    onAction?: () => void | Promise<void> | boolean;
+    /** 进度（0–1）；progress > 0 时显示进度条。推荐用 notify.progress() 返回的 handle.setProgress */
+    progress?: number;
+    /** 进度条下方文字（如「正在导出 64%」） */
+    progressLabel?: string;
+    /** 详情链接（绝对 / 相对路径） */
+    link?: string;
+    linkLabel?: string;
+    /** 分组键：同 tag 的多条会聚合显示计数 */
+    tag?: string;
+    /** 自定义数据（持久化时保留） */
+    data?: unknown;
+    /** 点击通知体的回调（不含按钮与关闭） */
+    onClick?: (handle: NotificationHandle) => void;
+    /** 显示后回调 */
+    onShow?: (handle: NotificationHandle) => void;
+    /** 关闭后回调 */
+    onClose?: (handle: NotificationHandle) => void;
+}
+interface NotificationConfig {
+    /** 位置：top-right（默认）/ top-left / bottom-left / bottom-right */
+    position?: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+    /** 同屏最大堆叠，默认 5；超出从最早的开始折叠/移除 */
+    maxStack?: number;
+    /** hover 暂停倒计时，默认 true */
+    pauseOnHover?: boolean;
+    /** 持久化：true 用默认 key / 字符串=自定义 key / 不传=不持久化 */
+    persist?: boolean | string;
+    /** 声音提示：true 用默认蜂鸣 / 字符串=data URL / 不传=无声 */
+    sound?: boolean | string;
+}
+interface NotificationHandle {
+    /** 通知 id */
+    id: string;
+    /** 当前 DOM 元素（可能已脱离 DOM） */
+    el: HTMLElement;
+    /** 关闭本条 */
+    dismiss(): void;
+    /** 部分更新（title / description / progress / unread / actions / tag 等） */
+    update(patch: NotificationUpdatePatch): void;
+    /** 设置进度（0–1）与可选标签 */
+    setProgress(value: number, label?: string): void;
+    /** 标记已读 */
+    markRead(): void;
+    /** 暂停自动关闭倒计时 */
+    pause(): void;
+    /** 恢复自动关闭倒计时（继续剩余时间） */
+    resume(): void;
+}
+/** update 接受的局部字段（title 在 push 时传，update 时也接受） */
+interface NotificationUpdatePatch {
+    title?: string;
+    description?: string;
+    duration?: number;
+    unread?: boolean;
+    progress?: number;
+    progressLabel?: string;
+    actions?: NotificationAction[];
+    tag?: string;
+    priority?: 'normal' | 'high';
+    icon?: string | false;
+    avatar?: string;
+    link?: string;
+    linkLabel?: string;
+}
+interface NotificationRecord {
+    id: string;
+    title: string;
+    kind: NotificationKind;
+    opts: NotificationOptions;
+    el: HTMLElement | null;
+    createdAt: number;
+    duration: number;
+    remaining: number;
+    paused: boolean;
+    timer: number;
+    /** 本次计时的起始时间戳（pause 时据此扣减 remaining） */
+    startedAt: number;
+    /** 所属 NotificationCenter 的局部配置（全局单例通知为 undefined） */
+    cfgRef?: Required<NotificationConfig>;
+    /** 所属 center 的 localStore（全局通知为 undefined）；dismiss 时同步清理，避免残留僵尸记录 */
+    ownerStore?: Map<string, NotificationRecord>;
+    /** attachTimer 注入的重启入口（update duration 时按新时长重启计时） */
+    restartTimer?: () => void;
+    /** hover 暂停监听是否已绑定（attachTimer 幂等保护） */
+    hoverBound?: boolean;
+}
+interface NotifyFn {
+    (title: string, opts?: NotificationOptions): NotificationHandle | null;
+    success(title: string, opts?: NotificationOptions): NotificationHandle | null;
+    warn(title: string, opts?: NotificationOptions): NotificationHandle | null;
+    error(title: string, opts?: NotificationOptions): NotificationHandle | null;
+    info(title: string, opts?: NotificationOptions): NotificationHandle | null;
+    progress(title: string, opts?: NotificationOptions): NotificationHandle | null;
+    confirm(title: string, opts?: NotificationConfirmOptions): Promise<boolean>;
+    dismiss(id?: string): void;
+    clear(): void;
+    markRead(id?: string): void;
+    update(id: string, patch: NotificationUpdatePatch): void;
+    get(id: string): NotificationRecord | null;
+    getAll(): NotificationRecord[];
+    config(opts: NotificationConfig): void;
+}
+interface NotificationConfirmOptions extends Omit<NotificationOptions, 'actions' | 'duration' | 'closable'> {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** 自动关闭毫秒（默认 0 = 不自动关闭） */
+    duration?: number;
+}
+interface NotificationCenterHandle {
+    push(notif: NotificationPushInput): NotificationHandle | null;
+    dismiss(id?: string): void;
+    clear(): void;
+    markAllRead(): void;
+    /** 销毁容器：移除 DOM、清掉其所有 timer 与监听器；之后 push 返回 null */
+    destroy(): void;
+    get(id: string): NotificationRecord | null;
+    getAll(): NotificationRecord[];
+    config(opts: NotificationConfig): void;
+    el: HTMLElement;
+}
+interface NotificationPushInput {
+    title: string;
+    kind?: NotificationKind;
+    options?: NotificationOptions;
+}
+/**
+ * 创建一个独立的通知中心容器（可同时存在多个，比如顶部=警告、右下=消息）。
+ * 注意：默认全局 notify.* 走单例容器，与本函数创建的额外容器并存。
+ */
+declare function createNotificationCenter(parent?: ParentNode, opts?: NotificationConfig): NotificationCenterHandle;
+declare const notify: NotifyFn;
+/** 委托初始化：建立默认容器 + 恢复持久化通知。幂等。 */
+declare function initNotification(): void;
+
+export { type NotificationAction, type NotificationCenterHandle, type NotificationConfig, type NotificationConfirmOptions, type NotificationHandle, type NotificationKind, type NotificationOptions, type NotificationPushInput, type NotificationUpdatePatch, createNotificationCenter, initNotification, notify };