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

package/dist/patterns/NotificationCenter.js

@@ -0,0 +1,342 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { Indicator } from "../base/Indicator.js";
+import { StatusDot } from "../base/StatusDot.js";
+import { useFormat } from "../config/lang/format.js";
+import { Empty } from "../feedback/Empty.js";
+import { Popover } from "../overlay/Popover.js";
+import { ToggleGroup, ToggleItem } from "../input/ToggleGroup.js";
+import { Switch } from "../input/Switch.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { computed, createVNode, mergeProps, ref } 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 { Bell } from "@lucide/icons";
+//#region src/patterns/NotificationCenter.tsx
+/**
+* 通知：顶栏的铃铛 NotificationCenter（右上角是未读数，点开是通知列表），与列表本身 NotificationList
+* （通知页面、侧边抽屉里直接放）。列表新的在前：按类型筛选、只看未读、全部标为已读；点一条标为已读并去它的地址（走路由适配）。
+* 通知存在哪、何时算已读由应用决定：组件只报告 onRead。
+*
+*   <NotificationCenter
+*     items={notices}                                       // { id, title, description?, time, type?, read, href?, tone? }
+*     types={[{ key: 'todo', label: '待办' }, { key: 'remind', label: '催办' }]}
+*     onRead={(ids) => markRead(ids)}
+*     footer={<Link href="/inbox">打开收件箱</Link>}
+*   />
+*   <NotificationList items={notices} types={types} onRead={markRead} />    通知页面：同一份列表，不放进弹出层
+*
+* 时间写成相对现在（3 分钟前、昨天），悬停看完整时间。未读的前面一个色点（tone 决定颜色，默认 accent），
+* 读屏念“未读”。列表为空时显示 empty（默认“没有通知”）。和 Toast 的分工：Toast 是此刻发生的事、几秒后消失；
+* 通知是留着、可以回头看的。
+*
+* NotificationList 的部件：Root（div）、Head（div）、Title（span）、MarkAll（Button）、Filters（div）、Types（ToggleGroup）、
+* UnreadOnly（Switch）、List（ul）、Item（a，可以按条计算）、Empty（div）、Footer（div）。
+*/
+/** 一条通知 */
+/** 通知的一种类型（筛选按钮） */
+/** 通知列表的内容与回调：NotificationList 与 NotificationCenter 共用 */
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+/** NotificationList 的样式：root、head、title、filters、list、item、dot… */
+var notificationListStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0
+	},
+	head: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_sm",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border"
+	},
+	title: { fontWeight: "_semibold" },
+	filters: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_sm",
+		paddingBlock: "_sm",
+		paddingInline: "_md"
+	},
+	types: { flexWrap: "wrap" },
+	end: { marginInlineStart: "auto" },
+	list: {
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		overflowY: "auto"
+	},
+	item: {
+		display: "grid",
+		gridTemplateColumns: "0.5rem minmax(0, 1fr) auto",
+		columnGap: "_sm",
+		alignItems: "baseline",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		color: "inherit",
+		textDecoration: "none",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		},
+		cursor: "pointer"
+	},
+	dot: {
+		display: "flex",
+		alignItems: "center",
+		height: "1lh",
+		alignSelf: "start"
+	},
+	body: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		minWidth: 0
+	},
+	itemTitle: { fontSize: "_sm" },
+	itemTitleUnread: { fontWeight: "_semibold" },
+	muted: {
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	time: {
+		color: "_textMuted",
+		fontSize: "_xs",
+		whiteSpace: "nowrap"
+	},
+	foot: {
+		display: "flex",
+		justifyContent: "center",
+		paddingBlock: "_sm",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_border"
+	},
+	empty: { paddingBlock: "_lg" }
+});
+/** 通知列表：标题行、筛选、通知（新的在前）、底部；直接放在页面、抽屉里，或由 NotificationCenter 放进弹出层 */
+var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items");
+	const types = readonlyProp(_props, "types");
+	const onRead = readonlyProp(_props, "onRead");
+	const onItemClick = readonlyProp(_props, "onItemClick");
+	const footer = readonlyProp(_props, "footer");
+	const empty = readonlyProp(_props, "empty");
+	const now = readonlyProp(_props, "now");
+	const title = readonlyProp(_props, "title");
+	const propsHead = readonlyProp(_props, "propsHead");
+	const propsMarkAll = readonlyProp(_props, "propsMarkAll");
+	const propsFilters = readonlyProp(_props, "propsFilters");
+	const propsTypes = readonlyProp(_props, "propsTypes");
+	const propsUnreadOnly = readonlyProp(_props, "propsUnreadOnly");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsEmpty = readonlyProp(_props, "propsEmpty");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const format = useFormat();
+	const router = useRouterLink();
+	let type = ref("");
+	let unreadOnly = ref(false);
+	const unread = computed(() => items.value.filter((item) => !item.read).length);
+	const shown = computed(() => items.value.filter((item) => (!type.value || item.type === type.value) && (!unreadOnly.value || !item.read)));
+	function select(item, event) {
+		if (!item.read) onRead.value?.([item.id]);
+		onItemClick.value?.(item);
+		if (item.href) router.onClick(event, item.href);
+	}
+	return () => {
+		const markAll = createVNode(Button, mergeProps(mergePartProps({
+			size: "xs",
+			variant: "ghost",
+			sx: title.value === false && notificationListStyles.end
+		}, propsMarkAll.value, {
+			disabled: unread.value === 0,
+			onClick: () => onRead.value?.(items.value.filter((item) => !item.read).map((item) => item.id))
+		}), { "key": "__site0" }), {
+			default: () => [messages.notificationsMarkAllRead],
+			$stable: true
+		});
+		return createVNode("div", mergeAttrs({ sx: notificationListStyles.root }, rest), [
+			title.value !== false && createVNode("div", mergeAttrs({ sx: notificationListStyles.head }, propsHead.value), [createVNode("span", css.attrs(notificationListStyles.title), [title.value ?? messages.notifications]), markAll]),
+			createVNode("div", mergeAttrs({ sx: notificationListStyles.filters }, propsFilters.value), [
+				types.value?.length ? createVNode(ToggleGroup, mergeProps(mergePartProps({
+					size: "xs",
+					sx: notificationListStyles.types,
+					"aria-label": messages.notifications
+				}, propsTypes.value), {
+					"_value": type.value || "all",
+					"onUpdate:_value": _cache[0] || (_cache[0] = (next) => type.value = !next || next === "all" ? "" : next),
+					"key": "__site2"
+				}), {
+					default: () => [createVNode(ToggleItem, {
+						"value": "all",
+						"key": "__site1"
+					}, {
+						default: () => [messages.notificationsAll],
+						$stable: true
+					}), types.value.map((item) => createVNode(ToggleItem, {
+						"key": item.key,
+						"value": item.key
+					}, { default: () => [item.label] }))],
+					$stable: true
+				}) : null,
+				createVNode(Switch, mergeProps(mergePartProps({
+					size: "sm",
+					sx: notificationListStyles.end
+				}, propsUnreadOnly.value), {
+					"_checked": unreadOnly.value,
+					"onUpdate:_checked": _cache[1] || (_cache[1] = ($event) => unreadOnly.value = $event),
+					"key": "__site3"
+				}), {
+					default: () => [messages.notificationsUnreadOnly],
+					$stable: true
+				}),
+				title.value === false && markAll
+			]),
+			shown.value.length === 0 ? createVNode("div", mergeAttrs({ sx: notificationListStyles.empty }, propsEmpty.value), [empty.value ?? createVNode(Empty, {
+				"size": "sm",
+				"title": messages.notificationsEmpty
+			}, null)]) : createVNode("ul", mergeAttrs({ sx: notificationListStyles.list }, propsList.value), [shown.value.map((item) => createVNode("li", { "key": item.id }, [createVNode("a", mergeProps(mergeAttrs({ sx: [notificationListStyles.item, focusRingStyles.visible] }, typeof propsItem.value === "function" ? propsItem.value(item) : propsItem.value, {
+				href: item.href ? router.href(item.href) : void 0,
+				role: item.href ? void 0 : "button",
+				tabindex: 0,
+				onClick: (event) => select(item, event),
+				onKeydown: (event) => {
+					if (!item.href && (event.key === "Enter" || event.key === " ")) {
+						event.preventDefault();
+						select(item, event);
+					}
+				}
+			}), { "data-state": item.read ? "read" : "unread" }), [
+				createVNode("span", css.attrs(notificationListStyles.dot), [!item.read && createVNode(StatusDot, { "tone": item.tone ?? "accent" }, null)]),
+				createVNode("span", css.attrs(notificationListStyles.body), [createVNode("span", css.attrs(notificationListStyles.itemTitle, !item.read && notificationListStyles.itemTitleUnread), [!item.read && createVNode(VisuallyHidden, null, {
+					default: () => [messages.notificationUnreadMark, " "],
+					$stable: true
+				}), item.title]), item.description && createVNode("span", css.attrs(notificationListStyles.muted), [item.description])]),
+				createVNode("time", mergeProps({
+					"datetime": item.time,
+					"title": format.date(item.time, {
+						dateStyle: "medium",
+						timeStyle: "short"
+					})
+				}, css.attrs(notificationListStyles.time)), [format.relative(item.time, { now: now.value })])
+			])]))]),
+			hasContent(footer.value) && createVNode("div", mergeAttrs({ sx: notificationListStyles.foot }, propsFooter.value), [footer.value])
+		]);
+	};
+}, {
+	name: "NotificationList",
+	props: [
+		"items",
+		"types",
+		"onRead",
+		"onItemClick",
+		"footer",
+		"empty",
+		"now",
+		"title",
+		"propsHead",
+		"propsMarkAll",
+		"propsFilters",
+		"propsTypes",
+		"propsUnreadOnly",
+		"propsList",
+		"propsItem",
+		"propsEmpty",
+		"propsFooter"
+	]
+});
+/** 未声明的属性落到弹出层的面板上 */
+/** NotificationCenter 的样式：panel（弹出层的宽度）、list（列表的最大高度） */
+var notificationCenterStyles = css.create({
+	panel: {
+		width: "min(26rem, calc(100vw - 2rem))",
+		padding: 0
+	},
+	list: { maxHeight: "24rem" }
+});
+/** 通知中心：顶栏的铃铛（带未读数），点开是 NotificationList；点了一条就收起 */
+var NotificationCenter = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache2 = [];
+	const items = readonlyProp(_props2, "items");
+	const types = readonlyProp(_props2, "types");
+	const onRead = readonlyProp(_props2, "onRead");
+	const onItemClick = readonlyProp(_props2, "onItemClick");
+	const footer = readonlyProp(_props2, "footer");
+	const empty = readonlyProp(_props2, "empty");
+	const now = readonlyProp(_props2, "now");
+	const open = bindable(_props2, "_open", () => false, _ctx2.emit);
+	const propsTrigger = readonlyProp(_props2, "propsTrigger");
+	const propsNotificationList = readonlyProp(_props2, "propsNotificationList");
+	const sx = readonlyProp(_props2, "sx");
+	const rest = restProps(_props2, _ctx2, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const unread = computed(() => items.value.filter((item) => !item.read).length);
+	return () => createVNode(Popover, mergeProps(rest, {
+		"placement": rest.placement ?? "bottom-end",
+		"sx": [notificationCenterStyles.panel, sx.value],
+		"_open": open.value,
+		"onUpdate:_open": _cache2[0] || (_cache2[0] = ($event) => open.value = $event),
+		"trigger": _cache2[1] || (_cache2[1] = (trigger) => createVNode(Indicator, {
+			"count": unread.value,
+			"label": messages.notificationsUnread(unread.value)
+		}, { default: () => [createVNode(IconButton, mergePartProps({
+			icon: Bell,
+			"aria-label": messages.notificationsUnread(unread.value)
+		}, propsTrigger.value, trigger), null)] })),
+		"key": "__site4"
+	}), {
+		default: () => [createVNode(NotificationList, mergePartProps({
+			items: items.value,
+			propsList: { sx: notificationCenterStyles.list }
+		}, propsNotificationList.value, {
+			types: types.value,
+			onRead: onRead.value,
+			footer: footer.value,
+			empty: empty.value,
+			now: now.value,
+			onItemClick: (item) => {
+				onItemClick.value?.(item);
+				open.value = false;
+			}
+		}), null)],
+		$stable: true
+	});
+}, {
+	name: "NotificationCenter",
+	props: [
+		"items",
+		"types",
+		"onRead",
+		"onItemClick",
+		"footer",
+		"empty",
+		"now",
+		"_open",
+		"onUpdate:_open",
+		"propsTrigger",
+		"propsNotificationList",
+		"sx"
+	]
+});
+//#endregion
+export { NotificationCenter, NotificationList, notificationCenterStyles, notificationListStyles };
+
+//# sourceMappingURL=NotificationCenter.js.map

