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

package/dist/navigation/PageSizeSelect.js.map

@@ -0,0 +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"}

package/dist/navigation/Pager.d.ts

@@ -0,0 +1,30 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 一侧的链接 */
+export interface PagerLink {
+    /** 地址 */
+    href: string;
+    /** 文章标题 */
+    label: VNodeChild;
+}
+/** 未声明的属性落到 nav 上 */
+export interface PagerProps extends PartProps<'nav'> {
+    /** 上一篇；第一篇没有 */
+    previous?: PagerLink;
+    /** 下一篇；最后一篇没有 */
+    next?: PagerLink;
+    /** 两个链接（a）的部件属性 */
+    propsLink?: PartProps<'a'>;
+}
+/** Pager 的样式：root、link、next、hint、label、arrow */
+export declare const pagerStyles: Readonly<{
+    arrow: css.CompiledStyles;
+    hint: css.CompiledStyles;
+    label: css.CompiledStyles;
+    link: css.CompiledStyles;
+    next: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 翻页导航（nav）：上一篇、下一篇 */
+export declare const Pager: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PagerProps>;

package/dist/navigation/Pager.js

@@ -0,0 +1,111 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ArrowLeft, ArrowRight } from "@lucide/icons";
+//#region src/navigation/Pager.tsx
+/**
+* 翻页导航：文章末尾的“上一篇 / 下一篇”，两张链接卡片。
+*
+*   <Pager previous={{ href: '/button', label: 'Button' }} next={{ href: '/dialog', label: 'Dialog' }} />
+*
+* 链接带 rel="prev" / rel="next"；站内链接经 createUi 的 router 不刷新页面地跳转（useRouterLink）。
+* 页码式的分页用 Pagination。
+*/
+/** 一侧的链接 */
+/** 未声明的属性落到 nav 上 */
+/** Pager 的样式：root、link、next、hint、label、arrow */
+var pagerStyles = css.create({
+	root: {
+		display: "grid",
+		gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 14rem), 1fr))",
+		gap: "_md"
+	},
+	link: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		padding: "_md",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: {
+			default: "_border",
+			":hover": "_accent"
+		},
+		borderRadius: "_md",
+		color: "_text",
+		textDecoration: "none"
+	},
+	next: {
+		gridColumnEnd: "-1",
+		alignItems: "flex-end",
+		textAlign: "end"
+	},
+	hint: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	label: {
+		color: "_accentText",
+		fontWeight: "_medium"
+	},
+	arrow: { scale: {
+		default: null,
+		":dir(rtl)": "-1 1"
+	} }
+});
+/** 翻页导航（nav）：上一篇、下一篇 */
+var Pager = /*#__PURE__*/ _component((_props, _ctx) => {
+	const previous = readonlyProp(_props, "previous");
+	const next = readonlyProp(_props, "next");
+	const propsLink = readonlyProp(_props, "propsLink");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const router = useRouterLink();
+	function renderLink(link, direction) {
+		const isNext = direction === "next";
+		return createVNode("a", mergeAttrs({ sx: [
+			pagerStyles.link,
+			isNext && pagerStyles.next,
+			focusRingStyles.visible,
+			interactionTransitions.colors
+		] }, propsLink.value, {
+			href: router.href(link.href),
+			rel: direction,
+			onClick: (event) => router.onClick(event, link.href)
+		}), [createVNode("span", mergeAttrs({ sx: pagerStyles.hint }), [
+			!isNext && createVNode(Icon, {
+				"icon": ArrowLeft,
+				"sx": pagerStyles.arrow
+			}, null),
+			isNext ? lang.pagerNext : lang.pagerPrevious,
+			isNext && createVNode(Icon, {
+				"icon": ArrowRight,
+				"sx": pagerStyles.arrow
+			}, null)
+		]), createVNode("span", mergeAttrs({ sx: pagerStyles.label }), [link.label])]);
+	}
+	return () => createVNode("nav", mergeAttrs({
+		sx: pagerStyles.root,
+		"aria-label": lang.pagerLabel
+	}, rest), [previous.value && renderLink(previous.value, "prev"), next.value && renderLink(next.value, "next")]);
+}, {
+	name: "Pager",
+	props: [
+		"previous",
+		"next",
+		"propsLink"
+	]
+});
+//#endregion
+export { Pager, pagerStyles };
+
+//# sourceMappingURL=Pager.js.map

