@sanguo-dev/calendar-ui 0.0.2 → 0.0.3

package/src/components/day.ts

@@ -1,79 +1,79 @@
-import type { CalendarDay } from "../types";
-import { node } from "../utils/dom";
-
-/** 周末判断：只看公历星期，与节日 / 调休数据无关 */
-const isWeekend = function (year: number, month: number, day: number): boolean {
-  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
-  return weekday === 0 || weekday === 6;
-};
-
-/**
- * 建一个空的日期格
- *
- * 节点只建一次，之后靠 setDay / setDayState 更新，换月不再分配新节点。
- */
-export const createDayCell = function (): HTMLButtonElement {
-  const cell = node("button", "cui__day");
-  cell.type = "button";
-
-  const tag = node("span", "cui__day-tag");
-  tag.hidden = true;
-  tag.setAttribute("aria-hidden", "true");
-
-  cell.append(tag, node("span", "cui__day-num"), node("span", "cui__day-sub"));
-  return cell;
-};
-
-/** 更新格子的日期内容；同一日期不重复写文本，只刷新状态 */
-export const setDay = function (cell: HTMLButtonElement, day: CalendarDay<unknown>): void {
-  const key = `${day.year}-${day.month}-${day.day}`;
-
-  if (cell.dataset.date !== key) {
-    cell.dataset.date = key;
-
-    // 结构固定为 tag → num → sub，按兄弟节点取比三次 querySelector 便宜
-    const tag = cell.firstElementChild as HTMLElement;
-    const num = tag.nextElementSibling as HTMLElement;
-    const sub = num.nextElementSibling as HTMLElement;
-    const badge = day.badge;
-
-    tag.textContent = badge?.text ?? "";
-    tag.hidden = badge === null;
-
-    if (badge?.tone !== undefined) {
-      tag.dataset.tone = badge.tone;
-      cell.dataset.tone = badge.tone;
-    } else {
-      delete tag.dataset.tone;
-      delete cell.dataset.tone;
-    }
-
-    num.textContent = String(day.day);
-    sub.textContent = day.subtitle;
-
-    // 周六 / 周日固定标红：和法定节假日同色，但不由节假日数据决定
-    cell.classList.toggle("is-weekend", isWeekend(day.year, day.month, day.day));
-  }
-
-  setDayState(cell, day);
-};
-
-/** 只更新状态类，不动文本；选中、hover 预览这类高频操作走这里 */
-export const setDayState = function (cell: HTMLButtonElement, day: CalendarDay<unknown>): void {
-  cell.classList.toggle("is-outside", !day.inCurrentMonth);
-  cell.classList.toggle("is-today", day.isToday);
-  cell.classList.toggle("is-selected", day.isSelected);
-  cell.classList.toggle("is-range-start", day.isRangeStart);
-  cell.classList.toggle("is-range-end", day.isRangeEnd);
-  cell.classList.toggle("is-in-range", day.isInRange);
-  cell.classList.toggle("is-disabled", day.isDisabled);
-  cell.disabled = day.isDisabled;
-  cell.tabIndex = day.inCurrentMonth && !day.isDisabled ? 0 : -1;
-  cell.setAttribute("aria-label", day.ariaLabel);
-
-  if (day.isDisabled) cell.setAttribute("aria-disabled", "true");
-  else cell.removeAttribute("aria-disabled");
-
-  if (day.isSelected) cell.setAttribute("aria-pressed", "true");
-  else cell.removeAttribute("aria-pressed");
-};
+import type { CalendarDay } from "../types";
+import { node } from "../utils/dom";
+
+/** 周末判断：只看公历星期，与节日 / 调休数据无关 */
+const isWeekend = function (year: number, month: number, day: number): boolean {
+  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+  return weekday === 0 || weekday === 6;
+};
+
+/**
+ * 建一个空的日期格
+ *
+ * 节点只建一次，之后靠 setDay / setDayState 更新，换月不再分配新节点。
+ */
+export const createDayCell = function (): HTMLButtonElement {
+  const cell = node("button", "cui__day");
+  cell.type = "button";
+
+  const tag = node("span", "cui__day-tag");
+  tag.hidden = true;
+  tag.setAttribute("aria-hidden", "true");
+
+  cell.append(tag, node("span", "cui__day-num"), node("span", "cui__day-sub"));
+  return cell;
+};
+
+/** 更新格子的日期内容；同一日期不重复写文本，只刷新状态 */
+export const setDay = function (cell: HTMLButtonElement, day: CalendarDay<unknown>): void {
+  const key = `${day.year}-${day.month}-${day.day}`;
+
+  if (cell.dataset.date !== key) {
+    cell.dataset.date = key;
+
+    // 结构固定为 tag → num → sub，按兄弟节点取比三次 querySelector 便宜
+    const tag = cell.firstElementChild as HTMLElement;
+    const num = tag.nextElementSibling as HTMLElement;
+    const sub = num.nextElementSibling as HTMLElement;
+    const badge = day.badge;
+
+    tag.textContent = badge?.text ?? "";
+    tag.hidden = badge === null;
+
+    if (badge?.tone !== undefined) {
+      tag.dataset.tone = badge.tone;
+      cell.dataset.tone = badge.tone;
+    } else {
+      delete tag.dataset.tone;
+      delete cell.dataset.tone;
+    }
+
+    num.textContent = String(day.day);
+    sub.textContent = day.subtitle;
+
+    // 周六 / 周日固定标红：和法定节假日同色，但不由节假日数据决定
+    cell.classList.toggle("is-weekend", isWeekend(day.year, day.month, day.day));
+  }
+
+  setDayState(cell, day);
+};
+
+/** 只更新状态类，不动文本；选中、hover 预览这类高频操作走这里 */
+export const setDayState = function (cell: HTMLButtonElement, day: CalendarDay<unknown>): void {
+  cell.classList.toggle("is-outside", !day.inCurrentMonth);
+  cell.classList.toggle("is-today", day.isToday);
+  cell.classList.toggle("is-selected", day.isSelected);
+  cell.classList.toggle("is-range-start", day.isRangeStart);
+  cell.classList.toggle("is-range-end", day.isRangeEnd);
+  cell.classList.toggle("is-in-range", day.isInRange);
+  cell.classList.toggle("is-disabled", day.isDisabled);
+  cell.disabled = day.isDisabled;
+  cell.tabIndex = day.inCurrentMonth && !day.isDisabled ? 0 : -1;
+  cell.setAttribute("aria-label", day.ariaLabel);
+
+  if (day.isDisabled) cell.setAttribute("aria-disabled", "true");
+  else cell.removeAttribute("aria-disabled");
+
+  if (day.isSelected) cell.setAttribute("aria-pressed", "true");
+  else cell.removeAttribute("aria-pressed");
+};

