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

package/dist/date/DateSegmentGroup.js

@@ -0,0 +1,176 @@
+import { useLang } from "../config/context.js";
+import { defaultLabelledBy, mergeAttrs } from "../utils/props.js";
+import { isRtl } from "../utils/dom/direction.js";
+import { handleSegmentKeydown } from "./date-segments.js";
+import { createVNode, mergeProps, nextTick, ref, shallowRef, useId } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/date/DateSegmentGroup.tsx
+/** 角色与状态由组件管理 */
+/** 每段由组件管理的属性 */
+/** 未声明的属性落到这一组（role="group"）上 */
+/** DateSegmentGroup 的样式：root、segment、placeholder、literal */
+var dateSegmentStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		minWidth: 0,
+		paddingBlock: "_xs",
+		whiteSpace: "nowrap",
+		fontVariantNumeric: "tabular-nums"
+	},
+	segment: {
+		boxSizing: "content-box",
+		paddingInline: "0.1em",
+		borderRadius: "_xs",
+		caretColor: "transparent",
+		outlineStyle: "none",
+		textAlign: "end",
+		backgroundColor: {
+			default: "transparent",
+			":focus": "_accent"
+		},
+		color: {
+			default: "inherit",
+			":focus": "_accentContrast"
+		},
+		cursor: "text"
+	},
+	placeholder: { color: {
+		default: "_textMuted",
+		":focus": "_accentContrast"
+	} },
+	literal: {
+		color: "_textMuted",
+		whiteSpace: "pre"
+	},
+	disabled: { cursor: "not-allowed" }
+});
+/** 一组日期分段 */
+var DateSegmentGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const segments = readonlyProp(_props, "segments");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const readonly = readonlyProp(_props, "readonly", false);
+	const required = readonlyProp(_props, "required", false);
+	const invalid = readonlyProp(_props, "invalid", false);
+	const labelledBy = readonlyProp(_props, "labelledBy");
+	const describedBy = readonlyProp(_props, "describedBy");
+	const propsSegment = readonlyProp(_props, "propsSegment");
+	const propsLiteral = readonlyProp(_props, "propsLiteral");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const id = useId();
+	const elements = /* @__PURE__ */ new Map();
+	let root = shallowRef(null);
+	let composed = ref(0);
+	effect(() => {
+		const type = segments.value.focusedSegment;
+		const target = type && elements.get(type);
+		if (!target || !root.value?.contains(document.activeElement) || document.activeElement === target) return;
+		target.focus();
+	});
+	const editable = () => !disabled.value && !readonly.value;
+	function onBeforeinput(event) {
+		if (event.inputType === "insertCompositionText") return;
+		event.preventDefault();
+		if (!editable()) return;
+		if (event.inputType.startsWith("delete")) segments.value.backspace();
+		else if (event.data) segments.value.type(event.data);
+	}
+	function onCompositionend(event) {
+		const focused = segments.value.focusedSegment;
+		if (editable() && event.data) segments.value.type(event.data);
+		composed.value += 1;
+		nextTick(() => elements.get(segments.value.focusedSegment ?? focused)?.focus());
+	}
+	function onKeydown(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			segments.value.commit();
+			root.value?.closest("form")?.requestSubmit();
+			return;
+		}
+		if (!root.value || disabled.value) return;
+		if (readonly.value && !["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+		if (handleSegmentKeydown(segments.value, event, isRtl(root.value))) event.preventDefault();
+	}
+	function onFocusout(event) {
+		if (!root.value?.contains(event.relatedTarget)) segments.value.setFocused(null);
+	}
+	return () => {
+		return createVNode("div", mergeProps(mergeAttrs({
+			sx: dateSegmentStyles.root,
+			"aria-labelledby": defaultLabelledBy(rest, labelledBy.value),
+			"aria-describedby": describedBy.value
+		}, rest, {
+			ref: root,
+			role: "group",
+			"aria-disabled": disabled.value || void 0,
+			onFocusout
+		}), {
+			"data-invalid": invalid.value || void 0,
+			"data-disabled": disabled.value || void 0
+		}), [segments.value.segments.map((segment, index) => {
+			if (segment.type === "literal") return createVNode("span", mergeProps({ "key": `literal-${index}` }, mergeAttrs({ sx: dateSegmentStyles.literal }, propsLiteral.value), { "aria-hidden": "true" }), [segment.text]);
+			const type = segment.type;
+			const segmentId = `${id}-${type}`;
+			const own = typeof propsSegment.value === "function" ? propsSegment.value(segment) : propsSegment.value;
+			return createVNode("span", mergeProps({ "key": `${type}-${composed.value}` }, mergeAttrs({
+				sx: [
+					dateSegmentStyles.segment,
+					segment.placeholder && dateSegmentStyles.placeholder,
+					disabled.value && dateSegmentStyles.disabled
+				],
+				"aria-describedby": describedBy.value,
+				spellcheck: false,
+				autocapitalize: "off",
+				autocorrect: "off",
+				enterkeyhint: "next"
+			}, own, {
+				id: segmentId,
+				"aria-label": segment.label,
+				"aria-labelledby": labelledBy.value ? `${labelledBy.value} ${segmentId}` : void 0,
+				ref: (element) => {
+					if (element instanceof HTMLElement) elements.set(type, element);
+				},
+				role: "spinbutton",
+				tabindex: disabled.value ? -1 : 0,
+				contenteditable: editable() ? "true" : void 0,
+				inputmode: type === "dayPeriod" ? "text" : "numeric",
+				"aria-valuenow": segment.value ?? void 0,
+				"aria-valuemin": segment.min,
+				"aria-valuemax": segment.max,
+				"aria-valuetext": segment.placeholder ? lang.dateFieldEmpty : segment.text,
+				"aria-required": required.value || void 0,
+				"aria-invalid": invalid.value || void 0,
+				"aria-readonly": readonly.value || void 0,
+				"aria-disabled": disabled.value || void 0,
+				onFocus: () => segments.value.setFocused(type),
+				onBeforeinput,
+				onCompositionend,
+				onKeydown,
+				onPaste: (event) => event.preventDefault()
+			}), {
+				"data-type": type,
+				"data-placeholder": segment.placeholder || void 0
+			}), [segment.text]);
+		})]);
+	};
+}, {
+	name: "DateSegmentGroup",
+	props: [
+		"segments",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"labelledBy",
+		"describedBy",
+		"propsSegment",
+		"propsLiteral"
+	]
+});
+//#endregion
+export { DateSegmentGroup, dateSegmentStyles };
+
+//# sourceMappingURL=DateSegmentGroup.js.map

