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

package/dist/navigation/SkipLink.js

@@ -0,0 +1,58 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/navigation/SkipLink.tsx
+/** 未声明的属性落到 a 上 */
+/** SkipLink 的样式：root */
+var skipLinkStyles = css.create({ root: {
+	position: "fixed",
+	insetBlockStart: "_sm",
+	insetInlineStart: "_sm",
+	zIndex: 100,
+	paddingBlock: "_sm",
+	paddingInline: "_md",
+	borderRadius: "_md",
+	backgroundColor: "_surfaceRaised",
+	boxShadow: "_lg",
+	color: "_accentText",
+	fontWeight: "_medium",
+	textDecoration: "none",
+	opacity: {
+		default: 0,
+		":focus": 1
+	},
+	translate: {
+		default: "0 calc(-100% - 1em)",
+		":focus": "none"
+	},
+	transition: `translate ${t.durations.sm} ${t.easings.standard}, opacity ${t.durations.sm} ${t.easings.standard}`
+} });
+/** 跳到正文的链接（a）：Tab 聚焦时出现 */
+var SkipLink = /*#__PURE__*/ _component((_props, _ctx) => {
+	const href = readonlyProp(_props, "href");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	function onClick(event) {
+		const target = document.getElementById(href.value.slice(1));
+		if (!target) return;
+		event.preventDefault();
+		target.focus();
+		target.scrollIntoView({ block: "start" });
+	}
+	return () => createVNode("a", mergeAttrs({ sx: [skipLinkStyles.root, focusRingStyles.visible] }, rest, {
+		href: href.value,
+		onClick
+	}), [children.value ?? lang.skipToContent]);
+}, {
+	name: "SkipLink",
+	props: ["href"]
+});
+//#endregion
+export { SkipLink, skipLinkStyles };
+
+//# sourceMappingURL=SkipLink.js.map

