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

package/dist/config/vue-router.js

@@ -0,0 +1,143 @@
+import { shallowRef, watch } from "vue";
+//#region src/config/vue-router.ts
+/**
+* vue-router 的路由适配（子路径 `@zerodep-dev/vue-tsx-pro-ui/vue-router`；vue-router 是可选的 peer 依赖）：
+*
+*   app.use(router).use(createUi({ router: vueRouterAdapter(router) }))
+*
+* Link、LinkButton、导航组件的站内链接点击后走 router.push（不刷新页面），<a href> 渲染 router.resolve 的真实地址
+* （带 base 与 hash 模式的 #），当前页按路由判断。组件本身只依赖 config 里的 UiRouter 接口，换别的路由库时自己实现即可。
+*/
+/** 把 vue-router 的实例转成组件库的路由适配 */
+function vueRouterAdapter(router, { match = "exact" } = {}) {
+	let pending;
+	function flushQuery() {
+		const { path, hash, query } = router.currentRoute.value;
+		const next = { ...query };
+		for (const [key, value] of Object.entries(pending ?? {})) if (value === void 0) delete next[key];
+		else next[key] = typeof value === "string" ? value : [...value];
+		pending = void 0;
+		router.replace({
+			path,
+			hash,
+			query: next
+		});
+	}
+	return {
+		navigate: (href) => void router.push(href),
+		beforeLeave: (guard) => router.beforeEach((to, from) => to.path === from.path ? true : guard()),
+		query: () => Object.fromEntries(Object.entries(router.currentRoute.value.query).map(([key, value]) => [key, Array.isArray(value) ? value.map((item) => item ?? "") : value ?? ""])),
+		replaceQuery(patch) {
+			if (!pending) queueMicrotask(flushQuery);
+			pending = {
+				...pending,
+				...patch
+			};
+		},
+		resolve: (href) => router.resolve(href).href,
+		isActive(href) {
+			const resolved = router.resolve(href);
+			if (resolved.hash && resolved.hash !== router.currentRoute.value.hash) return false;
+			const target = resolved.path;
+			const current = router.currentRoute.value.path;
+			if (current === target) return true;
+			if (match !== "prefix" || target === "/") return false;
+			return current.startsWith(target.endsWith("/") ? target : `${target}/`);
+		}
+	};
+}
+/**
+* 路由切换时走顶部加载条：开始跳转时 start，跳完 finish，跳转失败（守卫抛错、懒加载的页面加载失败）时 error。
+* 被守卫取消、重定向的不算失败。返回取消监听的函数。
+*
+*   useRouteLoadingBar(router, loadingBar)
+*/
+function useRouteLoadingBar(router, controller) {
+	const removers = [
+		router.beforeEach((to, from) => {
+			if (to.fullPath !== from.fullPath) controller.start();
+		}),
+		router.afterEach(() => controller.finish()),
+		router.onError(() => controller.error())
+	];
+	return () => removers.forEach((remove) => remove());
+}
+/**
+* 路由页签（后台的多页签）：进过的路由各一个页签，和 PageTabs 一起放在 AppShell 的 tabs 里。
+* 同一路径一个页签，切回来时回到它上次的完整地址（筛选条件、页码在查询参数里时不丢）。在组件 setup 里调用。
+*
+*   const tabs = useRouteTabs(router, { home: '/' });
+*   <AppShell tabs={<PageTabs {...tabs} />} …>
+*/
+function useRouteTabs(router, options = {}) {
+	const titleOf = (route) => options.title?.(route) ?? (typeof route.meta.title === "string" ? route.meta.title : route.path);
+	const pages = shallowRef([]);
+	const fullPaths = /* @__PURE__ */ new Map();
+	if (options.home) {
+		const home = router.resolve(options.home);
+		pages.value = [{
+			path: home.path,
+			title: titleOf(home),
+			pinned: true
+		}];
+		fullPaths.set(home.path, home.fullPath);
+	}
+	watch(() => router.currentRoute.value, (route) => {
+		if (options.include && !options.include(route)) return;
+		fullPaths.set(route.path, route.fullPath);
+		const title = titleOf(route);
+		const index = pages.value.findIndex((page) => page.path === route.path);
+		if (index >= 0) {
+			if (pages.value[index].title !== title) pages.value = pages.value.map((page, at) => at === index ? {
+				...page,
+				title
+			} : page);
+			return;
+		}
+		let next = [...pages.value, {
+			path: route.path,
+			title
+		}];
+		while (options.max && next.length > options.max) {
+			const oldest = next.findIndex((page) => !page.pinned && page.path !== route.path);
+			if (oldest < 0) break;
+			fullPaths.delete(next[oldest].path);
+			next = next.filter((_, at) => at !== oldest);
+		}
+		pages.value = next;
+	}, { immediate: true });
+	return {
+		get pages() {
+			return pages.value;
+		},
+		get current() {
+			return router.currentRoute.value.path;
+		},
+		onNavigate(path) {
+			router.push(fullPaths.get(path) ?? path);
+		},
+		onClose(paths) {
+			const closing = new Set(paths.filter((path) => !pages.value.find((page) => page.path === path)?.pinned));
+			if (closing.size === 0) return;
+			const current = router.currentRoute.value.path;
+			const order = pages.value;
+			const rest = order.filter((page) => !closing.has(page.path));
+			pages.value = rest;
+			for (const path of closing) fullPaths.delete(path);
+			if (!closing.has(current)) return;
+			const at = order.findIndex((page) => page.path === current);
+			const after = order.slice(at + 1).find((page) => !closing.has(page.path));
+			const before = order.slice(0, at).reverse().find((page) => !closing.has(page.path));
+			const target = after ?? before;
+			if (target) router.push(fullPaths.get(target.path) ?? target.path);
+		},
+		onReorder(paths) {
+			const byPath = new Map(pages.value.map((page) => [page.path, page]));
+			pages.value = paths.flatMap((path) => byPath.get(path) ?? []);
+		}
+	};
+}
+//#endregion
+export { useRouteLoadingBar, useRouteTabs, vueRouterAdapter };
+
+//# sourceMappingURL=vue-router.js.map

