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

package/dist/date/CalendarView.js

@@ -0,0 +1,427 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { VisuallyHidden, visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { IconButton } from "../base/IconButton.js";
+import { isRtl } from "../utils/dom/direction.js";
+import { monthGrid, monthsOfYear, weekOfYear, weekdayNames, yearsOfDecade } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { handleCalendarKeydown } from "./calendar-state.js";
+import { useDateLocale } from "./date-locale.js";
+import { createVNode, isVNode, mergeProps, nextTick, shallowRef, useId } from "vue";
+import { _component, childrenProp, 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";
+//#region src/date/CalendarView.tsx
+/**
+* 日历的界面（WAI-ARIA 的日期网格）：页头（上一页、标题、下一页）、并排的月份网格、月份视图与年份视图、页脚。
+* 状态由调用方的 useCalendarState 给（同 ListboxView 与 useListState 的分工）：Calendar、RangeCalendar、各种日期选择器共用。
+*
+*   const calendar = useCalendarState({ … });
+*   <CalendarView calendar={calendar} showWeekNumbers>{(date, cell) => …}</CalendarView>
+*
+* - 每个月一张 table role="grid"，日期格是 td role="gridcell"（aria-selected）里的按钮；焦点日期那一格 tabindex=0，
+*   键盘移动后焦点跟过去（handleCalendarKeydown）；读屏念的完整日期（今天、星期）由 Intl 生成；
+* - 标题按钮切到月份视图、再切到年份视图（不比选择的粒度更细）；翻页时用 aria-live 播报新的月份；
+* - 并排几个月时只显示本月的日期（补齐的上下月留空，不重复出现）；只有一个月时补齐的日期变淡、可以点。
+*
+* 部件：Root、Header、Previous、Next（IconButton）、Heading（标题按钮）、Months（并排的月份）、Grid（table）、
+* Weekday（星期表头）、WeekNumber（周数）、Cell（td）、CellButton（日期 / 月份 / 年份按钮）、Footer。
+*/
+/** 角色由组件管理 */
+/** 按项给的部件属性：固定的对象，或按这一格的日期（ISO）与状态返回 */
+/** 日历界面的外观与内容选项：Calendar、RangeCalendar、日期选择器原样转交 */
+/** 未声明的属性落到根元素上（aria-label 等） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** CalendarView 的样式：root、months、month、header、heading、grid、weekday、cell、button 等 */
+var calendarStyles = css.create({
+	root: {
+		display: "inline-flex",
+		flexDirection: "column",
+		gap: "_sm",
+		color: "_text",
+		lineHeight: "_normal",
+		userSelect: "none"
+	},
+	months: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "flex-start",
+		gap: "_xl"
+	},
+	month: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs"
+	},
+	header: {
+		display: "grid",
+		gridTemplateColumns: `max(${t.sizes.control}, ${t.sizes.minTarget}) 1fr max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		alignItems: "center",
+		gap: "_xs"
+	},
+	spacer: { width: `max(${t.sizes.control}, ${t.sizes.minTarget})` },
+	heading: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifySelf: "center",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		paddingInline: "_sm",
+		borderRadius: "_md",
+		fontWeight: "_semibold",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		}
+	},
+	headingStatic: {
+		cursor: "default",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "transparent"
+		}
+	},
+	grid: {
+		borderCollapse: "collapse",
+		borderSpacing: 0
+	},
+	periodGrid: { width: `calc(7 * max(2.25em, ${t.sizes.minTarget}))` },
+	weekday: {
+		paddingBlock: "_xs",
+		paddingInline: 0,
+		color: "_textMuted",
+		fontWeight: "_normal",
+		textAlign: "center"
+	},
+	weekNumber: {
+		paddingInlineEnd: "_xs",
+		color: "_textMuted",
+		fontWeight: "_normal",
+		textAlign: "center"
+	},
+	cell: {
+		padding: 0,
+		textAlign: "center"
+	},
+	inRange: {
+		backgroundColor: "_accentSoft",
+		borderStartStartRadius: {
+			default: 0,
+			":first-of-type": "_md"
+		},
+		borderEndStartRadius: {
+			default: 0,
+			":first-of-type": "_md"
+		},
+		borderStartEndRadius: {
+			default: 0,
+			":last-of-type": "_md"
+		},
+		borderEndEndRadius: {
+			default: 0,
+			":last-of-type": "_md"
+		}
+	},
+	rangeStart: {
+		borderStartStartRadius: "_md",
+		borderEndStartRadius: "_md"
+	},
+	rangeEnd: {
+		borderStartEndRadius: "_md",
+		borderEndEndRadius: "_md"
+	},
+	button: {
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		width: `max(2.25em, ${t.sizes.minTarget})`,
+		height: `max(2.25em, ${t.sizes.minTarget})`,
+		borderRadius: "_md",
+		fontVariantNumeric: "tabular-nums",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		}
+	},
+	periodButton: {
+		width: "_full",
+		height: `max(3em, ${t.sizes.minTarget})`
+	},
+	outside: { color: "_textMuted" },
+	today: {
+		fontWeight: "_semibold",
+		boxShadow: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.accentBorder}`
+	},
+	selected: {
+		backgroundColor: {
+			default: "_accent",
+			":hover": "_accentHover"
+		},
+		color: "_accentContrast",
+		boxShadow: "none"
+	},
+	middle: {
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_accentSoftHover"
+		},
+		color: "_accentText"
+	},
+	unavailable: {
+		color: "_textMuted",
+		textDecorationLine: "line-through"
+	},
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "transparent"
+		}
+	},
+	footer: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_sm"
+	}
+});
+/** 网格行列：月份、年份视图一行 3 格 */
+var chunk = (items, size) => Array.from({ length: Math.ceil(items.length / size) }, (_, row) => items.slice(row * size, row * size + size));
+var resolve = (props, date, cell) => typeof props === "function" ? props(date, cell) : props;
+/** 日历的界面：页头、月份网格（或月份、年份视图）、页脚 */
+var CalendarView = /*#__PURE__*/ _component((_props, _ctx) => {
+	const calendar = readonlyProp(_props, "calendar");
+	const firstDayOfWeek = readonlyProp(_props, "firstDayOfWeek");
+	const size = readonlyProp(_props, "size");
+	const showWeekNumbers = readonlyProp(_props, "showWeekNumbers", false);
+	const fixedWeeks = readonlyProp(_props, "fixedWeeks", true);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const children = childrenProp(_props);
+	const footer = readonlyProp(_props, "footer");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsPrevious = readonlyProp(_props, "propsPrevious");
+	const propsNext = readonlyProp(_props, "propsNext");
+	const propsHeading = readonlyProp(_props, "propsHeading");
+	const propsMonths = readonlyProp(_props, "propsMonths");
+	const propsGrid = readonlyProp(_props, "propsGrid");
+	const propsWeekday = readonlyProp(_props, "propsWeekday");
+	const propsWeekNumber = readonlyProp(_props, "propsWeekNumber");
+	const propsCell = readonlyProp(_props, "propsCell");
+	const propsCellButton = readonlyProp(_props, "propsCellButton");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const rest = restProps(_props, _ctx, false);
+	const format = useFormat();
+	const locale = useDateLocale(() => ({ firstDayOfWeek: firstDayOfWeek.value }));
+	const lang = useLang();
+	const hintId = `${useId()}-hint`;
+	let root = shallowRef(null);
+	/** 键盘移动后把焦点交给新的焦点格（翻页、换视图后它是新渲染的） */
+	function onKeydown(event) {
+		if (disabled.value || !root.value) return;
+		if (!handleCalendarKeydown(calendar.value, event, isRtl(root.value))) return;
+		event.preventDefault();
+		nextTick(() => root.value?.querySelector("[data-focused]")?.focus());
+	}
+	const title = (date) => {
+		if (calendar.value.view === "day") return format.date(date, {
+			year: "numeric",
+			month: "long"
+		});
+		if (calendar.value.view === "month") return format.date(date, { year: "numeric" });
+		const end = date.add({ years: 9 });
+		return `${format.date(date, { year: "numeric" })} – ${format.date(end, { year: "numeric" })}`;
+	};
+	/**
+	* 一格：td + 按钮；label 是读屏念的完整日期，content 是格子里显示的。
+	* 读屏名称来自按钮里的文字而不是 aria-label：自定义内容（如房价）跟在完整日期后面一起念，
+	* 名称总包含看得见的文字（中文日期里“20”不是单独的词，写成 aria-label 时对不上）；
+	* 默认内容只是日期数字，不重复念。kind 为 period 时是月份、年份格
+	*/
+	function cell(date, month, label, content, kind = "day") {
+		const period = kind === "period";
+		const state = calendar.value.cell(date, month);
+		const iso = locale.toIso(date);
+		const off = disabled.value || state.disabled;
+		const range = calendar.value.mode === "range";
+		const ends = range && (state.rangeStart || state.rangeEnd);
+		const marked = range ? ends : state.selected;
+		return createVNode("td", mergeProps({ "key": iso }, mergeAttrs({ sx: [
+			calendarStyles.cell,
+			state.inRange && calendarStyles.inRange,
+			state.rangeStart && calendarStyles.rangeStart,
+			state.rangeEnd && calendarStyles.rangeEnd
+		] }, resolve(propsCell.value, iso, state), {
+			role: "gridcell",
+			"aria-selected": state.selected,
+			"aria-disabled": off || void 0,
+			...dataAttrs({ "data-in-range": state.inRange || void 0 })
+		})), [createVNode("button", mergeAttrs({
+			sx: [
+				buttonBaseStyles.root,
+				interactionTransitions.colors,
+				calendarStyles.button,
+				period && calendarStyles.periodButton,
+				focusRingStyles.tight,
+				state.outside && calendarStyles.outside,
+				state.today && calendarStyles.today,
+				state.unavailable && calendarStyles.unavailable,
+				state.inRange && !ends && calendarStyles.middle,
+				marked && calendarStyles.selected,
+				off && calendarStyles.disabled
+			],
+			"aria-describedby": calendar.value.anchor ? hintId : void 0
+		}, resolve(propsCellButton.value, iso, state), {
+			type: "button",
+			tabindex: state.focused && !state.outside ? 0 : -1,
+			"aria-disabled": off || void 0,
+			onClick: () => {
+				if (!off) calendar.value.activate(date);
+			},
+			onFocus: () => {
+				if (!state.focused) calendar.value.focus(date);
+			},
+			onPointerenter: () => calendar.value.hover(date),
+			...dataAttrs({
+				"data-date": iso,
+				"data-focused": state.focused && !state.outside || void 0,
+				"data-selected": state.selected || void 0,
+				"data-today": state.today || void 0,
+				"data-outside": state.outside || void 0,
+				"data-unavailable": state.unavailable || void 0,
+				"data-disabled": off || void 0
+			})
+		}), [createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [state.today ? lang.calendarToday(label) : label]), kind === "custom" ? content : createVNode("span", { "aria-hidden": "true" }, [content])])]);
+	}
+	const gridAttrs = (label) => mergeAttrs({ sx: [calendarStyles.grid, calendar.value.view !== "day" && calendarStyles.periodGrid] }, propsGrid.value, {
+		"aria-label": label,
+		role: "grid",
+		"aria-multiselectable": calendar.value.mode !== "single" || void 0,
+		onKeydown,
+		onPointerleave: () => calendar.value.hover(null)
+	});
+	function dayGrid(month, single) {
+		const weeks = monthGrid(month, {
+			...locale.week,
+			fixedWeeks: fixedWeeks.value
+		});
+		const names = weekdayNames(locale.locale, {
+			firstDayOfWeek: locale.week.firstDayOfWeek,
+			format: "narrow"
+		});
+		const longNames = weekdayNames(locale.locale, {
+			firstDayOfWeek: locale.week.firstDayOfWeek,
+			format: "long"
+		});
+		return createVNode("table", gridAttrs(title(month)), [createVNode("thead", { "aria-hidden": "true" }, [createVNode("tr", null, [showWeekNumbers.value && createVNode("th", mergeAttrs({ sx: calendarStyles.weekNumber }, propsWeekNumber.value, { scope: "col" }), [lang.calendarWeek]), names.map((name, index) => createVNode("th", mergeProps({ "key": index }, mergeAttrs({
+			sx: calendarStyles.weekday,
+			title: longNames[index]
+		}, propsWeekday.value, { scope: "col" })), [name]))])]), createVNode("tbody", null, [weeks.map((week) => createVNode("tr", { "key": week[0].toString() }, [showWeekNumbers.value && createVNode("th", mergeAttrs({ sx: calendarStyles.weekNumber }, propsWeekNumber.value, {
+			"aria-label": lang.calendarWeekNumber(weekOfYear(week[0], locale.week)),
+			scope: "row"
+		}), [weekOfYear(week[0], locale.week)]), week.map((date) => {
+			if (date.month !== month.month && !single) return createVNode("td", mergeProps({ "key": date.toString() }, css.attrs(calendarStyles.cell)), null);
+			return cell(date, month, format.date(date, { dateStyle: "full" }), children.value ? children.value(locale.toIso(date), calendar.value.cell(date, month)) : locale.dayNumber(date), children.value ? "custom" : "day");
+		})]))])]);
+	}
+	function periodGrid() {
+		const page = calendar.value.page;
+		const month = calendar.value.view === "month";
+		const items = month ? monthsOfYear(page) : yearsOfDecade(page);
+		return createVNode("table", gridAttrs(title(page)), [createVNode("tbody", null, [chunk(items, 3).map((row) => createVNode("tr", { "key": row[0].toString() }, [row.map((date) => cell(date, void 0, month ? format.date(date, {
+			year: "numeric",
+			month: "long"
+		}) : format.date(date, { year: "numeric" }), month ? format.date(date, { month: "short" }) : format.date(date, { year: "numeric" }), "period"))]))])]);
+	}
+	return () => {
+		let _slot;
+		const view = calendar.value.view;
+		const months = calendar.value.months;
+		const coarser = view === "day" ? "month" : view === "month" ? "year" : void 0;
+		const [previousLabel, nextLabel] = view === "day" ? [lang.calendarPreviousMonth, lang.calendarNextMonth] : view === "month" ? [lang.calendarPreviousYear, lang.calendarNextYear] : [lang.calendarPreviousDecade, lang.calendarNextDecade];
+		const previous = createVNode(IconButton, mergePartProps({
+			icon: ChevronLeft,
+			"aria-label": previousLabel,
+			propsIcon: { flipInRtl: true }
+		}, propsPrevious.value, {
+			disabled: disabled.value || !calendar.value.canTurnPage(-1),
+			onClick: () => calendar.value.turnPage(-1)
+		}), null);
+		const next = createVNode(IconButton, mergePartProps({
+			icon: ChevronRight,
+			"aria-label": nextLabel,
+			propsIcon: { flipInRtl: true }
+		}, propsNext.value, {
+			disabled: disabled.value || !calendar.value.canTurnPage(1),
+			onClick: () => calendar.value.turnPage(1)
+		}), null);
+		const spacer = createVNode("span", css.attrs(calendarStyles.spacer), null);
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [calendarStyles.root, size.value && fontSizeStyles[size.value]] }, rest, {
+			ref: root,
+			role: "group"
+		}), {
+			"data-view": view,
+			"data-disabled": disabled.value || void 0
+		}), [
+			createVNode("div", mergeAttrs({ sx: calendarStyles.months }, propsMonths.value), [months.map((month, index) => {
+				const label = title(month);
+				return createVNode("div", mergeProps({ "key": month.toString() }, css.attrs(calendarStyles.month)), [createVNode("div", mergeAttrs({ sx: calendarStyles.header }, propsHeader.value), [
+					index === 0 ? previous : spacer,
+					coarser && !disabled.value ? createVNode("button", mergeAttrs({ sx: [
+						buttonBaseStyles.root,
+						interactionTransitions.colors,
+						calendarStyles.heading,
+						focusRingStyles.visible
+					] }, propsHeading.value, {
+						"aria-label": coarser === "month" ? lang.calendarChooseMonth(label) : lang.calendarChooseYear(label),
+						type: "button",
+						onClick: () => calendar.value.setView(coarser)
+					}), [label]) : createVNode("span", css.attrs(calendarStyles.heading, calendarStyles.headingStatic), [label]),
+					index === months.length - 1 ? next : spacer
+				]), view === "day" ? dayGrid(month, months.length === 1) : periodGrid()]);
+			})]),
+			createVNode(VisuallyHidden, { "aria-live": "polite" }, _isSlot(_slot = months.map(title).join("，")) ? _slot : { default: () => [_slot] }),
+			calendar.value.anchor && createVNode(VisuallyHidden, {
+				"id": hintId,
+				"key": "__site0"
+			}, {
+				default: () => [lang.calendarPickEnd],
+				$stable: true
+			}),
+			hasContent(footer.value) && createVNode("div", mergeAttrs({ sx: calendarStyles.footer }, propsFooter.value), [footer.value])
+		]);
+	};
+}, {
+	name: "CalendarView",
+	props: [
+		"calendar",
+		"firstDayOfWeek",
+		"size",
+		"showWeekNumbers",
+		"fixedWeeks",
+		"disabled",
+		"footer",
+		"propsHeader",
+		"propsPrevious",
+		"propsNext",
+		"propsHeading",
+		"propsMonths",
+		"propsGrid",
+		"propsWeekday",
+		"propsWeekNumber",
+		"propsCell",
+		"propsCellButton",
+		"propsFooter"
+	]
+});
+//#endregion
+export { CalendarView, calendarStyles };
+
+//# sourceMappingURL=CalendarView.js.map