package/dist/navigation/Pager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pager.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/navigation/Pager.tsx"],"sourcesContent":["/**\n * 翻页导航：文章末尾的“上一篇 / 下一篇”，两张链接卡片。\n *\n *   <Pager previous={{ href: '/button', label: 'Button' }} next={{ href: '/dialog', label: 'Dialog' }} />\n *\n * 链接带 rel=\"prev\" / rel=\"next\"；站内链接经 createUi 的 router 不刷新页面地跳转（useRouterLink）。\n * 页码式的分页用 Pagination。\n */\nimport { ArrowLeft, ArrowRight } 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 { Icon } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { interactionTransitions } from '../utils/style/transitions';\n\n/** 一侧的链接 */\nexport interface PagerLink {\n  /** 地址 */\n  href: string;\n  /** 文章标题 */\n  label: VNodeChild;\n}\n\n/** 未声明的属性落到 nav 上 */\nexport interface PagerProps extends PartProps<'nav'> {\n  /** 上一篇；第一篇没有 */\n  previous?: PagerLink;\n  /** 下一篇；最后一篇没有 */\n  next?: PagerLink;\n  /** 两个链接（a）的部件属性 */\n  propsLink?: PartProps<'a'>;\n}\n\n/** Pager 的样式：root、link、next、hint、label、arrow */\nexport const pagerStyles = css.create({\n  // 够宽时两列；只有下一篇时它仍在结束边那一列\n  root: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 14rem), 1fr))',\n    gap: '_md',\n  },\n  link: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    padding: '_md',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: { default: '_border', ':hover': '_accent' },\n    borderRadius: '_md',\n    color: '_text',\n    textDecoration: 'none',\n  },\n  next: { gridColumnEnd: '-1', alignItems: 'flex-end', textAlign: 'end' },\n  hint: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  label: { color: '_accentText', fontWeight: '_medium' },\n  // 从右到左排版时“上一篇”在右边：箭头跟着掉头\n  arrow: { scale: { default: null, ':dir(rtl)': '-1 1' } },\n});\n\n/** 翻页导航（nav）：上一篇、下一篇 */\nexport const Pager = _component(({ previous, next, propsLink, ...rest }: PagerProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n\n  function renderLink(link: PagerLink, direction: 'prev' | 'next') {\n    const isNext = direction === 'next';\n    return (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            sx: [\n              pagerStyles.link,\n              isNext && pagerStyles.next,\n              focusRingStyles.visible,\n              interactionTransitions.colors,\n            ],\n          },\n          propsLink,\n          {\n            href: router.href(link.href),\n            rel: direction,\n            onClick: (event: MouseEvent) => router.onClick(event, link.href),\n          },\n        )}\n      >\n        <span {...mergeAttrs<'span'>({ sx: pagerStyles.hint })}>\n          {!isNext && <Icon icon={ArrowLeft} sx={pagerStyles.arrow} />}\n          {isNext ? lang.pagerNext : lang.pagerPrevious}\n          {isNext && <Icon icon={ArrowRight} sx={pagerStyles.arrow} />}\n        </span>\n        <span {...mergeAttrs<'span'>({ sx: pagerStyles.label })}>{link.label}</span>\n      </a>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({ sx: pagerStyles.root, 'aria-label': lang.pagerLabel }, rest)}>\n      {previous && renderLink(previous, 'prev')}\n      {next && renderLink(next, 'next')}\n    </nav>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAa,cAAc,IAAI,OAAO;CAEpC,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,KAAK;CACP;CACA,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,SAAS;EACT,aAAa;EACb,aAAa;EACb,aAAa;GAAE,SAAS;GAAW,UAAU;EAAU;EACvD,cAAc;EACd,OAAO;EACP,gBAAgB;CAClB;CACA,MAAM;EAAE,eAAe;EAAM,YAAY;EAAY,WAAW;CAAM;CACtE,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,UAAU;CACZ;CACA,OAAO;EAAE,OAAO;EAAe,YAAY;CAAU;CAErD,OAAO,EAAE,OAAO;EAAE,SAAS;EAAM,aAAa;CAAO,EAAE;AACzD,CAAC;;AAGD,IAAa,QAAQ,0BAAW,QAAA,SAAwD;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAvB,OAAIC,UAAA,QAAA,MAAA,IAAA;CACnE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAE7B,SAAS,WAAW,MAAiB,WAA4B;EAC/D,MAAM,SAAS,cAAc;EAC7B,OAAAC,YAAA,KAEQ,WACF,EACE,IAAI;GACF,YAAY;GACZ,UAAU,YAAY;GACtB,gBAAgB;GAChB,uBAAuB;EAAM,EAEjC,GAAC,UAAA,OAED;GACE,MAAM,OAAO,KAAK,KAAK,IAAI;GAC3B,KAAK;GACL,UAAU,UAAsB,OAAO,QAAQ,OAAO,KAAK,IAAI;EACjE,CACF,GAAC,CAAAA,YAAA,QAES,WAAmB,EAAE,IAAI,YAAY,KAAK,CAAC,GAAC;GACnD,CAAC,UAAMA,YAAA,MAAA;IAAA,QAAgB;IAAS,MAAM,YAAY;GAAK,GAAA,IAAA;GACvD,SAAS,KAAK,YAAY,KAAK;GAC/B,UAAMA,YAAA,MAAA;IAAA,QAAgB;IAAU,MAAM,YAAY;GAAK,GAAA,IAAA;EAAI,CAAA,GAAAA,YAAA,QAEpD,WAAmB,EAAE,IAAI,YAAY,MAAM,CAAC,GAAC,CAAG,KAAK,KAAK,CAAA,CAAA,CAAA;CAG1E;CAEA,aAAOA,YAAA,OACI,WAAkB;EAAE,IAAI,YAAY;EAAM,cAAc,KAAK;CAAW,GAAG,IAAI,GAAC,CACtF,SAAA,SAAY,WAAU,SAAA,OAAW,MAAM,GACvC,KAAA,SAAQ,WAAU,KAAA,OAAO,MAAM,CAAC,CAAA;AAGvC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CAAA"}

package/dist/navigation/Pagination.d.ts

@@ -0,0 +1,51 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type ButtonProps } from '../base/Button';
+import { type IconButtonProps } from '../base/IconButton';
+import { type IconLinkButtonProps } from '../base/IconLinkButton';
+import { type LinkButtonProps } from '../base/LinkButton';
+import { type PartProps } from '../utils/props';
+import type { TextSize } from '../utils/style/typography';
+import { type FlexProps } from '../layout/Flex';
+/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */
+export interface PaginationProps extends PartProps<'nav'> {
+    /** 当前页，从 1 开始：父级写 _page={x} */
+    _page?: number;
+    /** 总页数；不写时按 total 与 pageSize 算 */
+    pageCount?: number;
+    /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */
+    total?: number;
+    /** 每页条数，默认 10 */
+    pageSize?: number;
+    /** 当前页左右各显示几页，默认 1 */
+    siblings?: number;
+    /** 首尾各固定显示几页，默认 1 */
+    boundaries?: number;
+    /** 显示总条数（需要 total） */
+    showTotal?: boolean;
+    /** 给了就渲染为链接：每页的地址 */
+    href?: (page: number) => string;
+    /** 字号档位，按钮随之缩放，默认 sm */
+    size?: TextSize;
+    /** 列表（ul）的部件属性 */
+    propsList?: Partial<FlexProps<'ul'>>;
+    /** 每一项（li，包着按钮或省略号）的部件属性 */
+    propsItem?: PartProps<'li'>;
+    /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */
+    propsPage?: Partial<ButtonProps & LinkButtonProps> | ((page: number) => Partial<ButtonProps & LinkButtonProps>);
+    /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */
+    propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;
+    /** 省略号的部件属性 */
+    propsEllipsis?: PartProps<'span'>;
+    /** 总条数文字的部件属性 */
+    propsTotal?: PartProps<'span'>;
+}
+/** Pagination 的样式：root、list、page、ellipsis、total、tabular */
+export declare const paginationStyles: Readonly<{
+    ellipsis: css.CompiledStyles;
+    page: css.CompiledStyles;
+    root: css.CompiledStyles;
+    tabular: css.CompiledStyles;
+    total: css.CompiledStyles;
+}>;
+/** 分页：上一页、页码、省略号、下一页 */
+export declare const Pagination: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PaginationProps>;

package/dist/navigation/Pagination.js

@@ -0,0 +1,157 @@
+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 { Icon } from "../base/Icon.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronLeft, ChevronRight, Ellipsis } from "@lucide/icons";
+//#region src/navigation/Pagination.tsx
+/**
+* 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current="page"。
+* 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。
+*
+*   <Pagination _page={page} total={320} pageSize={20} />
+*   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）
+*/
+/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Pagination 的样式：root、list、page、ellipsis、total、tabular */
+var paginationStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "_md"
+	},
+	page: {
+		minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		paddingInline: "_xs"
+	},
+	ellipsis: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		color: "_textMuted"
+	},
+	total: { color: "_textMuted" },
+	tabular: { fontVariantNumeric: "tabular-nums" }
+});
+/** 分页：上一页、页码、省略号、下一页 */
+var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
+	const page = bindable(_props, "_page", () => 1, _ctx.emit);
+	const pageCount = readonlyProp(_props, "pageCount");
+	const total = readonlyProp(_props, "total");
+	const pageSize = readonlyProp(_props, "pageSize", 10);
+	const siblings = readonlyProp(_props, "siblings", 1);
+	const boundaries = readonlyProp(_props, "boundaries", 1);
+	const showTotal = readonlyProp(_props, "showTotal", false);
+	const href = readonlyProp(_props, "href");
+	const size = readonlyProp(_props, "size", "sm");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsPage = readonlyProp(_props, "propsPage");
+	const propsStep = readonlyProp(_props, "propsStep");
+	const propsEllipsis = readonlyProp(_props, "propsEllipsis");
+	const propsTotal = readonlyProp(_props, "propsTotal");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const count = computed(() => Math.max(1, pageCount.value ?? Math.ceil((total.value ?? 0) / pageSize.value)));
+	const current = computed(() => clamp(page.value, 1, count.value));
+	function go(target) {
+		page.value = clamp(target, 1, count.value);
+	}
+	/** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */
+	function pageButton(target) {
+		const isCurrent = target === current.value;
+		const own = typeof propsPage.value === "function" ? propsPage.value(target) : propsPage.value;
+		const shared = mergeProps$1({
+			sx: [paginationStyles.page, paginationStyles.tabular],
+			size: size.value,
+			variant: isCurrent ? "soft" : "ghost",
+			tone: isCurrent ? "accent" : "neutral",
+			"aria-label": lang.pageLabel(target)
+		}, own, { "aria-current": isCurrent ? "page" : void 0 });
+		return href.value ? createVNode(LinkButton, mergePartProps(shared, {
+			href: href.value(target),
+			onClick: () => go(target)
+		}), _isSlot(target) ? target : { default: () => [target] }) : createVNode(Button, mergePartProps(shared, { onClick: () => go(target) }), _isSlot(target) ? target : { default: () => [target] });
+	}
+	/** 上一页、下一页：到头时不可用；有 href 时也是链接（rel="prev" / "next"），与页码一样可分享 */
+	function stepButton(direction) {
+		const target = current.value + direction;
+		const disabled = target < 1 || target > count.value;
+		const shared = {
+			size: size.value,
+			variant: "ghost",
+			tone: "neutral",
+			icon: direction < 0 ? ChevronLeft : ChevronRight,
+			propsIcon: { flipInRtl: true },
+			"aria-label": direction < 0 ? lang.previousPage : lang.nextPage
+		};
+		return href.value ? createVNode(IconLinkButton, mergePartProps({
+			...shared,
+			href: href.value(disabled ? current.value : target)
+		}, propsStep.value, {
+			disabled,
+			rel: direction < 0 ? "prev" : "next",
+			onClick: () => go(target)
+		}), null) : createVNode(IconButton, mergePartProps(shared, propsStep.value, {
+			disabled,
+			onClick: () => go(target)
+		}), null);
+	}
+	return () => createVNode("nav", mergeAttrs({
+		sx: paginationStyles.root,
+		"aria-label": lang.pagination
+	}, rest), [createVNode(FlexList, mergeProps(mergePartProps({
+		align: "center",
+		gap: "xs"
+	}, propsList.value), { "key": "__site0" }), {
+		default: () => [
+			createVNode("li", mergeAttrs({}, propsItem.value), [stepButton(-1)]),
+			paginationItems({
+				page: current.value,
+				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)])])),
+			createVNode("li", mergeAttrs({}, propsItem.value), [stepButton(1)])
+		],
+		$stable: true
+	}), showTotal.value && total.value != null && createVNode("span", mergeAttrs({ sx: [paginationStyles.total, paginationStyles.tabular] }, propsTotal.value), [lang.paginationTotal(total.value)])]);
+}, {
+	name: "Pagination",
+	props: [
+		"_page",
+		"onUpdate:_page",
+		"pageCount",
+		"total",
+		"pageSize",
+		"siblings",
+		"boundaries",
+		"showTotal",
+		"href",
+		"size",
+		"propsList",
+		"propsItem",
+		"propsPage",
+		"propsStep",
+		"propsEllipsis",
+		"propsTotal"
+	]
+});
+//#endregion
+export { Pagination, paginationStyles };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/navigation/Pagination.js.map

