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

package/dist/navigation/PageSizeSelect.js

@@ -1,8 +1,8 @@
 import { useLang } from "../config/context.js";
 import { mergePartProps } from "../utils/props.js";
 import { Select } from "../input/Select.js";
-import { createVNode, mergeProps, ref, watch } from "vue";
-import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, watch } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PageSizeSelect.tsx
 /** 单选的 Select 属性 */
@@ -34,7 +34,7 @@ var PageSizeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
 		value.value = size;
 		onSizeChange.value?.(size);
 	});
-	return () => createVNode(Select, mergeProps(mergePartProps({
+	return () => createVNode(Select, mergeJsxProps(mergePartProps({
 		items: options.value.map((size) => ({
 			value: String(size),
 			label: lang.pageSizeOption(size)
@@ -42,7 +42,7 @@ var PageSizeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
 		selectionMode: "single",
 		"aria-label": lang.pageSizeLabel,
 		size: "sm",
-		renderValue: () => createVNode("span", css.attrs(pageSizeSelectStyles.stack), [options.value.map((size) => createVNode("span", mergeProps({
+		renderValue: () => createVNode("span", css.attrs(pageSizeSelectStyles.stack), [options.value.map((size) => createVNode("span", mergeJsxProps({
 			"key": size,
 			"aria-hidden": size !== value.value || void 0
 		}, css.attrs(pageSizeSelectStyles.option, size !== value.value && pageSizeSelectStyles.hidden)), [lang.pageSizeOption(size)]))])

package/dist/navigation/PageSizeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSizeSelect.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageSizeSelect.tsx"],"sourcesContent":["/**\n * 每页条数选择：分页的配套组件，与 Pagination 并排放（各自独立，按需组合；三样都要时用 PaginationBar）。选项文字取语言包（“20 条/页”）。\n *\n *   <Flex gap=\"md\" align=\"center\">\n *     <Pagination _page={page} total={total} pageSize={size} />\n *     <PageSizeSelect _value={size} onSizeChange={() => (page = 1)} />\n *   </Flex>\n *\n * 基于 Select：未声明的属性落到 Select 上（外壳用 propsRoot 等 Select 的部件），名称默认取语言包（每页条数）。\n * 按钮按最长的选项定宽：换条数时不变宽窄，下拉（与按钮同宽）里的选项也不被截断。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { Select, type SelectProps } from '../input/Select';\nimport { mergePartProps } from '../utils/props';\nimport type { SingleSelectionProps } from '../utils/data/selection';\n\n/** 单选的 Select 属性 */\ntype SingleSelectProps = Extract<SelectProps, SingleSelectionProps>;\n\n/** 未声明的属性落到 Select 上 */\nexport interface PageSizeSelectProps extends Omit<\n  Partial<SelectProps>,\n  '_value' | 'items' | 'selectionMode'\n> {\n  /** 每页条数：父级写 _value={size} */\n  _value?: number;\n  /** 可选的条数，默认 [10, 20, 50, 100] */\n  options?: readonly number[];\n  /** 用户换了条数后调用（通常把页码回到第 1 页） */\n  onSizeChange?: (size: number) => void;\n}\n\n/** PageSizeSelect 的样式：stack、option、hidden */\nexport const pageSizeSelectStyles = css.create({\n  // 所有选项的文字叠在同一格，按最宽的那个撑开，只显示选中的\n  stack: { display: 'inline-grid' },\n  option: { gridArea: '1 / 1' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** 每页条数选择（Select） */\nexport const PageSizeSelect = _component(\n  ({\n    _value: value = _bindable(10),\n    options = [10, 20, 50, 100],\n    onSizeChange,\n    ...rest\n  }: PageSizeSelectProps) => {\n    const lang = useLang();\n    // Select 的值是字符串：本地一份，与数字的 value 互相同步\n    let selected = _state(String(_untrack(value)));\n    watch(\n      () => value,\n      (size) => (selected = String(size)),\n    );\n    watch(\n      () => selected,\n      (next) => {\n        const size = Number(next);\n        if (size === value) return;\n        value = size;\n        onSizeChange?.(size);\n      },\n    );\n\n    return () => (\n      <Select\n        {...mergePartProps<SingleSelectProps>(\n          {\n            items: options.map((size) => ({\n              value: String(size),\n              label: lang.pageSizeOption(size),\n            })),\n            selectionMode: 'single',\n            'aria-label': lang.pageSizeLabel,\n            size: 'sm',\n            renderValue: () => (\n              <span {...css.attrs(pageSizeSelectStyles.stack)}>\n                {options.map((size) => (\n                  <span\n                    key={size}\n                    aria-hidden={size !== value || undefined}\n                    {...css.attrs(\n                      pageSizeSelectStyles.option,\n                      size !== value && pageSizeSelectStyles.hidden,\n                    )}\n                  >\n                    {lang.pageSizeOption(size)}\n                  </span>\n                ))}\n              </span>\n            ),\n          },\n          rest,\n        )}\n        _value={selected}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAoCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,OAAO,EAAE,SAAS,cAAc;CAChC,QAAQ,EAAE,UAAU,QAAQ;CAC5B,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAK2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAJC,IAAE,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,iBAClB;EAAC;EAAI;EAAI;EAAI;CAAG,CAAC;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAExB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,WAAQC,IAAU,OAAMC,cAAA,MAAA,KAAA,CAAgB,CAAC;CAC7C,YACE,MAAA,QACC,SAAU,SAAA,QAAW,OAAO,IAAI,CACnC;CACA,YACE,SAAA,QACC,SAAS;EACR,MAAM,OAAO,OAAO,IAAI;EACxB,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,aAAA,QAAe,IAAI;CACrB,CACF;CAEA,aAAOC,YAAA,QAAAC,WAEC,eACF;EACE,OAAO,QAAA,MAAQ,KAAK,UAAU;GAC5B,OAAO,OAAO,IAAI;GAClB,OAAO,KAAK,eAAe,IAAI;EACjC,EAAE;EACF,eAAe;EACf,cAAc,KAAK;EACnB,MAAM;EACN,mBAAaD,YAAA,QACD,IAAI,MAAM,qBAAqB,KAAK,GAAC,CAC5C,QAAA,MAAQ,KAAK,SAAIA,YAAA,QAAAC,WAAA;GAAA,OAET;GAAI,eACI,SAAI,MAAA,SAAc,KAAA;EAAS,GACpC,IAAI,MACN,qBAAqB,QACrB,SAAI,MAAA,SAAc,qBAAqB,MACzC,CAAC,GAAA,CAEA,KAAK,eAAe,IAAI,CAAC,CAAA,CAE7B,CAAC,CAAA;CAGR,GACA,IACF,GAAC;EAAA,UAAA,SAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,SAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"PageSizeSelect.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageSizeSelect.tsx"],"sourcesContent":["/**\n * 每页条数选择：分页的配套组件，与 Pagination 并排放（各自独立，按需组合；三样都要时用 PaginationBar）。选项文字取语言包（“20 条/页”）。\n *\n *   <Flex gap=\"md\" align=\"center\">\n *     <Pagination _page={page} total={total} pageSize={size} />\n *     <PageSizeSelect _value={size} onSizeChange={() => (page = 1)} />\n *   </Flex>\n *\n * 基于 Select：未声明的属性落到 Select 上（外壳用 propsRoot 等 Select 的部件），名称默认取语言包（每页条数）。\n * 按钮按最长的选项定宽：换条数时不变宽窄，下拉（与按钮同宽）里的选项也不被截断。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { Select, type SelectProps } from '../input/Select';\nimport { mergePartProps } from '../utils/props';\nimport type { SingleSelectionProps } from '../utils/data/selection';\n\n/** 单选的 Select 属性 */\ntype SingleSelectProps = Extract<SelectProps, SingleSelectionProps>;\n\n/** 未声明的属性落到 Select 上 */\nexport interface PageSizeSelectProps extends Omit<\n  Partial<SelectProps>,\n  '_value' | 'items' | 'selectionMode'\n> {\n  /** 每页条数：父级写 _value={size} */\n  _value?: number;\n  /** 可选的条数，默认 [10, 20, 50, 100] */\n  options?: readonly number[];\n  /** 用户换了条数后调用（通常把页码回到第 1 页） */\n  onSizeChange?: (size: number) => void;\n}\n\n/** PageSizeSelect 的样式：stack、option、hidden */\nexport const pageSizeSelectStyles = css.create({\n  // 所有选项的文字叠在同一格，按最宽的那个撑开，只显示选中的\n  stack: { display: 'inline-grid' },\n  option: { gridArea: '1 / 1' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** 每页条数选择（Select） */\nexport const PageSizeSelect = _component(\n  ({\n    _value: value = _bindable(10),\n    options = [10, 20, 50, 100],\n    onSizeChange,\n    ...rest\n  }: PageSizeSelectProps) => {\n    const lang = useLang();\n    // Select 的值是字符串：本地一份，与数字的 value 互相同步\n    let selected = _state(String(_untrack(value)));\n    watch(\n      () => value,\n      (size) => (selected = String(size)),\n    );\n    watch(\n      () => selected,\n      (next) => {\n        const size = Number(next);\n        if (size === value) return;\n        value = size;\n        onSizeChange?.(size);\n      },\n    );\n\n    return () => (\n      <Select\n        {...mergePartProps<SingleSelectProps>(\n          {\n            items: options.map((size) => ({\n              value: String(size),\n              label: lang.pageSizeOption(size),\n            })),\n            selectionMode: 'single',\n            'aria-label': lang.pageSizeLabel,\n            size: 'sm',\n            renderValue: () => (\n              <span {...css.attrs(pageSizeSelectStyles.stack)}>\n                {options.map((size) => (\n                  <span\n                    key={size}\n                    aria-hidden={size !== value || undefined}\n                    {...css.attrs(\n                      pageSizeSelectStyles.option,\n                      size !== value && pageSizeSelectStyles.hidden,\n                    )}\n                  >\n                    {lang.pageSizeOption(size)}\n                  </span>\n                ))}\n              </span>\n            ),\n          },\n          rest,\n        )}\n        _value={selected}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAoCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,OAAO,EAAE,SAAS,cAAc;CAChC,QAAQ,EAAE,UAAU,QAAQ;CAC5B,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAK2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAJC,IAAE,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,iBAClB;EAAC;EAAI;EAAI;EAAI;CAAG,CAAC;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAExB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,WAAQC,IAAU,OAAMC,cAAA,MAAA,KAAA,CAAgB,CAAC;CAC7C,YACE,MAAA,QACC,SAAU,SAAA,QAAW,OAAO,IAAI,CACnC;CACA,YACE,SAAA,QACC,SAAS;EACR,MAAM,OAAO,OAAO,IAAI;EACxB,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,aAAA,QAAe,IAAI;CACrB,CACF;CAEA,aAAOC,YAAA,QAAAC,cAEC,eACF;EACE,OAAO,QAAA,MAAQ,KAAK,UAAU;GAC5B,OAAO,OAAO,IAAI;GAClB,OAAO,KAAK,eAAe,IAAI;EACjC,EAAE;EACF,eAAe;EACf,cAAc,KAAK;EACnB,MAAM;EACN,mBAAaD,YAAA,QACD,IAAI,MAAM,qBAAqB,KAAK,GAAC,CAC5C,QAAA,MAAQ,KAAK,SAAIA,YAAA,QAAAC,cAAA;GAAA,OAET;GAAI,eACI,SAAI,MAAA,SAAc,KAAA;EAAS,GACpC,IAAI,MACN,qBAAqB,QACrB,SAAI,MAAA,SAAc,qBAAqB,MACzC,CAAC,GAAA,CAEA,KAAK,eAAe,IAAI,CAAC,CAAA,CAE7B,CAAC,CAAA;CAGR,GACA,IACF,GAAC;EAAA,UAAA,SAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,SAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Pagination.js

@@ -1,7 +1,7 @@
 import { clamp } from "../utils/data/number.js";
 import { t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
-import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { Icon } from "../base/Icon.js";
 import { Button } from "../base/Button.js";
 import { IconButton } from "../base/IconButton.js";
@@ -9,8 +9,8 @@ import { IconLinkButton } from "../base/IconLinkButton.js";
 import { LinkButton } from "../base/LinkButton.js";
 import { FlexList } from "../layout/Flex.js";
 import { paginationItems } from "../utils/data/pagination.js";
-import { computed, createVNode, isVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode, isVNode } 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 { ChevronLeft, ChevronRight, Ellipsis } from "@lucide/icons";
 //#region src/navigation/Pagination.tsx
@@ -75,7 +75,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 	function pageButton(target) {
 		const isCurrent = target === current.value;
 		const own = typeof propsPage.value === "function" ? propsPage.value(target) : propsPage.value;
-		const shared = mergeProps$1({
+		const shared = mergeProps({
 			sx: [paginationStyles.page, paginationStyles.tabular],
 			size: size.value,
 			variant: isCurrent ? "soft" : "ghost",
@@ -114,7 +114,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => createVNode("nav", mergeAttrs({
 		sx: paginationStyles.root,
 		"aria-label": lang.pagination
-	}, rest), [createVNode(FlexList, mergeProps(mergePartProps({
+	}, rest), [createVNode(FlexList, mergeJsxProps(mergePartProps({
 		align: "center",
 		gap: "xs"
 	}, propsList.value), { "key": "__site0" }), {
@@ -125,7 +125,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 				pageCount: count.value,
 				siblings: siblings.value,
 				boundaries: boundaries.value
-			}).map((item) => createVNode("li", mergeProps({ "key": item }, mergeAttrs({}, propsItem.value)), [typeof item === "number" ? pageButton(item) : createVNode("span", mergeAttrs({ sx: paginationStyles.ellipsis }, propsEllipsis.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": Ellipsis }, null)])])),
+			}).map((item) => createVNode("li", mergeJsxProps({ "key": item }, mergeAttrs({}, propsItem.value)), [typeof item === "number" ? pageButton(item) : createVNode("span", mergeAttrs({ sx: paginationStyles.ellipsis }, propsEllipsis.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": Ellipsis }, null)])])),
 			createVNode("li", mergeAttrs({}, propsItem.value), [stepButton(1)])
 		],
 		$stable: true

package/dist/navigation/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","mergeProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/PaginationBar.js

@@ -5,8 +5,8 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { PageJump } from "./PageJump.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { Pagination } from "./Pagination.js";
-import { computed, createVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } 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";
 //#region src/navigation/PaginationBar.tsx
 /** 当前页显示的是哪几条 */
@@ -80,17 +80,17 @@ var PaginationBar = /*#__PURE__*/ _component((_props, _ctx) => {
 		return createVNode("span", mergeAttrs({ sx: paginationBarStyles.total }, propsTotal.value), [content]);
 	}
 	return () => createVNode("div", mergeAttrs({ sx: [paginationBarStyles.root, fontSizeStyles[size.value]] }, rest), [renderTotal(), createVNode("div", mergeAttrs({ sx: paginationBarStyles.controls }, propsControls.value), [
-		createVNode(Pagination, mergeProps(mergePartProps({ size: size.value }, propsPagination.value), {
+		createVNode(Pagination, mergeJsxProps(mergePartProps({ size: size.value }, propsPagination.value), {
 			"_page": page.value,
 			"onUpdate:_page": _cache[0] || (_cache[0] = ($event) => page.value = $event),
 			"total": total.value,
 			"pageSize": pageSize.value
 		}), null),
-		showSizeSelect.value && createVNode(PageSizeSelect, mergeProps(mergePartProps({ options: pageSizeOptions.value }, propsSizeSelect.value, { onSizeChange: () => page.value = 1 }), {
+		showSizeSelect.value && createVNode(PageSizeSelect, mergeJsxProps(mergePartProps({ options: pageSizeOptions.value }, propsSizeSelect.value, { onSizeChange: () => page.value = 1 }), {
 			"_value": pageSize.value,
 			"onUpdate:_value": _cache[1] || (_cache[1] = ($event) => pageSize.value = $event)
 		}), null),
-		showJump.value && pageCount.value > 1 && createVNode(PageJump, mergeProps(mergePartProps({
+		showJump.value && pageCount.value > 1 && createVNode(PageJump, mergeJsxProps(mergePartProps({
 			pageCount: pageCount.value,
 			size: size.value,
 			sx: paginationBarStyles.jump

package/dist/navigation/PaginationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\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 { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\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 { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAgEA,IAAa,sBAAsB,IAAI,OAAO;CAE5C,MAAM;EACJ,eAAe;EACf,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,WAAW;CACb;CACA,OAAO;EACL,WAAW;GAAE,SAAS;GAAQ,gCAAgC;EAAO;EACrE,OAAO;EACP,oBAAoB;CACtB;CACA,UAAU;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,WAAW;EACX,mBAAmB;CACrB;CACA,MAAM,EAAE,SAAS;EAAE,SAAS;EAAe,gCAAgC;CAAO,EAAE;AACtF,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAe0B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAdA,GAAC,KAAA,IAAA;CAAA,MAAA,WAAAA,SAAA,QAAA,mBACO,IAAE,KAAA,IAAA;CAAA,MAAA,QAAAC,aAAA,QAAA,OAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAGtB,IAAI;CAAA,MAAA,iBAAAA,aAAA,QAAA,kBACC,IAAI;CAAA,MAAA,WAAAA,aAAA,QAAA,YACV,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACR,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAMR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,YAASC,eAAY,KAAK,IAAI,GAAG,KAAK,KAAK,MAAA,QAAA,SAAA,KAAgB,CAAC,CAAC;CAEnE,MAAM,QAAKA,eAAgC;EACzC,MAAM,UAAU,MAAK,KAAA,OAAO,GAAC,UAAA,KAAW;EACxC,OAAO,MAAA,UAAU,IACb;GAAE,MAAM;GAAG,IAAI;GAAG,OAAK,MAAA;EAAC,IACxB;GACE,OAAO,UAAU,KAAC,SAAA,QAAe;GACjC,IAAI,KAAK,IAAI,UAAO,SAAA,OAAW,MAAA,KAAO;GACtC,OAAK,MAAA;EACP;CACN,CAAC;CAED,SAAS,cAAc;EACrB,IAAI,CAAA,UAAA,OAAY,OAAO;EACvB,MAAM,UACJ,OAAA,UAAA,UAAqB,aACjB,UAAA,MAAA,MAAA,KAAe,IACf,MAAA,MAAM,UAAU,IACd,KAAK,gBAAgB,CAAC,IACtB,KAAK,gBAAgB,MAAA,MAAM,MAAM,MAAA,MAAM,IAAI,MAAA,MAAM,KAAK;EAC9D,OAAAC,YAAA,QACY,WAAmB,EAAE,IAAI,oBAAoB,MAAM,GAAC,WAAA,KAAY,GAAC,CACxE,OAAO,CAAA;CAGd;CAEA,aAAOA,YAAA,OACI,WAAkB,EAAE,IAAI,CAAC,oBAAoB,MAAM,eAAc,KAAA,MAAM,EAAE,GAAG,IAAI,GAAC,CACvF,YAAY,GAACA,YAAA,OACL,WAAkB,EAAE,IAAI,oBAAoB,SAAS,GAAC,cAAA,KAAe,GAAC;EAAAA,YAAA,YAAAC,cAEvE,eAAgC,EAAE,MAAI,KAAA,MAAC,GAAC,gBAAA,KAAiB,GAAC;GAAA,SAAA,KAAA;GAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;GAAA,SAAA,MAAA;GAAA,YAAA,SAAA;EAAA,CAAA,GAAA,IAAA;EAK/D,eAAA,SAAAD,YAAA,gBAAAC,cAEO,eACF,EAAE,SAAO,gBAAA,MAAkB,GAAC,gBAAA,OAE5B,EAAE,oBAAqB,KAAA,QAAO,EAAG,CACnC,GAAC;GAAA,UAAA,SAAA;GAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,SAAA,QAAA;EAAA,CAAA,GAAA,IAAA;EAIJ,SAAA,SAAY,UAAA,QAAY,KAACD,YAAA,UAAAC,cAElB,eACF;GAAE,WAAS,UAAA;GAAE,MAAI,KAAA;GAAE,IAAI,oBAAoB;EAAK,GAAC,UAAA,KAEnD,GAAC;GAAA,SAAA,KAAA;GAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;EAAA,CAAA,GAAA,IAAA;CAGJ,CAAA,CAAA,CAAA;AAIT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Steps.js

@@ -9,8 +9,8 @@ import { ButtonBase } from "../base/ButtonBase.js";
 import { useRouterLink } from "../utils/dom/link.js";
 import { statusIcons } from "../utils/style/tone-styles.js";
 import { FlexOrderedList } from "../layout/Flex.js";
-import { createVNode, isVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } 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 { Check } from "@lucide/icons";
 //#region src/navigation/Steps.tsx
@@ -146,7 +146,7 @@ var Steps = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => {
 		let _slot2;
 		const vertical = orientation.value === "vertical";
-		return createVNode(FlexOrderedList, mergeProps(mergePartProps({
+		return createVNode(FlexOrderedList, mergeJsxProps(mergePartProps({
 			direction: vertical ? "column" : "row",
 			gap: vertical ? "lg" : "sm",
 			sx: size.value && fontSizeStyles[size.value]
@@ -161,7 +161,7 @@ var Steps = /*#__PURE__*/ _component((_props, _ctx) => {
 			const reachable = state === "complete" && !item.disabled;
 			const link = reachable && item.href != null;
 			const button = reachable && !link && navigable.value;
-			return createVNode("li", mergeProps({ "key": item.key ?? index }, mergeAttrs({ sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] }, own, { "aria-current": state === "current" ? "step" : void 0 }), { "data-state": state }), [link ? createVNode("a", mergeAttrs({ sx: [
+			return createVNode("li", mergeJsxProps({ "key": item.key ?? index }, mergeAttrs({ sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] }, own, { "aria-current": state === "current" ? "step" : void 0 }), { "data-state": state }), [link ? createVNode("a", mergeAttrs({ sx: [
 				stepsStyles.trigger,
 				stepsStyles.link,
 				focusRingStyles.visible

package/dist/navigation/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/Steps.tsx"],"sourcesContent":["/**\n * 步骤条（ol）：多步流程里的位置（下单、注册、配置向导、任务的流转）。当前步骤带 aria-current=\"step\"，\n * 已完成的步骤显示对勾（Lucide 的 Check），出错的步骤显示警示图标；已完成、未开始、出错另有读屏文字，不只靠颜色。\n *\n *   <Steps current={1} items={[{ title: '填写信息' }, { title: '确认订单' }, { title: '完成' }]} />\n *   <Steps _current={step} items={items} navigable />               已完成的步骤可以点回去\n *   <Steps current={2} items={[{ title: '概览', href: '/task/1' }, …]} />   已完成的步骤是链接\n *\n * 每一步的状态默认按 current 推出（之前已完成、当前、之后未开始），item 的 status 可以改：出错的一步、非线性的流程。\n */\nimport { Check } 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 { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 步骤条方向 */\nexport interface StepsOrientations {\n  /** 横排（默认） */\n  horizontal: unknown;\n  /** 竖排：步骤多、说明长时；步骤之间有竖的连接线 */\n  vertical: unknown;\n}\n\n/** 步骤的状态 */\nexport interface StepStates {\n  /** 已完成：对勾、品牌色 */\n  complete: unknown;\n  /** 当前：aria-current=\"step\" */\n  current: unknown;\n  /** 未开始 */\n  upcoming: unknown;\n  /** 出错：警示图标、危险色 */\n  error: unknown;\n}\n\n/** 步骤的状态：已完成、当前、未开始、出错 */\nexport type StepState = keyof StepStates;\n\n/** 一个步骤 */\nexport interface StepItem {\n  /** 唯一的 key；不写时用位置 */\n  key?: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明（标题下面的小字） */\n  description?: VNodeChild;\n  /** 代替序号的图标；已完成时仍显示对勾，出错时仍显示警示图标 */\n  icon?: IconData;\n  /** 状态；不写时按 current 推出 */\n  status?: StepState;\n  /** 地址：已完成的这一步渲染成链接（走路由适配），点了跳过去 */\n  href?: string;\n  /** 不可点回（即使已完成、有 href 或 navigable） */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 ol 上；aria-label 是步骤条的名称 */\nexport interface StepsProps extends PartProps<'ol'> {\n  /** 步骤 */\n  items: readonly StepItem[];\n  /** 当前步骤的序号，从 0 开始：父级可以写 _current={x}，配合 navigable 点回已完成的步骤 */\n  _current?: number;\n  /** 方向，默认 horizontal */\n  orientation?: keyof StepsOrientations;\n  /** 字号档位：圆圈、文字随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 已完成的步骤可以点击回去：点了写回 current */\n  navigable?: boolean;\n  /** 每个步骤（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: StepItem, index: number) => PartProps<'li'>);\n  /** 序号圆圈的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 可点回的步骤外层（按钮，或有 href 时的链接）的部件属性 */\n  propsTrigger?: Partial<ButtonBaseProps> & PartProps<'a'>;\n  /** 文字区（标题与说明的容器）的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 步骤之间连接线的部件属性 */\n  propsConnector?: PartProps<'span'>;\n}\n\n/** Steps 的样式：item、itemVertical、trigger、link、indicator、text、title、description、connector 等 */\nexport const stepsStyles = css.create({\n  item: {\n    display: 'flex',\n    flexGrow: 1,\n    flexBasis: 0,\n    alignItems: 'flex-start',\n    gap: '_sm',\n    minWidth: 0,\n  },\n  // 竖排：高度随内容，连接线相对这一项定位\n  itemVertical: { flexGrow: 0, flexBasis: 'auto', position: 'relative' },\n  // 可点回的步骤：整块是按钮或链接\n  // 去掉按钮默认外观、焦点环、波纹由 ButtonBase 给出\n  trigger: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    borderRadius: '_sm',\n    textAlign: 'start',\n  },\n  link: { color: 'inherit', textDecorationLine: 'none' },\n  indicator: {\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '2em',\n    height: '2em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderRadius: '_full',\n    // 用 em 而不是 _sm（默认字号下 13 / 14 ≈ 0.93）：随 size 缩放\n    fontSize: '0.93em',\n    fontWeight: '_semibold',\n    // 走到下一步时圆圈换色、连接线变色都过渡，不是一下跳过去\n    transition: `background-color ${t.durations.md} ${t.easings.standard}, border-color ${t.durations.md} ${t.easings.standard}, color ${t.durations.md} ${t.easings.standard}`,\n  },\n  text: { display: 'grid', gap: '_xs', paddingTop: '0.3em', minWidth: 0 },\n  title: { fontWeight: '_medium' },\n  description: { color: '_textMuted', fontSize: '0.93em' },\n  // 步骤之间的连接线：横排在标题右侧延伸\n  connector: {\n    flexGrow: 1,\n    alignSelf: 'center',\n    minWidth: '_space.lg',\n    height: '_borderWidths.xs',\n    backgroundColor: '_border',\n    transition: `background-color ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 竖排：从圆圈下面一直连到下一步的圆圈（圆圈宽 2 × 0.93em，中线在 0.93em）\n  connectorVertical: {\n    position: 'absolute',\n    insetInlineStart: '0.93em',\n    insetBlockStart: `calc(1.86em + ${t.space.xs})`,\n    insetBlockEnd: `calc(-1 * ${t.space.lg} + ${t.space.xs})`,\n    width: '_borderWidths.xs',\n    height: 'auto',\n    minWidth: 0,\n    // 两端都定了位置时按 align-self 对齐：横排的 center 会让空的 span 缩成 0 高，这里要拉伸\n    alignSelf: 'stretch',\n    marginInlineStart: `calc(${t.borderWidths.xs} / -2)`,\n  },\n  connectorDone: { backgroundColor: '_accent' },\n});\n\n/** Steps 的样式：complete、current、upcoming、error */\nexport const stepsStateStyles = css.create({\n  complete: { borderColor: '_accent', backgroundColor: '_accent', color: '_accentContrast' },\n  current: { borderColor: '_accent', color: '_accentText' },\n  upcoming: { borderColor: '_border', color: '_textMuted' },\n  error: { borderColor: '_danger', backgroundColor: '_dangerSoft', color: '_dangerText' },\n});\n\n/** 步骤条：已完成、当前、未开始、出错；已完成的步骤可以点回去或是链接 */\nexport const Steps = _component(\n  ({\n    items,\n    _current: current = _bindable(0),\n    orientation = 'horizontal',\n    size,\n    navigable = false,\n    propsItem,\n    propsIndicator,\n    propsTrigger,\n    propsText,\n    propsTitle,\n    propsDescription,\n    propsConnector,\n    ...rest\n  }: StepsProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    return () => {\n      const vertical = orientation === 'vertical';\n      return (\n        <FlexOrderedList\n          {...mergePartProps<FlexProps<'ol'>>(\n            {\n              direction: vertical ? 'column' : 'row',\n              gap: vertical ? 'lg' : 'sm',\n              sx: size && fontSizeStyles[size],\n            },\n            rest,\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const state: StepState =\n              item.status ??\n              (index < current ? 'complete' : index === current ? 'current' : 'upcoming');\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const content = [\n              <span\n                {...mergeAttrs<'span'>({ sx: stepsStyles.indicator }, propsIndicator, {\n                  sx: stepsStateStyles[state],\n                  'aria-hidden': true,\n                })}\n              >\n                {state === 'complete' ? (\n                  <Icon icon={Check} />\n                ) : state === 'error' ? (\n                  <Icon icon={statusIcons.danger} />\n                ) : item.icon ? (\n                  <Icon icon={item.icon} />\n                ) : (\n                  index + 1\n                )}\n              </span>,\n              <span {...mergeAttrs<'span'>({ sx: stepsStyles.text }, propsText)}>\n                <span {...mergeAttrs<'span'>({ sx: stepsStyles.title }, propsTitle)}>\n                  {item.title}\n                  {/* 当前步骤由 aria-current 念出，其余的状态补一句文字：不只靠颜色与图标 */}\n                  {state !== 'current' && <VisuallyHidden>{lang.stepState(state)}</VisuallyHidden>}\n                </span>\n                {item.description != null && (\n                  <span {...mergeAttrs<'span'>({ sx: stepsStyles.description }, propsDescription)}>\n                    {item.description}\n                  </span>\n                )}\n              </span>,\n            ];\n            const reachable = state === 'complete' && !item.disabled;\n            const link = reachable && item.href != null;\n            const button = reachable && !link && navigable;\n            return (\n              <li\n                key={item.key ?? index}\n                {...mergeAttrs<'li'>(\n                  { sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] },\n                  own,\n                  { 'aria-current': state === 'current' ? 'step' : undefined },\n                )}\n                data-state={state}\n              >\n                {link ? (\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [stepsStyles.trigger, stepsStyles.link, focusRingStyles.visible] },\n                      propsTrigger,\n                      {\n                        href: router.href(item.href!),\n                        onClick: (event: MouseEvent) => router.onClick(event, item.href!),\n                      },\n                    )}\n                  >\n                    {content}\n                  </a>\n                ) : button ? (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>({ sx: stepsStyles.trigger }, propsTrigger, {\n                      onClick: () => (current = index),\n                    })}\n                  >\n                    {content}\n                  </ButtonBase>\n                ) : (\n                  content\n                )}\n                {index < items.length - 1 && (\n                  <span\n                    {...mergeAttrs<'span'>(\n                      { sx: [stepsStyles.connector, vertical && stepsStyles.connectorVertical] },\n                      propsConnector,\n                      {\n                        sx: state === 'complete' && stepsStyles.connectorDone,\n                        'aria-hidden': true,\n                      },\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </FlexOrderedList>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Steps.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/Steps.tsx"],"sourcesContent":["/**\n * 步骤条（ol）：多步流程里的位置（下单、注册、配置向导、任务的流转）。当前步骤带 aria-current=\"step\"，\n * 已完成的步骤显示对勾（Lucide 的 Check），出错的步骤显示警示图标；已完成、未开始、出错另有读屏文字，不只靠颜色。\n *\n *   <Steps current={1} items={[{ title: '填写信息' }, { title: '确认订单' }, { title: '完成' }]} />\n *   <Steps _current={step} items={items} navigable />               已完成的步骤可以点回去\n *   <Steps current={2} items={[{ title: '概览', href: '/task/1' }, …]} />   已完成的步骤是链接\n *\n * 每一步的状态默认按 current 推出（之前已完成、当前、之后未开始），item 的 status 可以改：出错的一步、非线性的流程。\n */\nimport { Check } 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 { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 步骤条方向 */\nexport interface StepsOrientations {\n  /** 横排（默认） */\n  horizontal: unknown;\n  /** 竖排：步骤多、说明长时；步骤之间有竖的连接线 */\n  vertical: unknown;\n}\n\n/** 步骤的状态 */\nexport interface StepStates {\n  /** 已完成：对勾、品牌色 */\n  complete: unknown;\n  /** 当前：aria-current=\"step\" */\n  current: unknown;\n  /** 未开始 */\n  upcoming: unknown;\n  /** 出错：警示图标、危险色 */\n  error: unknown;\n}\n\n/** 步骤的状态：已完成、当前、未开始、出错 */\nexport type StepState = keyof StepStates;\n\n/** 一个步骤 */\nexport interface StepItem {\n  /** 唯一的 key；不写时用位置 */\n  key?: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明（标题下面的小字） */\n  description?: VNodeChild;\n  /** 代替序号的图标；已完成时仍显示对勾，出错时仍显示警示图标 */\n  icon?: IconData;\n  /** 状态；不写时按 current 推出 */\n  status?: StepState;\n  /** 地址：已完成的这一步渲染成链接（走路由适配），点了跳过去 */\n  href?: string;\n  /** 不可点回（即使已完成、有 href 或 navigable） */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 ol 上；aria-label 是步骤条的名称 */\nexport interface StepsProps extends PartProps<'ol'> {\n  /** 步骤 */\n  items: readonly StepItem[];\n  /** 当前步骤的序号，从 0 开始：父级可以写 _current={x}，配合 navigable 点回已完成的步骤 */\n  _current?: number;\n  /** 方向，默认 horizontal */\n  orientation?: keyof StepsOrientations;\n  /** 字号档位：圆圈、文字随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 已完成的步骤可以点击回去：点了写回 current */\n  navigable?: boolean;\n  /** 每个步骤（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: StepItem, index: number) => PartProps<'li'>);\n  /** 序号圆圈的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 可点回的步骤外层（按钮，或有 href 时的链接）的部件属性 */\n  propsTrigger?: Partial<ButtonBaseProps> & PartProps<'a'>;\n  /** 文字区（标题与说明的容器）的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 步骤之间连接线的部件属性 */\n  propsConnector?: PartProps<'span'>;\n}\n\n/** Steps 的样式：item、itemVertical、trigger、link、indicator、text、title、description、connector 等 */\nexport const stepsStyles = css.create({\n  item: {\n    display: 'flex',\n    flexGrow: 1,\n    flexBasis: 0,\n    alignItems: 'flex-start',\n    gap: '_sm',\n    minWidth: 0,\n  },\n  // 竖排：高度随内容，连接线相对这一项定位\n  itemVertical: { flexGrow: 0, flexBasis: 'auto', position: 'relative' },\n  // 可点回的步骤：整块是按钮或链接\n  // 去掉按钮默认外观、焦点环、波纹由 ButtonBase 给出\n  trigger: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    borderRadius: '_sm',\n    textAlign: 'start',\n  },\n  link: { color: 'inherit', textDecorationLine: 'none' },\n  indicator: {\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '2em',\n    height: '2em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderRadius: '_full',\n    // 用 em 而不是 _sm（默认字号下 13 / 14 ≈ 0.93）：随 size 缩放\n    fontSize: '0.93em',\n    fontWeight: '_semibold',\n    // 走到下一步时圆圈换色、连接线变色都过渡，不是一下跳过去\n    transition: `background-color ${t.durations.md} ${t.easings.standard}, border-color ${t.durations.md} ${t.easings.standard}, color ${t.durations.md} ${t.easings.standard}`,\n  },\n  text: { display: 'grid', gap: '_xs', paddingTop: '0.3em', minWidth: 0 },\n  title: { fontWeight: '_medium' },\n  description: { color: '_textMuted', fontSize: '0.93em' },\n  // 步骤之间的连接线：横排在标题右侧延伸\n  connector: {\n    flexGrow: 1,\n    alignSelf: 'center',\n    minWidth: '_space.lg',\n    height: '_borderWidths.xs',\n    backgroundColor: '_border',\n    transition: `background-color ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 竖排：从圆圈下面一直连到下一步的圆圈（圆圈宽 2 × 0.93em，中线在 0.93em）\n  connectorVertical: {\n    position: 'absolute',\n    insetInlineStart: '0.93em',\n    insetBlockStart: `calc(1.86em + ${t.space.xs})`,\n    insetBlockEnd: `calc(-1 * ${t.space.lg} + ${t.space.xs})`,\n    width: '_borderWidths.xs',\n    height: 'auto',\n    minWidth: 0,\n    // 两端都定了位置时按 align-self 对齐：横排的 center 会让空的 span 缩成 0 高，这里要拉伸\n    alignSelf: 'stretch',\n    marginInlineStart: `calc(${t.borderWidths.xs} / -2)`,\n  },\n  connectorDone: { backgroundColor: '_accent' },\n});\n\n/** Steps 的样式：complete、current、upcoming、error */\nexport const stepsStateStyles = css.create({\n  complete: { borderColor: '_accent', backgroundColor: '_accent', color: '_accentContrast' },\n  current: { borderColor: '_accent', color: '_accentText' },\n  upcoming: { borderColor: '_border', color: '_textMuted' },\n  error: { borderColor: '_danger', backgroundColor: '_dangerSoft', color: '_dangerText' },\n});\n\n/** 步骤条：已完成、当前、未开始、出错；已完成的步骤可以点回去或是链接 */\nexport const Steps = _component(\n  ({\n    items,\n    _current: current = _bindable(0),\n    orientation = 'horizontal',\n    size,\n    navigable = false,\n    propsItem,\n    propsIndicator,\n    propsTrigger,\n    propsText,\n    propsTitle,\n    propsDescription,\n    propsConnector,\n    ...rest\n  }: StepsProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    return () => {\n      const vertical = orientation === 'vertical';\n      return (\n        <FlexOrderedList\n          {...mergePartProps<FlexProps<'ol'>>(\n            {\n              direction: vertical ? 'column' : 'row',\n              gap: vertical ? 'lg' : 'sm',\n              sx: size && fontSizeStyles[size],\n            },\n            rest,\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const state: StepState =\n              item.status ??\n              (index < current ? 'complete' : index === current ? 'current' : 'upcoming');\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const content = [\n              <span\n                {...mergeAttrs<'span'>({ sx: stepsStyles.indicator }, propsIndicator, {\n                  sx: stepsStateStyles[state],\n                  'aria-hidden': true,\n                })}\n              >\n                {state === 'complete' ? (\n                  <Icon icon={Check} />\n                ) : state === 'error' ? (\n                  <Icon icon={statusIcons.danger} />\n                ) : item.icon ? (\n                  <Icon icon={item.icon} />\n                ) : (\n                  index + 1\n                )}\n              </span>,\n              <span {...mergeAttrs<'span'>({ sx: stepsStyles.text }, propsText)}>\n                <span {...mergeAttrs<'span'>({ sx: stepsStyles.title }, propsTitle)}>\n                  {item.title}\n                  {/* 当前步骤由 aria-current 念出，其余的状态补一句文字：不只靠颜色与图标 */}\n                  {state !== 'current' && <VisuallyHidden>{lang.stepState(state)}</VisuallyHidden>}\n                </span>\n                {item.description != null && (\n                  <span {...mergeAttrs<'span'>({ sx: stepsStyles.description }, propsDescription)}>\n                    {item.description}\n                  </span>\n                )}\n              </span>,\n            ];\n            const reachable = state === 'complete' && !item.disabled;\n            const link = reachable && item.href != null;\n            const button = reachable && !link && navigable;\n            return (\n              <li\n                key={item.key ?? index}\n                {...mergeAttrs<'li'>(\n                  { sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] },\n                  own,\n                  { 'aria-current': state === 'current' ? 'step' : undefined },\n                )}\n                data-state={state}\n              >\n                {link ? (\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [stepsStyles.trigger, stepsStyles.link, focusRingStyles.visible] },\n                      propsTrigger,\n                      {\n                        href: router.href(item.href!),\n                        onClick: (event: MouseEvent) => router.onClick(event, item.href!),\n                      },\n                    )}\n                  >\n                    {content}\n                  </a>\n                ) : button ? (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>({ sx: stepsStyles.trigger }, propsTrigger, {\n                      onClick: () => (current = index),\n                    })}\n                  >\n                    {content}\n                  </ButtonBase>\n                ) : (\n                  content\n                )}\n                {index < items.length - 1 && (\n                  <span\n                    {...mergeAttrs<'span'>(\n                      { sx: [stepsStyles.connector, vertical && stepsStyles.connectorVertical] },\n                      propsConnector,\n                      {\n                        sx: state === 'complete' && stepsStyles.connectorDone,\n                        'aria-hidden': true,\n                      },\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </FlexOrderedList>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/TableOfContents.js

@@ -7,8 +7,8 @@ import { Text as Text$1 } from "../base/Text.js";
 import { FlexList } from "../layout/Flex.js";
 import { useScrollSpy } from "../utils/dom/scroll-spy.js";
 import { useActiveIndicator } from "../utils/motion/active-indicator.js";
-import { createVNode, mergeProps, shallowRef, useId } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, shallowRef, useId } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/TableOfContents.tsx
 /** 未声明的属性落到 nav 上；原生的 title 属性（悬停提示）让给目录的标题 */
@@ -77,18 +77,18 @@ var TableOfContents = /*#__PURE__*/ _component((_props, _ctx) => {
 		axis: "vertical",
 		value: current.value
 	}));
-	return () => createVNode("nav", mergeAttrs({}, rest, { "aria-labelledby": titleId }), [createVNode(Text$1, mergeProps(mergePartProps({
+	return () => createVNode("nav", mergeAttrs({}, rest, { "aria-labelledby": titleId }), [createVNode(Text$1, mergeJsxProps(mergePartProps({
 		sx: tableOfContentsStyles.title,
 		size: "sm",
 		weight: "semibold"
 	}, propsTitle.value, { id: titleId }), { "key": "__site0" }), {
 		default: () => [title.value ?? lang.tableOfContents],
 		$stable: true
-	}), createVNode(FlexList, mergeProps(mergePartProps({
+	}), createVNode(FlexList, mergeJsxProps(mergePartProps({
 		sx: tableOfContentsStyles.list,
 		direction: "column"
 	}, propsList.value, { ref: (value) => list.value = toElement(value) }), { "key": "__site1" }), {
-		default: () => [current.value !== void 0 && createVNode("span", mergeProps(mergeAttrs({ sx: tableOfContentsStyles.indicator }), {
+		default: () => [current.value !== void 0 && createVNode("span", mergeJsxProps(mergeAttrs({ sx: tableOfContentsStyles.indicator }), {
 			"ref": indicator,
 			"aria-hidden": "true"
 		}), null), items.value.map((item) => createVNode("li", { "key": item.id }, [createVNode("a", mergeAttrs({ sx: [

package/dist/navigation/TableOfContents.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableOfContents.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Text","_mergeProps"],"sources":["../../src/navigation/TableOfContents.tsx"],"sourcesContent":["/**\n * 本页目录：列出页面的各节标题，滚动时高亮正在读的一节（useScrollSpy），侧边的指示条滑过去（useActiveIndicator）。\n *\n *   <TableOfContents items={[{ id: 'install', label: '安装', level: 2 }, …]} />\n *\n * 目录项可以手写，也可以在页面渲染后用 collectHeadings(article) 从带 id 的标题收集。\n * 链接是普通的页内锚点（#install）：标题的 scroll-margin 让开粘性顶栏（layoutVars.stickyOffset）。\n * 当前节的链接带 aria-current=\"location\"。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { toElement } from '../utils/dom/element';\nimport { useScrollSpy, type HeadingEntry } from '../utils/dom/scroll-spy';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；原生的 title 属性（悬停提示）让给目录的标题 */\nexport interface TableOfContentsProps extends PartProps<'nav', 'aria-labelledby' | 'title'> {\n  /** 目录项：标题的 id、文字与级别（2 级起，每深一级多缩进一档） */\n  items: readonly HeadingEntry[];\n  /** 目录的标题，同时是导航的名称；默认取语言包（本页目录） */\n  title?: VNodeChild;\n  /** 页面在哪个容器里滚动；不写时是窗口 */\n  scrollRoot?: HTMLElement | null;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 链接的部件属性 */\n  propsLink?: PartProps<'a'>;\n}\n\n/** TableOfContents 的样式：title、list、indicator、link、current */\nexport const tableOfContentsStyles = css.create({\n  title: { display: 'block', marginBlockEnd: '_sm' },\n  // 指示条按链接的 offsetTop 定位：列表是它的定位容器\n  list: {\n    position: 'relative',\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_border',\n  },\n  indicator: {\n    position: 'absolute',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    // 盖住列表左边的细线\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    width: '_borderWidths.sm',\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n  },\n  link: {\n    display: 'block',\n    paddingBlock: '_xs',\n    paddingInlineEnd: '_xs',\n    borderRadius: '_xs',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontSize: '_sm',\n    lineHeight: '_snug',\n    textDecoration: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: { color: { default: '_accentText', ':hover': '_accentText' } },\n  // 按级别缩进：2 级贴着细线留一档，往下每级多一档\n  indent: (level: number) => ({ paddingInlineStart: `calc(${Math.max(level - 1, 1)} * 0.75em)` }),\n});\n\n/** 本页目录（nav）：滚动时高亮当前节 */\nexport const TableOfContents = _component(\n  ({\n    items,\n    title,\n    scrollRoot,\n    propsTitle,\n    propsList,\n    propsLink,\n    ...rest\n  }: TableOfContentsProps) => {\n    const lang = useLang();\n    const titleId = useId();\n    let list = _state.raw<HTMLElement | null>(null);\n    let indicator = _state.raw<HTMLElement | null>(null);\n    const current = useScrollSpy(() => ({\n      ids: items.map((item) => item.id),\n      root: scrollRoot,\n    }));\n    useActiveIndicator(() => ({\n      container: list,\n      indicator,\n      active: '[aria-current=\"location\"]',\n      axis: 'vertical',\n      value: current.value,\n    }));\n\n    return () => (\n      <nav {...mergeAttrs<'nav'>({}, rest, { 'aria-labelledby': titleId })}>\n        <Text\n          {...mergePartProps<TextProps>(\n            { sx: tableOfContentsStyles.title, size: 'sm', weight: 'semibold' },\n            propsTitle,\n            { id: titleId },\n          )}\n        >\n          {title ?? lang.tableOfContents}\n        </Text>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>(\n            { sx: tableOfContentsStyles.list, direction: 'column' },\n            propsList,\n            { ref: (value: unknown) => (list = toElement(value)) },\n          )}\n        >\n          {current.value !== undefined && (\n            <span\n              {...mergeAttrs<'span'>({ sx: tableOfContentsStyles.indicator })}\n              ref={_toRef(indicator)}\n              aria-hidden=\"true\"\n            />\n          )}\n          {items.map((item) => (\n            <li key={item.id}>\n              <a\n                {...mergeAttrs<'a'>(\n                  {\n                    sx: [\n                      tableOfContentsStyles.link,\n                      tableOfContentsStyles.indent(item.level),\n                      current.value === item.id && tableOfContentsStyles.current,\n                      focusRingStyles.visible,\n                    ],\n                  },\n                  propsLink,\n                  {\n                    href: `#${item.id}`,\n                    'aria-current': current.value === item.id ? 'location' : undefined,\n                  },\n                )}\n              >\n                {item.label}\n              </a>\n            </li>\n          ))}\n        </FlexList>\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"TableOfContents.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Text","_mergeProps"],"sources":["../../src/navigation/TableOfContents.tsx"],"sourcesContent":["/**\n * 本页目录：列出页面的各节标题，滚动时高亮正在读的一节（useScrollSpy），侧边的指示条滑过去（useActiveIndicator）。\n *\n *   <TableOfContents items={[{ id: 'install', label: '安装', level: 2 }, …]} />\n *\n * 目录项可以手写，也可以在页面渲染后用 collectHeadings(article) 从带 id 的标题收集。\n * 链接是普通的页内锚点（#install）：标题的 scroll-margin 让开粘性顶栏（layoutVars.stickyOffset）。\n * 当前节的链接带 aria-current=\"location\"。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { toElement } from '../utils/dom/element';\nimport { useScrollSpy, type HeadingEntry } from '../utils/dom/scroll-spy';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；原生的 title 属性（悬停提示）让给目录的标题 */\nexport interface TableOfContentsProps extends PartProps<'nav', 'aria-labelledby' | 'title'> {\n  /** 目录项：标题的 id、文字与级别（2 级起，每深一级多缩进一档） */\n  items: readonly HeadingEntry[];\n  /** 目录的标题，同时是导航的名称；默认取语言包（本页目录） */\n  title?: VNodeChild;\n  /** 页面在哪个容器里滚动；不写时是窗口 */\n  scrollRoot?: HTMLElement | null;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 链接的部件属性 */\n  propsLink?: PartProps<'a'>;\n}\n\n/** TableOfContents 的样式：title、list、indicator、link、current */\nexport const tableOfContentsStyles = css.create({\n  title: { display: 'block', marginBlockEnd: '_sm' },\n  // 指示条按链接的 offsetTop 定位：列表是它的定位容器\n  list: {\n    position: 'relative',\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_border',\n  },\n  indicator: {\n    position: 'absolute',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    // 盖住列表左边的细线\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    width: '_borderWidths.sm',\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n  },\n  link: {\n    display: 'block',\n    paddingBlock: '_xs',\n    paddingInlineEnd: '_xs',\n    borderRadius: '_xs',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontSize: '_sm',\n    lineHeight: '_snug',\n    textDecoration: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: { color: { default: '_accentText', ':hover': '_accentText' } },\n  // 按级别缩进：2 级贴着细线留一档，往下每级多一档\n  indent: (level: number) => ({ paddingInlineStart: `calc(${Math.max(level - 1, 1)} * 0.75em)` }),\n});\n\n/** 本页目录（nav）：滚动时高亮当前节 */\nexport const TableOfContents = _component(\n  ({\n    items,\n    title,\n    scrollRoot,\n    propsTitle,\n    propsList,\n    propsLink,\n    ...rest\n  }: TableOfContentsProps) => {\n    const lang = useLang();\n    const titleId = useId();\n    let list = _state.raw<HTMLElement | null>(null);\n    let indicator = _state.raw<HTMLElement | null>(null);\n    const current = useScrollSpy(() => ({\n      ids: items.map((item) => item.id),\n      root: scrollRoot,\n    }));\n    useActiveIndicator(() => ({\n      container: list,\n      indicator,\n      active: '[aria-current=\"location\"]',\n      axis: 'vertical',\n      value: current.value,\n    }));\n\n    return () => (\n      <nav {...mergeAttrs<'nav'>({}, rest, { 'aria-labelledby': titleId })}>\n        <Text\n          {...mergePartProps<TextProps>(\n            { sx: tableOfContentsStyles.title, size: 'sm', weight: 'semibold' },\n            propsTitle,\n            { id: titleId },\n          )}\n        >\n          {title ?? lang.tableOfContents}\n        </Text>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>(\n            { sx: tableOfContentsStyles.list, direction: 'column' },\n            propsList,\n            { ref: (value: unknown) => (list = toElement(value)) },\n          )}\n        >\n          {current.value !== undefined && (\n            <span\n              {...mergeAttrs<'span'>({ sx: tableOfContentsStyles.indicator })}\n              ref={_toRef(indicator)}\n              aria-hidden=\"true\"\n            />\n          )}\n          {items.map((item) => (\n            <li key={item.id}>\n              <a\n                {...mergeAttrs<'a'>(\n                  {\n                    sx: [\n                      tableOfContentsStyles.link,\n                      tableOfContentsStyles.indent(item.level),\n                      current.value === item.id && tableOfContentsStyles.current,\n                      focusRingStyles.visible,\n                    ],\n                  },\n                  propsLink,\n                  {\n                    href: `#${item.id}`,\n                    'aria-current': current.value === item.id ? 'location' : undefined,\n                  },\n                )}\n              >\n                {item.label}\n              </a>\n            </li>\n          ))}\n        </FlexList>\n      </nav>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,IAAa,wBAAwB,IAAI,OAAO;CAC9C,OAAO;EAAE,SAAS;EAAS,gBAAgB;CAAM;CAEjD,MAAM;EACJ,UAAU;EACV,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;CAC1B;CACA,WAAW;EACT,UAAU;EACV,iBAAiB;EACjB,kBAAkB;EAElB,mBAAmB,aAAa,EAAE,aAAa,GAAE;EACjD,OAAO;EACP,cAAc;EACd,iBAAiB;CACnB;CACA,MAAM;EACJ,SAAS;EACT,cAAc;EACd,kBAAkB;EAClB,cAAc;EACd,OAAO;GAAE,SAAS;GAAc,UAAU;EAAQ;EAClD,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,YAAY,SAAS,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACnD;CACA,SAAS,EAAE,OAAO;EAAE,SAAS;EAAe,UAAU;CAAc,EAAE;CAEtE,SAAS,WAAmB,EAAE,oBAAoB,QAAQ,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAC,YAAa;AAC/F,CAAC;;AAGD,IAAa,kBAAkB,0BAC7B,QAAA,SAQ4B;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MADvB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,UAAU,MAAM;CACtB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,YAASA,WAAkC,IAAI;CACnD,MAAM,UAAU,oBAAoB;EAClC,KAAK,MAAA,MAAM,KAAK,SAAS,KAAK,EAAE;EAChC,MAAI,WAAA;CACN,EAAE;CACF,0BAA0B;EACxB,WAAS,KAAA;EACT,WAAS,UAAA;EACT,QAAQ;EACR,MAAM;EACN,OAAO,QAAQ;CACjB,EAAE;CAEF,aAAOC,YAAA,OACI,WAAkB,CAAC,GAAG,MAAM,EAAE,mBAAmB,QAAQ,CAAC,GAAC,CAAAA,YAAAC,QAAAC,cAE5D,eACF;EAAE,IAAI,sBAAsB;EAAO,MAAM;EAAM,QAAQ;CAAW,GAAC,WAAA,OAEnE,EAAE,IAAI,QAAQ,CAChB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;EAAA,eAAA,CAEA,MAAA,SAAS,KAAK,eAAe;EAAA,SAAA;CAAA,CAAA,GAAAF,YAAA,UAAAE,cAG1B,eACF;EAAE,IAAI,sBAAsB;EAAM,WAAW;CAAS,GAAC,UAAA,OAEvD,EAAE,MAAM,UAAoB,KAAA,QAAO,UAAU,KAAK,EAAG,CACvD,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;EAAA,eAAA,CAEA,QAAQ,UAAU,KAAA,KAASF,YAAA,QAAAE,cAEpB,WAAmB,EAAE,IAAI,sBAAsB,UAAU,CAAC,GAAC;GAAA,OAAA;GAAA,eAAA;EAAA,CAAA,GAAA,IAAA,GAKlE,MAAA,MAAM,KAAK,SAAIF,YAAA,MAAA,EAAA,OACL,KAAK,GAAE,GAAA,CAAAA,YAAA,KAER,WACF,EACE,IAAI;GACF,sBAAsB;GAAI,IAAA,KAC1B,sBAAsB,cAAM,CAAC,KAAK,KAAK,CAAA;GACvC,QAAQ,UAAU,KAAK,MAAM,sBAAsB;GACnD,gBAAgB;EAAO,EAE3B,GAAC,UAAA,OAED;GACE,MAAM,IAAI,KAAK;GACf,gBAAgB,QAAQ,UAAU,KAAK,KAAK,aAAa,KAAA;EAC3D,CACF,GAAC,CAEA,KAAK,KAAK,CAAA,CAAA,CAAA,CAGhB,CAAC;EAAA,SAAA;CAAA,CAAA,CAAA,CAAA;AAIV,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Tabs.js

@@ -17,8 +17,8 @@ import { plainText } from "../utils/data/text.js";
 import { rovingFocus } from "../utils/dom/roving-focus.js";
 import { Menu as Menu$1, MenuRadioGroup, MenuRadioItem } from "../overlay/Menu.js";
 import { useActiveIndicator } from "../utils/motion/active-indicator.js";
-import { computed, createVNode, isVNode, mergeProps, nextTick, onBeforeUnmount, ref, shallowRef, useId, watch } from "vue";
-import { _component, bindable, childrenProp, createContext, effect, forwardChildren, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode, isVNode, nextTick, onBeforeUnmount, ref, shallowRef, useId, watch } from "vue";
+import { _component, bindable, childrenProp, createContext, effect, forwardChildren, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronDown, ChevronLeft, ChevronRight, Plus, X } from "@lucide/icons";
 //#region src/navigation/Tabs.tsx
@@ -139,7 +139,7 @@ var Tabs = /*#__PURE__*/ _component((_props, _ctx) => {
 			if (current.value !== void 0) document.getElementById(tabId(current.value))?.focus();
 		})
 	});
-	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
 		tabsStyles.root,
 		orientation.value === "vertical" && tabsStyles.vertical,
 		appearance().size && fontSizeStyles[appearance().size]
@@ -345,7 +345,7 @@ var TabList = /*#__PURE__*/ _component((_props2, _ctx2) => {
 			label: tabs.label(value)
 		}));
 		return createVNode(Menu$1, {
-			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeProps(props, {
+			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeJsxProps(props, {
 				"icon": ChevronDown,
 				"size": "sm",
 				"variant": "ghost",
@@ -537,7 +537,7 @@ var Tab = /*#__PURE__*/ _component((_props3, _ctx3) => {
 			orientation: tabs.orientation,
 			closable: !!onClose.value
 		});
-		const tab = createVNode(ButtonBase, mergeProps(mergePartProps({
+		const tab = createVNode(ButtonBase, mergeJsxProps(mergePartProps({
 			...styles.root,
 			ripple: tabs.ripple
 		}, rest, {
@@ -561,7 +561,7 @@ var Tab = /*#__PURE__*/ _component((_props3, _ctx3) => {
 			"data-dragging": tabs.dragging === value.value || void 0
 		}), _isSlot(_slot2 = forwardChildren(_props3)) ? _slot2 : { default: () => [_slot2] });
 		if (!onClose.value) return tab;
-		return createVNode("span", mergeProps({ "role": "presentation" }, mergeAttrs(styles.closeWrapper)), [tab, createVNode(IconButton, mergePartProps({
+		return createVNode("span", mergeJsxProps({ "role": "presentation" }, mergeAttrs(styles.closeWrapper)), [tab, createVNode(IconButton, mergePartProps({
 			icon: X,
 			size: "xs",
 			variant: "ghost",
@@ -606,7 +606,7 @@ var TabPanel = /*#__PURE__*/ _component((_props4, _ctx4) => {
 	const showContent = useLazyContent(() => tabs.value === value.value, () => tabs.lazy);
 	return () => {
 		const selected = tabs.value === value.value;
-		return createVNode("div", mergeProps(mergeAttrs({
+		return createVNode("div", mergeJsxProps(mergeAttrs({
 			sx: [tabPanelStyles.root, focusRingStyles.visible],
 			tabindex: 0
 		}, rest, {