package/dist/date/DateSegmentGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSegmentGroup.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/date/DateSegmentGroup.tsx"],"sourcesContent":["/**\n * 一组日期分段（年 / 月 / 日、时 : 分）：每段是 role=\"spinbutton\" 的可编辑元素，分隔符对读屏隐藏。\n * 状态由调用方的 useDateSegments 给；DateField、TimeField 放在输入框外壳里用，DateRangePicker 在一个外壳里放两组。\n *\n * - 每段 contenteditable 加 inputmode=\"numeric\"：手机上弹出数字键盘，输入法打的全角数字也收得到；\n *   文字由组件渲染，beforeinput 一律拦下交给 useDateSegments（输入法组合结束后重新渲染这一段）；\n * - 每段在 Tab 顺序里（同 React Aria），←→ 也能换段；输入满了自动跳到下一段，焦点跟过去；\n * - 读屏名称是“字段名 + 段名”（aria-labelledby 指向外部标签与这一段），没填的段取值念“未填写”。\n *\n * 部件：Root（div role=\"group\"，主元素）、Segment（每段）、Literal（分隔符）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId } from 'vue';\nimport { isRtl } from '../utils/dom/direction';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  handleSegmentKeydown,\n  type DateSegment,\n  type DateSegmentsState,\n  type DateSegmentType,\n} from './date-segments';\nimport { useLang } from '../config/context';\n\n/** 角色与状态由组件管理 */\nexport type DateSegmentGroupManaged = 'role';\n\n/** 每段由组件管理的属性 */\nexport type DateSegmentManaged =\n  | 'role'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'tabindex'\n  | 'contenteditable'\n  | 'inputmode'\n  | 'aria-valuenow'\n  | 'aria-valuemin'\n  | 'aria-valuemax'\n  | 'aria-valuetext'\n  | 'aria-required'\n  | 'aria-invalid'\n  | 'aria-readonly'\n  | 'aria-disabled';\n\n/** 未声明的属性落到这一组（role=\"group\"）上 */\nexport interface DateSegmentGroupProps extends PartProps<'div', DateSegmentGroupManaged> {\n  /** 分段状态（useDateSegments） */\n  segments: DateSegmentsState;\n  /** 不可用：段不能聚焦 */\n  disabled?: boolean;\n  /** 只读：能聚焦、不能改 */\n  readonly?: boolean;\n  /** 必填（每段 aria-required） */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 外部标签的 id：每段的读屏名称是“标签 + 段名” */\n  labelledBy?: string;\n  /** 说明与错误的 id（aria-describedby），给每一段 */\n  describedBy?: string;\n  /** 每段的部件属性：固定的对象，或按这一段返回 */\n  propsSegment?:\n    | PartProps<'span', DateSegmentManaged>\n    | ((segment: DateSegment) => PartProps<'span', DateSegmentManaged>);\n  /** 分隔符的部件属性 */\n  propsLiteral?: PartProps<'span', 'aria-hidden'>;\n}\n\n/** DateSegmentGroup 的样式：root、segment、placeholder、literal */\nexport const dateSegmentStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    minWidth: 0,\n    paddingBlock: '_xs',\n    whiteSpace: 'nowrap',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  segment: {\n    boxSizing: 'content-box',\n    paddingInline: '0.1em',\n    borderRadius: '_xs',\n    // 光标与选区由组件画（整段高亮），不显示浏览器的插入符\n    caretColor: 'transparent',\n    outlineStyle: 'none',\n    textAlign: 'end',\n    backgroundColor: { default: 'transparent', ':focus': '_accent' },\n    color: { default: 'inherit', ':focus': '_accentContrast' },\n    cursor: 'text',\n  },\n  // 占位文字是真正的文字（不是原生 placeholder），要满足 4.5:1：用 textMuted\n  placeholder: { color: { default: '_textMuted', ':focus': '_accentContrast' } },\n  literal: { color: '_textMuted', whiteSpace: 'pre' },\n  disabled: { cursor: 'not-allowed' },\n});\n\n/** 一组日期分段 */\nexport const DateSegmentGroup = _component(\n  ({\n    segments,\n    disabled = false,\n    readonly = false,\n    required = false,\n    invalid = false,\n    labelledBy,\n    describedBy,\n    propsSegment,\n    propsLiteral,\n    ...rest\n  }: DateSegmentGroupProps) => {\n    const lang = useLang();\n    const id = useId();\n    const elements = new Map<DateSegmentType, HTMLElement>();\n    let root = _state.raw<HTMLElement | null>(null);\n    // 输入法组合会直接改掉段里的文字（beforeinput 拦不住）：结束后换个 key 重新渲染这一段\n    let composed = _state(0);\n\n    // 输入满了跳段、Backspace 删空退回上一段：焦点跟着 focusedSegment 走（只在焦点本来就在这组里时）\n    _effect(() => {\n      const type = segments.focusedSegment;\n      const target = type && elements.get(type);\n      if (!target || !root?.contains(document.activeElement) || document.activeElement === target)\n        return;\n      target.focus();\n    });\n\n    const editable = () => !disabled && !readonly;\n\n    function onBeforeinput(event: InputEvent) {\n      // 输入法组合中的文字取消不了，等 compositionend\n      if (event.inputType === 'insertCompositionText') return;\n      event.preventDefault();\n      if (!editable()) return;\n      if (event.inputType.startsWith('delete')) segments.backspace();\n      else if (event.data) segments.type(event.data);\n    }\n\n    function onCompositionend(event: CompositionEvent) {\n      const focused = segments.focusedSegment;\n      if (editable() && event.data) segments.type(event.data);\n      composed += 1;\n      // 重新渲染后元素换了：焦点留在原来那段（或已经跳到的下一段）\n      void nextTick(() => elements.get(segments.focusedSegment ?? focused!)?.focus());\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      // Enter 同原生的输入框：写回打了一半的年份，再提交所在的表单（查询栏、对话框里的表单）\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        segments.commit();\n        root?.closest('form')?.requestSubmit();\n        return;\n      }\n      if (!root || disabled) return;\n      // 只读时只能换段\n      if (readonly && !['ArrowLeft', 'ArrowRight'].includes(event.key)) return;\n      if (handleSegmentKeydown(segments, event, isRtl(root))) event.preventDefault();\n    }\n\n    function onFocusout(event: FocusEvent) {\n      if (!root?.contains(event.relatedTarget as Node | null)) segments.setFocused(null);\n    }\n\n    return () => {\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: dateSegmentStyles.root,\n              'aria-labelledby': defaultLabelledBy(rest, labelledBy),\n              'aria-describedby': describedBy,\n            },\n            rest,\n            // 整组标为不可用：标签（for 指向这一组）随之按不可用处理，不只是各段\n            {\n              ref: _toRef(root),\n              role: 'group',\n              'aria-disabled': disabled || undefined,\n              onFocusout,\n            },\n          )}\n          data-invalid={invalid || undefined}\n          data-disabled={disabled || undefined}\n        >\n          {segments.segments.map((segment, index) => {\n            if (segment.type === 'literal') {\n              return (\n                <span\n                  key={`literal-${index}`}\n                  {...mergeAttrs<'span'>({ sx: dateSegmentStyles.literal }, propsLiteral)}\n                  aria-hidden=\"true\"\n                >\n                  {segment.text}\n                </span>\n              );\n            }\n            const type = segment.type;\n            const segmentId = `${id}-${type}`;\n            const own = typeof propsSegment === 'function' ? propsSegment(segment) : propsSegment;\n            return (\n              <span\n                key={`${type}-${composed}`}\n                {...mergeAttrs<'span'>(\n                  {\n                    sx: [\n                      dateSegmentStyles.segment,\n                      segment.placeholder && dateSegmentStyles.placeholder,\n                      disabled && dateSegmentStyles.disabled,\n                    ],\n                    'aria-describedby': describedBy,\n                    spellcheck: false,\n                    autocapitalize: 'off',\n                    autocorrect: 'off',\n                    enterkeyhint: 'next',\n                  },\n                  own,\n                  {\n                    // 每段的名称各不相同（年、月、日），由组件管理\n                    id: segmentId,\n                    'aria-label': segment.label,\n                    'aria-labelledby': labelledBy ? `${labelledBy} ${segmentId}` : undefined,\n                    ref: (element: unknown) => {\n                      if (element instanceof HTMLElement) elements.set(type, element);\n                    },\n                    role: 'spinbutton',\n                    tabindex: disabled ? -1 : 0,\n                    contenteditable: editable() ? 'true' : undefined,\n                    inputmode: type === 'dayPeriod' ? 'text' : 'numeric',\n                    'aria-valuenow': segment.value ?? undefined,\n                    'aria-valuemin': segment.min,\n                    'aria-valuemax': segment.max,\n                    'aria-valuetext': segment.placeholder ? lang.dateFieldEmpty : segment.text,\n                    'aria-required': required || undefined,\n                    'aria-invalid': invalid || undefined,\n                    'aria-readonly': readonly || undefined,\n                    'aria-disabled': disabled || undefined,\n                    onFocus: () => segments.setFocused(type),\n                    onBeforeinput,\n                    onCompositionend,\n                    onKeydown,\n                    // 粘贴的文字不进段里（会打乱渲染）；需要时用输入\n                    onPaste: (event: ClipboardEvent) => event.preventDefault(),\n                  },\n                )}\n                data-type={type}\n                data-placeholder={segment.placeholder || undefined}\n              >\n                {segment.text}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/DateTime.d.ts

@@ -0,0 +1,21 @@
+import type { DateValue } from '@internationalized/date';
+import { type PartProps } from '../utils/props';
+/** 日期时间的值：Date、DateValue 或 ISO 字符串 */
+export type DateTimeInput = Date | DateValue | string;
+/** 未声明的属性落到 time 上 */
+export interface DateTimeProps extends PartProps<'time', 'datetime'> {
+    /** 值 */
+    value: DateTimeInput;
+    /** 日期的详略：full、long、medium、short；不写时 medium */
+    dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+    /** 时间的详略；不写时带时间的值用 short，只有日期的值不显示 */
+    timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];
+    /** 逐项指定（年、月、星期……），写了时忽略 dateStyle、timeStyle */
+    options?: Intl.DateTimeFormatOptions;
+}
+/** 值里有没有时间：Date、带 T 的字符串、CalendarDateTime 与 ZonedDateTime */
+export declare const hasTimeOf: (value: DateTimeInput) => boolean;
+/** time 元素的 datetime：Date 写 UTC 的 ISO，其余原样（DateValue 的 toString 就是 ISO） */
+export declare const machineDateTime: (value: DateTimeInput) => string;
+/** 日期时间的文字（time） */
+export declare const DateTime: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DateTimeProps>;

