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

package/dist/date/DateField.d.ts

@@ -0,0 +1,34 @@
+import { type Time } from '@internationalized/date';
+import { type DateLimits, type DateUnit } from '../utils/data/date';
+import { type DateInput, type DateLocale, type DateLimitProps, type DateValueTypes } from './date-locale';
+import { type DateFieldGranularity } from './date-segments';
+import { type SegmentedFieldOptions } from './SegmentedField';
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+export interface DateFieldProps<V extends DateInput = string> extends SegmentedFieldOptions, DateLimitProps {
+    /** 值：ISO 字符串（形式随 granularity）或 DateValue，写回时保持同一种类型；父级写 _value={x}；没填全时 null */
+    _value?: V | null;
+    /** 精确到哪一段，默认 day；到 hour / minute / second 时是日期加时间 */
+    granularity?: DateFieldGranularity;
+    /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；dateValue 写 CalendarDate（带时间时 CalendarDateTime） */
+    valueType?: keyof DateValueTypes;
+    /**
+     * 带时间时不可选的时刻（午休、非营业时间）：键入时显示出错。参数是 'HH:mm'、同一时刻的 Time 与那一天的 ISO 日期，
+     * 周末与平日可以不一样：`(_, time, date) => time.hour < 9 || time.hour >= (isWeekend(…) ? 12 : 18)`
+     */
+    isTimeUnavailable?: (time: string, value: Time, date: string) => boolean;
+}
+/** 粒度 → 日历的粒度：年、月照搬，到日及以下都按日（选日期、比较范围） */
+export declare const dateUnitOf: (granularity: DateFieldGranularity) => DateUnit;
+/** 精确到时、分、秒：值是日期加时间 */
+export declare const isTimeGranularity: (granularity: DateFieldGranularity) => granularity is "hour" | "minute" | "second";
+/**
+ * 这一段（年、季度、月、周、日，按值的形式）能不能选：整段都在 min–max 之外，或（按日选时）是不可选的日期。
+ * DateField、DatePicker 的快捷选项与“今天”、DateRangePicker 的两端共用
+ */
+export declare function isPeriodDisabled(iso: string, granularity: DateFieldGranularity, limits: DateLimits, locale: DateLocale): boolean;
+/** 值 → 分段输入用的 ISO 字符串（形式随 granularity） */
+export declare function valueToIso(value: DateInput, granularity: DateFieldGranularity): string;
+/** 分段输入填好的 ISO 字符串 → 和 like 同一种类型的值 */
+export declare function isoToValue(iso: string, like: DateInput | undefined, granularity: DateFieldGranularity, valueType?: keyof DateValueTypes): DateInput;
+/** 日期输入框：分段输入 */
+export declare const DateField: <V extends DateInput>(props: DateFieldProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/date/DateField.js

@@ -0,0 +1,124 @@
+import { compareDates, fullIsoDay, lastIsoDay, parseIsoDate, parseIsoDateTime, parseIsoTime, toIsoDate, toIsoDateTime, toIsoQuarter, toIsoTime, toIsoWeek } from "../utils/data/date.js";
+import { toDateLimits, useDateLocale } from "./date-locale.js";
+import { segmentFields } from "./date-segments.js";
+import { SegmentedField } from "./SegmentedField.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { toCalendar, toCalendarDateTime } from "@internationalized/date";
+//#region src/date/DateField.tsx
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+/** 粒度 → 日历的粒度：年、月照搬，到日及以下都按日（选日期、比较范围） */
+var dateUnitOf = (granularity) => granularity === "year" || granularity === "month" ? granularity : "day";
+/** 精确到时、分、秒：值是日期加时间 */
+var isTimeGranularity = (granularity) => granularity === "hour" || granularity === "minute" || granularity === "second";
+/** ISO 日期时间统一到秒（'2026-10-20T14:30' → '2026-10-20T14:30:00'），去掉时区后缀：按字符串比较就是按时间先后 */
+var toSeconds = (iso) => iso.length >= 19 ? iso.slice(0, 19) : `${iso.slice(0, 16)}:00`;
+/**
+* 带时间的 min / max → 比较用的 ISO 日期时间；只给了日期（或不带时间的 granularity）时为 null，
+* 那一整天都可选，只按日期比较
+*/
+function timeBound(limit, granularity) {
+	if (limit == null || !isTimeGranularity(granularity)) return null;
+	if (typeof limit === "string") return limit.includes("T") ? toSeconds(limit) : null;
+	return "hour" in limit ? toSeconds(valueToIso(limit, granularity)) : null;
+}
+/**
+* 这一段（年、季度、月、周、日，按值的形式）能不能选：整段都在 min–max 之外，或（按日选时）是不可选的日期。
+* DateField、DatePicker 的快捷选项与“今天”、DateRangePicker 的两端共用
+*/
+function isPeriodDisabled(iso, granularity, limits, locale) {
+	const start = locale.fromValue(fullIsoDay(iso));
+	const end = locale.fromValue(lastIsoDay(iso));
+	if (start == null || end == null) return false;
+	if (limits.max != null && compareDates(start, limits.max) > 0) return true;
+	if (limits.min != null && compareDates(end, limits.min) < 0) return true;
+	return (granularity === "day" || isTimeGranularity(granularity)) && (limits.isUnavailable?.(start) ?? false);
+}
+/** 值 → 分段输入用的 ISO 字符串（形式随 granularity） */
+function valueToIso(value, granularity) {
+	if (typeof value === "string") return value;
+	if (isTimeGranularity(granularity)) return toIsoDateTime(toCalendarDateTime(value), granularity === "second");
+	if (granularity === "quarter") return toIsoQuarter(value);
+	if (granularity === "week") return toIsoWeek(value);
+	const day = toIsoDate(value);
+	return granularity === "year" ? day.slice(0, 4) : granularity === "month" ? day.slice(0, 7) : day;
+}
+/** 分段输入填好的 ISO 字符串 → 和 like 同一种类型的值 */
+function isoToValue(iso, like, granularity, valueType = "iso") {
+	if (typeof like === "string" || like == null && valueType === "iso") return iso;
+	const parsed = isTimeGranularity(granularity) ? parseIsoDateTime(iso) : parseIsoDate(fullIsoDay(iso));
+	if (like == null) return parsed;
+	const converted = toCalendar(parsed, like.calendar);
+	if (!("hour" in like)) return converted;
+	const { era, year, month, day } = converted;
+	if (!("hour" in converted)) return like.set({
+		era,
+		year,
+		month,
+		day
+	});
+	const { hour, minute, second } = converted;
+	return like.set({
+		era,
+		year,
+		month,
+		day,
+		hour,
+		minute,
+		second
+	});
+}
+/** 日期输入框：分段输入 */
+var DateField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const granularity = readonlyProp(_props, "granularity", "day");
+	const valueType = readonlyProp(_props, "valueType");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const isTimeUnavailable = readonlyProp(_props, "isTimeUnavailable");
+	const rest = restProps(_props, _ctx, true);
+	const locale = useDateLocale();
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value,
+		isDateUnavailable: isDateUnavailable.value
+	}));
+	const outOfRange = (iso) => {
+		if (isPeriodDisabled(iso, granularity.value, limits.value, locale)) return true;
+		const low = timeBound(min.value, granularity.value);
+		const high = timeBound(max.value, granularity.value);
+		const at = isTimeGranularity(granularity.value) ? toSeconds(iso) : "";
+		if (low != null && at < low || high != null && at > high) return true;
+		const time = isTimeGranularity(granularity.value) ? parseIsoTime(iso.slice(11)) : null;
+		return time != null && (isTimeUnavailable.value?.(toIsoTime(time), time, iso.slice(0, 10)) ?? false);
+	};
+	const iso = computed(() => value.value == null ? null : valueToIso(value.value, granularity.value));
+	let lastLike;
+	function write(next) {
+		lastLike = value.value ?? lastLike;
+		value.value = next == null ? null : isoToValue(next, lastLike, granularity.value, valueType.value);
+	}
+	return () => createVNode(SegmentedField, mergeProps(rest, {
+		"onUpdate:_value": write,
+		"_value": iso.value,
+		"fields": segmentFields(granularity.value),
+		"outOfRange": outOfRange
+	}), null);
+}, {
+	name: "DateField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"granularity",
+		"valueType",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"isTimeUnavailable"
+	]
+});
+//#endregion
+export { DateField, dateUnitOf, isPeriodDisabled, isTimeGranularity, isoToValue, valueToIso };
+
+//# sourceMappingURL=DateField.js.map

