@icen.ai/ui 0.8.1 → 0.10.0

package/dist/behaviors/tooltip.d.mts

@@ -0,0 +1,4 @@
+/** 事件委托接入一个作用域（缺省 document，动态插入同样生效）。 */
+declare function initTooltip(root?: ParentNode): () => void;
+
+export { initTooltip };

package/dist/behaviors/tooltip.mjs

@@ -0,0 +1,378 @@
+// src/behaviors/popover.ts
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const availableLeft = Math.max(0, anchor.left - margin - offset);
+    const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= minWidth2 ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
+  const availableWidth = Math.max(80, viewport.width - margin * 2);
+  const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+  const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
+  const maxWidth = Math.min(requestedMaxWidth, availableWidth);
+  const minWidth = Math.min(requestedMinWidth, maxWidth);
+  const availableTop = Math.max(0, anchor.top - margin - offset);
+  const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
+  const availableHeight = Math.max(80, viewport.height - margin * 2);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = opts.contentHeightHint != null && opts.contentHeightHint > 0 ? opts.contentHeightHint : fallbackHeight;
+  const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+
+// src/behaviors/tooltip.ts
+var HOVER_DELAY_MS = 400;
+var LEAVE_TIMEOUT_MS = 240;
+var POINTER_LEAVE_DELAY_MS = 80;
+var OFFSET_PX = 6;
+var VIEWPORT_MARGIN_PX = 8;
+var WATCHED_ATTRS = ["data-icen-tooltip", "data-icen-tooltip-side", "data-icen-tooltip-align", "data-icen-tooltip-multiline"];
+var scopes = /* @__PURE__ */ new WeakMap();
+var handled = /* @__PURE__ */ new WeakSet();
+var bubble = null;
+var current = null;
+var dismissed = /* @__PURE__ */ new Set();
+var triggerOwners = /* @__PURE__ */ new WeakMap();
+var closeTimer = null;
+var pending = null;
+var leaving = null;
+var observer = null;
+var sequence = 0;
+function textOf(trigger) {
+  return trigger.getAttribute("data-icen-tooltip")?.trim() ?? "";
+}
+function sideOf(trigger) {
+  const side = trigger.getAttribute("data-icen-tooltip-side");
+  return side === "bottom" || side === "left" || side === "right" ? side : "top";
+}
+function alignOf(trigger) {
+  const align = trigger.getAttribute("data-icen-tooltip-align");
+  return align === "start" || align === "end" ? align : "center";
+}
+function focusVisible(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+function triggerFrom(target) {
+  return target instanceof Element ? target.closest("[data-icen-tooltip]") : null;
+}
+function cancelPending() {
+  if (!pending) return;
+  window.clearTimeout(pending.timer);
+  pending.trigger.removeAttribute("data-icen-tooltip-live");
+  pending = null;
+}
+function cancelLeaving() {
+  if (!leaving) return;
+  window.clearTimeout(leaving.timer);
+  leaving.node.classList.add("is-open");
+  leaving = null;
+}
+function release(trigger) {
+  trigger.removeAttribute("data-icen-tooltip-live");
+  const tokens = (trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== bubble?.id);
+  if (tokens.length) trigger.setAttribute("aria-describedby", tokens.join(" "));
+  else trigger.removeAttribute("aria-describedby");
+}
+function cancelClose() {
+  if (closeTimer !== null) window.clearTimeout(closeTimer);
+  closeTimer = null;
+}
+function clearDismissed(trigger) {
+  if (!dismissed.delete(trigger)) return;
+  if (current !== trigger && pending?.trigger !== trigger) trigger.removeAttribute("data-icen-tooltip-live");
+}
+function scheduleClose() {
+  cancelClose();
+  closeTimer = window.setTimeout(() => {
+    closeTimer = null;
+    if (current && document.activeElement !== current) hide(current);
+  }, POINTER_LEAVE_DELAY_MS);
+}
+function unwatch() {
+  window.removeEventListener("scroll", onViewportScroll, true);
+  window.removeEventListener("resize", onViewportResize);
+  observer?.disconnect();
+  observer = null;
+}
+function removeBubble(node) {
+  node.remove();
+  if (bubble === node) bubble = null;
+}
+function hide(trigger, opts) {
+  cancelClose();
+  const waiting = pending?.trigger;
+  cancelPending();
+  if (waiting && opts?.suppressFallback) {
+    dismissed.add(waiting);
+    waiting.setAttribute("data-icen-tooltip-live", "");
+  }
+  const active = current;
+  if (!active || trigger && active !== trigger) return;
+  current = null;
+  release(active);
+  if (opts?.suppressFallback) {
+    dismissed.add(active);
+    active.setAttribute("data-icen-tooltip-live", "");
+  }
+  unwatch();
+  if (!bubble) return;
+  const node = bubble;
+  if (opts?.instant) {
+    cancelLeaving();
+    removeBubble(node);
+    return;
+  }
+  node.classList.remove("is-open");
+  leaving = {
+    node,
+    timer: window.setTimeout(() => {
+      if (leaving?.node === node) leaving = null;
+      removeBubble(node);
+    }, LEAVE_TIMEOUT_MS)
+  };
+}
+function layout() {
+  if (!current || !bubble) return;
+  const anchor = current.getBoundingClientRect();
+  const width = bubble.offsetWidth;
+  const height = bubble.offsetHeight;
+  const out = computePopoverLayout(anchor, { width: window.innerWidth, height: window.innerHeight }, {
+    side: sideOf(current),
+    align: alignOf(current),
+    offset: OFFSET_PX,
+    margin: VIEWPORT_MARGIN_PX,
+    minWidth: width,
+    maxWidth: width,
+    minHeight: height,
+    maxHeight: height,
+    contentHeightHint: height
+  });
+  bubble.style.left = `${out.left}px`;
+  bubble.style.top = `${out.top}px`;
+  bubble.dataset.icenSide = out.side;
+  bubble.style.visibility = "";
+  const node = bubble, trigger = current;
+  requestAnimationFrame(() => {
+    if (bubble === node && current === trigger) node.classList.add("is-open");
+  });
+}
+function watch() {
+  unwatch();
+  window.addEventListener("scroll", onViewportScroll, { capture: true, passive: true });
+  window.addEventListener("resize", onViewportResize, { passive: true });
+  observer = new MutationObserver(() => {
+    if (!current) return;
+    const text = textOf(current);
+    if (!current.isConnected || !text) {
+      hide(null, { instant: true });
+      return;
+    }
+    if (bubble) {
+      if (bubble.textContent !== text) bubble.textContent = text;
+      bubble.classList.toggle("is-multiline", current.getAttribute("data-icen-tooltip-multiline") === "true");
+    }
+    layout();
+  });
+  observer.observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: WATCHED_ATTRS
+  });
+}
+function onViewportScroll() {
+  hide(null, { instant: true, suppressFallback: true });
+}
+function onViewportResize() {
+  hide(null, { instant: true, suppressFallback: true });
+}
+function show(trigger) {
+  if (!trigger.isConnected) return;
+  const text = textOf(trigger);
+  if (!text) return;
+  cancelPending();
+  cancelClose();
+  cancelLeaving();
+  if (current && current !== trigger) release(current);
+  current = trigger;
+  trigger.setAttribute("data-icen-tooltip-live", "");
+  if (!bubble) {
+    bubble = document.createElement("div");
+    bubble.className = "icen-tooltip";
+    bubble.setAttribute("role", "tooltip");
+    bubble.id = `icen-tooltip-${++sequence}`;
+    bubble.addEventListener("pointerenter", cancelClose);
+    bubble.addEventListener("pointerleave", (event) => {
+      if (current && event.relatedTarget instanceof Node && current.contains(event.relatedTarget)) return;
+      scheduleClose();
+    });
+  }
+  bubble.textContent = text;
+  bubble.classList.toggle("is-multiline", trigger.getAttribute("data-icen-tooltip-multiline") === "true");
+  if (!bubble.isConnected) {
+    bubble.style.visibility = "hidden";
+    document.body.appendChild(bubble);
+  }
+  const tokens = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+  tokens.add(bubble.id);
+  trigger.setAttribute("aria-describedby", [...tokens].join(" "));
+  layout();
+  watch();
+}
+function markPending(trigger) {
+  for (const stale of dismissed) if (!stale.isConnected) clearDismissed(stale);
+  cancelClose();
+  cancelPending();
+  if (current === trigger) return;
+  trigger.setAttribute("data-icen-tooltip-live", "");
+  pending = {
+    trigger,
+    timer: window.setTimeout(() => {
+      pending = null;
+      show(trigger);
+    }, HOVER_DELAY_MS)
+  };
+}
+function owns(trigger, scope) {
+  if (!trigger) return false;
+  return scope instanceof Node ? scope.contains(trigger) || scope === trigger : false;
+}
+function initTooltip(root) {
+  if (typeof document === "undefined") return () => {
+  };
+  const scope = root ?? document;
+  const existing = scopes.get(scope);
+  if (existing) return existing;
+  const onPointerOver = (event) => {
+    if (handled.has(event)) return;
+    handled.add(event);
+    const pointer = event;
+    if (pointer.pointerType === "touch") return;
+    const trigger = triggerFrom(pointer.target);
+    if (!trigger) return;
+    if (pointer.relatedTarget instanceof Node && trigger.contains(pointer.relatedTarget)) return;
+    if (dismissed.has(trigger)) return;
+    if (current === trigger) {
+      cancelClose();
+      return;
+    }
+    if (pending?.trigger === trigger) return;
+    triggerOwners.set(trigger, scope);
+    markPending(trigger);
+  };
+  const onPointerOut = (event) => {
+    const pointer = event;
+    const trigger = triggerFrom(pointer.target);
+    if (!trigger) return;
+    if (pointer.relatedTarget instanceof Node && trigger.contains(pointer.relatedTarget)) return;
+    if (document.activeElement !== trigger) clearDismissed(trigger);
+    if (pending?.trigger === trigger) cancelPending();
+    if (current === trigger && !(pointer.relatedTarget instanceof Node && bubble?.contains(pointer.relatedTarget))) scheduleClose();
+  };
+  const onFocusIn = (event) => {
+    if (handled.has(event)) return;
+    handled.add(event);
+    const trigger = triggerFrom(event.target);
+    if (!trigger || !focusVisible(trigger) || dismissed.has(trigger)) return;
+    triggerOwners.set(trigger, scope);
+    show(trigger);
+  };
+  const onFocusOut = (event) => {
+    const trigger = triggerFrom(event.target);
+    if (!trigger) return;
+    if (!trigger.matches(":hover")) clearDismissed(trigger);
+    if (pending?.trigger === trigger) cancelPending();
+    if (current === trigger && !trigger.matches(":hover")) hide(trigger);
+  };
+  const onPointerDown = () => {
+    hide(null, { suppressFallback: true });
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape") return;
+    hide(null, { suppressFallback: true });
+  };
+  scope.addEventListener("pointerover", onPointerOver);
+  scope.addEventListener("pointerout", onPointerOut);
+  scope.addEventListener("focusin", onFocusIn);
+  scope.addEventListener("focusout", onFocusOut);
+  scope.addEventListener("pointerdown", onPointerDown, true);
+  scope.addEventListener("keydown", onKeyDown, true);
+  const dispose = () => {
+    scope.removeEventListener("pointerover", onPointerOver);
+    scope.removeEventListener("pointerout", onPointerOut);
+    scope.removeEventListener("focusin", onFocusIn);
+    scope.removeEventListener("focusout", onFocusOut);
+    scope.removeEventListener("pointerdown", onPointerDown, true);
+    scope.removeEventListener("keydown", onKeyDown, true);
+    if (owns(pending?.trigger ?? null, scope)) cancelPending();
+    if (owns(current, scope)) hide(null, { instant: true });
+    for (const trigger of dismissed) {
+      if (scope === document || triggerOwners.get(trigger) === scope || owns(trigger, scope)) clearDismissed(trigger);
+    }
+    scopes.delete(scope);
+  };
+  scopes.set(scope, dispose);
+  return dispose;
+}
+export {
+  initTooltip
+};