package/dist/date/DateTime.js

@@ -0,0 +1,39 @@
+import { mergeAttrs } from "../utils/props.js";
+import { useFormat } from "../config/lang/format.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/date/DateTime.tsx
+/** 日期时间的值：Date、DateValue 或 ISO 字符串 */
+/** 未声明的属性落到 time 上 */
+/** 值里有没有时间：Date、带 T 的字符串、CalendarDateTime 与 ZonedDateTime */
+var hasTimeOf = (value) => value instanceof Date || (typeof value === "string" ? value.includes("T") : "hour" in value);
+/** time 元素的 datetime：Date 写 UTC 的 ISO，其余原样（DateValue 的 toString 就是 ISO） */
+var machineDateTime = (value) => value instanceof Date ? value.toISOString() : value.toString();
+/** 日期时间的文字（time） */
+var DateTime = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = readonlyProp(_props, "value");
+	const dateStyle = readonlyProp(_props, "dateStyle");
+	const timeStyle = readonlyProp(_props, "timeStyle");
+	const options = readonlyProp(_props, "options");
+	const rest = restProps(_props, _ctx, true);
+	const format = useFormat();
+	return () => {
+		const resolved = options.value ?? {
+			dateStyle: dateStyle.value ?? "medium",
+			timeStyle: timeStyle.value ?? (hasTimeOf(value.value) ? "short" : void 0)
+		};
+		return createVNode("time", mergeAttrs({}, rest, { datetime: machineDateTime(value.value) }), [format.date(value.value, resolved)]);
+	};
+}, {
+	name: "DateTime",
+	props: [
+		"value",
+		"dateStyle",
+		"timeStyle",
+		"options"
+	]
+});
+//#endregion
+export { DateTime, hasTimeOf, machineDateTime };
+
+//# sourceMappingURL=DateTime.js.map

