@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/date/CalendarBoard.js

@@ -0,0 +1,403 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { isRtl } from "../utils/dom/direction.js";
+import { statusToneSx } from "../utils/style/tone-styles.js";
+import { isSameDate, monthGrid, weekdayNames } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { handleCalendarKeydown, useCalendarState } from "./calendar-state.js";
+import { toDateLimits, useDateLocale } from "./date-locale.js";
+import { computed, createVNode, isVNode, mergeProps, nextTick, shallowRef, useId, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronLeft, ChevronRight } from "@lucide/icons";
+import { isWeekend } from "@internationalized/date";
+//#region src/date/CalendarBoard.tsx
+/**
+* 整页的月历（日历看板）：一个月铺满一页，每天一个大格子，格子里放日程、排班、节假日这类按天的内容。
+* 参考 Ant Design Calendar 的 fullscreen、Google 日历的月视图。要在输入框里选日期用 DatePicker，小日历用 Calendar。
+*
+*   <CalendarBoard
+*     events={meetings}
+*     getEventDate={(meeting) => meeting.date}
+*     getEventLabel={(meeting) => meeting.title}
+*     _value={day}
+*     aria-label="会议日程"
+*   />
+*
+* - 数据按天放进格子：getEventDate 是哪一天（带时间的取日期），getEventEnd 给了时跨天的每一天都有它；
+*   每天最多显示 maxEvents 条，其余收成“还有 N 项”（点了选中那一天，由页面在旁边列出全部）。
+*   renderEvent 自定义一条的显示（默认是带色调的一行文字），renderDay 往格子里加别的内容（排班、价格），
+*   getDayNote 是日期旁边的小字（节假日、“休”“班”、农历）。
+* - 键盘与 Calendar 一致（同一个 useCalendarState）：每天的日期数字是一个按钮，焦点在当前日期上，
+*   ←→ 一天、↑↓ 一周、Page Up / Down 一个月、Home / End 到这周两端，Enter / 空格选中；读屏念完整日期与有几项日程。
+*   格子里的日程可以是链接、按钮，Tab 照常进去。
+* - 页头：标题（翻页时播报）、toolbar（筛选、视图切换）、“今天”、上个月 / 下个月；month 可以双向绑定（翻页写回）。
+*
+* 部件：Root（div，role="group"）、Header、Title、Today、Previous、Next、Grid（table）、Weekday、Cell（td）、
+* DayButton（日期数字）、Note、Events（ul）、Event、More。
+*/
+/** 一天的状态：renderDay、getDayNote 之外的自定义内容用 */
+/** 未声明的属性落到根元素上；aria-label 是整个月历的名称 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** CalendarBoard 的样式 */
+var calendarBoardStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "_sm"
+	},
+	title: {
+		fontSize: "_lg",
+		fontWeight: "_semibold",
+		marginInlineEnd: "auto"
+	},
+	grid: {
+		width: "_full",
+		tableLayout: "fixed",
+		borderCollapse: "collapse",
+		borderSpacing: 0
+	},
+	weekday: {
+		paddingBlock: "_xs",
+		paddingInline: "_sm",
+		color: "_textMuted",
+		fontWeight: "_normal",
+		fontSize: "_sm",
+		textAlign: "start"
+	},
+	cell: {
+		height: "7em",
+		padding: "_xs",
+		verticalAlign: "top",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		cursor: "pointer",
+		transition: `background-color ${t.durations.sm} ${t.easings.standard}`,
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		}
+	},
+	weekend: { backgroundColor: {
+		default: "_surfaceMuted",
+		":hover": "_fillHover"
+	} },
+	outside: { color: "_textMuted" },
+	selected: {
+		backgroundColor: {
+			default: "_accentSoft",
+			":hover": "_accentSoftHover"
+		},
+		boxShadow: `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.accentBorder}`
+	},
+	disabled: {
+		cursor: "not-allowed",
+		opacity: "_disabled"
+	},
+	readonly: { cursor: "default" },
+	dayHead: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		minWidth: 0
+	},
+	day: {
+		display: "inline-grid",
+		placeItems: "center",
+		flexShrink: 0,
+		minWidth: "1.75em",
+		height: "1.75em",
+		paddingInline: "_xs",
+		borderRadius: "_full",
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: "_medium"
+	},
+	today: {
+		backgroundColor: "_accent",
+		color: "_accentContrast"
+	},
+	note: {
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		fontSize: "_xs",
+		color: "_textMuted"
+	},
+	events: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		marginBlock: "_xs",
+		marginInline: 0,
+		padding: 0,
+		listStyle: "none"
+	},
+	event: {
+		display: "block",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		paddingInline: "_xs",
+		borderRadius: "_sm",
+		fontSize: "_xs",
+		lineHeight: "1.6"
+	},
+	more: {
+		paddingInline: "_xs",
+		borderRadius: "_sm",
+		fontSize: "_xs",
+		color: "_textMuted",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		}
+	}
+});
+/** 整页的月历：每天一个大格子，放日程、排班、节假日 */
+var CalendarBoard = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const month = bindable(_props, "_month", () => void 0, _ctx.emit);
+	const firstDayOfWeek = readonlyProp(_props, "firstDayOfWeek");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const events = readonlyProp(_props, "events", () => []);
+	const getEventDate = readonlyProp(_props, "getEventDate");
+	const getEventEnd = readonlyProp(_props, "getEventEnd");
+	const getEventKey = readonlyProp(_props, "getEventKey");
+	const getEventLabel = readonlyProp(_props, "getEventLabel");
+	const getEventTone = readonlyProp(_props, "getEventTone");
+	const renderEvent = readonlyProp(_props, "renderEvent");
+	const maxEvents = readonlyProp(_props, "maxEvents", 3);
+	const getDayNote = readonlyProp(_props, "getDayNote");
+	const renderDay = readonlyProp(_props, "renderDay");
+	const toolbar = readonlyProp(_props, "toolbar");
+	const readonly = readonlyProp(_props, "readonly", false);
+	const propsToday = readonlyProp(_props, "propsToday");
+	const propsCell = readonlyProp(_props, "propsCell");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const locale = useDateLocale(() => ({ firstDayOfWeek: firstDayOfWeek.value }));
+	const titleId = useId();
+	let root = shallowRef(null);
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value,
+		isDateUnavailable: isDateUnavailable.value
+	}));
+	const selected = computed(() => {
+		const day = locale.fromValue(value.value);
+		return day ? [day] : [];
+	});
+	const calendar = useCalendarState({
+		mode: () => "single",
+		selected: () => selected.value,
+		onChange: ([day]) => {
+			value.value = locale.toIso(day);
+		},
+		today: () => locale.today(),
+		limits: () => limits.value,
+		week: () => locale.week,
+		readonly: () => readonly.value,
+		defaultFocused: () => month.value ? locale.fromValue(`${month.value}-01`) : null
+	});
+	watch(() => calendar.page.toString().slice(0, 7), (page) => {
+		if (month.value !== void 0 && month.value !== page) month.value = page;
+	});
+	watch(() => month.value, (next) => {
+		const target = next ? locale.fromValue(`${next}-01`) : null;
+		if (target && !isSameDate(target, calendar.page, "month")) calendar.focus(target);
+	});
+	/** 按天分好的数据：ISO 日期 → 那天的数据（跨天的每一天都有） */
+	const byDay = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (!getEventDate.value) return map;
+		for (const event of events.value) {
+			const first = locale.fromValue(getEventDate.value(event).slice(0, 10));
+			if (!first) continue;
+			const last = getEventEnd.value ? locale.fromValue(getEventEnd.value(event).slice(0, 10)) : null;
+			for (let day = first, count = 0; count < 366; day = day.add({ days: 1 }), count++) {
+				const key = locale.toIso(day);
+				map.set(key, [...map.get(key) ?? [], event]);
+				if (!last || day.compare(last) >= 0) break;
+			}
+		}
+		return map;
+	});
+	function onKeydown(event) {
+		if (!event.target.matches("[data-day]")) return;
+		if (!handleCalendarKeydown(calendar, event, !!root.value && isRtl(root.value))) return;
+		event.preventDefault();
+		nextTick(() => root.value?.querySelector("[data-day][data-focused]")?.focus());
+	}
+	/** 点格子的空白处：选中那一天（点里面的链接、按钮时照常） */
+	function onCellClick(event, day) {
+		if (event.target.closest("a, button, input, [role=\"button\"]")) return;
+		calendar.activate(day);
+	}
+	function renderCell(day, page) {
+		const iso = locale.toIso(day);
+		const state = calendar.cell(day, page);
+		const dayState = {
+			today: state.today,
+			outside: state.outside,
+			selected: state.selected,
+			weekend: isWeekend(day, locale.locale),
+			disabled: state.disabled
+		};
+		const list = byDay.value.get(iso) ?? [];
+		const shown = list.slice(0, Math.max(0, maxEvents.value));
+		const own = typeof propsCell.value === "function" ? propsCell.value(iso) : propsCell.value;
+		const label = format.date(day, { dateStyle: "full" });
+		return createVNode("td", mergeProps({ "key": iso }, mergeAttrs({ sx: [
+			calendarBoardStyles.cell,
+			dayState.weekend && calendarBoardStyles.weekend,
+			state.outside && calendarBoardStyles.outside,
+			state.selected && calendarBoardStyles.selected,
+			state.disabled && calendarBoardStyles.disabled,
+			readonly.value && calendarBoardStyles.readonly
+		] }, own, {
+			role: "gridcell",
+			"aria-selected": state.selected,
+			onClick: (event) => onCellClick(event, day),
+			onPointerenter: () => calendar.hover(day)
+		}), {
+			"data-date": iso,
+			"data-today": state.today || void 0,
+			"data-outside": state.outside || void 0
+		}), [
+			createVNode("div", css.attrs(calendarBoardStyles.dayHead), [createVNode("button", mergeProps({
+				"type": "button",
+				"tabindex": state.focused && !state.outside ? 0 : -1,
+				"aria-label": [state.today ? lang.calendarToday(label) : label, list.length > 0 ? lang.calendarBoardCount(list.length) : null].filter(Boolean).join("，"),
+				"aria-disabled": state.disabled || void 0
+			}, css.attrs(buttonBaseStyles.root, interactionTransitions.colors, calendarBoardStyles.day, focusRingStyles.tight, state.today && calendarBoardStyles.today), {
+				"data-day": "",
+				"data-focused": state.focused && !state.outside || void 0,
+				"onClick": (event) => {
+					event.stopPropagation();
+					if (!state.disabled) calendar.activate(day);
+				},
+				"onFocus": () => {
+					if (!state.focused) calendar.focus(day);
+				}
+			}), [locale.dayNumber(day)]), getDayNote.value && createVNode("span", css.attrs(calendarBoardStyles.note), [getDayNote.value(iso)])]),
+			shown.length > 0 && createVNode("ul", css.attrs(calendarBoardStyles.events), [shown.map((event, index) => createVNode("li", { "key": getEventKey.value?.(event) ?? index }, [renderEvent.value ? renderEvent.value(event, iso) : createVNode("span", css.attrs(calendarBoardStyles.event, statusToneSx("soft", getEventTone.value?.(event) ?? "accent")), [getEventLabel.value?.(event) ?? ""])])), list.length > shown.length && createVNode("li", null, [createVNode("button", mergeProps({ "type": "button" }, css.attrs(buttonBaseStyles.root, interactionTransitions.colors, calendarBoardStyles.more, focusRingStyles.tight), { "onClick": (event) => {
+				event.stopPropagation();
+				calendar.activate(day);
+			} }), [lang.calendarBoardMore(list.length - shown.length)])])]),
+			renderDay.value?.(iso, dayState)
+		]);
+	}
+	return () => {
+		const page = calendar.page;
+		const title = format.date(page, {
+			year: "numeric",
+			month: "long"
+		});
+		const weeks = monthGrid(page, {
+			...locale.week,
+			fixedWeeks: false
+		});
+		const names = weekdayNames(locale.locale, {
+			firstDayOfWeek: locale.week.firstDayOfWeek,
+			format: "short"
+		});
+		return createVNode("div", mergeAttrs({ sx: calendarBoardStyles.root }, rest, {
+			ref: root,
+			role: "group"
+		}), [
+			createVNode("div", css.attrs(calendarBoardStyles.header), [
+				createVNode("span", mergeProps({ "id": titleId }, css.attrs(calendarBoardStyles.title)), [title]),
+				toolbar.value,
+				createVNode(Button, mergeProps(mergePartProps({
+					size: "sm",
+					variant: "soft",
+					tone: "neutral"
+				}, propsToday.value, { onClick: () => {
+					calendar.focus(locale.today());
+					nextTick(() => root.value?.querySelector("[data-day][data-focused]")?.focus());
+				} }), { "key": "__site0" }), {
+					default: () => [lang.dateRangePreset.today],
+					$stable: true
+				}),
+				createVNode(IconButton, {
+					"icon": ChevronLeft,
+					"aria-label": lang.calendarPreviousMonth,
+					"propsIcon": _cache[0] || (_cache[0] = { flipInRtl: true }),
+					"size": "sm",
+					"disabled": !calendar.canTurnPage(-1),
+					"onClick": _cache[1] || (_cache[1] = () => calendar.turnPage(-1))
+				}, null),
+				createVNode(IconButton, {
+					"icon": ChevronRight,
+					"aria-label": lang.calendarNextMonth,
+					"propsIcon": _cache[2] || (_cache[2] = { flipInRtl: true }),
+					"size": "sm",
+					"disabled": !calendar.canTurnPage(1),
+					"onClick": _cache[3] || (_cache[3] = () => calendar.turnPage(1))
+				}, null)
+			]),
+			createVNode("table", mergeProps(css.attrs(calendarBoardStyles.grid), {
+				"role": "grid",
+				"aria-labelledby": titleId,
+				"onKeydown": onKeydown,
+				"onPointerleave": _cache[4] || (_cache[4] = () => calendar.hover(null))
+			}), [createVNode("thead", null, [createVNode("tr", null, [names.map((name) => createVNode("th", mergeProps({
+				"key": name,
+				"scope": "col"
+			}, css.attrs(calendarBoardStyles.weekday)), [name]))])]), createVNode("tbody", null, [weeks.map((week) => createVNode("tr", { "key": week[0].toString() }, [week.map((day) => renderCell(day, page))]))])]),
+			createVNode(VisuallyHidden, { "aria-live": "polite" }, _isSlot(title) ? title : { default: () => [title] })
+		]);
+	};
+}, {
+	name: "CalendarBoard",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"_month",
+		"onUpdate:_month",
+		"firstDayOfWeek",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"events",
+		"getEventDate",
+		"getEventEnd",
+		"getEventKey",
+		"getEventLabel",
+		"getEventTone",
+		"renderEvent",
+		"maxEvents",
+		"getDayNote",
+		"renderDay",
+		"toolbar",
+		"readonly",
+		"propsToday",
+		"propsCell"
+	]
+});
+//#endregion
+export { CalendarBoard, calendarBoardStyles };
+
+//# sourceMappingURL=CalendarBoard.js.map