package/dist/navigation/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/navigation/SkipLink.tsx"],"sourcesContent":["/**\n * 跳到正文的链接（WCAG 2.4.1 跳过重复内容）：页面第一个可聚焦元素，平时看不见，Tab 聚焦时出现在左上角。\n * AppShell 已经自带；不用 AppShell 时放在页面最前面：\n *\n *   <SkipLink href=\"#main\" />\n *   …\n *   <main id=\"main\" tabindex={-1}>…</main>\n *\n * 点击时直接把焦点移到目标上（不改地址栏的 hash，不经过路由）：之后再按 Tab 从正文继续。\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 { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 a 上 */\nexport interface SkipLinkProps extends PartProps<'a', 'href'> {\n  /** 目标（正文容器）的锚点，如 #main；目标要能聚焦（tabindex=\"-1\"） */\n  href: `#${string}`;\n  /** 链接文字，默认取语言包（跳到正文） */\n  children?: VNodeChild;\n}\n\n/** SkipLink 的样式：root */\nexport const skipLinkStyles = css.create({\n  // 移出视口而不是 display: none：读屏照常能读到，Tab 能聚焦\n  root: {\n    position: 'fixed',\n    insetBlockStart: '_sm',\n    insetInlineStart: '_sm',\n    // 盖在粘性顶栏之上\n    zIndex: 100,\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    boxShadow: '_lg',\n    color: '_accentText',\n    fontWeight: '_medium',\n    textDecoration: 'none',\n    // 移出视口之外再透明：阴影不会从顶边漏出来\n    opacity: { default: 0, ':focus': 1 },\n    translate: { default: '0 calc(-100% - 1em)', ':focus': 'none' },\n    transition: `translate ${t.durations.sm} ${t.easings.standard}, opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n});\n\n/** 跳到正文的链接（a）：Tab 聚焦时出现 */\nexport const SkipLink = _component(({ href, children, ...rest }: SkipLinkProps) => {\n  const lang = useLang();\n  function onClick(event: MouseEvent) {\n    const target = document.getElementById(href.slice(1));\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n    target.scrollIntoView({ block: 'start' });\n  }\n  return () => (\n    <a\n      {...mergeAttrs<'a'>({ sx: [skipLinkStyles.root, focusRingStyles.visible] }, rest, {\n        href,\n        onClick,\n      })}\n    >\n      {children ?? lang.skipToContent}\n    </a>\n  );\n});\n"],"mappings":";;;;;;;;;;AA2BA,IAAa,iBAAiB,IAAI,OAAO,EAEvC,MAAM;CACJ,UAAU;CACV,iBAAiB;CACjB,kBAAkB;CAElB,QAAQ;CACR,cAAc;CACd,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,WAAW;CACX,OAAO;CACP,YAAY;CACZ,gBAAgB;CAEhB,SAAS;EAAE,SAAS;EAAG,UAAU;CAAE;CACnC,WAAW;EAAE,SAAS;EAAuB,UAAU;CAAO;CAC9D,YAAY,aAAa,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,YAAa,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;AACxG,EACF,CAAC;;AAGD,IAAa,WAAW,0BAAW,QAAA,SAAgD;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA1B,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC3D,MAAM,OAAO,QAAQ;CACrB,SAAS,QAAQ,OAAmB;EAClC,MAAM,SAAS,SAAS,eAAe,KAAA,MAAK,MAAM,CAAC,CAAC;EACpD,IAAI,CAAC,QAAQ;EACb,MAAM,eAAe;EACrB,OAAO,MAAM;EACb,OAAO,eAAe,EAAE,OAAO,QAAQ,CAAC;CAC1C;CACA,aAAOC,YAAA,KAEC,WAAgB,EAAE,IAAI,CAAC,eAAe,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAM;EAChF,MAAI,KAAA;EACJ;CACF,CAAC,GAAC,CAED,SAAA,SAAY,KAAK,aAAa,CAAA;AAGrC,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,MAAA;AAAA,CAAA"}

package/dist/navigation/Steps.d.ts

@@ -0,0 +1,93 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 步骤条方向 */
+export interface StepsOrientations {
+    /** 横排（默认） */
+    horizontal: unknown;
+    /** 竖排：步骤多、说明长时；步骤之间有竖的连接线 */
+    vertical: unknown;
+}
+/** 步骤的状态 */
+export interface StepStates {
+    /** 已完成：对勾、品牌色 */
+    complete: unknown;
+    /** 当前：aria-current="step" */
+    current: unknown;
+    /** 未开始 */
+    upcoming: unknown;
+    /** 出错：警示图标、危险色 */
+    error: unknown;
+}
+/** 步骤的状态：已完成、当前、未开始、出错 */
+export type StepState = keyof StepStates;
+/** 一个步骤 */
+export interface StepItem {
+    /** 唯一的 key；不写时用位置 */
+    key?: string;
+    /** 标题 */
+    title: VNodeChild;
+    /** 说明（标题下面的小字） */
+    description?: VNodeChild;
+    /** 代替序号的图标；已完成时仍显示对勾，出错时仍显示警示图标 */
+    icon?: IconData;
+    /** 状态；不写时按 current 推出 */
+    status?: StepState;
+    /** 地址：已完成的这一步渲染成链接（走路由适配），点了跳过去 */
+    href?: string;
+    /** 不可点回（即使已完成、有 href 或 navigable） */
+    disabled?: boolean;
+}
+/** 未声明的属性落到 ol 上；aria-label 是步骤条的名称 */
+export interface StepsProps extends PartProps<'ol'> {
+    /** 步骤 */
+    items: readonly StepItem[];
+    /** 当前步骤的序号，从 0 开始：父级可以写 _current={x}，配合 navigable 点回已完成的步骤 */
+    _current?: number;
+    /** 方向，默认 horizontal */
+    orientation?: keyof StepsOrientations;
+    /** 字号档位：圆圈、文字随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 已完成的步骤可以点击回去：点了写回 current */
+    navigable?: boolean;
+    /** 每个步骤（li）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'li'> | ((item: StepItem, index: number) => PartProps<'li'>);
+    /** 序号圆圈的部件属性 */
+    propsIndicator?: PartProps<'span'>;
+    /** 可点回的步骤外层（按钮，或有 href 时的链接）的部件属性 */
+    propsTrigger?: Partial<ButtonBaseProps> & PartProps<'a'>;
+    /** 文字区（标题与说明的容器）的部件属性 */
+    propsText?: PartProps<'span'>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'span'>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'span'>;
+    /** 步骤之间连接线的部件属性 */
+    propsConnector?: PartProps<'span'>;
+}
+/** Steps 的样式：item、itemVertical、trigger、link、indicator、text、title、description、connector 等 */
+export declare const stepsStyles: Readonly<{
+    connector: css.CompiledStyles;
+    connectorDone: css.CompiledStyles;
+    connectorVertical: css.CompiledStyles;
+    description: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemVertical: css.CompiledStyles;
+    link: css.CompiledStyles;
+    text: css.CompiledStyles;
+    title: css.CompiledStyles;
+    trigger: css.CompiledStyles;
+}>;
+/** Steps 的样式：complete、current、upcoming、error */
+export declare const stepsStateStyles: Readonly<{
+    complete: css.CompiledStyles;
+    current: css.CompiledStyles;
+    error: css.CompiledStyles;
+    upcoming: css.CompiledStyles;
+}>;
+/** 步骤条：已完成、当前、未开始、出错；已完成的步骤可以点回去或是链接 */
+export declare const Steps: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StepsProps>;

package/dist/navigation/Steps.js

@@ -0,0 +1,198 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check } from "@lucide/icons";
+//#region src/navigation/Steps.tsx
+/**
+* 步骤条（ol）：多步流程里的位置（下单、注册、配置向导、任务的流转）。当前步骤带 aria-current="step"，
+* 已完成的步骤显示对勾（Lucide 的 Check），出错的步骤显示警示图标；已完成、未开始、出错另有读屏文字，不只靠颜色。
+*
+*   <Steps current={1} items={[{ title: '填写信息' }, { title: '确认订单' }, { title: '完成' }]} />
+*   <Steps _current={step} items={items} navigable />               已完成的步骤可以点回去
+*   <Steps current={2} items={[{ title: '概览', href: '/task/1' }, …]} />   已完成的步骤是链接
+*
+* 每一步的状态默认按 current 推出（之前已完成、当前、之后未开始），item 的 status 可以改：出错的一步、非线性的流程。
+*/
+/** 步骤条方向 */
+/** 步骤的状态 */
+/** 步骤的状态：已完成、当前、未开始、出错 */
+/** 一个步骤 */
+/** 未声明的属性落到 ol 上；aria-label 是步骤条的名称 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Steps 的样式：item、itemVertical、trigger、link、indicator、text、title、description、connector 等 */
+var stepsStyles = css.create({
+	item: {
+		display: "flex",
+		flexGrow: 1,
+		flexBasis: 0,
+		alignItems: "flex-start",
+		gap: "_sm",
+		minWidth: 0
+	},
+	itemVertical: {
+		flexGrow: 0,
+		flexBasis: "auto",
+		position: "relative"
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: "_sm",
+		borderRadius: "_sm",
+		textAlign: "start"
+	},
+	link: {
+		color: "inherit",
+		textDecorationLine: "none"
+	},
+	indicator: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		width: "2em",
+		height: "2em",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderRadius: "_full",
+		fontSize: "0.93em",
+		fontWeight: "_semibold",
+		transition: `background-color ${t.durations.md} ${t.easings.standard}, border-color ${t.durations.md} ${t.easings.standard}, color ${t.durations.md} ${t.easings.standard}`
+	},
+	text: {
+		display: "grid",
+		gap: "_xs",
+		paddingTop: "0.3em",
+		minWidth: 0
+	},
+	title: { fontWeight: "_medium" },
+	description: {
+		color: "_textMuted",
+		fontSize: "0.93em"
+	},
+	connector: {
+		flexGrow: 1,
+		alignSelf: "center",
+		minWidth: "_space.lg",
+		height: "_borderWidths.xs",
+		backgroundColor: "_border",
+		transition: `background-color ${t.durations.md} ${t.easings.standard}`
+	},
+	connectorVertical: {
+		position: "absolute",
+		insetInlineStart: "0.93em",
+		insetBlockStart: `calc(1.86em + ${t.space.xs})`,
+		insetBlockEnd: `calc(-1 * ${t.space.lg} + ${t.space.xs})`,
+		width: "_borderWidths.xs",
+		height: "auto",
+		minWidth: 0,
+		alignSelf: "stretch",
+		marginInlineStart: `calc(${t.borderWidths.xs} / -2)`
+	},
+	connectorDone: { backgroundColor: "_accent" }
+});
+/** Steps 的样式：complete、current、upcoming、error */
+var stepsStateStyles = css.create({
+	complete: {
+		borderColor: "_accent",
+		backgroundColor: "_accent",
+		color: "_accentContrast"
+	},
+	current: {
+		borderColor: "_accent",
+		color: "_accentText"
+	},
+	upcoming: {
+		borderColor: "_border",
+		color: "_textMuted"
+	},
+	error: {
+		borderColor: "_danger",
+		backgroundColor: "_dangerSoft",
+		color: "_dangerText"
+	}
+});
+/** 步骤条：已完成、当前、未开始、出错；已完成的步骤可以点回去或是链接 */
+var Steps = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const current = bindable(_props, "_current", () => 0, _ctx.emit);
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const size = readonlyProp(_props, "size");
+	const navigable = readonlyProp(_props, "navigable", false);
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsIndicator = readonlyProp(_props, "propsIndicator");
+	const propsTrigger = readonlyProp(_props, "propsTrigger");
+	const propsText = readonlyProp(_props, "propsText");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsConnector = readonlyProp(_props, "propsConnector");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const router = useRouterLink();
+	return () => {
+		let _slot2;
+		const vertical = orientation.value === "vertical";
+		return createVNode(FlexOrderedList, mergeProps(mergePartProps({
+			direction: vertical ? "column" : "row",
+			gap: vertical ? "lg" : "sm",
+			sx: size.value && fontSizeStyles[size.value]
+		}, rest), { "data-orientation": orientation.value }), _isSlot(_slot2 = items.value.map((item, index) => {
+			let _slot;
+			const state = item.status ?? (index < current.value ? "complete" : index === current.value ? "current" : "upcoming");
+			const own = typeof propsItem.value === "function" ? propsItem.value(item, index) : propsItem.value;
+			const content = [createVNode("span", mergeAttrs({ sx: stepsStyles.indicator }, propsIndicator.value, {
+				sx: stepsStateStyles[state],
+				"aria-hidden": true
+			}), [state === "complete" ? createVNode(Icon, { "icon": Check }, null) : state === "error" ? createVNode(Icon, { "icon": statusIcons.danger }, null) : item.icon ? createVNode(Icon, { "icon": item.icon }, null) : index + 1]), createVNode("span", mergeAttrs({ sx: stepsStyles.text }, propsText.value), [createVNode("span", mergeAttrs({ sx: stepsStyles.title }, propsTitle.value), [item.title, state !== "current" && createVNode(VisuallyHidden, null, _isSlot(_slot = lang.stepState(state)) ? _slot : { default: () => [_slot] })]), item.description != null && createVNode("span", mergeAttrs({ sx: stepsStyles.description }, propsDescription.value), [item.description])])];
+			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: [
+				stepsStyles.trigger,
+				stepsStyles.link,
+				focusRingStyles.visible
+			] }, propsTrigger.value, {
+				href: router.href(item.href),
+				onClick: (event) => router.onClick(event, item.href)
+			}), [content]) : button ? createVNode(ButtonBase, mergePartProps({ sx: stepsStyles.trigger }, propsTrigger.value, { onClick: () => current.value = index }), _isSlot(content) ? content : { default: () => [content] }) : content, index < items.value.length - 1 && createVNode("span", mergeAttrs({ sx: [stepsStyles.connector, vertical && stepsStyles.connectorVertical] }, propsConnector.value, {
+				sx: state === "complete" && stepsStyles.connectorDone,
+				"aria-hidden": true
+			}), null)]);
+		})) ? _slot2 : { default: () => [_slot2] });
+	};
+}, {
+	name: "Steps",
+	props: [
+		"items",
+		"_current",
+		"onUpdate:_current",
+		"orientation",
+		"size",
+		"navigable",
+		"propsItem",
+		"propsIndicator",
+		"propsTrigger",
+		"propsText",
+		"propsTitle",
+		"propsDescription",
+		"propsConnector"
+	]
+});
+//#endregion
+export { Steps, stepsStateStyles, stepsStyles };
+
+//# sourceMappingURL=Steps.js.map

