@icen.ai/ui 0.5.0 → 0.8.1

package/dist/behaviors/date-picker.mjs

@@ -1,8 +1,132 @@
+// src/behaviors/popover.ts
+var PANEL_SIZING_ATTRS = {
+  width: "data-panel-width",
+  minWidth: "data-panel-min",
+  maxWidth: "data-panel-max",
+  minHeight: "data-panel-min-height",
+  maxHeight: "data-panel-max-height"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function applyPanelSizing(panel, sizing) {
+  if (sizing == null) {
+    panel.style.width = "";
+    panel.style.minWidth = "";
+    panel.style.maxWidth = "";
+    panel.style.minHeight = "";
+    panel.style.maxHeight = "";
+    return;
+  }
+  const vw = typeof document === "undefined" ? Number.POSITIVE_INFINITY : document.documentElement.clientWidth;
+  const fitW = (n) => Math.min(n, Math.max(80, vw - 24));
+  if (sizing.width != null) {
+    const w = fitW(sizing.width);
+    panel.style.width = `${w}px`;
+    panel.style.maxWidth = `${w}px`;
+  }
+  if (sizing.minWidth != null) panel.style.minWidth = `${fitW(sizing.minWidth)}px`;
+  if (sizing.maxWidth != null && sizing.width == null) panel.style.maxWidth = `${fitW(sizing.maxWidth)}px`;
+  if (sizing.minHeight != null) panel.style.minHeight = `${sizing.minHeight}px`;
+  if (sizing.maxHeight != null) panel.style.maxHeight = `${sizing.maxHeight}px`;
+}
+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 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) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    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 = Math.max(opts.contentHeightHint ?? 0, 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/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/date-picker.ts
 var openPicker = null;
 var panelEl = null;
 var outsideHandler = null;
 var escHandler = null;
+var repositionHandler = null;
 function pad(n) {
   return n < 10 ? "0" + n : String(n);
 }
@@ -32,18 +156,54 @@ function ensurePanel() {
 }
 function positionPanel(panel, trigger) {
   const r = trigger.getBoundingClientRect();
-  const pw = 280;
-  const ph = panel.offsetHeight || 320;
-  let left = r.left;
-  let top = r.bottom + 4;
-  if (left + pw > window.innerWidth - 12) left = window.innerWidth - pw - 12;
-  if (left < 12) left = 12;
-  if (top + ph > window.innerHeight - 12) top = r.top - ph - 4;
-  if (top < 12) top = 12;
-  panel.style.left = left + "px";
-  panel.style.top = top + "px";
-}
-var CAL_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>';
+  const sizing = readPanelSizing(trigger.closest("[data-date-picker]"));
+  applyPanelSizing(panel, null);
+  if (sizing.width != null || sizing.minWidth != null) {
+    applyPanelSizing(panel, { width: sizing.width ?? sizing.minWidth, maxWidth: sizing.maxWidth, maxHeight: sizing.maxHeight });
+  } else {
+    applyPanelSizing(panel, sizing);
+  }
+  const pw = sizing.width ?? sizing.minWidth ?? 280;
+  const layout = computePopoverLayout(
+    r,
+    { width: window.innerWidth, height: window.innerHeight },
+    { side: "bottom", offset: 4, margin: 12, minWidth: pw, maxWidth: pw, maxHeight: sizing.maxHeight }
+  );
+  panel.style.left = `${layout.left}px`;
+  panel.style.top = `${layout.top}px`;
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+function buildCalIcon() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", "3");
+  rect.setAttribute("y", "4");
+  rect.setAttribute("width", "18");
+  rect.setAttribute("height", "18");
+  rect.setAttribute("rx", "2");
+  rect.setAttribute("ry", "2");
+  svg.appendChild(rect);
+  const lines = [
+    ["16", "16", "2", "6"],
+    ["8", "8", "2", "6"],
+    ["3", "21", "10", "10"]
+  ];
+  for (const [x1, x2, y1, y2] of lines) {
+    const line = document.createElementNS(SVG_NS, "line");
+    line.setAttribute("x1", x1);
+    line.setAttribute("x2", x2);
+    line.setAttribute("y1", y1);
+    line.setAttribute("y2", y2);
+    svg.appendChild(line);
+  }
+  return svg;
+}
 var WEEK_LABELS_ZH = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
 var WEEK_LABELS_SUN = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 function renderCalendar(panel, ctx) {
@@ -61,49 +221,72 @@ function renderCalendar(panel, ctx) {
   for (let i = 0; i < 42; i++) {
     cells.push(new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   }
-  let html = `<div class="date-picker-head">
-    <button class="date-picker-nav" data-dp-nav="-1" type="button" aria-label="\u4E0A\u4E00\u6708">\u2039</button>
-    <span class="date-picker-title">${year} \u5E74 ${month + 1} \u6708</span>
-    <button class="date-picker-nav" data-dp-nav="1" type="button" aria-label="\u4E0B\u4E00\u6708">\u203A</button>
-  </div><div class="date-picker-weekdays">${labels.map((l) => `<span>${l}</span>`).join("")}</div><div class="date-picker-grid">`;
+  panel.textContent = "";
+  const head = document.createElement("div");
+  head.className = "date-picker-head";
+  const prevBtn = document.createElement("button");
+  prevBtn.type = "button";
+  prevBtn.className = "date-picker-nav";
+  prevBtn.setAttribute("aria-label", "\u4E0A\u4E00\u6708");
+  prevBtn.textContent = "\u2039";
+  const title = document.createElement("span");
+  title.className = "date-picker-title";
+  title.textContent = `${year} \u5E74 ${month + 1} \u6708`;
+  const nextBtn = document.createElement("button");
+  nextBtn.type = "button";
+  nextBtn.className = "date-picker-nav";
+  nextBtn.setAttribute("aria-label", "\u4E0B\u4E00\u6708");
+  nextBtn.textContent = "\u203A";
+  head.append(prevBtn, title, nextBtn);
+  const weekdays = document.createElement("div");
+  weekdays.className = "date-picker-weekdays";
+  for (const label of labels) {
+    const s = document.createElement("span");
+    s.textContent = label;
+    weekdays.appendChild(s);
+  }
+  const grid = document.createElement("div");
+  grid.className = "date-picker-grid";
   for (const d of cells) {
     const isOutside = d.getMonth() !== month;
-    const ds = toDateStr(d);
     const isToday = d.getTime() === today.getTime();
-    const isSelected = selected && ds === toDateStr(selected);
-    const disabled = min && d < min || max && d > max;
+    const isSelected = selected !== null && toDateStr(d) === toDateStr(selected);
+    const disabled = min !== null && d < min || max !== null && d > max;
     const classes = ["date-picker-cell"];
     if (isOutside) classes.push("is-outside");
     if (isToday) classes.push("is-today");
     if (isSelected) classes.push("is-selected");
     if (disabled) classes.push("is-disabled");
-    html += `<button type="button" class="${classes.join(" ")}" data-dp-date="${ds}"${disabled ? " disabled" : ""}>${d.getDate()}</button>`;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = classes.join(" ");
+    btn.textContent = String(d.getDate());
+    if (disabled) btn.disabled = true;
+    btn.addEventListener("click", () => onPick(d));
+    grid.appendChild(btn);
   }
-  html += `</div><div class="date-picker-foot">
-    <button type="button" class="date-picker-today" data-dp-today>\u4ECA\u5929</button>
-    <button type="button" class="date-picker-clear" data-dp-clear>\u6E05\u9664</button>
-  </div>`;
-  panel.innerHTML = html;
-  panel.querySelector('[data-dp-nav="-1"]')?.addEventListener("click", () => {
-    ctx.view = new Date(year, month - 1, 15);
-    renderCalendar(panel, { ...ctx, view: ctx.view });
+  const foot = document.createElement("div");
+  foot.className = "date-picker-foot";
+  const todayBtn = document.createElement("button");
+  todayBtn.type = "button";
+  todayBtn.className = "date-picker-today";
+  todayBtn.textContent = "\u4ECA\u5929";
+  const clearBtn = document.createElement("button");
+  clearBtn.type = "button";
+  clearBtn.className = "date-picker-clear";
+  clearBtn.textContent = "\u6E05\u9664";
+  foot.append(todayBtn, clearBtn);
+  panel.append(head, weekdays, grid, foot);
+  prevBtn.addEventListener("click", () => {
+    renderCalendar(panel, { ...ctx, view: new Date(year, month - 1, 15) });
   });
-  panel.querySelector('[data-dp-nav="1"]')?.addEventListener("click", () => {
-    ctx.view = new Date(year, month + 1, 15);
-    renderCalendar(panel, { ...ctx, view: ctx.view });
+  nextBtn.addEventListener("click", () => {
+    renderCalendar(panel, { ...ctx, view: new Date(year, month + 1, 15) });
   });
-  panel.querySelectorAll("[data-dp-date]").forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const ds = btn.dataset.dpDate;
-      if (!ds) return;
-      const d = parseDateStr(ds);
-      if (d) onPick(d);
-    });
-  });
-  panel.querySelector("[data-dp-today]")?.addEventListener("click", () => {
+  todayBtn.addEventListener("click", () => {
     onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
   });
-  panel.querySelector("[data-dp-clear]")?.addEventListener("click", () => {
+  clearBtn.addEventListener("click", () => {
     onPick(null);
   });
 }
@@ -120,11 +303,26 @@ function closePanel() {
     window.removeEventListener("keydown", escHandler);
     escHandler = null;
   }
+  if (repositionHandler) {
+    window.removeEventListener("scroll", repositionHandler);
+    window.removeEventListener("resize", repositionHandler);
+    repositionHandler = null;
+  }
 }
+var pickersInit = /* @__PURE__ */ new WeakSet();
 function setupPicker(container) {
+  if (pickersInit.has(container)) return () => {
+  };
+  pickersInit.add(container);
   const el = container;
-  if (el.__icenDatePickerInit) return;
-  el.__icenDatePickerInit = true;
+  const ac = new AbortController();
+  const disposers = [
+    () => {
+      if (openPicker === el) closePanel();
+      ac.abort();
+      pickersInit.delete(container);
+    }
+  ];
   const fmt = el.dataset.datePickerFormat ?? "yyyy-mm-dd";
   const minStr = el.dataset.datePickerMin;
   const maxStr = el.dataset.datePickerMax;
@@ -140,7 +338,12 @@ function setupPicker(container) {
     trigger = document.createElement("button");
     trigger.type = "button";
     trigger.className = "date-picker-trigger";
-    trigger.innerHTML = `<span class="date-picker-value${initialDate ? "" : " is-empty"}"></span><span class="date-picker-icon">${CAL_ICON}</span>`;
+    const value = document.createElement("span");
+    value.className = initialDate ? "date-picker-value" : "date-picker-value is-empty";
+    const icon = document.createElement("span");
+    icon.className = "date-picker-icon";
+    icon.appendChild(buildCalIcon());
+    trigger.append(value, icon);
     el.prepend(trigger);
   }
   trigger.setAttribute("aria-haspopup", "dialog");
@@ -157,8 +360,9 @@ function setupPicker(container) {
   if (hidden) {
     const obs = new MutationObserver(() => paint());
     obs.observe(hidden, { attributes: true, attributeFilter: ["value"] });
+    disposers.push(() => obs.disconnect());
   }
-  trigger.addEventListener("click", () => {
+  const onTriggerClick = () => {
     if (openPicker === el) {
       closePanel();
       return;
@@ -169,7 +373,7 @@ function setupPicker(container) {
     const panel = ensurePanel();
     panel.hidden = false;
     const selected = hidden?.value ? parseDateStr(hidden.value) : null;
-    const view = selected ?? /* @__PURE__ */ new Date();
+    const view = selected ? new Date(selected.getTime()) : /* @__PURE__ */ new Date();
     view.setDate(15);
     positionPanel(panel, trigger);
     renderCalendar(panel, {
@@ -179,17 +383,9 @@ function setupPicker(container) {
       max,
       weekStart,
       onPick: (d) => {
-        if (d === null) {
-          if (hidden) {
-            hidden.value = "";
-            hidden.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-        } else {
-          if (hidden) {
-            hidden.value = toDateStr(d);
-            hidden.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-        }
+        if (hidden) hidden.value = d ? toDateStr(d) : "";
+        emitIcen(el, "icen:date-change", { value: d ? toDateStr(d) : "", date: d });
+        if (hidden) hidden.dispatchEvent(new Event("change", { bubbles: true }));
         paint();
         closePanel();
       }
@@ -208,20 +404,31 @@ function setupPicker(container) {
       }
     };
     window.addEventListener("keydown", escHandler);
-    const reposition = () => {
-      if (openPicker === el && panel && !panel.hidden) positionPanel(panel, trigger);
+    repositionHandler = () => {
+      if (openPicker === el && !panel.hidden) positionPanel(panel, trigger);
     };
-    window.addEventListener("scroll", reposition, { passive: true, once: false });
-    window.addEventListener("resize", reposition, { passive: true });
-  });
+    window.addEventListener("scroll", repositionHandler, { passive: true });
+    window.addEventListener("resize", repositionHandler, { passive: true });
+  };
+  trigger.addEventListener("click", onTriggerClick, { signal: ac.signal });
+  return () => {
+    for (const d of disposers) d();
+  };
 }
-function initDatePicker(root = document) {
-  if (typeof document === "undefined") return;
-  if (typeof window === "undefined") return;
+function initDatePicker(root) {
+  if (typeof document === "undefined") return () => {
+  };
+  if (typeof window === "undefined") return () => {
+  };
+  const scope = root ?? document;
   const pickers = [];
-  if (root instanceof Element && root.matches(".date-picker[data-date-picker]")) pickers.push(root);
-  pickers.push(...Array.from(root.querySelectorAll(".date-picker[data-date-picker]")));
-  for (const p of pickers) setupPicker(p);
+  if (scope instanceof Element && scope.matches(".date-picker[data-date-picker]")) pickers.push(scope);
+  pickers.push(...Array.from(scope.querySelectorAll(".date-picker[data-date-picker]")));
+  const disposers = [];
+  for (const p of pickers) disposers.push(setupPicker(p));
+  return () => {
+    for (const d of disposers) d();
+  };
 }
 export {
   initDatePicker

package/dist/behaviors/dropdown.d.mts

@@ -0,0 +1,8 @@
+/**
+ * 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。
+ * 返回销毁函数：摘除 document 委托并复位幂等标记（销毁后可重新 init）；
+ * 销毁时若有面板开着会顺带收起。SSR 下返回 no-op。
+ */
+declare function initDropdown(root?: ParentNode): () => void;
+
+export { initDropdown };