@zerodep-dev/vue-tsx-pro-ui 0.1.0 → 0.3.0

package/dist/patterns/NotificationCenter.js

@@ -13,8 +13,8 @@ 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 { computed, createVNode, ref } from "vue";
+import { _component, bindable, mergeJsxProps, 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
@@ -162,7 +162,7 @@ var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
 		if (item.href) router.onClick(event, item.href);
 	}
 	return () => {
-		const markAll = createVNode(Button, mergeProps(mergePartProps({
+		const markAll = createVNode(Button, mergeJsxProps(mergePartProps({
 			size: "xs",
 			variant: "ghost",
 			sx: title.value === false && notificationListStyles.end
@@ -176,7 +176,7 @@ var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
 		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({
+				types.value?.length ? createVNode(ToggleGroup, mergeJsxProps(mergePartProps({
 					size: "xs",
 					sx: notificationListStyles.types,
 					"aria-label": messages.notifications
@@ -197,7 +197,7 @@ var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
 					}, { default: () => [item.label] }))],
 					$stable: true
 				}) : null,
-				createVNode(Switch, mergeProps(mergePartProps({
+				createVNode(Switch, mergeJsxProps(mergePartProps({
 					size: "sm",
 					sx: notificationListStyles.end
 				}, propsUnreadOnly.value), {
@@ -213,7 +213,7 @@ var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
 			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, {
+			}, null)]) : createVNode("ul", mergeAttrs({ sx: notificationListStyles.list }, propsList.value), [shown.value.map((item) => createVNode("li", { "key": item.id }, [createVNode("a", mergeJsxProps(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,
@@ -230,7 +230,7 @@ var NotificationList = /*#__PURE__*/ _component((_props, _ctx) => {
 					default: () => [messages.notificationUnreadMark, " "],
 					$stable: true
 				}), item.title]), item.description && createVNode("span", css.attrs(notificationListStyles.muted), [item.description])]),
-				createVNode("time", mergeProps({
+				createVNode("time", mergeJsxProps({
 					"datetime": item.time,
 					"title": format.date(item.time, {
 						dateStyle: "medium",
@@ -289,7 +289,7 @@ var NotificationCenter = /*#__PURE__*/ _component((_props2, _ctx2) => {
 	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, {
+	return () => createVNode(Popover, mergeJsxProps(rest, {
 		"placement": rest.placement ?? "bottom-end",
 		"sx": [notificationCenterStyles.panel, sx.value],
 		"_open": open.value,

package/dist/patterns/NotificationCenter.js.map

@@ -1 +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":"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"}
+{"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":"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"}

package/dist/patterns/PageTabs.d.ts

@@ -9,18 +9,23 @@ export interface PageTab {
     /** 固定：不能关闭（首页、工作台） */
     pinned?: boolean;
 }
-/** 未声明的属性落到外层（Tabs 的 div）上 */
-export interface PageTabsProps extends PartProps<'div'> {
+/** 页签区的状态与操作：useRouteTabs 的结果就是这个形状 */
+export interface PageTabsSource {
     /** 打开的页面，按显示的顺序 */
-    pages: readonly PageTab[];
+    readonly pages: readonly PageTab[];
     /** 当前页面的地址 */
-    current: string;
+    readonly current: string;
     /** 点了一个页签（或 Enter）：跳过去 */
-    onNavigate: (path: string) => void;
+    onNavigate(path: string): void;
     /** 关闭页签（关闭按钮、Delete、中键，或右键菜单里的“关闭其他”“关闭右侧”）：参数是要关的地址 */
-    onClose?: (paths: string[]) => void;
+    onClose?(paths: string[]): void;
     /** 拖动排序：新的顺序 */
-    onReorder?: (paths: string[]) => void;
+    onReorder?(paths: string[]): void;
+}
+/** 未声明的属性落到外层（Tabs 的 div）上 */
+export interface PageTabsProps extends PartProps<'div'>, Partial<PageTabsSource> {
+    /** 整个状态：useRouteTabs 的结果，页签区随它更新；写了它就不用再写 pages、current、onNavigate 等 */
+    tabs?: PageTabsSource;
     /** 标签栏右边“全部标签页”的菜单，默认 true */
     showAllMenu?: boolean;
     /** 标签栏（TabList）的部件属性 */

package/dist/patterns/PageTabs.js

@@ -4,52 +4,64 @@ 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";
+import { Fragment, createVNode, isVNode, ref } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 //#region src/patterns/PageTabs.tsx
 /** 一个页签 */
+/** 页签区的状态与操作：useRouteTabs 的结果就是这个形状 */
 /** 未声明的属性落到外层（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 tabs = readonlyProp(_props, "tabs");
+	const ownPages = readonlyProp(_props, "pages");
+	const ownCurrent = readonlyProp(_props, "current");
+	const ownNavigate = readonlyProp(_props, "onNavigate");
+	const ownClose = readonlyProp(_props, "onClose");
+	const ownReorder = 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);
+	const state = () => ({
+		pages: tabs.value?.pages ?? ownPages.value ?? [],
+		current: tabs.value?.current ?? ownCurrent.value ?? "",
+		onNavigate: tabs.value?.onNavigate.bind(tabs.value) ?? ownNavigate.value,
+		onClose: tabs.value?.onClose?.bind(tabs.value) ?? ownClose.value,
+		onReorder: tabs.value?.onReorder?.bind(tabs.value) ?? ownReorder.value
+	});
 	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);
+	const others = (path) => state().pages.filter((page) => page.path !== path && !page.pinned).map((page) => page.path);
+	const toRight = (path) => {
+		const pages = state().pages;
+		return pages.slice(pages.findIndex((page) => page.path === path) + 1).filter((page) => !page.pinned).map((page) => page.path);
+	};
 	function renderMenu() {
+		const { pages, onClose } = state();
 		const path = menuFor.value;
-		const page = pages.value.find((item) => item.path === path);
+		const page = pages.find((item) => item.path === path);
 		if (!path || !page) return null;
 		return createVNode(Fragment, null, [
 			createVNode(MenuItem, {
 				"disabled": page.pinned,
-				"onAction": () => onClose.value?.([path])
+				"onAction": () => onClose?.([path])
 			}, {
 				default: () => [messages.pageTabsClose],
 				$stable: true
 			}),
 			createVNode(MenuItem, {
 				"disabled": others(path).length === 0,
-				"onAction": () => onClose.value?.(others(path))
+				"onAction": () => onClose?.(others(path))
 			}, {
 				default: () => [messages.pageTabsCloseOthers],
 				$stable: true
 			}),
 			createVNode(MenuItem, {
 				"disabled": toRight(path).length === 0,
-				"onAction": () => onClose.value?.(toRight(path))
+				"onAction": () => onClose?.(toRight(path))
 			}, {
 				default: () => [messages.pageTabsCloseRight],
 				$stable: true
@@ -57,24 +69,23 @@ var PageTabs = /*#__PURE__*/ _component((_props, _ctx) => {
 		]);
 	}
 	return () => {
-		const list = createVNode(TabList, mergeProps(mergePartProps({
+		let _slot;
+		const { pages, current, onNavigate, onClose, onReorder } = state();
+		const list = createVNode(TabList, 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)),
+			onReorder
+		}, propsList.value), _isSlot(_slot = pages.map((page) => createVNode(Tab, {
+			"key": page.path,
+			"value": page.path,
+			"onClose": page.pinned || !onClose ? void 0 : () => onClose([page.path]),
+			"onContextmenu": () => menuFor.value = page.path
+		}, { default: () => [page.title] }))) ? _slot : { default: () => [_slot] });
+		return createVNode(Tabs, mergeJsxProps(rest, {
+			"_value": current,
+			"onUpdate:_value": (next) => next !== void 0 && next !== current && onNavigate?.(next),
 			"activation": "manual"
-		}), { default: () => [onClose.value ? createVNode(ContextMenu, {
+		}), { default: () => [onClose ? createVNode(ContextMenu, {
 			"menu": renderMenu(),
 			"label": messages.pageTabsMenu
 		}, _isSlot(list) ? list : { default: () => [list] }) : list] });
@@ -82,6 +93,7 @@ var PageTabs = /*#__PURE__*/ _component((_props, _ctx) => {
 }, {
 	name: "PageTabs",
 	props: [
+		"tabs",
 		"pages",
 		"current",
 		"onNavigate",

package/dist/patterns/PageTabs.js.map

@@ -1 +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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"}
+{"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={tabs} />} …>\n *\n * 路由页签的状态整个写在 tabs 里；不要写成 {...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/** 页签区的状态与操作：useRouteTabs 的结果就是这个形状 */\nexport interface PageTabsSource {\n  /** 打开的页面，按显示的顺序 */\n  readonly pages: readonly PageTab[];\n  /** 当前页面的地址 */\n  readonly current: string;\n  /** 点了一个页签（或 Enter）：跳过去 */\n  onNavigate(path: string): void;\n  /** 关闭页签（关闭按钮、Delete、中键，或右键菜单里的“关闭其他”“关闭右侧”）：参数是要关的地址 */\n  onClose?(paths: string[]): void;\n  /** 拖动排序：新的顺序 */\n  onReorder?(paths: string[]): void;\n}\n\n/** 未声明的属性落到外层（Tabs 的 div）上 */\nexport interface PageTabsProps extends PartProps<'div'>, Partial<PageTabsSource> {\n  /** 整个状态：useRouteTabs 的结果，页签区随它更新；写了它就不用再写 pages、current、onNavigate 等 */\n  tabs?: PageTabsSource;\n  /** 标签栏右边“全部标签页”的菜单，默认 true */\n  showAllMenu?: boolean;\n  /** 标签栏（TabList）的部件属性 */\n  propsList?: Partial<TabListProps>;\n}\n\n/** 页签区：打开过的页面，切换、关闭、排序 */\nexport const PageTabs = _component(\n  ({\n    tabs,\n    pages: ownPages,\n    current: ownCurrent,\n    onNavigate: ownNavigate,\n    onClose: ownClose,\n    onReorder: ownReorder,\n    showAllMenu = true,\n    propsList,\n    ...rest\n  }: PageTabsProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    // tabs 里的是实时的（读它的 getter 才会跟着路由更新），所以每次渲染都重新取\n    const state = () => ({\n      pages: tabs?.pages ?? ownPages ?? [],\n      current: tabs?.current ?? ownCurrent ?? '',\n      onNavigate: tabs?.onNavigate.bind(tabs) ?? ownNavigate,\n      onClose: tabs?.onClose?.bind(tabs) ?? ownClose,\n      onReorder: tabs?.onReorder?.bind(tabs) ?? ownReorder,\n    });\n    // 右键菜单是给哪个页签打开的（页签的 contextmenu 先于外层的 ContextMenu 收到）\n    let menuFor = _state<string | null>(null);\n\n    /** 右键菜单里关闭 path 之外的、它右边的 */\n    const others = (path: string) =>\n      state()\n        .pages.filter((page) => page.path !== path && !page.pinned)\n        .map((page) => page.path);\n    const toRight = (path: string) => {\n      const pages = state().pages;\n      return pages\n        .slice(pages.findIndex((page) => page.path === path) + 1)\n        .filter((page) => !page.pinned)\n        .map((page) => page.path);\n    };\n\n    function renderMenu() {\n      const { pages, onClose } = state();\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 { pages, current, onNavigate, onClose, onReorder } = state();\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

@@ -1,6 +1,7 @@
 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';
@@ -24,6 +25,8 @@ export interface QueryTableProps<T, Filters extends object> extends PartProps<'d
     moreFilters?: (draft: Filters) => VNodeChild;
     /** “重置”回到的条件；不写时是 query 一开始的条件 */
     blankFilters?: Filters;
+    /** 占满到窗口底边（列表页的整页）：行多了在表格里滚动，分页一直在一屏里 */
+    fill?: boolean;
     /** 工具栏上自己的按钮（新建、导出），在标题之后、内置按钮之前 */
     toolbar?: VNodeChild;
     /** 列设置与行高记在浏览器里的键（localStorage，自动加前缀）；不写时只在这次打开里有效 */
@@ -48,16 +51,22 @@ export interface QueryTableProps<T, Filters extends object> extends PartProps<'d
     propsSelectionBar?: Partial<SelectionBarProps>;
     /** 分页栏的部件属性 */
     propsPagination?: Partial<PaginationBarProps>;
+    /** 加载失败时表格上方的提示条（Alert）的部件属性 */
+    propsError?: Partial<AlertProps>;
     /** 工具栏内置按钮（刷新、行高、全屏）的部件属性 */
     propsToolbarButton?: Partial<IconButtonProps>;
 }
-/** QueryTable 的样式：root、panel、panelFullscreen、toolbar、title、tools */
+/** QueryTable 的样式：root、rootFill、panel、panelFullscreen、panelFill、toolbar、title、tools、titleInline、toolbarInline */
 export declare const queryTableStyles: Readonly<{
     panel: css.CompiledStyles;
+    panelFill: css.CompiledStyles;
     panelFullscreen: css.CompiledStyles;
     root: css.CompiledStyles;
+    rootFill: css.CompiledStyles;
     title: css.CompiledStyles;
+    titleInline: css.CompiledStyles;
     toolbar: css.CompiledStyles;
+    toolbarInline: css.CompiledStyles;
     tools: css.CompiledStyles;
 }>;
 /** 查询表格：查询栏 + 工具栏 + 表格 + 分页，状态来自 useTableQuery */