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

package/dist/navigation/NavList.js

@@ -0,0 +1,375 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { Badge } from "../base/Badge.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { rippleHostStyles, useRipple } from "../utils/dom/ripple.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { Indicator } from "../base/Indicator.js";
+import { FlexList } from "../layout/Flex.js";
+import { Collapsible } from "../display/Collapsible.js";
+import { Tooltip } from "../overlay/Tooltip.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { HoverCard } from "../overlay/HoverCard.js";
+import { Fragment, computed, createVNode, isVNode, mergeProps, onBeforeUnmount, ref, useId, watch } from "vue";
+import { _component, bindable, childrenProp, childrenStable, createContext, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronRight } from "@lucide/icons";
+//#region src/navigation/NavList.tsx
+/**
+* 侧边导航，复合组件：NavList（nav > ul）> NavItem（链接）/ NavGroup（可展开的一组）/ NavSection（带小标题的一组，
+* 不能收起：文档站这类链接多、按主题分组的侧栏），里面再放 NavItem。
+* 当前页按路由适配的 isActive 判断（也可以用 active 指定），带 aria-current="page" 与高亮；
+* 含当前页的分组自动展开。分组用 Collapsible（触发器带 aria-expanded / aria-controls）。
+*
+*   <NavList aria-label="后台">
+*     <NavItem href="/" icon={House}>概览</NavItem>
+*     <NavGroup label="订单" icon={Package}>
+*       <NavItem href="/orders">全部订单</NavItem>
+*       <NavItem href="/orders/refunds">退款</NavItem>
+*     </NavGroup>
+*   </NavList>
+*
+* 用 vue-router 时 vueRouterAdapter(router, { match: 'prefix' }) 能让 /orders 在 /orders/42 页面也高亮。
+*
+* 紧凑（compact）：侧栏窄到只放得下图标时，各项只显示图标（文字留给读屏，悬停、聚焦时用 Tooltip 显示），
+* 小节标题换成它的图标（不能点）；分组也只剩图标，悬停、聚焦时子项从右边弹出来（HoverCard，完整的文字，
+* Tab 进入），组里有当前页时图标高亮。AppShell 的抽屉式侧栏拖窄时自动进入（NavCompactContext），
+* 也可以直接写 <NavList compact>。
+*
+* NavItem 的 badge 是计数角标（待办、未读）：展开时在文字后面，紧凑时是图标右上角的小圆点（读屏照样念出数目）。
+*/
+/** 分组向里面的项要的信息：哪些项是当前页（有当前页时自动展开） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** NavGroup 的上下文：组内的项据此缩进；不在组内时为 null */
+var NavGroupContext = createContext("NavGroup");
+/** 导航是不是紧凑（只显示图标）：AppShell 按侧栏宽度提供，NavList 的 compact 可以覆盖 */
+var NavCompactContext = createContext("NavCompact");
+/** NavList 的样式：nested、row、current、disabled、chevron、section、sectionLabel 等 */
+var navListStyles = css.create({
+	nested: {
+		paddingInlineStart: "_lg",
+		paddingTop: "_xs"
+	},
+	row: {
+		paddingInline: "_md",
+		borderRadius: "_md",
+		color: {
+			default: "_textMuted",
+			":hover": "_text"
+		},
+		fontWeight: "_medium"
+	},
+	current: { color: {
+		default: "_accentText",
+		":hover": "_accentText"
+	} },
+	disabled: { pointerEvents: "none" },
+	chevron: { transition: `transform ${t.durations.md} ${t.easings.standard}` },
+	chevronOpen: { transform: "rotate(90deg)" },
+	section: { marginBlockStart: {
+		default: "_lg",
+		":first-child": 0
+	} },
+	sectionLabel: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		paddingBlock: "_xs",
+		paddingInline: "_md",
+		color: "_text",
+		fontSize: "_sm",
+		fontWeight: "_semibold",
+		letterSpacing: "_wide"
+	},
+	sectionIcon: {
+		color: "_textMuted",
+		flexShrink: 0
+	},
+	compactRow: {
+		justifyContent: "center",
+		paddingInline: 0
+	},
+	compactSection: {
+		justifyContent: "center",
+		paddingInline: 0,
+		paddingBlockStart: "_sm",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted"
+	},
+	compactNested: { paddingInlineStart: 0 },
+	flyout: {
+		padding: "_xs",
+		minWidth: "12em"
+	}
+});
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+/** 侧边导航（nav > ul），里面放 NavItem 与 NavGroup */
+var NavList = /*#__PURE__*/ _component((_props, _ctx) => {
+	const compact = readonlyProp(_props, "compact");
+	const propsList = readonlyProp(_props, "propsList");
+	childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const inherited = NavCompactContext.inject(() => false);
+	const isCompact = () => compact.value ?? inherited();
+	NavCompactContext.provide(isCompact);
+	return () => {
+		let _slot;
+		return createVNode("nav", mergeProps(mergeAttrs({}, rest), { "data-compact": isCompact() || void 0 }), [createVNode(FlexList, mergePartProps({
+			direction: "column",
+			gap: "xs"
+		}, propsList.value), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	name: "NavList",
+	props: ["compact", "propsList"]
+});
+/** 地址与当前页由组件管理 */
+/** 未声明的属性落到链接（a）上 */
+/** 导航项（li > a）：当前页高亮并带 aria-current="page" */
+var NavItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const href = readonlyProp(_props2, "href");
+	const icon = readonlyProp(_props2, "icon");
+	const active = readonlyProp(_props2, "active");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const end = readonlyProp(_props2, "end");
+	const badge = readonlyProp(_props2, "badge", 0);
+	const badgeTone = readonlyProp(_props2, "badgeTone", "danger");
+	const ripple = readonlyProp(_props2, "ripple");
+	const propsItem = readonlyProp(_props2, "propsItem");
+	const propsIcon = readonlyProp(_props2, "propsIcon");
+	const propsLabel = readonlyProp(_props2, "propsLabel");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const lang = useLang();
+	const router = useRouterLink();
+	const group = NavGroupContext.inject(null);
+	const rippleHandlers = useRipple(() => ripple.value);
+	const current = computed(() => active.value ?? router.isActive(href.value));
+	const compact = NavCompactContext.inject(() => false);
+	const id = Symbol("NavItem");
+	if (group) {
+		watch(() => current.value, (value) => group.report(id, value), { immediate: true });
+		onBeforeUnmount(() => group.report(id, false));
+	}
+	const iconOnly = () => compact() && icon.value != null;
+	const link = (tooltip) => createVNode("a", mergeProps(mergeAttrs({
+		...tooltip,
+		sx: [
+			itemStyles.row,
+			itemStyles.hoverable,
+			navListStyles.row,
+			focusRingStyles.visible,
+			rippleHostStyles.host,
+			iconOnly() && navListStyles.compactRow,
+			current.value && [itemStyles.current, navListStyles.current],
+			disabled.value && [itemStyles.disabled, navListStyles.disabled]
+		]
+	}, rest, {
+		href: disabled.value ? void 0 : router.href(href.value),
+		"aria-current": current.value ? "page" : void 0,
+		"aria-disabled": disabled.value || void 0,
+		onClick: (event) => router.onClick(event, href.value),
+		...rippleHandlers
+	}), { "data-state": current.value ? "active" : "inactive" }), [
+		icon.value && (iconOnly() && badge.value > 0 ? createVNode(Indicator, {
+			"dot": true,
+			"tone": badgeTone.value,
+			"label": lang.indicatorCount(badge.value)
+		}, {
+			default: () => [createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null)],
+			$stable: true
+		}) : createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null)),
+		createVNode("span", mergeAttrs({ sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] }, propsLabel.value), [children.value]),
+		!iconOnly() && end.value,
+		!iconOnly() && badge.value > 0 && createVNode(Badge, {
+			"size": "xs",
+			"variant": "solid",
+			"tone": badgeTone.value,
+			"radius": "full"
+		}, {
+			default: () => [badge.value > 99 ? "99+" : badge.value],
+			$stable: true
+		})
+	]);
+	return () => {
+		let _slot2;
+		return createVNode("li", mergeAttrs({}, propsItem.value), [iconOnly() ? createVNode(Tooltip, {
+			"placement": "right",
+			"delay": 200,
+			"trigger": link
+		}, _isSlot(_slot2 = forwardChildren(_props2)) ? _slot2 : { default: () => [_slot2] }) : link()]);
+	};
+}, {
+	name: "NavItem",
+	props: [
+		"href",
+		"icon",
+		"active",
+		"disabled",
+		"end",
+		"badge",
+		"badgeTone",
+		"ripple",
+		"propsItem",
+		"propsIcon",
+		"propsLabel"
+	]
+});
+/** 未声明的属性落到外层 li 上 */
+/** 可展开的导航分组（li > 按钮 + 子列表） */
+var NavGroup = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const _cache = [];
+	const label = readonlyProp(_props3, "label");
+	const icon = readonlyProp(_props3, "icon");
+	const open = bindable(_props3, "_open", () => false, _ctx3.emit);
+	const propsTrigger = readonlyProp(_props3, "propsTrigger");
+	const propsContent = readonlyProp(_props3, "propsContent");
+	const propsList = readonlyProp(_props3, "propsList");
+	const propsLabel = readonlyProp(_props3, "propsLabel");
+	const propsIcon = readonlyProp(_props3, "propsIcon");
+	childrenProp(_props3);
+	const rest = restProps(_props3, _ctx3, false);
+	const compact = NavCompactContext.inject(() => false);
+	const iconOnly = () => compact() && icon.value != null;
+	const activeItems = /* @__PURE__ */ new Set();
+	let hasCurrent = ref(false);
+	NavGroupContext.provide({ report(item, active) {
+		if (active) activeItems.add(item);
+		else activeItems.delete(item);
+		hasCurrent.value = activeItems.size > 0;
+		if (activeItems.size > 0) open.value = true;
+	} });
+	/** 紧凑时：只剩图标，悬停、聚焦时子项从右边弹出来（完整的文字，不再紧凑） */
+	function renderFlyout() {
+		return createVNode("li", mergeAttrs({}, rest), [createVNode(HoverCard, {
+			"placement": "right-start",
+			"delay": 150,
+			"lazy": false,
+			"sx": navListStyles.flyout,
+			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(ButtonBase, mergeProps(mergePartProps({ sx: [
+				itemStyles.row,
+				itemStyles.hoverable,
+				navListStyles.row,
+				navListStyles.compactRow,
+				hasCurrent.value && [itemStyles.current, navListStyles.current]
+			] }, propsTrigger.value, props), { "data-state": hasCurrent.value ? "active" : "inactive" }), {
+				default: () => [createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null), createVNode("span", mergeAttrs({ sx: visuallyHiddenStyles.hidden }, propsLabel.value), [label.value])],
+				$stable: true
+			}))
+		}, {
+			default: () => {
+				let _slot3;
+				return [createVNode(NavFlyoutContent, {
+					"label": label.value,
+					"propsList": propsList.value
+				}, _isSlot(_slot3 = forwardChildren(_props3)) ? _slot3 : { default: () => [_slot3] })];
+			},
+			$stable: childrenStable()
+		})]);
+	}
+	return () => iconOnly() ? renderFlyout() : createVNode("li", mergeAttrs({}, rest), [createVNode(Collapsible, mergeProps(mergePartProps({ trigger: (props) => createVNode(ButtonBase, mergePartProps({ sx: [
+		itemStyles.row,
+		itemStyles.hoverable,
+		navListStyles.row,
+		iconOnly() && navListStyles.compactRow
+	] }, propsTrigger.value, props), {
+		default: () => [
+			icon.value && createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null),
+			createVNode("span", mergeAttrs({ sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] }, propsLabel.value), [label.value]),
+			!iconOnly() && createVNode(Icon, {
+				"icon": ChevronRight,
+				"flipInRtl": true,
+				"sx": [navListStyles.chevron, open.value && navListStyles.chevronOpen]
+			}, null)
+		],
+		$stable: true
+	}) }, propsContent.value), {
+		"_open": open.value,
+		"onUpdate:_open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+		"key": "__site0"
+	}), {
+		default: () => {
+			let _slot4;
+			return [createVNode(FlexList, mergePartProps({
+				direction: "column",
+				gap: "xs",
+				sx: [navListStyles.nested, css.select(() => compact() && navListStyles.compactNested, true)]
+			}, propsList.value), _isSlot(_slot4 = forwardChildren(_props3)) ? _slot4 : { default: () => [_slot4] })];
+		},
+		$stable: childrenStable()
+	})]);
+}, {
+	name: "NavGroup",
+	props: [
+		"label",
+		"icon",
+		"_open",
+		"onUpdate:_open",
+		"propsTrigger",
+		"propsContent",
+		"propsList",
+		"propsLabel",
+		"propsIcon"
+	]
+});
+/** 紧凑分组弹出来的内容：标题加完整的导航项（里面不再紧凑） */
+var NavFlyoutContent = /*#__PURE__*/ _component((_props4, _ctx4) => {
+	const label = readonlyProp(_props4, "label");
+	const propsList = readonlyProp(_props4, "propsList");
+	childrenProp(_props4);
+	NavCompactContext.provide(() => false);
+	return () => {
+		let _slot5;
+		return createVNode(Fragment, null, [createVNode("span", css.attrs(navListStyles.sectionLabel), [label.value]), createVNode(FlexList, mergePartProps({
+			direction: "column",
+			gap: "xs"
+		}, propsList.value), _isSlot(_slot5 = forwardChildren(_props4)) ? _slot5 : { default: () => [_slot5] })]);
+	};
+}, {
+	name: "NavFlyoutContent",
+	props: ["label", "propsList"]
+});
+/** 未声明的属性落到外层 li 上 */
+/** 带小标题的一组导航链接（li > 标题 + ul）：一直展开，不能收起；要收起用 NavGroup */
+var NavSection = /*#__PURE__*/ _component((_props5, _ctx5) => {
+	const label = readonlyProp(_props5, "label");
+	const icon = readonlyProp(_props5, "icon");
+	const propsLabel = readonlyProp(_props5, "propsLabel");
+	const propsIcon = readonlyProp(_props5, "propsIcon");
+	const propsList = readonlyProp(_props5, "propsList");
+	childrenProp(_props5);
+	const rest = restProps(_props5, _ctx5, false);
+	const labelId = useId();
+	const compact = NavCompactContext.inject(() => false);
+	const iconOnly = () => compact() && icon.value != null;
+	return () => {
+		let _slot6;
+		return createVNode("li", mergeAttrs({ sx: navListStyles.section }, rest), [createVNode("span", mergeAttrs({ sx: [navListStyles.sectionLabel, css.select(() => iconOnly() && navListStyles.compactSection, true)] }, propsLabel.value), [icon.value && createVNode(Icon, mergePartProps({
+			icon: icon.value,
+			sx: navListStyles.sectionIcon
+		}, propsIcon.value), null), createVNode("span", mergeProps({ "id": labelId }, css.attrs(iconOnly() && visuallyHiddenStyles.hidden)), [label.value])]), createVNode(FlexList, mergePartProps({
+			direction: "column",
+			gap: "xs"
+		}, propsList.value, { "aria-labelledby": labelId }), _isSlot(_slot6 = forwardChildren(_props5)) ? _slot6 : { default: () => [_slot6] })]);
+	};
+}, {
+	name: "NavSection",
+	props: [
+		"label",
+		"icon",
+		"propsLabel",
+		"propsIcon",
+		"propsList"
+	]
+});
+//#endregion
+export { NavCompactContext, NavGroup, NavGroupContext, NavItem, NavList, NavSection, navListStyles };
+
+//# sourceMappingURL=NavList.js.map