package/dist/date/CalendarView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarView.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/date/CalendarView.tsx"],"sourcesContent":["/**\n * 日历的界面（WAI-ARIA 的日期网格）：页头（上一页、标题、下一页）、并排的月份网格、月份视图与年份视图、页脚。\n * 状态由调用方的 useCalendarState 给（同 ListboxView 与 useListState 的分工）：Calendar、RangeCalendar、各种日期选择器共用。\n *\n *   const calendar = useCalendarState({ … });\n *   <CalendarView calendar={calendar} showWeekNumbers>{(date, cell) => …}</CalendarView>\n *\n * - 每个月一张 table role=\"grid\"，日期格是 td role=\"gridcell\"（aria-selected）里的按钮；焦点日期那一格 tabindex=0，\n *   键盘移动后焦点跟过去（handleCalendarKeydown）；读屏念的完整日期（今天、星期）由 Intl 生成；\n * - 标题按钮切到月份视图、再切到年份视图（不比选择的粒度更细）；翻页时用 aria-live 播报新的月份；\n * - 并排几个月时只显示本月的日期（补齐的上下月留空，不重复出现）；只有一个月时补齐的日期变淡、可以点。\n *\n * 部件：Root、Header、Previous、Next（IconButton）、Heading（标题按钮）、Months（并排的月份）、Grid（table）、\n * Weekday（星期表头）、WeekNumber（周数）、Cell（td）、CellButton（日期 / 月份 / 年份按钮）、Footer。\n */\nimport { ChevronLeft, ChevronRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, type VNodeChild } from 'vue';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { VisuallyHidden, visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useFormat } from '../config/lang/format';\nimport {\n  monthGrid,\n  monthsOfYear,\n  weekdayNames,\n  weekOfYear,\n  yearsOfDecade,\n} from '../utils/data/date';\nimport { isRtl } from '../utils/dom/direction';\nimport { hasContent, dataAttrs, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport {\n  handleCalendarKeydown,\n  type CalendarCellState,\n  type CalendarState,\n} from './calendar-state';\nimport { useDateLocale } from './date-locale';\nimport { useLang } from '../config/context';\nimport type { CalendarDate } from '@internationalized/date';\nimport { t } from '../config/theme/tokens';\n\n/** 角色由组件管理 */\nexport type CalendarViewManaged = 'role';\n\n/** 按项给的部件属性：固定的对象，或按这一格的日期（ISO）与状态返回 */\nexport type CalendarItemProps<P> = P | ((date: string, cell: CalendarCellState) => P);\n\n/** 日历界面的外观与内容选项：Calendar、RangeCalendar、日期选择器原样转交 */\nexport interface CalendarViewOptions {\n  /** 字号档位，格子随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 在每行前显示一年里的第几周 */\n  showWeekNumbers?: boolean;\n  /** 总是 6 行（翻页时高度不跳），默认 true */\n  fixedWeeks?: boolean;\n  /** 不可用：不能翻页、不能选 */\n  disabled?: boolean;\n  /**\n   * 自定义日期格的内容（价格、标记点）：拿到日期（ISO）与这一格的状态；不写时是日期数字。\n   * 读屏先念完整日期再念这里的文字：日期数字这类重复的部分可以加 aria-hidden\n   */\n  children?: (date: string, cell: CalendarCellState) => VNodeChild;\n  /** 页脚：今天、清除这类按钮 */\n  footer?: VNodeChild;\n  /** 页头的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 上一页按钮的部件属性 */\n  propsPrevious?: Omit<Partial<IconButtonProps>, 'disabled' | 'onClick'>;\n  /** 下一页按钮的部件属性 */\n  propsNext?: Omit<Partial<IconButtonProps>, 'disabled' | 'onClick'>;\n  /** 标题按钮的部件属性 */\n  propsHeading?: PartProps<'button', 'type' | 'aria-label'>;\n  /** 并排月份那一层的部件属性 */\n  propsMonths?: PartProps<'div'>;\n  /** 每张网格（table）的部件属性 */\n  propsGrid?: PartProps<'table', 'role' | 'aria-label' | 'aria-multiselectable'>;\n  /** 星期表头的部件属性 */\n  propsWeekday?: PartProps<'th', 'scope'>;\n  /** 周数的部件属性 */\n  propsWeekNumber?: PartProps<'th', 'scope' | 'aria-label'>;\n  /** 每格（td）的部件属性 */\n  propsCell?: CalendarItemProps<PartProps<'td', 'role' | 'aria-selected' | 'aria-disabled'>>;\n  /** 每格里按钮的部件属性 */\n  propsCellButton?: CalendarItemProps<\n    PartProps<'button', 'type' | 'tabindex' | 'disabled' | 'aria-label' | 'aria-disabled'>\n  >;\n  /** 页脚的部件属性 */\n  propsFooter?: PartProps<'div'>;\n}\n\n/** 未声明的属性落到根元素上（aria-label 等） */\nexport interface CalendarViewProps\n  extends PartProps<'div', CalendarViewManaged>, CalendarViewOptions {\n  /** 日历状态（useCalendarState） */\n  calendar: CalendarState;\n  /** 一周的第一天（0 表示周日），与 useCalendarState 的 week 一致；不写时取语言配置 */\n  firstDayOfWeek?: number;\n}\n\n/** CalendarView 的样式：root、months、month、header、heading、grid、weekday、cell、button 等 */\nexport const calendarStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    color: '_text',\n    lineHeight: '_normal',\n    userSelect: 'none',\n  },\n  months: { display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', gap: '_xl' },\n  month: { display: 'flex', flexDirection: 'column', gap: '_xs' },\n  header: {\n    display: 'grid',\n    gridTemplateColumns: `max(${t.sizes.control}, ${t.sizes.minTarget}) 1fr max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    alignItems: 'center',\n    gap: '_xs',\n  },\n  // 占住按钮的位置：并排几个月时中间的月没有翻页按钮，标题仍居中\n  spacer: { width: `max(${t.sizes.control}, ${t.sizes.minTarget})` },\n  heading: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifySelf: 'center',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_sm',\n    borderRadius: '_md',\n    fontWeight: '_semibold',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n  },\n  headingStatic: {\n    cursor: 'default',\n    backgroundColor: { default: 'transparent', ':hover': 'transparent' },\n  },\n  grid: { borderCollapse: 'collapse', borderSpacing: 0 },\n  // 月份、年份视图：一行 3 格，与日期网格同宽\n  periodGrid: { width: `calc(7 * max(2.25em, ${t.sizes.minTarget}))` },\n  weekday: {\n    paddingBlock: '_xs',\n    paddingInline: 0,\n    color: '_textMuted',\n    fontWeight: '_normal',\n    textAlign: 'center',\n  },\n  weekNumber: {\n    paddingInlineEnd: '_xs',\n    color: '_textMuted',\n    fontWeight: '_normal',\n    textAlign: 'center',\n  },\n  cell: { padding: 0, textAlign: 'center' },\n  // 区间的底色画在 td 上，相邻的格连成一条；两端与每行的首尾是圆的\n  inRange: {\n    backgroundColor: '_accentSoft',\n    borderStartStartRadius: { default: 0, ':first-of-type': '_md' },\n    borderEndStartRadius: { default: 0, ':first-of-type': '_md' },\n    borderStartEndRadius: { default: 0, ':last-of-type': '_md' },\n    borderEndEndRadius: { default: 0, ':last-of-type': '_md' },\n  },\n  rangeStart: { borderStartStartRadius: '_md', borderEndStartRadius: '_md' },\n  rangeEnd: { borderStartEndRadius: '_md', borderEndEndRadius: '_md' },\n  button: {\n    display: 'inline-flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: `max(2.25em, ${t.sizes.minTarget})`,\n    height: `max(2.25em, ${t.sizes.minTarget})`,\n    borderRadius: '_md',\n    fontVariantNumeric: 'tabular-nums',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n  },\n  periodButton: { width: '_full', height: `max(3em, ${t.sizes.minTarget})` },\n  outside: { color: '_textMuted' },\n  today: {\n    fontWeight: '_semibold',\n    boxShadow: `inset 0 0 0 ${t.borderWidths.xs} ${t.colors.accentBorder}`,\n  },\n  selected: {\n    backgroundColor: { default: '_accent', ':hover': '_accentHover' },\n    color: '_accentContrast',\n    boxShadow: 'none',\n  },\n  // 区间中间的格：按钮透明，底色是 td 的那一条\n  middle: {\n    backgroundColor: { default: 'transparent', ':hover': '_accentSoftHover' },\n    color: '_accentText',\n  },\n  unavailable: { color: '_textMuted', textDecorationLine: 'line-through' },\n  disabled: {\n    opacity: '_disabled',\n    cursor: 'not-allowed',\n    backgroundColor: { default: 'transparent', ':hover': 'transparent' },\n  },\n  footer: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_sm' },\n});\n\n/** 网格行列：月份、年份视图一行 3 格 */\nconst chunk = <T,>(items: readonly T[], size: number) =>\n  Array.from({ length: Math.ceil(items.length / size) }, (_, row) =>\n    items.slice(row * size, row * size + size),\n  );\n\nconst resolve = <P,>(\n  props: CalendarItemProps<P> | undefined,\n  date: string,\n  cell: CalendarCellState,\n) =>\n  typeof props === 'function'\n    ? (props as (date: string, cell: CalendarCellState) => P)(date, cell)\n    : props;\n\n/** 日历的界面：页头、月份网格（或月份、年份视图）、页脚 */\nexport const CalendarView = _component(\n  ({\n    calendar,\n    firstDayOfWeek,\n    size,\n    showWeekNumbers = false,\n    fixedWeeks = true,\n    disabled = false,\n    children,\n    footer,\n    propsHeader,\n    propsPrevious,\n    propsNext,\n    propsHeading,\n    propsMonths,\n    propsGrid,\n    propsWeekday,\n    propsWeekNumber,\n    propsCell,\n    propsCellButton,\n    propsFooter,\n    ...rest\n  }: CalendarViewProps) => {\n    const format = useFormat();\n    const locale = useDateLocale(() => ({ firstDayOfWeek }));\n    const lang = useLang();\n    const id = useId();\n    const hintId = `${id}-hint`;\n    let root = _state.raw<HTMLElement | null>(null);\n\n    /** 键盘移动后把焦点交给新的焦点格（翻页、换视图后它是新渲染的） */\n    function onKeydown(event: KeyboardEvent) {\n      if (disabled || !root) return;\n      if (!handleCalendarKeydown(calendar, event, isRtl(root))) return;\n      event.preventDefault();\n      void nextTick(() => root?.querySelector<HTMLElement>('[data-focused]')?.focus());\n    }\n\n    const title = (date: CalendarDate) => {\n      if (calendar.view === 'day') return format.date(date, { year: 'numeric', month: 'long' });\n      if (calendar.view === 'month') return format.date(date, { year: 'numeric' });\n      const end = date.add({ years: 9 });\n      return `${format.date(date, { year: 'numeric' })} – ${format.date(end, { year: 'numeric' })}`;\n    };\n\n    /**\n     * 一格：td + 按钮；label 是读屏念的完整日期，content 是格子里显示的。\n     * 读屏名称来自按钮里的文字而不是 aria-label：自定义内容（如房价）跟在完整日期后面一起念，\n     * 名称总包含看得见的文字（中文日期里“20”不是单独的词，写成 aria-label 时对不上）；\n     * 默认内容只是日期数字，不重复念。kind 为 period 时是月份、年份格\n     */\n    function cell(\n      date: CalendarDate,\n      month: CalendarDate | undefined,\n      label: string,\n      content: VNodeChild,\n      kind: 'day' | 'custom' | 'period' = 'day',\n    ) {\n      const period = kind === 'period';\n      const state = calendar.cell(date, month);\n      const iso = locale.toIso(date);\n      const off = disabled || state.disabled;\n      const range = calendar.mode === 'range';\n      const ends = range && (state.rangeStart || state.rangeEnd);\n      const marked = range ? ends : state.selected;\n      return (\n        <td\n          key={iso}\n          {...mergeAttrs<'td'>(\n            {\n              sx: [\n                calendarStyles.cell,\n                state.inRange && calendarStyles.inRange,\n                state.rangeStart && calendarStyles.rangeStart,\n                state.rangeEnd && calendarStyles.rangeEnd,\n              ],\n            },\n            resolve(propsCell, iso, state),\n            {\n              role: 'gridcell',\n              'aria-selected': state.selected,\n              'aria-disabled': off || undefined,\n              ...dataAttrs({ 'data-in-range': state.inRange || undefined }),\n            },\n          )}\n        >\n          <button\n            {...mergeAttrs<'button'>(\n              {\n                sx: [\n                  buttonBaseStyles.root,\n                  interactionTransitions.colors,\n                  calendarStyles.button,\n                  period && calendarStyles.periodButton,\n                  focusRingStyles.tight,\n                  state.outside && calendarStyles.outside,\n                  state.today && calendarStyles.today,\n                  state.unavailable && calendarStyles.unavailable,\n                  state.inRange && !ends && calendarStyles.middle,\n                  marked && calendarStyles.selected,\n                  off && calendarStyles.disabled,\n                ],\n                'aria-describedby': calendar.anchor ? hintId : undefined,\n              },\n              resolve(propsCellButton, iso, state),\n              {\n                type: 'button',\n                tabindex: state.focused && !state.outside ? 0 : -1,\n                'aria-disabled': off || undefined,\n                onClick: () => {\n                  if (!off) calendar.activate(date);\n                },\n                // 点击、程序聚焦到别的格子时，键盘从这一格接着走\n                onFocus: () => {\n                  if (!state.focused) calendar.focus(date);\n                },\n                onPointerenter: () => calendar.hover(date),\n                // 写在受管层而不是 JSX 上：元素上只有一处展开，不用再经 Vue 的 mergeProps（每页几百格）\n                ...dataAttrs({\n                  'data-date': iso,\n                  'data-focused': (state.focused && !state.outside) || undefined,\n                  'data-selected': state.selected || undefined,\n                  'data-today': state.today || undefined,\n                  'data-outside': state.outside || undefined,\n                  'data-unavailable': state.unavailable || undefined,\n                  'data-disabled': off || undefined,\n                }),\n              },\n            )}\n          >\n            {/* 每格一个：直接用样式，不多建几百个组件实例 */}\n            <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n              {state.today ? lang.calendarToday(label) : label}\n            </span>\n            {kind === 'custom' ? content : <span aria-hidden=\"true\">{content}</span>}\n          </button>\n        </td>\n      );\n    }\n\n    const gridAttrs = (label: string) =>\n      mergeAttrs<'table'>(\n        {\n          sx: [calendarStyles.grid, calendar.view !== 'day' && calendarStyles.periodGrid],\n        },\n        propsGrid,\n        {\n          'aria-label': label,\n          role: 'grid',\n          'aria-multiselectable': calendar.mode !== 'single' || undefined,\n          onKeydown,\n          onPointerleave: () => calendar.hover(null),\n        },\n      );\n\n    function dayGrid(month: CalendarDate, single: boolean) {\n      const weeks = monthGrid(month, { ...locale.week, fixedWeeks });\n      const names = weekdayNames(locale.locale, {\n        firstDayOfWeek: locale.week.firstDayOfWeek,\n        format: 'narrow',\n      });\n      const longNames = weekdayNames(locale.locale, {\n        firstDayOfWeek: locale.week.firstDayOfWeek,\n        format: 'long',\n      });\n      return (\n        <table {...gridAttrs(title(month))}>\n          <thead aria-hidden=\"true\">\n            <tr>\n              {showWeekNumbers && (\n                <th\n                  {...mergeAttrs<'th'>({ sx: calendarStyles.weekNumber }, propsWeekNumber, {\n                    scope: 'col',\n                  })}\n                >\n                  {lang.calendarWeek}\n                </th>\n              )}\n              {names.map((name, index) => (\n                <th\n                  key={index}\n                  {...mergeAttrs<'th'>(\n                    { sx: calendarStyles.weekday, title: longNames[index] },\n                    propsWeekday,\n                    {\n                      scope: 'col',\n                    },\n                  )}\n                >\n                  {name}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {weeks.map((week) => (\n              <tr key={week[0]!.toString()}>\n                {showWeekNumbers && (\n                  <th\n                    {...mergeAttrs<'th'>({ sx: calendarStyles.weekNumber }, propsWeekNumber, {\n                      'aria-label': lang.calendarWeekNumber(weekOfYear(week[0]!, locale.week)),\n                      scope: 'row',\n                    })}\n                  >\n                    {weekOfYear(week[0]!, locale.week)}\n                  </th>\n                )}\n                {week.map((date) => {\n                  const outside = date.month !== month.month;\n                  // 并排几个月时补齐的日期留空：同一天不在两张网格里重复出现\n                  if (outside && !single)\n                    return <td key={date.toString()} {...css.attrs(calendarStyles.cell)} />;\n                  return cell(\n                    date,\n                    month,\n                    format.date(date, { dateStyle: 'full' }),\n                    children\n                      ? children(locale.toIso(date), calendar.cell(date, month))\n                      : locale.dayNumber(date),\n                    children ? 'custom' : 'day',\n                  );\n                })}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      );\n    }\n\n    function periodGrid() {\n      const page = calendar.page;\n      const month = calendar.view === 'month';\n      const items = month ? monthsOfYear(page) : yearsOfDecade(page);\n      return (\n        <table {...gridAttrs(title(page))}>\n          <tbody>\n            {chunk(items, 3).map((row) => (\n              <tr key={row[0]!.toString()}>\n                {row.map((date) =>\n                  cell(\n                    date,\n                    undefined,\n                    month\n                      ? format.date(date, { year: 'numeric', month: 'long' })\n                      : format.date(date, { year: 'numeric' }),\n                    month\n                      ? format.date(date, { month: 'short' })\n                      : format.date(date, { year: 'numeric' }),\n                    'period',\n                  ),\n                )}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      );\n    }\n\n    return () => {\n      const view = calendar.view;\n      const months = calendar.months;\n      const coarser = view === 'day' ? 'month' : view === 'month' ? 'year' : undefined;\n      const [previousLabel, nextLabel] =\n        view === 'day'\n          ? [lang.calendarPreviousMonth, lang.calendarNextMonth]\n          : view === 'month'\n            ? [lang.calendarPreviousYear, lang.calendarNextYear]\n            : [lang.calendarPreviousDecade, lang.calendarNextDecade];\n      const previous = (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(\n            { icon: ChevronLeft, 'aria-label': previousLabel, propsIcon: { flipInRtl: true } },\n            propsPrevious,\n            {\n              disabled: disabled || !calendar.canTurnPage(-1),\n              onClick: () => calendar.turnPage(-1),\n            },\n          )}\n        />\n      );\n      const next = (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(\n            { icon: ChevronRight, 'aria-label': nextLabel, propsIcon: { flipInRtl: true } },\n            propsNext,\n            { disabled: disabled || !calendar.canTurnPage(1), onClick: () => calendar.turnPage(1) },\n          )}\n        />\n      );\n      const spacer = <span {...css.attrs(calendarStyles.spacer)} />;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [calendarStyles.root, size && fontSizeStyles[size]] }, rest, {\n            ref: _toRef(root),\n            role: 'group',\n          })}\n          data-view={view}\n          data-disabled={disabled || undefined}\n        >\n          <div {...mergeAttrs<'div'>({ sx: calendarStyles.months }, propsMonths)}>\n            {months.map((month, index) => {\n              const label = title(month);\n              return (\n                <div key={month.toString()} {...css.attrs(calendarStyles.month)}>\n                  <div {...mergeAttrs<'div'>({ sx: calendarStyles.header }, propsHeader)}>\n                    {index === 0 ? previous : spacer}\n                    {coarser && !disabled ? (\n                      <button\n                        {...mergeAttrs<'button'>(\n                          {\n                            sx: [\n                              buttonBaseStyles.root,\n                              interactionTransitions.colors,\n                              calendarStyles.heading,\n                              focusRingStyles.visible,\n                            ],\n                          },\n                          propsHeading,\n                          {\n                            'aria-label':\n                              coarser === 'month'\n                                ? lang.calendarChooseMonth(label)\n                                : lang.calendarChooseYear(label),\n                            type: 'button',\n                            onClick: () => calendar.setView(coarser),\n                          },\n                        )}\n                      >\n                        {label}\n                      </button>\n                    ) : (\n                      // 已经是最粗的视图（或不可用）：标题只是文字\n                      <span {...css.attrs(calendarStyles.heading, calendarStyles.headingStatic)}>\n                        {label}\n                      </span>\n                    )}\n                    {index === months.length - 1 ? next : spacer}\n                  </div>\n                  {view === 'day' ? dayGrid(month, months.length === 1) : periodGrid()}\n                </div>\n              );\n            })}\n          </div>\n          {/* 翻页、换视图时播报新的标题；不放在标题按钮上，免得聚焦按钮时重复念 */}\n          <VisuallyHidden aria-live=\"polite\">{months.map(title).join('，')}</VisuallyHidden>\n          {calendar.anchor && <VisuallyHidden id={hintId}>{lang.calendarPickEnd}</VisuallyHidden>}\n          {hasContent(footer) && (\n            <div {...mergeAttrs<'div'>({ sx: calendarStyles.footer }, propsFooter)}>{footer}</div>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/Countdown.d.ts