package/dist/date/DateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/date/DateTime.tsx"],"sourcesContent":["/**\n * 日期时间的文字（time 元素）：按当前语言、时区、日历格式化，datetime 属性写机器可读的值。参考 HTML 的 time 元素。\n *\n *   <DateTime value={order.placedAt} />                                    // 2026年10月20日 14:30\n *   <DateTime value=\"2026-10-20\" dateStyle=\"full\" />                       // 2026年10月20日星期二\n *   <DateTime value={at} options={{ month: 'short', day: 'numeric' }} />\n *\n * 值是 Date、DateValue 或 ISO 字符串（同 useFormat().date）。不写格式时：只有日期的值显示日期，带时间的再加上时分。\n * 要“3 分钟前”这样的写法用 RelativeTime。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { DateValue } from '@internationalized/date';\nimport { useFormat } from '../config/lang/format';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 日期时间的值：Date、DateValue 或 ISO 字符串 */\nexport type DateTimeInput = Date | DateValue | string;\n\n/** 未声明的属性落到 time 上 */\nexport interface DateTimeProps extends PartProps<'time', 'datetime'> {\n  /** 值 */\n  value: DateTimeInput;\n  /** 日期的详略：full、long、medium、short；不写时 medium */\n  dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];\n  /** 时间的详略；不写时带时间的值用 short，只有日期的值不显示 */\n  timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];\n  /** 逐项指定（年、月、星期……），写了时忽略 dateStyle、timeStyle */\n  options?: Intl.DateTimeFormatOptions;\n}\n\n/** 值里有没有时间：Date、带 T 的字符串、CalendarDateTime 与 ZonedDateTime */\nexport const hasTimeOf = (value: DateTimeInput) =>\n  value instanceof Date || (typeof value === 'string' ? value.includes('T') : 'hour' in value);\n\n/** time 元素的 datetime：Date 写 UTC 的 ISO，其余原样（DateValue 的 toString 就是 ISO） */\nexport const machineDateTime = (value: DateTimeInput) =>\n  value instanceof Date ? value.toISOString() : value.toString();\n\n/** 日期时间的文字（time） */\nexport const DateTime = _component(\n  ({ value, dateStyle, timeStyle, options, ...rest }: DateTimeProps) => {\n    const format = useFormat();\n    return () => {\n      const resolved: Intl.DateTimeFormatOptions = options ?? {\n        dateStyle: dateStyle ?? 'medium',\n        timeStyle: timeStyle ?? (hasTimeOf(value) ? 'short' : undefined),\n      };\n      return (\n        <time {...mergeAttrs<'time'>({}, rest, { datetime: machineDateTime(value) })}>\n          {format.date(value, resolved)}\n        </time>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;AA+BA,IAAa,aAAa,UACxB,iBAAiB,SAAS,OAAO,UAAU,WAAW,MAAM,SAAS,GAAG,IAAI,UAAU;;AAGxF,IAAa,mBAAmB,UAC9B,iBAAiB,OAAO,MAAM,YAAY,IAAI,MAAM,SAAS;;AAG/D,IAAa,WAAW,0BACtB,QAAA,SAAsE;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAA1B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC9C,MAAM,SAAS,UAAU;CACzB,aAAa;EACX,MAAM,WAAuC,QAAA,SAAW;GACtD,WAAW,UAAA,SAAa;GACxB,WAAW,UAAA,UAAc,UAAS,MAAA,KAAM,IAAI,UAAU,KAAA;EACxD;EACA,OAAAC,YAAA,QACY,WAAmB,CAAC,GAAG,MAAM,EAAE,UAAU,gBAAe,MAAA,KAAM,EAAE,CAAC,GAAC,CACzE,OAAO,KAAI,MAAA,OAAQ,QAAQ,CAAC,CAAA;CAGnC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/date/QuarterCalendar.d.ts

@@ -0,0 +1,22 @@
+import { type DateRange } from '../utils/data/date';
+import { type PartProps } from '../utils/props';
+import { type DateInput } from './date-locale';
+/** 未声明的属性落到根元素上（aria-label 等） */
+export interface QuarterCalendarProps extends PartProps<'div', 'role'> {
+    /** 选一个季度（默认），或选一段区间 */
+    mode?: 'single' | 'range';
+    /** 单选时是 'YYYY-Qn'，区间时是 `{ start, end }`：父级写 _value={x}；没有时 null */
+    _value?: string | DateRange<string> | null;
+    /** 最早可选的日期：整个季度都早于它时不可用 */
+    min?: DateInput;
+    /** 最晚可选的日期：整个季度都晚于它时不可用 */
+    max?: DateInput;
+    /** 不可用：不能翻页、不能选 */
+    disabled?: boolean;
+    /** 只读：能翻页、移动焦点，不能改选择 */
+    readonly?: boolean;
+    /** 选好了（单选选了一个，区间选了结束）：日期选择器据此关闭弹层 */
+    onPick?: () => void;
+}
+/** 季度面板：四个季度一页，单选或区间 */
+export declare const QuarterCalendar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<QuarterCalendarProps>;

package/dist/date/QuarterCalendar.js

@@ -0,0 +1,231 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { VisuallyHidden, visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { IconButton } from "../base/IconButton.js";
+import { isRtl } from "../utils/dom/direction.js";
+import { toIsoQuarter } from "../utils/data/date.js";
+import { toDateLimits, useDateLocale } from "./date-locale.js";
+import { calendarStyles } from "./CalendarView.js";
+import { isPeriodDisabled } from "./DateField.js";
+import { computed, createVNode, isVNode, mergeProps, nextTick, ref, shallowRef, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronLeft, ChevronRight } from "@lucide/icons";
+//#region src/date/QuarterCalendar.tsx
+/**
+* 季度面板：一年一页的四个季度（季度报表、考核周期），翻页换年；选一个季度，或选一段区间（先开始、再结束）。
+* DatePicker、DateRangePicker 的 granularity="quarter" 弹出的就是它，也可以单独放在页面上。
+*
+*   <QuarterCalendar _value={quarter} aria-label="考核季度" />               // '2026-Q4'
+*   <QuarterCalendar mode="range" _value={range} aria-label="对比区间" />    // { start: '2026-Q1', end: '2026-Q3' }
+*
+* 外观与 Calendar 的月份视图一致（同一套 calendarStyles）：一行四格，区间连成一条，本季度带描边。
+* 焦点在当前季度上（roving tabindex）：←→ 移动（到头时换年；从右到左排版时反过来），Home / End 到第一、第四季度，
+* Page Up / Down 换年，Enter / 空格选中；区间选到一半时悬停预览，Esc 取消。整段在 min–max 之外的季度不可用。
+*
+* 部件：Root（div，role="group"）、Header、Previous、Next（IconButton）、Heading、Grid（table）、Cell、CellButton。
+*/
+/** 未声明的属性落到根元素上（aria-label 等） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var quarterKey = (year, quarter) => `${String(year).padStart(4, "0")}-Q${quarter}`;
+var yearOf = (key) => Number(key.slice(0, 4));
+var quarterOf = (key) => Number(key.slice(6));
+/** 两个季度排好序（'YYYY-Qn' 按字符串比较就是先后） */
+var ordered = (a, b) => a <= b ? {
+	start: a,
+	end: b
+} : {
+	start: b,
+	end: a
+};
+/** 季度面板：四个季度一页，单选或区间 */
+var QuarterCalendar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const mode = readonlyProp(_props, "mode", "single");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const readonly = readonlyProp(_props, "readonly", false);
+	const onPick = readonlyProp(_props, "onPick");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const locale = useDateLocale();
+	const hintId = useId();
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value
+	}));
+	const current = () => toIsoQuarter(locale.today());
+	const chosen = () => value.value == null ? null : typeof value.value === "string" ? value.value : value.value.start;
+	let focused = ref(chosen() ?? current());
+	let year = ref(untrack(() => yearOf(focused.value)));
+	let anchor = ref(null);
+	let hovered = ref(null);
+	let root = shallowRef(null);
+	const off = (key) => isPeriodDisabled(key, "quarter", limits.value, locale);
+	const range = () => {
+		if (mode.value !== "range") return null;
+		if (anchor.value) return ordered(anchor.value, hovered.value ?? anchor.value);
+		return value.value != null && typeof value.value !== "string" ? value.value : null;
+	};
+	function pick(key) {
+		if (disabled.value || readonly.value || off(key)) return;
+		focused.value = key;
+		if (mode.value === "single") {
+			value.value = key;
+			onPick.value?.();
+			return;
+		}
+		if (!anchor.value) {
+			anchor.value = key;
+			hovered.value = key;
+			return;
+		}
+		value.value = ordered(anchor.value, key);
+		anchor.value = null;
+		hovered.value = null;
+		onPick.value?.();
+	}
+	/** 焦点移到 key（换到它那一年），再把 DOM 焦点交过去 */
+	function moveTo(key) {
+		focused.value = key;
+		year.value = yearOf(key);
+		if (anchor.value) hovered.value = key;
+		nextTick(() => root.value?.querySelector("[data-focused]")?.focus());
+	}
+	function onKeydown(event) {
+		if (disabled.value || event.altKey || event.ctrlKey || event.metaKey) return;
+		const quarter = quarterOf(focused.value);
+		const at = yearOf(focused.value);
+		const forward = root.value && isRtl(root.value) ? "ArrowLeft" : "ArrowRight";
+		const backward = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+		const step = (delta) => {
+			const index = at * 4 + quarter - 1 + delta;
+			moveTo(quarterKey(Math.floor(index / 4), index % 4 + 1));
+		};
+		switch (event.key) {
+			case forward:
+				step(1);
+				break;
+			case backward:
+				step(-1);
+				break;
+			case "Home":
+				moveTo(quarterKey(at, 1));
+				break;
+			case "End":
+				moveTo(quarterKey(at, 4));
+				break;
+			case "PageUp":
+				moveTo(quarterKey(at - 1, quarter));
+				break;
+			case "PageDown":
+				moveTo(quarterKey(at + 1, quarter));
+				break;
+			case "Escape":
+				if (!anchor.value) return;
+				anchor.value = null;
+				hovered.value = null;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	}
+	return () => {
+		const preview = range();
+		const today = current();
+		const heading = String(year.value);
+		return createVNode("div", mergeProps(mergeAttrs({ sx: calendarStyles.root }, rest, {
+			ref: root,
+			role: "group"
+		}), {
+			"data-view": "quarter",
+			"data-disabled": disabled.value || void 0
+		}), [
+			createVNode("div", css.attrs(calendarStyles.header), [
+				createVNode(IconButton, {
+					"icon": ChevronLeft,
+					"aria-label": lang.calendarPreviousYear,
+					"propsIcon": _cache[0] || (_cache[0] = { flipInRtl: true }),
+					"disabled": disabled.value,
+					"onClick": _cache[1] || (_cache[1] = () => year.value -= 1)
+				}, null),
+				createVNode("span", css.attrs(calendarStyles.heading, calendarStyles.headingStatic), [lang.calendarYear(year.value)]),
+				createVNode(IconButton, {
+					"icon": ChevronRight,
+					"aria-label": lang.calendarNextYear,
+					"propsIcon": _cache[2] || (_cache[2] = { flipInRtl: true }),
+					"disabled": disabled.value,
+					"onClick": _cache[3] || (_cache[3] = () => year.value += 1)
+				}, null)
+			]),
+			createVNode("table", mergeProps(css.attrs(calendarStyles.grid, calendarStyles.periodGrid), {
+				"role": "grid",
+				"aria-label": lang.calendarYear(year.value),
+				"aria-multiselectable": mode.value === "range" || void 0,
+				"onKeydown": onKeydown
+			}), [createVNode("tbody", null, [createVNode("tr", null, [[
+				1,
+				2,
+				3,
+				4
+			].map((quarter) => {
+				const key = quarterKey(year.value, quarter);
+				const disabledHere = disabled.value || off(key);
+				const inRange = preview != null && key >= preview.start && key <= preview.end;
+				const ends = preview != null && (key === preview.start || key === preview.end);
+				const selected = mode.value === "range" ? inRange : value.value === key;
+				const isFocused = key === focused.value || yearOf(focused.value) !== year.value && quarter === 1;
+				return createVNode("td", mergeProps({
+					"key": key,
+					"role": "gridcell",
+					"aria-selected": selected,
+					"aria-disabled": disabledHere || void 0
+				}, css.attrs(calendarStyles.cell, inRange && calendarStyles.inRange, preview != null && key === preview.start && calendarStyles.rangeStart, preview != null && key === preview.end && calendarStyles.rangeEnd)), [createVNode("button", mergeProps({
+					"type": "button",
+					"tabindex": isFocused ? 0 : -1,
+					"aria-disabled": disabledHere || void 0,
+					"aria-describedby": anchor.value ? hintId : void 0
+				}, css.attrs(buttonBaseStyles.root, interactionTransitions.colors, calendarStyles.button, calendarStyles.periodButton, focusRingStyles.tight, key === today && calendarStyles.today, inRange && !ends && calendarStyles.middle, (mode.value === "range" ? ends : selected) && calendarStyles.selected, disabledHere && calendarStyles.disabled), {
+					"data-quarter": key,
+					"data-focused": isFocused || void 0,
+					"data-selected": selected || void 0,
+					"data-disabled": disabledHere || void 0,
+					"onClick": () => pick(key),
+					"onFocus": () => focused.value = key,
+					"onPointerenter": () => anchor.value && (hovered.value = key)
+				}), [createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [lang.dateFieldPeriodPatterns.quarter.replace("{year}", String(year.value)).replace("{quarter}", String(quarter))]), createVNode("span", { "aria-hidden": "true" }, [lang.calendarQuarter(quarter)])])]);
+			})])])]),
+			createVNode(VisuallyHidden, { "aria-live": "polite" }, _isSlot(heading) ? heading : { default: () => [heading] }),
+			anchor.value && createVNode(VisuallyHidden, {
+				"id": hintId,
+				"key": "__site0"
+			}, {
+				default: () => [lang.calendarPickEnd],
+				$stable: true
+			})
+		]);
+	};
+}, {
+	name: "QuarterCalendar",
+	props: [
+		"mode",
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"disabled",
+		"readonly",
+		"onPick"
+	]
+});
+//#endregion
+export { QuarterCalendar };
+
+//# sourceMappingURL=QuarterCalendar.js.map