package/dist/behaviors/tree-select.d.mts

@@ -0,0 +1,69 @@
+interface TreeNode {
+    value: string;
+    label: string;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+interface TreeSelectOptions {
+    /** Accessible field name; defaults to placeholder. */
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    nodes: TreeNode[];
+    /** 初值（多选数组；单选取首个有效值） */
+    value?: string[];
+    multiple?: boolean;
+    /** 面板内搜索：过滤命中节点自动展开祖先，命中词 <mark> 高亮 */
+    searchable?: boolean;
+    /** 多选的三态勾选（父 = 子集并集，混合态）；隐含多值语义 */
+    checkable?: boolean;
+    /** 单选时仅叶子可定值（默认任意级可选） */
+    leafOnly?: boolean;
+    /** 默认「请选择」 */
+    placeholder?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    /** 搜索无命中文案，默认「无匹配」 */
+    emptyLabel?: string;
+    /** 搜索框占位，默认「搜索」 */
+    searchPlaceholder?: string;
+    onChange?: (value: string[], labels: string[]) => void;
+}
+interface TreeSelectHandle {
+    getValue(): string[];
+    getLabels(): string[];
+    setValue(v: string[]): void;
+    clear(): void;
+    open(): void;
+    close(): void;
+    expandAll(): void;
+    collapseAll(): void;
+    destroy(): void;
+}
+interface FlatTreeEntry {
+    node: TreeNode;
+    depth: number;
+    parents: TreeNode[];
+}
+/** 深度优先拍平（文档序）：节点 + 深度 + 父链（键盘导航 / chips 序 / 值序共用）。 */
+declare function flattenTreeNodes(nodes: TreeNode[]): FlatTreeEntry[];
+interface TreeFilterResult {
+    /** label 命中 query 的节点值集合（大小写不敏感） */
+    matched: Set<string>;
+    /** 需保留可见的节点值集合 = 命中 ∪ 祖先 ∪ 命中节点的子孙（上下文可见，不高亮） */
+    keep: Set<string>;
+    /** 命中节点祖先（搜索态自动展开的目标） */
+    expand: Set<string>;
+}
+/** 搜索过滤：命中节点 + 其全部祖先 + 其子孙保留可见（子孙是命中上下文，不高亮）；
+ *  祖先进 expand（搜索态自动展开的目标）。空 query 返回空集。 */
+declare function filterTreeNodes(nodes: TreeNode[], query: string): TreeFilterResult;
+type TreeCheckState = 'checked' | 'unchecked' | 'mixed';
+/**
+ * 三态求值：checked 集合（全部选中节点值）下某节点的勾选态。
+ * 自身 + 全部子孙都在集合 → checked；全不在 → unchecked；部分在 → mixed
+ * （父不在集合但全部子孙在也呈 mixed——诚实呈现部分选择，由 toggle 逻辑保证一致）。
+ */
+declare function treeNodeCheckState(node: TreeNode, checked: ReadonlySet<string>): TreeCheckState;
+declare function createTreeSelect(el: HTMLElement, opts: TreeSelectOptions): TreeSelectHandle;
+
+export { type FlatTreeEntry, type TreeCheckState, type TreeFilterResult, type TreeNode, type TreeSelectHandle, type TreeSelectOptions, createTreeSelect, filterTreeNodes, flattenTreeNodes, treeNodeCheckState };