@@ -0,0 +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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"}

package/dist/navigation/PaginationBar.d.ts

@@ -0,0 +1,54 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+import { type PageJumpProps } from './PageJump';
+import { type PageSizeSelectProps } from './PageSizeSelect';
+import { type PaginationProps } from './Pagination';
+/** 当前页显示的是哪几条 */
+export interface PageRange {
+    /** 第一条的序号，从 1 开始；没有数据时是 0 */
+    from: number;
+    /** 最后一条的序号 */
+    to: number;
+    /** 总条数 */
+    total: number;
+}
+/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */
+export interface PaginationBarProps extends PartProps<'div'> {
+    /** 当前页，从 1 开始：父级写 _page={x} */
+    _page?: number;
+    /** 每页条数：父级写 _pageSize={x}，默认 10 */
+    _pageSize?: number;
+    /** 总条数 */
+    total: number;
+    /** 每页条数的选项，默认 [10, 20, 50, 100] */
+    pageSizeOptions?: readonly number[];
+    /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */
+    showTotal?: boolean | ((range: PageRange) => VNodeChild);
+    /** 每页条数选择，默认 true */
+    showSizeSelect?: boolean;
+    /** 跳页，默认 true（窄于 36em 时不显示） */
+    showJump?: boolean;
+    /** 字号档位，各部分随之缩放，默认 sm */
+    size?: TextSize;
+    /** 总数文字的部件属性 */
+    propsTotal?: PartProps<'span'>;
+    /** 结束边那一组（页码、条数、跳页）的部件属性 */
+    propsControls?: PartProps<'div'>;
+    /** 页码（Pagination）的部件属性 */
+    propsPagination?: Partial<PaginationProps>;
+    /** 每页条数（PageSizeSelect）的部件属性 */
+    propsSizeSelect?: Partial<PageSizeSelectProps>;
+    /** 跳页（PageJump）的部件属性 */
+    propsJump?: Partial<PageJumpProps>;
+}
+/** PaginationBar 的样式：root、total、controls、jump */
+export declare const paginationBarStyles: Readonly<{
+    controls: css.CompiledStyles;
+    jump: css.CompiledStyles;
+    root: css.CompiledStyles;
+    total: css.CompiledStyles;
+}>;
+/** 分页栏：总数、页码、每页条数、跳页 */
+export declare const PaginationBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PaginationBarProps>;