package/dist/patterns/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vue_computed","_createVNode","_mergeProps","_vtp_bindable"],"sources":["../../src/patterns/NotificationCenter.tsx"],"sourcesContent":["/**\n * 通知：顶栏的铃铛 NotificationCenter（右上角是未读数，点开是通知列表），与列表本身 NotificationList\n * （通知页面、侧边抽屉里直接放）。列表新的在前：按类型筛选、只看未读、全部标为已读；点一条标为已读并去它的地址（走路由适配）。\n * 通知存在哪、何时算已读由应用决定：组件只报告 onRead。\n *\n *   <NotificationCenter\n *     items={notices}                                       // { id, title, description?, time, type?, read, href?, tone? }\n *     types={[{ key: 'todo', label: '待办' }, { key: 'remind', label: '催办' }]}\n *     onRead={(ids) => markRead(ids)}\n *     footer={<Link href=\"/inbox\">打开收件箱</Link>}\n *   />\n *   <NotificationList items={notices} types={types} onRead={markRead} />    通知页面：同一份列表，不放进弹出层\n *\n * 时间写成相对现在（3 分钟前、昨天），悬停看完整时间。未读的前面一个色点（tone 决定颜色，默认 accent），\n * 读屏念“未读”。列表为空时显示 empty（默认“没有通知”）。和 Toast 的分工：Toast 是此刻发生的事、几秒后消失；\n * 通知是留着、可以回头看的。\n *\n * NotificationList 的部件：Root（div）、Head（div）、Title（span）、MarkAll（Button）、Filters（div）、Types（ToggleGroup）、\n * UnreadOnly（Switch）、List（ul）、Item（a，可以按条计算）、Empty（div）、Footer（div）。\n */\nimport { Bell } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Indicator } from '../base/Indicator';\nimport { StatusDot } from '../base/StatusDot';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { Empty } from '../feedback/Empty';\nimport { Switch, type SwitchProps } from '../input/Switch';\nimport { ToggleGroup, ToggleItem, type ToggleGroupBaseProps } from '../input/ToggleGroup';\nimport { Popover, type PopoverProps } from '../overlay/Popover';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { SingleSelectionProps } from '../utils/data/selection';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { patternsMessages } from './messages';\n\n/** 一条通知 */\nexport interface NotificationItem {\n  /** 标识 */\n  id: string;\n  /** 标题：一句话说清发生了什么 */\n  title: string;\n  /** 补充说明（谁、哪张单） */\n  description?: string;\n  /** 发生的时间（ISO） */\n  time: string;\n  /** 类型：按 types 筛选 */\n  type?: string;\n  /** 读过了 */\n  read: boolean;\n  /** 点了去哪儿 */\n  href?: string;\n  /** 未读色点的色调，默认 accent；超时、被退回用 danger、warning */\n  tone?: StatusTone;\n}\n\n/** 通知的一种类型（筛选按钮） */\nexport interface NotificationType {\n  /** 类型：对应 NotificationItem.type */\n  key: string;\n  /** 名称 */\n  label: string;\n}\n\n/** 通知列表的内容与回调：NotificationList 与 NotificationCenter 共用 */\nexport interface NotificationListOptions {\n  /** 通知：新的在前（组件不排序） */\n  items: readonly NotificationItem[];\n  /** 类型：写了时列表上方有按类型筛选的按钮 */\n  types?: readonly NotificationType[];\n  /** 这些通知读过了：点了一条、全部标为已读 */\n  onRead?: (ids: string[]) => void;\n  /** 点了一条（标为已读之后）；有 href 时还会去那里 */\n  onItemClick?: (item: NotificationItem) => void;\n  /** 列表下面的内容（“查看全部”） */\n  footer?: VNodeChild;\n  /** 没有通知时显示的内容，默认是“没有通知” */\n  empty?: VNodeChild;\n  /** 相对时间以哪个时刻为现在（毫秒时间戳），默认此刻；演示数据固定日期时传 */\n  now?: number;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface NotificationListProps extends PartProps<'div', 'title'>, NotificationListOptions {\n  /** 标题，默认“通知”；false 不要标题行（“全部标为已读”挪到筛选那一行） */\n  title?: VNodeChild | false;\n  /** 标题行的部件属性 */\n  propsHead?: PartProps<'div'>;\n  /** “全部标为已读”按钮的部件属性 */\n  propsMarkAll?: Partial<ButtonProps>;\n  /** 筛选行的部件属性 */\n  propsFilters?: PartProps<'div'>;\n  /** 类型筛选按钮组的部件属性 */\n  propsTypes?: Partial<ToggleGroupBaseProps>;\n  /** “只看未读”开关的部件属性 */\n  propsUnreadOnly?: Partial<SwitchProps>;\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n  /** 每一条（a）的部件属性，可以按条计算 */\n  propsItem?: PartProps<'a'> | ((item: NotificationItem) => PartProps<'a'>);\n  /** 列表为空时那一块的部件属性 */\n  propsEmpty?: PartProps<'div'>;\n  /** 列表下面那一行的部件属性 */\n  propsFooter?: PartProps<'div'>;\n}\n\n/** NotificationList 的样式：root、head、title、filters、list、item、dot… */\nexport const notificationListStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  head: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  title: { fontWeight: '_semibold' },\n  // 类型多时筛选按钮换行；“只看未读”总在最后、靠结束边\n  filters: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n  },\n  types: { flexWrap: 'wrap' },\n  end: { marginInlineStart: 'auto' },\n  list: { listStyle: 'none', margin: 0, padding: 0, overflowY: 'auto' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: '0.5rem minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'baseline',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    color: 'inherit',\n    textDecoration: 'none',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    cursor: 'pointer',\n  },\n  // 未读的色点贴着标题的第一行\n  dot: { display: 'flex', alignItems: 'center', height: '1lh', alignSelf: 'start' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  itemTitle: { fontSize: '_sm' },\n  itemTitleUnread: { fontWeight: '_semibold' },\n  muted: { color: '_textMuted', fontSize: '_xs' },\n  time: { color: '_textMuted', fontSize: '_xs', whiteSpace: 'nowrap' },\n  foot: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingBlock: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  empty: { paddingBlock: '_lg' },\n});\n\n/** 通知列表：标题行、筛选、通知（新的在前）、底部；直接放在页面、抽屉里，或由 NotificationCenter 放进弹出层 */\nexport const NotificationList = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    title,\n    propsHead,\n    propsMarkAll,\n    propsFilters,\n    propsTypes,\n    propsUnreadOnly,\n    propsList,\n    propsItem,\n    propsEmpty,\n    propsFooter,\n    ...rest\n  }: NotificationListProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const format = useFormat();\n    const router = useRouterLink();\n    let type = _state('');\n    let unreadOnly = _state(false);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    const shown = _derived(\n      items.filter((item) => (!type || item.type === type) && (!unreadOnly || !item.read)),\n    );\n\n    function select(item: NotificationItem, event: MouseEvent) {\n      if (!item.read) onRead?.([item.id]);\n      onItemClick?.(item);\n      if (item.href) router.onClick(event, item.href);\n    }\n\n    return () => {\n      const markAll = (\n        <Button\n          {...mergePartProps<ButtonProps>(\n            { size: 'xs', variant: 'ghost', sx: title === false && notificationListStyles.end },\n            propsMarkAll,\n            {\n              disabled: unread === 0,\n              onClick: () => onRead?.(items.filter((item) => !item.read).map((item) => item.id)),\n            },\n          )}\n        >\n          {messages.notificationsMarkAllRead}\n        </Button>\n      );\n      return (\n        <div {...mergeAttrs<'div'>({ sx: notificationListStyles.root }, rest)}>\n          {title !== false && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.head }, propsHead)}>\n              <span {...css.attrs(notificationListStyles.title)}>\n                {title ?? messages.notifications}\n              </span>\n              {markAll}\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: notificationListStyles.filters }, propsFilters)}>\n            {types?.length ? (\n              <ToggleGroup\n                {...mergePartProps<ToggleGroupBaseProps & SingleSelectionProps>(\n                  {\n                    size: 'xs',\n                    sx: notificationListStyles.types,\n                    'aria-label': messages.notifications,\n                  },\n                  propsTypes,\n                )}\n                _value={type || 'all'}\n                onUpdate:_value={(next: string | null) =>\n                  (type = !next || next === 'all' ? '' : next)\n                }\n              >\n                <ToggleItem value=\"all\">{messages.notificationsAll}</ToggleItem>\n                {types.map((item) => (\n                  <ToggleItem key={item.key} value={item.key}>\n                    {item.label}\n                  </ToggleItem>\n                ))}\n              </ToggleGroup>\n            ) : null}\n            <Switch\n              {...mergePartProps<SwitchProps>(\n                { size: 'sm', sx: notificationListStyles.end },\n                propsUnreadOnly,\n              )}\n              _checked={unreadOnly}\n            >\n              {messages.notificationsUnreadOnly}\n            </Switch>\n            {title === false && markAll}\n          </div>\n          {shown.length === 0 ? (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.empty }, propsEmpty)}>\n              {empty ?? <Empty size=\"sm\" title={messages.notificationsEmpty} />}\n            </div>\n          ) : (\n            <ul {...mergeAttrs<'ul'>({ sx: notificationListStyles.list }, propsList)}>\n              {shown.map((item) => (\n                <li key={item.id}>\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [notificationListStyles.item, focusRingStyles.visible] },\n                      typeof propsItem === 'function' ? propsItem(item) : propsItem,\n                      {\n                        href: item.href ? router.href(item.href) : undefined,\n                        role: item.href ? undefined : 'button',\n                        tabindex: 0,\n                        onClick: (event: MouseEvent) => select(item, event),\n                        onKeydown: (event: KeyboardEvent) => {\n                          if (!item.href && (event.key === 'Enter' || event.key === ' ')) {\n                            event.preventDefault();\n                            select(item, event as unknown as MouseEvent);\n                          }\n                        },\n                      },\n                    )}\n                    data-state={item.read ? 'read' : 'unread'}\n                  >\n                    <span {...css.attrs(notificationListStyles.dot)}>\n                      {!item.read && <StatusDot tone={item.tone ?? 'accent'} />}\n                    </span>\n                    <span {...css.attrs(notificationListStyles.body)}>\n                      <span\n                        {...css.attrs(\n                          notificationListStyles.itemTitle,\n                          !item.read && notificationListStyles.itemTitleUnread,\n                        )}\n                      >\n                        {!item.read && (\n                          <VisuallyHidden>{messages.notificationUnreadMark} </VisuallyHidden>\n                        )}\n                        {item.title}\n                      </span>\n                      {item.description && (\n                        <span {...css.attrs(notificationListStyles.muted)}>{item.description}</span>\n                      )}\n                    </span>\n                    <time\n                      datetime={item.time}\n                      title={format.date(item.time, { dateStyle: 'medium', timeStyle: 'short' })}\n                      {...css.attrs(notificationListStyles.time)}\n                    >\n                      {format.relative(item.time, { now })}\n                    </time>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n          {hasContent(footer) && (\n            <div {...mergeAttrs<'div'>({ sx: notificationListStyles.foot }, propsFooter)}>\n              {footer}\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到弹出层的面板上 */\nexport interface NotificationCenterProps\n  extends Omit<PopoverProps, 'trigger' | 'children'>, NotificationListOptions {\n  /** 铃铛按钮的部件属性 */\n  propsTrigger?: Partial<IconButtonProps>;\n  /** 面板里的通知列表的部件属性 */\n  propsNotificationList?: Partial<NotificationListProps>;\n}\n\n/** NotificationCenter 的样式：panel（弹出层的宽度）、list（列表的最大高度） */\nexport const notificationCenterStyles = css.create({\n  panel: { width: 'min(26rem, calc(100vw - 2rem))', padding: 0 },\n  list: { maxHeight: '24rem' },\n});\n\n/** 通知中心：顶栏的铃铛（带未读数），点开是 NotificationList；点了一条就收起 */\nexport const NotificationCenter = _component(\n  ({\n    items,\n    types,\n    onRead,\n    onItemClick,\n    footer,\n    empty,\n    now,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsNotificationList,\n    sx,\n    ...rest\n  }: NotificationCenterProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const unread = _derived(items.filter((item) => !item.read).length);\n    return () => (\n      <Popover\n        {...rest}\n        placement={rest.placement ?? 'bottom-end'}\n        sx={[notificationCenterStyles.panel, sx]}\n        _open={open}\n        trigger={(trigger) => (\n          <Indicator count={unread} label={messages.notificationsUnread(unread)}>\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: Bell, 'aria-label': messages.notificationsUnread(unread) },\n                propsTrigger,\n                trigger,\n              )}\n            />\n          </Indicator>\n        )}\n      >\n        <NotificationList\n          {...mergePartProps<NotificationListProps>(\n            { items, propsList: { sx: notificationCenterStyles.list } },\n            propsNotificationList,\n            {\n              types,\n              onRead,\n              footer,\n              empty,\n              now,\n              onItemClick: (item: NotificationItem) => {\n                onItemClick?.(item);\n                open = false;\n              },\n            },\n          )}\n        />\n      </Popover>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,IAAa,yBAAyB,IAAI,OAAO;CAC/C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,UAAU;CAAE;CAC9D,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,cAAc;EACd,eAAe;EACf,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;CACvB;CACA,OAAO,EAAE,YAAY,YAAY;CAEjC,SAAS;EACP,SAAS;EACT,UAAU;EACV,YAAY;EACZ,KAAK;EACL,cAAc;EACd,eAAe;CACjB;CACA,OAAO,EAAE,UAAU,OAAO;CAC1B,KAAK,EAAE,mBAAmB,OAAO;CACjC,MAAM;EAAE,WAAW;EAAQ,QAAQ;EAAG,SAAS;EAAG,WAAW;CAAO;CACpE,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,cAAc;EACd,eAAe;EACf,OAAO;EACP,gBAAgB;EAChB,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;GAAE,SAAS;GAAe,UAAU;EAAa;EAClE,QAAQ;CACV;CAEA,KAAK;EAAE,SAAS;EAAQ,YAAY;EAAU,QAAQ;EAAO,WAAW;CAAQ;CAChF,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAC1E,WAAW,EAAE,UAAU,MAAM;CAC7B,iBAAiB,EAAE,YAAY,YAAY;CAC3C,OAAO;EAAE,OAAO;EAAc,UAAU;CAAM;CAC9C,MAAM;EAAE,OAAO;EAAc,UAAU;EAAO,YAAY;CAAS;CACnE,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;CACzB;CACA,OAAO,EAAE,cAAc,MAAM;AAC/B,CAAC;;AAGD,IAAa,mBAAmB,0BAC9B,QAAA,SAmB6B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MADxB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,cAAc;CAC7B,IAAI,OAAIC,IAAU,EAAE;CACpB,IAAI,aAAUA,IAAU,KAAK;CAC7B,MAAM,SAAMC,eAAY,MAAA,MAAM,QAAQ,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM;CACjE,MAAM,QAAKA,eACT,MAAA,MAAM,QAAQ,UAAU,CAAA,KAAA,SAAS,KAAK,SAAI,KAAA,WAAe,CAAA,WAAA,SAAe,CAAC,KAAK,KAAK,CAAC;CAGtF,SAAS,OAAO,MAAwB,OAAmB;EACzD,IAAI,CAAC,KAAK,MAAM,OAAA,QAAS,CAAC,KAAK,EAAE,CAAC;EAClC,YAAA,QAAc,IAAI;EAClB,IAAI,KAAK,MAAM,OAAO,QAAQ,OAAO,KAAK,IAAI;CAChD;CAEA,aAAa;EACX,MAAM,UAAOC,YAAA,QAAAC,WAEL,eACF;GAAE,MAAM;GAAM,SAAS;GAAS,IAAI,MAAA,UAAU,SAAS,uBAAuB;EAAI,GAAC,aAAA,OAEnF;GACE,UAAU,OAAA,UAAW;GACrB,eAAe,OAAA,QAAS,MAAA,MAAM,QAAQ,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,SAAS,KAAK,EAAE,CAAC;EACnF,CACF,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;GAAA,eAAA,CAEA,SAAS,wBAAwB;GAAA,SAAA;EAAA,CAAA;EAGtC,OAAAD,YAAA,OACW,WAAkB,EAAE,IAAI,uBAAuB,KAAK,GAAG,IAAI,GAAC;GAClE,MAAA,UAAU,SAAKA,YAAA,OACL,WAAkB,EAAE,IAAI,uBAAuB,KAAK,GAAC,UAAA,KAAW,GAAC,CAAAA,YAAA,QAC9D,IAAI,MAAM,uBAAuB,KAAK,GAAC,CAC9C,MAAA,SAAS,SAAS,aAAa,CAAA,GAEjC,OAAO,CAAA;GAEXA,YAAA,OACQ,WAAkB,EAAE,IAAI,uBAAuB,QAAQ,GAAC,aAAA,KAAc,GAAC;IAC7E,MAAA,OAAO,SAAMA,YAAA,aAAAC,WAEN,eACF;KACE,MAAM;KACN,IAAI,uBAAuB;KAC3B,cAAc,SAAS;IACzB,GAAC,WAAA,KAEH,GAAC;KAAA,UACO,KAAA,SAAQ;KAAK,mBAAA,OAAA,OAAA,OAAA,MACH,SACf,KAAA,QAAO,CAAC,QAAQ,SAAS,QAAQ,KAAK;KAAK,OAAA;IAAA,CAAA,GAAA;KAAA,eAAA,CAAAD,YAAA,YAAA;MAAA,SAAA;MAAA,OAAA;KAAA,GAAA;MAAA,eAAA,CAGrB,SAAS,gBAAgB;MAAA,SAAA;KAAA,CAAA,GACjD,MAAA,MAAM,KAAK,SAAIA,YAAA,YAAA;MAAA,OACG,KAAK;MAAG,SAAS,KAAK;KAAG,GAAA,EAAA,eAAA,CACvC,KAAK,KAAK,EAAA,CAAA,CAEd,CAAC;KAAA,SAAA;IAAA,CAAA,IAEF;IAAIA,YAAA,QAAAC,WAEF,eACF;KAAE,MAAM;KAAM,IAAI,uBAAuB;IAAI,GAAC,gBAAA,KAEhD,GAAC;KAAA,YAAA,WAAA;KAAA,qBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAA,QAAA;KAAA,OAAA;IAAA,CAAA,GAAA;KAAA,eAAA,CAGA,SAAS,uBAAuB;KAAA,SAAA;IAAA,CAAA;IAElC,MAAA,UAAU,SAAS;GAAO,CAAA;GAE5B,MAAA,MAAM,WAAW,IAACD,YAAA,OACR,WAAkB,EAAE,IAAI,uBAAuB,MAAM,GAAC,WAAA,KAAY,GAAC,CACzE,MAAA,SAAAA,YAAA,OAAA;IAAA,QAAA;IAAA,SAAiC,SAAS;GAAkB,GAAA,IAAA,CAAI,CAAA,IAAAA,YAAA,MAG3D,WAAiB,EAAE,IAAI,uBAAuB,KAAK,GAAC,UAAA,KAAW,GAAC,CACrE,MAAA,MAAM,KAAK,SAAIA,YAAA,MAAA,EAAA,OACL,KAAK,GAAE,GAAA,CAAAA,YAAA,KAAAC,WAER,WACF,EAAE,IAAI,CAAC,uBAAuB,MAAM,gBAAgB,OAAO,EAAE,GAC7D,OAAA,UAAA,UAAqB,aAAa,UAAA,MAAU,IAAI,IAAC,UAAA,OACjD;IACE,MAAM,KAAK,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI,KAAA;IAC3C,MAAM,KAAK,OAAO,KAAA,IAAY;IAC9B,UAAU;IACV,UAAU,UAAsB,OAAO,MAAM,KAAK;IAClD,YAAY,UAAyB;KACnC,IAAI,CAAC,KAAK,SAAS,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;MAC9D,MAAM,eAAe;MACrB,OAAO,MAAM,KAA8B;KAC7C;IACF;GACF,CACF,GAAC,EAAA,cACW,KAAK,OAAO,SAAS,SAAQ,CAAA,GAAA;IAAAD,YAAA,QAE/B,IAAI,MAAM,uBAAuB,GAAG,GAAC,CAC5C,CAAC,KAAK,QAAIA,YAAA,WAAA,EAAA,QAAqB,KAAK,QAAQ,SAAQ,GAAA,IAAA,CAAI,CAAA;IAAAA,YAAA,QAEjD,IAAI,MAAM,uBAAuB,IAAI,GAAC,CAAAA,YAAA,QAExC,IAAI,MACN,uBAAuB,WACvB,CAAC,KAAK,QAAQ,uBAAuB,eACvC,GAAC,CAEA,CAAC,KAAK,QAAIA,YAAA,gBAAA,MAAA;KAAA,eAAA,CACQ,SAAS,wBAAuB,GAAC;KAAA,SAAA;IAAA,CAAA,GAEnD,KAAK,KAAK,CAAA,GAEZ,KAAK,eAAWA,YAAA,QACL,IAAI,MAAM,uBAAuB,KAAK,GAAC,CAAG,KAAK,WAAW,CAAA,CACrE,CAAA;IAAAA,YAAA,QAAAC,WAAA;KAAA,YAGS,KAAK;KAAI,SACZ,OAAO,KAAK,KAAK,MAAM;MAAE,WAAW;MAAU,WAAW;KAAQ,CAAC;IAAC,GACtE,IAAI,MAAM,uBAAuB,IAAI,CAAC,GAAA,CAEzC,OAAO,SAAS,KAAK,MAAM,EAAE,KAAG,IAAA,MAAC,CAAC,CAAC,CAAA;GAAA,CAAA,CAAA,CAAA,CAI3C,CAAC,CAAA;GAGL,WAAU,OAAA,KAAO,KAACD,YAAA,OACR,WAAkB,EAAE,IAAI,uBAAuB,KAAK,GAAC,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAG7E,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAYA,IAAa,2BAA2B,IAAI,OAAO;CACjD,OAAO;EAAE,OAAO;EAAkC,SAAS;CAAE;CAC7D,MAAM,EAAE,WAAW,QAAQ;AAC7B,CAAC;;AAGD,IAAa,qBAAqB,0BAChC,SAAA,UAa+B;CAAA,MAAA,UAAA,CAAA;CAAA,MAAA,QAAAJ,aAAA,SAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,SAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,SAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,SAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,MAAAA,aAAA,SAAA,KAAA;CAAA,MAAA,OAAAM,SAAA,SAAA,eALL,OAAK,MAAA,IAAA;CAAA,MAAA,eAAAN,aAAA,SAAA,cAAA;CAAA,MAAA,wBAAAA,aAAA,SAAA,uBAAA;CAAA,MAAA,KAAAA,aAAA,SAAA,IAAA;CAAA,MAI1B,OAAIC,UAAA,SAAA,OAAA,IAAA;CAEP,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,MAAM,SAAME,eAAY,MAAA,MAAM,QAAQ,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM;CACjE,aAAOC,YAAA,SAAAC,WAEC,MAAI;EAAA,aACG,KAAK,aAAa;EAAY,MACrC,CAAC,yBAAyB,OAAK,GAAA,KAAA;EAAK,SAAA,KAAA;EAAA,kBAAA,QAAA,OAAA,QAAA,MAAA,WAAA,KAAA,QAAA;EAAA,WAAA,QAAA,OAAA,QAAA,MAE9B,YAAOD,YAAA,WAAA;GAAA,SAAA,OAAA;GAAA,SACkB,SAAS,oBAAmB,OAAA,KAAO;EAAC,GAAA,EAAA,eAAA,CAAAA,YAAA,YAE7D,eACF;GAAE,MAAM;GAAM,cAAc,SAAS,oBAAmB,OAAA,KAAO;EAAE,GAAC,aAAA,OAElE,OACF,GAAC,IAAA,CAAA,EAAA,CAAA;EAGN,OAAA;CAAA,CAAA,GAAA;EAAA,eAAA,CAAAA,YAAA,kBAGK,eACF;GAAE,OAAK,MAAA;GAAE,WAAW,EAAE,IAAI,yBAAyB,KAAK;EAAE,GAAC,sBAAA,OAE3D;GACE,OAAK,MAAA;GACL,QAAM,OAAA;GACN,QAAM,OAAA;GACN,OAAK,MAAA;GACL,KAAG,IAAA;GACH,cAAc,SAA2B;IACvC,YAAA,QAAc,IAAI;IAClB,KAAA,QAAO;GACT;EACF,CACF,GAAC,IAAA,CAAA;EAAA,SAAA;CAAA,CAAA;AAIT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/PageTabs.d.ts

@@ -0,0 +1,30 @@
+import { type TabListProps } from '../navigation/Tabs';
+import { type PartProps } from '../utils/props';
+/** 一个页签 */
+export interface PageTab {
+    /** 页面的地址：也是页签的 value */
+    path: string;
+    /** 页签上的文字 */
+    title: string;
+    /** 固定：不能关闭（首页、工作台） */
+    pinned?: boolean;
+}
+/** 未声明的属性落到外层（Tabs 的 div）上 */
+export interface PageTabsProps extends PartProps<'div'> {
+    /** 打开的页面，按显示的顺序 */
+    pages: readonly PageTab[];
+    /** 当前页面的地址 */
+    current: string;
+    /** 点了一个页签（或 Enter）：跳过去 */
+    onNavigate: (path: string) => void;
+    /** 关闭页签（关闭按钮、Delete、中键，或右键菜单里的“关闭其他”“关闭右侧”）：参数是要关的地址 */
+    onClose?: (paths: string[]) => void;
+    /** 拖动排序：新的顺序 */
+    onReorder?: (paths: string[]) => void;
+    /** 标签栏右边“全部标签页”的菜单，默认 true */
+    showAllMenu?: boolean;
+    /** 标签栏（TabList）的部件属性 */
+    propsList?: Partial<TabListProps>;
+}
+/** 页签区：打开过的页面，切换、关闭、排序 */
+export declare const PageTabs: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PageTabsProps>;

package/dist/patterns/PageTabs.js

@@ -0,0 +1,97 @@
+import { mergePartProps } from "../utils/props.js";
+import { MenuItem } from "../overlay/Menu.js";
+import { ContextMenu } from "../overlay/ContextMenu.js";
+import { Tab, TabList, Tabs } from "../navigation/Tabs.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { Fragment, createVNode, isVNode, mergeProps, ref } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/patterns/PageTabs.tsx
+/** 一个页签 */
+/** 未声明的属性落到外层（Tabs 的 div）上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 页签区：打开过的页面，切换、关闭、排序 */
+var PageTabs = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const pages = readonlyProp(_props, "pages");
+	const current = readonlyProp(_props, "current");
+	const onNavigate = readonlyProp(_props, "onNavigate");
+	const onClose = readonlyProp(_props, "onClose");
+	const onReorder = readonlyProp(_props, "onReorder");
+	const showAllMenu = readonlyProp(_props, "showAllMenu", true);
+	const propsList = readonlyProp(_props, "propsList");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	let menuFor = ref(null);
+	/** 右键菜单里关闭 path 之外的、它右边的 */
+	const others = (path) => pages.value.filter((page) => page.path !== path && !page.pinned).map((page) => page.path);
+	const toRight = (path) => pages.value.slice(pages.value.findIndex((page) => page.path === path) + 1).filter((page) => !page.pinned).map((page) => page.path);
+	function renderMenu() {
+		const path = menuFor.value;
+		const page = pages.value.find((item) => item.path === path);
+		if (!path || !page) return null;
+		return createVNode(Fragment, null, [
+			createVNode(MenuItem, {
+				"disabled": page.pinned,
+				"onAction": () => onClose.value?.([path])
+			}, {
+				default: () => [messages.pageTabsClose],
+				$stable: true
+			}),
+			createVNode(MenuItem, {
+				"disabled": others(path).length === 0,
+				"onAction": () => onClose.value?.(others(path))
+			}, {
+				default: () => [messages.pageTabsCloseOthers],
+				$stable: true
+			}),
+			createVNode(MenuItem, {
+				"disabled": toRight(path).length === 0,
+				"onAction": () => onClose.value?.(toRight(path))
+			}, {
+				default: () => [messages.pageTabsCloseRight],
+				$stable: true
+			})
+		]);
+	}
+	return () => {
+		const list = createVNode(TabList, mergeProps(mergePartProps({
+			"aria-label": messages.pageTabsLabel,
+			showAllMenu: showAllMenu.value,
+			onReorder: onReorder.value
+		}, propsList.value), { "key": "__site0" }), {
+			default: () => [pages.value.map((page) => createVNode(Tab, {
+				"key": page.path,
+				"value": page.path,
+				"onClose": page.pinned || !onClose.value ? void 0 : () => onClose.value([page.path]),
+				"onContextmenu": () => menuFor.value = page.path
+			}, { default: () => [page.title] }))],
+			$stable: true
+		});
+		return createVNode(Tabs, mergeProps(rest, {
+			"_value": current.value,
+			"onUpdate:_value": _cache[0] || (_cache[0] = (next) => next !== void 0 && next !== current.value && onNavigate.value(next)),
+			"activation": "manual"
+		}), { default: () => [onClose.value ? createVNode(ContextMenu, {
+			"menu": renderMenu(),
+			"label": messages.pageTabsMenu
+		}, _isSlot(list) ? list : { default: () => [list] }) : list] });
+	};
+}, {
+	name: "PageTabs",
+	props: [
+		"pages",
+		"current",
+		"onNavigate",
+		"onClose",
+		"onReorder",
+		"showAllMenu",
+		"propsList"
+	]
+});
+//#endregion
+export { PageTabs };
+
+//# sourceMappingURL=PageTabs.js.map

