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

package/dist/date/DateRangePicker.js

@@ -0,0 +1,411 @@
+import { useLang } from "../config/context.js";
+import { defaultLabelledBy, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { toElement } from "../utils/dom/element.js";
+import { clampDate, fullIsoDay, lastIsoDay, parseIsoDate, presetIsoRange, toIsoDate, toIsoQuarter, toIsoWeek } from "../utils/data/date.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "../input/control.js";
+import { FormValue } from "../form/FormValue.js";
+import { toDateLimits, useDateLocale } from "./date-locale.js";
+import { segmentFields } from "./date-segments.js";
+import { DateSegmentGroup } from "./DateSegmentGroup.js";
+import { firstSegmentOf, segmentedFieldStyles, useFieldSegments } from "./SegmentedField.js";
+import { dateUnitOf, isPeriodDisabled, isTimeGranularity, isoToValue, valueToIso } from "./DateField.js";
+import { QuarterCalendar } from "./QuarterCalendar.js";
+import { focusCalendar, renderPickerPresets, usePickerPopover } from "./picker-popover.js";
+import { RangeCalendar } from "./RangeCalendar.js";
+import { Fragment, computed, createTextVNode, createVNode, mergeProps, ref, 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 { CalendarRange } from "@lucide/icons";
+//#region src/date/DateRangePicker.tsx
+/**
+* 日期区间选择器：一个输入框里两组分段（开始 – 结束），按钮弹出区间日历，旁边可以放快捷区间（最近 7 天、本月……）。
+* 参考 React Aria DateRangePicker（同一个外壳里两组 DateInput）、Ant Design RangePicker 的 presets。
+*
+*   <Field label="统计区间"><DateRangePicker _value={range} max={today} presets={['last7Days', 'thisMonth']} /></Field>
+*   <DateRangePicker granularity="month" _value={months} aria-label="预算期间" />      // { start: '2026-01', end: '2026-06' }
+*   <DateRangePicker granularity="minute" _value={window} aria-label="维护窗口" />   // '2026-10-24T22:00' – '2026-10-25T06:00'
+*
+* 值是 `{ start, end }`（两端都含；ISO 字符串或 DateValue，写回时保持同一种类型），两端都填好才写回，删掉一段写回 null。
+* granularity 同 DateField：month、year 按月、按年（日历选整月、整年），quarter 弹出季度面板选一段季度，
+* week 按 ISO 周（日历周一开始、行首是周数），hour / minute / second 是日期时间区间
+* （日历里选日期，开始补 00:00、结束补 23:59，已经填了的时间不变）。
+* 结束早于开始、超出范围、是不可选的日期时外壳显示出错，值照样写回，由表单校验决定能不能提交。
+* 开始那组刚填全时焦点自动进结束那组；日历里点开始、再点结束后关闭，焦点回到按钮。Esc、点外部关闭，分段里 Alt + ↓ 打开。
+*
+* 部件：Root（外壳，role="group"，主元素）、Start / End（两组分段）、Separator、Clear、Button、Popover、Presets、Calendar。
+*/
+/** 自定义的快捷区间（财年、上个结算周期） */
+/** 未声明的属性落到外壳（role="group"）上 */
+/** DateRangePicker 的样式：separator、popover（快捷区间的样式见 pickerPresetStyles） */
+var dateRangePickerStyles = css.create({
+	separator: {
+		flexShrink: 0,
+		paddingInline: "_xs",
+		color: "_textMuted"
+	},
+	popover: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_sm",
+		padding: "_sm"
+	}
+});
+/** 自定义快捷区间的值 → ISO 日期区间（DateValue 取年月日） */
+function isoRangeOf(value) {
+	const range = typeof value === "function" ? value() : value;
+	const iso = (input) => typeof input === "string" ? input.slice(0, 10) : toIsoDate(input);
+	return {
+		start: iso(range.start),
+		end: iso(range.end)
+	};
+}
+/** 日期区间选择器：两组分段 + 弹出的区间日历与快捷区间 */
+var DateRangePicker = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const valueType = readonlyProp(_props, "valueType");
+	const granularity = readonlyProp(_props, "granularity", "day");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const presets = readonlyProp(_props, "presets");
+	const visibleMonths = readonlyProp(_props, "visibleMonths", 2);
+	const allowsUnavailableInRange = readonlyProp(_props, "allowsUnavailableInRange", false);
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const startName = readonlyProp(_props, "startName");
+	const endName = readonlyProp(_props, "endName");
+	const placement = readonlyProp(_props, "placement");
+	const id = readonlyProp(_props, "id");
+	const propsStart = readonlyProp(_props, "propsStart");
+	const propsEnd = readonlyProp(_props, "propsEnd");
+	const propsSeparator = readonlyProp(_props, "propsSeparator");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const icon = readonlyProp(_props, "icon");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsButton = readonlyProp(_props, "propsButton");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsPresets = readonlyProp(_props, "propsPresets");
+	const propsCalendar = readonlyProp(_props, "propsCalendar");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const locale = useDateLocale();
+	const generatedId = useId();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const editable = () => !control().disabled && !control().readonly;
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value,
+		isDateUnavailable: isDateUnavailable.value
+	}));
+	let startGroup = shallowRef(null);
+	let endGroup = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const picker = usePickerPopover(() => ({
+		open: open.value,
+		placement: placement.value,
+		editable: editable(),
+		label: lang.datePickerOpen,
+		size: appearance().size
+	}), {
+		toggle: setOpen,
+		shown: focusCalendar
+	});
+	const toIso = (date) => valueToIso(date, granularity.value);
+	let start = ref(null);
+	let end = ref(null);
+	let written;
+	let lastLike;
+	watch(() => value.value, (next) => {
+		if (next === written) return;
+		start.value = next ? toIso(next.start) : null;
+		end.value = next ? toIso(next.end) : null;
+	}, { immediate: true });
+	function commit() {
+		lastLike = value.value?.start ?? lastLike;
+		const like = (iso) => isoToValue(iso, lastLike, granularity.value, valueType.value);
+		written = start.value && end.value ? {
+			start: like(start.value),
+			end: like(end.value)
+		} : null;
+		if (written !== null || value.value !== null) value.value = written;
+	}
+	const startSegments = useFieldSegments(() => ({
+		fields: segmentFields(granularity.value),
+		value: start.value,
+		readonly: !editable()
+	}), (iso) => {
+		start.value = iso;
+		commit();
+	}, (direction) => direction === 1 && firstSegmentOf(endGroup.value)?.focus());
+	const endSegments = useFieldSegments(() => ({
+		fields: segmentFields(granularity.value),
+		value: end.value,
+		readonly: !editable()
+	}), (iso) => {
+		end.value = iso;
+		commit();
+	}, (direction) => {
+		if (direction !== -1) return;
+		const segments = startGroup.value?.querySelectorAll("[role=\"spinbutton\"]");
+		segments?.[segments.length - 1]?.focus();
+	});
+	const outOfRange = (iso) => iso != null && isPeriodDisabled(iso, granularity.value, limits.value, locale);
+	/** 整天的区间 → 按 granularity 的形式：月、年截短；带时间时开始补 00:00、结束补 23:59（已经填了的时间不变） */
+	function fromDays(range) {
+		if (granularity.value === "year") return {
+			start: range.start.slice(0, 4),
+			end: range.end.slice(0, 4)
+		};
+		if (granularity.value === "month") return {
+			start: range.start.slice(0, 7),
+			end: range.end.slice(0, 7)
+		};
+		if (granularity.value === "quarter" || granularity.value === "week") {
+			const period = granularity.value === "quarter" ? toIsoQuarter : toIsoWeek;
+			return {
+				start: period(parseIsoDate(range.start)),
+				end: period(parseIsoDate(range.end))
+			};
+		}
+		if (!isTimeGranularity(granularity.value)) return range;
+		const timeOf = (iso, fallback) => iso != null && iso.length > 10 ? iso.slice(10) : fallback;
+		const endTime = {
+			hour: "T23:00",
+			minute: "T23:59",
+			second: "T23:59:59"
+		}[granularity.value];
+		return {
+			start: range.start + timeOf(start.value, granularity.value === "second" ? "T00:00:00" : "T00:00"),
+			end: range.end + timeOf(end.value, endTime)
+		};
+	}
+	const calendarRange = () => start.value == null || end.value == null ? null : {
+		start: fullIsoDay(start.value),
+		end: lastIsoDay(end.value)
+	};
+	/** 季度面板选好了区间（'YYYY-Qn'） */
+	function pickQuarters(range) {
+		if (range == null) return;
+		start.value = range.start;
+		end.value = range.end;
+		commit();
+	}
+	/** 日历选好了区间：换回 granularity 的形式；带时间时焦点去开始的“时”接着输入 */
+	function pickRange(range) {
+		if (range == null) return;
+		const next = fromDays(range);
+		start.value = next.start;
+		end.value = next.end;
+		commit();
+	}
+	function clear() {
+		startSegments.clear();
+		endSegments.clear();
+		start.value = null;
+		end.value = null;
+		commit();
+		firstSegmentOf(startGroup.value)?.focus();
+	}
+	/** 点外壳空白处：开始没填全时去开始那组，否则去结束那组 */
+	const firstEmpty = () => start.value == null ? firstSegmentOf(startGroup.value) : firstSegmentOf(endGroup.value);
+	/** 快捷区间夹到 min–max 之内：今天之后不能选时，“本月”就是本月 1 日到今天 */
+	function presetValue(preset) {
+		const range = typeof preset === "string" ? presetIsoRange(preset, locale.week, locale.timeZone) : isoRangeOf(preset.value);
+		const clamp = (iso) => toIsoDate(clampDate(parseIsoDate(iso), limits.value));
+		return {
+			start: clamp(range.start),
+			end: clamp(range.end)
+		};
+	}
+	function pickPreset(preset) {
+		const range = fromDays(presetValue(preset));
+		start.value = range.start;
+		end.value = range.end;
+		commit();
+		setOpen(false, "select");
+	}
+	return () => {
+		const state = control();
+		const base = state.id ?? generatedId;
+		const ids = {
+			start: `${base}-start-label`,
+			end: `${base}-end-label`
+		};
+		const reversed = start.value != null && end.value != null && end.value < start.value;
+		const bad = state.invalid || reversed || outOfRange(start.value) || outOfRange(end.value);
+		const filled = start.value != null || end.value != null || startSegments.partial || endSegments.partial;
+		const labelledBy = (own) => [state.labelledBy, own].filter(Boolean).join(" ");
+		const group = (side) => {
+			const isStart = side === "start";
+			return createVNode(DateSegmentGroup, mergePartProps({
+				sx: isStart ? void 0 : segmentedFieldStyles.input,
+				segments: isStart ? startSegments : endSegments,
+				labelledBy: labelledBy(ids[side]),
+				describedBy: state.describedBy
+			}, isStart ? propsStart.value : propsEnd.value, {
+				ref: (element) => {
+					const found = toElement(element);
+					if (isStart) startGroup.value = found;
+					else endGroup.value = found;
+				},
+				id: isStart ? base : `${base}-end`,
+				segments: isStart ? startSegments : endSegments,
+				disabled: state.disabled,
+				readonly: state.readonly,
+				required: state.required,
+				invalid: bad,
+				onKeydown: picker.onKeydown
+			}), null);
+		};
+		const s = controlParts(appearance(), {
+			...state,
+			invalid: bad
+		});
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy)
+		}, rest, {
+			ref: picker.anchorRef,
+			role: "group",
+			"aria-disabled": state.disabled || void 0,
+			onPointerdown: state.disabled ? void 0 : focusOnShell(firstEmpty)
+		}), {
+			"data-invalid": bad || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			createVNode(VisuallyHidden, {
+				"id": ids.start,
+				"key": "__site0"
+			}, {
+				default: () => [lang.dateRangeStart],
+				$stable: true
+			}),
+			createVNode(VisuallyHidden, {
+				"id": ids.end,
+				"key": "__site1"
+			}, {
+				default: () => [lang.dateRangeEnd],
+				$stable: true
+			}),
+			group("start"),
+			createVNode("span", mergeProps(mergeAttrs({ sx: dateRangePickerStyles.separator }, propsSeparator.value), { "aria-hidden": "true" }), [createTextVNode("–")]),
+			group("end"),
+			clearable.value && filled && editable() && controlClear(s, propsClear.value, clear),
+			picker.button(CalendarRange, propsButton.value),
+			createVNode(FormValue, {
+				"name": startName.value,
+				"value": start.value,
+				"disabled": state.disabled
+			}, null),
+			createVNode(FormValue, {
+				"name": endName.value,
+				"value": end.value,
+				"disabled": state.disabled
+			}, null)
+		]), picker.panel(dateRangePickerStyles.popover, propsPopover.value, open.value && [renderPickerPresets((presets.value ?? []).map((preset) => {
+			const range = presetValue(preset);
+			return {
+				key: typeof preset === "string" ? preset : preset.label,
+				label: typeof preset === "string" ? lang.dateRangePreset[preset] : preset.label,
+				active: (() => {
+					const shown = fromDays(range);
+					return shown.start === start.value && shown.end === end.value;
+				})(),
+				onPick: () => pickPreset(preset)
+			};
+		}), lang.dateRangePresets, propsPresets.value), granularity.value === "quarter" ? createVNode(QuarterCalendar, {
+			"mode": "range",
+			"_value": start.value != null && end.value != null ? {
+				start: start.value,
+				end: end.value
+			} : null,
+			"onUpdate:_value": pickQuarters,
+			"min": min.value,
+			"max": max.value,
+			"aria-label": lang.datePickerOpen,
+			"onPick": _cache[0] || (_cache[0] = () => setOpen(false, "select"))
+		}, null) : createVNode(RangeCalendar, mergeProps(propsCalendar.value, {
+			"onUpdate:_value": pickRange,
+			"_value": calendarRange(),
+			"granularity": dateUnitOf(granularity.value),
+			"min": min.value,
+			"max": max.value,
+			"isDateUnavailable": isDateUnavailable.value,
+			"visibleMonths": visibleMonths.value,
+			"allowsUnavailableInRange": allowsUnavailableInRange.value
+		}, granularity.value === "week" && {
+			firstDayOfWeek: 1,
+			showWeekNumbers: true
+		}, { "onPick": _cache[1] || (_cache[1] = () => {
+			setOpen(false, "select");
+			if (isTimeGranularity(granularity.value)) startGroup.value?.querySelector("[data-type=\"hour\"]")?.focus();
+		}) }), null)])]);
+	};
+}, {
+	name: "DateRangePicker",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"valueType",
+		"granularity",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"presets",
+		"visibleMonths",
+		"allowsUnavailableInRange",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"clearable",
+		"startName",
+		"endName",
+		"placement",
+		"id",
+		"propsStart",
+		"propsEnd",
+		"propsSeparator",
+		"propsClear",
+		"icon",
+		"propsIcon",
+		"propsButton",
+		"propsPopover",
+		"propsPresets",
+		"propsCalendar"
+	]
+});
+//#endregion
+export { DateRangePicker, dateRangePickerStyles };
+
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/date/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_vue_shallowRef","_vue_ref","_createVNode","_Fragment","_mergeProps","_createTextVNode"],"sources":["../../src/date/DateRangePicker.tsx"],"sourcesContent":["/**\n * 日期区间选择器：一个输入框里两组分段（开始 – 结束），按钮弹出区间日历，旁边可以放快捷区间（最近 7 天、本月……）。\n * 参考 React Aria DateRangePicker（同一个外壳里两组 DateInput）、Ant Design RangePicker 的 presets。\n *\n *   <Field label=\"统计区间\"><DateRangePicker _value={range} max={today} presets={['last7Days', 'thisMonth']} /></Field>\n *   <DateRangePicker granularity=\"month\" _value={months} aria-label=\"预算期间\" />      // { start: '2026-01', end: '2026-06' }\n *   <DateRangePicker granularity=\"minute\" _value={window} aria-label=\"维护窗口\" />   // '2026-10-24T22:00' – '2026-10-25T06:00'\n *\n * 值是 `{ start, end }`（两端都含；ISO 字符串或 DateValue，写回时保持同一种类型），两端都填好才写回，删掉一段写回 null。\n * granularity 同 DateField：month、year 按月、按年（日历选整月、整年），quarter 弹出季度面板选一段季度，\n * week 按 ISO 周（日历周一开始、行首是周数），hour / minute / second 是日期时间区间\n * （日历里选日期，开始补 00:00、结束补 23:59，已经填了的时间不变）。\n * 结束早于开始、超出范围、是不可选的日期时外壳显示出错，值照样写回，由表单校验决定能不能提交。\n * 开始那组刚填全时焦点自动进结束那组；日历里点开始、再点结束后关闭，焦点回到按钮。Esc、点外部关闭，分段里 Alt + ↓ 打开。\n *\n * 部件：Root（外壳，role=\"group\"，主元素）、Start / End（两组分段）、Separator、Clear、Button、Popover、Presets、Calendar。\n */\nimport { CalendarRange } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport {\n  controlClear,\n  controlParts,\n  focusOnShell,\n  controlIcon,\n  useControlAppearance,\n  type ControlIconOptions,\n  type ControlOptions,\n} from '../input/control';\nimport {\n  clampDate,\n  fullIsoDay,\n  lastIsoDay,\n  parseIsoDate,\n  presetIsoRange,\n  toIsoDate,\n  toIsoQuarter,\n  toIsoWeek,\n  type DateRange,\n  type DateRangePreset,\n} from '../utils/data/date';\nimport { toElement } from '../utils/dom/element';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { defaultLabelledBy, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  toDateLimits,\n  useDateLocale,\n  type DateInput,\n  type DateLimitProps,\n  type DateValueTypes,\n} from './date-locale';\nimport { segmentFields, type DateFieldGranularity } from './date-segments';\nimport {\n  dateUnitOf,\n  isoToValue,\n  isPeriodDisabled,\n  isTimeGranularity,\n  valueToIso,\n} from './DateField';\nimport { DateSegmentGroup, type DateSegmentGroupProps } from './DateSegmentGroup';\nimport {\n  focusCalendar,\n  renderPickerPresets,\n  usePickerPopover,\n  type PickerPopoverParts,\n} from './picker-popover';\nimport { QuarterCalendar } from './QuarterCalendar';\nimport { RangeCalendar, type RangeCalendarProps } from './RangeCalendar';\nimport { firstSegmentOf, segmentedFieldStyles, useFieldSegments } from './SegmentedField';\n\n/** 自定义的快捷区间（财年、上个结算周期） */\nexport interface DateRangeCustomPreset<V extends DateInput = string> {\n  /** 按钮上的文字 */\n  label: string;\n  /** 区间；函数时每次打开按当时算（跟着今天变） */\n  value: DateRange<V> | (() => DateRange<V>);\n}\n\n/** 未声明的属性落到外壳（role=\"group\"）上 */\nexport interface DateRangePickerProps<V extends DateInput = string>\n  extends\n    PartProps<'div', 'role'>,\n    ControlOptions,\n    ControlIconOptions,\n    DateLimitProps,\n    PickerPopoverParts,\n    OpenChangeProps {\n  /** 区间（两端都含）：父级写 _value={x}；没填全时 null */\n  _value?: DateRange<V> | null;\n  /** 弹层是否打开：父级可写 _open={x} */\n  _open?: boolean;\n  /** 值为空、推不出类型时写回哪一种，默认 iso（字符串） */\n  valueType?: keyof DateValueTypes;\n  /** 精确到哪一段（同 DateField），默认 day；month、year 按月、按年，hour / minute / second 是日期时间区间 */\n  granularity?: DateFieldGranularity;\n  /**\n   * 快捷区间，显示在日历旁边、夹到 min–max 之内：内置的名字（按今天与语言的一周第一天算），\n   * 或自己的 `{ label, value }`（value 可以是函数，每次打开时按当时算）\n   */\n  presets?: readonly (DateRangePreset | DateRangeCustomPreset<V>)[];\n  /** 日历并排显示几个月，默认 2 */\n  visibleMonths?: number;\n  /** 区间里允许夹着不可选的日期，默认 false */\n  allowsUnavailableInRange?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过；不写时结束早于开始、超出范围、是不可选的日期也算 */\n  invalid?: boolean;\n  /** 有值时显示清空按钮 */\n  clearable?: boolean;\n  /** 表单提交时开始日期的 name（ISO 字符串） */\n  startName?: string;\n  /** 表单提交时结束日期的 name */\n  endName?: string;\n  /** 开始那组分段的部件属性 */\n  propsStart?: Partial<DateSegmentGroupProps>;\n  /** 结束那组分段的部件属性 */\n  propsEnd?: Partial<DateSegmentGroupProps>;\n  /** 两组之间的分隔符的部件属性 */\n  propsSeparator?: PartProps<'span', 'aria-hidden'>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Omit<Partial<PresetIconButtonProps>, 'onClick'>;\n  /** 快捷区间那一列的部件属性 */\n  propsPresets?: PartProps<'div', 'role'>;\n  /** 区间日历的部件属性（值、范围由选择器给出） */\n  propsCalendar?: Omit<\n    Partial<RangeCalendarProps<V>>,\n    'value' | 'min' | 'max' | 'isDateUnavailable' | 'valueType' | 'onPick'\n  >;\n}\n\n/** DateRangePicker 的样式：separator、popover（快捷区间的样式见 pickerPresetStyles） */\nexport const dateRangePickerStyles = css.create({\n  separator: { flexShrink: 0, paddingInline: '_xs', color: '_textMuted' },\n  popover: { display: 'flex', alignItems: 'flex-start', gap: '_sm', padding: '_sm' },\n});\n\n/** 自定义快捷区间的值 → ISO 日期区间（DateValue 取年月日） */\nfunction isoRangeOf<V extends DateInput>(\n  value: DateRange<V> | (() => DateRange<V>),\n): DateRange<string> {\n  const range = typeof value === 'function' ? value() : value;\n  const iso = (input: DateInput) =>\n    typeof input === 'string' ? input.slice(0, 10) : toIsoDate(input);\n  return { start: iso(range.start), end: iso(range.end) };\n}\n\n/** 日期区间选择器：两组分段 + 弹出的区间日历与快捷区间 */\nexport const DateRangePicker = _component(\n  <V extends DateInput>({\n    _value: value = _bindable<DateRange<V> | null>(null),\n    _open: open = _bindable(false),\n    onOpenChange,\n    valueType,\n    granularity = 'day',\n    min,\n    max,\n    isDateUnavailable,\n    presets,\n    visibleMonths = 2,\n    allowsUnavailableInRange = false,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    clearable = false,\n    startName,\n    endName,\n    placement,\n    id,\n    propsStart,\n    propsEnd,\n    propsSeparator,\n    propsClear,\n    icon,\n    propsIcon,\n    propsButton,\n    propsPopover,\n    propsPresets,\n    propsCalendar,\n    ...rest\n  }: DateRangePickerProps<V>) => {\n    const lang = useLang();\n    const locale = useDateLocale();\n    const generatedId = useId();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const editable = () => !control().disabled && !control().readonly;\n    const limits = _derived(toDateLimits(locale, { min, max, isDateUnavailable }));\n    let startGroup = _state.raw<HTMLElement | null>(null);\n    let endGroup = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n\n    const picker = usePickerPopover(\n      () => ({\n        open,\n        placement,\n        editable: editable(),\n        label: lang.datePickerOpen,\n        size: appearance().size,\n      }),\n      { toggle: setOpen, shown: focusCalendar },\n    );\n\n    // 两端各自的 ISO 字符串（按 granularity 的形式）：只填了一端时值仍是 null，这里记着填了的那一端\n    const toIso = (date: DateInput) => valueToIso(date, granularity);\n    let start = _state<string | null>(null);\n    let end = _state<string | null>(null);\n    // 自己写回的值不再同步回两端（否则删掉一端时，写回的 null 会把另一端也清掉）\n    let written: DateRange<V> | null | undefined;\n    // 值清空后再填：仍按清空前的类型写回\n    let lastLike: V | undefined;\n    watch(\n      () => value,\n      (next) => {\n        if (next === written) return;\n        start = next ? toIso(next.start) : null;\n        end = next ? toIso(next.end) : null;\n      },\n      { immediate: true },\n    );\n\n    function commit() {\n      lastLike = value?.start ?? lastLike;\n      const like = (iso: string) => isoToValue(iso, lastLike, granularity, valueType) as V;\n      written = start && end ? { start: like(start), end: like(end) } : null;\n      if (written !== null || value !== null) value = written;\n    }\n\n    const startSegments = useFieldSegments(\n      () => ({ fields: segmentFields(granularity), value: start, readonly: !editable() }),\n      (iso) => {\n        start = iso;\n        commit();\n      },\n      // 开始那组最后一段输入满了：焦点进结束那组\n      (direction) => direction === 1 && firstSegmentOf(endGroup)?.focus(),\n    );\n    const endSegments = useFieldSegments(\n      () => ({ fields: segmentFields(granularity), value: end, readonly: !editable() }),\n      (iso) => {\n        end = iso;\n        commit();\n      },\n      // 结束那组第一段删空后再删：回到开始那组的最后一段\n      (direction) => {\n        if (direction !== -1) return;\n        const segments = startGroup?.querySelectorAll<HTMLElement>('[role=\"spinbutton\"]');\n        segments?.[segments.length - 1]?.focus();\n      },\n    );\n\n    const outOfRange = (iso: string | null) =>\n      iso != null && isPeriodDisabled(iso, granularity, limits, locale);\n\n    /** 整天的区间 → 按 granularity 的形式：月、年截短；带时间时开始补 00:00、结束补 23:59（已经填了的时间不变） */\n    function fromDays(range: DateRange<string>): DateRange<string> {\n      if (granularity === 'year')\n        return { start: range.start.slice(0, 4), end: range.end.slice(0, 4) };\n      if (granularity === 'month')\n        return { start: range.start.slice(0, 7), end: range.end.slice(0, 7) };\n      if (granularity === 'quarter' || granularity === 'week') {\n        const period = granularity === 'quarter' ? toIsoQuarter : toIsoWeek;\n        return {\n          start: period(parseIsoDate(range.start)!),\n          end: period(parseIsoDate(range.end)!),\n        };\n      }\n      if (!isTimeGranularity(granularity)) return range;\n      const timeOf = (iso: string | null, fallback: string) =>\n        iso != null && iso.length > 10 ? iso.slice(10) : fallback;\n      const endTime = { hour: 'T23:00', minute: 'T23:59', second: 'T23:59:59' }[granularity];\n      return {\n        start: range.start + timeOf(start, granularity === 'second' ? 'T00:00:00' : 'T00:00'),\n        end: range.end + timeOf(end, endTime),\n      };\n    }\n\n    // 区间日历用整天的 ISO 日期：按月、按年、按周时是整段（开始那段的第一天到结束那段的最后一天）\n    const calendarRange = (): DateRange<string> | null =>\n      start == null || end == null ? null : { start: fullIsoDay(start), end: lastIsoDay(end) };\n\n    /** 季度面板选好了区间（'YYYY-Qn'） */\n    function pickQuarters(range: DateRange<string> | null) {\n      if (range == null) return;\n      start = range.start;\n      end = range.end;\n      commit();\n    }\n\n    /** 日历选好了区间：换回 granularity 的形式；带时间时焦点去开始的“时”接着输入 */\n    function pickRange(range: DateRange<string> | null) {\n      if (range == null) return;\n      const next = fromDays(range);\n      start = next.start;\n      end = next.end;\n      commit();\n    }\n\n    function clear() {\n      startSegments.clear();\n      endSegments.clear();\n      start = null;\n      end = null;\n      commit();\n      firstSegmentOf(startGroup)?.focus();\n    }\n\n    /** 点外壳空白处：开始没填全时去开始那组，否则去结束那组 */\n    const firstEmpty = () =>\n      start == null ? firstSegmentOf(startGroup) : firstSegmentOf(endGroup);\n\n    /** 快捷区间夹到 min–max 之内：今天之后不能选时，“本月”就是本月 1 日到今天 */\n    function presetValue(preset: DateRangePreset | DateRangeCustomPreset<V>): DateRange<string> {\n      const range =\n        typeof preset === 'string'\n          ? presetIsoRange(preset, locale.week, locale.timeZone)\n          : isoRangeOf(preset.value);\n      const clamp = (iso: string) => toIsoDate(clampDate(parseIsoDate(iso)!, limits));\n      return { start: clamp(range.start), end: clamp(range.end) };\n    }\n\n    function pickPreset(preset: DateRangePreset | DateRangeCustomPreset<V>) {\n      const range = fromDays(presetValue(preset));\n      start = range.start;\n      end = range.end;\n      commit();\n      setOpen(false, 'select');\n    }\n\n    return () => {\n      const state = control();\n      const base = state.id ?? generatedId;\n      const ids = { start: `${base}-start-label`, end: `${base}-end-label` };\n      const reversed = start != null && end != null && end < start;\n      const bad = state.invalid || reversed || outOfRange(start) || outOfRange(end);\n      const filled = start != null || end != null || startSegments.partial || endSegments.partial;\n      // 两组的名称：字段的标签 + “开始日期” / “结束日期”\n      const labelledBy = (own: string) => [state.labelledBy, own].filter(Boolean).join(' ');\n      const group = (side: 'start' | 'end') => {\n        const isStart = side === 'start';\n        return (\n          <DateSegmentGroup\n            {...mergePartProps<DateSegmentGroupProps>(\n              {\n                // 开始那组按内容宽，结束那组占满剩下的宽度：读起来是“开始 – 结束”，空白在最后\n                sx: isStart ? undefined : segmentedFieldStyles.input,\n                segments: isStart ? startSegments : endSegments,\n                labelledBy: labelledBy(ids[side]),\n                describedBy: state.describedBy,\n              },\n              isStart ? propsStart : propsEnd,\n              {\n                ref: (element: unknown) => {\n                  const found = toElement(element);\n                  if (isStart) startGroup = found;\n                  else endGroup = found;\n                },\n                id: isStart ? base : `${base}-end`,\n                segments: isStart ? startSegments : endSegments,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                invalid: bad,\n                onKeydown: picker.onKeydown,\n              },\n            )}\n          />\n        );\n      };\n      const s = controlParts(appearance(), { ...state, invalid: bad });\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                ...s.root,\n                'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n              },\n              rest,\n              {\n                ref: picker.anchorRef,\n                role: 'group',\n                'aria-disabled': state.disabled || undefined,\n                onPointerdown: state.disabled ? undefined : focusOnShell(firstEmpty),\n              },\n            )}\n            data-invalid={bad || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {controlIcon(s, icon, propsIcon)}\n            <VisuallyHidden id={ids.start}>{lang.dateRangeStart}</VisuallyHidden>\n            <VisuallyHidden id={ids.end}>{lang.dateRangeEnd}</VisuallyHidden>\n            {group('start')}\n            <span\n              {...mergeAttrs<'span'>({ sx: dateRangePickerStyles.separator }, propsSeparator)}\n              aria-hidden=\"true\"\n            >\n              –\n            </span>\n            {group('end')}\n            {clearable && filled && editable() && controlClear(s, propsClear, clear)}\n            {picker.button(CalendarRange, propsButton)}\n            <FormValue name={startName} value={start} disabled={state.disabled} />\n            <FormValue name={endName} value={end} disabled={state.disabled} />\n          </div>\n          {picker.panel(\n            dateRangePickerStyles.popover,\n            propsPopover,\n            open && [\n              renderPickerPresets(\n                (presets ?? []).map((preset) => {\n                  const range = presetValue(preset);\n                  return {\n                    key: typeof preset === 'string' ? preset : preset.label,\n                    label: typeof preset === 'string' ? lang.dateRangePreset[preset] : preset.label,\n                    active: (() => {\n                      const shown = fromDays(range);\n                      return shown.start === start && shown.end === end;\n                    })(),\n                    onPick: () => pickPreset(preset),\n                  };\n                }),\n                lang.dateRangePresets,\n                propsPresets,\n              ),\n              granularity === 'quarter' ? (\n                <QuarterCalendar\n                  mode=\"range\"\n                  _value={start != null && end != null ? { start, end } : null}\n                  onUpdate:_value={pickQuarters}\n                  min={min}\n                  max={max}\n                  aria-label={lang.datePickerOpen}\n                  onPick={() => setOpen(false, 'select')}\n                />\n              ) : (\n                <RangeCalendar\n                  {...propsCalendar}\n                  onUpdate:_value={pickRange}\n                  _value={calendarRange()}\n                  granularity={dateUnitOf(granularity)}\n                  min={min}\n                  max={max}\n                  isDateUnavailable={isDateUnavailable}\n                  visibleMonths={visibleMonths}\n                  allowsUnavailableInRange={allowsUnavailableInRange}\n                  // 按周：按 ISO 8601 的周排（周一开始），行首是第几周\n                  {...(granularity === 'week' && { firstDayOfWeek: 1, showWeekNumbers: true })}\n                  onPick={() => {\n                    setOpen(false, 'select');\n                    // 带时间时接着输入时间：焦点去开始那组的“时”\n                    if (isTimeGranularity(granularity))\n                      startGroup?.querySelector<HTMLElement>('[data-type=\"hour\"]')?.focus();\n                  }}\n                />\n              ),\n            ],\n          )}\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/DateSegmentGroup.d.ts

@@ -0,0 +1,38 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type DateSegment, type DateSegmentsState } from './date-segments';
+/** 角色与状态由组件管理 */
+export type DateSegmentGroupManaged = 'role';
+/** 每段由组件管理的属性 */
+export type DateSegmentManaged = 'role' | 'id' | 'aria-label' | 'aria-labelledby' | 'tabindex' | 'contenteditable' | 'inputmode' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuetext' | 'aria-required' | 'aria-invalid' | 'aria-readonly' | 'aria-disabled';
+/** 未声明的属性落到这一组（role="group"）上 */
+export interface DateSegmentGroupProps extends PartProps<'div', DateSegmentGroupManaged> {
+    /** 分段状态（useDateSegments） */
+    segments: DateSegmentsState;
+    /** 不可用：段不能聚焦 */
+    disabled?: boolean;
+    /** 只读：能聚焦、不能改 */
+    readonly?: boolean;
+    /** 必填（每段 aria-required） */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 外部标签的 id：每段的读屏名称是“标签 + 段名” */
+    labelledBy?: string;
+    /** 说明与错误的 id（aria-describedby），给每一段 */
+    describedBy?: string;
+    /** 每段的部件属性：固定的对象，或按这一段返回 */
+    propsSegment?: PartProps<'span', DateSegmentManaged> | ((segment: DateSegment) => PartProps<'span', DateSegmentManaged>);
+    /** 分隔符的部件属性 */
+    propsLiteral?: PartProps<'span', 'aria-hidden'>;
+}
+/** DateSegmentGroup 的样式：root、segment、placeholder、literal */
+export declare const dateSegmentStyles: Readonly<{
+    disabled: css.CompiledStyles;
+    literal: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    root: css.CompiledStyles;
+    segment: css.CompiledStyles;
+}>;
+/** 一组日期分段 */
+export declare const DateSegmentGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DateSegmentGroupProps>;