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

package/dist/date/RangeCalendar.js

@@ -0,0 +1,89 @@
+import { useCalendarState } from "./calendar-state.js";
+import { toDateLimits, useDateLocale, writeDateLike } from "./date-locale.js";
+import { CalendarView } from "./CalendarView.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { endOfMonth, endOfYear, startOfMonth, startOfYear } from "@internationalized/date";
+//#region src/date/RangeCalendar.tsx
+/** 未声明的属性落到根元素上 */
+/** 区间日历：选开始与结束 */
+var RangeCalendar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const granularity = readonlyProp(_props, "granularity", "day");
+	const visibleMonths = readonlyProp(_props, "visibleMonths", 1);
+	const allowsUnavailableInRange = readonlyProp(_props, "allowsUnavailableInRange", false);
+	const defaultFocused = readonlyProp(_props, "defaultFocused");
+	const valueType = readonlyProp(_props, "valueType");
+	const firstDayOfWeek = readonlyProp(_props, "firstDayOfWeek");
+	const readonly = readonlyProp(_props, "readonly", false);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const onPick = readonlyProp(_props, "onPick");
+	const rest = restProps(_props, _ctx, true);
+	const locale = useDateLocale(() => ({ firstDayOfWeek: firstDayOfWeek.value }));
+	const periodStart = (date) => granularity.value === "year" ? startOfYear(date) : granularity.value === "month" ? startOfMonth(date) : date;
+	const periodEnd = (date) => granularity.value === "year" ? endOfYear(date) : granularity.value === "month" ? endOfMonth(date) : date;
+	const selected = computed(() => {
+		const start = locale.fromValue(value.value?.start);
+		const end = locale.fromValue(value.value?.end);
+		return start && end ? [start, end] : [];
+	});
+	let lastLike;
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value,
+		isDateUnavailable: isDateUnavailable.value
+	}));
+	const calendar = useCalendarState({
+		mode: () => "range",
+		selected: () => selected.value,
+		onChange: ([start, end]) => {
+			lastLike = value.value?.start ?? lastLike;
+			const write = (date) => writeDateLike(date, lastLike, valueType.value);
+			const range = {
+				start: write(periodStart(start)),
+				end: write(periodEnd(end))
+			};
+			value.value = range;
+			onPick.value?.(range);
+		},
+		today: () => locale.today(),
+		unit: () => granularity.value,
+		limits: () => limits.value,
+		week: () => locale.week,
+		visibleMonths: () => visibleMonths.value,
+		allowsUnavailableInRange: () => allowsUnavailableInRange.value,
+		readonly: () => readonly.value || disabled.value,
+		defaultFocused: () => locale.fromValue(defaultFocused.value)
+	});
+	return () => createVNode(CalendarView, mergeProps(rest, {
+		"calendar": calendar,
+		"firstDayOfWeek": firstDayOfWeek.value,
+		"disabled": disabled.value,
+		"data-invalid": calendar.invalid || void 0
+	}), null);
+}, {
+	name: "RangeCalendar",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"granularity",
+		"visibleMonths",
+		"allowsUnavailableInRange",
+		"defaultFocused",
+		"valueType",
+		"firstDayOfWeek",
+		"readonly",
+		"disabled",
+		"onPick"
+	]
+});
+//#endregion
+export { RangeCalendar };
+
+//# sourceMappingURL=RangeCalendar.js.map