package/dist/date/QuarterCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuarterCalendar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_ref","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/date/QuarterCalendar.tsx"],"sourcesContent":["/**\n * 季度面板：一年一页的四个季度（季度报表、考核周期），翻页换年；选一个季度，或选一段区间（先开始、再结束）。\n * DatePicker、DateRangePicker 的 granularity=\"quarter\" 弹出的就是它，也可以单独放在页面上。\n *\n *   <QuarterCalendar _value={quarter} aria-label=\"考核季度\" />               // '2026-Q4'\n *   <QuarterCalendar mode=\"range\" _value={range} aria-label=\"对比区间\" />    // { start: '2026-Q1', end: '2026-Q3' }\n *\n * 外观与 Calendar 的月份视图一致（同一套 calendarStyles）：一行四格，区间连成一条，本季度带描边。\n * 焦点在当前季度上（roving tabindex）：←→ 移动（到头时换年；从右到左排版时反过来），Home / End 到第一、第四季度，\n * Page Up / Down 换年，Enter / 空格选中；区间选到一半时悬停预览，Esc 取消。整段在 min–max 之外的季度不可用。\n *\n * 部件：Root（div，role=\"group\"）、Header、Previous、Next（IconButton）、Heading、Grid（table）、Cell、CellButton。\n */\nimport { ChevronLeft, ChevronRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId } from 'vue';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { IconButton } from '../base/IconButton';\nimport { VisuallyHidden, visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { toIsoQuarter, type DateRange } from '../utils/data/date';\nimport { isRtl } from '../utils/dom/direction';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { calendarStyles } from './CalendarView';\nimport { isPeriodDisabled } from './DateField';\nimport { toDateLimits, useDateLocale, type DateInput } from './date-locale';\n\n/** 未声明的属性落到根元素上（aria-label 等） */\nexport interface QuarterCalendarProps extends PartProps<'div', 'role'> {\n  /** 选一个季度（默认），或选一段区间 */\n  mode?: 'single' | 'range';\n  /** 单选时是 'YYYY-Qn'，区间时是 `{ start, end }`：父级写 _value={x}；没有时 null */\n  _value?: string | DateRange<string> | null;\n  /** 最早可选的日期：整个季度都早于它时不可用 */\n  min?: DateInput;\n  /** 最晚可选的日期：整个季度都晚于它时不可用 */\n  max?: DateInput;\n  /** 不可用：不能翻页、不能选 */\n  disabled?: boolean;\n  /** 只读：能翻页、移动焦点，不能改选择 */\n  readonly?: boolean;\n  /** 选好了（单选选了一个，区间选了结束）：日期选择器据此关闭弹层 */\n  onPick?: () => void;\n}\n\nconst quarterKey = (year: number, quarter: number) =>\n  `${String(year).padStart(4, '0')}-Q${quarter}`;\nconst yearOf = (key: string) => Number(key.slice(0, 4));\nconst quarterOf = (key: string) => Number(key.slice(6));\n/** 两个季度排好序（'YYYY-Qn' 按字符串比较就是先后） */\nconst ordered = (a: string, b: string): DateRange<string> =>\n  a <= b ? { start: a, end: b } : { start: b, end: a };\n\n/** 季度面板：四个季度一页，单选或区间 */\nexport const QuarterCalendar = _component(\n  ({\n    mode = 'single',\n    _value: value = _bindable<string | DateRange<string> | null>(null),\n    min,\n    max,\n    disabled = false,\n    readonly = false,\n    onPick,\n    ...rest\n  }: QuarterCalendarProps) => {\n    const lang = useLang();\n    const locale = useDateLocale();\n    const hintId = useId();\n    const limits = _derived(toDateLimits(locale, { min, max }));\n    const current = () => toIsoQuarter(locale.today());\n    const chosen = () => (value == null ? null : typeof value === 'string' ? value : value.start);\n    // 一开始显示已选（没有时是本季度）那一年，焦点也在它上面\n    let focused = _state(chosen() ?? current());\n    let year = _state(_untrack(yearOf(focused)));\n    // 区间：选了开始、还没选结束时的开始，与悬停的季度（预览）\n    let anchor = _state<string | null>(null);\n    let hovered = _state<string | null>(null);\n    let root = _state.raw<HTMLElement | null>(null);\n\n    const off = (key: string) => isPeriodDisabled(key, 'quarter', limits, locale);\n    const range = (): DateRange<string> | null => {\n      if (mode !== 'range') return null;\n      if (anchor) return ordered(anchor, hovered ?? anchor);\n      return value != null && typeof value !== 'string' ? value : null;\n    };\n\n    function pick(key: string) {\n      if (disabled || readonly || off(key)) return;\n      focused = key;\n      if (mode === 'single') {\n        value = key;\n        onPick?.();\n        return;\n      }\n      if (!anchor) {\n        anchor = key;\n        hovered = key;\n        return;\n      }\n      value = ordered(anchor, key);\n      anchor = null;\n      hovered = null;\n      onPick?.();\n    }\n\n    /** 焦点移到 key（换到它那一年），再把 DOM 焦点交过去 */\n    function moveTo(key: string) {\n      focused = key;\n      year = yearOf(key);\n      if (anchor) hovered = key;\n      void nextTick(() => root?.querySelector<HTMLElement>('[data-focused]')?.focus());\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (disabled || event.altKey || event.ctrlKey || event.metaKey) return;\n      const quarter = quarterOf(focused);\n      const at = yearOf(focused);\n      const forward = root && isRtl(root) ? 'ArrowLeft' : 'ArrowRight';\n      const backward = forward === 'ArrowRight' ? 'ArrowLeft' : 'ArrowRight';\n      const step = (delta: number) => {\n        const index = at * 4 + quarter - 1 + delta;\n        moveTo(quarterKey(Math.floor(index / 4), (index % 4) + 1));\n      };\n      switch (event.key) {\n        case forward:\n          step(1);\n          break;\n        case backward:\n          step(-1);\n          break;\n        case 'Home':\n          moveTo(quarterKey(at, 1));\n          break;\n        case 'End':\n          moveTo(quarterKey(at, 4));\n          break;\n        case 'PageUp':\n          moveTo(quarterKey(at - 1, quarter));\n          break;\n        case 'PageDown':\n          moveTo(quarterKey(at + 1, quarter));\n          break;\n        case 'Escape':\n          // 取消选到一半的区间；没有时交给弹层关闭\n          if (!anchor) return;\n          anchor = null;\n          hovered = null;\n          break;\n        default:\n          return;\n      }\n      event.preventDefault();\n    }\n\n    return () => {\n      const preview = range();\n      const today = current();\n      const heading = String(year);\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: calendarStyles.root }, rest, {\n            ref: _toRef(root),\n            role: 'group',\n          })}\n          data-view=\"quarter\"\n          data-disabled={disabled || undefined}\n        >\n          <div {...css.attrs(calendarStyles.header)}>\n            <IconButton\n              icon={ChevronLeft}\n              aria-label={lang.calendarPreviousYear}\n              propsIcon={{ flipInRtl: true }}\n              disabled={disabled}\n              onClick={() => (year -= 1)}\n            />\n            <span {...css.attrs(calendarStyles.heading, calendarStyles.headingStatic)}>\n              {lang.calendarYear(year)}\n            </span>\n            <IconButton\n              icon={ChevronRight}\n              aria-label={lang.calendarNextYear}\n              propsIcon={{ flipInRtl: true }}\n              disabled={disabled}\n              onClick={() => (year += 1)}\n            />\n          </div>\n          <table\n            {...css.attrs(calendarStyles.grid, calendarStyles.periodGrid)}\n            role=\"grid\"\n            aria-label={lang.calendarYear(year)}\n            aria-multiselectable={mode === 'range' || undefined}\n            onKeydown={onKeydown}\n          >\n            <tbody>\n              <tr>\n                {[1, 2, 3, 4].map((quarter) => {\n                  const key = quarterKey(year, quarter);\n                  const disabledHere = disabled || off(key);\n                  const inRange = preview != null && key >= preview.start && key <= preview.end;\n                  const ends = preview != null && (key === preview.start || key === preview.end);\n                  const selected = mode === 'range' ? inRange : value === key;\n                  const isFocused = key === focused || (yearOf(focused) !== year && quarter === 1);\n                  return (\n                    <td\n                      key={key}\n                      role=\"gridcell\"\n                      aria-selected={selected}\n                      aria-disabled={disabledHere || undefined}\n                      {...css.attrs(\n                        calendarStyles.cell,\n                        inRange && calendarStyles.inRange,\n                        preview != null && key === preview.start && calendarStyles.rangeStart,\n                        preview != null && key === preview.end && calendarStyles.rangeEnd,\n                      )}\n                    >\n                      <button\n                        type=\"button\"\n                        tabindex={isFocused ? 0 : -1}\n                        aria-disabled={disabledHere || undefined}\n                        aria-describedby={anchor ? hintId : undefined}\n                        {...css.attrs(\n                          buttonBaseStyles.root,\n                          interactionTransitions.colors,\n                          calendarStyles.button,\n                          calendarStyles.periodButton,\n                          focusRingStyles.tight,\n                          key === today && calendarStyles.today,\n                          inRange && !ends && calendarStyles.middle,\n                          (mode === 'range' ? ends : selected) && calendarStyles.selected,\n                          disabledHere && calendarStyles.disabled,\n                        )}\n                        data-quarter={key}\n                        data-focused={isFocused || undefined}\n                        data-selected={selected || undefined}\n                        data-disabled={disabledHere || undefined}\n                        onClick={() => pick(key)}\n                        onFocus={() => (focused = key)}\n                        onPointerenter={() => anchor && (hovered = key)}\n                      >\n                        <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n                          {lang.dateFieldPeriodPatterns.quarter\n                            .replace('{year}', String(year))\n                            .replace('{quarter}', String(quarter))}\n                        </span>\n                        <span aria-hidden=\"true\">{lang.calendarQuarter(quarter)}</span>\n                      </button>\n                    </td>\n                  );\n                })}\n              </tr>\n            </tbody>\n          </table>\n          <VisuallyHidden aria-live=\"polite\">{heading}</VisuallyHidden>\n          {anchor && <VisuallyHidden id={hintId}>{lang.calendarPickEnd}</VisuallyHidden>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/date/RangeCalendar.d.ts

@@ -0,0 +1,24 @@
+import type { DateRange, DateUnit } from '../utils/data/date';
+import { type CalendarViewProps } from './CalendarView';
+import { type DateInput, type DateLimitProps, type DateValueTypes } from './date-locale';
+/** 未声明的属性落到根元素上 */
+export interface RangeCalendarProps<V extends DateInput = string> extends Omit<CalendarViewProps, 'calendar'>, DateLimitProps {
+    /** 选中的区间（两端都含）：父级写 _value={x}；没有时 null */
+    _value?: DateRange<V> | null;
+    /** 选择的粒度，默认 day；month、year 时选整月、整年（写回的仍是日期：月初到月末、年初到年末） */
+    granularity?: DateUnit;
+    /** 并排显示几个月，默认 1；酒店、机票常用 2 */
+    visibleMonths?: number;
+    /** 区间里允许夹着不可选的日期，默认 false */
+    allowsUnavailableInRange?: boolean;
+    /** 没有已选区间时一开始显示哪天所在的月，默认今天 */
+    defaultFocused?: DateInput;
+    /** 值为空、推不出类型时写回哪一种，默认 iso（字符串） */
+    valueType?: keyof DateValueTypes;
+    /** 只读：能翻页、移动焦点，不能改选择 */
+    readonly?: boolean;
+    /** 选完了一个区间（点了结束）：日期选择器据此关闭弹层 */
+    onPick?: (range: DateRange<V>) => void;
+}
+/** 区间日历：选开始与结束 */
+export declare const RangeCalendar: <V extends DateInput>(props: RangeCalendarProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;