package/src/components/grid.ts

@@ -1,181 +1,181 @@
-import type { CalendarDay, GridHandle, GridOptions } from "../types";
-import { node } from "../utils/dom";
-import { prefersReducedMotion, readCssDuration, readCssEasing } from "../utils/motion";
-import { createDayCell, setDay, setDayState } from "./day";
-
-/** 固定 6 行 × 7 列 */
-const CELL_COUNT = 42;
-const ROW_COUNT = 6;
-
-interface RowMetrics {
-  height: number;
-  opacity: number;
-  marginBottom: number;
-}
-
-/** 读一行当前的视觉尺寸（动画进行中时读到的是动画值） */
-const readRowMetrics = function (row: HTMLElement): RowMetrics {
-  const rect = row.getBoundingClientRect();
-  const style = getComputedStyle(row);
-  const margin = Number.parseFloat(style.marginBottom);
-  return {
-    height: rect.height,
-    opacity: Number.parseFloat(style.opacity) || 0,
-    marginBottom: Number.isFinite(margin) ? margin : 0,
-  };
-};
-
-/**
- * 日期网格：42 个格子只建一次，之后按索引复用
- *
- * - render：换月时更新日期/副标题 + 状态
- * - updateState：只切选中/今天等状态类，不动文本
- * - setVisibleRows：折叠时按行动画高度，其余行收起
- *
- * 行高动画必须按真实像素走：CSS 的 max-height 过渡从 200px 收到 0，
- * 真正可见的变化只落在缓动的最后 20%，看起来就是「先不动、再突然合上」。
- *
- * 没有做“按日期复用 + DOM 重排”：42 个节点的移动比 42 次文本写入更贵，
- * 实测换月反而从 0.60ms 退化到 0.93ms。
- */
-export const createGrid = function <TData = null>(options: GridOptions<TData>): GridHandle<TData> {
-  const el = node("div", "cui__grid");
-  const rowEls = Array.from({ length: ROW_COUNT }, () => node("div", "cui__week"));
-  const cells = Array.from({ length: CELL_COUNT }, () => createDayCell());
-
-  rowEls.forEach((row, index) => {
-    row.append(...cells.slice(index * 7, index * 7 + 7));
-  });
-  el.append(...rowEls);
-
-  let days: CalendarDay<TData>[] = [];
-  /** 上一次应用的行集合，重复渲染时直接跳过 */
-  let visibleKey: string | null = null;
-
-  /** 每一行正在跑的高度动画；再次切换时从当前可见高度接着走 */
-  const rowAnimations = new Map<HTMLElement, Animation>();
-
-  const onClick = (event: MouseEvent) => {
-    const cell = (event.target as HTMLElement).closest<HTMLElement>(".cui__day");
-    if (!cell) return;
-
-    // 用索引取格子数据，比解析 data-date 快，也不受补位格影响
-    const picked = days[cells.indexOf(cell as HTMLButtonElement)];
-    if (picked && !picked.isDisabled) options.onSelect(picked);
-  };
-
-  const applyRowState = (row: HTMLElement, visible: boolean): void => {
-    row.classList.toggle("is-collapsed-hidden", !visible);
-    row.toggleAttribute("inert", !visible);
-    if (visible) row.removeAttribute("aria-hidden");
-    else row.setAttribute("aria-hidden", "true");
-  };
-
-  const cancelRowAnimations = (): void => {
-    rowAnimations.forEach((animation) => {
-      try {
-        animation.cancel();
-      } catch {
-        // 动画已经被浏览器回收
-      }
-    });
-    rowAnimations.clear();
-  };
-
-  const applyInstant = (visible: ReadonlySet<number> | null): void => {
-    rowEls.forEach((row, index) => {
-      applyRowState(row, visible === null || visible.has(index));
-    });
-  };
-
-  const animateRows = (visible: ReadonlySet<number> | null): void => {
-    const firstRow = rowEls[0] as HTMLElement;
-    const gridStyle = getComputedStyle(el);
-    const duration = readCssDuration(gridStyle, "--cui-collapse-duration", 200);
-    const easing = readCssEasing(gridStyle, "--cui-collapse-easing", "ease");
-
-    if (typeof firstRow.animate !== "function" || prefersReducedMotion() || duration === 0) {
-      cancelRowAnimations();
-      applyInstant(visible);
-      return;
-    }
-
-    // 先读当前视觉高度（可能正被上一段动画驱动），再取消动画、落到最终状态
-    const before = rowEls.map(readRowMetrics);
-    cancelRowAnimations();
-    applyInstant(visible);
-    const after = rowEls.map(readRowMetrics);
-
-    rowEls.forEach((row, index) => {
-      const from = before[index] as RowMetrics;
-      const to = after[index] as RowMetrics;
-      if (Math.abs(from.height - to.height) < 0.5) return;
-
-      const animation = row.animate(
-        [
-          {
-            height: `${from.height}px`,
-            opacity: from.opacity,
-            marginBottom: `${from.marginBottom}px`,
-          },
-          {
-            height: `${to.height}px`,
-            opacity: to.opacity,
-            marginBottom: `${to.marginBottom}px`,
-          },
-        ],
-        { duration, easing, fill: "none" },
-      );
-
-      rowAnimations.set(row, animation);
-      animation.finished
-        .then(() => {
-          if (rowAnimations.get(row) === animation) rowAnimations.delete(row);
-        })
-        .catch(() => {
-          // cancel 会 reject finished，无需处理
-        });
-    });
-  };
-
-  el.addEventListener("click", onClick);
-
-  return {
-    el,
-    render: (next: CalendarDay<TData>[]) => {
-      days = next;
-      for (let i = 0; i < CELL_COUNT; i++) {
-        const day = next[i];
-        if (day) setDay(cells[i] as HTMLButtonElement, day);
-      }
-    },
-    updateState: (next: CalendarDay<TData>[]) => {
-      days = next;
-      for (let i = 0; i < CELL_COUNT; i++) {
-        const day = next[i];
-        if (day) setDayState(cells[i] as HTMLButtonElement, day);
-      }
-    },
-    setVisibleRows: (rows: readonly number[] | null, animate = true) => {
-      const visible = rows === null ? null : new Set(rows);
-      const key = visible === null ? "*" : [...visible].sort((a, b) => a - b).join(",");
-
-      // 翻月等场景要求瞬时切换：即使行集合没变，也要把进行中的动画收掉
-      if (!animate) {
-        cancelRowAnimations();
-        applyInstant(visible);
-        visibleKey = key;
-        return;
-      }
-
-      if (key === visibleKey) return;
-      visibleKey = key;
-
-      animateRows(visible);
-    },
-    destroy: () => {
-      cancelRowAnimations();
-      el.removeEventListener("click", onClick);
-    },
-  };
-};
+import type { CalendarDay, GridHandle, GridOptions } from "../types";
+import { node } from "../utils/dom";
+import { prefersReducedMotion, readCssDuration, readCssEasing } from "../utils/motion";
+import { createDayCell, setDay, setDayState } from "./day";
+
+/** 固定 6 行 × 7 列 */
+const CELL_COUNT = 42;
+const ROW_COUNT = 6;
+
+interface RowMetrics {
+  height: number;
+  opacity: number;
+  marginBottom: number;
+}
+
+/** 读一行当前的视觉尺寸（动画进行中时读到的是动画值） */
+const readRowMetrics = function (row: HTMLElement): RowMetrics {
+  const rect = row.getBoundingClientRect();
+  const style = getComputedStyle(row);
+  const margin = Number.parseFloat(style.marginBottom);
+  return {
+    height: rect.height,
+    opacity: Number.parseFloat(style.opacity) || 0,
+    marginBottom: Number.isFinite(margin) ? margin : 0,
+  };
+};
+
+/**
+ * 日期网格：42 个格子只建一次，之后按索引复用
+ *
+ * - render：换月时更新日期/副标题 + 状态
+ * - updateState：只切选中/今天等状态类，不动文本
+ * - setVisibleRows：折叠时按行动画高度，其余行收起
+ *
+ * 行高动画必须按真实像素走：CSS 的 max-height 过渡从 200px 收到 0，
+ * 真正可见的变化只落在缓动的最后 20%，看起来就是「先不动、再突然合上」。
+ *
+ * 没有做“按日期复用 + DOM 重排”：42 个节点的移动比 42 次文本写入更贵，
+ * 实测换月反而从 0.60ms 退化到 0.93ms。
+ */
+export const createGrid = function <TData = null>(options: GridOptions<TData>): GridHandle<TData> {
+  const el = node("div", "cui__grid");
+  const rowEls = Array.from({ length: ROW_COUNT }, () => node("div", "cui__week"));
+  const cells = Array.from({ length: CELL_COUNT }, () => createDayCell());
+
+  rowEls.forEach((row, index) => {
+    row.append(...cells.slice(index * 7, index * 7 + 7));
+  });
+  el.append(...rowEls);
+
+  let days: CalendarDay<TData>[] = [];
+  /** 上一次应用的行集合，重复渲染时直接跳过 */
+  let visibleKey: string | null = null;
+
+  /** 每一行正在跑的高度动画；再次切换时从当前可见高度接着走 */
+  const rowAnimations = new Map<HTMLElement, Animation>();
+
+  const onClick = (event: MouseEvent) => {
+    const cell = (event.target as HTMLElement).closest<HTMLElement>(".cui__day");
+    if (!cell) return;
+
+    // 用索引取格子数据，比解析 data-date 快，也不受补位格影响
+    const picked = days[cells.indexOf(cell as HTMLButtonElement)];
+    if (picked && !picked.isDisabled) options.onSelect(picked);
+  };
+
+  const applyRowState = (row: HTMLElement, visible: boolean): void => {
+    row.classList.toggle("is-collapsed-hidden", !visible);
+    row.toggleAttribute("inert", !visible);
+    if (visible) row.removeAttribute("aria-hidden");
+    else row.setAttribute("aria-hidden", "true");
+  };
+
+  const cancelRowAnimations = (): void => {
+    rowAnimations.forEach((animation) => {
+      try {
+        animation.cancel();
+      } catch {
+        // 动画已经被浏览器回收
+      }
+    });
+    rowAnimations.clear();
+  };
+
+  const applyInstant = (visible: ReadonlySet<number> | null): void => {
+    rowEls.forEach((row, index) => {
+      applyRowState(row, visible === null || visible.has(index));
+    });
+  };
+
+  const animateRows = (visible: ReadonlySet<number> | null): void => {
+    const firstRow = rowEls[0] as HTMLElement;
+    const gridStyle = getComputedStyle(el);
+    const duration = readCssDuration(gridStyle, "--cui-collapse-duration", 200);
+    const easing = readCssEasing(gridStyle, "--cui-collapse-easing", "ease");
+
+    if (typeof firstRow.animate !== "function" || prefersReducedMotion() || duration === 0) {
+      cancelRowAnimations();
+      applyInstant(visible);
+      return;
+    }
+
+    // 先读当前视觉高度（可能正被上一段动画驱动），再取消动画、落到最终状态
+    const before = rowEls.map(readRowMetrics);
+    cancelRowAnimations();
+    applyInstant(visible);
+    const after = rowEls.map(readRowMetrics);
+
+    rowEls.forEach((row, index) => {
+      const from = before[index] as RowMetrics;
+      const to = after[index] as RowMetrics;
+      if (Math.abs(from.height - to.height) < 0.5) return;
+
+      const animation = row.animate(
+        [
+          {
+            height: `${from.height}px`,
+            opacity: from.opacity,
+            marginBottom: `${from.marginBottom}px`,
+          },
+          {
+            height: `${to.height}px`,
+            opacity: to.opacity,
+            marginBottom: `${to.marginBottom}px`,
+          },
+        ],
+        { duration, easing, fill: "none" },
+      );
+
+      rowAnimations.set(row, animation);
+      animation.finished
+        .then(() => {
+          if (rowAnimations.get(row) === animation) rowAnimations.delete(row);
+        })
+        .catch(() => {
+          // cancel 会 reject finished，无需处理
+        });
+    });
+  };
+
+  el.addEventListener("click", onClick);
+
+  return {
+    el,
+    render: (next: CalendarDay<TData>[]) => {
+      days = next;
+      for (let i = 0; i < CELL_COUNT; i++) {
+        const day = next[i];
+        if (day) setDay(cells[i] as HTMLButtonElement, day);
+      }
+    },
+    updateState: (next: CalendarDay<TData>[]) => {
+      days = next;
+      for (let i = 0; i < CELL_COUNT; i++) {
+        const day = next[i];
+        if (day) setDayState(cells[i] as HTMLButtonElement, day);
+      }
+    },
+    setVisibleRows: (rows: readonly number[] | null, animate = true) => {
+      const visible = rows === null ? null : new Set(rows);
+      const key = visible === null ? "*" : [...visible].sort((a, b) => a - b).join(",");
+
+      // 翻月等场景要求瞬时切换：即使行集合没变，也要把进行中的动画收掉
+      if (!animate) {
+        cancelRowAnimations();
+        applyInstant(visible);
+        visibleKey = key;
+        return;
+      }
+
+      if (key === visibleKey) return;
+      visibleKey = key;
+
+      animateRows(visible);
+    },
+    destroy: () => {
+      cancelRowAnimations();
+      el.removeEventListener("click", onClick);
+    },
+  };
+};