package/dist/date/RangeCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/date/RangeCalendar.tsx"],"sourcesContent":["/**\n * 区间日历：先点开始、再点结束，中间悬停时预览；酒店的入住与离店、报表的起止日期。参考 React Aria RangeCalendar。\n *\n *   <RangeCalendar _value={stay} visibleMonths={2} min={today} isDateUnavailable={booked} />\n *\n * 值是 `{ start, end }`（两端都含；ISO 字符串或 DateValue，写回时保持同一种类型）；反着点也会排好序。\n * 默认区间里不能夹着不可选的日期（订满的那天）：选了开始之后，越过不可选日期的那一侧都不能再选；\n * 允许时写 allowsUnavailableInRange。选到一半按 Esc 取消。键盘与部件同 Calendar（部件见 CalendarView）。\n * granularity 是 month / year 时按月、按年选（季度报表、跨年的预算），写回的区间是整月、整年：开始那月的 1 日到结束那月的最后一天。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  type CalendarDate,\n} from '@internationalized/date';\nimport type { DateRange, DateUnit } from '../utils/data/date';\nimport { useCalendarState } from './calendar-state';\nimport { CalendarView, type CalendarViewProps } from './CalendarView';\nimport {\n  toDateLimits,\n  useDateLocale,\n  writeDateLike,\n  type DateInput,\n  type DateLimitProps,\n  type DateValueTypes,\n} from './date-locale';\n\n/** 未声明的属性落到根元素上 */\nexport interface RangeCalendarProps<V extends DateInput = string>\n  extends Omit<CalendarViewProps, 'calendar'>, DateLimitProps {\n  /** 选中的区间（两端都含）：父级写 _value={x}；没有时 null */\n  _value?: DateRange<V> | null;\n  /** 选择的粒度，默认 day；month、year 时选整月、整年（写回的仍是日期：月初到月末、年初到年末） */\n  granularity?: DateUnit;\n  /** 并排显示几个月，默认 1；酒店、机票常用 2 */\n  visibleMonths?: number;\n  /** 区间里允许夹着不可选的日期，默认 false */\n  allowsUnavailableInRange?: boolean;\n  /** 没有已选区间时一开始显示哪天所在的月，默认今天 */\n  defaultFocused?: DateInput;\n  /** 值为空、推不出类型时写回哪一种，默认 iso（字符串） */\n  valueType?: keyof DateValueTypes;\n  /** 只读：能翻页、移动焦点，不能改选择 */\n  readonly?: boolean;\n  /** 选完了一个区间（点了结束）：日期选择器据此关闭弹层 */\n  onPick?: (range: DateRange<V>) => void;\n}\n\n/** 区间日历：选开始与结束 */\nexport const RangeCalendar = _component(\n  <V extends DateInput>({\n    _value: value = _bindable<DateRange<V> | null>(null),\n    min,\n    max,\n    isDateUnavailable,\n    granularity = 'day',\n    visibleMonths = 1,\n    allowsUnavailableInRange = false,\n    defaultFocused,\n    valueType,\n    firstDayOfWeek,\n    readonly = false,\n    disabled = false,\n    onPick,\n    ...rest\n  }: RangeCalendarProps<V>) => {\n    const locale = useDateLocale(() => ({ firstDayOfWeek }));\n    // 按月、按年选时，两端扩到整月、整年\n    const periodStart = (date: CalendarDate) =>\n      granularity === 'year'\n        ? startOfYear(date)\n        : granularity === 'month'\n          ? startOfMonth(date)\n          : date;\n    const periodEnd = (date: CalendarDate) =>\n      granularity === 'year' ? endOfYear(date) : granularity === 'month' ? endOfMonth(date) : date;\n    const selected = _derived.by(() => {\n      const start = locale.fromValue(value?.start);\n      const end = locale.fromValue(value?.end);\n      return start && end ? [start, end] : [];\n    });\n    // 值清空后再选：仍按清空前的类型写回\n    let lastLike: V | undefined;\n    const limits = _derived(toDateLimits(locale, { min, max, isDateUnavailable }));\n    const calendar = useCalendarState({\n      mode: () => 'range',\n      selected: () => selected,\n      onChange: ([start, end]) => {\n        lastLike = value?.start ?? lastLike;\n        const write = (date: CalendarDate) => writeDateLike(date, lastLike, valueType) as V;\n        const range = { start: write(periodStart(start!)), end: write(periodEnd(end!)) };\n        value = range;\n        onPick?.(range);\n      },\n      today: () => locale.today(),\n      unit: () => granularity,\n      limits: () => limits,\n      week: () => locale.week,\n      visibleMonths: () => visibleMonths,\n      allowsUnavailableInRange: () => allowsUnavailableInRange,\n      readonly: () => readonly || disabled,\n      defaultFocused: () => locale.fromValue(defaultFocused),\n    });\n    return () => (\n      <CalendarView\n        {...rest}\n        calendar={calendar}\n        firstDayOfWeek={firstDayOfWeek}\n        disabled={disabled}\n        data-invalid={calendar.invalid || undefined}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAoDA,IAAa,gBAAgB,0BAC3B,QAAA,SAe6B;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAdoB,MAAI,KAAA,IAAA;CAAA,MAAA,MAAAC,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,oBAAAA,aAAA,QAAA,mBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eAIrC,KAAK;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBACH,CAAC;CAAA,MAAA,2BAAAA,aAAA,QAAA,4BACU,KAAK;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAIrB,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAEb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,qBAAqB,EAAE,gBAAc,eAAA,MAAC,EAAE;CAEvD,MAAM,eAAe,SACnB,YAAA,UAAgB,SACZ,YAAY,IAAI,IAChB,YAAA,UAAgB,UACd,aAAa,IAAI,IACjB;CACR,MAAM,aAAa,SACjB,YAAA,UAAgB,SAAS,UAAU,IAAI,IAAI,YAAA,UAAgB,UAAU,WAAW,IAAI,IAAI;CAC1F,MAAM,WAAQC,eAAqB;EACjC,MAAM,QAAQ,OAAO,UAAU,MAAA,OAAO,KAAK;EAC3C,MAAM,MAAM,OAAO,UAAU,MAAA,OAAO,GAAG;EACvC,OAAO,SAAS,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;CACvC,CAAC;CAED,IAAI;CACJ,MAAM,SAAMA,eAAY,aAAa,QAAQ;EAAE,KAAG,IAAA;EAAE,KAAG,IAAA;EAAE,mBAAiB,kBAAA;CAAC,CAAC,CAAC;CAC7E,MAAM,WAAW,iBAAiB;EAChC,YAAY;EACZ,gBAAU,SAAA;EACV,WAAW,CAAC,OAAO,SAAS;GAC1B,WAAW,MAAA,OAAO,SAAS;GAC3B,MAAM,SAAS,SAAuB,cAAc,MAAM,UAAQ,UAAA,KAAW;GAC7E,MAAM,QAAQ;IAAE,OAAO,MAAM,YAAY,KAAM,CAAC;IAAG,KAAK,MAAM,UAAU,GAAI,CAAC;GAAE;GAC/E,MAAA,QAAQ;GACR,OAAA,QAAS,KAAK;EAChB;EACA,aAAa,OAAO,MAAM;EAC1B,YAAM,YAAA;EACN,cAAQ,OAAA;EACR,YAAY,OAAO;EACnB,qBAAe,cAAA;EACf,gCAA0B,yBAAA;EAC1B,gBAAgB,SAAA,SAAA,SAAA;EAChB,sBAAsB,OAAO,UAAS,eAAA,KAAe;CACvD,CAAC;CACD,aAAOC,YAAA,cAAAC,WAEC,MAAI;EAAA,YACE;EAAQ,kBAAA,eAAA;EAAA,YAAA,SAAA;EAAA,gBAGJ,SAAS,WAAW,KAAA;CAAS,CAAA,GAAA,IAAA;AAGjD,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/date/RelativeTime.d.ts

@@ -0,0 +1,16 @@
+import type { DateTimeDuration } from '@internationalized/date';
+import { type PartProps } from '../utils/props';
+import { type DateTimeInput } from './DateTime';
+/** 未声明的属性落到 time 上 */
+export interface RelativeTimeProps extends PartProps<'time', 'datetime'> {
+    /** 值：Date、DateValue 或 ISO 字符串 */
+    value: DateTimeInput;
+    /** 详略：long（“3 分钟前”，默认）、short、narrow */
+    format?: Intl.RelativeTimeFormatStyle;
+    /** 相差超过多久就改写日期（同 DateTime）；不写时一直是相对时间 */
+    threshold?: DateTimeDuration;
+    /** 以哪个时刻为“现在”（毫秒时间戳）：写了就不再随时间更新（服务端渲染、截图、测试） */
+    now?: number;
+}
+/** 相对时间 */
+export declare const RelativeTime: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RelativeTimeProps>;

package/dist/date/RelativeTime.js

@@ -0,0 +1,61 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { relativeUnit, toInstant } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { useNow } from "./clock.js";
+import { hasTimeOf, machineDateTime } from "./DateTime.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/date/RelativeTime.tsx
+/** 未声明的属性落到 time 上 */
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+/** 时长 → 毫秒：月按 30 天、年按 365 天，作为阈值足够 */
+var durationMs = ({ years = 0, months = 0, weeks = 0, days = 0, hours = 0, minutes = 0, seconds = 0 }) => ((years * 365 + months * 30 + weeks * 7 + days) * 24 + hours) * HOUR + minutes * MINUTE + seconds * SECOND;
+/** 不同单位下多久更新一次 */
+var REFRESH = {
+	second: SECOND,
+	minute: 10 * SECOND,
+	hour: MINUTE
+};
+/** 相对时间 */
+var RelativeTime = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = readonlyProp(_props, "value");
+	const style = readonlyProp(_props, "format", "long");
+	const threshold = readonlyProp(_props, "threshold");
+	const fixedNow = readonlyProp(_props, "now");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const instant = () => toInstant(value.value, lang.timeZone);
+	const absolute = (current) => threshold.value != null && Math.abs(instant() - current) > durationMs(threshold.value);
+	const clock = useNow((current) => {
+		if (fixedNow.value != null || Number.isNaN(instant()) || absolute(current)) return null;
+		return REFRESH[relativeUnit(instant() - current).unit] ?? HOUR;
+	});
+	return () => {
+		const current = fixedNow.value ?? clock.value;
+		const full = format.date(value.value, {
+			dateStyle: "full",
+			timeStyle: hasTimeOf(value.value) ? "short" : void 0
+		});
+		const text = absolute(current) ? format.date(value.value, { dateStyle: "medium" }) : format.relative(value.value, {
+			now: current,
+			style: style.value
+		});
+		return createVNode("time", mergeAttrs({ title: full }, rest, { datetime: machineDateTime(value.value) }), [text]);
+	};
+}, {
+	name: "RelativeTime",
+	props: [
+		"value",
+		"format",
+		"threshold",
+		"now"
+	]
+});
+//#endregion
+export { RelativeTime };
+
+//# sourceMappingURL=RelativeTime.js.map

