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

package/dist/navigation/NavList.js.map

@@ -1 +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  // 多栏排版（AppShell 的上下抽屉）时一个小节不被拆到两栏\n  section: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    marginBlockStart: { default: '_lg', ':first-child': 0 },\n    breakInside: 'avoid',\n  },\n  // 标题行的内边距、图标与间距和链接行同一套（随所在字号），图标与文字才和下面的项上下对齐；只有文字小一档、加粗\n  sectionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    color: '_text',\n  },\n  sectionText: { fontSize: '_sm', fontWeight: '_semibold', letterSpacing: '_wide' },\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\n            id={labelId}\n            {...css.attrs(navListStyles.sectionText, iconOnly() && visuallyHiddenStyles.hidden)}\n          >\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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"}
+{"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 { 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  // 多栏排版（AppShell 的上下抽屉）时一个小节不被拆到两栏\n  section: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    marginBlockStart: { default: '_lg', ':first-child': 0 },\n    breakInside: 'avoid',\n  },\n  // 标题行的内边距、图标与间距和链接行同一套（随所在字号），图标与文字才和下面的项上下对齐；只有文字小一档、加粗\n  sectionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    color: '_text',\n  },\n  sectionText: { fontSize: '_sm', fontWeight: '_semibold', letterSpacing: '_wide' },\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\n            id={labelId}\n            {...css.attrs(navListStyles.sectionText, iconOnly() && visuallyHiddenStyles.hidden)}\n          >\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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/navigation/PageJump.js

@@ -5,7 +5,7 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { NumberField } from "../input/NumberField.js";
 import { createVNode, ref, watch } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PageJump.tsx
 /** 未声明的属性落到外层 div 上 */
 /** PageJump 的样式：root、input、text */

package/dist/navigation/PageJump.js.map

@@ -1 +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,cAEK,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"}
+{"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 { 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,cAEK,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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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'> {

package/dist/navigation/PageSizeSelect.js

@@ -3,7 +3,7 @@ import { mergePartProps } from "../utils/props.js";
 import { Select } from "../input/Select.js";
 import { createVNode, ref, watch } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PageSizeSelect.tsx
 /** 单选的 Select 属性 */
 /** 未声明的属性落到 Select 上 */

package/dist/navigation/PageSizeSelect.js.map

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

package/dist/navigation/Pager.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 一侧的链接 */

package/dist/navigation/Pager.js

@@ -6,7 +6,7 @@ import { interactionTransitions } from "../utils/style/transitions.js";
 import { useRouterLink } from "../utils/dom/link.js";
 import { createVNode } from "vue";
 import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ArrowLeft, ArrowRight } from "@lucide/icons";
 //#region src/navigation/Pager.tsx
 /**

package/dist/navigation/Pager.js.map

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

package/dist/navigation/Pagination.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type ButtonProps } from '../base/Button';
 import { type IconButtonProps } from '../base/IconButton';
 import { type IconLinkButtonProps } from '../base/IconLinkButton';

package/dist/navigation/Pagination.js

@@ -11,7 +11,7 @@ import { FlexList } from "../layout/Flex.js";
 import { paginationItems } from "../utils/data/pagination.js";
 import { computed, createVNode, isVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronLeft, ChevronRight, Ellipsis } from "@lucide/icons";
 //#region src/navigation/Pagination.tsx
 /**

package/dist/navigation/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAqCA,IAAa,mBAAmB,IAAI,OAAO;CACzC,MAAM;EAAE,SAAS;EAAQ,YAAY;EAAU,UAAU;EAAQ,KAAK;CAAM;CAE5E,MAAM;EAAE,UAAU,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EAAK,eAAe;CAAM;CACxF,UAAU;EACR,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACtD,OAAO;CACT;CACA,OAAO,EAAE,OAAO,aAAa;CAC7B,SAAS,EAAE,oBAAoB,eAAe;AAChD,CAAC;;AAGD,IAAa,aAAa,0BACxB,QAAA,SAiBuB;CAAA,MAAA,OAAAC,SAAA,QAAA,eAhBG,GAAC,KAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAGd,EAAE;CAAA,MAAA,WAAAA,aAAA,QAAA,YACF,CAAC;CAAA,MAAA,aAAAA,aAAA,QAAA,cACC,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,aACF,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAEV,IAAI;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAOR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAKC,eAAY,KAAK,IAAI,GAAG,UAAA,SAAa,KAAK,MAAM,MAAA,SAAS,KAAC,SAAA,KAAY,CAAC,CAAC;CAEnF,MAAM,UAAOA,eAAY,MAAK,KAAA,OAAO,GAAC,MAAA,KAAO,CAAC;CAE9C,SAAS,GAAG,QAAgB;EAC1B,KAAA,QAAO,MAAM,QAAQ,GAAC,MAAA,KAAO;CAC/B;;CAGA,SAAS,WAAW,QAAgB;EAClC,MAAM,YAAY,WAAM,QAAA;EACxB,MAAM,MAAM,OAAA,UAAA,UAAqB,aAAa,UAAA,MAAU,MAAM,IAAC,UAAA;EAC/D,MAAM,SAAS,WACb;GACE,IAAI,CAAC,iBAAiB,MAAM,iBAAiB,OAAO;GACpD,MAAI,KAAA;GACJ,SAAS,YAAY,SAAS;GAC9B,MAAM,YAAY,WAAW;GAC7B,cAAc,KAAK,UAAU,MAAM;EACrC,GACA,KACA,EAAE,gBAAgB,YAAY,SAAS,KAAA,EAAU,CACnD;EACA,OAAO,KAAA,QAAAC,YAAA,YAEC,eAAgC,QAA2B;GAC7D,MAAM,KAAA,MAAK,MAAM;GACjB,eAAe,GAAG,MAAM;EAC1B,CAAC,GAAC,QAED,MAAM,IAAN,SAAM,EAAA,eAAA,CAAN,MAAM,EAAA,CAAA,IAAAA,YAAA,QAIH,eAA4B,QAAuB,EAAE,eAAe,GAAG,MAAM,EAAE,CAAC,GAAC,QAEpF,MAAM,IAAN,SAAM,EAAA,eAAA,CAAN,MAAM,EAAA,CAAA;CAGb;;CAGA,SAAS,WAAW,WAAmB;EACrC,MAAM,SAAS,QAAA,QAAU;EACzB,MAAM,WAAW,SAAS,KAAK,SAAM,MAAA;EACrC,MAAM,SAAS;GACb,MAAI,KAAA;GACJ,SAAS;GACT,MAAM;GACN,MAAM,YAAY,IAAI,cAAc;GACpC,WAAW,EAAE,WAAW,KAAK;GAC7B,cAAc,YAAY,IAAI,KAAK,eAAe,KAAK;EACzD;EACA,OAAO,KAAA,QAAAA,YAAA,gBAEC,eACF;GAAE,GAAG;GAAQ,MAAM,KAAA,MAAK,WAAQ,QAAA,QAAa,MAAM;EAAE,GAAC,UAAA,OAEtD;GAAE;GAAU,KAAK,YAAY,IAAI,SAAS;GAAQ,eAAe,GAAG,MAAM;EAAE,CAC9E,GAAC,IAAA,IAAAA,YAAA,YAIG,eAAgC,QAAM,UAAA,OAAa;GACrD;GACA,eAAe,GAAG,MAAM;EAC1B,CAAC,GAAC,IAAA;CAGR;CAEA,aAAOA,YAAA,OAEC,WAAkB;EAAE,IAAI,iBAAiB;EAAM,cAAc,KAAK;CAAW,GAAG,IAAI,GAAC,CAAAA,YAAA,UAAAC,cAE3E,eAAgC;EAAE,OAAO;EAAU,KAAK;CAAK,GAAC,UAAA,KAAW,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;EAAA,eAAA;GAAAD,YAAA,MAC9E,WAAiB,CAAC,GAAC,UAAA,KAAW,GAAC,CAAG,WAAW,EAAE,CAAC,CAAA;GACvD,gBAAgB;IAAE,MAAI,QAAA;IAAW,WAAS,MAAA;IAAS,UAAQ,SAAA;IAAE,YAAU,WAAA;GAAC,CAAC,CAAC,CAAC,KACzE,SAAIA,YAAA,MAAAC,cAAA,EAAA,OACM,KAAI,GAAM,WAAiB,CAAC,GAAC,UAAA,KAAW,CAAC,GAAA,CAC/C,OAAO,SAAS,WACf,WAAW,IAAI,IAACD,YAAA,QAGV,WAAmB,EAAE,IAAI,iBAAiB,SAAS,GAAC,cAAA,OAAiB,EACvE,eAAe,KACjB,CAAC,GAAC,CAAAA,YAAA,MAAA,EAAA,QAEU,SAAQ,GAAA,IAAA,CAAA,CAAA,CAEvB,CAAA,CAGP;GAACA,YAAA,MACO,WAAiB,CAAC,GAAC,UAAA,KAAW,GAAC,CAAG,WAAW,CAAC,CAAC,CAAA;EAAA;EAAA,SAAA;CAAA,CAAA,GAExD,UAAA,SAAa,MAAA,SAAS,QAAIA,YAAA,QAEnB,WACF,EAAE,IAAI,CAAC,iBAAiB,OAAO,iBAAiB,OAAO,EAAE,GAAC,WAAA,KAE5D,GAAC,CAEA,KAAK,gBAAe,MAAA,KAAM,CAAC,CAAA,CAE/B,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/PaginationBar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 import { type TextSize } from '../utils/style/typography';

package/dist/navigation/PaginationBar.js

@@ -7,7 +7,7 @@ import { PageSizeSelect } from "./PageSizeSelect.js";
 import { Pagination } from "./Pagination.js";
 import { computed, createVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PaginationBar.tsx
 /** 当前页显示的是哪几条 */
 /** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */

package/dist/navigation/PaginationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/SkipLink.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 未声明的属性落到 a 上 */

package/dist/navigation/SkipLink.js

@@ -4,7 +4,7 @@ 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";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/SkipLink.tsx
 /** 未声明的属性落到 a 上 */
 /** SkipLink 的样式：root */

package/dist/navigation/SkipLink.js.map

@@ -1 +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"}
+{"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 { 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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/navigation/Steps.js

@@ -11,7 +11,7 @@ import { statusIcons } from "../utils/style/tone-styles.js";
 import { FlexOrderedList } from "../layout/Flex.js";
 import { createVNode, isVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Check } from "@lucide/icons";
 //#region src/navigation/Steps.tsx
 /**

package/dist/navigation/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","names":["_isVNode","_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/Steps.tsx"],"sourcesContent":["/**\n * 步骤条（ol）：多步流程里的位置（下单、注册、配置向导、任务的流转）。当前步骤带 aria-current=\"step\"，\n * 已完成的步骤显示对勾（Lucide 的 Check），出错的步骤显示警示图标；已完成、未开始、出错另有读屏文字，不只靠颜色。\n *\n *   <Steps current={1} items={[{ title: '填写信息' }, { title: '确认订单' }, { title: '完成' }]} />\n *   <Steps _current={step} items={items} navigable />               已完成的步骤可以点回去\n *   <Steps current={2} items={[{ title: '概览', href: '/task/1' }, …]} />   已完成的步骤是链接\n *\n * 每一步的状态默认按 current 推出（之前已完成、当前、之后未开始），item 的 status 可以改：出错的一步、非线性的流程。\n */\nimport { Check } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { FlexOrderedList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 步骤条方向 */\nexport interface StepsOrientations {\n  /** 横排（默认） */\n  horizontal: unknown;\n  /** 竖排：步骤多、说明长时；步骤之间有竖的连接线 */\n  vertical: unknown;\n}\n\n/** 步骤的状态 */\nexport interface StepStates {\n  /** 已完成：对勾、品牌色 */\n  complete: unknown;\n  /** 当前：aria-current=\"step\" */\n  current: unknown;\n  /** 未开始 */\n  upcoming: unknown;\n  /** 出错：警示图标、危险色 */\n  error: unknown;\n}\n\n/** 步骤的状态：已完成、当前、未开始、出错 */\nexport type StepState = keyof StepStates;\n\n/** 一个步骤 */\nexport interface StepItem {\n  /** 唯一的 key；不写时用位置 */\n  key?: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明（标题下面的小字） */\n  description?: VNodeChild;\n  /** 代替序号的图标；已完成时仍显示对勾，出错时仍显示警示图标 */\n  icon?: IconData;\n  /** 状态；不写时按 current 推出 */\n  status?: StepState;\n  /** 地址：已完成的这一步渲染成链接（走路由适配），点了跳过去 */\n  href?: string;\n  /** 不可点回（即使已完成、有 href 或 navigable） */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到 ol 上；aria-label 是步骤条的名称 */\nexport interface StepsProps extends PartProps<'ol'> {\n  /** 步骤 */\n  items: readonly StepItem[];\n  /** 当前步骤的序号，从 0 开始：父级可以写 _current={x}，配合 navigable 点回已完成的步骤 */\n  _current?: number;\n  /** 方向，默认 horizontal */\n  orientation?: keyof StepsOrientations;\n  /** 字号档位：圆圈、文字随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 已完成的步骤可以点击回去：点了写回 current */\n  navigable?: boolean;\n  /** 每个步骤（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: StepItem, index: number) => PartProps<'li'>);\n  /** 序号圆圈的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 可点回的步骤外层（按钮，或有 href 时的链接）的部件属性 */\n  propsTrigger?: Partial<ButtonBaseProps> & PartProps<'a'>;\n  /** 文字区（标题与说明的容器）的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 步骤之间连接线的部件属性 */\n  propsConnector?: PartProps<'span'>;\n}\n\n/** Steps 的样式：item、itemVertical、trigger、link、indicator、text、title、description、connector 等 */\nexport const stepsStyles = css.create({\n  item: {\n    display: 'flex',\n    flexGrow: 1,\n    flexBasis: 0,\n    alignItems: 'flex-start',\n    gap: '_sm',\n    minWidth: 0,\n  },\n  // 竖排：高度随内容，连接线相对这一项定位\n  itemVertical: { flexGrow: 0, flexBasis: 'auto', position: 'relative' },\n  // 可点回的步骤：整块是按钮或链接\n  // 去掉按钮默认外观、焦点环、波纹由 ButtonBase 给出\n  trigger: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '_sm',\n    borderRadius: '_sm',\n    textAlign: 'start',\n  },\n  link: { color: 'inherit', textDecorationLine: 'none' },\n  indicator: {\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '2em',\n    height: '2em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderRadius: '_full',\n    // 用 em 而不是 _sm（默认字号下 13 / 14 ≈ 0.93）：随 size 缩放\n    fontSize: '0.93em',\n    fontWeight: '_semibold',\n    // 走到下一步时圆圈换色、连接线变色都过渡，不是一下跳过去\n    transition: `background-color ${t.durations.md} ${t.easings.standard}, border-color ${t.durations.md} ${t.easings.standard}, color ${t.durations.md} ${t.easings.standard}`,\n  },\n  text: { display: 'grid', gap: '_xs', paddingTop: '0.3em', minWidth: 0 },\n  title: { fontWeight: '_medium' },\n  description: { color: '_textMuted', fontSize: '0.93em' },\n  // 步骤之间的连接线：横排在标题右侧延伸\n  connector: {\n    flexGrow: 1,\n    alignSelf: 'center',\n    minWidth: '_space.lg',\n    height: '_borderWidths.xs',\n    backgroundColor: '_border',\n    transition: `background-color ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 竖排：从圆圈下面一直连到下一步的圆圈（圆圈宽 2 × 0.93em，中线在 0.93em）\n  connectorVertical: {\n    position: 'absolute',\n    insetInlineStart: '0.93em',\n    insetBlockStart: `calc(1.86em + ${t.space.xs})`,\n    insetBlockEnd: `calc(-1 * ${t.space.lg} + ${t.space.xs})`,\n    width: '_borderWidths.xs',\n    height: 'auto',\n    minWidth: 0,\n    // 两端都定了位置时按 align-self 对齐：横排的 center 会让空的 span 缩成 0 高，这里要拉伸\n    alignSelf: 'stretch',\n    marginInlineStart: `calc(${t.borderWidths.xs} / -2)`,\n  },\n  connectorDone: { backgroundColor: '_accent' },\n});\n\n/** Steps 的样式：complete、current、upcoming、error */\nexport const stepsStateStyles = css.create({\n  complete: { borderColor: '_accent', backgroundColor: '_accent', color: '_accentContrast' },\n  current: { borderColor: '_accent', color: '_accentText' },\n  upcoming: { borderColor: '_border', color: '_textMuted' },\n  error: { borderColor: '_danger', backgroundColor: '_dangerSoft', color: '_dangerText' },\n});\n\n/** 步骤条：已完成、当前、未开始、出错；已完成的步骤可以点回去或是链接 */\nexport const Steps = _component(\n  ({\n    items,\n    _current: current = _bindable(0),\n    orientation = 'horizontal',\n    size,\n    navigable = false,\n    propsItem,\n    propsIndicator,\n    propsTrigger,\n    propsText,\n    propsTitle,\n    propsDescription,\n    propsConnector,\n    ...rest\n  }: StepsProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    return () => {\n      const vertical = orientation === 'vertical';\n      return (\n        <FlexOrderedList\n          {...mergePartProps<FlexProps<'ol'>>(\n            {\n              direction: vertical ? 'column' : 'row',\n              gap: vertical ? 'lg' : 'sm',\n              sx: size && fontSizeStyles[size],\n            },\n            rest,\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const state: StepState =\n              item.status ??\n              (index < current ? 'complete' : index === current ? 'current' : 'upcoming');\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const content = [\n              <span\n                {...mergeAttrs<'span'>({ sx: stepsStyles.indicator }, propsIndicator, {\n                  sx: stepsStateStyles[state],\n                  'aria-hidden': true,\n                })}\n              >\n                {state === 'complete' ? (\n                  <Icon icon={Check} />\n                ) : state === 'error' ? (\n                  <Icon icon={statusIcons.danger} />\n                ) : item.icon ? (\n                  <Icon icon={item.icon} />\n                ) : (\n                  index + 1\n                )}\n              </span>,\n              <span {...mergeAttrs<'span'>({ sx: stepsStyles.text }, propsText)}>\n                <span {...mergeAttrs<'span'>({ sx: stepsStyles.title }, propsTitle)}>\n                  {item.title}\n                  {/* 当前步骤由 aria-current 念出，其余的状态补一句文字：不只靠颜色与图标 */}\n                  {state !== 'current' && <VisuallyHidden>{lang.stepState(state)}</VisuallyHidden>}\n                </span>\n                {item.description != null && (\n                  <span {...mergeAttrs<'span'>({ sx: stepsStyles.description }, propsDescription)}>\n                    {item.description}\n                  </span>\n                )}\n              </span>,\n            ];\n            const reachable = state === 'complete' && !item.disabled;\n            const link = reachable && item.href != null;\n            const button = reachable && !link && navigable;\n            return (\n              <li\n                key={item.key ?? index}\n                {...mergeAttrs<'li'>(\n                  { sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] },\n                  own,\n                  { 'aria-current': state === 'current' ? 'step' : undefined },\n                )}\n                data-state={state}\n              >\n                {link ? (\n                  <a\n                    {...mergeAttrs<'a'>(\n                      { sx: [stepsStyles.trigger, stepsStyles.link, focusRingStyles.visible] },\n                      propsTrigger,\n                      {\n                        href: router.href(item.href!),\n                        onClick: (event: MouseEvent) => router.onClick(event, item.href!),\n                      },\n                    )}\n                  >\n                    {content}\n                  </a>\n                ) : button ? (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>({ sx: stepsStyles.trigger }, propsTrigger, {\n                      onClick: () => (current = index),\n                    })}\n                  >\n                    {content}\n                  </ButtonBase>\n                ) : (\n                  content\n                )}\n                {index < items.length - 1 && (\n                  <span\n                    {...mergeAttrs<'span'>(\n                      { sx: [stepsStyles.connector, vertical && stepsStyles.connectorVertical] },\n                      propsConnector,\n                      {\n                        sx: state === 'complete' && stepsStyles.connectorDone,\n                        'aria-hidden': true,\n                      },\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </FlexOrderedList>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AA6BA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,KAAK;EACL,UAAU;CACZ;CAEA,cAAc;EAAE,UAAU;EAAG,WAAW;EAAQ,UAAU;CAAW;CAGrE,SAAS;EACP,SAAS;EACT,YAAY;EACZ,KAAK;EACL,cAAc;EACd,WAAW;CACb;CACA,MAAM;EAAE,OAAO;EAAW,oBAAoB;CAAO;CACrD,WAAW;EACT,WAAW;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,aAAa;EACb,aAAa;EACb,cAAc;EAEd,UAAU;EACV,YAAY;EAEZ,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,iBAAkB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,SAAQ,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACnK;CACA,MAAM;EAAE,SAAS;EAAQ,KAAK;EAAO,YAAY;EAAS,UAAU;CAAE;CACtE,OAAO,EAAE,YAAY,UAAU;CAC/B,aAAa;EAAE,OAAO;EAAc,UAAU;CAAS;CAEvD,WAAW;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,YAAY,oBAAoB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC9D;CAEA,mBAAmB;EACjB,UAAU;EACV,kBAAkB;EAClB,iBAAiB,iBAAiB,EAAE,MAAM,GAAE;EAC5C,eAAe,aAAa,EAAE,MAAM,GAAE,KAAM,EAAE,MAAM,GAAE;EACtD,OAAO;EACP,QAAQ;EACR,UAAU;EAEV,WAAW;EACX,mBAAmB,QAAQ,EAAE,aAAa,GAAE;CAC9C;CACA,eAAe,EAAE,iBAAiB,UAAU;AAC9C,CAAC;;AAGD,IAAa,mBAAmB,IAAI,OAAO;CACzC,UAAU;EAAE,aAAa;EAAW,iBAAiB;EAAW,OAAO;CAAkB;CACzF,SAAS;EAAE,aAAa;EAAW,OAAO;CAAc;CACxD,UAAU;EAAE,aAAa;EAAW,OAAO;CAAa;CACxD,OAAO;EAAE,aAAa;EAAW,iBAAiB;EAAe,OAAO;CAAc;AACxF,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAckB;CAAA,MAAA,QAAAC,aAAA,QAAA,OAAA;CAAA,MAAA,UAAAC,SAAA,QAAA,kBAZc,GAAC,KAAA,IAAA;CAAA,MAAA,cAAAD,aAAA,QAAA,eACjB,YAAY;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEd,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAQd,OAAIE,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,aAAa;EAAA,IAAA;EACX,MAAM,WAAW,YAAA,UAAgB;EACjC,OAAAC,YAAA,iBAAAC,cAEQ,eACF;GACE,WAAW,WAAW,WAAW;GACjC,KAAK,WAAW,OAAO;GACvB,IAAI,KAAA,SAAQ,eAAc,KAAA;EAC5B,GACA,IACF,GAAC,EAAA,oBAAA,YAAA,MAAA,CAAA,GAAA,QAAA,SAGA,MAAA,MAAM,KAAK,MAAM,UAAU;GAAA,IAAA;GAC1B,MAAM,QACJ,KAAK,WACJ,QAAK,QAAA,QAAa,aAAa,UAAK,QAAA,QAAe,YAAY;GAClE,MAAM,MAAM,OAAA,UAAA,UAAqB,aAAa,UAAA,MAAU,MAAM,KAAK,IAAC,UAAA;GACpE,MAAM,UAAU,CAAAD,YAAA,QAER,WAAmB,EAAE,IAAI,YAAY,UAAU,GAAC,eAAA,OAAkB;IACpE,IAAI,iBAAiB;IACrB,eAAe;GACjB,CAAC,GAAC,CAED,UAAU,aAAUA,YAAA,MAAA,EAAA,QACP,MAAK,GAAA,IAAA,IACf,UAAU,UAAOA,YAAA,MAAA,EAAA,QACP,YAAY,OAAM,GAAA,IAAA,IAC5B,KAAK,OAAIA,YAAA,MAAA,EAAA,QACC,KAAK,KAAI,GAAA,IAAA,IAErB,QAAQ,CACT,CAAA,GAAAA,YAAA,QAEO,WAAmB,EAAE,IAAI,YAAY,KAAK,GAAC,UAAA,KAAW,GAAC,CAAAA,YAAA,QACrD,WAAmB,EAAE,IAAI,YAAY,MAAM,GAAC,WAAA,KAAY,GAAC,CAChE,KAAK,OAEL,UAAU,aAASA,YAAA,gBAAA,MAAA,QAAA,QAAqB,KAAK,UAAU,KAAK,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA,CAAkB,CAAA,GAEjF,KAAK,eAAe,QAAIA,YAAA,QACb,WAAmB,EAAE,IAAI,YAAY,YAAY,GAAC,iBAAA,KAAkB,GAAC,CAC5E,KAAK,WAAW,CAAA,CAEpB,CAAA,CAAA;GAGL,MAAM,YAAY,UAAU,cAAc,CAAC,KAAK;GAChD,MAAM,OAAO,aAAa,KAAK,QAAQ;GACvC,MAAM,SAAS,aAAa,CAAC,QAAI,UAAA;GACjC,OAAAA,YAAA,MAAAC,cAAA,EAAA,OAES,KAAK,OAAO,MAAK,GAClB,WACF,EAAE,IAAI,CAAC,YAAY,MAAM,YAAY,YAAY,YAAY,EAAE,GAC/D,KACA,EAAE,gBAAgB,UAAU,YAAY,SAAS,KAAA,EAAU,CAC7D,GAAC,EAAA,cACW,MAAK,CAAA,GAAA,CAEhB,OAAID,YAAA,KAEG,WACF,EAAE,IAAI;IAAC,YAAY;IAAS,YAAY;IAAM,gBAAgB;GAAO,EAAE,GAAC,aAAA,OAExE;IACE,MAAM,OAAO,KAAK,KAAK,IAAK;IAC5B,UAAU,UAAsB,OAAO,QAAQ,OAAO,KAAK,IAAK;GAClE,CACF,GAAC,CAEA,OAAO,CAAA,IAER,SAAMA,YAAA,YAEF,eAAgC,EAAE,IAAI,YAAY,QAAQ,GAAC,aAAA,OAAgB,EAC7E,eAAgB,QAAA,QAAU,MAC5B,CAAC,GAAC,QAED,OAAO,IAAP,UAAO,EAAA,eAAA,CAAP,OAAO,EAAA,CAAA,IAGV,SAED,QAAQ,MAAA,MAAM,SAAS,KAACA,YAAA,QAEjB,WACF,EAAE,IAAI,CAAC,YAAY,WAAW,YAAY,YAAY,iBAAiB,EAAE,GAAC,eAAA,OAE1E;IACE,IAAI,UAAU,cAAc,YAAY;IACxC,eAAe;GACjB,CACF,GAAC,IAAA,CAEJ,CAAA;EAGP,CAAC,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA;CAGR;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"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 { 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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"}