package/src/components/header.ts

@@ -1,69 +1,69 @@
-import type { HeaderHandle, HeaderOptions } from "../types";
-import { node } from "../utils/dom";
-import { createNav } from "./nav";
-
-/** 头部：默认是 ‹ 年月 ›，也可以交给 renderer 完全自定义 */
-export const createHeader = function (options: HeaderOptions): HeaderHandle {
-  const el = node("div", "cui__header");
-  const title = node("div", "cui__title");
-  const prev = createNav({
-    label: "‹",
-    ariaLabel: options.locale.prevMonth,
-    onClick: options.onPrev,
-  });
-  const next = createNav({
-    label: "›",
-    ariaLabel: options.locale.nextMonth,
-    onClick: options.onNext,
-  });
-
-  let year = options.year;
-  let month = options.month;
-
-  const titleText = (): string =>
-    options.title ? options.title(year, month) : options.locale.monthTitle(year, month);
-
-  const renderDefault = (): void => {
-    // 默认头部只建一次节点：换月时重建会把正在聚焦的翻月按钮挪出 DOM，
-    // 焦点掉到 body，键盘用户每翻一个月就要重新找按钮。
-    if (el.childElementCount === 0) el.append(prev.el, title, next.el);
-    const nextTitle = titleText();
-    if (title.textContent !== nextTitle) title.textContent = nextTitle;
-  };
-
-  const renderCustom = (): void => {
-    el.replaceChildren(
-      options.renderer!({
-        year,
-        month,
-        locale: options.locale,
-        prevMonth: options.onPrev,
-        nextMonth: options.onNext,
-      }),
-    );
-  };
-
-  const render = (): void => {
-    if (options.renderer) renderCustom();
-    else renderDefault();
-  };
-
-  render();
-
-  return {
-    el,
-    update: (nextYear: number, nextMonth: number) => {
-      year = nextYear;
-      month = nextMonth;
-      render();
-    },
-    setNavDisabled: (prevDisabled: boolean, nextDisabled: boolean) => {
-      prev.setDisabled(prevDisabled);
-      next.setDisabled(nextDisabled);
-    },
-    destroy: () => {
-      prev.destroy();
-      next.destroy();
-    },
-  };
-};
+import type { HeaderHandle, HeaderOptions } from "../types";
+import { node } from "../utils/dom";
+import { createNav } from "./nav";
+
+/** 头部：默认是 ‹ 年月 ›，也可以交给 renderer 完全自定义 */
+export const createHeader = function (options: HeaderOptions): HeaderHandle {
+  const el = node("div", "cui__header");
+  const title = node("div", "cui__title");
+  const prev = createNav({
+    label: "‹",
+    ariaLabel: options.locale.prevMonth,
+    onClick: options.onPrev,
+  });
+  const next = createNav({
+    label: "›",
+    ariaLabel: options.locale.nextMonth,
+    onClick: options.onNext,
+  });
+
+  let year = options.year;
+  let month = options.month;
+
+  const titleText = (): string =>
+    options.title ? options.title(year, month) : options.locale.monthTitle(year, month);
+
+  const renderDefault = (): void => {
+    // 默认头部只建一次节点：换月时重建会把正在聚焦的翻月按钮挪出 DOM，
+    // 焦点掉到 body，键盘用户每翻一个月就要重新找按钮。
+    if (el.childElementCount === 0) el.append(prev.el, title, next.el);
+    const nextTitle = titleText();
+    if (title.textContent !== nextTitle) title.textContent = nextTitle;
+  };
+
+  const renderCustom = (): void => {
+    el.replaceChildren(
+      options.renderer!({
+        year,
+        month,
+        locale: options.locale,
+        prevMonth: options.onPrev,
+        nextMonth: options.onNext,
+      }),
+    );
+  };
+
+  const render = (): void => {
+    if (options.renderer) renderCustom();
+    else renderDefault();
+  };
+
+  render();
+
+  return {
+    el,
+    update: (nextYear: number, nextMonth: number) => {
+      year = nextYear;
+      month = nextMonth;
+      render();
+    },
+    setNavDisabled: (prevDisabled: boolean, nextDisabled: boolean) => {
+      prev.setDisabled(prevDisabled);
+      next.setDisabled(nextDisabled);
+    },
+    destroy: () => {
+      prev.destroy();
+      next.destroy();
+    },
+  };
+};