package/dist/config/vue-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-router.js","names":[],"sources":["../../src/config/vue-router.ts"],"sourcesContent":["/**\n * vue-router 的路由适配（子路径 `@zerodep-dev/vue-tsx-pro-ui/vue-router`；vue-router 是可选的 peer 依赖）：\n *\n *   app.use(router).use(createUi({ router: vueRouterAdapter(router) }))\n *\n * Link、LinkButton、导航组件的站内链接点击后走 router.push（不刷新页面），<a href> 渲染 router.resolve 的真实地址\n * （带 base 与 hash 模式的 #），当前页按路由判断。组件本身只依赖 config 里的 UiRouter 接口，换别的路由库时自己实现即可。\n */\nimport { shallowRef, watch } from 'vue';\nimport type { LocationQueryRaw, RouteLocationNormalizedLoaded, Router } from 'vue-router';\nimport type { LoadingBarController } from '../feedback/LoadingBar';\nimport type { QueryPatch, UiRouter } from './context';\n\n/** 怎样算“当前页” */\nexport interface RouteMatches {\n  /** 路径完全相同（默认）：面包屑、分页、标签页 */\n  exact: unknown;\n  /** 当前路径以它开头：侧边导航里 /orders 在 /orders/42 页面也高亮 */\n  prefix: unknown;\n}\n\n/** vueRouterAdapter 的选项 */\nexport interface VueRouterAdapterOptions {\n  /** 怎样算当前页，默认 exact */\n  match?: keyof RouteMatches;\n}\n\n/** 把 vue-router 的实例转成组件库的路由适配 */\nexport function vueRouterAdapter(\n  router: Router,\n  { match = 'exact' }: VueRouterAdapterOptions = {},\n): UiRouter {\n  // 同一轮里的 replaceQuery 攒在一起，一次 replace（参考 VueUse 的 useRouteQuery）：分开跳转时后一次会覆盖前一次\n  let pending: QueryPatch | undefined;\n  function flushQuery() {\n    const { path, hash, query } = router.currentRoute.value;\n    const next: LocationQueryRaw = { ...query };\n    for (const [key, value] of Object.entries(pending ?? {})) {\n      if (value === undefined) delete next[key];\n      else next[key] = typeof value === 'string' ? value : [...value];\n    }\n    pending = undefined;\n    void router.replace({ path, hash, query: next });\n  }\n\n  return {\n    navigate: (href) => void router.push(href),\n    beforeLeave: (guard) =>\n      router.beforeEach((to, from) => (to.path === from.path ? true : guard())),\n    query: () =>\n      Object.fromEntries(\n        Object.entries(router.currentRoute.value.query).map(([key, value]) => [\n          key,\n          Array.isArray(value) ? value.map((item) => item ?? '') : (value ?? ''),\n        ]),\n      ),\n    replaceQuery(patch) {\n      if (!pending) queueMicrotask(flushQuery);\n      pending = { ...pending, ...patch };\n    },\n    resolve: (href) => router.resolve(href).href,\n    isActive(href) {\n      // resolve 处理 base 与相对路径；读 currentRoute 是响应式的，导航组件在渲染时调用即可跟随路由\n      const resolved = router.resolve(href);\n      // 带锚点的链接（#tasks、/guide#install）指向页内的一节：路径相同、锚点也相同才算当前\n      if (resolved.hash && resolved.hash !== router.currentRoute.value.hash) return false;\n      const target = resolved.path;\n      const current = router.currentRoute.value.path;\n      if (current === target) return true;\n      // 首页（/）是所有路径的前缀：只在就是首页时算当前\n      if (match !== 'prefix' || target === '/') return false;\n      return current.startsWith(target.endsWith('/') ? target : `${target}/`);\n    },\n  };\n}\n\n/**\n * 路由切换时走顶部加载条：开始跳转时 start，跳完 finish，跳转失败（守卫抛错、懒加载的页面加载失败）时 error。\n * 被守卫取消、重定向的不算失败。返回取消监听的函数。\n *\n *   useRouteLoadingBar(router, loadingBar)\n */\nexport function useRouteLoadingBar(\n  router: Router,\n  controller: Pick<LoadingBarController, 'start' | 'finish' | 'error'>,\n): () => void {\n  const removers = [\n    router.beforeEach((to, from) => {\n      if (to.fullPath !== from.fullPath) controller.start();\n    }),\n    router.afterEach(() => controller.finish()),\n    router.onError(() => controller.error()),\n  ];\n  return () => removers.forEach((remove) => remove());\n}\n\n/** 路由页签的一项（与 PageTabs 的 PageTab 同形） */\nexport interface RouteTab {\n  /** 路由的路径（不含查询参数）：同一路径一个页签 */\n  path: string;\n  /** 页签上的文字 */\n  title: string;\n  /** 固定的页（首页）：不能关 */\n  pinned?: boolean;\n}\n\n/** 页签用到的路由信息：当前路由与 router.resolve 的结果都有 */\nexport type RouteTabSource = Pick<\n  RouteLocationNormalizedLoaded,\n  'path' | 'fullPath' | 'meta' | 'params' | 'query'\n>;\n\n/** useRouteTabs 的选项 */\nexport interface RouteTabsOptions {\n  /** 固定在最前面、不能关的首页 */\n  home?: string;\n  /** 页签的文字：默认取路由的 meta.title，没有时是路径 */\n  title?: (route: RouteTabSource) => string;\n  /** 哪些路由进页签：默认都进（登录页、404 这类返回 false） */\n  include?: (route: RouteLocationNormalizedLoaded) => boolean;\n  /** 最多开几个：超过时关掉最早打开的（固定的、当前的除外），默认不限 */\n  max?: number;\n}\n\n/** 路由页签的状态：属性名与 PageTabs 的一致，可以整个展开 `<PageTabs {...tabs} />` */\nexport interface RouteTabs {\n  /** 打开过的页面，按显示的顺序 */\n  readonly pages: readonly RouteTab[];\n  /** 当前页的路径 */\n  readonly current: string;\n  /** 切到一个页签：回到它上次的完整地址（带查询参数） */\n  onNavigate(path: string): void;\n  /** 关闭页签；关掉的有当前页时跳到旁边的（后面的，没有时前面的） */\n  onClose(paths: readonly string[]): void;\n  /** 按新的顺序排 */\n  onReorder(paths: readonly string[]): void;\n}\n\n/**\n * 路由页签（后台的多页签）：进过的路由各一个页签，和 PageTabs 一起放在 AppShell 的 tabs 里。\n * 同一路径一个页签，切回来时回到它上次的完整地址（筛选条件、页码在查询参数里时不丢）。在组件 setup 里调用。\n *\n *   const tabs = useRouteTabs(router, { home: '/' });\n *   <AppShell tabs={<PageTabs {...tabs} />} …>\n */\nexport function useRouteTabs(router: Router, options: RouteTabsOptions = {}): RouteTabs {\n  const titleOf = (route: RouteTabSource) =>\n    options.title?.(route) ??\n    (typeof route.meta.title === 'string' ? route.meta.title : route.path);\n  const pages = shallowRef<RouteTab[]>([]);\n  // 各页签上次的完整地址\n  const fullPaths = new Map<string, string>();\n  if (options.home) {\n    const home = router.resolve(options.home);\n    pages.value = [{ path: home.path, title: titleOf(home), pinned: true }];\n    fullPaths.set(home.path, home.fullPath);\n  }\n\n  watch(\n    () => router.currentRoute.value,\n    (route) => {\n      if (options.include && !options.include(route)) return;\n      fullPaths.set(route.path, route.fullPath);\n      const title = titleOf(route);\n      const index = pages.value.findIndex((page) => page.path === route.path);\n      if (index >= 0) {\n        if (pages.value[index]!.title !== title)\n          pages.value = pages.value.map((page, at) => (at === index ? { ...page, title } : page));\n        return;\n      }\n      let next = [...pages.value, { path: route.path, title }];\n      // 超过上限：关掉最早打开的（固定的、刚打开的除外）\n      while (options.max && next.length > options.max) {\n        const oldest = next.findIndex((page) => !page.pinned && page.path !== route.path);\n        if (oldest < 0) break;\n        fullPaths.delete(next[oldest]!.path);\n        next = next.filter((_, at) => at !== oldest);\n      }\n      pages.value = next;\n    },\n    { immediate: true },\n  );\n\n  return {\n    get pages() {\n      return pages.value;\n    },\n    get current() {\n      return router.currentRoute.value.path;\n    },\n    onNavigate(path) {\n      void router.push(fullPaths.get(path) ?? path);\n    },\n    onClose(paths) {\n      const closing = new Set(\n        paths.filter((path) => !pages.value.find((page) => page.path === path)?.pinned),\n      );\n      if (closing.size === 0) return;\n      const current = router.currentRoute.value.path;\n      const order = pages.value;\n      const rest = order.filter((page) => !closing.has(page.path));\n      pages.value = rest;\n      for (const path of closing) fullPaths.delete(path);\n      if (!closing.has(current)) return;\n      // 关掉了当前页：跳到它后面还开着的一个，没有时前面的\n      const at = order.findIndex((page) => page.path === current);\n      const after = order.slice(at + 1).find((page) => !closing.has(page.path));\n      const before = order\n        .slice(0, at)\n        .reverse()\n        .find((page) => !closing.has(page.path));\n      const target = after ?? before;\n      if (target) void router.push(fullPaths.get(target.path) ?? target.path);\n    },\n    onReorder(paths) {\n      const byPath = new Map(pages.value.map((page) => [page.path, page]));\n      pages.value = paths.flatMap((path) => byPath.get(path) ?? []);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/date/Calendar.d.ts

@@ -0,0 +1,36 @@
+import { type DateUnit } from '../utils/data/date';
+import { type CalendarViewProps } from './CalendarView';
+import { type DateInput, type DateLimitProps, type DateValueTypes } from './date-locale';
+/** Calendar 共有的属性；未声明的属性落到根元素上 */
+export interface CalendarBaseProps<V extends DateInput> extends Omit<CalendarViewProps, 'calendar'>, DateLimitProps {
+    /** 并排显示几个月，默认 1 */
+    visibleMonths?: number;
+    /** 选择的粒度：day（默认）、month（选月份）、year（选年份） */
+    granularity?: DateUnit;
+    /** 没有已选日期时一开始显示哪天所在的月，默认今天 */
+    defaultFocused?: DateInput;
+    /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；绑定的是 CalendarDate 且一开始为空时写 dateValue */
+    valueType?: keyof DateValueTypes;
+    /** 只读：能翻页、移动焦点，不能改选择 */
+    readonly?: boolean;
+    /** 点选了一天（再点已选的那天也会调用）：日期选择器据此关闭弹层 */
+    onPick?: (date: V) => void;
+}
+/** 单选：value 是一个日期 */
+export interface SingleCalendarProps<V extends DateInput> {
+    /** 选择方式，默认 single */
+    selectionMode?: 'single';
+    /** 选中的日期（ISO 字符串或 DateValue，写回时保持同一种类型）：父级写 _value={x}；没有时 null */
+    _value?: V | null;
+}
+/** 多选：value 是日期的数组 */
+export interface MultipleCalendarProps<V extends DateInput> {
+    /** 选择方式 */
+    selectionMode: 'multiple';
+    /** 选中的日期（ISO 字符串或 DateValue）：父级写 _value={list} */
+    _value?: V[];
+}
+/** 单选或多选一天（多天） */
+export type CalendarProps<V extends DateInput = string> = CalendarBaseProps<V> & (SingleCalendarProps<V> | MultipleCalendarProps<V>);
+/** 日历：选一天或多天 */
+export declare const Calendar: <V extends DateInput>(props: CalendarProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/date/Calendar.js

@@ -0,0 +1,83 @@
+import { isSameDate } from "../utils/data/date.js";
+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";
+//#region src/date/Calendar.tsx
+/** Calendar 共有的属性；未声明的属性落到根元素上 */
+/** 单选：value 是一个日期 */
+/** 多选：value 是日期的数组 */
+/** 单选或多选一天（多天） */
+/** 日历：选一天或多天 */
+var Calendar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const selectionMode = readonlyProp(_props, "selectionMode", "single");
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isDateUnavailable = readonlyProp(_props, "isDateUnavailable");
+	const visibleMonths = readonlyProp(_props, "visibleMonths", 1);
+	const granularity = readonlyProp(_props, "granularity", "day");
+	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 values = () => value.value == null ? [] : Array.isArray(value.value) ? value.value : [value.value];
+	const selected = computed(() => values().map((item) => locale.fromValue(item)).filter((date) => date != null));
+	let lastLike;
+	const limits = computed(() => toDateLimits(locale, {
+		min: min.value,
+		max: max.value,
+		isDateUnavailable: isDateUnavailable.value
+	}));
+	const calendar = useCalendarState({
+		mode: () => selectionMode.value,
+		selected: () => selected.value,
+		onChange: (dates) => {
+			const current = values();
+			lastLike = current[0] ?? lastLike;
+			const picked = dates.map((date) => current.find((item) => isSameDate(locale.fromValue(item), date, granularity.value)) ?? writeDateLike(date, lastLike, valueType.value));
+			value.value = selectionMode.value === "multiple" ? picked : picked[0] ?? null;
+			if (selectionMode.value === "single" && picked[0] != null) onPick.value?.(picked[0]);
+		},
+		today: () => locale.today(),
+		limits: () => limits.value,
+		week: () => locale.week,
+		unit: () => granularity.value,
+		visibleMonths: () => visibleMonths.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: "Calendar",
+	props: [
+		"selectionMode",
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"visibleMonths",
+		"granularity",
+		"defaultFocused",
+		"valueType",
+		"firstDayOfWeek",
+		"readonly",
+		"disabled",
+		"onPick"
+	]
+});
+//#endregion
+export { Calendar };
+
+//# sourceMappingURL=Calendar.js.map

package/dist/date/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/date/Calendar.tsx"],"sourcesContent":["/**\n * 日历（WAI-ARIA 的日期网格）：选一天或多天，可以并排几个月、显示周数、自定义日期格、切到月份与年份视图。\n * 参考 React Aria Calendar、Mantine DatePicker（inline）。\n *\n *   <Calendar _value={date} min=\"2026-01-01\" aria-label=\"出发日期\" />\n *   <Calendar selectionMode=\"multiple\" _value={days} visibleMonths={2} />\n *   <Calendar _value={day}>{(date, cell) => <><span>{…}</span><small>¥399</small></>}</Calendar>\n *\n * 值是 ISO 日期字符串（'2026-10-20'，与原生 input type=\"date\"、URL 参数、zod 的 z.iso.date() 一致），\n * 也可以是 @internationalized/date 的 DateValue；写回时保持传入的类型（CalendarDateTime 选了另一天，时间不变）。\n * 月份名、星期名、读屏念的完整日期都由 Intl 按当前语言生成，一周从哪天开始按语言（可用 firstDayOfWeek 覆盖）。\n * 选一个区间用 RangeCalendar；选月份、年份用 granularity=\"month\" / \"year\"（DatePicker 的同名 granularity 就是这样做的）。\n *\n * 键盘：←→ 一天、↑↓ 一周，Page Up / Down 一个月、加 Shift 一年，Home / End 到这周两端，Enter / 空格选中。\n * 部件见 CalendarView。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { CalendarDate } from '@internationalized/date';\nimport { isSameDate, type 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/** Calendar 共有的属性；未声明的属性落到根元素上 */\nexport interface CalendarBaseProps<V extends DateInput>\n  extends Omit<CalendarViewProps, 'calendar'>, DateLimitProps {\n  /** 并排显示几个月，默认 1 */\n  visibleMonths?: number;\n  /** 选择的粒度：day（默认）、month（选月份）、year（选年份） */\n  granularity?: DateUnit;\n  /** 没有已选日期时一开始显示哪天所在的月，默认今天 */\n  defaultFocused?: DateInput;\n  /** 值为空、推不出类型时写回哪一种，默认 iso（字符串）；绑定的是 CalendarDate 且一开始为空时写 dateValue */\n  valueType?: keyof DateValueTypes;\n  /** 只读：能翻页、移动焦点，不能改选择 */\n  readonly?: boolean;\n  /** 点选了一天（再点已选的那天也会调用）：日期选择器据此关闭弹层 */\n  onPick?: (date: V) => void;\n}\n\n/** 单选：value 是一个日期 */\nexport interface SingleCalendarProps<V extends DateInput> {\n  /** 选择方式，默认 single */\n  selectionMode?: 'single';\n  /** 选中的日期（ISO 字符串或 DateValue，写回时保持同一种类型）：父级写 _value={x}；没有时 null */\n  _value?: V | null;\n}\n\n/** 多选：value 是日期的数组 */\nexport interface MultipleCalendarProps<V extends DateInput> {\n  /** 选择方式 */\n  selectionMode: 'multiple';\n  /** 选中的日期（ISO 字符串或 DateValue）：父级写 _value={list} */\n  _value?: V[];\n}\n\n/** 单选或多选一天（多天） */\nexport type CalendarProps<V extends DateInput = string> = CalendarBaseProps<V> &\n  (SingleCalendarProps<V> | MultipleCalendarProps<V>);\n\n/** 日历：选一天或多天 */\nexport const Calendar = _component(\n  <V extends DateInput>({\n    selectionMode = 'single',\n    _value: value = _bindable<V | V[] | null | undefined>(undefined),\n    min,\n    max,\n    isDateUnavailable,\n    visibleMonths = 1,\n    granularity = 'day',\n    defaultFocused,\n    valueType,\n    firstDayOfWeek,\n    readonly = false,\n    disabled = false,\n    onPick,\n    ...rest\n  }: CalendarProps<V>) => {\n    const locale = useDateLocale(() => ({ firstDayOfWeek }));\n    const values = (): readonly V[] =>\n      value == null ? [] : Array.isArray(value) ? value : [value];\n    const selected = _derived(\n      values()\n        .map((item) => locale.fromValue(item))\n        .filter((date): date is CalendarDate => date != null),\n    );\n    // 值清空后再选：仍按清空前的类型写回\n    let lastLike: V | undefined;\n    const limits = _derived(toDateLimits(locale, { min, max, isDateUnavailable }));\n    const calendar = useCalendarState({\n      mode: () => selectionMode,\n      selected: () => selected,\n      onChange: (dates) => {\n        const current = values();\n        lastLike = current[0] ?? lastLike;\n        // 多选时没变的那几天原样保留（DateValue 的时间、时区不丢）\n        const picked = dates.map(\n          (date) =>\n            current.find((item) => isSameDate(locale.fromValue(item), date, granularity)) ??\n            (writeDateLike(date, lastLike, valueType) as V),\n        );\n        value = selectionMode === 'multiple' ? picked : (picked[0] ?? null);\n        if (selectionMode === 'single' && picked[0] != null) onPick?.(picked[0]);\n      },\n      today: () => locale.today(),\n      limits: () => limits,\n      week: () => locale.week,\n      unit: () => granularity,\n      visibleMonths: () => visibleMonths,\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":";;;;;;;;;;;;AAoEA,IAAa,WAAW,0BACtB,QAAA,SAewB;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAdN,QAAQ;CAAA,MAAA,QAAAC,SAAA,QAAA,gBAC8B,KAAA,GAAS,KAAA,IAAA;CAAA,MAAA,MAAAD,aAAA,QAAA,KAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,oBAAAA,aAAA,QAAA,mBAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBAI/C,CAAC;CAAA,MAAA,cAAAA,aAAA,QAAA,eACH,KAAK;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAIR,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAEb,OAAIE,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,qBAAqB,EAAE,gBAAc,eAAA,MAAC,EAAE;CACvD,MAAM,eACJ,MAAA,SAAS,OAAO,CAAA,IAAK,MAAM,QAAO,MAAA,KAAM,IAAC,MAAA,QAAW,CAAA,MAAA,KAAA;CACtD,MAAM,WAAQC,eACZ,OAAO,CAAC,CACL,KAAK,SAAS,OAAO,UAAU,IAAI,CAAC,CAAC,CACrC,QAAQ,SAA+B,QAAQ,IAAI,CAAC;CAGzD,IAAI;CACJ,MAAM,SAAMA,eAAY,aAAa,QAAQ;EAAE,KAAG,IAAA;EAAE,KAAG,IAAA;EAAE,mBAAiB,kBAAA;CAAC,CAAC,CAAC;CAC7E,MAAM,WAAW,iBAAiB;EAChC,YAAM,cAAA;EACN,gBAAU,SAAA;EACV,WAAW,UAAU;GACnB,MAAM,UAAU,OAAO;GACvB,WAAW,QAAQ,MAAM;GAEzB,MAAM,SAAS,MAAM,KAClB,SACC,QAAQ,MAAM,SAAS,WAAW,OAAO,UAAU,IAAI,GAAG,MAAI,YAAA,KAAa,CAAC,KAC3E,cAAc,MAAM,UAAQ,UAAA,KAAW,CAC5C;GACA,MAAA,QAAQ,cAAA,UAAkB,aAAa,SAAU,OAAO,MAAM;GAC9D,IAAI,cAAA,UAAkB,YAAY,OAAO,MAAM,MAAM,OAAA,QAAS,OAAO,EAAE;EACzE;EACA,aAAa,OAAO,MAAM;EAC1B,cAAQ,OAAA;EACR,YAAY,OAAO;EACnB,YAAM,YAAA;EACN,qBAAe,cAAA;EACf,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/CalendarBoard.d.ts

@@ -0,0 +1,79 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type DateLimitProps } from './date-locale';
+/** 一天的状态：renderDay、getDayNote 之外的自定义内容用 */
+export interface CalendarBoardDayState {
+    /** 今天 */
+    today: boolean;
+    /** 补齐的上个月、下个月的日子 */
+    outside: boolean;
+    /** 选中的那一天 */
+    selected: boolean;
+    /** 周六、周日（按语言） */
+    weekend: boolean;
+    /** 不可选（范围外、不可选的日期） */
+    disabled: boolean;
+}
+/** 未声明的属性落到根元素上；aria-label 是整个月历的名称 */
+export interface CalendarBoardProps<T = unknown> extends PartProps<'div', 'role'>, DateLimitProps {
+    /** 选中的那一天（ISO 日期）：父级写 _value={day}；没有时 null */
+    _value?: string | null;
+    /** 显示哪个月（'YYYY-MM'）：父级可写 _month={m}，翻页时写回；不写时从选中的那天（或今天）开始 */
+    _month?: string;
+    /** 一周的第一天，0 是周日；不写时按语言 */
+    firstDayOfWeek?: number;
+    /** 按天放的数据：日程、排班、提醒 */
+    events?: readonly T[];
+    /** 数据在哪一天（ISO 日期；带时间的取日期部分） */
+    getEventDate?: (event: T) => string;
+    /** 跨天的数据在哪一天结束（含）；不写时只在 getEventDate 那一天 */
+    getEventEnd?: (event: T) => string;
+    /** 数据的 key；不写时用它在 events 里的位置 */
+    getEventKey?: (event: T) => string;
+    /** 默认显示的文字 */
+    getEventLabel?: (event: T) => string;
+    /** 默认显示的色调，默认 accent */
+    getEventTone?: (event: T) => StatusTone;
+    /** 自定义一条数据的显示 */
+    renderEvent?: (event: T, date: string) => VNodeChild;
+    /** 每天最多显示几条，其余收成“还有 N 项”，默认 3 */
+    maxEvents?: number;
+    /** 日期旁边的小字（节假日、“休”“班”、农历） */
+    getDayNote?: (date: string) => VNodeChild;
+    /** 往格子里加别的内容（排班、价格），放在日程下面 */
+    renderDay?: (date: string, state: CalendarBoardDayState) => VNodeChild;
+    /** 页头右边的内容（筛选、视图切换） */
+    toolbar?: VNodeChild;
+    /** 只读：能翻页、移动焦点，不能选 */
+    readonly?: boolean;
+    /** “今天”按钮的部件属性 */
+    propsToday?: Partial<ButtonProps>;
+    /** 每格（td）的部件属性，可以按日期给 */
+    propsCell?: PartProps<'td', 'role' | 'aria-selected'> | ((date: string) => PartProps<'td'>);
+}
+/** CalendarBoard 的样式 */
+export declare const calendarBoardStyles: Readonly<{
+    cell: css.CompiledStyles;
+    day: css.CompiledStyles;
+    dayHead: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    event: css.CompiledStyles;
+    events: css.CompiledStyles;
+    grid: css.CompiledStyles;
+    header: css.CompiledStyles;
+    more: css.CompiledStyles;
+    note: css.CompiledStyles;
+    outside: css.CompiledStyles;
+    readonly: css.CompiledStyles;
+    root: css.CompiledStyles;
+    selected: css.CompiledStyles;
+    title: css.CompiledStyles;
+    today: css.CompiledStyles;
+    weekday: css.CompiledStyles;
+    weekend: css.CompiledStyles;
+}>;
+/** 整页的月历：每天一个大格子，放日程、排班、节假日 */
+export declare const CalendarBoard: <T>(props: CalendarBoardProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;