package/dist/patterns/PageTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTabs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/patterns/PageTabs.tsx"],"sourcesContent":["/**\n * 页签区（后台的多页签）：打开过的页面各一个标签，点了切过去，可以关闭、拖动排序，右键有“关闭其他”“关闭右侧”。\n * 放在 AppShell 的 tabs 里；和路由同步交给 useRouteTabs（@zerodep-dev/vue-tsx-pro-ui/vue-router），也可以自己维护 pages。\n *\n *   const tabs = useRouteTabs(router, { home: '/' });\n *   <AppShell tabs={<PageTabs {...tabs} />} …>\n *\n * 标签就是 Tabs（只当导航，没有 TabPanel；activation=\"manual\"：方向键只移动焦点，Enter 才切过去，免得逐个跳页面）：\n * 关闭按钮、Delete、鼠标中键关闭，拖动或 Alt + ←→ 排序，放不下时滚动按钮与“全部标签页”。固定的页（pinned）不能关。\n *\n * 部件：Root（Tabs）、List（TabList）、Tab、Menu（右键菜单）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useMessages } from '../config/lang/messages';\nimport { Tab, TabList, Tabs, type TabListProps } from '../navigation/Tabs';\nimport { ContextMenu } from '../overlay/ContextMenu';\nimport { MenuItem } from '../overlay/Menu';\nimport { mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 一个页签 */\nexport interface PageTab {\n  /** 页面的地址：也是页签的 value */\n  path: string;\n  /** 页签上的文字 */\n  title: string;\n  /** 固定：不能关闭（首页、工作台） */\n  pinned?: boolean;\n}\n\n/** 未声明的属性落到外层（Tabs 的 div）上 */\nexport interface PageTabsProps extends PartProps<'div'> {\n  /** 打开的页面，按显示的顺序 */\n  pages: readonly PageTab[];\n  /** 当前页面的地址 */\n  current: string;\n  /** 点了一个页签（或 Enter）：跳过去 */\n  onNavigate: (path: string) => void;\n  /** 关闭页签（关闭按钮、Delete、中键，或右键菜单里的“关闭其他”“关闭右侧”）：参数是要关的地址 */\n  onClose?: (paths: string[]) => void;\n  /** 拖动排序：新的顺序 */\n  onReorder?: (paths: string[]) => void;\n  /** 标签栏右边“全部标签页”的菜单，默认 true */\n  showAllMenu?: boolean;\n  /** 标签栏（TabList）的部件属性 */\n  propsList?: Partial<TabListProps>;\n}\n\n/** 页签区：打开过的页面，切换、关闭、排序 */\nexport const PageTabs = _component(\n  ({\n    pages,\n    current,\n    onNavigate,\n    onClose,\n    onReorder,\n    showAllMenu = true,\n    propsList,\n    ...rest\n  }: PageTabsProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    // 右键菜单是给哪个页签打开的（页签的 contextmenu 先于外层的 ContextMenu 收到）\n    let menuFor = _state<string | null>(null);\n\n    /** 右键菜单里关闭 path 之外的、它右边的 */\n    const others = (path: string) =>\n      pages.filter((page) => page.path !== path && !page.pinned).map((page) => page.path);\n    const toRight = (path: string) =>\n      pages\n        .slice(pages.findIndex((page) => page.path === path) + 1)\n        .filter((page) => !page.pinned)\n        .map((page) => page.path);\n\n    function renderMenu() {\n      const path = menuFor;\n      const page = pages.find((item) => item.path === path);\n      if (!path || !page) return null;\n      return (\n        <>\n          <MenuItem disabled={page.pinned} onAction={() => onClose?.([path])}>\n            {messages.pageTabsClose}\n          </MenuItem>\n          <MenuItem disabled={others(path).length === 0} onAction={() => onClose?.(others(path))}>\n            {messages.pageTabsCloseOthers}\n          </MenuItem>\n          <MenuItem disabled={toRight(path).length === 0} onAction={() => onClose?.(toRight(path))}>\n            {messages.pageTabsCloseRight}\n          </MenuItem>\n        </>\n      );\n    }\n\n    return () => {\n      const list = (\n        <TabList\n          {...mergePartProps<TabListProps>(\n            { 'aria-label': messages.pageTabsLabel, showAllMenu, onReorder },\n            propsList,\n          )}\n        >\n          {pages.map((page) => (\n            <Tab\n              key={page.path}\n              value={page.path}\n              onClose={page.pinned || !onClose ? undefined : () => onClose([page.path])}\n              onContextmenu={() => (menuFor = page.path)}\n            >\n              {page.title}\n            </Tab>\n          ))}\n        </TabList>\n      );\n      return (\n        <Tabs\n          {...rest}\n          _value={current}\n          onUpdate:_value={(next: string | undefined) =>\n            next !== undefined && next !== current && onNavigate(next)\n          }\n          activation=\"manual\"\n        >\n          {onClose ? (\n            <ContextMenu menu={renderMenu()} label={messages.pageTabsMenu}>\n              {list}\n            </ContextMenu>\n          ) : (\n            list\n          )}\n        </Tabs>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/QueryTable.d.ts

@@ -0,0 +1,67 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type AlertProps } from '../feedback/Alert';
+import { type PaginationBarProps } from '../navigation/PaginationBar';
+import type { DataTableColumn } from '../table/columns';
+import { type DataTableProps } from '../table/DataTable';
+import { type SelectionBarProps } from '../table/SelectionBar';
+import type { TablePage, TableQueryState } from '../table/use-table-query';
+import { type PartProps } from '../utils/props';
+import { type FilterBarProps } from './FilterBar';
+/** 未声明的属性落到外层 div 上 */
+export interface QueryTableProps<T, Filters extends object> extends PartProps<'div'> {
+    /** 列表状态：useTableQuery 的返回值 */
+    query: TableQueryState<TablePage<T>, Filters>;
+    /** 列定义 */
+    columns: readonly DataTableColumn<T>[];
+    /** 行的 key */
+    getKey: (row: T, index: number) => string;
+    /** 表格的名称（工具栏起始边的标题，也是表格的 aria-label） */
+    title: string;
+    /** 查询栏的条件：拿到草稿，控件绑定它的字段（`_value={draft.keyword}`）；不写时没有查询栏 */
+    filters?: (draft: Filters) => VNodeChild;
+    /** 收起的条件（不常用的），点“展开”才显示 */
+    moreFilters?: (draft: Filters) => VNodeChild;
+    /** “重置”回到的条件；不写时是 query 一开始的条件 */
+    blankFilters?: Filters;
+    /** 工具栏上自己的按钮（新建、导出），在标题之后、内置按钮之前 */
+    toolbar?: VNodeChild;
+    /** 列设置与行高记在浏览器里的键（localStorage，自动加前缀）；不写时只在这次打开里有效 */
+    persistKey?: string;
+    /** 多列排序：按住 Shift 点列标题追加一列（同 DataTable 的 multiSort），排序写在 query.sorts */
+    multiSort?: boolean;
+    /** 勾选行：多选时表格上方出现批量操作栏 */
+    selectionMode?: DataTableProps<T>['selectionMode'];
+    /** 已选行的 key：父级写 _selected={keys} */
+    _selected?: string[];
+    /** 批量操作栏里的按钮：拿到已选的 key */
+    batchActions?: (keys: readonly string[]) => VNodeChild;
+    /** 查询栏（FilterBar）的部件属性 */
+    propsFilterBar?: Partial<FilterBarProps>;
+    /** 工具栏与表格所在区域的部件属性（全屏的就是它） */
+    propsPanel?: PartProps<'div'>;
+    /** 工具栏的部件属性 */
+    propsToolbar?: PartProps<'div'>;
+    /** 表格（DataTable）的部件属性：列宽、详情行、行的色调等直接写在这里 */
+    propsTable?: Partial<DataTableProps<T>>;
+    /** 批量操作栏的部件属性 */
+    propsSelectionBar?: Partial<SelectionBarProps>;
+    /** 分页栏的部件属性 */
+    propsPagination?: Partial<PaginationBarProps>;
+    /** 加载失败时表格上方的提示条（Alert）的部件属性 */
+    propsError?: Partial<AlertProps>;
+    /** 工具栏内置按钮（刷新、行高、全屏）的部件属性 */
+    propsToolbarButton?: Partial<IconButtonProps>;
+}
+/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */
+export declare const queryTableStyles: Readonly<{
+    panel: css.CompiledStyles;
+    panelFullscreen: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    toolbar: css.CompiledStyles;
+    tools: css.CompiledStyles;
+}>;
+/** 查询表格：查询栏 + 工具栏 + 表格 + 分页，状态来自 useTableQuery */
+export declare const QueryTable: <T, Filters extends object>(props: QueryTableProps<T, Filters>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;