package/dist/date/CalendarBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarBoard.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/date/CalendarBoard.tsx"],"sourcesContent":["/**\n * 整页的月历（日历看板）：一个月铺满一页，每天一个大格子，格子里放日程、排班、节假日这类按天的内容。\n * 参考 Ant Design Calendar 的 fullscreen、Google 日历的月视图。要在输入框里选日期用 DatePicker，小日历用 Calendar。\n *\n *   <CalendarBoard\n *     events={meetings}\n *     getEventDate={(meeting) => meeting.date}\n *     getEventLabel={(meeting) => meeting.title}\n *     _value={day}\n *     aria-label=\"会议日程\"\n *   />\n *\n * - 数据按天放进格子：getEventDate 是哪一天（带时间的取日期），getEventEnd 给了时跨天的每一天都有它；\n *   每天最多显示 maxEvents 条，其余收成“还有 N 项”（点了选中那一天，由页面在旁边列出全部）。\n *   renderEvent 自定义一条的显示（默认是带色调的一行文字），renderDay 往格子里加别的内容（排班、价格），\n *   getDayNote 是日期旁边的小字（节假日、“休”“班”、农历）。\n * - 键盘与 Calendar 一致（同一个 useCalendarState）：每天的日期数字是一个按钮，焦点在当前日期上，\n *   ←→ 一天、↑↓ 一周、Page Up / Down 一个月、Home / End 到这周两端，Enter / 空格选中；读屏念完整日期与有几项日程。\n *   格子里的日程可以是链接、按钮，Tab 照常进去。\n * - 页头：标题（翻页时播报）、toolbar（筛选、视图切换）、“今天”、上个月 / 下个月；month 可以双向绑定（翻页写回）。\n *\n * 部件：Root（div，role=\"group\"）、Header、Title、Today、Previous、Next、Grid（table）、Weekday、Cell（td）、\n * DayButton（日期数字）、Note、Events（ul）、Event、More。\n */\nimport { ChevronLeft, ChevronRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { isWeekend, type CalendarDate } from '@internationalized/date';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { IconButton } from '../base/IconButton';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { t } from '../config/theme/tokens';\nimport { isSameDate, monthGrid, weekdayNames } from '../utils/data/date';\nimport { isRtl } from '../utils/dom/direction';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { handleCalendarKeydown, useCalendarState } from './calendar-state';\nimport { toDateLimits, useDateLocale, type DateLimitProps } from './date-locale';\n\n/** 一天的状态：renderDay、getDayNote 之外的自定义内容用 */\nexport interface CalendarBoardDayState {\n  /** 今天 */\n  today: boolean;\n  /** 补齐的上个月、下个月的日子 */\n  outside: boolean;\n  /** 选中的那一天 */\n  selected: boolean;\n  /** 周六、周日（按语言） */\n  weekend: boolean;\n  /** 不可选（范围外、不可选的日期） */\n  disabled: boolean;\n}\n\n/** 未声明的属性落到根元素上；aria-label 是整个月历的名称 */\nexport interface CalendarBoardProps<T = unknown> extends PartProps<'div', 'role'>, DateLimitProps {\n  /** 选中的那一天（ISO 日期）：父级写 _value={day}；没有时 null */\n  _value?: string | null;\n  /** 显示哪个月（'YYYY-MM'）：父级可写 _month={m}，翻页时写回；不写时从选中的那天（或今天）开始 */\n  _month?: string;\n  /** 一周的第一天，0 是周日；不写时按语言 */\n  firstDayOfWeek?: number;\n  /** 按天放的数据：日程、排班、提醒 */\n  events?: readonly T[];\n  /** 数据在哪一天（ISO 日期；带时间的取日期部分） */\n  getEventDate?: (event: T) => string;\n  /** 跨天的数据在哪一天结束（含）；不写时只在 getEventDate 那一天 */\n  getEventEnd?: (event: T) => string;\n  /** 数据的 key；不写时用它在 events 里的位置 */\n  getEventKey?: (event: T) => string;\n  /** 默认显示的文字 */\n  getEventLabel?: (event: T) => string;\n  /** 默认显示的色调，默认 accent */\n  getEventTone?: (event: T) => StatusTone;\n  /** 自定义一条数据的显示 */\n  renderEvent?: (event: T, date: string) => VNodeChild;\n  /** 每天最多显示几条，其余收成“还有 N 项”，默认 3 */\n  maxEvents?: number;\n  /** 日期旁边的小字（节假日、“休”“班”、农历） */\n  getDayNote?: (date: string) => VNodeChild;\n  /** 往格子里加别的内容（排班、价格），放在日程下面 */\n  renderDay?: (date: string, state: CalendarBoardDayState) => VNodeChild;\n  /** 页头右边的内容（筛选、视图切换） */\n  toolbar?: VNodeChild;\n  /** 只读：能翻页、移动焦点，不能选 */\n  readonly?: boolean;\n  /** “今天”按钮的部件属性 */\n  propsToday?: Partial<ButtonProps>;\n  /** 每格（td）的部件属性，可以按日期给 */\n  propsCell?: PartProps<'td', 'role' | 'aria-selected'> | ((date: string) => PartProps<'td'>);\n}\n\n/** CalendarBoard 的样式 */\nexport const calendarBoardStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  header: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_sm' },\n  title: { fontSize: '_lg', fontWeight: '_semibold', marginInlineEnd: 'auto' },\n  grid: {\n    width: '_full',\n    tableLayout: 'fixed',\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n  },\n  weekday: {\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    color: '_textMuted',\n    fontWeight: '_normal',\n    fontSize: '_sm',\n    textAlign: 'start',\n  },\n  cell: {\n    height: '7em',\n    padding: '_xs',\n    verticalAlign: 'top',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    cursor: 'pointer',\n    transition: `background-color ${t.durations.sm} ${t.easings.standard}`,\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n  },\n  weekend: { backgroundColor: { default: '_surfaceMuted', ':hover': '_fillHover' } },\n  outside: { color: '_textMuted' },\n  selected: {\n    backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' },\n    boxShadow: `inset 0 0 0 ${t.borderWidths.sm} ${t.colors.accentBorder}`,\n  },\n  disabled: { cursor: 'not-allowed', opacity: '_disabled' },\n  // 只读：格子不像能点\n  readonly: { cursor: 'default' },\n  dayHead: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  // 日期数字：可聚焦的按钮，焦点环画在它上面\n  day: {\n    display: 'inline-grid',\n    placeItems: 'center',\n    flexShrink: 0,\n    minWidth: '1.75em',\n    height: '1.75em',\n    paddingInline: '_xs',\n    borderRadius: '_full',\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: '_medium',\n  },\n  today: { backgroundColor: '_accent', color: '_accentContrast' },\n  note: {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    fontSize: '_xs',\n    color: '_textMuted',\n  },\n  events: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n    marginBlock: '_xs',\n    marginInline: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  event: {\n    display: 'block',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    fontSize: '_xs',\n    lineHeight: '1.6',\n  },\n  more: {\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    fontSize: '_xs',\n    color: '_textMuted',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n  },\n});\n\n/** 整页的月历：每天一个大格子，放日程、排班、节假日 */\nexport const CalendarBoard = _component(\n  <T,>({\n    _value: value = _bindable<string | null>(null),\n    _month: month = _bindable<string | undefined>(undefined),\n    firstDayOfWeek,\n    min,\n    max,\n    isDateUnavailable,\n    events = [],\n    getEventDate,\n    getEventEnd,\n    getEventKey,\n    getEventLabel,\n    getEventTone,\n    renderEvent,\n    maxEvents = 3,\n    getDayNote,\n    renderDay,\n    toolbar,\n    readonly = false,\n    propsToday,\n    propsCell,\n    ...rest\n  }: CalendarBoardProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n    const locale = useDateLocale(() => ({ firstDayOfWeek }));\n    const titleId = useId();\n    let root = _state.raw<HTMLElement | null>(null);\n    const limits = _derived(toDateLimits(locale, { min, max, isDateUnavailable }));\n    const selected = _derived.by(() => {\n      const day = locale.fromValue(value);\n      return day ? [day] : [];\n    });\n    const calendar = useCalendarState({\n      mode: () => 'single',\n      selected: () => selected,\n      onChange: ([day]) => {\n        value = locale.toIso(day!);\n      },\n      today: () => locale.today(),\n      limits: () => limits,\n      week: () => locale.week,\n      readonly: () => readonly,\n      defaultFocused: () => (month ? locale.fromValue(`${month}-01`) : null),\n    });\n\n    // 翻页写回 month；父级改了 month 时翻过去\n    watch(\n      () => calendar.page.toString().slice(0, 7),\n      (page) => {\n        if (month !== undefined && month !== page) month = page;\n      },\n    );\n    watch(\n      () => month,\n      (next) => {\n        const target = next ? locale.fromValue(`${next}-01`) : null;\n        if (target && !isSameDate(target, calendar.page, 'month')) calendar.focus(target);\n      },\n    );\n\n    /** 按天分好的数据：ISO 日期 → 那天的数据（跨天的每一天都有） */\n    const byDay = _derived.by(() => {\n      const map = new Map<string, T[]>();\n      if (!getEventDate) return map;\n      for (const event of events) {\n        const first = locale.fromValue(getEventDate(event).slice(0, 10));\n        if (!first) continue;\n        const last = getEventEnd ? locale.fromValue(getEventEnd(event).slice(0, 10)) : null;\n        // 跨天的最多铺 366 天，数据错了（结束早于开始、跨好几年）也不会卡住\n        for (let day = first, count = 0; count < 366; day = day.add({ days: 1 }), count++) {\n          const key = locale.toIso(day);\n          map.set(key, [...(map.get(key) ?? []), event]);\n          if (!last || day.compare(last) >= 0) break;\n        }\n      }\n      return map;\n    });\n\n    function onKeydown(event: KeyboardEvent) {\n      // 格子里的日程（链接、按钮）自己处理按键\n      if (!(event.target as Element).matches('[data-day]')) return;\n      if (!handleCalendarKeydown(calendar, event, !!root && isRtl(root))) return;\n      event.preventDefault();\n      void nextTick(() => root?.querySelector<HTMLElement>('[data-day][data-focused]')?.focus());\n    }\n\n    /** 点格子的空白处：选中那一天（点里面的链接、按钮时照常） */\n    function onCellClick(event: MouseEvent, day: CalendarDate) {\n      if ((event.target as Element).closest('a, button, input, [role=\"button\"]')) return;\n      calendar.activate(day);\n    }\n\n    function renderCell(day: CalendarDate, page: CalendarDate) {\n      const iso = locale.toIso(day);\n      const state = calendar.cell(day, page);\n      const dayState: CalendarBoardDayState = {\n        today: state.today,\n        outside: state.outside,\n        selected: state.selected,\n        weekend: isWeekend(day, locale.locale),\n        disabled: state.disabled,\n      };\n      const list = byDay.get(iso) ?? [];\n      const shown = list.slice(0, Math.max(0, maxEvents));\n      const own = typeof propsCell === 'function' ? propsCell(iso) : propsCell;\n      const label = format.date(day, { dateStyle: 'full' });\n      return (\n        <td\n          key={iso}\n          {...mergeAttrs<'td'>(\n            {\n              sx: [\n                calendarBoardStyles.cell,\n                dayState.weekend && calendarBoardStyles.weekend,\n                state.outside && calendarBoardStyles.outside,\n                state.selected && calendarBoardStyles.selected,\n                state.disabled && calendarBoardStyles.disabled,\n                readonly && calendarBoardStyles.readonly,\n              ],\n            },\n            own,\n            {\n              role: 'gridcell',\n              'aria-selected': state.selected,\n              onClick: (event: MouseEvent) => onCellClick(event, day),\n              onPointerenter: () => calendar.hover(day),\n            },\n          )}\n          data-date={iso}\n          data-today={state.today || undefined}\n          data-outside={state.outside || undefined}\n        >\n          <div {...css.attrs(calendarBoardStyles.dayHead)}>\n            <button\n              type=\"button\"\n              tabindex={state.focused && !state.outside ? 0 : -1}\n              aria-label={[\n                state.today ? lang.calendarToday(label) : label,\n                list.length > 0 ? lang.calendarBoardCount(list.length) : null,\n              ]\n                .filter(Boolean)\n                .join('，')}\n              aria-disabled={state.disabled || undefined}\n              {...css.attrs(\n                buttonBaseStyles.root,\n                interactionTransitions.colors,\n                calendarBoardStyles.day,\n                focusRingStyles.tight,\n                state.today && calendarBoardStyles.today,\n              )}\n              data-day=\"\"\n              data-focused={(state.focused && !state.outside) || undefined}\n              onClick={(event: MouseEvent) => {\n                event.stopPropagation();\n                if (!state.disabled) calendar.activate(day);\n              }}\n              onFocus={() => {\n                if (!state.focused) calendar.focus(day);\n              }}\n            >\n              {locale.dayNumber(day)}\n            </button>\n            {getDayNote && <span {...css.attrs(calendarBoardStyles.note)}>{getDayNote(iso)}</span>}\n          </div>\n          {shown.length > 0 && (\n            <ul {...css.attrs(calendarBoardStyles.events)}>\n              {shown.map((event, index) => (\n                <li key={getEventKey?.(event) ?? index}>\n                  {renderEvent ? (\n                    renderEvent(event, iso)\n                  ) : (\n                    <span\n                      {...css.attrs(\n                        calendarBoardStyles.event,\n                        statusToneSx('soft', getEventTone?.(event) ?? 'accent'),\n                      )}\n                    >\n                      {getEventLabel?.(event) ?? ''}\n                    </span>\n                  )}\n                </li>\n              ))}\n              {list.length > shown.length && (\n                <li>\n                  <button\n                    type=\"button\"\n                    {...css.attrs(\n                      buttonBaseStyles.root,\n                      interactionTransitions.colors,\n                      calendarBoardStyles.more,\n                      focusRingStyles.tight,\n                    )}\n                    onClick={(event: MouseEvent) => {\n                      event.stopPropagation();\n                      calendar.activate(day);\n                    }}\n                  >\n                    {lang.calendarBoardMore(list.length - shown.length)}\n                  </button>\n                </li>\n              )}\n            </ul>\n          )}\n          {renderDay?.(iso, dayState)}\n        </td>\n      );\n    }\n\n    return () => {\n      const page = calendar.page;\n      const title = format.date(page, { year: 'numeric', month: 'long' });\n      const weeks = monthGrid(page, { ...locale.week, fixedWeeks: false });\n      const names = weekdayNames(locale.locale, {\n        firstDayOfWeek: locale.week.firstDayOfWeek,\n        format: 'short',\n      });\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: calendarBoardStyles.root }, rest, {\n            ref: _toRef(root),\n            role: 'group',\n          })}\n        >\n          <div {...css.attrs(calendarBoardStyles.header)}>\n            <span id={titleId} {...css.attrs(calendarBoardStyles.title)}>\n              {title}\n            </span>\n            {toolbar}\n            <Button\n              {...mergePartProps<ButtonProps>(\n                { size: 'sm', variant: 'soft', tone: 'neutral' },\n                propsToday,\n                {\n                  onClick: () => {\n                    calendar.focus(locale.today());\n                    void nextTick(() =>\n                      root?.querySelector<HTMLElement>('[data-day][data-focused]')?.focus(),\n                    );\n                  },\n                },\n              )}\n            >\n              {lang.dateRangePreset.today}\n            </Button>\n            <IconButton\n              icon={ChevronLeft}\n              aria-label={lang.calendarPreviousMonth}\n              propsIcon={{ flipInRtl: true }}\n              size=\"sm\"\n              disabled={!calendar.canTurnPage(-1)}\n              onClick={() => calendar.turnPage(-1)}\n            />\n            <IconButton\n              icon={ChevronRight}\n              aria-label={lang.calendarNextMonth}\n              propsIcon={{ flipInRtl: true }}\n              size=\"sm\"\n              disabled={!calendar.canTurnPage(1)}\n              onClick={() => calendar.turnPage(1)}\n            />\n          </div>\n          <table\n            {...css.attrs(calendarBoardStyles.grid)}\n            role=\"grid\"\n            aria-labelledby={titleId}\n            onKeydown={onKeydown}\n            onPointerleave={() => calendar.hover(null)}\n          >\n            <thead>\n              <tr>\n                {names.map((name) => (\n                  <th key={name} scope=\"col\" {...css.attrs(calendarBoardStyles.weekday)}>\n                    {name}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {weeks.map((week) => (\n                <tr key={week[0]!.toString()}>{week.map((day) => renderCell(day, page))}</tr>\n              ))}\n            </tbody>\n          </table>\n          {/* 翻页时播报新的月份 */}\n          <VisuallyHidden aria-live=\"polite\">{title}</VisuallyHidden>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/CalendarView.d.ts