package/dist/navigation/NavList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vtp_forwardChildren","_vtp_childrenProp","_vue_computed","_vtp_bindable","_vue_ref","_vtp_childrenStable","_Fragment"],"sources":["../../src/navigation/NavList.tsx"],"sourcesContent":["/**\n * 侧边导航，复合组件：NavList（nav > ul）> NavItem（链接）/ NavGroup（可展开的一组）/ NavSection（带小标题的一组，\n * 不能收起：文档站这类链接多、按主题分组的侧栏），里面再放 NavItem。\n * 当前页按路由适配的 isActive 判断（也可以用 active 指定），带 aria-current=\"page\" 与高亮；\n * 含当前页的分组自动展开。分组用 Collapsible（触发器带 aria-expanded / aria-controls）。\n *\n *   <NavList aria-label=\"后台\">\n *     <NavItem href=\"/\" icon={House}>概览</NavItem>\n *     <NavGroup label=\"订单\" icon={Package}>\n *       <NavItem href=\"/orders\">全部订单</NavItem>\n *       <NavItem href=\"/orders/refunds\">退款</NavItem>\n *     </NavGroup>\n *   </NavList>\n *\n * 用 vue-router 时 vueRouterAdapter(router, { match: 'prefix' }) 能让 /orders 在 /orders/42 页面也高亮。\n *\n * 紧凑（compact）：侧栏窄到只放得下图标时，各项只显示图标（文字留给读屏，悬停、聚焦时用 Tooltip 显示），\n * 小节标题换成它的图标（不能点）；分组也只剩图标，悬停、聚焦时子项从右边弹出来（HoverCard，完整的文字，\n * Tab 进入），组里有当前页时图标高亮。AppShell 的抽屉式侧栏拖窄时自动进入（NavCompactContext），\n * 也可以直接写 <NavList compact>。\n *\n * NavItem 的 badge 是计数角标（待办、未读）：展开时在文字后面，紧凑时是图标右上角的小圆点（读屏照样念出数目）。\n */\nimport { ChevronRight } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, useId, watch, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Badge } from '../base/Badge';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Indicator } from '../base/Indicator';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { Collapsible, type CollapsibleProps } from '../display/Collapsible';\nimport { HoverCard } from '../overlay/HoverCard';\nimport { Tooltip, type TooltipTriggerProps } from '../overlay/Tooltip';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { rippleHostStyles, useRipple } from '../utils/dom/ripple';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 分组向里面的项要的信息：哪些项是当前页（有当前页时自动展开） */\nexport interface NavGroupState {\n  /** 组内的一项报告自己是不是当前页（item 是这一项的标识） */\n  report(item: symbol, active: boolean): void;\n}\n\n/** NavGroup 的上下文：组内的项据此缩进；不在组内时为 null */\nexport const NavGroupContext = createContext<NavGroupState | null>('NavGroup');\n\n/** 导航是不是紧凑（只显示图标）：AppShell 按侧栏宽度提供，NavList 的 compact 可以覆盖 */\nexport const NavCompactContext = createContext<() => boolean>('NavCompact');\n\n/** NavList 的样式：nested、row、current、disabled、chevron、section、sectionLabel 等 */\nexport const navListStyles = css.create({\n  nested: { paddingInlineStart: '_lg', paddingTop: '_xs' },\n  // 链接与分组的触发器共用：列表行（itemStyles）之上，导航项更宽松、字重更重，平时是次要颜色\n  row: {\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n  },\n  // 当前页的颜色来自 itemStyles.current；悬停时也保持品牌色\n  current: { color: { default: '_accentText', ':hover': '_accentText' } },\n  disabled: { pointerEvents: 'none' },\n  chevron: { transition: `transform ${t.durations.md} ${t.easings.standard}` },\n  chevronOpen: { transform: 'rotate(90deg)' },\n  // 小节之间留出间隔，第一节贴着顶部\n  section: { marginBlockStart: { default: '_lg', ':first-child': 0 } },\n  sectionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    color: '_text',\n    fontSize: '_sm',\n    fontWeight: '_semibold',\n    letterSpacing: '_wide',\n  },\n  // 小节标题的图标只是标记，比链接的图标淡\n  sectionIcon: { color: '_textMuted', flexShrink: 0 },\n  // 紧凑：图标居中；小节标题只剩图标，上面一条细线与上一节隔开\n  compactRow: { justifyContent: 'center', paddingInline: 0 },\n  compactSection: {\n    justifyContent: 'center',\n    paddingInline: 0,\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  compactNested: { paddingInlineStart: 0 },\n  // 紧凑分组弹出的卡片：比侧栏宽，放得下完整的文字\n  flyout: { padding: '_xs', minWidth: '12em' },\n});\n\n// ─────────────── NavList ───────────────\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavListProps extends PartProps<'nav'> {\n  /** 紧凑：只显示图标；不写时跟随所在的 AppShell 侧栏（拖窄时紧凑） */\n  compact?: boolean;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  children?: VNodeChild;\n}\n\n/** 侧边导航（nav > ul），里面放 NavItem 与 NavGroup */\nexport const NavList = _component(({ compact, propsList, children, ...rest }: NavListProps) => {\n  const inherited = NavCompactContext.inject(() => false);\n  const isCompact = () => compact ?? inherited();\n  NavCompactContext.provide(isCompact);\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)} data-compact={isCompact() || undefined}>\n      <FlexList {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}>\n        {children}\n      </FlexList>\n    </nav>\n  );\n});\n\n// ─────────────── NavItem ───────────────\n\n/** 地址与当前页由组件管理 */\nexport type NavItemManaged = 'href' | 'aria-current';\n\n/** 未声明的属性落到链接（a）上 */\nexport interface NavItemProps extends PartProps<'a', NavItemManaged> {\n  /** 链接地址 */\n  href: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 是否是当前页；不写时按路由适配的 isActive 判断 */\n  active?: boolean;\n  /** 不可用：不能点、不能聚焦 */\n  disabled?: boolean;\n  /** 文字后面的内容（自定义的标记）；只是计数时用 badge */\n  end?: VNodeChild;\n  /** 计数角标（待办、未读）：展开时是文字后面的 Badge，紧凑时是图标右上角的小圆点；0 不显示 */\n  badge?: number;\n  /** 角标的色调，默认 danger */\n  badgeTone?: StatusTone;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 外层 li 的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 导航项（li > a）：当前页高亮并带 aria-current=\"page\" */\nexport const NavItem = _component(\n  ({\n    href,\n    icon,\n    active,\n    disabled = false,\n    end,\n    badge = 0,\n    badgeTone = 'danger',\n    ripple,\n    propsItem,\n    propsIcon,\n    propsLabel,\n    children,\n    ...rest\n  }: NavItemProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const group = NavGroupContext.inject(null);\n    const rippleHandlers = useRipple(() => ripple);\n    const current = _derived(active ?? router.isActive(href));\n    const compact = NavCompactContext.inject(() => false);\n    const id = Symbol('NavItem');\n\n    // 告诉所在的分组自己是不是当前页（分组据此自动展开）\n    if (group) {\n      watch(\n        () => current,\n        (value) => group.report(id, value),\n        { immediate: true },\n      );\n      onBeforeUnmount(() => group.report(id, false));\n    }\n\n    const iconOnly = () => compact() && icon != null;\n    // tooltip：只剩图标时 Tooltip 给触发器的属性（定位用的 ref、悬停与聚焦的事件）\n    const link = (tooltip?: TooltipTriggerProps) => (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            ...tooltip,\n            sx: [\n              itemStyles.row,\n              itemStyles.hoverable,\n              navListStyles.row,\n              focusRingStyles.visible,\n              rippleHostStyles.host,\n              iconOnly() && navListStyles.compactRow,\n              current && [itemStyles.current, navListStyles.current],\n              disabled && [itemStyles.disabled, navListStyles.disabled],\n            ],\n          },\n          rest,\n          {\n            href: disabled ? undefined : router.href(href),\n            'aria-current': current ? 'page' : undefined,\n            'aria-disabled': disabled || undefined,\n            // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转\n            onClick: (event: MouseEvent) => router.onClick(event, href),\n            ...rippleHandlers,\n          },\n        )}\n        data-state={current ? 'active' : 'inactive'}\n      >\n        {icon &&\n          (iconOnly() && badge > 0 ? (\n            // 紧凑：图标右上角一个小圆点（图标太小，叠不下数字）；读屏照样念出数目\n            <Indicator dot tone={badgeTone} label={lang.indicatorCount(badge)}>\n              <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n            </Indicator>\n          ) : (\n            <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n          ))}\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n            propsLabel,\n          )}\n        >\n          {children}\n        </span>\n        {!iconOnly() && end}\n        {!iconOnly() && badge > 0 && (\n          <Badge size=\"xs\" variant=\"solid\" tone={badgeTone} radius=\"full\">\n            {badge > 99 ? '99+' : badge}\n          </Badge>\n        )}\n      </a>\n    );\n\n    return () => (\n      <li {...mergeAttrs<'li'>({}, propsItem)}>\n        {iconOnly() ? (\n          // 只剩图标：名称在读屏的文字里，看的人悬停、聚焦时从提示里读\n          <Tooltip placement=\"right\" delay={200} trigger={link}>\n            {children}\n          </Tooltip>\n        ) : (\n          link()\n        )}\n      </li>\n    );\n  },\n);\n\n// ─────────────── NavGroup ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavGroupProps extends PartProps<'li'> {\n  /** 分组标题 */\n  label: VNodeChild;\n  /** 标题前的图标 */\n  icon?: IconData;\n  /** 是否展开：父级写 _open={x}；含当前页时自动展开 */\n  _open?: boolean;\n  /** 标题按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开区（Collapsible）的部件属性 */\n  propsContent?: Partial<CollapsibleProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 标题文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/** 可展开的导航分组（li > 按钮 + 子列表） */\nexport const NavGroup = _component(\n  ({\n    label,\n    icon,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsContent,\n    propsList,\n    propsLabel,\n    propsIcon,\n    children,\n    ...rest\n  }: NavGroupProps) => {\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    const activeItems = new Set<symbol>();\n    // 组里有当前页：紧凑时分组的图标也高亮\n    let hasCurrent = _state(false);\n    NavGroupContext.provide({\n      report(item, active) {\n        if (active) activeItems.add(item);\n        else activeItems.delete(item);\n        hasCurrent = activeItems.size > 0;\n        // 进入含当前页的分组时自动展开；离开时不自动收起（用户可能还想看）\n        if (activeItems.size > 0) open = true;\n      },\n    });\n\n    /** 紧凑时：只剩图标，悬停、聚焦时子项从右边弹出来（完整的文字，不再紧凑） */\n    function renderFlyout() {\n      return (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <HoverCard\n            placement=\"right-start\"\n            delay={150}\n            // 子项一直渲染：它们要报告自己是不是当前页，分组的图标才知道要不要高亮\n            lazy={false}\n            sx={navListStyles.flyout}\n            trigger={(props) => (\n              <ButtonBase\n                {...mergePartProps<ButtonBaseProps>(\n                  {\n                    sx: [\n                      itemStyles.row,\n                      itemStyles.hoverable,\n                      navListStyles.row,\n                      navListStyles.compactRow,\n                      hasCurrent && [itemStyles.current, navListStyles.current],\n                    ],\n                  },\n                  propsTrigger,\n                  props as Partial<ButtonBaseProps>,\n                )}\n                data-state={hasCurrent ? 'active' : 'inactive'}\n              >\n                <Icon {...mergePartProps<IconProps>({ icon: icon! }, propsIcon)} />\n                <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, propsLabel)}>\n                  {label}\n                </span>\n              </ButtonBase>\n            )}\n          >\n            <NavFlyoutContent label={label} propsList={propsList}>\n              {children}\n            </NavFlyoutContent>\n          </HoverCard>\n        </li>\n      );\n    }\n\n    return () =>\n      iconOnly() ? (\n        renderFlyout()\n      ) : (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <Collapsible\n            {...mergePartProps<CollapsibleProps>(\n              {\n                trigger: (props) => (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>(\n                      {\n                        sx: [\n                          itemStyles.row,\n                          itemStyles.hoverable,\n                          navListStyles.row,\n                          iconOnly() && navListStyles.compactRow,\n                        ],\n                      },\n                      propsTrigger,\n                      props,\n                    )}\n                  >\n                    {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n                    <span\n                      {...mergeAttrs<'span'>(\n                        { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n                        propsLabel,\n                      )}\n                    >\n                      {label}\n                    </span>\n                    {!iconOnly() && (\n                      <Icon\n                        icon={ChevronRight}\n                        flipInRtl\n                        sx={[navListStyles.chevron, open && navListStyles.chevronOpen]}\n                      />\n                    )}\n                  </ButtonBase>\n                ),\n              },\n              propsContent,\n            )}\n            _open={open}\n          >\n            <FlexList\n              {...mergePartProps<FlexProps<'ul'>>(\n                {\n                  direction: 'column',\n                  gap: 'xs',\n                  sx: [navListStyles.nested, compact() && navListStyles.compactNested],\n                },\n                propsList,\n              )}\n            >\n              {children}\n            </FlexList>\n          </Collapsible>\n        </li>\n      );\n  },\n);\n\n/** 紧凑分组弹出来的内容：标题加完整的导航项（里面不再紧凑） */\nconst NavFlyoutContent = _component(\n  ({\n    label,\n    propsList,\n    children,\n  }: {\n    label: VNodeChild;\n    propsList?: Partial<FlexProps<'ul'>>;\n    children?: VNodeChild;\n  }) => {\n    NavCompactContext.provide(() => false);\n    return () => (\n      <>\n        <span {...css.attrs(navListStyles.sectionLabel)}>{label}</span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}\n        >\n          {children}\n        </FlexList>\n      </>\n    );\n  },\n);\n\n// ─────────────── NavSection ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavSectionProps extends PartProps<'li'> {\n  /** 小节标题，同时是这组链接的无障碍名称 */\n  label: VNodeChild;\n  /** 标题前的图标：只是标记、不能点；紧凑时标题只剩它 */\n  icon?: IconData;\n  /** 标题的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 小节里的 NavItem */\n  children?: VNodeChild;\n}\n\n/** 带小标题的一组导航链接（li > 标题 + ul）：一直展开，不能收起；要收起用 NavGroup */\nexport const NavSection = _component(\n  ({ label, icon, propsLabel, propsIcon, propsList, children, ...rest }: NavSectionProps) => {\n    const labelId = useId();\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    return () => (\n      <li {...mergeAttrs<'li'>({ sx: navListStyles.section }, rest)}>\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [navListStyles.sectionLabel, iconOnly() && navListStyles.compactSection] },\n            propsLabel,\n          )}\n        >\n          {icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: navListStyles.sectionIcon }, propsIcon)}\n            />\n          )}\n          <span id={labelId} {...css.attrs(iconOnly() && visuallyHiddenStyles.hidden)}>\n            {label}\n          </span>\n        </span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList, {\n            'aria-labelledby': labelId,\n          })}\n        >\n          {children}\n        </FlexList>\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/PageJump.d.ts

@@ -0,0 +1,27 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type NumberFieldProps } from '../input/NumberField';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 未声明的属性落到外层 div 上 */
+export interface PageJumpProps extends PartProps<'div'> {
+    /** 当前页：父级写 _page={page}，跳页时写回 */
+    _page?: number;
+    /** 总页数：输入的页码夹在 1–pageCount */
+    pageCount: number;
+    /** 字号档位，默认 sm（同 Pagination） */
+    size?: TextSize;
+    /** 输入框前文字的部件属性 */
+    propsBefore?: PartProps<'span'>;
+    /** 输入框（NumberField）的部件属性 */
+    propsInput?: Partial<NumberFieldProps>;
+    /** 输入框后文字的部件属性 */
+    propsAfter?: PartProps<'span'>;
+}
+/** PageJump 的样式：root、input、text */
+export declare const pageJumpStyles: Readonly<{
+    input: css.CompiledStyles;
+    root: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 跳页：输入页码后跳过去 */
+export declare const PageJump: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PageJumpProps>;

package/dist/navigation/PageJump.js

@@ -0,0 +1,77 @@
+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 { NumberField } from "../input/NumberField.js";
+import { createVNode, mergeProps, ref, watch } 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/PageJump.tsx
+/** 未声明的属性落到外层 div 上 */
+/** PageJump 的样式：root、input、text */
+var pageJumpStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	input: { width: "4.5em" },
+	text: {
+		color: "_textMuted",
+		whiteSpace: "nowrap"
+	}
+});
+/** 跳页：输入页码后跳过去 */
+var PageJump = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const page = bindable(_props, "_page", () => 1, _ctx.emit);
+	const pageCount = readonlyProp(_props, "pageCount");
+	const size = readonlyProp(_props, "size", "sm");
+	const propsBefore = readonlyProp(_props, "propsBefore");
+	const propsInput = readonlyProp(_props, "propsInput");
+	const propsAfter = readonlyProp(_props, "propsAfter");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let draft = ref(null);
+	watch(() => draft.value, (target) => {
+		if (target == null) return;
+		const next = clamp(Math.round(target), 1, Math.max(1, pageCount.value));
+		if (next !== page.value) page.value = next;
+		draft.value = null;
+	});
+	return () => createVNode("div", mergeAttrs({ sx: [pageJumpStyles.root, fontSizeStyles[size.value]] }, rest), [
+		lang.pageJumpBefore && createVNode("span", mergeAttrs({
+			sx: pageJumpStyles.text,
+			"aria-hidden": true
+		}, propsBefore.value), [lang.pageJumpBefore]),
+		createVNode(NumberField, mergeProps(mergePartProps({
+			"aria-label": lang.pageJumpLabel,
+			min: 1,
+			max: Math.max(1, pageCount.value),
+			stepper: false,
+			propsRoot: { sx: pageJumpStyles.input }
+		}, propsInput.value), {
+			"_value": draft.value,
+			"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => draft.value = $event)
+		}), null),
+		lang.pageJumpAfter && createVNode("span", mergeAttrs({
+			sx: pageJumpStyles.text,
+			"aria-hidden": true
+		}, propsAfter.value), [lang.pageJumpAfter])
+	]);
+}, {
+	name: "PageJump",
+	props: [
+		"_page",
+		"onUpdate:_page",
+		"pageCount",
+		"size",
+		"propsBefore",
+		"propsInput",
+		"propsAfter"
+	]
+});
+//#endregion
+export { PageJump, pageJumpStyles };
+
+//# sourceMappingURL=PageJump.js.map

