@icen.ai/ui 0.2.1 → 0.4.0

package/dist/behaviors/carousel.mjs

@@ -28,7 +28,15 @@ function setup(carousel) {
     if (!track) return;
     track.style.transform = `translateX(${-index * 100}%)`;
     slides.forEach((s, i) => s.setAttribute("aria-hidden", String(i !== index)));
-    dots.forEach((d, i) => d.classList.toggle("active", i === index));
+    dots.forEach((d, i) => {
+      d.classList.toggle("active", i === index);
+      if (i === index) d.setAttribute("aria-current", "true");
+      else d.removeAttribute("aria-current");
+    });
+    carousel.dispatchEvent(new CustomEvent("icen:carousel-change", {
+      bubbles: true,
+      detail: { index, count }
+    }));
   }
   function go(i) {
     index = (i % count + count) % count;
@@ -36,6 +44,27 @@ function setup(carousel) {
   }
   prev?.addEventListener("click", () => go(index - 1));
   next?.addEventListener("click", () => go(index + 1));
+  carousel.addEventListener("keydown", (ev) => {
+    const kev = ev;
+    switch (kev.key) {
+      case "ArrowLeft":
+        kev.preventDefault();
+        go(index - 1);
+        break;
+      case "ArrowRight":
+        kev.preventDefault();
+        go(index + 1);
+        break;
+      case "Home":
+        kev.preventDefault();
+        go(0);
+        break;
+      case "End":
+        kev.preventDefault();
+        go(count - 1);
+        break;
+    }
+  });
   render();
 }
 function initCarousel(root = document) {

package/dist/behaviors/charts.mjs

@@ -258,10 +258,366 @@ 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");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+function renderHeatmap(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  let entries;
+  if (opts.data && opts.data.length > 0) {
+    entries = opts.data;
+  } else if (opts.values && opts.values.length > 0) {
+    const today = /* @__PURE__ */ new Date();
+    entries = opts.values.map((value, i) => {
+      const d = new Date(today);
+      d.setDate(d.getDate() - (opts.values.length - 1 - i));
+      return { date: isoDate(d), value };
+    });
+  } else {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const weeks = opts.weeks ?? Math.ceil(entries.length / 7);
+  if (entries.length > weeks * 7) entries = entries.slice(entries.length - weeks * 7);
+  const max = Math.max(...entries.map((e) => e.value), 1);
+  const levelOf = (v) => v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+  const wrap = document.createElement("div");
+  wrap.className = "chart-heatmap";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  const grid = document.createElement("div");
+  grid.className = "chart-heatmap-grid";
+  grid.setAttribute("role", "img");
+  const first = /* @__PURE__ */ new Date(`${entries[0].date}T00:00:00`);
+  const pad = (first.getDay() + 6) % 7;
+  for (let i = 0; i < pad; i++) {
+    const blank = document.createElement("span");
+    blank.className = "chart-heatmap-cell is-blank";
+    grid.appendChild(blank);
+  }
+  for (const entry of entries) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(levelOf(entry.value));
+    cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
+    grid.appendChild(cell);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-heatmap-legend";
+  const less = document.createElement("span");
+  less.textContent = "\u5C11";
+  const more = document.createElement("span");
+  more.textContent = "\u591A";
+  legend.appendChild(less);
+  for (let lv = 0; lv <= 4; lv++) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(lv);
+    legend.appendChild(cell);
+  }
+  legend.appendChild(more);
+  wrap.append(grid, legend);
+  el.appendChild(wrap);
+}
+function renderSparkline(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const values = opts.values;
+  if (values.length === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const width = 96;
+  const height = 28;
+  const pad = 3;
+  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
+  }));
+  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-line-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-sparkline";
+  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.28" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "1.8",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  const dot = svgEl("circle", {
+    cx: last.x.toFixed(1),
+    cy: last.y.toFixed(1),
+    r: "2.4",
+    fill: "var(--token-card)",
+    stroke: tone,
+    "stroke-width": "1.6"
+  });
+  const title = svgEl("title", {});
+  title.textContent = fmt(opts, last.value);
+  dot.appendChild(title);
+  svg.appendChild(dot);
+  wrap.appendChild(svg);
+  el.appendChild(wrap);
+}
+function renderGauge(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const max = opts.max ?? 100;
+  const ratio = max > 0 ? Math.min(1, Math.max(0, opts.value / max)) : 0;
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-gauge";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  const svg = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+  svg.style.transform = "rotate(-90deg)";
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: "var(--token-line-soft)",
+    "stroke-width": "10"
+  }));
+  const dash = ratio * circumference;
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: toneVar(opts.tone),
+    "stroke-width": "10",
+    "stroke-dasharray": `${dash} ${circumference - dash}`,
+    "stroke-linecap": "round"
+  }));
+  const center = document.createElement("div");
+  center.className = "chart-gauge-center";
+  const val = document.createElement("span");
+  val.className = "chart-gauge-value";
+  val.textContent = opts.formatValue ? opts.formatValue(opts.value) : `${Math.round(ratio * 100)}%`;
+  center.appendChild(val);
+  if (opts.label) {
+    const lab = document.createElement("span");
+    lab.className = "chart-gauge-label";
+    lab.textContent = opts.label;
+    center.appendChild(lab);
+  }
+  wrap.append(svg, center);
+  el.appendChild(wrap);
+}
 export {
+  renderArea,
   renderDonut,
+  renderGauge,
   renderHBar,
+  renderHeatmap,
   renderLine,
+  renderRadar,
+  renderSparkline,
   renderStack,
   renderVBar
 };

package/dist/behaviors/copy.mjs

@@ -31,11 +31,12 @@ async function copyText(text) {
 function flashDone(btn) {
   const prev = flashing.get(btn);
   if (prev) window.clearTimeout(prev.timer);
-  const original = prev ? prev.original : btn.textContent;
-  btn.textContent = "\u5DF2\u590D\u5236";
+  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");
   const timer = window.setTimeout(() => {
-    btn.textContent = original;
+    if (!iconOnly) btn.textContent = original;
     btn.classList.remove("done");
     flashing.delete(btn);
   }, 1400);