@icen.ai/ui 0.3.0 → 0.5.0

package/dist/behaviors/datatable.mjs

@@ -155,6 +155,8 @@ function svgIcon(d, size = 12) {
 var ICON_SEARCH = "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.3-4.3";
 var ICON_FUNNEL = "M22 3H2l8 9.46V19l4 2v-8.54L22 3Z";
 var ICON_CHEVRON = "m6 9 6 6 6-6";
+var ICON_COLUMNS = "M3 3h7v18H3zM14 3h7v18h-7z";
+var ICON_DOWNLOAD = "M12 3v12m0 0-4-4m4 4 4-4M5 21h14";
 function defaultCompare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a ?? "").localeCompare(String(b ?? ""), "zh-CN", { numeric: true });
@@ -169,7 +171,11 @@ function noopHandle() {
     setFilter: noop,
     setSort: noop,
     refresh: noop,
-    destroy: noop
+    destroy: noop,
+    getData: () => [],
+    exportCSV: noop,
+    showColumn: noop,
+    hideColumn: noop
   };
 }
 function createTable(el, opts) {
@@ -184,13 +190,18 @@ function createTable(el, opts) {
   const filters = /* @__PURE__ */ new Map();
   const selected = /* @__PURE__ */ new Set();
   const expanded = /* @__PURE__ */ new Set();
+  const colWidths = /* @__PURE__ */ new Map();
+  const colHidden = /* @__PURE__ */ new Map();
+  let lastClickedIndex = -1;
   let destroyed = false;
   const virtual = opts.virtual === true;
-  const rowH = opts.rowHeight ?? 44;
+  const compact = opts.density === "compact";
+  const rowH = opts.rowHeight ?? (compact ? 32 : 44);
   const pageSizes = opts.pageSizes ?? [10, 20, 50];
   const selectable = opts.selectable === true;
   const expandable = !virtual ? opts.expandable : void 0;
-  const cols = () => opts.columns.filter((c) => !c.hidden);
+  const resizable = opts.resizable !== false;
+  const cols = () => opts.columns.filter((c) => !(c.hidden || colHidden.get(c.key)));
   const keyOf = (row, index) => {
     if (typeof opts.rowKey === "function") return opts.rowKey(row);
     if (typeof opts.rowKey === "string") return String(row[opts.rowKey]);
@@ -202,7 +213,12 @@ function createTable(el, opts) {
     keyCache = /* @__PURE__ */ new WeakMap();
     data.forEach((r, i) => keyCache.set(r, keyOf(r, i)));
   }
+  let pipelineCache = null;
+  function invalidate() {
+    pipelineCache = null;
+  }
   function pipeline() {
+    if (pipelineCache) return pipelineCache;
     let rows = data;
     if (search) {
       const q = search.toLowerCase();
@@ -223,6 +239,7 @@ function createTable(el, opts) {
       const cmp = col?.sortFn ? (a, b) => col.sortFn(a, b) : (a, b) => defaultCompare(a[sortKey], b[sortKey]);
       rows = [...rows].sort((a, b) => sortDir === "asc" ? cmp(a, b) : -cmp(a, b));
     }
+    pipelineCache = rows;
     return rows;
   }
   el.textContent = "";
@@ -230,21 +247,55 @@ function createTable(el, opts) {
   root.className = "datatable";
   if (opts.striped) root.classList.add("datatable--striped");
   if (virtual) root.classList.add("datatable--virtual");
+  if (compact) root.classList.add("datatable--compact");
+  if (opts.columns.some((c) => c.frozen)) root.classList.add("datatable--frozen");
   let searchInput = null;
-  if (opts.searchable) {
-    const bar = document.createElement("div");
-    bar.className = "dt-toolbar";
-    const box = document.createElement("div");
-    box.className = "dt-search";
-    box.appendChild(svgIcon(ICON_SEARCH, 14));
-    searchInput = document.createElement("input");
-    searchInput.className = "dt-search-input";
-    searchInput.type = "search";
-    searchInput.placeholder = opts.searchPlaceholder ?? "\u641C\u7D22\u2026";
-    searchInput.setAttribute("aria-label", "\u641C\u7D22\u8868\u683C");
-    box.appendChild(searchInput);
-    bar.appendChild(box);
-    root.appendChild(bar);
+  const needsToolbar = opts.searchable || opts.columnVisibility || opts.exportable;
+  let toolbar = null;
+  if (needsToolbar) {
+    toolbar = document.createElement("div");
+    toolbar.className = "dt-toolbar";
+    if (opts.searchable) {
+      const box = document.createElement("div");
+      box.className = "dt-search";
+      box.appendChild(svgIcon(ICON_SEARCH, 14));
+      searchInput = document.createElement("input");
+      searchInput.className = "dt-search-input";
+      searchInput.type = "search";
+      searchInput.placeholder = opts.searchPlaceholder ?? "\u641C\u7D22\u2026";
+      searchInput.setAttribute("aria-label", "\u641C\u7D22\u8868\u683C");
+      box.appendChild(searchInput);
+      toolbar.appendChild(box);
+    }
+    const actions = document.createElement("div");
+    actions.className = "dt-toolbar-actions";
+    if (opts.columnVisibility) {
+      const colBtn = document.createElement("button");
+      colBtn.type = "button";
+      colBtn.className = "dt-tool-btn";
+      colBtn.setAttribute("aria-label", "\u5217\u8BBE\u7F6E");
+      colBtn.appendChild(svgIcon(ICON_COLUMNS, 14));
+      colBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        if (openPanel?.key === "__cols") closeFilterPanel();
+        else {
+          closeFilterPanel();
+          openColumnPanel(colBtn);
+        }
+      });
+      actions.appendChild(colBtn);
+    }
+    if (opts.exportable) {
+      const expBtn = document.createElement("button");
+      expBtn.type = "button";
+      expBtn.className = "dt-tool-btn";
+      expBtn.setAttribute("aria-label", "\u5BFC\u51FA CSV");
+      expBtn.appendChild(svgIcon(ICON_DOWNLOAD, 14));
+      expBtn.addEventListener("click", () => exportCSV());
+      actions.appendChild(expBtn);
+    }
+    if (actions.children.length > 0) toolbar.appendChild(actions);
+    root.appendChild(toolbar);
   }
   const scroll = document.createElement("div");
   scroll.className = "dt-scroll";
@@ -269,11 +320,29 @@ function createTable(el, opts) {
   foot.className = "dt-foot";
   root.appendChild(foot);
   el.appendChild(root);
+  function frozenOffsets() {
+    const offsets = /* @__PURE__ */ new Map();
+    if (!opts.columns.some((c) => c.frozen)) return offsets;
+    const visible = cols();
+    let acc = 0;
+    if (selectable) acc += 40;
+    if (expandable) acc += 34;
+    for (const c of visible) {
+      if (c.frozen) offsets.set(c.key, acc);
+      const w = colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)";
+      acc += parsePx(w);
+    }
+    return offsets;
+  }
+  function parsePx(w) {
+    const m = /^(\d+(?:\.\d+)?)px/.exec(w);
+    return m ? Number(m[1]) : 0;
+  }
   function template() {
     const parts = [];
     if (selectable) parts.push("40px");
     if (expandable) parts.push("34px");
-    for (const c of cols()) parts.push(c.width ?? "minmax(0,1fr)");
+    for (const c of cols()) parts.push(colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)");
     return parts.join(" ");
   }
   function fillCell(cell, col, row, rowIndex) {
@@ -355,6 +424,7 @@ function createTable(el, opts) {
       const cell = document.createElement("div");
       cell.className = "dt-cell dt-cell--head";
       if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) cell.classList.add("dt-cell--frozen");
       const title = document.createElement("span");
       title.className = "dt-head-title";
       title.textContent = col.title;
@@ -376,10 +446,12 @@ function createTable(el, opts) {
             sortDir = "asc";
           } else if (sortDir === "asc") sortDir = "desc";
           else sortKey = null;
+          invalidate();
+          opts.onSortChange?.(sortKey, sortDir);
           renderAll();
         };
         cell.addEventListener("click", (ev) => {
-          if (ev.target.closest(".dt-filter-btn")) return;
+          if (ev.target.closest(".dt-filter-btn, .dt-resize")) return;
           toggleSort();
         });
         cell.addEventListener("keydown", (ev) => {
@@ -407,9 +479,102 @@ function createTable(el, opts) {
         });
         cell.appendChild(btn);
       }
+      if (resizable && col !== cols()[cols().length - 1]) {
+        const handle = document.createElement("div");
+        handle.className = "dt-resize";
+        handle.setAttribute("role", "separator");
+        handle.setAttribute("aria-orientation", "vertical");
+        handle.setAttribute("aria-label", `\u8C03\u6574\u300C${col.title}\u300D\u5217\u5BBD`);
+        attachResize(handle, col);
+        cell.appendChild(handle);
+      }
       headRow.appendChild(cell);
     }
   }
+  function attachResize(handle, col) {
+    handle.addEventListener("pointerdown", (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const startX = ev.clientX;
+      const startW = handle.closest(".dt-cell").getBoundingClientRect().width;
+      handle.setPointerCapture(ev.pointerId);
+      const onMove = (e) => {
+        const delta = e.clientX - startX;
+        const next = Math.max(48, Math.round(startW + delta));
+        colWidths.set(col.key, `${next}px`);
+        headRow.style.gridTemplateColumns = template();
+        body.querySelectorAll(".dt-row").forEach((r) => {
+          r.style.gridTemplateColumns = template();
+        });
+      };
+      const onUp = (e) => {
+        handle.releasePointerCapture(e.pointerId);
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", onUp);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+    });
+  }
+  function openColumnPanel(btn) {
+    const panel2 = document.createElement("div");
+    panel2.className = "dt-filter-panel dt-col-panel";
+    panel2.hidden = true;
+    panel2.addEventListener("click", (ev) => ev.stopPropagation());
+    const list = document.createElement("div");
+    list.className = "dt-filter-list";
+    for (const col of opts.columns) {
+      if (col.key === "__select" || col.key === "__expand") continue;
+      const row = document.createElement("label");
+      row.className = "dt-filter-item";
+      const isHidden = colHidden.get(col.key) ?? col.hidden ?? false;
+      const box = makeCheck(!isHidden, col.title);
+      box.addEventListener("change", () => {
+        if (box.checked) colHidden.delete(col.key);
+        else colHidden.set(col.key, true);
+        invalidate();
+        renderAll();
+      });
+      const text = document.createElement("span");
+      text.textContent = col.title;
+      row.append(box, text);
+      list.appendChild(row);
+    }
+    panel2.appendChild(list);
+    document.body.appendChild(panel2);
+    openPanel = { key: "__cols", el: panel2 };
+    const rect = btn.getBoundingClientRect();
+    const pr = panel2.getBoundingClientRect();
+    let x = rect.right - pr.width;
+    let y = rect.bottom + 4;
+    if (x < 8) x = 8;
+    if (y + pr.height > window.innerHeight - 8) y = rect.top - pr.height - 4;
+    panel2.style.left = `${x}px`;
+    panel2.style.top = `${y}px`;
+    panel2.hidden = false;
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+  }
+  function exportCSV(filename) {
+    const rows = pipeline();
+    const visible = cols();
+    const header = visible.map((c) => csvEscape(c.title)).join(",");
+    const lines = rows.map(
+      (row) => visible.map((c) => csvEscape(String(row[c.key] ?? ""))).join(",")
+    );
+    const csv = "\uFEFF" + [header, ...lines].join("\r\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? "export.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  function csvEscape(s) {
+    if (/[",\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+    return s;
+  }
   function buildFilterPanel(col) {
     const panel2 = document.createElement("div");
     panel2.className = "dt-filter-panel";
@@ -428,6 +593,7 @@ function createTable(el, opts) {
         else cur.delete(v);
         if (cur.size === values.length) filters.delete(col.key);
         else filters.set(col.key, cur);
+        invalidate();
         page = 1;
         renderAll();
       });
@@ -444,6 +610,7 @@ function createTable(el, opts) {
     reset.textContent = "\u91CD\u7F6E";
     reset.addEventListener("click", () => {
       filters.delete(col.key);
+      invalidate();
       page = 1;
       closeFilterPanel();
       renderAll();
@@ -459,15 +626,40 @@ function createTable(el, opts) {
     tr.style.gridTemplateColumns = template();
     if (virtual) tr.style.height = `${rowH}px`;
     if (selected.has(key)) tr.classList.add("is-selected");
+    if (opts.rowClassName) {
+      const extra = opts.rowClassName(row, rowIndex);
+      if (extra) tr.classList.add(...extra.split(/\s+/).filter(Boolean));
+    }
     if (selectable) {
       const cell = document.createElement("div");
       cell.className = "dt-cell dt-cell--check";
+      if (frozenOffsets().size > 0 && selectable) {
+        cell.classList.add("dt-cell--frozen");
+        cell.style.left = "0px";
+      }
       const box = makeCheck(selected.has(key), "\u9009\u62E9\u8BE5\u884C");
-      box.addEventListener("click", (ev) => ev.stopPropagation());
+      box.addEventListener("click", (ev) => {
+        box._shift = ev.shiftKey;
+        ev.stopPropagation();
+      });
       box.addEventListener("change", () => {
-        if (box.checked) selected.add(key);
-        else selected.delete(key);
-        tr.classList.toggle("is-selected", box.checked);
+        const shift = box._shift === true;
+        if (shift && lastClickedIndex >= 0 && lastClickedIndex !== rowIndex) {
+          const rows = pipeline();
+          const [lo, hi] = lastClickedIndex < rowIndex ? [lastClickedIndex, rowIndex] : [rowIndex, lastClickedIndex];
+          const willSelect = box.checked;
+          for (let i = lo; i <= hi; i++) {
+            const k = keyOfRow(rows[i]);
+            if (willSelect) selected.add(k);
+            else selected.delete(k);
+          }
+          renderBody();
+        } else {
+          if (box.checked) selected.add(key);
+          else selected.delete(key);
+          tr.classList.toggle("is-selected", box.checked);
+        }
+        lastClickedIndex = rowIndex;
         emitSelection();
         renderHead();
         renderFoot(pipeline().length);
@@ -493,10 +685,16 @@ function createTable(el, opts) {
       cell.appendChild(btn);
       tr.appendChild(cell);
     }
+    const offsets = frozenOffsets();
     for (const col of cols()) {
       const cell = document.createElement("div");
       cell.className = "dt-cell";
       if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) {
+        cell.classList.add("dt-cell--frozen");
+        const off = offsets.get(col.key);
+        if (off != null) cell.style.left = `${off}px`;
+      }
       fillCell(cell, col, row, rowIndex);
       tr.appendChild(cell);
     }
@@ -663,6 +861,7 @@ function createTable(el, opts) {
     window.clearTimeout(searchTimer);
     searchTimer = window.setTimeout(() => {
       search = searchInput?.value.trim() ?? "";
+      invalidate();
       page = 1;
       renderAll();
     }, 160);
@@ -676,7 +875,7 @@ function createTable(el, opts) {
   function onDocPointerDown(ev) {
     if (!openPanel) return;
     const t = ev.target;
-    if (t instanceof Node && (openPanel.el.contains(t) || headRow.contains(t))) return;
+    if (t instanceof Node && (openPanel.el.contains(t) || headRow.contains(t) || toolbar?.contains(t))) return;
     closeFilterPanel();
   }
   document.addEventListener("pointerdown", onDocPointerDown, true);
@@ -700,6 +899,7 @@ function createTable(el, opts) {
     setData(next) {
       data = next;
       rekey();
+      invalidate();
       page = 1;
       renderAll();
     },
@@ -714,21 +914,41 @@ function createTable(el, opts) {
     setSearch(q) {
       search = q;
       if (searchInput) searchInput.value = q;
+      invalidate();
       page = 1;
       renderAll();
     },
     setFilter(key, values) {
       if (values === null) filters.delete(key);
       else filters.set(key, new Set(values));
+      invalidate();
       page = 1;
       renderAll();
     },
     setSort(key, dir = "asc") {
       sortKey = key;
       sortDir = dir;
+      invalidate();
+      opts.onSortChange?.(sortKey, sortDir);
+      renderAll();
+    },
+    getData() {
+      return pipeline();
+    },
+    exportCSV,
+    showColumn(key) {
+      colHidden.delete(key);
+      opts.columns.find((c) => c.key === key).hidden = false;
+      invalidate();
+      renderAll();
+    },
+    hideColumn(key) {
+      colHidden.set(key, true);
+      invalidate();
       renderAll();
     },
     refresh() {
+      invalidate();
       renderAll();
     },
     destroy() {

package/dist/behaviors/date-picker.mjs

@@ -0,0 +1,228 @@
+// src/behaviors/date-picker.ts
+var openPicker = null;
+var panelEl = null;
+var outsideHandler = null;
+var escHandler = null;
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function toDateStr(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseDateStr(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function format(d, fmt) {
+  if (!d) return "";
+  return fmt.replace(/yyyy/g, String(d.getFullYear())).replace(/yy/g, String(d.getFullYear()).slice(-2)).replace(/mm/g, pad(d.getMonth() + 1)).replace(/m/g, String(d.getMonth() + 1)).replace(/dd/g, pad(d.getDate())).replace(/d/g, String(d.getDate()));
+}
+function ensurePanel() {
+  if (panelEl && panelEl.isConnected) return panelEl;
+  const el = document.createElement("div");
+  el.className = "date-picker-panel";
+  el.setAttribute("role", "dialog");
+  el.setAttribute("aria-label", "\u9009\u62E9\u65E5\u671F");
+  el.hidden = true;
+  document.body.appendChild(el);
+  panelEl = el;
+  return el;
+}
+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>';
+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) {
+  const { view, selected, min, max, weekStart, onPick } = ctx;
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const labels = weekStart === 0 ? WEEK_LABELS_SUN : WEEK_LABELS_ZH;
+  const firstDay = new Date(year, month, 1);
+  const offsetRaw = firstDay.getDay();
+  const leadDays = weekStart === 0 ? offsetRaw : (offsetRaw + 6) % 7;
+  const gridStart = new Date(year, month, 1 - leadDays);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const cells = [];
+  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">`;
+  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 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>`;
+  }
+  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 });
+  });
+  panel.querySelector('[data-dp-nav="1"]')?.addEventListener("click", () => {
+    ctx.view = new Date(year, month + 1, 15);
+    renderCalendar(panel, { ...ctx, view: ctx.view });
+  });
+  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", () => {
+    onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
+  });
+  panel.querySelector("[data-dp-clear]")?.addEventListener("click", () => {
+    onPick(null);
+  });
+}
+function closePanel() {
+  if (!panelEl) return;
+  panelEl.hidden = true;
+  openPicker?.querySelector(".date-picker-trigger")?.classList.remove("is-open");
+  openPicker = null;
+  if (outsideHandler) {
+    document.removeEventListener("mousedown", outsideHandler);
+    outsideHandler = null;
+  }
+  if (escHandler) {
+    window.removeEventListener("keydown", escHandler);
+    escHandler = null;
+  }
+}
+function setupPicker(container) {
+  const el = container;
+  if (el.__icenDatePickerInit) return;
+  el.__icenDatePickerInit = true;
+  const fmt = el.dataset.datePickerFormat ?? "yyyy-mm-dd";
+  const minStr = el.dataset.datePickerMin;
+  const maxStr = el.dataset.datePickerMax;
+  const weekStart = Number(el.dataset.datePickerWeekStart ?? "1");
+  const placeholder = el.dataset.datePickerPlaceholder ?? "\u9009\u62E9\u65E5\u671F";
+  const min = minStr ? parseDateStr(minStr) : null;
+  const max = maxStr ? parseDateStr(maxStr) : null;
+  const hidden = el.querySelector('input[type="hidden"]');
+  const initialStr = hidden?.value ?? "";
+  const initialDate = initialStr ? parseDateStr(initialStr) : null;
+  let trigger = el.querySelector(".date-picker-trigger");
+  if (!trigger) {
+    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>`;
+    el.prepend(trigger);
+  }
+  trigger.setAttribute("aria-haspopup", "dialog");
+  const valueEl = trigger.querySelector(".date-picker-value");
+  function paint() {
+    const v = hidden?.value ?? "";
+    const d = v ? parseDateStr(v) : null;
+    if (valueEl) {
+      valueEl.textContent = d ? format(d, fmt) : placeholder;
+      valueEl.classList.toggle("is-empty", !d);
+    }
+  }
+  paint();
+  if (hidden) {
+    const obs = new MutationObserver(() => paint());
+    obs.observe(hidden, { attributes: true, attributeFilter: ["value"] });
+  }
+  trigger.addEventListener("click", () => {
+    if (openPicker === el) {
+      closePanel();
+      return;
+    }
+    closePanel();
+    openPicker = el;
+    trigger.classList.add("is-open");
+    const panel = ensurePanel();
+    panel.hidden = false;
+    const selected = hidden?.value ? parseDateStr(hidden.value) : null;
+    const view = selected ?? /* @__PURE__ */ new Date();
+    view.setDate(15);
+    positionPanel(panel, trigger);
+    renderCalendar(panel, {
+      view,
+      selected,
+      min,
+      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 }));
+          }
+        }
+        paint();
+        closePanel();
+      }
+    });
+    outsideHandler = (ev) => {
+      const t = ev.target instanceof Node ? ev.target : null;
+      if (!t) return;
+      if (panel.contains(t) || el.contains(t)) return;
+      closePanel();
+    };
+    document.addEventListener("mousedown", outsideHandler);
+    escHandler = (ev) => {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        closePanel();
+      }
+    };
+    window.addEventListener("keydown", escHandler);
+    const reposition = () => {
+      if (openPicker === el && panel && !panel.hidden) positionPanel(panel, trigger);
+    };
+    window.addEventListener("scroll", reposition, { passive: true, once: false });
+    window.addEventListener("resize", reposition, { passive: true });
+  });
+}
+function initDatePicker(root = document) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  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);
+}
+export {
+  initDatePicker
+};