@icen.ai/ui 0.3.0 → 0.5.0

package/dist/behaviors/back-top.mjs

@@ -0,0 +1,84 @@
+// src/behaviors/back-top.ts
+var AUTO_BTN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>';
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getScrollTarget(target) {
+  if (!target) return { el: null, isWindow: true };
+  const el = document.querySelector(target);
+  return { el, isWindow: false };
+}
+function getScrollY(target) {
+  if (!target) return window.scrollY;
+  const el = document.querySelector(target);
+  return el ? el.scrollTop : window.scrollY;
+}
+function scrollToTop(target, offset = 0) {
+  const reduce = prefersReducedMotion();
+  const behavior = reduce ? "auto" : "smooth";
+  if (!target) {
+    window.scrollTo({ top: offset, behavior });
+    return;
+  }
+  const el = document.querySelector(target);
+  if (el) el.scrollTo({ top: offset, behavior });
+}
+function setup(btn, opts = {}) {
+  const el = btn;
+  if (el.__icenBackTopInit) return;
+  el.__icenBackTopInit = true;
+  const threshold = Number(btn.dataset.backTopThreshold ?? opts.threshold ?? 320) || 320;
+  const target = btn.dataset.backTopTarget ?? opts.target;
+  const offset = Number(btn.dataset.backTopOffset ?? opts.offset ?? 0) || 0;
+  let ticking = false;
+  const apply = () => {
+    ticking = false;
+    const y = getScrollY(target);
+    btn.classList.toggle("is-shown", y > threshold);
+  };
+  const onScroll = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(apply);
+  };
+  const { el: targetEl, isWindow } = getScrollTarget(target);
+  if (isWindow) {
+    window.addEventListener("scroll", onScroll, { passive: true });
+  } else if (targetEl) {
+    targetEl.addEventListener("scroll", onScroll, { passive: true });
+  }
+  window.addEventListener("resize", onScroll, { passive: true });
+  btn.addEventListener("click", () => scrollToTop(target, offset));
+  apply();
+}
+function initBackTop(opts = {}) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  const root = opts.root ?? document;
+  if (opts.autoCreate) {
+    let btn = document.body.querySelector(".back-top[data-back-top-auto]");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "back-top";
+      btn.setAttribute("data-back-top", "");
+      btn.setAttribute("data-back-top-auto", "");
+      btn.setAttribute("aria-label", "\u56DE\u5230\u9876\u90E8");
+      btn.innerHTML = AUTO_BTN_SVG;
+      document.body.appendChild(btn);
+    }
+    setup(btn, opts);
+  }
+  const candidates = [];
+  if (root instanceof Element && root.matches(".back-top[data-back-top]")) candidates.push(root);
+  candidates.push(...Array.from(root.querySelectorAll(".back-top[data-back-top]")));
+  for (const c of candidates) {
+    const el = c;
+    if (el.hasAttribute("data-back-top-auto") && opts.autoCreate) continue;
+    setup(el, opts);
+  }
+}
+export {
+  initBackTop
+};

package/dist/behaviors/charts.mjs

@@ -258,6 +258,192 @@ function renderLine(el, opts) {
   wrap.append(svg, labelsRow(labels.slice(-7)));
   el.appendChild(wrap);
 }
