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

package/dist/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,59 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconButtonProps } from '../base/IconButton';
+import { type IconData } from '../base/Icon';
+import { type LinkProps } from '../base/Link';
+import { type MenuProps } from '../overlay/Menu';
+import { type PartProps } from '../utils/props';
+import { type FlexProps } from '../layout/Flex';
+/** 一级路径 */
+export interface BreadcrumbItem {
+    /** 唯一的 key；不写时用 href，再没有时用位置 */
+    key?: string;
+    /** 显示的文字 */
+    label: VNodeChild;
+    /** 地址；最后一项（当前页）不需要 */
+    href?: string;
+    /** 文字前的图标 */
+    icon?: IconData;
+}
+/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */
+export interface BreadcrumbsProps extends PartProps<'nav'> {
+    /** 路径，从根到当前页；最后一项是当前页 */
+    items: readonly BreadcrumbItem[];
+    /** 分隔符，默认是右向的 chevron 图标 */
+    separator?: VNodeChild;
+    /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */
+    maxItems?: number;
+    /** 列表（ol）的部件属性 */
+    propsList?: Partial<FlexProps<'ol'>>;
+    /** 每一项（li）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);
+    /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */
+    propsCollapsedItem?: PartProps<'li'>;
+    /** 链接的部件属性 */
+    propsLink?: Partial<LinkProps>;
+    /** 每一项文字（图标加文字）的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 当前页（最后一项）的部件属性 */
+    propsCurrent?: PartProps<'span'>;
+    /** 分隔符的部件属性 */
+    propsSeparator?: PartProps<'span'>;
+    /** 折叠按钮（菜单的触发器）的部件属性 */
+    propsExpand?: Partial<IconButtonProps>;
+    /** 被折叠各级的菜单的部件属性 */
+    propsMenu?: Partial<MenuProps>;
+    /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */
+    onNavigate?: (item: BreadcrumbItem, index: number) => void;
+}
+/** Breadcrumbs 的样式：list、item、current、separator、label、expand */
+export declare const breadcrumbsStyles: Readonly<{
+    current: css.CompiledStyles;
+    expand: css.CompiledStyles;
+    item: css.CompiledStyles;
+    label: css.CompiledStyles;
+    list: css.CompiledStyles;
+    separator: css.CompiledStyles;
+}>;
+/** 面包屑：链接 + 分隔符，最后一项是当前页 */
+export declare const Breadcrumbs: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<BreadcrumbsProps>;

package/dist/navigation/Breadcrumbs.js