package/dist/navigation/PageJump.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageJump.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageJump.tsx"],"sourcesContent":["/**\n * 跳页：分页的配套组件，“跳至 [  ] 页”，回车或失焦后跳过去（夹在 1–pageCount），输入框随后清空。\n *\n *   <PageJump _page={page} pageCount={32} />\n *\n * 基于 NumberField：未声明的属性落到外层 div 上；输入框用 propsInput。读屏念输入框的名称（语言包的“跳到第几页”），\n * 前后的“跳至”“页”只是视觉上的提示。部件：Root（div）、Before、Input（NumberField）、After。\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 { NumberField, type NumberFieldProps } from '../input/NumberField';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PageJumpProps extends PartProps<'div'> {\n  /** 当前页：父级写 _page={page}，跳页时写回 */\n  _page?: number;\n  /** 总页数：输入的页码夹在 1–pageCount */\n  pageCount: number;\n  /** 字号档位，默认 sm（同 Pagination） */\n  size?: TextSize;\n  /** 输入框前文字的部件属性 */\n  propsBefore?: PartProps<'span'>;\n  /** 输入框（NumberField）的部件属性 */\n  propsInput?: Partial<NumberFieldProps>;\n  /** 输入框后文字的部件属性 */\n  propsAfter?: PartProps<'span'>;\n}\n\n/** PageJump 的样式：root、input、text */\nexport const pageJumpStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  input: { width: '4.5em' },\n  text: { color: '_textMuted', whiteSpace: 'nowrap' },\n});\n\n/** 跳页：输入页码后跳过去 */\nexport const PageJump = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    size = 'sm',\n    propsBefore,\n    propsInput,\n    propsAfter,\n    ...rest\n  }: PageJumpProps) => {\n    const lang = useLang();\n    // 输入框只在跳之前暂存页码，跳完清空\n    let draft = _state<number | null>(null);\n    watch(\n      () => draft,\n      (target) => {\n        if (target == null) return;\n        const next = clamp(Math.round(target), 1, Math.max(1, pageCount));\n        if (next !== page) page = next;\n        draft = null;\n      },\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [pageJumpStyles.root, fontSizeStyles[size]] }, rest)}>\n        {lang.pageJumpBefore && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsBefore)}\n          >\n            {lang.pageJumpBefore}\n          </span>\n        )}\n        <NumberField\n          {...mergePartProps<NumberFieldProps>(\n            {\n              'aria-label': lang.pageJumpLabel,\n              min: 1,\n              max: Math.max(1, pageCount),\n              stepper: false,\n              propsRoot: { sx: pageJumpStyles.input },\n            },\n            propsInput,\n          )}\n          _value={draft}\n        />\n        {lang.pageJumpAfter && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsAfter)}\n          >\n            {lang.pageJumpAfter}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAkCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACjE,OAAO,EAAE,OAAO,QAAQ;CACxB,MAAM;EAAE,OAAO;EAAc,YAAY;CAAS;AACpD,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAQqB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAPK,GAAC,KAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAElB,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAIR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,QAAKC,IAAyB,IAAI;CACtC,YACE,MAAA,QACC,WAAW;EACV,IAAI,UAAU,MAAM;EACpB,MAAM,OAAO,MAAM,KAAK,MAAM,MAAM,GAAG,GAAG,KAAK,IAAI,GAAC,UAAA,KAAW,CAAC;EAChE,IAAI,SAAI,KAAA,OAAW,KAAA,QAAO;EAC1B,MAAA,QAAQ;CACV,CACF;CAEA,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,CAAC,eAAe,MAAM,eAAc,KAAA,MAAM,EAAE,GAAG,IAAI,GAAC;EAClF,KAAK,kBAAcA,YAAA,QAEZ,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,YAAA,KAAa,GAAC,CAEpF,KAAK,cAAc,CAAA;EAEvBA,YAAA,aAAAC,WAEK,eACF;GACE,cAAc,KAAK;GACnB,KAAK;GACL,KAAK,KAAK,IAAI,GAAC,UAAA,KAAW;GAC1B,SAAS;GACT,WAAW,EAAE,IAAI,eAAe,MAAM;EACxC,GAAC,WAAA,KAEH,GAAC;GAAA,UAAA,MAAA;GAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,CAAA,GAAA,IAAA;EAGF,KAAK,iBAAaD,YAAA,QAEX,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,WAAA,KAAY,GAAC,CAEnF,KAAK,aAAa,CAAA;CAEtB,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/PageSizeSelect.d.ts

@@ -0,0 +1,19 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type SelectProps } from '../input/Select';
+/** 未声明的属性落到 Select 上 */
+export interface PageSizeSelectProps extends Omit<Partial<SelectProps>, '_value' | 'items' | 'selectionMode'> {
+    /** 每页条数：父级写 _value={size} */
+    _value?: number;
+    /** 可选的条数，默认 [10, 20, 50, 100] */
+    options?: readonly number[];
+    /** 用户换了条数后调用（通常把页码回到第 1 页） */
+    onSizeChange?: (size: number) => void;
+}
+/** PageSizeSelect 的样式：stack、option、hidden */
+export declare const pageSizeSelectStyles: Readonly<{
+    hidden: css.CompiledStyles;
+    option: css.CompiledStyles;
+    stack: css.CompiledStyles;
+}>;
+/** 每页条数选择（Select） */
+export declare const PageSizeSelect: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PageSizeSelectProps>;