@@ -0,0 +1,45 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { DateTimeInput } from './DateTime';
+/** 还剩多久，拆成天、时、分、秒 */
+export interface CountdownParts {
+    /** 剩余的毫秒数，到点后是 0 */
+    total: number;
+    /** 整天数 */
+    days: number;
+    /** 不满一天的小时（0–23） */
+    hours: number;
+    /** 不满一小时的分钟（0–59） */
+    minutes: number;
+    /** 不满一分钟的秒（0–59）；精度为 minute 时总是 0 */
+    seconds: number;
+    /** 已经到点 */
+    ended: boolean;
+}
+/** 更新与显示的精度 */
+export interface CountdownPrecisions {
+    /** 到秒（默认）：每秒更新 */
+    second: unknown;
+    /** 到分：每分钟更新，不显示秒 */
+    minute: unknown;
+}
+/** 未声明的属性落到 span（role="timer"）上 */
+export interface CountdownProps extends PartProps<'span', 'role'> {
+    /** 目标时刻 */
+    to: DateTimeInput;
+    /** 精度，默认 second */
+    precision?: keyof CountdownPrecisions;
+    /** 到点时调用一次（挂载时已经过了的不调用） */
+    onEnd?: () => void;
+    /** 自定义显示：拿到拆好的天、时、分、秒 */
+    children?: (parts: CountdownParts) => VNodeChild;
+}
+/** Countdown 的样式：root */
+export declare const countdownStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 剩余的毫秒数 → 天、时、分、秒（按精度向上取整：还剩 0.4 秒时显示 1 秒，到点才是 0） */
+export declare function countdownParts(total: number, precision: keyof CountdownPrecisions): CountdownParts;
+/** 倒计时 */
+export declare const Countdown: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CountdownProps>;