@@ -0,0 +1,86 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+import { type CalendarCellState, type CalendarState } from './calendar-state';
+/** 角色由组件管理 */
+export type CalendarViewManaged = 'role';
+/** 按项给的部件属性：固定的对象，或按这一格的日期（ISO）与状态返回 */
+export type CalendarItemProps<P> = P | ((date: string, cell: CalendarCellState) => P);
+/** 日历界面的外观与内容选项：Calendar、RangeCalendar、日期选择器原样转交 */
+export interface CalendarViewOptions {
+    /** 字号档位，格子随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 在每行前显示一年里的第几周 */
+    showWeekNumbers?: boolean;
+    /** 总是 6 行（翻页时高度不跳），默认 true */
+    fixedWeeks?: boolean;
+    /** 不可用：不能翻页、不能选 */
+    disabled?: boolean;
+    /**
+     * 自定义日期格的内容（价格、标记点）：拿到日期（ISO）与这一格的状态；不写时是日期数字。
+     * 读屏先念完整日期再念这里的文字：日期数字这类重复的部分可以加 aria-hidden
+     */
+    children?: (date: string, cell: CalendarCellState) => VNodeChild;
+    /** 页脚：今天、清除这类按钮 */
+    footer?: VNodeChild;
+    /** 页头的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 上一页按钮的部件属性 */
+    propsPrevious?: Omit<Partial<IconButtonProps>, 'disabled' | 'onClick'>;
+    /** 下一页按钮的部件属性 */
+    propsNext?: Omit<Partial<IconButtonProps>, 'disabled' | 'onClick'>;
+    /** 标题按钮的部件属性 */
+    propsHeading?: PartProps<'button', 'type' | 'aria-label'>;
+    /** 并排月份那一层的部件属性 */
+    propsMonths?: PartProps<'div'>;
+    /** 每张网格（table）的部件属性 */
+    propsGrid?: PartProps<'table', 'role' | 'aria-label' | 'aria-multiselectable'>;
+    /** 星期表头的部件属性 */
+    propsWeekday?: PartProps<'th', 'scope'>;
+    /** 周数的部件属性 */
+    propsWeekNumber?: PartProps<'th', 'scope' | 'aria-label'>;
+    /** 每格（td）的部件属性 */
+    propsCell?: CalendarItemProps<PartProps<'td', 'role' | 'aria-selected' | 'aria-disabled'>>;
+    /** 每格里按钮的部件属性 */
+    propsCellButton?: CalendarItemProps<PartProps<'button', 'type' | 'tabindex' | 'disabled' | 'aria-label' | 'aria-disabled'>>;
+    /** 页脚的部件属性 */
+    propsFooter?: PartProps<'div'>;
+}
+/** 未声明的属性落到根元素上（aria-label 等） */
+export interface CalendarViewProps extends PartProps<'div', CalendarViewManaged>, CalendarViewOptions {
+    /** 日历状态（useCalendarState） */
+    calendar: CalendarState;
+    /** 一周的第一天（0 表示周日），与 useCalendarState 的 week 一致；不写时取语言配置 */
+    firstDayOfWeek?: number;
+}
+/** CalendarView 的样式：root、months、month、header、heading、grid、weekday、cell、button 等 */
+export declare const calendarStyles: Readonly<{
+    button: css.CompiledStyles;
+    cell: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    grid: css.CompiledStyles;
+    header: css.CompiledStyles;
+    heading: css.CompiledStyles;
+    headingStatic: css.CompiledStyles;
+    inRange: css.CompiledStyles;
+    middle: css.CompiledStyles;
+    month: css.CompiledStyles;
+    months: css.CompiledStyles;
+    outside: css.CompiledStyles;
+    periodButton: css.CompiledStyles;
+    periodGrid: css.CompiledStyles;
+    rangeEnd: css.CompiledStyles;
+    rangeStart: css.CompiledStyles;
+    root: css.CompiledStyles;
+    selected: css.CompiledStyles;
+    spacer: css.CompiledStyles;
+    today: css.CompiledStyles;
+    unavailable: css.CompiledStyles;
+    weekNumber: css.CompiledStyles;
+    weekday: css.CompiledStyles;
+}>;
+/** 日历的界面：页头、月份网格（或月份、年份视图）、页脚 */
+export declare const CalendarView: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CalendarViewProps>;