package/dist/date/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/date/DateField.tsx"],"sourcesContent":["/**\n * 日期输入框：分段输入年、月、日（不带弹层），段的顺序按语言（zh-CN 年/月/日，en-US 月/日/年）。\n * 参考 React Aria DateField、原生 input type=\"date\"。要弹出日历用 DatePicker。\n *\n *   <Field label=\"生日\"><DateField _value={birthday} max={today} /></Field>\n *   <DateField granularity=\"minute\" _value={at} aria-label=\"开始时间\" />   // '2026-10-20T14:30'\n *   <DateField granularity=\"month\" _value={month} aria-label=\"账期\" />     // '2026-10'\n *\n * 值是 ISO 字符串，形式随 granularity：year 'YYYY'、month 'YYYY-MM'、day 'YYYY-MM-DD'，\n * hour / minute / second 是日期加时间 'YYYY-MM-DDTHH:mm[:ss]'（同原生 datetime-local）；\n * 也可以是 DateValue，写回时保持同一种类型（ZonedDateTime 的时区、CalendarDateTime 没显示的时间不丢）。\n * 值在 min–max 之外、是不可选的日期或时刻（isTimeUnavailable）时显示出错（aria-invalid），值照样写回，由表单校验决定能不能提交。\n *\n * 键盘：数字逐段输入（满了自动跳段），↑↓ 加减，Page Up / Down 大步，Home / End 最小 / 最大，\n * Backspace 删一位（删空回到上一段），←→ 与 Tab 换段。部件见 SegmentedField。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  toCalendar,\n  toCalendarDateTime,\n  type CalendarDate,\n  type CalendarDateTime,\n  type Time,\n} from '@internationalized/date';\nimport {\n  compareDates,\n  fullIsoDay,\n  lastIsoDay,\n  parseIsoDate,\n  parseIsoDateTime,\n  parseIsoTime,\n  toIsoDate,\n  toIsoDateTime,\n  toIsoQuarter,\n  toIsoTime,\n  toIsoWeek,\n  type DateLimits,\n  type DateUnit,\n} from '../utils/data/date';\nimport {\n  toDateLimits,\n  useDateLocale,\n  type DateInput,\n  type DateLocale,\n  type DateLimitProps,\n  type DateValueTypes,\n} from './date-locale';\nimport { segmentFields, type DateFieldGranularity } from './date-segments';\nimport { SegmentedField, type SegmentedFieldOptions } from './SegmentedField';\n\n/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */\nexport interface DateFieldProps<V extends DateInput = string>\n  extends SegmentedFieldOptions, DateLimitProps {\n  /** 值：ISO 字符串（形式随 granularity）或 DateValue，写回时保持同一种类型；父级写 _value={x}；没填全时 null */\n  _value?: V | null;\n  /** 精确到哪一段，默认 day；到 hour / minute / second 时是日期加时间 */\n  granularity?: DateFieldGranularity;\n  /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；dateValue 写 CalendarDate（带时间时 CalendarDateTime） */\n  valueType?: keyof DateValueTypes;\n  /**\n   * 带时间时不可选的时刻（午休、非营业时间）：键入时显示出错。参数是 'HH:mm'、同一时刻的 Time 与那一天的 ISO 日期，\n   * 周末与平日可以不一样：`(_, time, date) => time.hour < 9 || time.hour >= (isWeekend(…) ? 12 : 18)`\n   */\n  isTimeUnavailable?: (time: string, value: Time, date: string) => boolean;\n}\n\n/** 粒度 → 日历的粒度：年、月照搬，到日及以下都按日（选日期、比较范围） */\nexport const dateUnitOf = (granularity: DateFieldGranularity): DateUnit =>\n  granularity === 'year' || granularity === 'month' ? granularity : 'day';\n\n/** 精确到时、分、秒：值是日期加时间 */\nexport const isTimeGranularity = (granularity: DateFieldGranularity) =>\n  granularity === 'hour' || granularity === 'minute' || granularity === 'second';\n\n/** ISO 日期时间统一到秒（'2026-10-20T14:30' → '2026-10-20T14:30:00'），去掉时区后缀：按字符串比较就是按时间先后 */\nconst toSeconds = (iso: string) => (iso.length >= 19 ? iso.slice(0, 19) : `${iso.slice(0, 16)}:00`);\n\n/**\n * 带时间的 min / max → 比较用的 ISO 日期时间；只给了日期（或不带时间的 granularity）时为 null，\n * 那一整天都可选，只按日期比较\n */\nfunction timeBound(limit: DateInput | undefined, granularity: DateFieldGranularity) {\n  if (limit == null || !isTimeGranularity(granularity)) return null;\n  if (typeof limit === 'string') return limit.includes('T') ? toSeconds(limit) : null;\n  return 'hour' in limit ? toSeconds(valueToIso(limit, granularity)) : null;\n}\n\n/**\n * 这一段（年、季度、月、周、日，按值的形式）能不能选：整段都在 min–max 之外，或（按日选时）是不可选的日期。\n * DateField、DatePicker 的快捷选项与“今天”、DateRangePicker 的两端共用\n */\nexport function isPeriodDisabled(\n  iso: string,\n  granularity: DateFieldGranularity,\n  limits: DateLimits,\n  locale: DateLocale,\n): boolean {\n  const start = locale.fromValue(fullIsoDay(iso));\n  const end = locale.fromValue(lastIsoDay(iso));\n  if (start == null || end == null) return false;\n  if (limits.max != null && compareDates(start, limits.max) > 0) return true;\n  if (limits.min != null && compareDates(end, limits.min) < 0) return true;\n  const byDay = granularity === 'day' || isTimeGranularity(granularity);\n  return byDay && (limits.isUnavailable?.(start) ?? false);\n}\n\n/** 值 → 分段输入用的 ISO 字符串（形式随 granularity） */\nexport function valueToIso(value: DateInput, granularity: DateFieldGranularity): string {\n  if (typeof value === 'string') return value;\n  if (isTimeGranularity(granularity)) {\n    return toIsoDateTime(toCalendarDateTime(value), granularity === 'second');\n  }\n  if (granularity === 'quarter') return toIsoQuarter(value);\n  if (granularity === 'week') return toIsoWeek(value);\n  const day = toIsoDate(value);\n  return granularity === 'year' ? day.slice(0, 4) : granularity === 'month' ? day.slice(0, 7) : day;\n}\n\n/** 分段输入填好的 ISO 字符串 → 和 like 同一种类型的值 */\nexport function isoToValue(\n  iso: string,\n  like: DateInput | undefined,\n  granularity: DateFieldGranularity,\n  valueType: keyof DateValueTypes = 'iso',\n): DateInput {\n  if (typeof like === 'string' || (like == null && valueType === 'iso')) return iso;\n  const parsed: CalendarDate | CalendarDateTime = isTimeGranularity(granularity)\n    ? parseIsoDateTime(iso)!\n    : parseIsoDate(fullIsoDay(iso))!;\n  if (like == null) return parsed;\n  const converted = toCalendar(parsed, like.calendar);\n  if (!('hour' in like)) return converted;\n  const { era, year, month, day } = converted;\n  if (!('hour' in converted)) return like.set({ era, year, month, day });\n  const { hour, minute, second } = converted;\n  return like.set({ era, year, month, day, hour, minute, second });\n}\n\n/** 日期输入框：分段输入 */\nexport const DateField = _component(\n  <V extends DateInput>({\n    _value: value = _bindable<V | null>(null),\n    granularity = 'day',\n    valueType,\n    min,\n    max,\n    isDateUnavailable,\n    isTimeUnavailable,\n    ...rest\n  }: DateFieldProps<V>) => {\n    const locale = useDateLocale();\n    const limits = _derived(toDateLimits(locale, { min, max, isDateUnavailable }));\n    // 先按日期比较（含不可选的日期）；min / max 带时间时，同一天里再比时分秒\n    const outOfRange = (iso: string) => {\n      if (isPeriodDisabled(iso, granularity, limits, locale)) return true;\n      const low = timeBound(min, granularity);\n      const high = timeBound(max, granularity);\n      const at = isTimeGranularity(granularity) ? toSeconds(iso) : '';\n      if ((low != null && at < low) || (high != null && at > high)) return true;\n      const time = isTimeGranularity(granularity) ? parseIsoTime(iso.slice(11)) : null;\n      return (\n        time != null && (isTimeUnavailable?.(toIsoTime(time), time, iso.slice(0, 10)) ?? false)\n      );\n    };\n    const iso = _derived(value == null ? null : valueToIso(value, granularity));\n    // 值清空后再填：仍按清空前的类型写回\n    let lastLike: V | undefined;\n    function write(next: string | null) {\n      lastLike = value ?? lastLike;\n      value = next == null ? null : (isoToValue(next, lastLike, granularity, valueType) as V);\n    }\n    return () => (\n      <SegmentedField\n        {...rest}\n        onUpdate:_value={write}\n        _value={iso}\n        fields={segmentFields(granularity)}\n        outOfRange={outOfRange}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/date/DatePicker.d.ts

@@ -0,0 +1,41 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type ButtonProps } from '../base/Button';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type CalendarBaseProps } from './Calendar';
+import { type DateFieldProps } from './DateField';
+import { type DateInput } from './date-locale';
+import { type PickerPopoverParts } from './picker-popover';
+/** 自定义的快捷选项（一周前、上个月末） */
+export interface DatePreset<V extends DateInput = string> {
+    /** 按钮上的文字 */
+    label: string;
+    /** 值（按 granularity 的形式）；函数时每次打开按当时算（跟着今天变） */
+    value: V | (() => V);
+}
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+export interface DatePickerProps<V extends DateInput = string> extends DateFieldProps<V>, PickerPopoverParts, OpenChangeProps {
+    /** 弹层是否打开：父级可写 _open={x} */
+    _open?: boolean;
+    /** 日历并排显示几个月，默认 1 */
+    visibleMonths?: number;
+    /** 日历旁边的快捷选项：`[{ label: '一周前', value: () => shiftIsoDate(todayIso(), { weeks: -1 }) }]` */
+    presets?: readonly DatePreset<V>[];
+    /** 日历下方的“今天”（选月份时“本月”、选年份时“今年”），默认 true */
+    showToday?: boolean;
+    /** 快捷选项那一列的部件属性 */
+    propsPresets?: PartProps<'div', 'role'>;
+    /** “今天”按钮的部件属性 */
+    propsToday?: Partial<ButtonProps>;
+    /** 日历的部件属性（值、范围、粒度由选择器给出） */
+    propsCalendar?: Omit<Partial<CalendarBaseProps<V>>, 'granularity' | 'min' | 'max' | 'isDateUnavailable' | 'valueType' | 'onPick'>;
+}
+/** DatePicker 的样式：popover、main（日历与“今天”）、footer（快捷选项的样式见 pickerPresetStyles） */
+export declare const datePickerStyles: Readonly<{
+    footer: css.CompiledStyles;
+    inWeek: css.CompiledStyles;
+    main: css.CompiledStyles;
+    popover: css.CompiledStyles;
+}>;
+/** 日期选择器：分段输入 + 弹出的日历 */
+export declare const DatePicker: <V extends DateInput>(props: DatePickerProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/date/DatePicker.js

@@ -0,0 +1,272 @@
+import { useLang } from "../config/context.js";
+import { mergePartProps } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { fullIsoDay, parseIsoDate, toIsoDate, toIsoQuarter, toIsoWeek, todayIso } from "../utils/data/date.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { toDateLimits, useDateLocale } from "./date-locale.js";
+import { Calendar } from "./Calendar.js";
+import { DateField, dateUnitOf, isPeriodDisabled, isTimeGranularity, isoToValue, valueToIso } from "./DateField.js";
+import { QuarterCalendar } from "./QuarterCalendar.js";
+import { focusCalendar, renderPickerPresets, usePickerPopover } from "./picker-popover.js";
+import { Fragment, computed, createVNode, mergeProps } 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 { CalendarDays } from "@lucide/icons";
+import { toCalendarDateTime } from "@internationalized/date";
+//#region src/date/DatePicker.tsx
+/**
+* 日期选择器：DateField 加一个打开日历的按钮，日历弹在输入框下方；可以直接键入，也可以点选。
+* 参考 React Aria DatePicker（输入框可键入，按钮打开对话框里的 Calendar）、Mantine DatePickerInput。
+*
+*   <Field label="出发日期"><DatePicker _value={date} min={today} /></Field>
+*   <DatePicker granularity="month" _value={month} aria-label="账期" />     // 选月份：'2026-10'
+*   <DatePicker granularity="minute" _value={at} aria-label="开始时间" />  // 日期加时间：'2026-10-20T14:30'
+*
+*   <DatePicker granularity="quarter" _value={quarter} aria-label="考核季度" /> // 季度：'2026-Q4'；week 是 '2026-W43'
+*
+* granularity 决定值的形式（同 DateField）与弹出的选择：year、month 选年份、月份，quarter 弹出季度面板（QuarterCalendar），
+* week 选周（日历按 ISO 周排、行首是周数，点哪天都是选它那一周），其余选日期。
+* 日历下方有“今天”（按粒度是今年、本季度、本月、本周；超出范围时不可用），旁边可以放快捷选项（presets）。
+* 选好后关闭，焦点回到按钮；带时间时焦点落到“时”那一段接着输入（没有时间时先补 00:00）。
+* Esc、点外部关闭；分段里按 Alt + ↓ 打开（同原生 select）。
+*
+* 部件：同 DateField，另有 Button（打开按钮）、Popover（弹层，role="dialog"）、Presets、Calendar、Today（“今天”按钮）。
+*/
+/** 自定义的快捷选项（一周前、上个月末） */
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+/** DatePicker 的样式：popover、main（日历与“今天”）、footer（快捷选项的样式见 pickerPresetStyles） */
+var datePickerStyles = css.create({
+	popover: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_sm",
+		padding: "_sm"
+	},
+	main: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs"
+	},
+	inWeek: {
+		backgroundColor: {
+			default: "_accentSoft",
+			":hover": "_accentSoftHover"
+		},
+		color: "_accentText"
+	},
+	footer: {
+		display: "flex",
+		justifyContent: "center",
+		paddingBlockStart: "_xs",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted"
+	}
+});
+/** 日期选择器：分段输入 + 弹出的日历 */
+var DatePicker = /*#__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 granularity = readonlyProp(_props, "granularity", "day");
+	const valueType = readonlyProp(_props, "valueType");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const placement = readonlyProp(_props, "placement");
+	const visibleMonths = readonlyProp(_props, "visibleMonths", 1);
+	const presets = readonlyProp(_props, "presets", () => []);
+	const showToday = readonlyProp(_props, "showToday", true);
+	const propsPresets = readonlyProp(_props, "propsPresets");
+	const propsToday = readonlyProp(_props, "propsToday");
+	const id = readonlyProp(_props, "id");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const invalid = readonlyProp(_props, "invalid");
+	const required = readonlyProp(_props, "required");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsButton = readonlyProp(_props, "propsButton");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsCalendar = readonlyProp(_props, "propsCalendar");
+	const onKeydown = readonlyProp(_props, "onKeydown");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}), { delegate: true });
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const hasTime = () => isTimeGranularity(granularity.value);
+	const picker = usePickerPopover(() => ({
+		open: open.value,
+		placement: placement.value,
+		editable: !control().disabled && !control().readonly,
+		label: lang.datePickerOpen,
+		size: rest.size
+	}), {
+		toggle: setOpen,
+		shown: focusCalendar
+	});
+	const calendarValue = computed(() => {
+		return typeof value.value === "string" ? fullIsoDay(value.value) : value.value;
+	});
+	const locale = useDateLocale();
+	/** 能不能选：它那一天（选月份、年份时是那个月、那一年）在范围内、不是不可选的日期 */
+	function selectable(input) {
+		const limits = toDateLimits(locale, {
+			min: min.value,
+			max: max.value,
+			isDateUnavailable: isDateUnavailable.value
+		});
+		return !isPeriodDisabled(valueToIso(input, granularity.value), granularity.value, limits, locale);
+	}
+	const resolve = (preset) => typeof preset.value === "function" ? preset.value() : preset.value;
+	const sameValue = (a, b) => b != null && String(a) === String(b);
+	/** 一天 → 它所在的那一段（按 granularity：年、月、季度、周；日与带时间的就是这一天） */
+	function periodOf(day) {
+		if (granularity.value === "year") return day.slice(0, 4);
+		if (granularity.value === "month") return day.slice(0, 7);
+		if (granularity.value === "quarter") return toIsoQuarter(parseIsoDate(day));
+		if (granularity.value === "week") return toIsoWeek(parseIsoDate(day));
+		return day;
+	}
+	/** 日历选了一天：换回 granularity 的形式；带时间的保留原来的时间，没有时补 00:00 */
+	function pickDay(day) {
+		if (day == null) return;
+		if (typeof day !== "string") {
+			if (granularity.value === "week") pickPeriod(periodOf(toIsoDate(day)));
+			else value.value = hasTime() && !("hour" in day) ? toCalendarDateTime(day) : day;
+			return;
+		}
+		if (!hasTime()) value.value = periodOf(day);
+		else {
+			const time = typeof value.value === "string" && value.value.length > 10 ? value.value.slice(10) : void 0;
+			value.value = `${day}${time ?? (granularity.value === "second" ? "T00:00:00" : "T00:00")}`;
+		}
+	}
+	/** 季度面板、选周的日历给的 'YYYY-Qn' / 'YYYY-Www'：和当前值同一种类型写回（DateValue 时是这一段的第一天） */
+	function pickPeriod(iso) {
+		if (iso != null) value.value = isoToValue(iso, value.value ?? void 0, granularity.value, valueType.value);
+	}
+	const weekCellButton = (date) => {
+		const week = typeof value.value === "string" ? value.value : value.value != null ? toIsoWeek(value.value) : null;
+		const day = parseIsoDate(date);
+		return week != null && day != null && toIsoWeek(day) === week && date !== fullIsoDay(week) ? { sx: datePickerStyles.inWeek } : {};
+	};
+	/** “今天”按钮的文字：按粒度是今年、本季度、本月、本周或今天 */
+	function todayLabel() {
+		return {
+			year: lang.dateRangePreset.thisYear,
+			quarter: lang.datePickerThisQuarter,
+			month: lang.dateRangePreset.thisMonth,
+			week: lang.dateRangePreset.thisWeek
+		}[granularity.value] ?? lang.dateRangePreset.today;
+	}
+	function picked(event) {
+		setOpen(false, "select", event);
+		if (hasTime()) picker.anchor?.querySelector("[data-type=\"hour\"]")?.focus();
+	}
+	return () => createVNode(Fragment, null, [createVNode(DateField, mergeProps(rest, {
+		"_value": value.value,
+		"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+		"granularity": granularity.value,
+		"valueType": valueType.value,
+		"min": min.value,
+		"max": max.value,
+		"isDateUnavailable": isDateUnavailable.value,
+		"id": id.value,
+		"disabled": disabled.value,
+		"readonly": readonly.value,
+		"invalid": invalid.value,
+		"required": required.value,
+		"onKeydown": _cache[1] || (_cache[1] = (event) => {
+			onKeydown.value?.(event);
+			picker.onKeydown(event);
+		}),
+		"propsRoot": mergePartProps({}, propsRoot.value, { ref: picker.anchorRef }),
+		"suffix": picker.button(CalendarDays, propsButton.value)
+	}), null), picker.panel(datePickerStyles.popover, propsPopover.value, open.value && [renderPickerPresets(presets.value.map((preset) => {
+		const next = resolve(preset);
+		return {
+			key: preset.label,
+			label: preset.label,
+			active: sameValue(next, value.value),
+			disabled: !selectable(next),
+			onPick: () => {
+				value.value = next;
+				picked();
+			}
+		};
+	}), lang.datePickerPresets, propsPresets.value), createVNode("div", css.attrs(datePickerStyles.main), [granularity.value === "quarter" ? createVNode(QuarterCalendar, {
+		"_value": typeof value.value === "string" || value.value == null ? value.value : toIsoQuarter(value.value),
+		"onUpdate:_value": pickPeriod,
+		"min": min.value,
+		"max": max.value,
+		"aria-label": lang.datePickerOpen,
+		"onPick": _cache[2] || (_cache[2] = () => picked())
+	}, null) : createVNode(Calendar, mergeProps(propsCalendar.value, {
+		"onUpdate:_value": _cache[3] || (_cache[3] = (day) => pickDay(day)),
+		"_value": calendarValue.value,
+		"granularity": dateUnitOf(granularity.value),
+		"valueType": valueType.value,
+		"min": min.value,
+		"max": max.value,
+		"isDateUnavailable": isDateUnavailable.value,
+		"visibleMonths": visibleMonths.value
+	}, granularity.value === "week" && {
+		firstDayOfWeek: 1,
+		showWeekNumbers: true,
+		propsCellButton: weekCellButton
+	}, { "onPick": _cache[4] || (_cache[4] = () => picked()) }), null), showToday.value && createVNode("div", css.attrs(datePickerStyles.footer), [createVNode(Button, mergeProps(mergePartProps({
+		size: "sm",
+		variant: "ghost"
+	}, propsToday.value, {
+		disabled: !selectable(periodOf(todayIso(locale.timeZone))),
+		onClick: (event) => {
+			pickDay(todayIso(locale.timeZone));
+			picked(event);
+		}
+	}), { "key": "__site0" }), {
+		default: () => [todayLabel()],
+		$stable: true
+	})])])])]);
+}, {
+	name: "DatePicker",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"granularity",
+		"valueType",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"placement",
+		"visibleMonths",
+		"presets",
+		"showToday",
+		"propsPresets",
+		"propsToday",
+		"id",
+		"disabled",
+		"readonly",
+		"invalid",
+		"required",
+		"propsRoot",
+		"propsButton",
+		"propsPopover",
+		"propsCalendar",
+		"onKeydown"
+	]
+});
+//#endregion
+export { DatePicker, datePickerStyles };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/date/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/date/DatePicker.tsx"],"sourcesContent":["/**\n * 日期选择器：DateField 加一个打开日历的按钮，日历弹在输入框下方；可以直接键入，也可以点选。\n * 参考 React Aria DatePicker（输入框可键入，按钮打开对话框里的 Calendar）、Mantine DatePickerInput。\n *\n *   <Field label=\"出发日期\"><DatePicker _value={date} min={today} /></Field>\n *   <DatePicker granularity=\"month\" _value={month} aria-label=\"账期\" />     // 选月份：'2026-10'\n *   <DatePicker granularity=\"minute\" _value={at} aria-label=\"开始时间\" />  // 日期加时间：'2026-10-20T14:30'\n *\n *   <DatePicker granularity=\"quarter\" _value={quarter} aria-label=\"考核季度\" /> // 季度：'2026-Q4'；week 是 '2026-W43'\n *\n * granularity 决定值的形式（同 DateField）与弹出的选择：year、month 选年份、月份，quarter 弹出季度面板（QuarterCalendar），\n * week 选周（日历按 ISO 周排、行首是周数，点哪天都是选它那一周），其余选日期。\n * 日历下方有“今天”（按粒度是今年、本季度、本月、本周；超出范围时不可用），旁边可以放快捷选项（presets）。\n * 选好后关闭，焦点回到按钮；带时间时焦点落到“时”那一段接着输入（没有时间时先补 00:00）。\n * Esc、点外部关闭；分段里按 Alt + ↓ 打开（同原生 select）。\n *\n * 部件：同 DateField，另有 Button（打开按钮）、Popover（弹层，role=\"dialog\"）、Presets、Calendar、Today（“今天”按钮）。\n */\nimport { CalendarDays } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { toCalendarDateTime } from '@internationalized/date';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport {\n  fullIsoDay,\n  parseIsoDate,\n  todayIso,\n  toIsoDate,\n  toIsoQuarter,\n  toIsoWeek,\n} from '../utils/data/date';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergePartProps, type PartProps } from '../utils/props';\nimport { Calendar, type CalendarBaseProps } from './Calendar';\nimport {\n  DateField,\n  dateUnitOf,\n  isoToValue,\n  isPeriodDisabled,\n  isTimeGranularity,\n  valueToIso,\n  type DateFieldProps,\n} from './DateField';\nimport { toDateLimits, useDateLocale, type DateInput } from './date-locale';\nimport { QuarterCalendar } from './QuarterCalendar';\nimport {\n  focusCalendar,\n  renderPickerPresets,\n  usePickerPopover,\n  type PickerPopoverParts,\n} from './picker-popover';\n\n/** 自定义的快捷选项（一周前、上个月末） */\nexport interface DatePreset<V extends DateInput = string> {\n  /** 按钮上的文字 */\n  label: string;\n  /** 值（按 granularity 的形式）；函数时每次打开按当时算（跟着今天变） */\n  value: V | (() => V);\n}\n\n/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */\nexport interface DatePickerProps<V extends DateInput = string>\n  extends DateFieldProps<V>, PickerPopoverParts, OpenChangeProps {\n  /** 弹层是否打开：父级可写 _open={x} */\n  _open?: boolean;\n  /** 日历并排显示几个月，默认 1 */\n  visibleMonths?: number;\n  /** 日历旁边的快捷选项：`[{ label: '一周前', value: () => shiftIsoDate(todayIso(), { weeks: -1 }) }]` */\n  presets?: readonly DatePreset<V>[];\n  /** 日历下方的“今天”（选月份时“本月”、选年份时“今年”），默认 true */\n  showToday?: boolean;\n  /** 快捷选项那一列的部件属性 */\n  propsPresets?: PartProps<'div', 'role'>;\n  /** “今天”按钮的部件属性 */\n  propsToday?: Partial<ButtonProps>;\n  /** 日历的部件属性（值、范围、粒度由选择器给出） */\n  propsCalendar?: Omit<\n    Partial<CalendarBaseProps<V>>,\n    'granularity' | 'min' | 'max' | 'isDateUnavailable' | 'valueType' | 'onPick'\n  >;\n}\n\n/** DatePicker 的样式：popover、main（日历与“今天”）、footer（快捷选项的样式见 pickerPresetStyles） */\nexport const datePickerStyles = css.create({\n  popover: { display: 'flex', alignItems: 'flex-start', gap: '_sm', padding: '_sm' },\n  main: { display: 'flex', flexDirection: 'column', gap: '_xs' },\n  // 选周时已选那一周的另外六天\n  inWeek: {\n    backgroundColor: { default: '_accentSoft', ':hover': '_accentSoftHover' },\n    color: '_accentText',\n  },\n  footer: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingBlockStart: '_xs',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n});\n\n/** 日期选择器：分段输入 + 弹出的日历 */\nexport const DatePicker = _component(\n  <V extends DateInput>({\n    _value: value = _bindable<V | null>(null),\n    _open: open = _bindable(false),\n    onOpenChange,\n    granularity = 'day',\n    valueType,\n    min,\n    max,\n    isDateUnavailable,\n    placement,\n    visibleMonths = 1,\n    presets = [],\n    showToday = true,\n    propsPresets,\n    propsToday,\n    id,\n    disabled,\n    readonly,\n    invalid,\n    required,\n    propsRoot,\n    propsButton,\n    propsPopover,\n    propsCalendar,\n    onKeydown,\n    ...rest\n  }: DatePickerProps<V>) => {\n    const lang = useLang();\n    // 输入由里面的 DateField 接 Field；这里只读状态决定能不能打开面板\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }), {\n      delegate: true,\n    });\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    const hasTime = () => isTimeGranularity(granularity);\n    const picker = usePickerPopover(\n      () => ({\n        open,\n        placement,\n        editable: !control().disabled && !control().readonly,\n        label: lang.datePickerOpen,\n        size: rest.size,\n      }),\n      { toggle: setOpen, shown: focusCalendar },\n    );\n\n    // 字符串值按 granularity 的形式（'2026'、'2026-10'、'2026-10-20T14:30'）：日历只认完整的日期\n    const calendarValue = _derived.by((): DateInput | null => {\n      return typeof value === 'string' ? fullIsoDay(value) : value;\n    });\n\n    const locale = useDateLocale();\n    /** 能不能选：它那一天（选月份、年份时是那个月、那一年）在范围内、不是不可选的日期 */\n    function selectable(input: DateInput): boolean {\n      const limits = toDateLimits(locale, { min, max, isDateUnavailable });\n      return !isPeriodDisabled(valueToIso(input, granularity), granularity, limits, locale);\n    }\n    const resolve = (preset: DatePreset<V>): V =>\n      typeof preset.value === 'function' ? (preset.value as () => V)() : preset.value;\n    // 字符串与 DateValue 都按 ISO 比（DateValue 的 toString 是 ISO）\n    const sameValue = (a: DateInput, b: DateInput | null) => b != null && String(a) === String(b);\n\n    /** 一天 → 它所在的那一段（按 granularity：年、月、季度、周；日与带时间的就是这一天） */\n    function periodOf(day: string): string {\n      if (granularity === 'year') return day.slice(0, 4);\n      if (granularity === 'month') return day.slice(0, 7);\n      if (granularity === 'quarter') return toIsoQuarter(parseIsoDate(day)!);\n      if (granularity === 'week') return toIsoWeek(parseIsoDate(day)!);\n      return day;\n    }\n\n    /** 日历选了一天：换回 granularity 的形式；带时间的保留原来的时间，没有时补 00:00 */\n    function pickDay(day: DateInput | null) {\n      if (day == null) return;\n      if (typeof day !== 'string') {\n        // 空值按 dateValue 写回时日历给的是 CalendarDate：带时间的粒度要 CalendarDateTime，\n        // 选周时换成那一周的周一\n        if (granularity === 'week') pickPeriod(periodOf(toIsoDate(day)));\n        else value = (hasTime() && !('hour' in day) ? toCalendarDateTime(day) : day) as V;\n        return;\n      }\n      if (!hasTime()) value = periodOf(day) as V;\n      else {\n        const time = typeof value === 'string' && value.length > 10 ? value.slice(10) : undefined;\n        value = `${day}${time ?? (granularity === 'second' ? 'T00:00:00' : 'T00:00')}` as V;\n      }\n    }\n\n    /** 季度面板、选周的日历给的 'YYYY-Qn' / 'YYYY-Www'：和当前值同一种类型写回（DateValue 时是这一段的第一天） */\n    function pickPeriod(iso: string | null) {\n      if (iso != null) value = isoToValue(iso, value ?? undefined, granularity, valueType) as V;\n    }\n\n    // 选周：已选那一周的另外六天带浅色底（日历只把周一当作已选的那一格）\n    const weekCellButton = (date: string) => {\n      const week = typeof value === 'string' ? value : value != null ? toIsoWeek(value) : null;\n      const day = parseIsoDate(date);\n      const inWeek = week != null && day != null && toIsoWeek(day) === week;\n      return inWeek && date !== fullIsoDay(week) ? { sx: datePickerStyles.inWeek } : {};\n    };\n\n    /** “今天”按钮的文字：按粒度是今年、本季度、本月、本周或今天 */\n    function todayLabel(): string {\n      const labels: Partial<Record<typeof granularity, string>> = {\n        year: lang.dateRangePreset.thisYear,\n        quarter: lang.datePickerThisQuarter,\n        month: lang.dateRangePreset.thisMonth,\n        week: lang.dateRangePreset.thisWeek,\n      };\n      return labels[granularity] ?? lang.dateRangePreset.today;\n    }\n\n    function picked(event?: Event) {\n      setOpen(false, 'select', event);\n      // 带时间时接着输入时间：焦点去“时”那一段（关闭后的归还焦点只在焦点丢失时生效，不会抢回去）\n      if (hasTime()) picker.anchor?.querySelector<HTMLElement>('[data-type=\"hour\"]')?.focus();\n    }\n\n    return () => (\n      <>\n        <DateField\n          {...rest}\n          _value={value}\n          granularity={granularity}\n          valueType={valueType}\n          min={min}\n          max={max}\n          isDateUnavailable={isDateUnavailable}\n          id={id}\n          disabled={disabled}\n          readonly={readonly}\n          invalid={invalid}\n          required={required}\n          onKeydown={(event) => {\n            onKeydown?.(event);\n            picker.onKeydown(event);\n          }}\n          propsRoot={mergePartProps<PartProps<'div'>>({}, propsRoot, { ref: picker.anchorRef })}\n          suffix={picker.button(CalendarDays, propsButton)}\n        />\n        {picker.panel(\n          datePickerStyles.popover,\n          propsPopover,\n          open && [\n            renderPickerPresets(\n              presets.map((preset) => {\n                const next = resolve(preset);\n                return {\n                  key: preset.label,\n                  label: preset.label,\n                  active: sameValue(next, value),\n                  disabled: !selectable(next),\n                  onPick: () => {\n                    value = next;\n                    picked();\n                  },\n                };\n              }),\n              lang.datePickerPresets,\n              propsPresets,\n            ),\n            <div {...css.attrs(datePickerStyles.main)}>\n              {granularity === 'quarter' ? (\n                <QuarterCalendar\n                  _value={typeof value === 'string' || value == null ? value : toIsoQuarter(value)}\n                  onUpdate:_value={pickPeriod}\n                  min={min}\n                  max={max}\n                  aria-label={lang.datePickerOpen}\n                  onPick={() => picked()}\n                />\n              ) : (\n                <Calendar<V>\n                  {...propsCalendar}\n                  // 这里的日历是单选：值是一天或空\n                  onUpdate:_value={(day) => pickDay(day as DateInput | null)}\n                  _value={calendarValue as V | null}\n                  granularity={dateUnitOf(granularity)}\n                  valueType={valueType}\n                  min={min}\n                  max={max}\n                  isDateUnavailable={isDateUnavailable}\n                  visibleMonths={visibleMonths}\n                  // 选周：按 ISO 8601 的周（周一开始）排，行首是第几周，与值 'YYYY-Www' 一致\n                  {...(granularity === 'week' && {\n                    firstDayOfWeek: 1,\n                    showWeekNumbers: true,\n                    propsCellButton: weekCellButton,\n                  })}\n                  onPick={() => picked()}\n                />\n              )}\n              {showToday && (\n                <div {...css.attrs(datePickerStyles.footer)}>\n                  <Button\n                    {...mergePartProps<ButtonProps>({ size: 'sm', variant: 'ghost' }, propsToday, {\n                      disabled: !selectable(periodOf(todayIso(locale.timeZone))),\n                      onClick: (event: MouseEvent) => {\n                        pickDay(todayIso(locale.timeZone));\n                        picked(event);\n                      },\n                    })}\n                  >\n                    {todayLabel()}\n                  </Button>\n                </div>\n              )}\n            </div>,\n          ],\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,IAAa,mBAAmB,IAAI,OAAO;CACzC,SAAS;EAAE,SAAS;EAAQ,YAAY;EAAc,KAAK;EAAO,SAAS;CAAM;CACjF,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAE7D,QAAQ;EACN,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAmB;EACxE,OAAO;CACT;CACA,QAAQ;EACN,SAAS;EACT,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;CACzB;AACF,CAAC;;AAGD,IAAa,aAAa,0BACxB,QAAA,SA0B0B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAzBY,MAAI,KAAA,IAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAChB,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eAEf,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,oBAAAA,aAAA,QAAA,mBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAMH,CAAC;CAAA,MAAA,UAAAA,aAAA,QAAA,iBACP,CAAA,CAAE;CAAA,MAAA,YAAAA,aAAA,QAAA,aACA,IAAI;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,KAAAA,aAAA,QAAA,IAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAab,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,MAAM,UAAU,uBAAuB;EAAE,IAAE,GAAA;EAAE,SAAO,QAAA;EAAE,UAAQ,SAAA;EAAE,UAAQ,SAAA;EAAE,UAAQ,SAAA;CAAC,IAAI,EACrF,UAAU,KACZ,CAAC;CACD,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CACA,MAAM,gBAAgB,kBAAiB,YAAA,KAAY;CACnD,MAAM,SAAS,wBACN;EACL,MAAI,KAAA;EACJ,WAAS,UAAA;EACT,UAAU,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;EAC5C,OAAO,KAAK;EACZ,MAAM,KAAK;CACb,IACA;EAAE,QAAQ;EAAS,OAAO;CAAc,CAC1C;CAGA,MAAM,gBAAaC,eAAuC;EACxD,OAAO,OAAA,MAAA,UAAiB,WAAW,WAAU,MAAA,KAAM,IAAC,MAAA;CACtD,CAAC;CAED,MAAM,SAAS,cAAc;;CAE7B,SAAS,WAAW,OAA2B;EAC7C,MAAM,SAAS,aAAa,QAAQ;GAAE,KAAG,IAAA;GAAE,KAAG,IAAA;GAAE,mBAAiB,kBAAA;EAAC,CAAC;EACnE,OAAO,CAAC,iBAAiB,WAAW,OAAK,YAAA,KAAa,GAAC,YAAA,OAAe,QAAQ,MAAM;CACtF;CACA,MAAM,WAAW,WACf,OAAO,OAAO,UAAU,aAAc,OAAO,MAAkB,IAAI,OAAO;CAE5E,MAAM,aAAa,GAAc,MAAwB,KAAK,QAAQ,OAAO,CAAC,MAAM,OAAO,CAAC;;CAG5F,SAAS,SAAS,KAAqB;EACrC,IAAI,YAAA,UAAgB,QAAQ,OAAO,IAAI,MAAM,GAAG,CAAC;EACjD,IAAI,YAAA,UAAgB,SAAS,OAAO,IAAI,MAAM,GAAG,CAAC;EAClD,IAAI,YAAA,UAAgB,WAAW,OAAO,aAAa,aAAa,GAAG,CAAE;EACrE,IAAI,YAAA,UAAgB,QAAQ,OAAO,UAAU,aAAa,GAAG,CAAE;EAC/D,OAAO;CACT;;CAGA,SAAS,QAAQ,KAAuB;EACtC,IAAI,OAAO,MAAM;EACjB,IAAI,OAAO,QAAQ,UAAU;GAG3B,IAAI,YAAA,UAAgB,QAAQ,WAAW,SAAS,UAAU,GAAG,CAAC,CAAC;QAC1D,MAAA,QAAS,QAAQ,KAAK,EAAE,UAAU,OAAO,mBAAmB,GAAG,IAAI;GACxE;EACF;EACA,IAAI,CAAC,QAAQ,GAAG,MAAA,QAAQ,SAAS,GAAG;OAC/B;GACH,MAAM,OAAO,OAAA,MAAA,UAAiB,YAAY,MAAA,MAAM,SAAS,KAAK,MAAA,MAAM,MAAM,EAAE,IAAI,KAAA;GAChF,MAAA,QAAQ,GAAG,MAAM,SAAS,YAAA,UAAgB,WAAW,cAAc;EACrE;CACF;;CAGA,SAAS,WAAW,KAAoB;EACtC,IAAI,OAAO,MAAM,MAAA,QAAQ,WAAW,KAAK,MAAA,SAAS,KAAA,GAAS,YAAA,OAAA,UAAA,KAAwB;CACrF;CAGA,MAAM,kBAAkB,SAAiB;EACvC,MAAM,OAAO,OAAA,MAAA,UAAiB,WAAQ,MAAA,QAAW,MAAA,SAAS,OAAO,UAAS,MAAA,KAAM,IAAI;EACpF,MAAM,MAAM,aAAa,IAAI;EAE7B,OADe,QAAQ,QAAQ,OAAO,QAAQ,UAAU,GAAG,MAAM,QAChD,SAAS,WAAW,IAAI,IAAI,EAAE,IAAI,iBAAiB,OAAO,IAAI,CAAC;CAClF;;CAGA,SAAS,aAAqB;EAO5B,OAAO;GALL,MAAM,KAAK,gBAAgB;GAC3B,SAAS,KAAK;GACd,OAAO,KAAK,gBAAgB;GAC5B,MAAM,KAAK,gBAAgB;EAEtB,EAAM,YAAA,UAAiB,KAAK,gBAAgB;CACrD;CAEA,SAAS,OAAO,OAAe;EAC7B,QAAQ,OAAO,UAAU,KAAK;EAE9B,IAAI,QAAQ,GAAG,OAAO,QAAQ,cAA2B,sBAAoB,CAAC,EAAE,MAAM;CACxF;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAAAD,YAAA,WAAAE,WAGG,MAAI;EAAA,UAAA,MAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,eAAA,YAAA;EAAA,aAAA,UAAA;EAAA,OAAA,IAAA;EAAA,OAAA,IAAA;EAAA,qBAAA,kBAAA;EAAA,MAAA,GAAA;EAAA,YAAA,SAAA;EAAA,YAAA,SAAA;EAAA,WAAA,QAAA;EAAA,YAAA,SAAA;EAAA,aAAA,OAAA,OAAA,OAAA,MAYI,UAAU;GACpB,UAAA,QAAY,KAAK;GACjB,OAAO,UAAU,KAAK;EACxB;EAAC,aACU,eAAiC,CAAC,GAAC,UAAA,OAAa,EAAE,KAAK,OAAO,UAAU,CAAC;EAAC,UAC7E,OAAO,OAAO,cAAY,YAAA,KAAa;CAAC,CAAA,GAAA,IAAA,GAEjD,OAAO,MACN,iBAAiB,SAAO,aAAA,OAExB,KAAA,SAAQ,CACN,oBACE,QAAA,MAAQ,KAAK,WAAW;EACtB,MAAM,OAAO,QAAQ,MAAM;EAC3B,OAAO;GACL,KAAK,OAAO;GACZ,OAAO,OAAO;GACd,QAAQ,UAAU,MAAI,MAAA,KAAO;GAC7B,UAAU,CAAC,WAAW,IAAI;GAC1B,cAAc;IACZ,MAAA,QAAQ;IACR,OAAO;GACT;EACF;CACF,CAAC,GACD,KAAK,mBAAiB,aAAA,KAExB,GAACF,YAAA,OACQ,IAAI,MAAM,iBAAiB,IAAI,GAAC,CACtC,YAAA,UAAgB,YAASA,YAAA,iBAAA;EAAA,UAEd,OAAA,MAAA,UAAiB,YAAY,MAAA,SAAS,OAAI,MAAA,QAAW,aAAY,MAAA,KAAM;EAAC,mBAC/D;EAAU,OAAA,IAAA;EAAA,OAAA,IAAA;EAAA,cAGf,KAAK;EAAc,UAAA,OAAA,OAAA,OAAA,WACjB,OAAO;CAAC,GAAA,IAAA,IAAAA,YAAA,UAAAE,WAAA,cAAA,OAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAMJ,QAAQ,QAAQ,GAAuB;EAAC,UAAA,cAAA;EAAA,eAE7C,WAAU,YAAA,KAAY;EAAC,aAAA,UAAA;EAAA,OAAA,IAAA;EAAA,OAAA,IAAA;EAAA,qBAAA,kBAAA;EAAA,iBAAA,cAAA;CAAA,GAO/B,YAAA,UAAgB,UAAU;EAC7B,gBAAgB;EAChB,iBAAiB;EACjB,iBAAiB;CACnB,GAAC,EAAA,UAAA,OAAA,OAAA,OAAA,WACa,OAAO,GAAC,CAAA,GAAA,IAAA,GAGzB,UAAA,SAAAF,YAAA,OACU,IAAI,MAAM,iBAAiB,MAAM,GAAC,CAAAA,YAAA,QAAAE,WAEnC,eAA4B;EAAE,MAAM;EAAM,SAAS;CAAQ,GAAC,WAAA,OAAc;EAC5E,UAAU,CAAC,WAAW,SAAS,SAAS,OAAO,QAAQ,CAAC,CAAC;EACzD,UAAU,UAAsB;GAC9B,QAAQ,SAAS,OAAO,QAAQ,CAAC;GACjC,OAAO,KAAK;EACd;CACF,CAAC,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;EAAA,eAAA,CAED,WAAW,CAAC;EAAA,SAAA;CAAA,CAAA,CAAA,CAAA,CAGlB,CAAA,CAAA,CAGP,CAAC,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/date/DateRangePicker.d.ts

@@ -0,0 +1,71 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import { type ControlIconOptions, type ControlOptions } from '../input/control';
+import { type DateRange, type DateRangePreset } from '../utils/data/date';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type DateInput, type DateLimitProps, type DateValueTypes } from './date-locale';
+import { type DateFieldGranularity } from './date-segments';
+import { type DateSegmentGroupProps } from './DateSegmentGroup';
+import { type PickerPopoverParts } from './picker-popover';
+import { type RangeCalendarProps } from './RangeCalendar';
+/** 自定义的快捷区间（财年、上个结算周期） */
+export interface DateRangeCustomPreset<V extends DateInput = string> {
+    /** 按钮上的文字 */
+    label: string;
+    /** 区间；函数时每次打开按当时算（跟着今天变） */
+    value: DateRange<V> | (() => DateRange<V>);
+}
+/** 未声明的属性落到外壳（role="group"）上 */
+export interface DateRangePickerProps<V extends DateInput = string> extends PartProps<'div', 'role'>, ControlOptions, ControlIconOptions, DateLimitProps, PickerPopoverParts, OpenChangeProps {
+    /** 区间（两端都含）：父级写 _value={x}；没填全时 null */
+    _value?: DateRange<V> | null;
+    /** 弹层是否打开：父级可写 _open={x} */
+    _open?: boolean;
+    /** 值为空、推不出类型时写回哪一种，默认 iso（字符串） */
+    valueType?: keyof DateValueTypes;
+    /** 精确到哪一段（同 DateField），默认 day；month、year 按月、按年，hour / minute / second 是日期时间区间 */
+    granularity?: DateFieldGranularity;
+    /**
+     * 快捷区间，显示在日历旁边、夹到 min–max 之内：内置的名字（按今天与语言的一周第一天算），
+     * 或自己的 `{ label, value }`（value 可以是函数，每次打开时按当时算）
+     */
+    presets?: readonly (DateRangePreset | DateRangeCustomPreset<V>)[];
+    /** 日历并排显示几个月，默认 2 */
+    visibleMonths?: number;
+    /** 区间里允许夹着不可选的日期，默认 false */
+    allowsUnavailableInRange?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过；不写时结束早于开始、超出范围、是不可选的日期也算 */
+    invalid?: boolean;
+    /** 有值时显示清空按钮 */
+    clearable?: boolean;
+    /** 表单提交时开始日期的 name（ISO 字符串） */
+    startName?: string;
+    /** 表单提交时结束日期的 name */
+    endName?: string;
+    /** 开始那组分段的部件属性 */
+    propsStart?: Partial<DateSegmentGroupProps>;
+    /** 结束那组分段的部件属性 */
+    propsEnd?: Partial<DateSegmentGroupProps>;
+    /** 两组之间的分隔符的部件属性 */
+    propsSeparator?: PartProps<'span', 'aria-hidden'>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Omit<Partial<PresetIconButtonProps>, 'onClick'>;
+    /** 快捷区间那一列的部件属性 */
+    propsPresets?: PartProps<'div', 'role'>;
+    /** 区间日历的部件属性（值、范围由选择器给出） */
+    propsCalendar?: Omit<Partial<RangeCalendarProps<V>>, 'value' | 'min' | 'max' | 'isDateUnavailable' | 'valueType' | 'onPick'>;
+}
+/** DateRangePicker 的样式：separator、popover（快捷区间的样式见 pickerPresetStyles） */
+export declare const dateRangePickerStyles: Readonly<{
+    popover: css.CompiledStyles;
+    separator: css.CompiledStyles;
+}>;
+/** 日期区间选择器：两组分段 + 弹出的区间日历与快捷区间 */
+export declare const DateRangePicker: <V extends DateInput>(props: DateRangePickerProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;