package/dist/date/Countdown.js

@@ -0,0 +1,75 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { toInstant } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { useNow } from "./clock.js";
+import { computed, createVNode, watch } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/date/Countdown.tsx
+/** 还剩多久，拆成天、时、分、秒 */
+/** 更新与显示的精度 */
+/** 未声明的属性落到 span（role="timer"）上 */
+/** Countdown 的样式：root */
+var countdownStyles = css.create({ root: {
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap"
+} });
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+/** 剩余的毫秒数 → 天、时、分、秒（按精度向上取整：还剩 0.4 秒时显示 1 秒，到点才是 0） */
+function countdownParts(total, precision) {
+	const unit = precision === "minute" ? MINUTE : SECOND;
+	const rounded = Math.ceil(Math.max(total, 0) / unit) * unit;
+	const seconds = Math.floor(rounded / SECOND);
+	return {
+		total: Math.max(total, 0),
+		days: Math.floor(seconds / 86400),
+		hours: Math.floor(seconds / 3600) % 24,
+		minutes: Math.floor(seconds / 60) % 60,
+		seconds: seconds % 60,
+		ended: total <= 0
+	};
+}
+var pad = (value) => String(value).padStart(2, "0");
+/** 倒计时 */
+var Countdown = /*#__PURE__*/ _component((_props, _ctx) => {
+	const to = readonlyProp(_props, "to");
+	const precision = readonlyProp(_props, "precision", "second");
+	const onEnd = readonlyProp(_props, "onEnd");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const format = useFormat();
+	const target = () => toInstant(to.value, lang.timeZone);
+	const now = useNow((current) => current >= target() ? null : precision.value === "minute" ? MINUTE : SECOND);
+	const parts = computed(() => countdownParts(target() - now.value, precision.value));
+	watch(() => parts.value.ended, (ended, before) => {
+		if (ended && before === false) onEnd.value?.();
+	});
+	return () => {
+		const { days, hours, minutes, seconds } = parts.value;
+		const clock = [
+			hours,
+			minutes,
+			...precision.value === "second" ? [seconds] : []
+		].map(pad).join(":");
+		const dayText = days > 0 ? `${format.number(days, {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "long"
+		})} ` : "";
+		return createVNode("span", mergeAttrs({ sx: countdownStyles.root }, rest, { role: "timer" }), [children.value ? children.value(parts.value) : `${dayText}${clock}`]);
+	};
+}, {
+	name: "Countdown",
+	props: [
+		"to",
+		"precision",
+		"onEnd"
+	]
+});
+//#endregion
+export { Countdown, countdownParts, countdownStyles };
+
+//# sourceMappingURL=Countdown.js.map