package/dist/navigation/PaginationBar.js

@@ -0,0 +1,125 @@
+import { clamp } from "../utils/data/number.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/navigation/PaginationBar.tsx
+/** 当前页显示的是哪几条 */
+/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */
+/** PaginationBar 的样式：root、total、controls、jump */
+var paginationBarStyles = css.create({
+	root: {
+		containerType: "inline-size",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "space-between",
+		rowGap: "_sm",
+		columnGap: "_md"
+	},
+	total: {
+		flexBasis: {
+			default: "auto",
+			"@container (max-width: 24em)": "100%"
+		},
+		color: "_textMuted",
+		fontVariantNumeric: "tabular-nums"
+	},
+	controls: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		rowGap: "_sm",
+		columnGap: "_md",
+		marginInlineStart: "auto"
+	},
+	jump: { display: {
+		default: "inline-flex",
+		"@container (max-width: 36em)": "none"
+	} }
+});
+/** 分页栏：总数、页码、每页条数、跳页 */
+var PaginationBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const page = bindable(_props, "_page", () => 1, _ctx.emit);
+	const pageSize = bindable(_props, "_pageSize", () => 10, _ctx.emit);
+	const total = readonlyProp(_props, "total");
+	const pageSizeOptions = readonlyProp(_props, "pageSizeOptions");
+	const showTotal = readonlyProp(_props, "showTotal", true);
+	const showSizeSelect = readonlyProp(_props, "showSizeSelect", true);
+	const showJump = readonlyProp(_props, "showJump", true);
+	const size = readonlyProp(_props, "size", "sm");
+	const propsTotal = readonlyProp(_props, "propsTotal");
+	const propsControls = readonlyProp(_props, "propsControls");
+	const propsPagination = readonlyProp(_props, "propsPagination");
+	const propsSizeSelect = readonlyProp(_props, "propsSizeSelect");
+	const propsJump = readonlyProp(_props, "propsJump");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
+	const range = computed(() => {
+		const current = clamp(page.value, 1, pageCount.value);
+		return total.value === 0 ? {
+			from: 0,
+			to: 0,
+			total: total.value
+		} : {
+			from: (current - 1) * pageSize.value + 1,
+			to: Math.min(current * pageSize.value, total.value),
+			total: total.value
+		};
+	});
+	function renderTotal() {
+		if (!showTotal.value) return null;
+		const content = typeof showTotal.value === "function" ? showTotal.value(range.value) : range.value.total === 0 ? lang.paginationTotal(0) : lang.paginationRange(range.value.from, range.value.to, range.value.total);
+		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), {
+			"_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 }), {
+			"_value": pageSize.value,
+			"onUpdate:_value": _cache[1] || (_cache[1] = ($event) => pageSize.value = $event)
+		}), null),
+		showJump.value && pageCount.value > 1 && createVNode(PageJump, mergeProps(mergePartProps({
+			pageCount: pageCount.value,
+			size: size.value,
+			sx: paginationBarStyles.jump
+		}, propsJump.value), {
+			"_page": page.value,
+			"onUpdate:_page": _cache[2] || (_cache[2] = ($event) => page.value = $event)
+		}), null)
+	])]);
+}, {
+	name: "PaginationBar",
+	props: [
+		"_page",
+		"onUpdate:_page",
+		"_pageSize",
+		"onUpdate:_pageSize",
+		"total",
+		"pageSizeOptions",
+		"showTotal",
+		"showSizeSelect",
+		"showJump",
+		"size",
+		"propsTotal",
+		"propsControls",
+		"propsPagination",
+		"propsSizeSelect",
+		"propsJump"
+	]
+});
+//#endregion
+export { PaginationBar, paginationBarStyles };
+
+//# sourceMappingURL=PaginationBar.js.map

package/dist/navigation/PaginationBar.js.map

@@ -0,0 +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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"}

package/dist/navigation/SkipLink.d.ts

@@ -0,0 +1,16 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到 a 上 */
+export interface SkipLinkProps extends PartProps<'a', 'href'> {
+    /** 目标（正文容器）的锚点，如 #main；目标要能聚焦（tabindex="-1"） */
+    href: `#${string}`;
+    /** 链接文字，默认取语言包（跳到正文） */
+    children?: VNodeChild;
+}
+/** SkipLink 的样式：root */
+export declare const skipLinkStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 跳到正文的链接（a）：Tab 聚焦时出现 */
+export declare const SkipLink: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SkipLinkProps>;