package/dist/navigation/PageSizeSelect.js

@@ -0,0 +1,65 @@
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/navigation/PageSizeSelect.tsx
+/** 单选的 Select 属性 */
+/** 未声明的属性落到 Select 上 */
+/** PageSizeSelect 的样式：stack、option、hidden */
+var pageSizeSelectStyles = css.create({
+	stack: { display: "inline-grid" },
+	option: { gridArea: "1 / 1" },
+	hidden: { visibility: "hidden" }
+});
+/** 每页条数选择（Select） */
+var PageSizeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => 10, _ctx.emit);
+	const options = readonlyProp(_props, "options", () => [
+		10,
+		20,
+		50,
+		100
+	]);
+	const onSizeChange = readonlyProp(_props, "onSizeChange");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	let selected = ref(String(untrack(() => value.value)));
+	watch(() => value.value, (size) => selected.value = String(size));
+	watch(() => selected.value, (next) => {
+		const size = Number(next);
+		if (size === value.value) return;
+		value.value = size;
+		onSizeChange.value?.(size);
+	});
+	return () => createVNode(Select, mergeProps(mergePartProps({
+		items: options.value.map((size) => ({
+			value: String(size),
+			label: lang.pageSizeOption(size)
+		})),
+		selectionMode: "single",
+		"aria-label": lang.pageSizeLabel,
+		size: "sm",
+		renderValue: () => createVNode("span", css.attrs(pageSizeSelectStyles.stack), [options.value.map((size) => createVNode("span", mergeProps({
+			"key": size,
+			"aria-hidden": size !== value.value || void 0
+		}, css.attrs(pageSizeSelectStyles.option, size !== value.value && pageSizeSelectStyles.hidden)), [lang.pageSizeOption(size)]))])
+	}, rest), {
+		"_value": selected.value,
+		"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => selected.value = $event)
+	}), null);
+}, {
+	name: "PageSizeSelect",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"options",
+		"onSizeChange"
+	]
+});
+//#endregion
+export { PageSizeSelect, pageSizeSelectStyles };
+
+//# sourceMappingURL=PageSizeSelect.js.map