+function renderArea(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const width = 360;
+  const height = 150;
+  const pad = 14;
+  const max = Math.max(...values, 1);
+  const tone = toneVar(opts.tone);
+  const points = values.map((value, i) => ({
+    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+    y: height - pad - value / max * (height - pad * 2),
+    value,
+    label: labels[i] ?? ""
+  }));
+  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+  const last = points[points.length - 1];
+  const first = points[0];
+  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const gradientId = `icen-chart-area-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-area";
+  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+  const defs = svgEl("defs", {});
+  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.5" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.05" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  for (let i = 0; i < 4; i++) {
+    const y = pad + i * (height - pad * 2) / 3;
+    svg.appendChild(svgEl("line", {
+      x1: String(pad),
+      x2: String(width - pad),
+      y1: String(y),
+      y2: String(y),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+  }
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "1.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  for (const p of points) {
+    const title = svgEl("title", {});
+    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+    const inv = svgEl("circle", {
+      cx: p.x.toFixed(1),
+      cy: p.y.toFixed(1),
+      r: "2",
+      fill: "transparent"
+    });
+    inv.appendChild(title);
+    svg.appendChild(inv);
+  }
+  wrap.append(svg, labelsRow(labels.slice(-7)));
+  el.appendChild(wrap);
+}
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const axes = opts.axes;
+  const n = axes.length;
+  if (n < 3 || opts.series.length === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  let maxVal = opts.max ?? 0;
+  if (opts.max == null) {
+    for (const s of opts.series) {
+      for (let i = 0; i < n; i++) maxVal = Math.max(maxVal, s.values[i] ?? 0);
+    }
+    maxVal = niceCeil(maxVal);
+  }
+  if (maxVal <= 0) maxVal = 1;
+  const size = 200;
+  const cx = size / 2;
+  const cy = size / 2;
+  const radius = 78;
+  const levels = Math.max(2, opts.levels ?? 4);
+  const angleOf = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+  const pointAt = (i, r) => ({
+    x: cx + r * Math.cos(angleOf(i)),
+    y: cy + r * Math.sin(angleOf(i))
+  });
+  const wrap = document.createElement("div");
+  wrap.className = "chart-radar";
+  const svg = svgEl("svg", { viewBox: `0 0 ${size} ${size}`, role: "img" });
+  for (let lv = 1; lv <= levels; lv++) {
+    const r = radius * lv / levels;
+    const pts = Array.from({ length: n }, (_, i) => {
+      const p = pointAt(i, r);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    svg.appendChild(svgEl("polygon", {
+      points: pts,
+      fill: "none",
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1",
+      "stroke-dasharray": lv === levels ? "0" : "3 2"
+    }));
+  }
+  for (let i = 0; i < n; i++) {
+    const edge = pointAt(i, radius);
+    svg.appendChild(svgEl("line", {
+      x1: String(cx),
+      y1: String(cy),
+      x2: edge.x.toFixed(1),
+      y2: edge.y.toFixed(1),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+    const labelP = pointAt(i, radius + 14);
+    const txt = svgEl("text", {
+      x: labelP.x.toFixed(1),
+      y: labelP.y.toFixed(1),
+      "text-anchor": "middle",
+      "dominant-baseline": "middle",
+      "font-size": "9",
+      fill: "var(--token-text-muted)"
+    });
+    txt.textContent = axes[i] ?? "";
+    svg.appendChild(txt);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const s of opts.series) {
+    const tone = toneVar(s.tone);
+    const pts = Array.from({ length: n }, (_, i) => {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    const polyFill = svgEl("polygon", {
+      points: pts,
+      fill: tone,
+      "fill-opacity": "0.16",
+      stroke: tone,
+      "stroke-width": "2",
+      "stroke-linejoin": "round"
+    });
+    const title = svgEl("title", {});
+    title.textContent = `${s.name}: ${s.values.map((v) => fmt(opts, v)).join(" / ")}`;
+    polyFill.appendChild(title);
+    svg.appendChild(polyFill);
+    for (let i = 0; i < n; i++) {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      svg.appendChild(svgEl("circle", {
+        cx: p.x.toFixed(1),
+        cy: p.y.toFixed(1),
+        r: "2.5",
+        fill: "var(--token-card)",
+        stroke: tone,
+        "stroke-width": "1.5"
+      }));
+    }
+    legend.appendChild(legendItem(s.name, "", s.tone));
+  }
+  wrap.append(svg, legend);
+  el.appendChild(wrap);
+}
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  const exp = Math.floor(Math.log10(v));
+  const base = Math.pow(10, exp);
+  const frac = v / base;
+  let nice;
+  if (frac <= 1) nice = 1;
+  else if (frac <= 2) nice = 2;
+  else if (frac <= 5) nice = 5;
+  else nice = 10;
+  return nice * base;
+}
 function isoDate(d) {
   const m = String(d.getMonth() + 1).padStart(2, "0");
   const day = String(d.getDate()).padStart(2, "0");
@@ -424,11 +610,13 @@ function renderGauge(el, opts) {
   el.appendChild(wrap);
 }
 export {
+  renderArea,
   renderDonut,
   renderGauge,
   renderHBar,
   renderHeatmap,
   renderLine,
+  renderRadar,
   renderSparkline,
   renderStack,
   renderVBar

package/dist/behaviors/command-palette.mjs

@@ -0,0 +1,177 @@
+// 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])")
+  ).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) 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) return;
+  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 = document) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  root.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) && (e.key === "k" || e.key === "K")) {
+      e.preventDefault();
+      const first = document.querySelector(".command-palette-backdrop[data-command-palette]");
+      if (first?.dataset.commandPalette) {
+        if (openId === first.dataset.commandPalette) closeCommandPalette(openId);
+        else openCommandPalette(first.dataset.commandPalette);
+      }
+    }
+  };
+  window.addEventListener("keydown", globalKeyHandler);
+}
+export {
+  closeCommandPalette,
+  initCommandPalette,
+  openCommandPalette
+};