package/dist/date/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/date/RelativeTime.tsx"],"sourcesContent":["/**\n * 相对时间（time 元素）：“刚刚”“3 分钟前”“昨天”“2 年后”，随时间自动更新；悬停显示完整的日期时间。\n * 参考 GitHub 的 <relative-time>（threshold 之后改写日期）、Intl.RelativeTimeFormat。\n *\n *   <RelativeTime value={comment.createdAt} />\n *   <RelativeTime value={deadline} threshold={{ days: 7 }} />   // 一周以外直接写日期\n *\n * 值同 DateTime。单位按相差多久自动取（45 秒以内用秒，45 分钟以内用分……），措辞用 numeric: 'auto'（“昨天”而不是“1 天前”）。\n * 更新的频率随单位变：秒级每秒，分钟级每 10 秒，小时级每分钟，更远的每小时；页面隐藏时不更新。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { DateTimeDuration } from '@internationalized/date';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { relativeUnit, toInstant } from '../utils/data/date';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { useNow } from './clock';\nimport { hasTimeOf, machineDateTime, type DateTimeInput } from './DateTime';\n\n/** 未声明的属性落到 time 上 */\nexport interface RelativeTimeProps extends PartProps<'time', 'datetime'> {\n  /** 值：Date、DateValue 或 ISO 字符串 */\n  value: DateTimeInput;\n  /** 详略：long（“3 分钟前”，默认）、short、narrow */\n  format?: Intl.RelativeTimeFormatStyle;\n  /** 相差超过多久就改写日期（同 DateTime）；不写时一直是相对时间 */\n  threshold?: DateTimeDuration;\n  /** 以哪个时刻为“现在”（毫秒时间戳）：写了就不再随时间更新（服务端渲染、截图、测试） */\n  now?: number;\n}\n\nconst SECOND = 1000;\nconst MINUTE = 60 * SECOND;\nconst HOUR = 60 * MINUTE;\n\n/** 时长 → 毫秒：月按 30 天、年按 365 天，作为阈值足够 */\nconst durationMs = ({\n  years = 0,\n  months = 0,\n  weeks = 0,\n  days = 0,\n  hours = 0,\n  minutes = 0,\n  seconds = 0,\n}: DateTimeDuration) =>\n  ((years * 365 + months * 30 + weeks * 7 + days) * 24 + hours) * HOUR +\n  minutes * MINUTE +\n  seconds * SECOND;\n\n/** 不同单位下多久更新一次 */\nconst REFRESH: Partial<Record<Intl.RelativeTimeFormatUnit, number>> = {\n  second: SECOND,\n  minute: 10 * SECOND,\n  hour: MINUTE,\n};\n\n/** 相对时间 */\nexport const RelativeTime = _component(\n  ({ value, format: style = 'long', threshold, now: fixedNow, ...rest }: RelativeTimeProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const instant = () => toInstant(value, lang.timeZone);\n    const absolute = (current: number) =>\n      threshold != null && Math.abs(instant() - current) > durationMs(threshold);\n    const clock = useNow((current) => {\n      if (fixedNow != null || Number.isNaN(instant()) || absolute(current)) return null;\n      return REFRESH[relativeUnit(instant() - current).unit] ?? HOUR;\n    });\n\n    return () => {\n      const current = fixedNow ?? clock.value;\n      const full = format.date(value, {\n        dateStyle: 'full',\n        timeStyle: hasTimeOf(value) ? 'short' : undefined,\n      });\n      const text = absolute(current)\n        ? format.date(value, { dateStyle: 'medium' })\n        : format.relative(value, { now: current, style });\n      return (\n        <time {...mergeAttrs<'time'>({ title: full }, rest, { datetime: machineDateTime(value) })}>\n          {text}\n        </time>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,SAAS;AACf,IAAM,SAAS,KAAK;AACpB,IAAM,OAAO,KAAK;;AAGlB,IAAM,cAAc,EAClB,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,UAAU,GACV,UAAU,UAER,QAAQ,MAAM,SAAS,KAAK,QAAQ,IAAI,QAAQ,KAAK,SAAS,OAChE,UAAU,SACV,UAAU;;AAGZ,IAAM,UAAgE;CACpE,QAAQ;CACR,QAAQ,KAAK;CACb,MAAM;AACR;;AAGA,IAAa,eAAe,0BAC1B,QAAA,SAA6F;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,UAAnE,MAAM;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,KAAA;CAAA,MAA+B,OAAIC,UAAA,QAAA,MAAA,IAAA;CACjE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,gBAAgB,UAAS,MAAA,OAAQ,KAAK,QAAQ;CACpD,MAAM,YAAY,YAChB,UAAA,SAAa,QAAQ,KAAK,IAAI,QAAQ,IAAI,OAAO,IAAI,WAAU,UAAA,KAAU;CAC3E,MAAM,QAAQ,QAAQ,YAAY;EAChC,IAAI,SAAA,SAAY,QAAQ,OAAO,MAAM,QAAQ,CAAC,KAAK,SAAS,OAAO,GAAG,OAAO;EAC7E,OAAO,QAAQ,aAAa,QAAQ,IAAI,OAAO,CAAC,CAAC,SAAS;CAC5D,CAAC;CAED,aAAa;EACX,MAAM,UAAU,SAAA,SAAY,MAAM;EAClC,MAAM,OAAO,OAAO,KAAI,MAAA,OAAQ;GAC9B,WAAW;GACX,WAAW,UAAS,MAAA,KAAM,IAAI,UAAU,KAAA;EAC1C,CAAC;EACD,MAAM,OAAO,SAAS,OAAO,IACzB,OAAO,KAAI,MAAA,OAAQ,EAAE,WAAW,SAAS,CAAC,IAC1C,OAAO,SAAQ,MAAA,OAAQ;GAAE,KAAK;GAAS,OAAK,MAAA;EAAC,CAAC;EAClD,OAAAC,YAAA,QACY,WAAmB,EAAE,OAAO,KAAK,GAAG,MAAM,EAAE,UAAU,gBAAe,MAAA,KAAM,EAAE,CAAC,GAAC,CACtF,IAAI,CAAA;CAGX;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/date/SegmentedField.d.ts

@@ -0,0 +1,60 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import type { HourCycles } from '../config/lang/lang';
+import { type ControlIconOptions, type ControlOptions } from '../input/control';
+import { type PartProps } from '../utils/props';
+import { type DateSegmentType } from './date-segments';
+import { type DateSegmentGroupProps } from './DateSegmentGroup';
+/** 由组件管理：角色与关联 */
+export type SegmentedFieldManaged = 'role' | 'aria-describedby';
+/** 分段输入框共有的属性（DateField、TimeField 都有）；未声明的属性落到这组分段上（主元素） */
+export interface SegmentedFieldOptions extends PartProps<'div', SegmentedFieldManaged>, ControlOptions, ControlIconOptions, Pick<DateSegmentGroupProps, 'propsSegment' | 'propsLiteral'> {
+    /** 12 / 24 小时制（有时的段时）；不写时按语言 */
+    hourCycle?: keyof HourCycles;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过；不写时值超出范围、是不可选的日期也算 */
+    invalid?: boolean;
+    /** 表单提交时的 name（用隐藏的 input，值是 ISO 字符串） */
+    name?: string;
+    /** 有值时显示清空按钮 */
+    clearable?: boolean;
+    /** 框里最后的内容：日期选择器打开日历的按钮 */
+    suffix?: VNodeChild;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Omit<Partial<PresetIconButtonProps>, 'onClick'>;
+}
+/** 未声明的属性落到这组分段上 */
+export interface SegmentedFieldProps extends SegmentedFieldOptions {
+    /** 值（ISO 字符串）：父级写 _value={x}；没填全时 null */
+    _value?: string | null;
+    /** 有哪些段，按年 → 秒的顺序（显示顺序按语言） */
+    fields: readonly Exclude<DateSegmentType, 'dayPeriod'>[];
+    /** 值超出范围、不可选（有值时调用）：外壳显示出错 */
+    outOfRange?: (value: string) => boolean;
+}
+/**
+ * 一组分段的状态，按当前语言（段的顺序、小时制、占位文字，没填时占位的是此刻）；值是 ISO 字符串，填全了才写回。
+ * SegmentedField 与 DateRangePicker 的开始、结束两组分段用它。在组件 setup 里调用
+ */
+export declare function useFieldSegments(read: () => {
+    fields: readonly Exclude<DateSegmentType, 'dayPeriod'>[];
+    value: string | null;
+    hourCycle?: keyof HourCycles;
+    readonly: boolean;
+}, onChange: (value: string | null) => void, onExit?: (direction: 1 | -1) => void): import("./date-segments").DateSegmentsState;
+/** 一组分段里第一个没填的段（都填了时第一段）：点外壳空白处、清空后焦点去这里 */
+export declare const firstSegmentOf: (group: Element | null | undefined) => HTMLElement | null;
+/** SegmentedField 的样式：input */
+export declare const segmentedFieldStyles: Readonly<{
+    input: css.CompiledStyles;
+}>;
+/** 分段输入框：外壳 + 一组日期分段 */
+export declare const SegmentedField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SegmentedFieldProps>;

package/dist/date/SegmentedField.js

@@ -0,0 +1,175 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toElement } from "../utils/dom/element.js";
+import { isoWeekOf } from "../utils/data/date.js";
+import { useFieldControl, useFormReset } from "../form/Field.js";
+import { controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "../input/control.js";
+import { FormValue } from "../form/FormValue.js";
+import { useDateLocale } from "./date-locale.js";
+import { fieldsToIso, isoToFields, useDateSegments } from "./date-segments.js";
+import { DateSegmentGroup } from "./DateSegmentGroup.js";
+import { createVNode, mergeProps, shallowRef } 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 { now } from "@internationalized/date";
+//#region src/date/SegmentedField.tsx
+/** 由组件管理：角色与关联 */
+/** 分段输入框共有的属性（DateField、TimeField 都有）；未声明的属性落到这组分段上（主元素） */
+/** 未声明的属性落到这组分段上 */
+/**
+* 一组分段的状态，按当前语言（段的顺序、小时制、占位文字，没填时占位的是此刻）；值是 ISO 字符串，填全了才写回。
+* SegmentedField 与 DateRangePicker 的开始、结束两组分段用它。在组件 setup 里调用
+*/
+function useFieldSegments(read, onChange, onExit) {
+	const lang = useLang();
+	const locale = useDateLocale();
+	const segments = useDateSegments({
+		fields: () => read().fields,
+		locale: () => lang.code,
+		hourCycle: () => read().hourCycle ?? lang.hourCycle,
+		value: () => isoToFields(read().value, read().fields),
+		onChange: (next) => onChange(next ? fieldsToIso(next, read().fields) : null),
+		placeholderValue: () => {
+			const current = now(locale.timeZone);
+			const week = isoWeekOf(current);
+			return {
+				year: read().fields.includes("week") ? week.year : current.year,
+				month: current.month,
+				day: current.day,
+				quarter: Math.ceil(current.month / 3),
+				week: week.week,
+				hour: current.hour,
+				minute: current.minute,
+				second: 0
+			};
+		},
+		placeholders: () => lang.dateFieldPlaceholders,
+		periodPatterns: () => lang.dateFieldPeriodPatterns,
+		readonly: () => read().readonly,
+		onExit
+	});
+	useFormReset(() => segments.reset());
+	return segments;
+}
+/** 一组分段里第一个没填的段（都填了时第一段）：点外壳空白处、清空后焦点去这里 */
+var firstSegmentOf = (group) => group?.querySelector("[role=\"spinbutton\"][data-placeholder]") ?? group?.querySelector("[role=\"spinbutton\"]") ?? null;
+/** SegmentedField 的样式：input */
+var segmentedFieldStyles = css.create({ input: { flexGrow: 1 } });
+/** 分段输入框：外壳 + 一组日期分段 */
+var SegmentedField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const fields = readonlyProp(_props, "fields");
+	const outOfRange = readonlyProp(_props, "outOfRange");
+	const hourCycle = readonlyProp(_props, "hourCycle");
+	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 name = readonlyProp(_props, "name");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const icon = readonlyProp(_props, "icon");
+	const suffix = readonlyProp(_props, "suffix");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsSegment = readonlyProp(_props, "propsSegment");
+	const propsLiteral = readonlyProp(_props, "propsLiteral");
+	const rest = restProps(_props, _ctx, true);
+	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
+	}));
+	let group = shallowRef(null);
+	const segments = useFieldSegments(() => ({
+		fields: fields.value,
+		value: value.value,
+		hourCycle: hourCycle.value,
+		readonly: control().disabled || control().readonly
+	}), (next) => value.value = next);
+	const firstSegment = () => firstSegmentOf(group.value);
+	function clear() {
+		segments.clear();
+		value.value = null;
+		firstSegment()?.focus();
+	}
+	return () => {
+		const state = control();
+		const bad = state.invalid || value.value != null && (outOfRange.value?.(value.value) ?? false);
+		const filled = value.value != null || segments.partial;
+		const s = controlParts(appearance(), {
+			...state,
+			invalid: bad
+		});
+		return createVNode("div", mergeProps(mergeAttrs(s.root, propsRoot.value, { onPointerdown: state.disabled ? void 0 : focusOnShell(firstSegment) }), {
+			"data-invalid": bad || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			createVNode(DateSegmentGroup, mergePartProps({
+				sx: segmentedFieldStyles.input,
+				segments,
+				labelledBy: state.labelledBy,
+				describedBy: state.describedBy
+			}, rest, {
+				ref: (instance) => group.value = toElement(instance),
+				id: state.id,
+				segments,
+				disabled: state.disabled,
+				readonly: state.readonly,
+				required: state.required,
+				invalid: bad,
+				propsSegment: propsSegment.value,
+				propsLiteral: propsLiteral.value
+			}), null),
+			clearable.value && filled && !state.disabled && !state.readonly && controlClear(s, propsClear.value, clear),
+			suffix.value,
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": value.value,
+				"disabled": state.disabled
+			}, null)
+		]);
+	};
+}, {
+	name: "SegmentedField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"fields",
+		"outOfRange",
+		"hourCycle",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"name",
+		"clearable",
+		"icon",
+		"suffix",
+		"id",
+		"propsRoot",
+		"propsIcon",
+		"propsClear",
+		"propsSegment",
+		"propsLiteral"
+	]
+});
+//#endregion
+export { SegmentedField, firstSegmentOf, segmentedFieldStyles, useFieldSegments };
+
+//# sourceMappingURL=SegmentedField.js.map