@@ -0,0 +1,150 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { Link } from "../base/Link.js";
+import { FlexOrderedList } from "../layout/Flex.js";
+import { Menu as Menu$1, MenuItem, MenuLinkItem } from "../overlay/Menu.js";
+import { createVNode, isVNode, mergeProps } 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 { ChevronRight, Ellipsis } from "@lucide/icons";
+//#region src/navigation/Breadcrumbs.tsx
+/**
+* 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current="page"，不是链接）。
+* 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。
+*
+*   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />
+*
+* 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），
+* 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。
+*
+* 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，
+* 点了交给它；当前一级标 aria-current="location"（是“在哪一级”，不是“哪一页”）。
+*
+*   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />
+*/
+/** 一级路径 */
+/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Breadcrumbs 的样式：list、item、current、separator、label、expand */
+var breadcrumbsStyles = css.create({
+	list: { fontSize: "_sm" },
+	item: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		minWidth: 0
+	},
+	current: {
+		color: "_text",
+		fontWeight: "_medium"
+	},
+	separator: {
+		display: "inline-flex",
+		color: "_textMuted"
+	},
+	label: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs"
+	},
+	expand: {
+		width: "1.75em",
+		minHeight: "1.75em"
+	}
+});
+/** 面包屑：链接 + 分隔符，最后一项是当前页 */
+var Breadcrumbs = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const separator = readonlyProp(_props, "separator");
+	const maxItems = readonlyProp(_props, "maxItems");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsCollapsedItem = readonlyProp(_props, "propsCollapsedItem");
+	const propsLink = readonlyProp(_props, "propsLink");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsCurrent = readonlyProp(_props, "propsCurrent");
+	const propsSeparator = readonlyProp(_props, "propsSeparator");
+	const propsExpand = readonlyProp(_props, "propsExpand");
+	const propsMenu = readonlyProp(_props, "propsMenu");
+	const onNavigate = readonlyProp(_props, "onNavigate");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	return () => {
+		let _slot;
+		const shown = maxItems.value != null && items.value.length > maxItems.value ? [
+			items.value[0],
+			"collapsed",
+			...items.value.slice(-2)
+		] : [...items.value];
+		const last = items.value.length - 1;
+		const sep = () => createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.separator }, propsSeparator.value, { "aria-hidden": true }), [separator.value ?? createVNode(Icon, {
+			"icon": ChevronRight,
+			"flipInRtl": true
+		}, null)]);
+		return createVNode("nav", mergeAttrs({ "aria-label": lang.breadcrumbs }, rest), [createVNode(FlexOrderedList, mergePartProps({
+			wrap: true,
+			align: "center",
+			gap: "xs",
+			sx: breadcrumbsStyles.list
+		}, propsList.value), _isSlot(_slot = shown.map((entry, position) => {
+			if (entry === "collapsed") return createVNode("li", mergeProps({ "key": "collapsed" }, mergeAttrs({ sx: breadcrumbsStyles.item }, propsCollapsedItem.value)), [createVNode(Menu$1, mergePartProps({
+				lazy: false,
+				trigger: (props) => createVNode(IconButton, mergePartProps({
+					sx: breadcrumbsStyles.expand,
+					size: "sm",
+					icon: Ellipsis,
+					"aria-label": lang.breadcrumbsExpand
+				}, propsExpand.value, props), null)
+			}, propsMenu.value), {
+				default: () => [items.value.slice(1, -2).map((hidden, offset) => hidden.href != null ? createVNode(MenuLinkItem, {
+					"key": offset,
+					"href": hidden.href,
+					"icon": hidden.icon
+				}, { default: () => [hidden.label] }) : createVNode(MenuItem, {
+					"key": offset,
+					"icon": hidden.icon,
+					"disabled": !onNavigate.value,
+					"onAction": () => onNavigate.value?.(hidden, offset + 1)
+				}, { default: () => [hidden.label] }))],
+				$stable: true
+			}), sep()]);
+			const index = items.value.indexOf(entry);
+			const own = typeof propsItem.value === "function" ? propsItem.value(entry, index) : propsItem.value;
+			const label = createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.label }, propsLabel.value), [entry.icon && createVNode(Icon, { "icon": entry.icon }, null), entry.label]);
+			return createVNode("li", mergeProps({ "key": entry.key ?? entry.href ?? index }, mergeAttrs({ sx: breadcrumbsStyles.item }, own)), [index === last ? createVNode("span", mergeAttrs({ sx: breadcrumbsStyles.current }, propsCurrent.value, { "aria-current": onNavigate.value ? "location" : "page" }), [label]) : entry.href != null ? createVNode(Link, mergePartProps({
+				tone: "muted",
+				underline: "hover",
+				href: entry.href
+			}, propsLink.value), _isSlot(label) ? label : { default: () => [label] }) : onNavigate.value ? createVNode(Button, {
+				"variant": "link",
+				"onClick": () => onNavigate.value(entry, index)
+			}, _isSlot(label) ? label : { default: () => [label] }) : label, position < shown.length - 1 && sep()]);
+		})) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	name: "Breadcrumbs",
+	props: [
+		"items",
+		"separator",
+		"maxItems",
+		"propsList",
+		"propsItem",
+		"propsCollapsedItem",
+		"propsLink",
+		"propsLabel",
+		"propsCurrent",
+		"propsSeparator",
+		"propsExpand",
+		"propsMenu",
+		"onNavigate"
+	]
+});
+//#endregion
+export { Breadcrumbs, breadcrumbsStyles };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/navigation/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Menu"],"sources":["../../src/navigation/Breadcrumbs.tsx"],"sourcesContent":["/**\n * 面包屑（nav > ol）：当前页在站点层级里的位置。最后一项是当前页（aria-current=\"page\"，不是链接）。\n * 链接用 Link（站内链接经路由适配跳转），分隔符默认是 Lucide 的 ChevronRight，从右到左排版时翻转。\n *\n *   <Breadcrumbs items={[{ label: '首页', href: '/' }, { label: '订单', href: '/orders' }, { label: '#1024' }]} />\n *\n * 路径太长时用 maxItems 折叠中间部分：折叠处是一个菜单按钮，被折叠的各级在菜单里（链接菜单项），\n * 同 Radix Themes / shadcn 的做法；展开整条路径会把布局撑乱，菜单不会。\n *\n * 应用内的层级（文件夹、组织架构的下钻）没有地址：给 onNavigate 时没有 href 的各级是链接样式的按钮，\n * 点了交给它；当前一级标 aria-current=\"location\"（是“在哪一级”，不是“哪一页”）。\n *\n *   <Breadcrumbs items={path.map((dept) => ({ key: dept.id, label: dept.name }))} onNavigate={(_, index) => (path = path.slice(0, index + 1))} />\n */\nimport { 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 type { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Link, type LinkProps } from '../base/Link';\nimport { useLang } from '../config/context';\nimport { Menu, MenuItem, MenuLinkItem, type MenuProps } from '../overlay/Menu';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\n\n/** 一级路径 */\nexport interface BreadcrumbItem {\n  /** 唯一的 key；不写时用 href，再没有时用位置 */\n  key?: string;\n  /** 显示的文字 */\n  label: VNodeChild;\n  /** 地址；最后一项（当前页）不需要 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（面包屑） */\nexport interface BreadcrumbsProps extends PartProps<'nav'> {\n  /** 路径，从根到当前页；最后一项是当前页 */\n  items: readonly BreadcrumbItem[];\n  /** 分隔符，默认是右向的 chevron 图标 */\n  separator?: VNodeChild;\n  /** 超过这么多项时折叠中间部分（保留第一项与最后两项），被折叠的各级放进菜单 */\n  maxItems?: number;\n  /** 列表（ol）的部件属性 */\n  propsList?: Partial<FlexProps<'ol'>>;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: BreadcrumbItem, index: number) => PartProps<'li'>);\n  /** 折叠处那一项（li，里面是折叠按钮与菜单）的部件属性 */\n  propsCollapsedItem?: PartProps<'li'>;\n  /** 链接的部件属性 */\n  propsLink?: Partial<LinkProps>;\n  /** 每一项文字（图标加文字）的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 当前页（最后一项）的部件属性 */\n  propsCurrent?: PartProps<'span'>;\n  /** 分隔符的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  /** 折叠按钮（菜单的触发器）的部件属性 */\n  propsExpand?: Partial<IconButtonProps>;\n  /** 被折叠各级的菜单的部件属性 */\n  propsMenu?: Partial<MenuProps>;\n  /** 应用内的层级导航：给了时没有 href 的各级是按钮，点了调用它（index 是在 items 里的位置） */\n  onNavigate?: (item: BreadcrumbItem, index: number) => void;\n}\n\n/** Breadcrumbs 的样式：list、item、current、separator、label、expand */\nexport const breadcrumbsStyles = css.create({\n  // 横排、换行、间距由 FlexOrderedList 给\n  list: { fontSize: '_sm' },\n  item: { display: 'inline-flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  current: { color: '_text', fontWeight: '_medium' },\n  separator: { display: 'inline-flex', color: '_textMuted' },\n  label: { display: 'inline-flex', alignItems: 'center', gap: '_xs' },\n  expand: { width: '1.75em', minHeight: '1.75em' },\n});\n\n/** 面包屑：链接 + 分隔符，最后一项是当前页 */\nexport const Breadcrumbs = _component(\n  ({\n    items,\n    separator,\n    maxItems,\n    propsList,\n    propsItem,\n    propsCollapsedItem,\n    propsLink,\n    propsLabel,\n    propsCurrent,\n    propsSeparator,\n    propsExpand,\n    propsMenu,\n    onNavigate,\n    ...rest\n  }: BreadcrumbsProps) => {\n    const lang = useLang();\n\n    return () => {\n      const collapse = maxItems != null && items.length > maxItems;\n      // 折叠时保留第一项与最后两项，中间换成展开按钮\n      const shown: (BreadcrumbItem | 'collapsed')[] = collapse\n        ? [items[0]!, 'collapsed', ...items.slice(-2)]\n        : [...items];\n      const last = items.length - 1;\n      // 每处各生成一个节点：同一个 VNode 不能放在多个位置\n      const sep = () => (\n        <span\n          {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.separator }, propsSeparator, {\n            'aria-hidden': true,\n          })}\n        >\n          {separator ?? <Icon icon={ChevronRight} flipInRtl />}\n        </span>\n      );\n\n      return (\n        <nav {...mergeAttrs<'nav'>({ 'aria-label': lang.breadcrumbs }, rest)}>\n          <FlexOrderedList\n            {...mergePartProps<FlexProps<'ol'>>(\n              { wrap: true, align: 'center', gap: 'xs', sx: breadcrumbsStyles.list },\n              propsList,\n            )}\n          >\n            {shown.map((entry, position) => {\n              if (entry === 'collapsed') {\n                return (\n                  <li\n                    key=\"collapsed\"\n                    {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, propsCollapsedItem)}\n                  >\n                    <Menu\n                      {...mergePartProps<MenuProps>(\n                        {\n                          // 被折叠的各级链接一直在 DOM 里：页内搜索、爬虫找得到；一页只有一个，不必延迟\n                          lazy: false,\n                          trigger: (props) => (\n                            <IconButton\n                              {...mergePartProps<IconButtonProps>(\n                                {\n                                  sx: breadcrumbsStyles.expand,\n                                  size: 'sm',\n                                  icon: Ellipsis,\n                                  'aria-label': lang.breadcrumbsExpand,\n                                },\n                                propsExpand,\n                                props,\n                              )}\n                            />\n                          ),\n                        },\n                        propsMenu,\n                      )}\n                    >\n                      {items.slice(1, -2).map((hidden, offset) =>\n                        hidden.href != null ? (\n                          <MenuLinkItem key={offset} href={hidden.href} icon={hidden.icon}>\n                            {hidden.label}\n                          </MenuLinkItem>\n                        ) : (\n                          <MenuItem\n                            key={offset}\n                            icon={hidden.icon}\n                            disabled={!onNavigate}\n                            onAction={() => onNavigate?.(hidden, offset + 1)}\n                          >\n                            {hidden.label}\n                          </MenuItem>\n                        ),\n                      )}\n                    </Menu>\n                    {sep()}\n                  </li>\n                );\n              }\n              const index = items.indexOf(entry);\n              const own = typeof propsItem === 'function' ? propsItem(entry, index) : propsItem;\n              const label = (\n                <span {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.label }, propsLabel)}>\n                  {entry.icon && <Icon icon={entry.icon} />}\n                  {entry.label}\n                </span>\n              );\n              return (\n                <li\n                  key={entry.key ?? entry.href ?? index}\n                  {...mergeAttrs<'li'>({ sx: breadcrumbsStyles.item }, own)}\n                >\n                  {index === last ? (\n                    <span\n                      {...mergeAttrs<'span'>({ sx: breadcrumbsStyles.current }, propsCurrent, {\n                        'aria-current': onNavigate ? 'location' : 'page',\n                      })}\n                    >\n                      {label}\n                    </span>\n                  ) : entry.href != null ? (\n                    <Link\n                      {...mergePartProps<LinkProps>(\n                        { tone: 'muted', underline: 'hover', href: entry.href },\n                        propsLink,\n                      )}\n                    >\n                      {label}\n                    </Link>\n                  ) : onNavigate ? (\n                    <Button variant=\"link\" onClick={() => onNavigate(entry, index)}>\n                      {label}\n                    </Button>\n                  ) : (\n                    label\n                  )}\n                  {position < shown.length - 1 && sep()}\n                </li>\n              );\n            })}\n          </FlexOrderedList>\n        </nav>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/NavBar.d.ts

@@ -0,0 +1,35 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */
+export interface NavBarItem {
+    /** 文字 */
+    label: string;
+    /** 链接地址 */
+    href?: string;
+    /** 文字前的图标 */
+    icon?: IconData;
+    /** 下拉菜单里的子项 */
+    children?: readonly NavBarItem[];
+    /** 计数角标（待办、未读），0 不显示 */
+    badge?: number;
+    /** 不可用 */
+    disabled?: boolean;
+}
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+export interface NavBarProps extends PartProps<'nav'> {
+    /** 各项 */
+    items: readonly NavBarItem[];
+    /** 列表（ul）的部件属性 */
+    propsList?: PartProps<'ul'>;
+}
+/** NavBar 的样式：list、item、link、current、badge、more */
+export declare const navBarStyles: Readonly<{
+    current: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    item: css.CompiledStyles;
+    link: css.CompiledStyles;
+    list: css.CompiledStyles;
+}>;
+/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */
+export declare const NavBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavBarProps>;

package/dist/navigation/NavBar.js

@@ -0,0 +1,182 @@
+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 { Icon } from "../base/Icon.js";
+import { Badge } from "../base/Badge.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { Menu as Menu$1, MenuGroup, MenuLinkItem } from "../overlay/Menu.js";
+import { useOverflowItems } from "../utils/dom/overflow.js";
+import { createVNode, isVNode, mergeProps, shallowRef } 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 { ChevronDown, Ellipsis } from "@lucide/icons";
+//#region src/navigation/NavBar.tsx
+/**
+* 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。
+* 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。
+*
+*   <NavBar
+*     items={[
+*       { label: '工作台', href: '/' },
+*       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },
+*       { label: '报表', href: '/reports', badge: 3 },
+*     ]}
+*     aria-label="主导航"
+*   />
+*
+* - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current="page" 与下划线；子项是当前页时它的菜单按钮也高亮。
+* - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。
+* - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。
+*
+* 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。
+*/
+/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** NavBar 的样式：list、item、link、current、badge、more */
+var navBarStyles = css.create({
+	list: {
+		position: "relative",
+		display: "flex",
+		alignItems: "stretch",
+		columnGap: "_xs",
+		minWidth: 0,
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	},
+	item: {
+		display: "flex",
+		flexShrink: 0
+	},
+	link: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		paddingInline: "_md",
+		borderRadius: "_md",
+		color: {
+			default: "_textMuted",
+			":hover": "_text"
+		},
+		fontWeight: "_medium",
+		whiteSpace: "nowrap",
+		textDecoration: "none",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		},
+		boxShadow: "none",
+		transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`
+	},
+	current: {
+		color: {
+			default: "_accentText",
+			":hover": "_accentText"
+		},
+		boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,
+		borderEndStartRadius: 0,
+		borderEndEndRadius: 0
+	},
+	disabled: {
+		opacity: "_disabled",
+		pointerEvents: "none"
+	}
+});
+/** 子项里有没有当前页 */
+var hasActive = (item, isActive) => item.href != null && isActive(item.href) || (item.children ?? []).some((child) => hasActive(child, isActive));
+/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */
+var NavBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const propsList = readonlyProp(_props, "propsList");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const router = useRouterLink();
+	let list = shallowRef(null);
+	const overflow = useOverflowItems({
+		container: () => list.value,
+		count: () => items.value.length
+	});
+	const badge = (count = 0) => count > 0 && createVNode(Badge, {
+		"size": "xs",
+		"variant": "solid",
+		"tone": "danger",
+		"radius": "full"
+	}, { default: () => [count > 99 ? "99+" : count] });
+	/** 菜单里的链接（下拉菜单、“更多”菜单共用） */
+	const menuLinks = (children) => children.map((child) => createVNode(MenuLinkItem, {
+		"key": child.href ?? child.label,
+		"href": child.href ?? "",
+		"icon": child.icon,
+		"disabled": child.disabled,
+		"aria-current": child.href && router.isActive(child.href) ? "page" : void 0
+	}, { default: () => [child.label] }));
+	function renderItem(item) {
+		const current = hasActive(item, router.isActive);
+		const sx = [
+			navBarStyles.link,
+			focusRingStyles.visible,
+			current && navBarStyles.current,
+			item.disabled && navBarStyles.disabled
+		];
+		const content = [
+			item.icon && createVNode(Icon, { "icon": item.icon }, null),
+			item.label,
+			badge(item.badge)
+		];
+		if (item.children?.length) {
+			let _slot;
+			return createVNode(Menu$1, { "trigger": (props) => createVNode(ButtonBase, mergeProps(props, {
+				"sx": sx,
+				"disabled": item.disabled,
+				"data-state": current ? "active" : "inactive"
+			}), { default: () => [content, createVNode(Icon, { "icon": ChevronDown }, null)] }) }, _isSlot(_slot = menuLinks(item.children)) ? _slot : { default: () => [_slot] });
+		}
+		return createVNode("a", mergeProps(css.attrs(...sx), {
+			"href": item.disabled || item.href == null ? void 0 : router.href(item.href),
+			"aria-current": current ? "page" : void 0,
+			"aria-disabled": item.disabled || void 0,
+			"data-state": current ? "active" : "inactive",
+			"onClick": (event) => item.href && router.onClick(event, item.href)
+		}), [content]);
+	}
+	/** “更多”菜单：收起来的各项，有子项的按分组列出 */
+	function renderMore() {
+		let _slot3;
+		const hidden = items.value.slice(overflow.visible);
+		const current = hidden.some((item) => hasActive(item, router.isActive));
+		return createVNode(Menu$1, {
+			"placement": "bottom-end",
+			"trigger": (props) => createVNode(ButtonBase, mergeProps(props, {
+				"sx": [
+					navBarStyles.link,
+					focusRingStyles.visible,
+					current && navBarStyles.current
+				],
+				"aria-label": lang.navBarMore
+			}), {
+				default: () => [createVNode(Icon, { "icon": Ellipsis }, null)],
+				$stable: true
+			})
+		}, _isSlot(_slot3 = hidden.map((item) => {
+			let _slot2;
+			return item.children?.length ? createVNode(MenuGroup, {
+				"key": item.label,
+				"label": item.label
+			}, _isSlot(_slot2 = menuLinks(item.children)) ? _slot2 : { default: () => [_slot2] }) : menuLinks([item]);
+		})) ? _slot3 : { default: () => [_slot3] });
+	}
+	return () => createVNode("nav", mergeAttrs({}, rest), [createVNode("ul", mergeAttrs({ sx: navBarStyles.list }, propsList.value, { ref: list }), [items.value.map((item, index) => createVNode("li", mergeProps({ "key": item.href ?? item.label }, css.attrs(navBarStyles.item), overflow.itemProps(index)), [renderItem(item)])), createVNode("li", mergeProps(css.attrs(navBarStyles.item), overflow.restProps()), [renderMore()])])]);
+}, {
+	name: "NavBar",
+	props: ["items", "propsList"]
+});
+//#endregion
+export { NavBar, navBarStyles };
+
+//# sourceMappingURL=NavBar.js.map

package/dist/navigation/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","Menu","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 横向导航（顶部菜单）：一行链接，有子项的是下拉菜单；放不下时后面的收进“更多”菜单。后台的顶栏、门户的主导航。\n * 参考 Ant Design Menu 的 horizontal 模式（溢出收进“…”）。侧边的多级导航用 NavList。\n *\n *   <NavBar\n *     items={[\n *       { label: '工作台', href: '/' },\n *       { label: '采购', children: [{ label: '采购单', href: '/po' }, { label: '供应商', href: '/suppliers' }] },\n *       { label: '报表', href: '/reports', badge: 3 },\n *     ]}\n *     aria-label=\"主导航\"\n *   />\n *\n * - 当前页按路由适配的 isActive 判断（同 NavList），链接带 aria-current=\"page\" 与下划线；子项是当前页时它的菜单按钮也高亮。\n * - 下拉菜单是 Menu（↑↓ 移动、Esc 关闭回到按钮），菜单项是链接（MenuLinkItem）。\n * - 放不下：useOverflowItems 量出前几项，其余收进“更多”（菜单里有子项的项按分组列出）；藏起来的项不占位、读屏与 Tab 跳过。\n *\n * 部件：Root（nav）、List（ul）、Item（li）、Link（a）、Trigger（有子项时的按钮）、More（“更多”按钮）。\n */\nimport { ChevronDown, 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 { Badge } from '../base/Badge';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Menu, MenuGroup, MenuLinkItem } from '../overlay/Menu';\nimport { useRouterLink } from '../utils/dom/link';\nimport { useOverflowItems } from '../utils/dom/overflow';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 横向导航的一项：有 href 是链接，有 children 是下拉菜单（一层） */\nexport interface NavBarItem {\n  /** 文字 */\n  label: string;\n  /** 链接地址 */\n  href?: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 下拉菜单里的子项 */\n  children?: readonly NavBarItem[];\n  /** 计数角标（待办、未读），0 不显示 */\n  badge?: number;\n  /** 不可用 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavBarProps extends PartProps<'nav'> {\n  /** 各项 */\n  items: readonly NavBarItem[];\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n}\n\n/** NavBar 的样式：list、item、link、current、badge、more */\nexport const navBarStyles = css.create({\n  // 一行：放不下的项由 useOverflowItems 移出排版（容器要 position: relative，间距用 column-gap）\n  list: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'stretch',\n    columnGap: '_xs',\n    minWidth: 0,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  item: { display: 'flex', flexShrink: 0 },\n  link: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n    whiteSpace: 'nowrap',\n    textDecoration: 'none',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    // 当前页的下划线画在底边（与 Tabs 的下划线同色）\n    boxShadow: 'none',\n    transition: `color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  current: {\n    color: { default: '_accentText', ':hover': '_accentText' },\n    boxShadow: `inset 0 calc(-1 * ${t.borderWidths.sm}) 0 ${t.colors.accent}`,\n    borderEndStartRadius: 0,\n    borderEndEndRadius: 0,\n  },\n  disabled: { opacity: '_disabled', pointerEvents: 'none' },\n});\n\n/** 子项里有没有当前页 */\nconst hasActive = (item: NavBarItem, isActive: (href: string) => boolean): boolean =>\n  (item.href != null && isActive(item.href)) ||\n  (item.children ?? []).some((child) => hasActive(child, isActive));\n\n/** 横向导航：一行链接与下拉菜单，放不下的收进“更多” */\nexport const NavBar = _component(({ items, propsList, ...rest }: NavBarProps) => {\n  const lang = useLang();\n  const router = useRouterLink();\n  let list = _state.raw<HTMLElement | null>(null);\n  const overflow = useOverflowItems({ container: () => list, count: () => items.length });\n\n  const badge = (count = 0) =>\n    count > 0 && (\n      <Badge size=\"xs\" variant=\"solid\" tone=\"danger\" radius=\"full\">\n        {count > 99 ? '99+' : count}\n      </Badge>\n    );\n\n  /** 菜单里的链接（下拉菜单、“更多”菜单共用） */\n  const menuLinks = (children: readonly NavBarItem[]) =>\n    children.map((child) => (\n      <MenuLinkItem\n        key={child.href ?? child.label}\n        href={child.href ?? ''}\n        icon={child.icon}\n        disabled={child.disabled}\n        aria-current={child.href && router.isActive(child.href) ? 'page' : undefined}\n      >\n        {child.label}\n      </MenuLinkItem>\n    ));\n\n  function renderItem(item: NavBarItem) {\n    const current = hasActive(item, router.isActive);\n    const sx = [\n      navBarStyles.link,\n      focusRingStyles.visible,\n      current && navBarStyles.current,\n      item.disabled && navBarStyles.disabled,\n    ];\n    const content = [item.icon && <Icon icon={item.icon} />, item.label, badge(item.badge)];\n    if (item.children?.length) {\n      return (\n        <Menu\n          trigger={(props) => (\n            <ButtonBase\n              {...props}\n              sx={sx}\n              disabled={item.disabled}\n              data-state={current ? 'active' : 'inactive'}\n            >\n              {content}\n              <Icon icon={ChevronDown} />\n            </ButtonBase>\n          )}\n        >\n          {menuLinks(item.children)}\n        </Menu>\n      );\n    }\n    return (\n      <a\n        {...css.attrs(...sx)}\n        href={item.disabled || item.href == null ? undefined : router.href(item.href)}\n        aria-current={current ? 'page' : undefined}\n        aria-disabled={item.disabled || undefined}\n        data-state={current ? 'active' : 'inactive'}\n        onClick={(event: MouseEvent) => item.href && router.onClick(event, item.href)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  /** “更多”菜单：收起来的各项，有子项的按分组列出 */\n  function renderMore() {\n    const hidden = items.slice(overflow.visible);\n    const current = hidden.some((item) => hasActive(item, router.isActive));\n    return (\n      <Menu\n        placement=\"bottom-end\"\n        trigger={(props) => (\n          <ButtonBase\n            {...props}\n            sx={[navBarStyles.link, focusRingStyles.visible, current && navBarStyles.current]}\n            aria-label={lang.navBarMore}\n          >\n            <Icon icon={Ellipsis} />\n          </ButtonBase>\n        )}\n      >\n        {hidden.map((item) =>\n          item.children?.length ? (\n            <MenuGroup key={item.label} label={item.label}>\n              {menuLinks(item.children)}\n            </MenuGroup>\n          ) : (\n            menuLinks([item])\n          ),\n        )}\n      </Menu>\n    );\n  }\n\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)}>\n      <ul {...mergeAttrs<'ul'>({ sx: navBarStyles.list }, propsList, { ref: _toRef(list) })}>\n        {items.map((item, index) => (\n          <li\n            key={item.href ?? item.label}\n            {...css.attrs(navBarStyles.item)}\n            {...overflow.itemProps(index)}\n          >\n            {renderItem(item)}\n          </li>\n        ))}\n        <li {...css.attrs(navBarStyles.item)} {...overflow.restProps()}>\n          {renderMore()}\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}

package/dist/navigation/NavList.d.ts

@@ -0,0 +1,112 @@
+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, type IconProps } from '../base/Icon';
+import { type CollapsibleProps } from '../display/Collapsible';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import { type FlexProps } from '../layout/Flex';
+/** 分组向里面的项要的信息：哪些项是当前页（有当前页时自动展开） */
+export interface NavGroupState {
+    /** 组内的一项报告自己是不是当前页（item 是这一项的标识） */
+    report(item: symbol, active: boolean): void;
+}
+/** NavGroup 的上下文：组内的项据此缩进；不在组内时为 null */
+export declare const NavGroupContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<NavGroupState | null>;
+/** 导航是不是紧凑（只显示图标）：AppShell 按侧栏宽度提供，NavList 的 compact 可以覆盖 */
+export declare const NavCompactContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<() => boolean>;
+/** NavList 的样式：nested、row、current、disabled、chevron、section、sectionLabel 等 */
+export declare const navListStyles: Readonly<{
+    chevron: css.CompiledStyles;
+    chevronOpen: css.CompiledStyles;
+    compactNested: css.CompiledStyles;
+    compactRow: css.CompiledStyles;
+    compactSection: css.CompiledStyles;
+    current: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    flyout: css.CompiledStyles;
+    nested: css.CompiledStyles;
+    row: css.CompiledStyles;
+    section: css.CompiledStyles;
+    sectionIcon: css.CompiledStyles;
+    sectionLabel: css.CompiledStyles;
+}>;
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+export interface NavListProps extends PartProps<'nav'> {
+    /** 紧凑：只显示图标；不写时跟随所在的 AppShell 侧栏（拖窄时紧凑） */
+    compact?: boolean;
+    /** 列表（ul）的部件属性 */
+    propsList?: Partial<FlexProps<'ul'>>;
+    children?: VNodeChild;
+}
+/** 侧边导航（nav > ul），里面放 NavItem 与 NavGroup */
+export declare const NavList: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavListProps>;
+/** 地址与当前页由组件管理 */
+export type NavItemManaged = 'href' | 'aria-current';
+/** 未声明的属性落到链接（a）上 */
+export interface NavItemProps extends PartProps<'a', NavItemManaged> {
+    /** 链接地址 */
+    href: string;
+    /** 文字前的图标 */
+    icon?: IconData;
+    /** 是否是当前页；不写时按路由适配的 isActive 判断 */
+    active?: boolean;
+    /** 不可用：不能点、不能聚焦 */
+    disabled?: boolean;
+    /** 文字后面的内容（自定义的标记）；只是计数时用 badge */
+    end?: VNodeChild;
+    /** 计数角标（待办、未读）：展开时是文字后面的 Badge，紧凑时是图标右上角的小圆点；0 不显示 */
+    badge?: number;
+    /** 角标的色调，默认 danger */
+    badgeTone?: StatusTone;
+    /** 按下时的波纹；不写时沿用全局配置 */
+    ripple?: boolean;
+    /** 外层 li 的部件属性 */
+    propsItem?: PartProps<'li'>;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    children?: VNodeChild;
+}
+/** 导航项（li > a）：当前页高亮并带 aria-current="page" */
+export declare const NavItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavItemProps>;
+/** 未声明的属性落到外层 li 上 */
+export interface NavGroupProps extends PartProps<'li'> {
+    /** 分组标题 */
+    label: VNodeChild;
+    /** 标题前的图标 */
+    icon?: IconData;
+    /** 是否展开：父级写 _open={x}；含当前页时自动展开 */
+    _open?: boolean;
+    /** 标题按钮的部件属性 */
+    propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;
+    /** 展开区（Collapsible）的部件属性 */
+    propsContent?: Partial<CollapsibleProps>;
+    /** 里面的列表（ul）的部件属性 */
+    propsList?: Partial<FlexProps<'ul'>>;
+    /** 标题文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 标题图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    children?: VNodeChild;
+}
+/** 可展开的导航分组（li > 按钮 + 子列表） */
+export declare const NavGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavGroupProps>;
+/** 未声明的属性落到外层 li 上 */
+export interface NavSectionProps extends PartProps<'li'> {
+    /** 小节标题，同时是这组链接的无障碍名称 */
+    label: VNodeChild;
+    /** 标题前的图标：只是标记、不能点；紧凑时标题只剩它 */
+    icon?: IconData;
+    /** 标题的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 标题图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 里面的列表（ul）的部件属性 */
+    propsList?: Partial<FlexProps<'ul'>>;
+    /** 小节里的 NavItem */
+    children?: VNodeChild;
+}
+/** 带小标题的一组导航链接（li > 标题 + ul）：一直展开，不能收起；要收起用 NavGroup */
+export declare const NavSection: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavSectionProps>;