@icen.ai/ui 0.2.1 → 0.3.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,178 @@ function renderLine(el, opts) {
   wrap.append(svg, labelsRow(labels.slice(-7)));
   el.appendChild(wrap);
 }
+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 {
   renderDonut,
+  renderGauge,
   renderHBar,
+  renderHeatmap,
   renderLine,
+  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);