package/dist/navigation/Steps.js.map

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

package/dist/navigation/TableOfContents.d.ts

@@ -0,0 +1,32 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type TextProps } from '../base/Text';
+import { type FlexProps } from '../layout/Flex';
+import { type HeadingEntry } from '../utils/dom/scroll-spy';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到 nav 上；原生的 title 属性（悬停提示）让给目录的标题 */
+export interface TableOfContentsProps extends PartProps<'nav', 'aria-labelledby' | 'title'> {
+    /** 目录项：标题的 id、文字与级别（2 级起，每深一级多缩进一档） */
+    items: readonly HeadingEntry[];
+    /** 目录的标题，同时是导航的名称；默认取语言包（本页目录） */
+    title?: VNodeChild;
+    /** 页面在哪个容器里滚动；不写时是窗口 */
+    scrollRoot?: HTMLElement | null;
+    /** 标题的部件属性 */
+    propsTitle?: Partial<TextProps>;
+    /** 列表（ul）的部件属性 */
+    propsList?: Partial<FlexProps<'ul'>>;
+    /** 链接的部件属性 */
+    propsLink?: PartProps<'a'>;
+}
+/** TableOfContents 的样式：title、list、indicator、link、current */
+export declare const tableOfContentsStyles: Readonly<{
+    readonly title: css.CompiledStyles;
+    readonly list: css.CompiledStyles;
+    readonly indicator: css.CompiledStyles;
+    readonly link: css.CompiledStyles;
+    readonly current: css.CompiledStyles;
+    readonly indent: (level: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 本页目录（nav）：滚动时高亮当前节 */
+export declare const TableOfContents: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TableOfContentsProps>;

package/dist/navigation/TableOfContents.js

@@ -0,0 +1,119 @@
+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 { toElement } from "../utils/dom/element.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/navigation/TableOfContents.tsx
+/** 未声明的属性落到 nav 上；原生的 title 属性（悬停提示）让给目录的标题 */
+/** TableOfContents 的样式：title、list、indicator、link、current */
+var tableOfContentsStyles = css.create({
+	title: {
+		display: "block",
+		marginBlockEnd: "_sm"
+	},
+	list: {
+		position: "relative",
+		borderInlineStartWidth: "_xs",
+		borderInlineStartStyle: "solid",
+		borderInlineStartColor: "_border"
+	},
+	indicator: {
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,
+		width: "_borderWidths.sm",
+		borderRadius: "_full",
+		backgroundColor: "_accent"
+	},
+	link: {
+		display: "block",
+		paddingBlock: "_xs",
+		paddingInlineEnd: "_xs",
+		borderRadius: "_xs",
+		color: {
+			default: "_textMuted",
+			":hover": "_text"
+		},
+		fontSize: "_sm",
+		lineHeight: "_snug",
+		textDecoration: "none",
+		transition: `color ${t.durations.sm} ${t.easings.standard}`
+	},
+	current: { color: {
+		default: "_accentText",
+		":hover": "_accentText"
+	} },
+	indent: (level) => ({ paddingInlineStart: `calc(${Math.max(level - 1, 1)} * 0.75em)` })
+});
+/** 本页目录（nav）：滚动时高亮当前节 */
+var TableOfContents = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const title = readonlyProp(_props, "title");
+	const scrollRoot = readonlyProp(_props, "scrollRoot");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsLink = readonlyProp(_props, "propsLink");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const titleId = useId();
+	let list = shallowRef(null);
+	let indicator = shallowRef(null);
+	const current = useScrollSpy(() => ({
+		ids: items.value.map((item) => item.id),
+		root: scrollRoot.value
+	}));
+	useActiveIndicator(() => ({
+		container: list.value,
+		indicator: indicator.value,
+		active: "[aria-current=\"location\"]",
+		axis: "vertical",
+		value: current.value
+	}));
+	return () => createVNode("nav", mergeAttrs({}, rest, { "aria-labelledby": titleId }), [createVNode(Text$1, mergeProps(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({
+		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 }), {
+			"ref": indicator,
+			"aria-hidden": "true"
+		}), null), items.value.map((item) => createVNode("li", { "key": item.id }, [createVNode("a", mergeAttrs({ sx: [
+			tableOfContentsStyles.link,
+			css.bind(tableOfContentsStyles.indent, () => [item.level]),
+			current.value === item.id && tableOfContentsStyles.current,
+			focusRingStyles.visible
+		] }, propsLink.value, {
+			href: `#${item.id}`,
+			"aria-current": current.value === item.id ? "location" : void 0
+		}), [item.label])]))],
+		$stable: true
+	})]);
+}, {
+	name: "TableOfContents",
+	props: [
+		"items",
+		"title",
+		"scrollRoot",
+		"propsTitle",
+		"propsList",
+		"propsLink"
+	]
+});
+//#endregion
+export { TableOfContents, tableOfContentsStyles };
+
+//# sourceMappingURL=TableOfContents.js.map

package/dist/navigation/TableOfContents.js.map

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