package/dist/date/SegmentedField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/date/SegmentedField.tsx"],"sourcesContent":["/**\n * 分段输入框：输入框外壳（同 TextField）里放一组日期分段、可选的前置图标、清空按钮与尾部内容。\n * DateField、TimeField 是它的两种用法（只差有哪些段与怎样校验）；日期选择器把打开日历的按钮放在 suffix 里。\n *\n *   <SegmentedField fields={['hour', 'minute']} _value={time} />\n *\n * 值是 ISO 字符串（fieldsToIso）；所有段都填了才写回，删掉一段写回 null。写了 name 时用隐藏的 input 随表单提交。\n * 点外壳的空白处时焦点进第一个没填的段。\n *\n * 部件：Root（外壳）、Input（DateSegmentGroup，主元素）、Segment、Literal、Icon、Clear。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { now } from '@internationalized/date';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport type { PresetIconButtonProps } from '../base/CloseButton';\nimport { useLang } from '../config/context';\nimport type { HourCycles } from '../config/lang/lang';\nimport { useFieldControl, useFormReset } 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 { isoWeekOf } from '../utils/data/date';\nimport { toElement } from '../utils/dom/element';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { useDateLocale } from './date-locale';\nimport { fieldsToIso, isoToFields, useDateSegments, type DateSegmentType } from './date-segments';\nimport { DateSegmentGroup, type DateSegmentGroupProps } from './DateSegmentGroup';\n\n/** 由组件管理：角色与关联 */\nexport type SegmentedFieldManaged = 'role' | 'aria-describedby';\n\n/** 分段输入框共有的属性（DateField、TimeField 都有）；未声明的属性落到这组分段上（主元素） */\nexport interface SegmentedFieldOptions\n  extends\n    PartProps<'div', SegmentedFieldManaged>,\n    ControlOptions,\n    ControlIconOptions,\n    Pick<DateSegmentGroupProps, 'propsSegment' | 'propsLiteral'> {\n  /** 12 / 24 小时制（有时的段时）；不写时按语言 */\n  hourCycle?: keyof HourCycles;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过；不写时值超出范围、是不可选的日期也算 */\n  invalid?: boolean;\n  /** 表单提交时的 name（用隐藏的 input，值是 ISO 字符串） */\n  name?: string;\n  /** 有值时显示清空按钮 */\n  clearable?: boolean;\n  /** 框里最后的内容：日期选择器打开日历的按钮 */\n  suffix?: VNodeChild;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 清空按钮的部件属性 */\n  propsClear?: Omit<Partial<PresetIconButtonProps>, 'onClick'>;\n}\n\n/** 未声明的属性落到这组分段上 */\nexport interface SegmentedFieldProps extends SegmentedFieldOptions {\n  /** 值（ISO 字符串）：父级写 _value={x}；没填全时 null */\n  _value?: string | null;\n  /** 有哪些段，按年 → 秒的顺序（显示顺序按语言） */\n  fields: readonly Exclude<DateSegmentType, 'dayPeriod'>[];\n  /** 值超出范围、不可选（有值时调用）：外壳显示出错 */\n  outOfRange?: (value: string) => boolean;\n}\n\n/**\n * 一组分段的状态，按当前语言（段的顺序、小时制、占位文字，没填时占位的是此刻）；值是 ISO 字符串，填全了才写回。\n * SegmentedField 与 DateRangePicker 的开始、结束两组分段用它。在组件 setup 里调用\n */\nexport function useFieldSegments(\n  read: () => {\n    fields: readonly Exclude<DateSegmentType, 'dayPeriod'>[];\n    value: string | null;\n    hourCycle?: keyof HourCycles;\n    readonly: boolean;\n  },\n  onChange: (value: string | null) => void,\n  onExit?: (direction: 1 | -1) => void,\n) {\n  const lang = useLang();\n  const locale = useDateLocale();\n  const segments = useDateSegments({\n    fields: () => read().fields,\n    locale: () => lang.code,\n    hourCycle: () => read().hourCycle ?? lang.hourCycle,\n    value: () => isoToFields(read().value, read().fields),\n    onChange: (next) => onChange(next ? fieldsToIso(next, read().fields) : null),\n    placeholderValue: () => {\n      const current = now(locale.timeZone);\n      // 选周时从这一周所属的年起步（12 月底的那周可能已经算明年的第 1 周）\n      const week = isoWeekOf(current);\n      return {\n        year: read().fields.includes('week') ? week.year : current.year,\n        month: current.month,\n        day: current.day,\n        quarter: Math.ceil(current.month / 3),\n        week: week.week,\n        hour: current.hour,\n        minute: current.minute,\n        second: 0,\n      };\n    },\n    placeholders: () => lang.dateFieldPlaceholders,\n    periodPatterns: () => lang.dateFieldPeriodPatterns,\n    readonly: () => read().readonly,\n    onExit,\n  });\n  useFormReset(() => segments.reset());\n  return segments;\n}\n\n/** 一组分段里第一个没填的段（都填了时第一段）：点外壳空白处、清空后焦点去这里 */\nexport const firstSegmentOf = (group: Element | null | undefined) =>\n  group?.querySelector<HTMLElement>('[role=\"spinbutton\"][data-placeholder]') ??\n  group?.querySelector<HTMLElement>('[role=\"spinbutton\"]') ??\n  null;\n\n/** SegmentedField 的样式：input */\nexport const segmentedFieldStyles = css.create({\n  // 分段占满剩下的宽度：清空按钮、尾部内容贴着外壳的结束边\n  input: { flexGrow: 1 },\n});\n\n/** 分段输入框：外壳 + 一组日期分段 */\nexport const SegmentedField = _component(\n  ({\n    _value: value = _bindable<string | null>(null),\n    fields,\n    outOfRange,\n    hourCycle,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    name,\n    clearable = false,\n    icon,\n    suffix,\n    id,\n    propsRoot,\n    propsIcon,\n    propsClear,\n    propsSegment,\n    propsLiteral,\n    ...rest\n  }: SegmentedFieldProps) => {\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let group = _state.raw<HTMLElement | null>(null);\n\n    const segments = useFieldSegments(\n      () => ({\n        fields,\n        value,\n        hourCycle,\n        readonly: control().disabled || control().readonly,\n      }),\n      (next) => (value = next),\n    );\n    const firstSegment = () => firstSegmentOf(group);\n\n    function clear() {\n      segments.clear();\n      value = null;\n      firstSegment()?.focus();\n    }\n\n    return () => {\n      const state = control();\n      const bad = state.invalid || (value != null && (outOfRange?.(value) ?? false));\n      const filled = value != null || segments.partial;\n      const s = controlParts(appearance(), { ...state, invalid: bad });\n      return (\n        <div\n          {...mergeAttrs<'div'>(s.root, propsRoot, {\n            onPointerdown: state.disabled ? undefined : focusOnShell(firstSegment),\n          })}\n          data-invalid={bad || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          {controlIcon(s, icon, propsIcon)}\n          <DateSegmentGroup\n            {...mergePartProps<DateSegmentGroupProps>(\n              {\n                sx: segmentedFieldStyles.input,\n                segments,\n                labelledBy: state.labelledBy,\n                describedBy: state.describedBy,\n              },\n              rest,\n              {\n                ref: (instance: unknown) => (group = toElement(instance)),\n                id: state.id,\n                segments,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                invalid: bad,\n                propsSegment,\n                propsLiteral,\n              },\n            )}\n          />\n          {clearable &&\n            filled &&\n            !state.disabled &&\n            !state.readonly &&\n            controlClear(s, propsClear, clear)}\n          {suffix}\n          <FormValue name={name} value={value} disabled={state.disabled} />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/TimeField.d.ts

@@ -0,0 +1,36 @@
+import type { Time } from '@internationalized/date';
+import type { DateValueTypes } from './date-locale';
+import { type SegmentedFieldOptions } from './SegmentedField';
+/** 时间精确到哪一段 */
+export interface TimeFieldGranularities {
+    /** 只有时：'14:00' */
+    hour: unknown;
+    /** 时分（默认）：'14:30' */
+    minute: unknown;
+    /** 时分秒：'14:30:15' */
+    second: unknown;
+}
+/** 时间输入框接受的值：'HH:mm[:ss]' 字符串，或 @internationalized/date 的 Time */
+export type TimeInput = string | Time;
+/** TimeInput → Time：ISO 字符串按 'HH:mm[:ss]' 解析，空值或格式不对时为 null */
+export declare const toTime: (input: TimeInput | null | undefined) => Time | null;
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+export interface TimeFieldProps<V extends TimeInput = string> extends SegmentedFieldOptions {
+    /** 值（'HH:mm' 或 'HH:mm:ss'，24 小时制；或 Time，写回时保持同一种类型）：父级写 _value={x}；没填全时 null */
+    _value?: V | null;
+    /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；dateValue 写 Time */
+    valueType?: keyof DateValueTypes;
+    /** 精确到哪一段，默认 minute */
+    granularity?: keyof TimeFieldGranularities;
+    /** 最早的时间（'09:00' 或 Time）：早于它显示出错 */
+    min?: TimeInput;
+    /** 最晚的时间（'18:00' 或 Time）：晚于它显示出错 */
+    max?: TimeInput;
+    /**
+     * 不可选的时间（午休、已约满的时段）：键入时显示出错，TimePicker 的列表里不可用。
+     * 第一个参数是 'HH:mm'，第二个是同一时刻的 Time：`(_, time) => time.hour === 12`
+     */
+    isTimeUnavailable?: (time: string, value: Time) => boolean;
+}
+/** 时间输入框：分段输入 */
+export declare const TimeField: <V extends TimeInput>(props: TimeFieldProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/date/TimeField.js

@@ -0,0 +1,56 @@
+import { parseIsoTime, toIsoTime } from "../utils/data/date.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";
+//#region src/date/TimeField.tsx
+/** 时间精确到哪一段 */
+/** 时间输入框接受的值：'HH:mm[:ss]' 字符串，或 @internationalized/date 的 Time */
+/** TimeInput → Time：ISO 字符串按 'HH:mm[:ss]' 解析，空值或格式不对时为 null */
+var toTime = (input) => typeof input === "string" || input == null ? parseIsoTime(input) : input;
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+/** 时间输入框：分段输入 */
+var TimeField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const granularity = readonlyProp(_props, "granularity", "minute");
+	const valueType = readonlyProp(_props, "valueType", "iso");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isTimeUnavailable = readonlyProp(_props, "isTimeUnavailable");
+	const rest = restProps(_props, _ctx, true);
+	const outOfRange = (iso) => {
+		const time = parseIsoTime(iso);
+		if (time == null) return false;
+		const low = toTime(min.value);
+		const high = toTime(max.value);
+		return low != null && time.compare(low) < 0 || high != null && time.compare(high) > 0 || (isTimeUnavailable.value?.(toIsoTime(time), time) ?? false);
+	};
+	const iso = computed(() => value.value == null || typeof value.value === "string" ? value.value : toIsoTime(value.value, granularity.value === "second"));
+	let lastLike;
+	function write(next) {
+		lastLike = value.value ?? lastLike;
+		const asTime = lastLike != null ? typeof lastLike !== "string" : valueType.value === "dateValue";
+		value.value = next != null && asTime ? parseIsoTime(next) : next;
+	}
+	return () => createVNode(SegmentedField, mergeProps(rest, {
+		"onUpdate:_value": write,
+		"_value": iso.value,
+		"fields": segmentFields(granularity.value, true),
+		"outOfRange": outOfRange
+	}), null);
+}, {
+	name: "TimeField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"granularity",
+		"valueType",
+		"min",
+		"max",
+		"isTimeUnavailable"
+	]
+});
+//#endregion
+export { TimeField, toTime };
+
+//# sourceMappingURL=TimeField.js.map

package/dist/date/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/date/TimeField.tsx"],"sourcesContent":["/**\n * 时间输入框：分段输入时、分（可选秒），12 / 24 小时制跟随语言（zh-CN 24 小时，en-US 12 小时加 AM / PM），也可以用 hourCycle 指定。\n * 参考 React Aria TimeField、原生 input type=\"time\"。要从按步长列出的时间里点选用 TimePicker。\n *\n *   <Field label=\"提醒时间\"><TimeField _value={time} /></Field>\n *   <TimeField granularity=\"second\" hourCycle=\"h12\" _value={at} aria-label=\"打卡时间\" />\n *\n * 值是 'HH:mm'（granularity 为 second 时 'HH:mm:ss'），时总是 24 小时制，与原生 input type=\"time\" 一致；\n * 也可以是 @internationalized/date 的 Time，写回时保持同一种类型。\n * 键盘同 DateField；12 小时制时在上午 / 下午那段打 a、p 切换。部件见 SegmentedField。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { Time } from '@internationalized/date';\nimport { parseIsoTime, toIsoTime } from '../utils/data/date';\nimport type { DateValueTypes } from './date-locale';\nimport { segmentFields } from './date-segments';\nimport { SegmentedField, type SegmentedFieldOptions } from './SegmentedField';\n\n/** 时间精确到哪一段 */\nexport interface TimeFieldGranularities {\n  /** 只有时：'14:00' */\n  hour: unknown;\n  /** 时分（默认）：'14:30' */\n  minute: unknown;\n  /** 时分秒：'14:30:15' */\n  second: unknown;\n}\n\n/** 时间输入框接受的值：'HH:mm[:ss]' 字符串，或 @internationalized/date 的 Time */\nexport type TimeInput = string | Time;\n\n/** TimeInput → Time：ISO 字符串按 'HH:mm[:ss]' 解析，空值或格式不对时为 null */\nexport const toTime = (input: TimeInput | null | undefined): Time | null =>\n  typeof input === 'string' || input == null ? parseIsoTime(input) : input;\n\n/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */\nexport interface TimeFieldProps<V extends TimeInput = string> extends SegmentedFieldOptions {\n  /** 值（'HH:mm' 或 'HH:mm:ss'，24 小时制；或 Time，写回时保持同一种类型）：父级写 _value={x}；没填全时 null */\n  _value?: V | null;\n  /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；dateValue 写 Time */\n  valueType?: keyof DateValueTypes;\n  /** 精确到哪一段，默认 minute */\n  granularity?: keyof TimeFieldGranularities;\n  /** 最早的时间（'09:00' 或 Time）：早于它显示出错 */\n  min?: TimeInput;\n  /** 最晚的时间（'18:00' 或 Time）：晚于它显示出错 */\n  max?: TimeInput;\n  /**\n   * 不可选的时间（午休、已约满的时段）：键入时显示出错，TimePicker 的列表里不可用。\n   * 第一个参数是 'HH:mm'，第二个是同一时刻的 Time：`(_, time) => time.hour === 12`\n   */\n  isTimeUnavailable?: (time: string, value: Time) => boolean;\n}\n\n/** 时间输入框：分段输入 */\nexport const TimeField = _component(\n  <V extends TimeInput>({\n    _value: value = _bindable<V | null>(null),\n    granularity = 'minute',\n    valueType = 'iso',\n    min,\n    max,\n    isTimeUnavailable,\n    ...rest\n  }: TimeFieldProps<V>) => {\n    const outOfRange = (iso: string) => {\n      const time = parseIsoTime(iso);\n      if (time == null) return false;\n      const low = toTime(min);\n      const high = toTime(max);\n      return (\n        (low != null && time.compare(low) < 0) ||\n        (high != null && time.compare(high) > 0) ||\n        (isTimeUnavailable?.(toIsoTime(time), time) ?? false)\n      );\n    };\n    const iso = _derived(\n      value == null || typeof value === 'string'\n        ? value\n        : toIsoTime(value, granularity === 'second'),\n    );\n    // 值清空后再填：仍按清空前的类型写回\n    let lastLike: V | undefined;\n    function write(next: string | null) {\n      lastLike = value ?? lastLike;\n      const asTime = lastLike != null ? typeof lastLike !== 'string' : valueType === 'dateValue';\n      value = (next != null && asTime ? parseIsoTime(next) : next) as V | null;\n    }\n    return () => (\n      <SegmentedField\n        {...rest}\n        onUpdate:_value={write}\n        _value={iso}\n        fields={segmentFields(granularity, true)}\n        outOfRange={outOfRange}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAgCA,IAAa,UAAU,UACrB,OAAO,UAAU,YAAY,SAAS,OAAO,aAAa,KAAK,IAAI;;;AAsBrE,IAAa,YAAY,0BACvB,QAAA,SAQyB;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAPa,MAAI,KAAA,IAAA;CAAA,MAAA,cAAAC,aAAA,QAAA,eAC1B,QAAQ;CAAA,MAAA,YAAAA,aAAA,QAAA,aACV,KAAK;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,oBAAAA,aAAA,QAAA,mBAAA;CAAA,MAId,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,cAAc,QAAgB;EAClC,MAAM,OAAO,aAAa,GAAG;EAC7B,IAAI,QAAQ,MAAM,OAAO;EACzB,MAAM,MAAM,OAAM,IAAA,KAAI;EACtB,MAAM,OAAO,OAAM,IAAA,KAAI;EACvB,OACG,OAAO,QAAQ,KAAK,QAAQ,GAAG,IAAI,KACnC,QAAQ,QAAQ,KAAK,QAAQ,IAAI,IAAI,MACrC,kBAAA,QAAoB,UAAU,IAAI,GAAG,IAAI,KAAK;CAEnD;CACA,MAAM,MAAGC,eACP,MAAA,SAAS,QAAQ,OAAA,MAAA,UAAiB,WAAQ,MAAA,QAEtC,UAAS,MAAA,OAAQ,YAAA,UAAgB,QAAQ,CAAC;CAGhD,IAAI;CACJ,SAAS,MAAM,MAAqB;EAClC,WAAW,MAAA,SAAS;EACpB,MAAM,SAAS,YAAY,OAAO,OAAO,aAAa,WAAW,UAAA,UAAc;EAC/E,MAAA,QAAS,QAAQ,QAAQ,SAAS,aAAa,IAAI,IAAI;CACzD;CACA,aAAOC,YAAA,gBAAAC,WAEC,MAAI;EAAA,mBACS;EAAK,UAAA,IAAA;EAAA,UAEd,cAAa,YAAA,OAAc,IAAI;EAAC,cAC5B;CAAU,CAAA,GAAA,IAAA;AAG5B,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/date/TimePicker.d.ts

@@ -0,0 +1,25 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type ButtonProps } from '../base/Button';
+import { type ListboxProps } from '../input/Listbox';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PickerPopoverParts } from './picker-popover';
+import { type TimeFieldProps, type TimeInput } from './TimeField';
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+export interface TimePickerProps<V extends TimeInput = string> extends TimeFieldProps<V>, PickerPopoverParts, OpenChangeProps {
+    /** 列表是否打开：父级可写 _open={x} */
+    _open?: boolean;
+    /** 列表里相邻两项相隔几分钟，默认 30 */
+    step?: number;
+    /** 时间列表的部件属性 */
+    propsList?: Omit<Partial<ListboxProps>, 'items' | '_value' | 'onPick'>;
+    /** “此刻”按钮的部件属性 */
+    propsNow?: Omit<Partial<ButtonProps>, 'onClick'>;
+}
+/** TimePicker 的样式：popover、list、now */
+export declare const timePickerStyles: Readonly<{
+    list: css.CompiledStyles;
+    now: css.CompiledStyles;
+    popover: css.CompiledStyles;
+}>;
+/** 时间选择器：分段输入 + 按步长列出的时间 */
+export declare const TimePicker: <V extends TimeInput>(props: TimePickerProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;