package/dist/date/Countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_computed","_createVNode"],"sources":["../../src/date/Countdown.tsx"],"sourcesContent":["/**\n * 倒计时（role=\"timer\"）：到某个时刻还剩多久，按秒（或分）更新；到点时调用 onEnd，停在 0。\n * 参考 Ant Design Statistic.Countdown、GitHub 的 <relative-time format=\"duration\">。\n *\n *   <Countdown to={sale.startsAt} onEnd={refresh} />          // 2天 03:15:42\n *   <Countdown to={deadline} precision=\"minute\" />            // 2天 03:15\n *   <Countdown to={deadline}>{({ days, hours }) => `还剩 ${days} 天 ${hours} 小时`}</Countdown>\n *\n * 目标时刻同 DateTime 的值（Date、DateValue 或 ISO 字符串）。默认显示 时:分:秒，超过一天时前面加天数（Intl 的单位写法）。\n * role=\"timer\" 默认不播报（aria-live 为 off），读屏用户需要时自己读；到点的提示放在 onEnd 里（Toast 等）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { toInstant } from '../utils/data/date';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { useNow } from './clock';\nimport type { DateTimeInput } from './DateTime';\n\n/** 还剩多久，拆成天、时、分、秒 */\nexport interface CountdownParts {\n  /** 剩余的毫秒数，到点后是 0 */\n  total: number;\n  /** 整天数 */\n  days: number;\n  /** 不满一天的小时（0–23） */\n  hours: number;\n  /** 不满一小时的分钟（0–59） */\n  minutes: number;\n  /** 不满一分钟的秒（0–59）；精度为 minute 时总是 0 */\n  seconds: number;\n  /** 已经到点 */\n  ended: boolean;\n}\n\n/** 更新与显示的精度 */\nexport interface CountdownPrecisions {\n  /** 到秒（默认）：每秒更新 */\n  second: unknown;\n  /** 到分：每分钟更新，不显示秒 */\n  minute: unknown;\n}\n\n/** 未声明的属性落到 span（role=\"timer\"）上 */\nexport interface CountdownProps extends PartProps<'span', 'role'> {\n  /** 目标时刻 */\n  to: DateTimeInput;\n  /** 精度，默认 second */\n  precision?: keyof CountdownPrecisions;\n  /** 到点时调用一次（挂载时已经过了的不调用） */\n  onEnd?: () => void;\n  /** 自定义显示：拿到拆好的天、时、分、秒 */\n  children?: (parts: CountdownParts) => VNodeChild;\n}\n\n/** Countdown 的样式：root */\nexport const countdownStyles = css.create({\n  // 等宽数字：每秒跳动时宽度不变\n  root: { fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },\n});\n\nconst SECOND = 1000;\nconst MINUTE = 60 * SECOND;\n\n/** 剩余的毫秒数 → 天、时、分、秒（按精度向上取整：还剩 0.4 秒时显示 1 秒，到点才是 0） */\nexport function countdownParts(\n  total: number,\n  precision: keyof CountdownPrecisions,\n): CountdownParts {\n  const unit = precision === 'minute' ? MINUTE : SECOND;\n  const rounded = Math.ceil(Math.max(total, 0) / unit) * unit;\n  const seconds = Math.floor(rounded / SECOND);\n  return {\n    total: Math.max(total, 0),\n    days: Math.floor(seconds / 86_400),\n    hours: Math.floor(seconds / 3600) % 24,\n    minutes: Math.floor(seconds / 60) % 60,\n    seconds: seconds % 60,\n    ended: total <= 0,\n  };\n}\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\n/** 倒计时 */\nexport const Countdown = _component(\n  ({ to, precision = 'second', onEnd, children, ...rest }: CountdownProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const target = () => toInstant(to, lang.timeZone);\n    const now = useNow((current) =>\n      current >= target() ? null : precision === 'minute' ? MINUTE : SECOND,\n    );\n    const parts = _derived(countdownParts(target() - now.value, precision));\n    watch(\n      () => parts.ended,\n      (ended, before) => {\n        if (ended && before === false) onEnd?.();\n      },\n    );\n\n    return () => {\n      const { days, hours, minutes, seconds } = parts;\n      const clock = [hours, minutes, ...(precision === 'second' ? [seconds] : [])]\n        .map(pad)\n        .join(':');\n      const dayText =\n        days > 0\n          ? `${format.number(days, { style: 'unit', unit: 'day', unitDisplay: 'long' })} `\n          : '';\n      return (\n        <span {...mergeAttrs<'span'>({ sx: countdownStyles.root }, rest, { role: 'timer' })}>\n          {children ? children(parts) : `${dayText}${clock}`}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AA0DA,IAAa,kBAAkB,IAAI,OAAO,EAExC,MAAM;CAAE,oBAAoB;CAAgB,YAAY;AAAS,EACnE,CAAC;AAED,IAAM,SAAS;AACf,IAAM,SAAS,KAAK;;AAGpB,SAAgB,eACd,OACA,WACgB;CAChB,MAAM,OAAO,cAAc,WAAW,SAAS;CAC/C,MAAM,UAAU,KAAK,KAAK,KAAK,IAAI,OAAO,CAAC,IAAI,IAAI,IAAI;CACvD,MAAM,UAAU,KAAK,MAAM,UAAU,MAAM;CAC3C,OAAO;EACL,OAAO,KAAK,IAAI,OAAO,CAAC;EACxB,MAAM,KAAK,MAAM,UAAU,KAAM;EACjC,OAAO,KAAK,MAAM,UAAU,IAAI,IAAI;EACpC,SAAS,KAAK,MAAM,UAAU,EAAE,IAAI;EACpC,SAAS,UAAU;EACnB,OAAO,SAAS;CAClB;AACF;AAEA,IAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;;AAG5D,IAAa,YAAY,0BACvB,QAAA,SAA4E;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAzD,QAAQ;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAsB,OAAIC,UAAA,QAAA,MAAA,KAAA;CACnD,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,eAAe,UAAS,GAAA,OAAK,KAAK,QAAQ;CAChD,MAAM,MAAM,QAAQ,YAClB,WAAW,OAAO,IAAI,OAAO,UAAA,UAAc,WAAW,SAAS,MACjE;CACA,MAAM,QAAKC,eAAY,eAAe,OAAO,IAAI,IAAI,OAAK,UAAA,KAAW,CAAC;CACtE,YACQ,MAAA,MAAM,QACX,OAAO,WAAW;EACjB,IAAI,SAAS,WAAW,OAAO,MAAA,QAAQ;CACzC,CACF;CAEA,aAAa;EACX,MAAM,EAAE,MAAM,OAAO,SAAS,YAAS,MAAA;EACvC,MAAM,QAAQ;GAAC;GAAO;GAAS,GAAI,UAAA,UAAc,WAAW,CAAC,OAAO,IAAI,CAAA;EAAG,CAAC,CACzE,IAAI,GAAG,CAAC,CACR,KAAK,GAAG;EACX,MAAM,UACJ,OAAO,IACH,GAAG,OAAO,OAAO,MAAM;GAAE,OAAO;GAAQ,MAAM;GAAO,aAAa;EAAO,CAAC,EAAC,KAC3E;EACN,OAAAC,YAAA,QACY,WAAmB,EAAE,IAAI,gBAAgB,KAAK,GAAG,MAAM,EAAE,MAAM,QAAQ,CAAC,GAAC,CAChF,SAAA,QAAW,SAAA,MAAA,MAAA,KAAc,IAAI,GAAG,UAAU,OAAO,CAAA;CAGxD;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}