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

package/dist/display/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode"],"sources":["../../src/display/Card.tsx"],"sourcesContent":["/**\n * 卡片（div）：把一组相关内容放在一块表面上。可选的页头、页脚与正文之间有分隔线。\n *\n *   <Card header={<H3 size=\"md\">订单 #1024</H3>} footer={<Button>查看</Button>}>…</Card>\n *   <Card header=\"超时最久的项目\" extra={<Link href=\"/overdue\">全部</Link>}>…</Card>   页头右边的操作\n *   <Card loading={loading} header={…}>…</Card>      正文加载中：换成几行扫光的骨架，卡片带 aria-busy\n *   <Card effect=\"spotlight\">…</Card>                  装饰效果：tilt 倾斜、spotlight 聚光、beam 流光边框\n *\n * 需要语义容器（article、section）时在外面包，或把语义标签放进 header 里的标题。\n * effect 是纯 CSS 的装饰（官网、活动页的卡片）：光层对读屏隐藏、不接收指针；减少动态效果时不倾斜、流光不动。\n * 光要画在卡片的边框上，而卡片裁掉了边框以内之外的内容，所以有 effect 时外面多一层定位用的 div，\n * 未声明的属性落在这一层上。\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 { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { t } from '../config/theme/tokens';\nimport { SkeletonText, type SkeletonTextProps } from '../feedback/SkeletonText';\nimport { useReducedMotion } from '../utils/dom/media-query';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePointer } from '../utils/motion/pointer';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { radiusStyles, type Radius, type Space } from '../utils/style/styles';\n\n/** 卡片样式 */\nexport interface CardVariants {\n  /** 表面色加细边框（默认） */\n  surface: unknown;\n  /** 只有边框，底色透明 */\n  outline: unknown;\n  /** 表面色加阴影，浮在页面上 */\n  elevated: unknown;\n  /** 没有底色与边框，只保留内边距与分区 */\n  ghost: unknown;\n}\n\n/** 卡片的装饰效果 */\nexport interface CardEffects {\n  /** 指针在上面移动时整块向指针方向倾斜，带一层跟随指针的高光；离开后弹回平放 */\n  tilt: unknown;\n  /** 一团柔和的光跟着指针，靠近边框的地方把边框也点亮；并排的几张卡片光会在它们之间传递 */\n  spotlight: unknown;\n  /** 一段渐变的光（品牌色到紫色）沿着边框循环流动 */\n  beam: unknown;\n}\n\n/** 卡片的外观选项；可以用 createUi / Provider 的 defaults.Card 统一改默认值 */\nexport interface CardOptions {\n  /** 样式，默认 surface */\n  variant?: keyof CardVariants;\n  /** 内边距档位，对应主题的 space，默认 lg */\n  padding?: Space;\n  /** 圆角，默认 lg */\n  radius?: Radius;\n}\n\n/** 忙碌由组件按 loading 管理 */\nexport type CardManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface CardProps extends PartProps<'div', CardManaged>, CardOptions {\n  /** 页头：标题、操作；与正文之间有分隔线 */\n  header?: VNodeChild;\n  /** 页头结束边的内容（“全部 ↗”、按钮、筛选）：和 header 排在一行，放不下时换行 */\n  extra?: VNodeChild;\n  /** 页脚：按钮等操作；与正文之间有分隔线 */\n  footer?: VNodeChild;\n  /**\n   * 正文加载中：正文换成几行扫光的骨架（页头、页脚照常显示），卡片带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 装饰效果（见 CardEffects）；有效果时外面多一层定位用的 div，未声明的属性落在它上面 */\n  effect?: keyof CardEffects;\n  /** 效果的光层（倾斜的高光、聚光的表面光、流光）的部件属性 */\n  propsEffect?: PartProps<'span', 'aria-hidden'>;\n  /** 页头的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 正文的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 页脚的部件属性 */\n  propsFooter?: PartProps<'div'>;\n  /** 加载中的骨架（SkeletonText）的部件属性，如行数 `{ lines: 5 }` */\n  propsSkeleton?: Partial<SkeletonTextProps>;\n  children?: VNodeChild;\n}\n\nconst travel = css.keyframes({\n  from: { offsetDistance: '0%' },\n  to: { offsetDistance: '100%' },\n});\n\n/**\n * 卡片的配方。部件：root（卡片本身）、header、body、footer、skeleton（加载中的骨架）；\n * 有 effect 时另有 frame（外面定位用的一层，未声明的属性落在它上面）、effect（倾斜的高光、聚光的表面光）、\n * ring（只露出边框一圈的光层：聚光的边框光、流光的轨道）、beam（流光的光带）。\n * 样式、内边距、有无 extra、装饰效果是档位\n */\nexport const cardRecipe = css.recipe({\n  name: 'Card',\n  parts: ['root', 'header', 'body', 'footer', 'skeleton', 'frame', 'effect', 'ring', 'beam'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: 'transparent',\n      color: '_text',\n      overflow: 'hidden',\n    },\n    header: {\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n    },\n    footer: {\n      display: 'flex',\n      justifyContent: 'flex-end',\n      gap: '_sm',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_borderMuted',\n    },\n    frame: { position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0 },\n    effect: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    ring: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    beam: {\n      position: 'absolute',\n      width: '80px',\n      aspectRatio: '1',\n      offsetAnchor: '90% 50%',\n      backgroundImage: `linear-gradient(to left, ${t.colors.chart5}, ${t.colors.accent}, transparent)`,\n      animationName: { default: travel, _reducedMotion: 'none' },\n      animationDuration: '6s',\n      animationTimingFunction: 'linear',\n      animationIterationCount: 'infinite',\n    },\n  },\n  variants: {\n    variant: {\n      surface: { root: { backgroundColor: '_surface', borderColor: '_border' } },\n      outline: { root: { borderColor: '_border' } },\n      elevated: { root: { backgroundColor: '_surfaceRaised', boxShadow: '_md' } },\n      ghost: {},\n    },\n    // 页头、正文、页脚的内边距\n    padding: {\n      none: {\n        header: { padding: '_none' },\n        body: { padding: '_none' },\n        footer: { padding: '_none' },\n      },\n      xs: { header: { padding: '_xs' }, body: { padding: '_xs' }, footer: { padding: '_xs' } },\n      sm: { header: { padding: '_sm' }, body: { padding: '_sm' }, footer: { padding: '_sm' } },\n      md: { header: { padding: '_md' }, body: { padding: '_md' }, footer: { padding: '_md' } },\n      lg: { header: { padding: '_lg' }, body: { padding: '_lg' }, footer: { padding: '_lg' } },\n      xl: { header: { padding: '_xl' }, body: { padding: '_xl' }, footer: { padding: '_xl' } },\n    },\n    // 有 extra 时：标题在起始边、extra 在结束边\n    extra: {\n      true: {\n        header: {\n          display: 'flex',\n          flexWrap: 'wrap',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: '_sm',\n        },\n      },\n    },\n    // 有效果时卡片撑满外层\n    effect: {\n      tilt: {\n        frame: { transformStyle: 'preserve-3d', willChange: 'transform' },\n        root: { flexGrow: 1 },\n        effect: { mixBlendMode: 'soft-light' },\n      },\n      // 只留边框那一圈：内容盒与整个盒子的遮罩相减\n      spotlight: {\n        root: { flexGrow: 1 },\n        ring: {\n          padding: '_borderWidths.md',\n          maskImage: 'linear-gradient(#000 0 0), linear-gradient(#000 0 0)',\n          maskClip: 'content-box, border-box',\n          maskComposite: 'exclude',\n        },\n      },\n      // 流光：光带沿外层的圆角矩形走（offset-path），只在边框那一圈露出来\n      beam: {\n        root: { flexGrow: 1 },\n        ring: {\n          borderWidth: '_md',\n          borderStyle: 'solid',\n          borderColor: 'transparent',\n          maskImage: 'linear-gradient(transparent, transparent), linear-gradient(#000, #000)',\n          maskClip: 'padding-box, border-box',\n          maskComposite: 'intersect',\n        },\n      },\n    },\n  },\n});\n\n/** 卡片的部件（createUi / Provider 的 styles.Card 按它定制） */\nexport type CardPart = (typeof cardRecipe.parts)[number];\n\n/** 一次渲染里各部件的默认层（useRecipe 的结果） */\ntype CardParts = Readonly<Record<CardPart, PartLayer>>;\n\n// 倾斜角度、光的位置每帧变化，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Card 效果的样式：tiltTransform、glare（高光的位置与强度）、light（光斑）、beamPath（流光的路径） */\nexport const cardEffectDynamicStyles = css.create({\n  tiltTransform: (rotateX: number, rotateY: number, scale: number) => ({\n    transform: `perspective(60em) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,\n  }),\n  glare: (x: number, y: number, opacity: number) => ({\n    opacity,\n    backgroundImage: `radial-gradient(circle at ${x}% ${y}%, color-mix(in oklab, ${t.colors.accentSoft} 40%, ${t.colors.surfaceRaised}), transparent 60%)`,\n  }),\n  light: (x: number, y: number, size: string, color: string, strength: number) => ({\n    opacity: strength,\n    backgroundImage: `radial-gradient(${size} circle at ${x}% ${y}%, ${color}, transparent 70%)`,\n  }),\n  beamPath: (radius: string) => ({ offsetPath: `rect(0 auto auto 0 round ${radius})` }),\n});\n\n/** 倾斜的最大角度（度）与悬停时的放大倍数 */\nconst TILT = 10;\nconst TILT_SCALE = 1.02;\n\n/** 卡片：表面 + 可选的页头与页脚，正文可以显示加载骨架 */\nexport const Card = _component(\n  ({\n    variant,\n    padding,\n    radius,\n    header,\n    extra,\n    footer,\n    loading = false,\n    effect,\n    propsEffect,\n    propsHeader,\n    propsBody,\n    propsFooter,\n    propsSkeleton,\n    children,\n    ...rest\n  }: CardProps) => {\n    const appearance = useDefaults('Card', () => ({ variant, padding, radius }), {\n      variant: 'surface',\n      padding: 'lg',\n      radius: 'lg',\n    });\n    const recipe = useRecipe(cardRecipe);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，骨架与正文互换时都淡入（样式在切换的那一刻加上，动画才会播）；一开始就有内容的卡片不播\n    let revealing = false;\n    const reducedMotion = useReducedMotion();\n    let frame = _state.raw<HTMLElement | null>(null);\n    // 阻尼后的指针位置（-1 到 1，向上为正）；离开时位置不动、strength 淡出。倾斜要慢一点、带回弹；\n    // 阻尼参数按挂上时的效果定（效果一般不中途切换），跟踪的目标随 effect 变\n    const pointer = usePointer(\n      () => (effect === 'tilt' || effect === 'spotlight' ? frame : null),\n      _untrack(effect) === 'tilt' ? { bounce: 0.3, duration: 'lg' } : { duration: 'sm' },\n    );\n\n    /** 效果的光层：倾斜是一层高光，聚光是表面与边框两层，流光是边框一圈里走的光带 */\n    function effectLayers(s: CardParts, shownRadius: Radius) {\n      const x = (pointer.x + 1) * 50;\n      const y = (1 - pointer.y) * 50;\n      const layer = (part: PartLayer, sx?: css.SxStyles, child?: VNodeChild) => (\n        <span\n          {...mergeAttrs<'span'>({ ...part, sx: [part.sx, sx] }, propsEffect, {\n            'aria-hidden': true,\n          })}\n        >\n          {child}\n        </span>\n      );\n      if (effect === 'tilt')\n        return layer(s.effect, cardEffectDynamicStyles.glare(x, y, pointer.strength));\n      if (effect === 'spotlight')\n        return [\n          layer(\n            s.effect,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '20em',\n              `color-mix(in oklab, ${t.colors.accent} 16%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n          layer(\n            s.ring,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '12em',\n              `color-mix(in oklab, ${t.colors.accent} 85%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n        ];\n      return layer(\n        s.ring,\n        undefined,\n        <span\n          {...mergeAttrs<'span'>({\n            ...s.beam,\n            sx: [s.beam.sx, cardEffectDynamicStyles.beamPath(t.radii[shownRadius])],\n          })}\n        />,\n      );\n    }\n\n    return () => {\n      const { variant: shownVariant, padding: shownPadding, radius: shownRadius } = appearance();\n      const s = recipe({\n        variant: shownVariant,\n        padding: shownPadding,\n        extra: extra != null,\n        effect,\n      });\n      if (skeleton.value) revealing = true;\n      const surface = { ...s.root, sx: [s.root.sx, radiusStyles[shownRadius]] };\n      const content = renderContent(s);\n      if (!effect)\n        return (\n          <div {...mergeAttrs<'div'>(surface, rest, { 'aria-busy': loading || undefined })}>\n            {content}\n          </div>\n        );\n      const tilt = effect === 'tilt' && !reducedMotion.value ? pointer.strength : 0;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.frame,\n              sx: [\n                s.frame.sx,\n                radiusStyles[shownRadius],\n                effect === 'tilt' &&\n                  cardEffectDynamicStyles.tiltTransform(\n                    pointer.y * TILT * tilt,\n                    pointer.x * TILT * tilt,\n                    1 + (TILT_SCALE - 1) * tilt,\n                  ),\n              ],\n            },\n            rest,\n            { 'aria-busy': loading || undefined, ref: _toRef(frame) },\n          )}\n        >\n          <div {...mergeAttrs<'div'>(surface)}>{content}</div>\n          {effectLayers(s, shownRadius)}\n        </div>\n      );\n    };\n\n    /** 页头、正文（或骨架）、页脚 */\n    function renderContent(s: CardParts) {\n      return [\n        (header != null || extra != null) && (\n          <div {...mergeAttrs<'div'>(s.header, propsHeader)}>\n            {header}\n            {extra}\n          </div>\n        ),\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.body, sx: [s.body.sx, revealing && !skeleton.value && shimmerStyles.reveal] },\n            propsBody,\n          )}\n        >\n          {skeleton.value ? (\n            <SkeletonText\n              {...mergePartProps<SkeletonTextProps>(\n                { ...s.skeleton, sx: [s.skeleton.sx, shimmerStyles.reveal] },\n                propsSkeleton,\n              )}\n            />\n          ) : (\n            children\n          )}\n        </div>,\n        hasContent(footer) && <div {...mergeAttrs<'div'>(s.footer, propsFooter)}>{footer}</div>,\n      ];\n    }\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode"],"sources":["../../src/display/Card.tsx"],"sourcesContent":["/**\n * 卡片（div）：把一组相关内容放在一块表面上。可选的页头、页脚与正文之间有分隔线。\n *\n *   <Card header={<H3 size=\"md\">订单 #1024</H3>} footer={<Button>查看</Button>}>…</Card>\n *   <Card header=\"超时最久的项目\" extra={<Link href=\"/overdue\">全部</Link>}>…</Card>   页头右边的操作\n *   <Card loading={loading} header={…}>…</Card>      正文加载中：换成几行扫光的骨架，卡片带 aria-busy\n *   <Card effect=\"spotlight\">…</Card>                  装饰效果：tilt 倾斜、spotlight 聚光、beam 流光边框\n *\n * 需要语义容器（article、section）时在外面包，或把语义标签放进 header 里的标题。\n * effect 是纯 CSS 的装饰（官网、活动页的卡片）：光层对读屏隐藏、不接收指针；减少动态效果时不倾斜、流光不动。\n * 光要画在卡片的边框上，而卡片裁掉了边框以内之外的内容，所以有 effect 时外面多一层定位用的 div，\n * 未声明的属性落在这一层上。\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 { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { t } from '../config/theme/tokens';\nimport { SkeletonText, type SkeletonTextProps } from '../feedback/SkeletonText';\nimport { useReducedMotion } from '../utils/dom/media-query';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePointer } from '../utils/motion/pointer';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { radiusStyles, type Radius, type Space } from '../utils/style/styles';\n\n/** 卡片样式 */\nexport interface CardVariants {\n  /** 表面色加细边框（默认） */\n  surface: unknown;\n  /** 只有边框，底色透明 */\n  outline: unknown;\n  /** 表面色加阴影，浮在页面上 */\n  elevated: unknown;\n  /** 没有底色与边框，只保留内边距与分区 */\n  ghost: unknown;\n}\n\n/** 卡片的装饰效果 */\nexport interface CardEffects {\n  /** 指针在上面移动时整块向指针方向倾斜，带一层跟随指针的高光；离开后弹回平放 */\n  tilt: unknown;\n  /** 一团柔和的光跟着指针，靠近边框的地方把边框也点亮；并排的几张卡片光会在它们之间传递 */\n  spotlight: unknown;\n  /** 一段渐变的光（品牌色到紫色）沿着边框循环流动 */\n  beam: unknown;\n}\n\n/** 卡片的外观选项；可以用 createUi / Provider 的 defaults.Card 统一改默认值 */\nexport interface CardOptions {\n  /** 样式，默认 surface */\n  variant?: keyof CardVariants;\n  /** 内边距档位，对应主题的 space，默认 lg */\n  padding?: Space;\n  /** 圆角，默认 lg */\n  radius?: Radius;\n}\n\n/** 忙碌由组件按 loading 管理 */\nexport type CardManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface CardProps extends PartProps<'div', CardManaged>, CardOptions {\n  /** 页头：标题、操作；与正文之间有分隔线 */\n  header?: VNodeChild;\n  /** 页头结束边的内容（“全部 ↗”、按钮、筛选）：和 header 排在一行，放不下时换行 */\n  extra?: VNodeChild;\n  /** 页脚：按钮等操作；与正文之间有分隔线 */\n  footer?: VNodeChild;\n  /**\n   * 正文加载中：正文换成几行扫光的骨架（页头、页脚照常显示），卡片带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 装饰效果（见 CardEffects）；有效果时外面多一层定位用的 div，未声明的属性落在它上面 */\n  effect?: keyof CardEffects;\n  /** 效果的光层（倾斜的高光、聚光的表面光、流光）的部件属性 */\n  propsEffect?: PartProps<'span', 'aria-hidden'>;\n  /** 页头的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 正文的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 页脚的部件属性 */\n  propsFooter?: PartProps<'div'>;\n  /** 加载中的骨架（SkeletonText）的部件属性，如行数 `{ lines: 5 }` */\n  propsSkeleton?: Partial<SkeletonTextProps>;\n  children?: VNodeChild;\n}\n\nconst travel = css.keyframes({\n  from: { offsetDistance: '0%' },\n  to: { offsetDistance: '100%' },\n});\n\n/**\n * 卡片的配方。部件：root（卡片本身）、header、body、footer、skeleton（加载中的骨架）；\n * 有 effect 时另有 frame（外面定位用的一层，未声明的属性落在它上面）、effect（倾斜的高光、聚光的表面光）、\n * ring（只露出边框一圈的光层：聚光的边框光、流光的轨道）、beam（流光的光带）。\n * 样式、内边距、有无 extra、装饰效果是档位\n */\nexport const cardRecipe = css.recipe({\n  name: 'Card',\n  parts: ['root', 'header', 'body', 'footer', 'skeleton', 'frame', 'effect', 'ring', 'beam'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: 'transparent',\n      color: '_text',\n      overflow: 'hidden',\n    },\n    header: {\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n    },\n    footer: {\n      display: 'flex',\n      justifyContent: 'flex-end',\n      gap: '_sm',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_borderMuted',\n    },\n    frame: { position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0 },\n    effect: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    ring: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    beam: {\n      position: 'absolute',\n      width: '80px',\n      aspectRatio: '1',\n      offsetAnchor: '90% 50%',\n      backgroundImage: `linear-gradient(to left, ${t.colors.chart5}, ${t.colors.accent}, transparent)`,\n      animationName: { default: travel, _reducedMotion: 'none' },\n      animationDuration: '6s',\n      animationTimingFunction: 'linear',\n      animationIterationCount: 'infinite',\n    },\n  },\n  variants: {\n    variant: {\n      surface: { root: { backgroundColor: '_surface', borderColor: '_border' } },\n      outline: { root: { borderColor: '_border' } },\n      elevated: { root: { backgroundColor: '_surfaceRaised', boxShadow: '_md' } },\n      ghost: {},\n    },\n    // 页头、正文、页脚的内边距\n    padding: {\n      none: {\n        header: { padding: '_none' },\n        body: { padding: '_none' },\n        footer: { padding: '_none' },\n      },\n      xs: { header: { padding: '_xs' }, body: { padding: '_xs' }, footer: { padding: '_xs' } },\n      sm: { header: { padding: '_sm' }, body: { padding: '_sm' }, footer: { padding: '_sm' } },\n      md: { header: { padding: '_md' }, body: { padding: '_md' }, footer: { padding: '_md' } },\n      lg: { header: { padding: '_lg' }, body: { padding: '_lg' }, footer: { padding: '_lg' } },\n      xl: { header: { padding: '_xl' }, body: { padding: '_xl' }, footer: { padding: '_xl' } },\n    },\n    // 有 extra 时：标题在起始边、extra 在结束边\n    extra: {\n      true: {\n        header: {\n          display: 'flex',\n          flexWrap: 'wrap',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: '_sm',\n        },\n      },\n    },\n    // 有效果时卡片撑满外层\n    effect: {\n      tilt: {\n        frame: { transformStyle: 'preserve-3d', willChange: 'transform' },\n        root: { flexGrow: 1 },\n        effect: { mixBlendMode: 'soft-light' },\n      },\n      // 只留边框那一圈：内容盒与整个盒子的遮罩相减\n      spotlight: {\n        root: { flexGrow: 1 },\n        ring: {\n          padding: '_borderWidths.md',\n          maskImage: 'linear-gradient(#000 0 0), linear-gradient(#000 0 0)',\n          maskClip: 'content-box, border-box',\n          maskComposite: 'exclude',\n        },\n      },\n      // 流光：光带沿外层的圆角矩形走（offset-path），只在边框那一圈露出来\n      beam: {\n        root: { flexGrow: 1 },\n        ring: {\n          borderWidth: '_md',\n          borderStyle: 'solid',\n          borderColor: 'transparent',\n          maskImage: 'linear-gradient(transparent, transparent), linear-gradient(#000, #000)',\n          maskClip: 'padding-box, border-box',\n          maskComposite: 'intersect',\n        },\n      },\n    },\n  },\n});\n\n/** 卡片的部件（createUi / Provider 的 styles.Card 按它定制） */\nexport type CardPart = (typeof cardRecipe.parts)[number];\n\n/** 一次渲染里各部件的默认层（useRecipe 的结果） */\ntype CardParts = Readonly<Record<CardPart, PartLayer>>;\n\n// 倾斜角度、光的位置每帧变化，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Card 效果的样式：tiltTransform、glare（高光的位置与强度）、light（光斑）、beamPath（流光的路径） */\nexport const cardEffectDynamicStyles = css.create({\n  tiltTransform: (rotateX: number, rotateY: number, scale: number) => ({\n    transform: `perspective(60em) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,\n  }),\n  glare: (x: number, y: number, opacity: number) => ({\n    opacity,\n    backgroundImage: `radial-gradient(circle at ${x}% ${y}%, color-mix(in oklab, ${t.colors.accentSoft} 40%, ${t.colors.surfaceRaised}), transparent 60%)`,\n  }),\n  light: (x: number, y: number, size: string, color: string, strength: number) => ({\n    opacity: strength,\n    backgroundImage: `radial-gradient(${size} circle at ${x}% ${y}%, ${color}, transparent 70%)`,\n  }),\n  beamPath: (radius: string) => ({ offsetPath: `rect(0 auto auto 0 round ${radius})` }),\n});\n\n/** 倾斜的最大角度（度）与悬停时的放大倍数 */\nconst TILT = 10;\nconst TILT_SCALE = 1.02;\n\n/** 卡片：表面 + 可选的页头与页脚，正文可以显示加载骨架 */\nexport const Card = _component(\n  ({\n    variant,\n    padding,\n    radius,\n    header,\n    extra,\n    footer,\n    loading = false,\n    effect,\n    propsEffect,\n    propsHeader,\n    propsBody,\n    propsFooter,\n    propsSkeleton,\n    children,\n    ...rest\n  }: CardProps) => {\n    const appearance = useDefaults('Card', () => ({ variant, padding, radius }), {\n      variant: 'surface',\n      padding: 'lg',\n      radius: 'lg',\n    });\n    const recipe = useRecipe(cardRecipe);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，骨架与正文互换时都淡入（样式在切换的那一刻加上，动画才会播）；一开始就有内容的卡片不播\n    let revealing = false;\n    const reducedMotion = useReducedMotion();\n    let frame = _state.raw<HTMLElement | null>(null);\n    // 阻尼后的指针位置（-1 到 1，向上为正）；离开时位置不动、strength 淡出。倾斜要慢一点、带回弹；\n    // 阻尼参数按挂上时的效果定（效果一般不中途切换），跟踪的目标随 effect 变\n    const pointer = usePointer(\n      () => (effect === 'tilt' || effect === 'spotlight' ? frame : null),\n      _untrack(effect) === 'tilt' ? { bounce: 0.3, duration: 'lg' } : { duration: 'sm' },\n    );\n\n    /** 效果的光层：倾斜是一层高光，聚光是表面与边框两层，流光是边框一圈里走的光带 */\n    function effectLayers(s: CardParts, shownRadius: Radius) {\n      const x = (pointer.x + 1) * 50;\n      const y = (1 - pointer.y) * 50;\n      const layer = (part: PartLayer, sx?: css.SxStyles, child?: VNodeChild) => (\n        <span\n          {...mergeAttrs<'span'>({ ...part, sx: [part.sx, sx] }, propsEffect, {\n            'aria-hidden': true,\n          })}\n        >\n          {child}\n        </span>\n      );\n      if (effect === 'tilt')\n        return layer(s.effect, cardEffectDynamicStyles.glare(x, y, pointer.strength));\n      if (effect === 'spotlight')\n        return [\n          layer(\n            s.effect,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '20em',\n              `color-mix(in oklab, ${t.colors.accent} 16%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n          layer(\n            s.ring,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '12em',\n              `color-mix(in oklab, ${t.colors.accent} 85%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n        ];\n      return layer(\n        s.ring,\n        undefined,\n        <span\n          {...mergeAttrs<'span'>({\n            ...s.beam,\n            sx: [s.beam.sx, cardEffectDynamicStyles.beamPath(t.radii[shownRadius])],\n          })}\n        />,\n      );\n    }\n\n    return () => {\n      const { variant: shownVariant, padding: shownPadding, radius: shownRadius } = appearance();\n      const s = recipe({\n        variant: shownVariant,\n        padding: shownPadding,\n        extra: extra != null,\n        effect,\n      });\n      if (skeleton.value) revealing = true;\n      const surface = { ...s.root, sx: [s.root.sx, radiusStyles[shownRadius]] };\n      const content = renderContent(s);\n      if (!effect)\n        return (\n          <div {...mergeAttrs<'div'>(surface, rest, { 'aria-busy': loading || undefined })}>\n            {content}\n          </div>\n        );\n      const tilt = effect === 'tilt' && !reducedMotion.value ? pointer.strength : 0;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.frame,\n              sx: [\n                s.frame.sx,\n                radiusStyles[shownRadius],\n                effect === 'tilt' &&\n                  cardEffectDynamicStyles.tiltTransform(\n                    pointer.y * TILT * tilt,\n                    pointer.x * TILT * tilt,\n                    1 + (TILT_SCALE - 1) * tilt,\n                  ),\n              ],\n            },\n            rest,\n            { 'aria-busy': loading || undefined, ref: _toRef(frame) },\n          )}\n        >\n          <div {...mergeAttrs<'div'>(surface)}>{content}</div>\n          {effectLayers(s, shownRadius)}\n        </div>\n      );\n    };\n\n    /** 页头、正文（或骨架）、页脚 */\n    function renderContent(s: CardParts) {\n      return [\n        (header != null || extra != null) && (\n          <div {...mergeAttrs<'div'>(s.header, propsHeader)}>\n            {header}\n            {extra}\n          </div>\n        ),\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.body, sx: [s.body.sx, revealing && !skeleton.value && shimmerStyles.reveal] },\n            propsBody,\n          )}\n        >\n          {skeleton.value ? (\n            <SkeletonText\n              {...mergePartProps<SkeletonTextProps>(\n                { ...s.skeleton, sx: [s.skeleton.sx, shimmerStyles.reveal] },\n                propsSkeleton,\n              )}\n            />\n          ) : (\n            children\n          )}\n        </div>,\n        hasContent(footer) && <div {...mergeAttrs<'div'>(s.footer, propsFooter)}>{footer}</div>,\n      ];\n    }\n  },\n);\n"],"mappings":"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"}

package/dist/display/Checklist.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/display/Checklist.js

@@ -7,7 +7,7 @@ import { VisuallyHidden } from "../base/VisuallyHidden.js";
 import { Progress } from "../feedback/Progress.js";
 import { createVNode, useId } from "vue";
 import { _component, 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 { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from "@lucide/icons";
 //#region src/display/Checklist.tsx
 /**

package/dist/display/Checklist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checklist.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Checklist.tsx"],"sourcesContent":["/**\n * 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。\n * 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。\n *\n *   <Checklist\n *     title=\"结项材料\"\n *     summary\n *     items={[\n *       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },\n *       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },\n *       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },\n *     ]}\n *   />\n *   <Checklist layout=\"inline\" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）\n *   <Checklist layout=\"icons\" aria-label=\"里程碑\" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项\n *   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）\n *\n * summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；\n * 超时的日期用危险色。每项的状态写在给读屏的文字里。\n *\n * 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。\n */\nimport { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 一项的状态 */\nexport interface ChecklistStatuses {\n  /** 完成 */\n  done: unknown;\n  /** 待办（默认） */\n  todo: unknown;\n  /** 超时：过了计划日期还没完成 */\n  overdue: unknown;\n  /** 受阻：等别人、缺前提 */\n  blocked: unknown;\n  /** 不适用：这一次不用做，不算进进度 */\n  skipped: unknown;\n}\n\n/** 清单的一项 */\nexport interface ChecklistItem {\n  /** 唯一的 key；不写时用 label（label 是文字时）或位置 */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 状态，默认 todo */\n  status?: keyof ChecklistStatuses;\n  /** 说明：怎么做、要什么材料、缺的由谁出具 */\n  description?: VNodeChild;\n  /** 负责人（谁处理、谁出具） */\n  owner?: VNodeChild;\n  /** 日期：完成的日期，或计划日期（超时时用危险色） */\n  date?: VNodeChild;\n  /** 证据：附件、报告的链接 */\n  evidence?: VNodeChild;\n  /** 操作：上传证据、去处理、催办（结束边） */\n  action?: VNodeChild;\n}\n\n/** 清单的排法 */\nexport interface ChecklistLayouts {\n  /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */\n  list: unknown;\n  /** 一行排开、放不下换行：状态、名称、日期、证据 */\n  inline: unknown;\n  /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */\n  icons: unknown;\n}\n\n/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */\nexport interface ChecklistProps extends PartProps<'div'> {\n  /** 各项 */\n  items: readonly ChecklistItem[];\n  /**\n   * 排法\n   * @default 'list'\n   */\n  layout?: keyof ChecklistLayouts;\n  /** 上面显示“已完成 2 / 3”与进度条（list 排法） */\n  summary?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */\n  onCheckedChange?: (item: ChecklistItem, done: boolean) => void;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);\n}\n\n/** Checklist 的样式 */\nexport const checklistStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  summary: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    alignItems: 'center',\n    gap: '_md',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  list: { display: 'grid', margin: 0, padding: 0, listStyle: 'none' },\n  // 状态一列、内容一列、操作一列；状态贴着名称那一行\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'start',\n    paddingBlock: '_xs',\n  },\n  status: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '1lh',\n    fontSize: '1.125em',\n  },\n  // 可以勾选时的按钮：只有图标，去掉按钮的外观\n  toggle: {\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    font: 'inherit',\n    borderRadius: '_full',\n    cursor: { default: 'pointer', ':disabled': 'default' },\n  },\n  body: { display: 'grid', gap: '2px', minWidth: 0 },\n  label: { color: '_text', overflowWrap: 'anywhere' },\n  labelPending: { color: '_textMuted' },\n  labelSkipped: { color: '_textMuted', textDecorationLine: 'line-through' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '2px',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  late: { color: '_dangerText' },\n  action: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  inline: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  inlineItem: { display: 'inline-flex', alignItems: 'center', gap: '_xs', whiteSpace: 'nowrap' },\n  icons: { display: 'inline-flex', alignItems: 'center', gap: '2px' },\n});\n\n/** 各状态的图标与颜色 */\nexport const checklistStatusStyles = css.create({\n  done: { color: '_successText' },\n  todo: { color: '_textMuted' },\n  overdue: { color: '_dangerText' },\n  blocked: { color: '_warningText' },\n  skipped: { color: '_textMuted' },\n});\n\nconst statusIcons: Record<keyof ChecklistStatuses, IconData> = {\n  done: CircleCheck,\n  todo: CircleDashed,\n  overdue: CircleAlert,\n  blocked: Ban,\n  skipped: CircleMinus,\n};\n\nconst keyOf = (item: ChecklistItem, index: number) =>\n  item.key ?? (typeof item.label === 'string' ? item.label : String(index));\n\nconst statusOf = (item: ChecklistItem): keyof ChecklistStatuses => item.status ?? 'todo';\n\n/** 完成清单 */\nexport const Checklist = _component(\n  ({\n    items,\n    layout = 'list',\n    summary = false,\n    size,\n    onCheckedChange,\n    propsItem,\n    ...rest\n  }: ChecklistProps) => {\n    const lang = useLang();\n    const id = useId();\n\n    const statusIcon = (item: ChecklistItem) => {\n      const status = statusOf(item);\n      return <Icon icon={statusIcons[status]} sx={checklistStatusStyles[status]} />;\n    };\n\n    /** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */\n    const status = (item: ChecklistItem, labelId: string) => {\n      const state = statusOf(item);\n      if (!onCheckedChange)\n        return (\n          <span {...css.attrs(checklistStyles.status)}>\n            {statusIcon(item)}\n            <VisuallyHidden>{lang.checklistStatus[state]}</VisuallyHidden>\n          </span>\n        );\n      const done = state === 'done';\n      return (\n        <span {...css.attrs(checklistStyles.status)}>\n          <button\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={done}\n            aria-labelledby={labelId}\n            aria-describedby={`${labelId}-status`}\n            disabled={state === 'skipped' || state === 'blocked'}\n            onClick={() => onCheckedChange(item, !done)}\n            {...css.attrs(checklistStyles.toggle, focusRingStyles.visible)}\n          >\n            {statusIcon(item)}\n          </button>\n          <VisuallyHidden id={`${labelId}-status`}>{lang.checklistStatus[state]}</VisuallyHidden>\n        </span>\n      );\n    };\n\n    const labelSx = (item: ChecklistItem) => {\n      const state = statusOf(item);\n      return [\n        checklistStyles.label,\n        state === 'skipped'\n          ? checklistStyles.labelSkipped\n          : state !== 'done' && checklistStyles.labelPending,\n      ];\n    };\n\n    /** 读屏念的整组：名称与状态（icons 排法） */\n    const iconsLabel = () =>\n      lang.checklistIconsLabel(\n        items.map((item) =>\n          lang.checklistItemState(\n            typeof item.label === 'string' ? item.label : '',\n            lang.checklistStatus[statusOf(item)],\n          ),\n        ),\n      );\n\n    const counted = () => items.filter((item) => statusOf(item) !== 'skipped');\n    const doneCount = () => counted().filter((item) => statusOf(item) === 'done').length;\n\n    return () => {\n      if (layout === 'icons') {\n        const label = iconsLabel();\n        return (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [checklistStyles.icons, size && fontSizeStyles[size]] },\n              rest as PartProps<'span'>,\n              { role: 'img', 'aria-label': label, title: label },\n            )}\n          >\n            {items.map((item, index) => (\n              <span key={keyOf(item, index)}>{statusIcon(item)}</span>\n            ))}\n          </span>\n        );\n      }\n\n      if (layout === 'inline')\n        return (\n          <ul\n            {...mergeAttrs<'ul'>(\n              { sx: [checklistStyles.inline, size && fontSizeStyles[size]] },\n              rest as PartProps<'ul'>,\n            )}\n          >\n            {items.map((item, index) => {\n              const labelId = `${id}-${index}`;\n              return (\n                <li key={keyOf(item, index)} {...css.attrs(checklistStyles.inlineItem)}>\n                  {status(item, labelId)}\n                  <span id={labelId} {...css.attrs(labelSx(item))}>\n                    {item.label}\n                  </span>\n                  {hasContent(item.date) && (\n                    <span\n                      {...css.attrs(\n                        checklistStyles.meta,\n                        statusOf(item) === 'overdue' && checklistStyles.late,\n                      )}\n                    >\n                      {item.date}\n                    </span>\n                  )}\n                  {item.evidence}\n                </li>\n              );\n            })}\n          </ul>\n        );\n\n      const total = counted().length;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [checklistStyles.root, size && fontSizeStyles[size]] }, rest)}\n        >\n          {summary && total > 0 && (\n            <div {...css.attrs(checklistStyles.summary)}>\n              <span>{lang.checklistSummary(doneCount(), total)}</span>\n              <Progress\n                value={doneCount()}\n                max={total}\n                size=\"xs\"\n                tone={doneCount() === total ? 'success' : 'accent'}\n                aria-label={lang.checklistSummary(doneCount(), total)}\n              />\n            </div>\n          )}\n          <ul {...css.attrs(checklistStyles.list)}>\n            {items.map((item, index) => {\n              const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n              const labelId = `${id}-${index}`;\n              const meta = [item.owner, item.date, item.evidence].some(hasContent);\n              return (\n                <li\n                  key={keyOf(item, index)}\n                  {...mergeAttrs<'li'>({ sx: checklistStyles.item }, own)}\n                  data-status={statusOf(item)}\n                >\n                  {status(item, labelId)}\n                  <div {...css.attrs(checklistStyles.body)}>\n                    <span id={labelId} {...css.attrs(labelSx(item))}>\n                      {item.label}\n                    </span>\n                    {hasContent(item.description) && (\n                      <span {...css.attrs(checklistStyles.description)}>{item.description}</span>\n                    )}\n                    {meta && (\n                      <span {...css.attrs(checklistStyles.meta)}>\n                        {hasContent(item.owner) && <span>{item.owner}</span>}\n                        {hasContent(item.date) && (\n                          <span\n                            {...css.attrs(statusOf(item) === 'overdue' && checklistStyles.late)}\n                          >\n                            {item.date}\n                          </span>\n                        )}\n                        {item.evidence}\n                      </span>\n                    )}\n                  </div>\n                  {hasContent(item.action) ? (\n                    <div {...css.attrs(checklistStyles.action)}>{item.action}</div>\n                  ) : (\n                    <span />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Checklist.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Checklist.tsx"],"sourcesContent":["/**\n * 完成清单：一组要做完的事，每项的状态（完成、待办、超时、不适用、受阻）与它的上下文——怎么做、谁负责、哪天、证据、去处理。\n * 里程碑与交付证据、结项材料、上线检查、新用户的引导任务。参考 Shopify Polaris 的 Setup guide、GitHub 的任务列表。\n *\n *   <Checklist\n *     title=\"结项材料\"\n *     summary\n *     items={[\n *       { label: '验收报告', status: 'done', date: '10-12', evidence: <Link href={url}>验证报告.pdf</Link> },\n *       { label: '财务复核意见', status: 'overdue', owner: '财务部', date: '计划 10-20', action: <Button>催办</Button> },\n *       { label: '合同签订记录', description: '谈定价格与生效日期，采购经理签字', owner: '采购部' },\n *     ]}\n *   />\n *   <Checklist layout=\"inline\" items={…} />                    一行排开、放不下换行（详情行、卡片的一角）\n *   <Checklist layout=\"icons\" aria-label=\"里程碑\" items={…} />  只有一排状态图标（表格的格子里），读屏念每一项\n *   <Checklist items={tasks} onCheckedChange={(item, done) => save(item.key, done)} />   可以勾选（上线检查、引导任务）\n *\n * summary 在上面显示“已完成 2 / 3”与进度条（不适用的不算）。没完成的名称是次要色，不适用的划掉；\n * 超时的日期用危险色。每项的状态写在给读屏的文字里。\n *\n * 部件：Root（div）、Summary（汇总行）、List（ul）、Item（li，可以按项计算）、Status（状态图标，可勾选时是按钮）、Label、Meta。\n */\nimport { Ban, CircleAlert, CircleCheck, CircleDashed, CircleMinus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 一项的状态 */\nexport interface ChecklistStatuses {\n  /** 完成 */\n  done: unknown;\n  /** 待办（默认） */\n  todo: unknown;\n  /** 超时：过了计划日期还没完成 */\n  overdue: unknown;\n  /** 受阻：等别人、缺前提 */\n  blocked: unknown;\n  /** 不适用：这一次不用做，不算进进度 */\n  skipped: unknown;\n}\n\n/** 清单的一项 */\nexport interface ChecklistItem {\n  /** 唯一的 key；不写时用 label（label 是文字时）或位置 */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 状态，默认 todo */\n  status?: keyof ChecklistStatuses;\n  /** 说明：怎么做、要什么材料、缺的由谁出具 */\n  description?: VNodeChild;\n  /** 负责人（谁处理、谁出具） */\n  owner?: VNodeChild;\n  /** 日期：完成的日期，或计划日期（超时时用危险色） */\n  date?: VNodeChild;\n  /** 证据：附件、报告的链接 */\n  evidence?: VNodeChild;\n  /** 操作：上传证据、去处理、催办（结束边） */\n  action?: VNodeChild;\n}\n\n/** 清单的排法 */\nexport interface ChecklistLayouts {\n  /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */\n  list: unknown;\n  /** 一行排开、放不下换行：状态、名称、日期、证据 */\n  inline: unknown;\n  /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */\n  icons: unknown;\n}\n\n/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */\nexport interface ChecklistProps extends PartProps<'div'> {\n  /** 各项 */\n  items: readonly ChecklistItem[];\n  /**\n   * 排法\n   * @default 'list'\n   */\n  layout?: keyof ChecklistLayouts;\n  /** 上面显示“已完成 2 / 3”与进度条（list 排法） */\n  summary?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */\n  onCheckedChange?: (item: ChecklistItem, done: boolean) => void;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);\n}\n\n/** Checklist 的样式 */\nexport const checklistStyles = css.create({\n  root: { display: 'grid', gap: '_sm' },\n  summary: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    alignItems: 'center',\n    gap: '_md',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  list: { display: 'grid', margin: 0, padding: 0, listStyle: 'none' },\n  // 状态一列、内容一列、操作一列；状态贴着名称那一行\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'start',\n    paddingBlock: '_xs',\n  },\n  status: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '1lh',\n    fontSize: '1.125em',\n  },\n  // 可以勾选时的按钮：只有图标，去掉按钮的外观\n  toggle: {\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    font: 'inherit',\n    borderRadius: '_full',\n    cursor: { default: 'pointer', ':disabled': 'default' },\n  },\n  body: { display: 'grid', gap: '2px', minWidth: 0 },\n  label: { color: '_text', overflowWrap: 'anywhere' },\n  labelPending: { color: '_textMuted' },\n  labelSkipped: { color: '_textMuted', textDecorationLine: 'line-through' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n  meta: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '2px',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  late: { color: '_dangerText' },\n  action: { display: 'flex', alignItems: 'center', gap: '_xs' },\n  inline: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_lg',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  inlineItem: { display: 'inline-flex', alignItems: 'center', gap: '_xs', whiteSpace: 'nowrap' },\n  icons: { display: 'inline-flex', alignItems: 'center', gap: '2px' },\n});\n\n/** 各状态的图标与颜色 */\nexport const checklistStatusStyles = css.create({\n  done: { color: '_successText' },\n  todo: { color: '_textMuted' },\n  overdue: { color: '_dangerText' },\n  blocked: { color: '_warningText' },\n  skipped: { color: '_textMuted' },\n});\n\nconst statusIcons: Record<keyof ChecklistStatuses, IconData> = {\n  done: CircleCheck,\n  todo: CircleDashed,\n  overdue: CircleAlert,\n  blocked: Ban,\n  skipped: CircleMinus,\n};\n\nconst keyOf = (item: ChecklistItem, index: number) =>\n  item.key ?? (typeof item.label === 'string' ? item.label : String(index));\n\nconst statusOf = (item: ChecklistItem): keyof ChecklistStatuses => item.status ?? 'todo';\n\n/** 完成清单 */\nexport const Checklist = _component(\n  ({\n    items,\n    layout = 'list',\n    summary = false,\n    size,\n    onCheckedChange,\n    propsItem,\n    ...rest\n  }: ChecklistProps) => {\n    const lang = useLang();\n    const id = useId();\n\n    const statusIcon = (item: ChecklistItem) => {\n      const status = statusOf(item);\n      return <Icon icon={statusIcons[status]} sx={checklistStatusStyles[status]} />;\n    };\n\n    /** 状态：可以勾选时是复选按钮（名称是这一项的名称），否则是图标加给读屏的状态文字 */\n    const status = (item: ChecklistItem, labelId: string) => {\n      const state = statusOf(item);\n      if (!onCheckedChange)\n        return (\n          <span {...css.attrs(checklistStyles.status)}>\n            {statusIcon(item)}\n            <VisuallyHidden>{lang.checklistStatus[state]}</VisuallyHidden>\n          </span>\n        );\n      const done = state === 'done';\n      return (\n        <span {...css.attrs(checklistStyles.status)}>\n          <button\n            type=\"button\"\n            role=\"checkbox\"\n            aria-checked={done}\n            aria-labelledby={labelId}\n            aria-describedby={`${labelId}-status`}\n            disabled={state === 'skipped' || state === 'blocked'}\n            onClick={() => onCheckedChange(item, !done)}\n            {...css.attrs(checklistStyles.toggle, focusRingStyles.visible)}\n          >\n            {statusIcon(item)}\n          </button>\n          <VisuallyHidden id={`${labelId}-status`}>{lang.checklistStatus[state]}</VisuallyHidden>\n        </span>\n      );\n    };\n\n    const labelSx = (item: ChecklistItem) => {\n      const state = statusOf(item);\n      return [\n        checklistStyles.label,\n        state === 'skipped'\n          ? checklistStyles.labelSkipped\n          : state !== 'done' && checklistStyles.labelPending,\n      ];\n    };\n\n    /** 读屏念的整组：名称与状态（icons 排法） */\n    const iconsLabel = () =>\n      lang.checklistIconsLabel(\n        items.map((item) =>\n          lang.checklistItemState(\n            typeof item.label === 'string' ? item.label : '',\n            lang.checklistStatus[statusOf(item)],\n          ),\n        ),\n      );\n\n    const counted = () => items.filter((item) => statusOf(item) !== 'skipped');\n    const doneCount = () => counted().filter((item) => statusOf(item) === 'done').length;\n\n    return () => {\n      if (layout === 'icons') {\n        const label = iconsLabel();\n        return (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [checklistStyles.icons, size && fontSizeStyles[size]] },\n              rest as PartProps<'span'>,\n              { role: 'img', 'aria-label': label, title: label },\n            )}\n          >\n            {items.map((item, index) => (\n              <span key={keyOf(item, index)}>{statusIcon(item)}</span>\n            ))}\n          </span>\n        );\n      }\n\n      if (layout === 'inline')\n        return (\n          <ul\n            {...mergeAttrs<'ul'>(\n              { sx: [checklistStyles.inline, size && fontSizeStyles[size]] },\n              rest as PartProps<'ul'>,\n            )}\n          >\n            {items.map((item, index) => {\n              const labelId = `${id}-${index}`;\n              return (\n                <li key={keyOf(item, index)} {...css.attrs(checklistStyles.inlineItem)}>\n                  {status(item, labelId)}\n                  <span id={labelId} {...css.attrs(labelSx(item))}>\n                    {item.label}\n                  </span>\n                  {hasContent(item.date) && (\n                    <span\n                      {...css.attrs(\n                        checklistStyles.meta,\n                        statusOf(item) === 'overdue' && checklistStyles.late,\n                      )}\n                    >\n                      {item.date}\n                    </span>\n                  )}\n                  {item.evidence}\n                </li>\n              );\n            })}\n          </ul>\n        );\n\n      const total = counted().length;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [checklistStyles.root, size && fontSizeStyles[size]] }, rest)}\n        >\n          {summary && total > 0 && (\n            <div {...css.attrs(checklistStyles.summary)}>\n              <span>{lang.checklistSummary(doneCount(), total)}</span>\n              <Progress\n                value={doneCount()}\n                max={total}\n                size=\"xs\"\n                tone={doneCount() === total ? 'success' : 'accent'}\n                aria-label={lang.checklistSummary(doneCount(), total)}\n              />\n            </div>\n          )}\n          <ul {...css.attrs(checklistStyles.list)}>\n            {items.map((item, index) => {\n              const own = typeof propsItem === 'function' ? propsItem(item) : propsItem;\n              const labelId = `${id}-${index}`;\n              const meta = [item.owner, item.date, item.evidence].some(hasContent);\n              return (\n                <li\n                  key={keyOf(item, index)}\n                  {...mergeAttrs<'li'>({ sx: checklistStyles.item }, own)}\n                  data-status={statusOf(item)}\n                >\n                  {status(item, labelId)}\n                  <div {...css.attrs(checklistStyles.body)}>\n                    <span id={labelId} {...css.attrs(labelSx(item))}>\n                      {item.label}\n                    </span>\n                    {hasContent(item.description) && (\n                      <span {...css.attrs(checklistStyles.description)}>{item.description}</span>\n                    )}\n                    {meta && (\n                      <span {...css.attrs(checklistStyles.meta)}>\n                        {hasContent(item.owner) && <span>{item.owner}</span>}\n                        {hasContent(item.date) && (\n                          <span\n                            {...css.attrs(statusOf(item) === 'overdue' && checklistStyles.late)}\n                          >\n                            {item.date}\n                          </span>\n                        )}\n                        {item.evidence}\n                      </span>\n                    )}\n                  </div>\n                  {hasContent(item.action) ? (\n                    <div {...css.attrs(checklistStyles.action)}>{item.action}</div>\n                  ) : (\n                    <span />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Collapse.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';
 /** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */

package/dist/display/Collapse.js

@@ -5,7 +5,7 @@ import { useMounted } from "../utils/dom/mounted.js";
 import { useLazyContent } from "../utils/motion/presence.js";
 import { createVNode, ref, shallowRef } from "vue";
 import { _component, bindable, childrenProp, effect, 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/display/Collapse.tsx
 /** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */
 var supportsUntilFound = typeof HTMLElement !== "undefined" && "onbeforematch" in HTMLElement.prototype;

package/dist/display/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","names":["_vtp_bindable","_vtp_childrenProp","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/display/Collapse.tsx"],"sourcesContent":["/**\n * 展开收起的内容区，带高度过渡。触发器另外写，或者用 Collapsible。\n *\n *   <Collapse _open={open}>内容</Collapse>\n *\n * 高度过渡用 grid-template-rows 0fr ↔ 1fr，各浏览器都能动画（interpolate-size 只有 Chromium）。\n * 收起并且过渡结束后：\n *   - 支持 hidden=\"until-found\" 的浏览器加上它：页内搜索、锚点命中时浏览器自动展开，这里把 open 写回\n *   - 不支持的（Safari）加 inert：收起的内容不能被 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 { useLazyContent } from '../utils/motion/presence';\nimport { useMounted } from '../utils/dom/mounted';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { afterTransitions } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */\nexport interface CollapseProps extends PartProps<'div', 'hidden' | 'inert'> {\n  /** 是否展开：父级写 _open={x}；页内搜索命中收起的内容时自动展开并写回 */\n  _open?: boolean;\n  children?: VNodeChild;\n  /** 内容层：外层负责高度过渡，内容层裁掉溢出 */\n  propsContent?: PartProps<'div'>;\n  /**\n   * 第一次展开时才渲染内容，之后收起也保留（内容很重、多数人不会展开时用）。\n   * 代价：还没展开过的内容页内搜索找不到\n   */\n  lazy?: boolean;\n}\n\nconst supportsUntilFound =\n  typeof HTMLElement !== 'undefined' && 'onbeforematch' in HTMLElement.prototype;\n\n/** Collapse 的样式：root、open、content */\nexport const collapseStyles = css.create({\n  root: {\n    display: 'grid',\n    gridTemplateRows: '0fr',\n    transition: `grid-template-rows ${t.durations.md} ${t.easings.standard}`,\n  },\n  open: { gridTemplateRows: '1fr' },\n  // 网格项默认的最小高度是内容高度，要设为 0 才能收到 0fr\n  content: { minHeight: 0, overflow: 'hidden' },\n});\n\n/** 展开收起的内容区（div），带高度过渡；收起后可被页内搜索找到并自动展开 */\nexport const Collapse = _component(\n  ({\n    _open: open = _bindable(false),\n    children,\n    propsContent,\n    lazy = false,\n    ...rest\n  }: CollapseProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    // 完全收起（过渡已结束）：这时才隐藏内容，收起的过程中内容仍要可见\n    let collapsed = _state(_untrack(!open));\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n\n    // 服务端不知道浏览器支不支持 until-found：挂载前按不支持渲染（与服务端的 HTML 一致），挂载后再换\n    const mounted = useMounted();\n    const untilFound = () => supportsUntilFound && mounted.value;\n\n    _effect(() => {\n      if (open) {\n        collapsed = false;\n        return;\n      }\n      // 一开始就是收起的：没有过渡要等。不然每个收起的 Collapse 挂载时都要对整棵内容 getAnimations，\n      // 一页十来个收起的源码就是十来次样式计算\n      if (_untrack(collapsed)) return;\n      let cancelled = false;\n      void afterTransitions(root!).then(() => {\n        if (!cancelled) collapsed = true;\n      });\n      return () => (cancelled = true);\n    });\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: collapseStyles.root }, rest, {\n          sx: open && collapseStyles.open,\n          ref: _toRef(root),\n          hidden: collapsed && untilFound() ? 'until-found' : undefined,\n          inert: collapsed && !untilFound() ? true : undefined,\n          onBeforematch: () => (open = true),\n        })}\n        data-state={open ? 'open' : 'closed'}\n      >\n        <div {...mergeAttrs<'div'>({ sx: collapseStyles.content }, propsContent)}>\n          {showContent() && children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,qBACJ,OAAO,gBAAgB,eAAe,mBAAmB,YAAY;;AAGvE,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,kBAAkB;EAClB,YAAY,sBAAsB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChE;CACA,MAAM,EAAE,kBAAkB,MAAM;CAEhC,SAAS;EAAE,WAAW;EAAG,UAAU;CAAS;AAC9C,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAMqB;CAAA,MAAA,OAAAA,SAAA,QAAA,eALK,OAAK,KAAA,IAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGtB,KAAK;CAAA,MACT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,OAAIC,WAAkC,IAAI;CAE9C,IAAI,YAASC,IAAAC,cAAmB,CAAA,KAAA,KAAK,CAAA;CACrC,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CAGA,MAAM,UAAU,WAAW;CAC3B,MAAM,mBAAmB,sBAAsB,QAAQ;CAEvD,aAAc;EACZ,IAAA,KAAA,OAAU;GACR,UAAA,QAAY;GACZ;EACF;EAGA,IAAAA,cAAA,UAAA,KAAA,GAAyB;EACzB,IAAI,YAAY;EAChB,iBAAqB,KAAA,KAAM,CAAC,CAAC,WAAW;GACtC,IAAI,CAAC,WAAW,UAAA,QAAY;EAC9B,CAAC;EACD,aAAc,YAAY;CAC5B,CAAC;CAED,aAAOC,YAAA,OAAAC,cAEC,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,MAAM;EACvD,IAAI,KAAA,SAAQ,eAAe;EAC3B,KAAG;EACH,QAAQ,UAAA,SAAa,WAAW,IAAI,gBAAgB,KAAA;EACpD,OAAO,UAAA,SAAa,CAAC,WAAW,IAAI,OAAO,KAAA;EAC3C,qBAAsB,KAAA,QAAO;CAC/B,CAAC,GAAC,EAAA,cACU,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAAAD,YAAA,OAE3B,WAAkB,EAAE,IAAI,eAAe,QAAQ,GAAC,aAAA,KAAc,GAAC,CACrE,YAAY,KAAC,SAAA,KAAY,CAAA,CAAA,CAAA;AAIlC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Collapse.js","names":["_vtp_bindable","_vtp_childrenProp","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/display/Collapse.tsx"],"sourcesContent":["/**\n * 展开收起的内容区，带高度过渡。触发器另外写，或者用 Collapsible。\n *\n *   <Collapse _open={open}>内容</Collapse>\n *\n * 高度过渡用 grid-template-rows 0fr ↔ 1fr，各浏览器都能动画（interpolate-size 只有 Chromium）。\n * 收起并且过渡结束后：\n *   - 支持 hidden=\"until-found\" 的浏览器加上它：页内搜索、锚点命中时浏览器自动展开，这里把 open 写回\n *   - 不支持的（Safari）加 inert：收起的内容不能被 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 { useLazyContent } from '../utils/motion/presence';\nimport { useMounted } from '../utils/dom/mounted';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { afterTransitions } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层的 div 上；要分区语义时在外面包 section */\nexport interface CollapseProps extends PartProps<'div', 'hidden' | 'inert'> {\n  /** 是否展开：父级写 _open={x}；页内搜索命中收起的内容时自动展开并写回 */\n  _open?: boolean;\n  children?: VNodeChild;\n  /** 内容层：外层负责高度过渡，内容层裁掉溢出 */\n  propsContent?: PartProps<'div'>;\n  /**\n   * 第一次展开时才渲染内容，之后收起也保留（内容很重、多数人不会展开时用）。\n   * 代价：还没展开过的内容页内搜索找不到\n   */\n  lazy?: boolean;\n}\n\nconst supportsUntilFound =\n  typeof HTMLElement !== 'undefined' && 'onbeforematch' in HTMLElement.prototype;\n\n/** Collapse 的样式：root、open、content */\nexport const collapseStyles = css.create({\n  root: {\n    display: 'grid',\n    gridTemplateRows: '0fr',\n    transition: `grid-template-rows ${t.durations.md} ${t.easings.standard}`,\n  },\n  open: { gridTemplateRows: '1fr' },\n  // 网格项默认的最小高度是内容高度，要设为 0 才能收到 0fr\n  content: { minHeight: 0, overflow: 'hidden' },\n});\n\n/** 展开收起的内容区（div），带高度过渡；收起后可被页内搜索找到并自动展开 */\nexport const Collapse = _component(\n  ({\n    _open: open = _bindable(false),\n    children,\n    propsContent,\n    lazy = false,\n    ...rest\n  }: CollapseProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    // 完全收起（过渡已结束）：这时才隐藏内容，收起的过程中内容仍要可见\n    let collapsed = _state(_untrack(!open));\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n\n    // 服务端不知道浏览器支不支持 until-found：挂载前按不支持渲染（与服务端的 HTML 一致），挂载后再换\n    const mounted = useMounted();\n    const untilFound = () => supportsUntilFound && mounted.value;\n\n    _effect(() => {\n      if (open) {\n        collapsed = false;\n        return;\n      }\n      // 一开始就是收起的：没有过渡要等。不然每个收起的 Collapse 挂载时都要对整棵内容 getAnimations，\n      // 一页十来个收起的源码就是十来次样式计算\n      if (_untrack(collapsed)) return;\n      let cancelled = false;\n      void afterTransitions(root!).then(() => {\n        if (!cancelled) collapsed = true;\n      });\n      return () => (cancelled = true);\n    });\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: collapseStyles.root }, rest, {\n          sx: open && collapseStyles.open,\n          ref: _toRef(root),\n          hidden: collapsed && untilFound() ? 'until-found' : undefined,\n          inert: collapsed && !untilFound() ? true : undefined,\n          onBeforematch: () => (open = true),\n        })}\n        data-state={open ? 'open' : 'closed'}\n      >\n        <div {...mergeAttrs<'div'>({ sx: collapseStyles.content }, propsContent)}>\n          {showContent() && children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,qBACJ,OAAO,gBAAgB,eAAe,mBAAmB,YAAY;;AAGvE,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,kBAAkB;EAClB,YAAY,sBAAsB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChE;CACA,MAAM,EAAE,kBAAkB,MAAM;CAEhC,SAAS;EAAE,WAAW;EAAG,UAAU;CAAS;AAC9C,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAMqB;CAAA,MAAA,OAAAA,SAAA,QAAA,eALK,OAAK,KAAA,IAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGtB,KAAK;CAAA,MACT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,OAAIC,WAAkC,IAAI;CAE9C,IAAI,YAASC,IAAAC,cAAmB,CAAA,KAAA,KAAK,CAAA;CACrC,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CAGA,MAAM,UAAU,WAAW;CAC3B,MAAM,mBAAmB,sBAAsB,QAAQ;CAEvD,aAAc;EACZ,IAAA,KAAA,OAAU;GACR,UAAA,QAAY;GACZ;EACF;EAGA,IAAAA,cAAA,UAAA,KAAA,GAAyB;EACzB,IAAI,YAAY;EAChB,iBAAqB,KAAA,KAAM,CAAC,CAAC,WAAW;GACtC,IAAI,CAAC,WAAW,UAAA,QAAY;EAC9B,CAAC;EACD,aAAc,YAAY;CAC5B,CAAC;CAED,aAAOC,YAAA,OAAAC,cAEC,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,MAAM;EACvD,IAAI,KAAA,SAAQ,eAAe;EAC3B,KAAG;EACH,QAAQ,UAAA,SAAa,WAAW,IAAI,gBAAgB,KAAA;EACpD,OAAO,UAAA,SAAa,CAAC,WAAW,IAAI,OAAO,KAAA;EAC3C,qBAAsB,KAAA,QAAO;CAC/B,CAAC,GAAC,EAAA,cACU,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAAAD,YAAA,OAE3B,WAAkB,EAAE,IAAI,eAAe,QAAQ,GAAC,aAAA,KAAc,GAAC,CACrE,YAAY,KAAC,SAAA,KAAY,CAAA,CAAA,CAAA;AAIlC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Descriptions.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 CopyButtonProps } from '../base/CopyButton';
 import { type PartProps } from '../utils/props';

package/dist/display/Descriptions.js

@@ -8,7 +8,7 @@ import { CopyButton } from "../base/CopyButton.js";
 import { plainText } from "../utils/data/text.js";
 import { createVNode, ref, shallowRef } from "vue";
 import { _component, 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/display/Descriptions.tsx
 /** 描述列表里的一项 */
 /** 标签与值的排列 */

package/dist/display/Descriptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Descriptions.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Descriptions.tsx"],"sourcesContent":["/**\n * 描述列表（div > dl）：键值对的详情（订单信息、用户资料），可分栏、可跨列，标签在左（横排）或在上（竖排）。\n * 语义是 dl > div > dt + dd（HTML 允许用 div 给 dt / dd 分组），读屏按“名称、值”念。参考 Ant Design Descriptions。\n *\n *   <Descriptions\n *     title=\"订单信息\"\n *     columns={3}\n *     items={[\n *       { label: '订单号', value: 'A-1024' },\n *       { label: '状态', value: <Badge tone=\"success\">已发货</Badge> },\n *       { label: '收货地址', value: address, span: 3 },\n *     ]}\n *   />\n *\n * 容器变窄（不到 32em）时自动排成一列（容器查询）。columns=\"auto\" 时按容器的宽度自己定栏数：每栏不窄于 minItemWidth，\n * 最多 maxColumns 栏（同一份详情放在抽屉、整页里各自合适）；跨列（span）按算出的栏数封顶。\n * 项写 copyable 时值后面有复制按钮（编号、单号、地址这类要复制去别处的），复制的文字默认是值的文字，可以用 copyText 指定。\n *\n * 部件：Root（div）、Title、List（dl）、Item（div）、Label（dt）、Value（dd）、Copy（CopyButton）。\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 { clamp } from '../utils/data/number';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useLang } from '../config/context';\nimport { plainText } from '../utils/data/text';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 描述列表里的一项 */\nexport interface DescriptionItem {\n  /** 唯一的 key；不写时用 label（label 是文字时） */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 值 */\n  value: VNodeChild;\n  /** 占几列，默认 1；超过栏数时按栏数 */\n  span?: number;\n  /** 值后面放复制按钮 */\n  copyable?: boolean;\n  /** 复制的文字；不写时是值的文字（值是文字或数字时） */\n  copyText?: string;\n}\n\n/** 标签与值的排列 */\nexport interface DescriptionsLayouts {\n  /** 横排（默认）：标签在左、值在右 */\n  horizontal: unknown;\n  /** 竖排：标签在上、值在下 */\n  vertical: unknown;\n  /** 行内：各项一行排开、放不下换行（页头里的编号、团队、主办这类关键信息）；columns 不起作用 */\n  inline: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface DescriptionsProps extends PartProps<'div', 'title'> {\n  /** 各项 */\n  items: readonly DescriptionItem[];\n  /** 标题 */\n  title?: VNodeChild;\n  /** 分几栏，默认 1；'auto' 时按容器的宽度定（见 minItemWidth、maxColumns） */\n  columns?: number | 'auto';\n  /** columns 为 'auto' 时每栏的最小宽度（px），默认 240 */\n  minItemWidth?: number;\n  /** columns 为 'auto' 时最多几栏，默认 4 */\n  maxColumns?: number;\n  /** 标签与值的排列，默认 horizontal */\n  layout?: keyof DescriptionsLayouts;\n  /** 带边框（表格样式）：标签有底色，各项之间有分隔线 */\n  bordered?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 列表（dl）的部件属性 */\n  propsList?: PartProps<'dl'>;\n  /** 每一项（div）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'div'> | ((item: DescriptionItem, index: number) => PartProps<'div'>);\n  /** 名称（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n}\n\n/** Descriptions 的样式：root、title、list、item、label、value 与各排列、边框 */\nexport const descriptionsStyles = css.create({\n  // 容器查询的容器：dl 按它的宽度决定要不要排成一列\n  root: { containerType: 'inline-size', display: 'grid', gap: '_md' },\n  title: { fontWeight: '_semibold', fontSize: '_md' },\n  list: {\n    display: 'grid',\n    columnGap: '_xl',\n    rowGap: '_md',\n    margin: 0,\n  },\n  // 用长写：长写优先于简写（引擎把简写排在前面），gap: 0 压不住 list 的 columnGap / rowGap\n  listBordered: {\n    columnGap: 0,\n    rowGap: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    overflow: 'hidden',\n  },\n  item: { minWidth: 0 },\n  itemHorizontal: { display: 'flex', gap: '_md', alignItems: 'baseline' },\n  itemVertical: { display: 'grid', gap: '_xs' },\n  // 行内：dl 改成换行的一行，项内标签与值挨着\n  listInline: { display: 'flex', flexWrap: 'wrap', columnGap: '_xl', rowGap: '_xs' },\n  itemInline: { display: 'flex', gap: '_xs', alignItems: 'baseline' },\n  itemBordered: {\n    alignItems: 'stretch',\n    gap: 0,\n    // 每格的上、起始边画线，外框由 dl 画；第一行、第一列的线被 dl 的边框盖住\n    marginBlockStart: `calc(-1 * ${t.borderWidths.xs})`,\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderBlockStartWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_borderMuted',\n  },\n  label: { flexShrink: 0, margin: 0, color: '_textMuted' },\n  cellBordered: { paddingBlock: '_sm', paddingInline: '_md' },\n  // 暗色主题的 surfaceMuted 与 surface 同色，标签格要在两种模式下都看得出来\n  labelBordered: { backgroundColor: '_fill', minWidth: '8em' },\n  value: { minWidth: 0, margin: 0, color: '_text', overflowWrap: 'anywhere' },\n  // 有复制按钮的值：按钮紧跟在文字后面，文字换行时按钮在第一行\n  valueCopyable: { display: 'flex', alignItems: 'baseline', gap: '_xs' },\n  copy: { flexShrink: 0, marginBlock: '-0.25em' },\n});\n\n// 栏数与跨度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Descriptions 的样式：columns（栏数）、span（跨几栏） */\nexport const descriptionsGridStyles = css.create({\n  // 容器不到 32em 时排成一列\n  columns: (count: number) => ({\n    gridTemplateColumns: {\n      default: `repeat(${count}, minmax(0, 1fr))`,\n      '@container (max-width: 32em)': '1fr',\n    },\n  }),\n  span: (count: number) => ({\n    gridColumn: { default: `span ${count}`, '@container (max-width: 32em)': 'auto' },\n  }),\n  // columns=\"auto\"：栏数已经按宽度算好，不再用容器查询\n  autoColumns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  autoSpan: (count: number) => ({ gridColumn: `span ${count}` }),\n});\n\n/** 描述列表：键值对，可分栏、可跨列 */\nexport const Descriptions = _component(\n  ({\n    items,\n    title,\n    columns = 1,\n    minItemWidth = 240,\n    maxColumns = 4,\n    layout = 'horizontal',\n    bordered = false,\n    size,\n    propsTitle,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    propsCopy,\n    ...rest\n  }: DescriptionsProps) => {\n    const lang = useLang();\n    let list = _state.raw<HTMLElement | null>(null);\n    // columns=\"auto\"：按列表的宽度算栏数\n    let width = _state(0);\n    useResizeObserver(\n      () => list,\n      ([entry]) => (width = entry?.contentRect.width ?? 0),\n    );\n    const auto = () => columns === 'auto';\n    const count = () =>\n      auto() ? clamp(Math.floor(width / minItemWidth), 1, maxColumns) : (columns as number);\n\n    /** 复制的文字：copyText，否则值是文字或数字时就是它 */\n    const copyTextOf = (item: DescriptionItem) =>\n      item.copyText ??\n      (typeof item.value === 'string' || typeof item.value === 'number' ? String(item.value) : '');\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [descriptionsStyles.root, size && fontSizeStyles[size]] },\n          rest,\n        )}\n        data-layout={layout}\n      >\n        {hasContent(title) && (\n          <div {...mergeAttrs<'div'>({ sx: descriptionsStyles.title }, propsTitle)}>{title}</div>\n        )}\n        <dl\n          {...mergeAttrs<'dl'>(\n            {\n              sx: [\n                descriptionsStyles.list,\n                layout === 'inline'\n                  ? descriptionsStyles.listInline\n                  : auto()\n                    ? descriptionsGridStyles.autoColumns(count())\n                    : descriptionsGridStyles.columns(count()),\n                bordered && descriptionsStyles.listBordered,\n              ],\n            },\n            propsList,\n            { ref: _toRef(list) },\n          )}\n        >\n          {items.map((item, index) => {\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const span = clamp(item.span ?? 1, 1, count());\n            return (\n              <div\n                key={item.key ?? (typeof item.label === 'string' ? item.label : index)}\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      layout === 'vertical'\n                        ? descriptionsStyles.itemVertical\n                        : layout === 'inline'\n                          ? descriptionsStyles.itemInline\n                          : descriptionsStyles.itemHorizontal,\n                      bordered && descriptionsStyles.itemBordered,\n                      descriptionsStyles.item,\n                      layout !== 'inline' &&\n                        span > 1 &&\n                        (auto()\n                          ? descriptionsGridStyles.autoSpan(span)\n                          : descriptionsGridStyles.span(span)),\n                    ],\n                  },\n                  own,\n                )}\n              >\n                <dt\n                  {...mergeAttrs<'dt'>(\n                    {\n                      sx: [\n                        descriptionsStyles.label,\n                        bordered && [\n                          descriptionsStyles.cellBordered,\n                          descriptionsStyles.labelBordered,\n                        ],\n                      ],\n                    },\n                    propsLabel,\n                  )}\n                >\n                  {item.label}\n                </dt>\n                <dd\n                  {...mergeAttrs<'dd'>(\n                    {\n                      sx: [\n                        descriptionsStyles.value,\n                        bordered && descriptionsStyles.cellBordered,\n                        item.copyable && descriptionsStyles.valueCopyable,\n                      ],\n                    },\n                    propsValue,\n                  )}\n                >\n                  {item.value}\n                  {item.copyable && (\n                    <CopyButton\n                      {...mergePartProps<Partial<CopyButtonProps>>(\n                        {\n                          size: 'xs',\n                          sx: descriptionsStyles.copy,\n                          'aria-label': lang.descriptionsCopy(plainText(item.label) ?? lang.copy),\n                        },\n                        propsCopy,\n                      )}\n                      value={() => copyTextOf(item)}\n                    />\n                  )}\n                </dd>\n              </div>\n            );\n          })}\n        </dl>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Descriptions.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Descriptions.tsx"],"sourcesContent":["/**\n * 描述列表（div > dl）：键值对的详情（订单信息、用户资料），可分栏、可跨列，标签在左（横排）或在上（竖排）。\n * 语义是 dl > div > dt + dd（HTML 允许用 div 给 dt / dd 分组），读屏按“名称、值”念。参考 Ant Design Descriptions。\n *\n *   <Descriptions\n *     title=\"订单信息\"\n *     columns={3}\n *     items={[\n *       { label: '订单号', value: 'A-1024' },\n *       { label: '状态', value: <Badge tone=\"success\">已发货</Badge> },\n *       { label: '收货地址', value: address, span: 3 },\n *     ]}\n *   />\n *\n * 容器变窄（不到 32em）时自动排成一列（容器查询）。columns=\"auto\" 时按容器的宽度自己定栏数：每栏不窄于 minItemWidth，\n * 最多 maxColumns 栏（同一份详情放在抽屉、整页里各自合适）；跨列（span）按算出的栏数封顶。\n * 项写 copyable 时值后面有复制按钮（编号、单号、地址这类要复制去别处的），复制的文字默认是值的文字，可以用 copyText 指定。\n *\n * 部件：Root（div）、Title、List（dl）、Item（div）、Label（dt）、Value（dd）、Copy（CopyButton）。\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 { clamp } from '../utils/data/number';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useLang } from '../config/context';\nimport { plainText } from '../utils/data/text';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 描述列表里的一项 */\nexport interface DescriptionItem {\n  /** 唯一的 key；不写时用 label（label 是文字时） */\n  key?: string;\n  /** 名称 */\n  label: VNodeChild;\n  /** 值 */\n  value: VNodeChild;\n  /** 占几列，默认 1；超过栏数时按栏数 */\n  span?: number;\n  /** 值后面放复制按钮 */\n  copyable?: boolean;\n  /** 复制的文字；不写时是值的文字（值是文字或数字时） */\n  copyText?: string;\n}\n\n/** 标签与值的排列 */\nexport interface DescriptionsLayouts {\n  /** 横排（默认）：标签在左、值在右 */\n  horizontal: unknown;\n  /** 竖排：标签在上、值在下 */\n  vertical: unknown;\n  /** 行内：各项一行排开、放不下换行（页头里的编号、团队、主办这类关键信息）；columns 不起作用 */\n  inline: unknown;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface DescriptionsProps extends PartProps<'div', 'title'> {\n  /** 各项 */\n  items: readonly DescriptionItem[];\n  /** 标题 */\n  title?: VNodeChild;\n  /** 分几栏，默认 1；'auto' 时按容器的宽度定（见 minItemWidth、maxColumns） */\n  columns?: number | 'auto';\n  /** columns 为 'auto' 时每栏的最小宽度（px），默认 240 */\n  minItemWidth?: number;\n  /** columns 为 'auto' 时最多几栏，默认 4 */\n  maxColumns?: number;\n  /** 标签与值的排列，默认 horizontal */\n  layout?: keyof DescriptionsLayouts;\n  /** 带边框（表格样式）：标签有底色，各项之间有分隔线 */\n  bordered?: boolean;\n  /** 字号档位；不写时继承 */\n  size?: TextSize;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 列表（dl）的部件属性 */\n  propsList?: PartProps<'dl'>;\n  /** 每一项（div）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'div'> | ((item: DescriptionItem, index: number) => PartProps<'div'>);\n  /** 名称（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n}\n\n/** Descriptions 的样式：root、title、list、item、label、value 与各排列、边框 */\nexport const descriptionsStyles = css.create({\n  // 容器查询的容器：dl 按它的宽度决定要不要排成一列\n  root: { containerType: 'inline-size', display: 'grid', gap: '_md' },\n  title: { fontWeight: '_semibold', fontSize: '_md' },\n  list: {\n    display: 'grid',\n    columnGap: '_xl',\n    rowGap: '_md',\n    margin: 0,\n  },\n  // 用长写：长写优先于简写（引擎把简写排在前面），gap: 0 压不住 list 的 columnGap / rowGap\n  listBordered: {\n    columnGap: 0,\n    rowGap: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    overflow: 'hidden',\n  },\n  item: { minWidth: 0 },\n  itemHorizontal: { display: 'flex', gap: '_md', alignItems: 'baseline' },\n  itemVertical: { display: 'grid', gap: '_xs' },\n  // 行内：dl 改成换行的一行，项内标签与值挨着\n  listInline: { display: 'flex', flexWrap: 'wrap', columnGap: '_xl', rowGap: '_xs' },\n  itemInline: { display: 'flex', gap: '_xs', alignItems: 'baseline' },\n  itemBordered: {\n    alignItems: 'stretch',\n    gap: 0,\n    // 每格的上、起始边画线，外框由 dl 画；第一行、第一列的线被 dl 的边框盖住\n    marginBlockStart: `calc(-1 * ${t.borderWidths.xs})`,\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderBlockStartWidth: '_xs',\n    borderInlineStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderInlineStartStyle: 'solid',\n    borderColor: '_borderMuted',\n  },\n  label: { flexShrink: 0, margin: 0, color: '_textMuted' },\n  cellBordered: { paddingBlock: '_sm', paddingInline: '_md' },\n  // 暗色主题的 surfaceMuted 与 surface 同色，标签格要在两种模式下都看得出来\n  labelBordered: { backgroundColor: '_fill', minWidth: '8em' },\n  value: { minWidth: 0, margin: 0, color: '_text', overflowWrap: 'anywhere' },\n  // 有复制按钮的值：按钮紧跟在文字后面，文字换行时按钮在第一行\n  valueCopyable: { display: 'flex', alignItems: 'baseline', gap: '_xs' },\n  copy: { flexShrink: 0, marginBlock: '-0.25em' },\n});\n\n// 栏数与跨度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Descriptions 的样式：columns（栏数）、span（跨几栏） */\nexport const descriptionsGridStyles = css.create({\n  // 容器不到 32em 时排成一列\n  columns: (count: number) => ({\n    gridTemplateColumns: {\n      default: `repeat(${count}, minmax(0, 1fr))`,\n      '@container (max-width: 32em)': '1fr',\n    },\n  }),\n  span: (count: number) => ({\n    gridColumn: { default: `span ${count}`, '@container (max-width: 32em)': 'auto' },\n  }),\n  // columns=\"auto\"：栏数已经按宽度算好，不再用容器查询\n  autoColumns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  autoSpan: (count: number) => ({ gridColumn: `span ${count}` }),\n});\n\n/** 描述列表：键值对，可分栏、可跨列 */\nexport const Descriptions = _component(\n  ({\n    items,\n    title,\n    columns = 1,\n    minItemWidth = 240,\n    maxColumns = 4,\n    layout = 'horizontal',\n    bordered = false,\n    size,\n    propsTitle,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    propsCopy,\n    ...rest\n  }: DescriptionsProps) => {\n    const lang = useLang();\n    let list = _state.raw<HTMLElement | null>(null);\n    // columns=\"auto\"：按列表的宽度算栏数\n    let width = _state(0);\n    useResizeObserver(\n      () => list,\n      ([entry]) => (width = entry?.contentRect.width ?? 0),\n    );\n    const auto = () => columns === 'auto';\n    const count = () =>\n      auto() ? clamp(Math.floor(width / minItemWidth), 1, maxColumns) : (columns as number);\n\n    /** 复制的文字：copyText，否则值是文字或数字时就是它 */\n    const copyTextOf = (item: DescriptionItem) =>\n      item.copyText ??\n      (typeof item.value === 'string' || typeof item.value === 'number' ? String(item.value) : '');\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [descriptionsStyles.root, size && fontSizeStyles[size]] },\n          rest,\n        )}\n        data-layout={layout}\n      >\n        {hasContent(title) && (\n          <div {...mergeAttrs<'div'>({ sx: descriptionsStyles.title }, propsTitle)}>{title}</div>\n        )}\n        <dl\n          {...mergeAttrs<'dl'>(\n            {\n              sx: [\n                descriptionsStyles.list,\n                layout === 'inline'\n                  ? descriptionsStyles.listInline\n                  : auto()\n                    ? descriptionsGridStyles.autoColumns(count())\n                    : descriptionsGridStyles.columns(count()),\n                bordered && descriptionsStyles.listBordered,\n              ],\n            },\n            propsList,\n            { ref: _toRef(list) },\n          )}\n        >\n          {items.map((item, index) => {\n            const own = typeof propsItem === 'function' ? propsItem(item, index) : propsItem;\n            const span = clamp(item.span ?? 1, 1, count());\n            return (\n              <div\n                key={item.key ?? (typeof item.label === 'string' ? item.label : index)}\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      layout === 'vertical'\n                        ? descriptionsStyles.itemVertical\n                        : layout === 'inline'\n                          ? descriptionsStyles.itemInline\n                          : descriptionsStyles.itemHorizontal,\n                      bordered && descriptionsStyles.itemBordered,\n                      descriptionsStyles.item,\n                      layout !== 'inline' &&\n                        span > 1 &&\n                        (auto()\n                          ? descriptionsGridStyles.autoSpan(span)\n                          : descriptionsGridStyles.span(span)),\n                    ],\n                  },\n                  own,\n                )}\n              >\n                <dt\n                  {...mergeAttrs<'dt'>(\n                    {\n                      sx: [\n                        descriptionsStyles.label,\n                        bordered && [\n                          descriptionsStyles.cellBordered,\n                          descriptionsStyles.labelBordered,\n                        ],\n                      ],\n                    },\n                    propsLabel,\n                  )}\n                >\n                  {item.label}\n                </dt>\n                <dd\n                  {...mergeAttrs<'dd'>(\n                    {\n                      sx: [\n                        descriptionsStyles.value,\n                        bordered && descriptionsStyles.cellBordered,\n                        item.copyable && descriptionsStyles.valueCopyable,\n                      ],\n                    },\n                    propsValue,\n                  )}\n                >\n                  {item.value}\n                  {item.copyable && (\n                    <CopyButton\n                      {...mergePartProps<Partial<CopyButtonProps>>(\n                        {\n                          size: 'xs',\n                          sx: descriptionsStyles.copy,\n                          'aria-label': lang.descriptionsCopy(plainText(item.label) ?? lang.copy),\n                        },\n                        propsCopy,\n                      )}\n                      value={() => copyTextOf(item)}\n                    />\n                  )}\n                </dd>\n              </div>\n            );\n          })}\n        </dl>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/Ellipsis.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';
 /** 未声明的属性落到外层 span 上 */

package/dist/display/Ellipsis.js

@@ -7,7 +7,7 @@ import { useResizeObserver } from "../utils/dom/resize.js";
 import { Tooltip } from "../overlay/Tooltip.js";
 import { createVNode, onMounted, onUpdated, ref, shallowRef } from "vue";
 import { _component, bindable, childrenProp, childrenStable, 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/display/Ellipsis.tsx
 /** 未声明的属性落到外层 span 上 */
 /** Ellipsis 的样式：root、multiline、text、toggle */

package/dist/display/Ellipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsis.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Ellipsis.tsx"],"sourcesContent":["/**\n * 截断的文字：超出一行（或 lines 行）时省略，真的被截断了才给出看全文的办法——悬停或聚焦时的提示，或展开按钮。\n * 表格里的长名称、卡片里的描述、列表里的备注。\n *\n *   <Ellipsis>杭州远山精密机械有限公司（萧山二厂）</Ellipsis>             一行，截断时悬停看全文\n *   <Ellipsis lines={3} expandable>{description}</Ellipsis>              三行，截断时后面有“展开”\n *\n * 是否截断由 ResizeObserver 量出（内容或宽度变了重新量），没截断时就是普通文字：不能聚焦、没有提示、没有按钮。\n * 截断时文字能用 Tab 聚焦（键盘用户也能看全文），提示的内容默认是 children，tooltip 可以换成别的；\n * expandable 时展开后显示全部，再点“收起”。部件：Root（span）、Text（span，截断的那段）、Toggle（展开按钮）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, onUpdated, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { Tooltip } from '../overlay/Tooltip';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { lineClampStyles, textStyles } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface EllipsisProps extends PartProps<'span'> {\n  /** 最多几行，默认 1 */\n  lines?: number;\n  /** 截断时后面放“展开”按钮，展开后显示全部 */\n  expandable?: boolean;\n  /** 是否展开：父级可以写 _expanded={x} */\n  _expanded?: boolean;\n  /** 截断时悬停、聚焦显示的提示，默认是 children；false 不提示（expandable 时默认不提示） */\n  tooltip?: VNodeChild | false;\n  /** 截断的那段文字的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 展开按钮的部件属性 */\n  propsToggle?: PartProps<'button'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** Ellipsis 的样式：root、multiline、text、toggle */\nexport const ellipsisStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: '_xs',\n    minWidth: 0,\n    maxWidth: '100%',\n  },\n  // 多行时块级：段落里的描述\n  multiline: { display: 'flex', alignItems: 'flex-end' },\n  text: { minWidth: 0, borderRadius: '_xs' },\n  // 展开按钮：链接样式，不换行\n  toggle: {\n    flexShrink: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: '_accentText',\n    font: 'inherit',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    textDecorationLine: { default: 'none', ':hover': 'underline' },\n  },\n});\n\n/** 截断的文字：真的截断了才有提示或展开按钮 */\nexport const Ellipsis = _component(\n  ({\n    lines = 1,\n    expandable = false,\n    _expanded: expanded = _bindable(false),\n    tooltip,\n    propsText,\n    propsToggle,\n    children,\n    ...rest\n  }: EllipsisProps) => {\n    const lang = useLang();\n    let text = _state.raw<HTMLElement | null>(null);\n    let truncated = _state(false);\n\n    function measure() {\n      batchLayout(() => {\n        const element = text;\n        if (!element || expanded) return;\n        // 多行比高度、单行比宽度；差 1px 以内是小数取整\n        const over =\n          lines > 1\n            ? element.scrollHeight > element.clientHeight + 1\n            : element.scrollWidth > element.clientWidth + 1;\n        return () => (truncated = over);\n      });\n    }\n    useResizeObserver(() => text, measure);\n    // 挂载后量一次；每次重新渲染（内容、行数、展开变了）后再量：截断后的大小可能不变，ResizeObserver 不会通知。\n    // 不 watch children：在渲染函数外读 children 会调用插槽，Vue 会警告且不跟踪依赖\n    onMounted(measure);\n    onUpdated(measure);\n\n    return () => {\n      const clamped = !expanded;\n      const showTooltip =\n        truncated && clamped && tooltip !== false && (tooltip !== undefined || !expandable);\n      const body = (props: Record<string, unknown> = {}) => (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                ellipsisStyles.text,\n                clamped &&\n                  (lines > 1\n                    ? [textStyles.clamp, lineClampStyles.lines(lines)]\n                    : textStyles.truncate),\n                showTooltip && focusRingStyles.visible,\n              ],\n            },\n            propsText,\n            {\n              ref: _toRef(text),\n              // 截断时能聚焦：键盘用户也能看到提示里的全文\n              tabindex: showTooltip ? 0 : undefined,\n              ...props,\n            },\n          )}\n        >\n          {children}\n        </span>\n      );\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [ellipsisStyles.root, lines > 1 && ellipsisStyles.multiline] },\n            rest,\n          )}\n          data-truncated={truncated || undefined}\n          data-expanded={expanded || undefined}\n        >\n          {showTooltip ? (\n            <Tooltip trigger={(props) => body(props as unknown as Record<string, unknown>)}>\n              {tooltip ?? children}\n            </Tooltip>\n          ) : (\n            body()\n          )}\n          {expandable && (truncated || expanded) && (\n            <button\n              {...mergeAttrs<'button'>({ sx: ellipsisStyles.toggle }, propsToggle, {\n                type: 'button',\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? lang.ellipsisCollapse : lang.ellipsisExpand}\n            </button>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,UAAU;EACV,UAAU;CACZ;CAEA,WAAW;EAAE,SAAS;EAAQ,YAAY;CAAW;CACrD,MAAM;EAAE,UAAU;EAAG,cAAc;CAAM;CAEzC,QAAQ;EACN,YAAY;EACZ,SAAS;EACT,aAAa;EACb,iBAAiB;EACjB,OAAO;EACP,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY;CAC/D;AACF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SASqB;CAAA,MAAA,QAAAA,aAAA,QAAA,SARX,CAAC;CAAA,MAAA,aAAAA,aAAA,QAAA,cACI,KAAK;CAAA,MAAA,WAAAC,SAAA,QAAA,mBACc,OAAK,KAAA,IAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAKlC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,YAASC,IAAU,KAAK;CAE5B,SAAS,UAAU;EACjB,kBAAkB;GAChB,MAAM,UAAO,KAAA;GACb,IAAI,CAAC,WAAO,SAAA,OAAc;GAE1B,MAAM,OACJ,MAAA,QAAQ,IACJ,QAAQ,eAAe,QAAQ,eAAe,IAC9C,QAAQ,cAAc,QAAQ,cAAc;GAClD,aAAc,UAAA,QAAY;EAC5B,CAAC;CACH;CACA,wBAAkB,KAAA,OAAY,OAAO;CAGrC,UAAU,OAAO;CACjB,UAAU,OAAO;CAEjB,aAAa;EACX,MAAM,UAAU,CAAA,SAAA;EAChB,MAAM,cACJ,UAAA,SAAa,WAAW,QAAA,UAAY,UAAU,QAAA,UAAY,KAAA,KAAa,CAAA,WAAA;EACzE,MAAM,QAAQ,QAAiC,CAAC,MAACC,YAAA,QAEzC,WACF,EACE,IAAI;GACF,eAAe;GACf,YACG,MAAA,QAAQ,IACL,CAAC,WAAW,OAAO,gBAAgB,MAAK,MAAA,KAAM,CAAC,IAC/C,WAAW;GACjB,eAAe,gBAAgB;EAAO,EAE1C,GAAC,UAAA,OAED;GACE,KAAG;GAEH,UAAU,cAAc,IAAI,KAAA;GAC5B,GAAG;EACL,CACF,GAAC,CAAA,SAAA,KAAA,CAAA;EAKL,OAAAA,YAAA,QAAAC,cAEQ,WACF,EAAE,IAAI,CAAC,eAAe,MAAM,MAAA,QAAQ,KAAK,eAAe,SAAS,EAAE,GACnE,IACF,GAAC;GAAA,kBACe,UAAA,SAAa,KAAA;GAAS,iBACvB,SAAA,SAAY,KAAA;EAAS,CAAA,GAAA,CAEnC,cAAWD,YAAA,SAAA;GAAA,YACS,UAAU,KAAK,KAA2C;GAAC,OAAA;EAAA,GAAA;GAAA,eAAA,CAC3E,QAAA,SAAA,SAAA,KAAmB;GAAA,SAAAE,eAAA;EAAA,CAAA,IAGtB,KAAK,GAEN,WAAA,UAAe,UAAA,SAAA,SAAA,UAAsBF,YAAA,UAE9B,WAAqB,EAAE,IAAI,eAAe,OAAO,GAAC,YAAA,OAAe;GACnE,MAAM;GACN,iBAAe,SAAA;GACf,eAAgB,SAAA,QAAW,CAAA,SAAA;EAC7B,CAAC,GAAC,CAED,SAAA,QAAW,KAAK,mBAAmB,KAAK,cAAc,CAAA,CAE1D,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Ellipsis.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Ellipsis.tsx"],"sourcesContent":["/**\n * 截断的文字：超出一行（或 lines 行）时省略，真的被截断了才给出看全文的办法——悬停或聚焦时的提示，或展开按钮。\n * 表格里的长名称、卡片里的描述、列表里的备注。\n *\n *   <Ellipsis>杭州远山精密机械有限公司（萧山二厂）</Ellipsis>             一行，截断时悬停看全文\n *   <Ellipsis lines={3} expandable>{description}</Ellipsis>              三行，截断时后面有“展开”\n *\n * 是否截断由 ResizeObserver 量出（内容或宽度变了重新量），没截断时就是普通文字：不能聚焦、没有提示、没有按钮。\n * 截断时文字能用 Tab 聚焦（键盘用户也能看全文），提示的内容默认是 children，tooltip 可以换成别的；\n * expandable 时展开后显示全部，再点“收起”。部件：Root（span）、Text（span，截断的那段）、Toggle（展开按钮）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, onUpdated, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { Tooltip } from '../overlay/Tooltip';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { lineClampStyles, textStyles } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface EllipsisProps extends PartProps<'span'> {\n  /** 最多几行，默认 1 */\n  lines?: number;\n  /** 截断时后面放“展开”按钮，展开后显示全部 */\n  expandable?: boolean;\n  /** 是否展开：父级可以写 _expanded={x} */\n  _expanded?: boolean;\n  /** 截断时悬停、聚焦显示的提示，默认是 children；false 不提示（expandable 时默认不提示） */\n  tooltip?: VNodeChild | false;\n  /** 截断的那段文字的部件属性 */\n  propsText?: PartProps<'span'>;\n  /** 展开按钮的部件属性 */\n  propsToggle?: PartProps<'button'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** Ellipsis 的样式：root、multiline、text、toggle */\nexport const ellipsisStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: '_xs',\n    minWidth: 0,\n    maxWidth: '100%',\n  },\n  // 多行时块级：段落里的描述\n  multiline: { display: 'flex', alignItems: 'flex-end' },\n  text: { minWidth: 0, borderRadius: '_xs' },\n  // 展开按钮：链接样式，不换行\n  toggle: {\n    flexShrink: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: '_accentText',\n    font: 'inherit',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    textDecorationLine: { default: 'none', ':hover': 'underline' },\n  },\n});\n\n/** 截断的文字：真的截断了才有提示或展开按钮 */\nexport const Ellipsis = _component(\n  ({\n    lines = 1,\n    expandable = false,\n    _expanded: expanded = _bindable(false),\n    tooltip,\n    propsText,\n    propsToggle,\n    children,\n    ...rest\n  }: EllipsisProps) => {\n    const lang = useLang();\n    let text = _state.raw<HTMLElement | null>(null);\n    let truncated = _state(false);\n\n    function measure() {\n      batchLayout(() => {\n        const element = text;\n        if (!element || expanded) return;\n        // 多行比高度、单行比宽度；差 1px 以内是小数取整\n        const over =\n          lines > 1\n            ? element.scrollHeight > element.clientHeight + 1\n            : element.scrollWidth > element.clientWidth + 1;\n        return () => (truncated = over);\n      });\n    }\n    useResizeObserver(() => text, measure);\n    // 挂载后量一次；每次重新渲染（内容、行数、展开变了）后再量：截断后的大小可能不变，ResizeObserver 不会通知。\n    // 不 watch children：在渲染函数外读 children 会调用插槽，Vue 会警告且不跟踪依赖\n    onMounted(measure);\n    onUpdated(measure);\n\n    return () => {\n      const clamped = !expanded;\n      const showTooltip =\n        truncated && clamped && tooltip !== false && (tooltip !== undefined || !expandable);\n      const body = (props: Record<string, unknown> = {}) => (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                ellipsisStyles.text,\n                clamped &&\n                  (lines > 1\n                    ? [textStyles.clamp, lineClampStyles.lines(lines)]\n                    : textStyles.truncate),\n                showTooltip && focusRingStyles.visible,\n              ],\n            },\n            propsText,\n            {\n              ref: _toRef(text),\n              // 截断时能聚焦：键盘用户也能看到提示里的全文\n              tabindex: showTooltip ? 0 : undefined,\n              ...props,\n            },\n          )}\n        >\n          {children}\n        </span>\n      );\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [ellipsisStyles.root, lines > 1 && ellipsisStyles.multiline] },\n            rest,\n          )}\n          data-truncated={truncated || undefined}\n          data-expanded={expanded || undefined}\n        >\n          {showTooltip ? (\n            <Tooltip trigger={(props) => body(props as unknown as Record<string, unknown>)}>\n              {tooltip ?? children}\n            </Tooltip>\n          ) : (\n            body()\n          )}\n          {expandable && (truncated || expanded) && (\n            <button\n              {...mergeAttrs<'button'>({ sx: ellipsisStyles.toggle }, propsToggle, {\n                type: 'button',\n                'aria-expanded': expanded,\n                onClick: () => (expanded = !expanded),\n              })}\n            >\n              {expanded ? lang.ellipsisCollapse : lang.ellipsisExpand}\n            </button>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,UAAU;EACV,UAAU;CACZ;CAEA,WAAW;EAAE,SAAS;EAAQ,YAAY;CAAW;CACrD,MAAM;EAAE,UAAU;EAAG,cAAc;CAAM;CAEzC,QAAQ;EACN,YAAY;EACZ,SAAS;EACT,aAAa;EACb,iBAAiB;EACjB,OAAO;EACP,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY;CAC/D;AACF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SASqB;CAAA,MAAA,QAAAA,aAAA,QAAA,SARX,CAAC;CAAA,MAAA,aAAAA,aAAA,QAAA,cACI,KAAK;CAAA,MAAA,WAAAC,SAAA,QAAA,mBACc,OAAK,KAAA,IAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAKlC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,YAASC,IAAU,KAAK;CAE5B,SAAS,UAAU;EACjB,kBAAkB;GAChB,MAAM,UAAO,KAAA;GACb,IAAI,CAAC,WAAO,SAAA,OAAc;GAE1B,MAAM,OACJ,MAAA,QAAQ,IACJ,QAAQ,eAAe,QAAQ,eAAe,IAC9C,QAAQ,cAAc,QAAQ,cAAc;GAClD,aAAc,UAAA,QAAY;EAC5B,CAAC;CACH;CACA,wBAAkB,KAAA,OAAY,OAAO;CAGrC,UAAU,OAAO;CACjB,UAAU,OAAO;CAEjB,aAAa;EACX,MAAM,UAAU,CAAA,SAAA;EAChB,MAAM,cACJ,UAAA,SAAa,WAAW,QAAA,UAAY,UAAU,QAAA,UAAY,KAAA,KAAa,CAAA,WAAA;EACzE,MAAM,QAAQ,QAAiC,CAAC,MAACC,YAAA,QAEzC,WACF,EACE,IAAI;GACF,eAAe;GACf,YACG,MAAA,QAAQ,IACL,CAAC,WAAW,OAAO,gBAAgB,MAAK,MAAA,KAAM,CAAC,IAC/C,WAAW;GACjB,eAAe,gBAAgB;EAAO,EAE1C,GAAC,UAAA,OAED;GACE,KAAG;GAEH,UAAU,cAAc,IAAI,KAAA;GAC5B,GAAG;EACL,CACF,GAAC,CAAA,SAAA,KAAA,CAAA;EAKL,OAAAA,YAAA,QAAAC,cAEQ,WACF,EAAE,IAAI,CAAC,eAAe,MAAM,MAAA,QAAQ,KAAK,eAAe,SAAS,EAAE,GACnE,IACF,GAAC;GAAA,kBACe,UAAA,SAAa,KAAA;GAAS,iBACvB,SAAA,SAAY,KAAA;EAAS,CAAA,GAAA,CAEnC,cAAWD,YAAA,SAAA;GAAA,YACS,UAAU,KAAK,KAA2C;GAAC,OAAA;EAAA,GAAA;GAAA,eAAA,CAC3E,QAAA,SAAA,SAAA,KAAmB;GAAA,SAAAE,eAAA;EAAA,CAAA,IAGtB,KAAK,GAEN,WAAA,UAAe,UAAA,SAAA,SAAA,UAAsBF,YAAA,UAE9B,WAAqB,EAAE,IAAI,eAAe,OAAO,GAAC,YAAA,OAAe;GACnE,MAAM;GACN,iBAAe,SAAA;GACf,eAAgB,SAAA,QAAW,CAAA,SAAA;EAC7B,CAAC,GAAC,CAED,SAAA,QAAW,KAAK,mBAAmB,KAAK,cAAc,CAAA,CAE1D,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/FieldCompare.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 FieldDiff } from '../utils/data/diff';
 import type { SortValue } from '../utils/data/collation';
 import { type PartProps } from '../utils/props';

package/dist/display/FieldCompare.js

@@ -11,7 +11,7 @@ import { useColumnDisplay } from "../table/column-display.js";
 import { ColumnTable } from "../table/ColumnTable.js";
 import { Fragment, createVNode } from "vue";
 import { _component, 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 { ArrowRight } from "@lucide/icons";
 //#region src/display/FieldCompare.tsx
 /**

package/dist/display/FieldCompare.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCompare.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/FieldCompare.tsx"],"sourcesContent":["/**\n * 字段对比：两份记录（编辑前后、测算的两个版本、审批前后）按字段列出原值与新值，数值字段带上变化量与变化率。\n * 建在 diffFields 上；字段的写法与表格的列定义相同（key、header、type、format、statuses、empty、value、cell），\n * 表格里已有的列定义可以直接拿来用。\n *\n *   <FieldCompare fields={columns} before={v1} after={v2} />                      // 表格：字段、原值、新值、变化\n *   <FieldCompare fields={columns} before={old} after={row} layout=\"list\" />      // 列表：只列改了的，“¥1,200 → ¥1,350 +12.5%”\n *\n * 表格默认列出全部字段（没改的淡显），列表默认只列改了的（放在时间线、通知、审批意见里）；onlyChanged 可以改。\n * 数值字段的变化量按字段的 type、format 显示，带正负号；写了 better 时按好坏着色（成本、耗时写 'lower'）。\n *\n * 读屏：列表里原值是 del、新值是 ins，两者之间有“改为”（画面上是箭头）。\n * 部件：Root（div）、Table（ColumnTable，表格时）、List（dl，列表时）、Item（div）、Label（dt）、Value（dd）。\n */\nimport { 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 { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { diffFields, type FieldDiff } from '../utils/data/diff';\nimport { toNumber } from '../utils/data/numeric';\nimport type { SortValue } from '../utils/data/collation';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { toneStyles } from '../utils/style/typography';\nimport { useColumnDisplay } from '../table/column-display';\nimport { ColumnTable, type ColumnTableProps } from '../table/ColumnTable';\nimport {\n  columnType,\n  columnValue,\n  formatCell,\n  type ColumnTypes,\n  type DataTableColumn,\n} from '../table/columns';\n\n/**\n * 一个要对比的字段：写法同表格的列（key、header、type、format、statuses、empty、value），\n * cell 的第二个参数是 0（原值那一份）或 1（新值那一份）\n */\nexport interface CompareField<T> extends Pick<\n  DataTableColumn<T>,\n  'key' | 'header' | 'type' | 'format' | 'statuses' | 'empty' | 'value' | 'cell'\n> {\n  /** 数值变化的好坏：'higher' 越高越好（变化量升是绿、降是红），'lower' 越低越好（成本、耗时）；不写时不着色 */\n  better?: 'higher' | 'lower';\n}\n\n/** 对比的一行：字段与它的比较结果 */\nexport interface FieldCompareRow<T> extends FieldDiff<Record<string, SortValue>, string> {\n  /** 字段 */\n  field: CompareField<T>;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FieldCompareProps<T> extends PartProps<'div'> {\n  /** 对比哪些字段，按这个顺序 */\n  fields: readonly CompareField<T>[];\n  /** 原来的记录；没有（新建）时每个字段都当作空 */\n  before: T | null | undefined;\n  /** 现在的记录 */\n  after: T | null | undefined;\n  /** 'table' 字段、原值、新值、变化四列（默认）；'list' 一行一个字段：原值 → 新值 变化 */\n  layout?: 'table' | 'list';\n  /** 只列改了的字段；默认表格列出全部、列表只列改了的 */\n  onlyChanged?: boolean;\n  /** 表格的部件属性（layout 为 'table' 时） */\n  propsTable?: Partial<ColumnTableProps<FieldCompareRow<T>>>;\n  /** 列表（dl）的部件属性（layout 为 'list' 时） */\n  propsList?: PartProps<'dl'>;\n  /** 列表里每一项的部件属性 */\n  propsItem?: PartProps<'div'>;\n  /** 字段名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n}\n\n/** FieldCompare 的样式：list、item、label、value、before、after、arrow、unchanged、changed */\nexport const fieldCompareStyles = css.create({\n  // 字段名一列、值一列：多项时字段名对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n  },\n  item: { display: 'contents' },\n  label: { color: '_textMuted' },\n  value: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    columnGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n    overflowWrap: 'anywhere',\n  },\n  before: { color: '_textMuted', textDecorationLine: 'line-through' },\n  after: { textDecorationLine: 'none', color: '_text', fontWeight: '_medium' },\n  arrow: { alignSelf: 'center', color: '_textMuted', flexShrink: 0 },\n  change: { fontSize: '_sm', fontVariantNumeric: 'tabular-nums' },\n  // 表格里没改的字段淡显，改了的新值加粗\n  unchanged: { color: '_textMuted' },\n  changed: { fontWeight: '_medium' },\n  none: { color: '_textMuted' },\n});\n\n/** 字段对比：表格或列表 */\nexport const FieldCompare = _component(\n  <T,>({\n    fields,\n    before,\n    after,\n    layout = 'table',\n    onlyChanged,\n    propsTable,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    ...rest\n  }: FieldCompareProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n    const display = useColumnDisplay<T>();\n    const column = (field: CompareField<T>) => field as DataTableColumn<T>;\n\n    /** 每个字段在一份记录里的值（按 value 函数或字段名取） */\n    const valuesOf = (record: T | null | undefined) =>\n      Object.fromEntries(\n        fields.map((field) => [\n          field.key,\n          record == null ? undefined : columnValue(column(field), record),\n        ]),\n      );\n\n    const rows = (): FieldCompareRow<T>[] => {\n      const diffs = diffFields(\n        valuesOf(before),\n        valuesOf(after),\n        fields.map((field) => field.key),\n      );\n      const all = diffs.map((diff, index) => ({ ...diff, field: fields[index]! }));\n      return (onlyChanged ?? layout === 'list') ? all.filter((row) => row.changed) : all;\n    };\n\n    /** 字段的值类型：写了 type 用它，否则按两份记录推断（同表格的列） */\n    const typeOf = (field: CompareField<T>): keyof ColumnTypes =>\n      columnType(\n        column(field),\n        [before, after].filter((record): record is T => record != null),\n      );\n\n    /** 一份记录里这个字段的显示：cell 优先，否则按类型格式化（同表格） */\n    const shown = (row: FieldCompareRow<T>, side: 0 | 1): VNodeChild => {\n      const record = side === 0 ? before : after;\n      if (row.field.cell && record != null) return row.field.cell(record, side);\n      return display.value(\n        column(row.field),\n        typeOf(row.field),\n        side === 0 ? row.before : row.after,\n      );\n    };\n\n    /** 数值字段的变化：变化量（按字段的格式，带正负号）与变化率；没变或不是数值时没有 */\n    const change = (row: FieldCompareRow<T>): VNodeChild => {\n      if (!row.changed || row.delta === undefined) return null;\n      const type = typeOf(row.field);\n      const signed = { ...row.field.format, signDisplay: 'exceptZero' } as const;\n      const delta = formatCell(row.delta, type === 'text' ? 'number' : type, format, signed);\n      // 百分比字段的变化量本身就是百分点，不再给变化率\n      const ratio =\n        row.ratio !== undefined && type !== 'percent'\n          ? format.number(row.ratio, {\n              style: 'percent',\n              maximumFractionDigits: 1,\n              signDisplay: 'exceptZero',\n            })\n          : null;\n      const sign = Math.sign(toNumber(row.delta));\n      const tone =\n        !row.field.better || sign === 0\n          ? toneStyles.muted\n          : sign > 0 === (row.field.better === 'higher')\n            ? toneStyles.success\n            : toneStyles.danger;\n      return (\n        <span {...css.attrs(fieldCompareStyles.change, tone)}>\n          {delta}\n          {ratio && `（${ratio}）`}\n        </span>\n      );\n    };\n\n    const none = () => <span {...css.attrs(fieldCompareStyles.none)}>{lang.fieldCompareNone}</span>;\n\n    const table = (list: FieldCompareRow<T>[]) => {\n      const [field, from, to, delta] = lang.fieldCompareHeaders;\n      const numeric = list.some((row) => row.changed && row.delta !== undefined);\n      const columns: DataTableColumn<FieldCompareRow<T>>[] = [\n        { key: 'field', header: field, cell: (row) => row.field.header },\n        {\n          key: 'before',\n          align: 'start',\n          header: from,\n          cell: (row) => <span {...css.attrs(fieldCompareStyles.unchanged)}>{shown(row, 0)}</span>,\n        },\n        {\n          key: 'after',\n          align: 'start',\n          header: to,\n          cell: (row) => (\n            <span\n              {...css.attrs(\n                row.changed ? fieldCompareStyles.changed : fieldCompareStyles.unchanged,\n              )}\n            >\n              {shown(row, 1)}\n            </span>\n          ),\n        },\n        ...(numeric\n          ? [{ key: 'change', header: delta, align: 'start' as const, cell: change }]\n          : []),\n      ];\n      return (\n        <ColumnTable\n          {...mergePartProps<Partial<ColumnTableProps<FieldCompareRow<T>>>>(\n            { density: 'compact' },\n            propsTable,\n          )}\n          rows={list}\n          columns={columns}\n          getKey={(row) => row.field.key}\n          propsRow={(row) => ({ 'data-changed': row.changed || undefined }) as PartProps<'tr'>}\n        />\n      );\n    };\n\n    const list = (items: FieldCompareRow<T>[]) => (\n      <dl {...mergeAttrs<'dl'>({ sx: fieldCompareStyles.list }, propsList)}>\n        {items.map((row) => (\n          <div\n            key={row.field.key}\n            {...mergeAttrs<'div'>({ sx: fieldCompareStyles.item }, propsItem)}\n          >\n            <dt {...mergeAttrs<'dt'>({ sx: fieldCompareStyles.label }, propsLabel)}>\n              {row.field.header}\n            </dt>\n            <dd {...mergeAttrs<'dd'>({ sx: fieldCompareStyles.value }, propsValue)}>\n              {before != null && (\n                <>\n                  <del {...css.attrs(fieldCompareStyles.before)}>{shown(row, 0)}</del>\n                  <Icon icon={ArrowRight} sx={fieldCompareStyles.arrow} />\n                  <VisuallyHidden>{lang.fieldCompareTo}</VisuallyHidden>\n                </>\n              )}\n              <ins {...css.attrs(fieldCompareStyles.after)}>{shown(row, 1)}</ins>\n              {change(row)}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    );\n\n    return () => {\n      const items = rows();\n      return (\n        <div {...mergeAttrs<'div'>({}, rest)}>\n          {items.length === 0 ? none() : layout === 'list' ? list(items) : table(items)}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"FieldCompare.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/FieldCompare.tsx"],"sourcesContent":["/**\n * 字段对比：两份记录（编辑前后、测算的两个版本、审批前后）按字段列出原值与新值，数值字段带上变化量与变化率。\n * 建在 diffFields 上；字段的写法与表格的列定义相同（key、header、type、format、statuses、empty、value、cell），\n * 表格里已有的列定义可以直接拿来用。\n *\n *   <FieldCompare fields={columns} before={v1} after={v2} />                      // 表格：字段、原值、新值、变化\n *   <FieldCompare fields={columns} before={old} after={row} layout=\"list\" />      // 列表：只列改了的，“¥1,200 → ¥1,350 +12.5%”\n *\n * 表格默认列出全部字段（没改的淡显），列表默认只列改了的（放在时间线、通知、审批意见里）；onlyChanged 可以改。\n * 数值字段的变化量按字段的 type、format 显示，带正负号；写了 better 时按好坏着色（成本、耗时写 'lower'）。\n *\n * 读屏：列表里原值是 del、新值是 ins，两者之间有“改为”（画面上是箭头）。\n * 部件：Root（div）、Table（ColumnTable，表格时）、List（dl，列表时）、Item（div）、Label（dt）、Value（dd）。\n */\nimport { 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 { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { diffFields, type FieldDiff } from '../utils/data/diff';\nimport { toNumber } from '../utils/data/numeric';\nimport type { SortValue } from '../utils/data/collation';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { toneStyles } from '../utils/style/typography';\nimport { useColumnDisplay } from '../table/column-display';\nimport { ColumnTable, type ColumnTableProps } from '../table/ColumnTable';\nimport {\n  columnType,\n  columnValue,\n  formatCell,\n  type ColumnTypes,\n  type DataTableColumn,\n} from '../table/columns';\n\n/**\n * 一个要对比的字段：写法同表格的列（key、header、type、format、statuses、empty、value），\n * cell 的第二个参数是 0（原值那一份）或 1（新值那一份）\n */\nexport interface CompareField<T> extends Pick<\n  DataTableColumn<T>,\n  'key' | 'header' | 'type' | 'format' | 'statuses' | 'empty' | 'value' | 'cell'\n> {\n  /** 数值变化的好坏：'higher' 越高越好（变化量升是绿、降是红），'lower' 越低越好（成本、耗时）；不写时不着色 */\n  better?: 'higher' | 'lower';\n}\n\n/** 对比的一行：字段与它的比较结果 */\nexport interface FieldCompareRow<T> extends FieldDiff<Record<string, SortValue>, string> {\n  /** 字段 */\n  field: CompareField<T>;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface FieldCompareProps<T> extends PartProps<'div'> {\n  /** 对比哪些字段，按这个顺序 */\n  fields: readonly CompareField<T>[];\n  /** 原来的记录；没有（新建）时每个字段都当作空 */\n  before: T | null | undefined;\n  /** 现在的记录 */\n  after: T | null | undefined;\n  /** 'table' 字段、原值、新值、变化四列（默认）；'list' 一行一个字段：原值 → 新值 变化 */\n  layout?: 'table' | 'list';\n  /** 只列改了的字段；默认表格列出全部、列表只列改了的 */\n  onlyChanged?: boolean;\n  /** 表格的部件属性（layout 为 'table' 时） */\n  propsTable?: Partial<ColumnTableProps<FieldCompareRow<T>>>;\n  /** 列表（dl）的部件属性（layout 为 'list' 时） */\n  propsList?: PartProps<'dl'>;\n  /** 列表里每一项的部件属性 */\n  propsItem?: PartProps<'div'>;\n  /** 字段名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n}\n\n/** FieldCompare 的样式：list、item、label、value、before、after、arrow、unchanged、changed */\nexport const fieldCompareStyles = css.create({\n  // 字段名一列、值一列：多项时字段名对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n  },\n  item: { display: 'contents' },\n  label: { color: '_textMuted' },\n  value: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    columnGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n    overflowWrap: 'anywhere',\n  },\n  before: { color: '_textMuted', textDecorationLine: 'line-through' },\n  after: { textDecorationLine: 'none', color: '_text', fontWeight: '_medium' },\n  arrow: { alignSelf: 'center', color: '_textMuted', flexShrink: 0 },\n  change: { fontSize: '_sm', fontVariantNumeric: 'tabular-nums' },\n  // 表格里没改的字段淡显，改了的新值加粗\n  unchanged: { color: '_textMuted' },\n  changed: { fontWeight: '_medium' },\n  none: { color: '_textMuted' },\n});\n\n/** 字段对比：表格或列表 */\nexport const FieldCompare = _component(\n  <T,>({\n    fields,\n    before,\n    after,\n    layout = 'table',\n    onlyChanged,\n    propsTable,\n    propsList,\n    propsItem,\n    propsLabel,\n    propsValue,\n    ...rest\n  }: FieldCompareProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n    const display = useColumnDisplay<T>();\n    const column = (field: CompareField<T>) => field as DataTableColumn<T>;\n\n    /** 每个字段在一份记录里的值（按 value 函数或字段名取） */\n    const valuesOf = (record: T | null | undefined) =>\n      Object.fromEntries(\n        fields.map((field) => [\n          field.key,\n          record == null ? undefined : columnValue(column(field), record),\n        ]),\n      );\n\n    const rows = (): FieldCompareRow<T>[] => {\n      const diffs = diffFields(\n        valuesOf(before),\n        valuesOf(after),\n        fields.map((field) => field.key),\n      );\n      const all = diffs.map((diff, index) => ({ ...diff, field: fields[index]! }));\n      return (onlyChanged ?? layout === 'list') ? all.filter((row) => row.changed) : all;\n    };\n\n    /** 字段的值类型：写了 type 用它，否则按两份记录推断（同表格的列） */\n    const typeOf = (field: CompareField<T>): keyof ColumnTypes =>\n      columnType(\n        column(field),\n        [before, after].filter((record): record is T => record != null),\n      );\n\n    /** 一份记录里这个字段的显示：cell 优先，否则按类型格式化（同表格） */\n    const shown = (row: FieldCompareRow<T>, side: 0 | 1): VNodeChild => {\n      const record = side === 0 ? before : after;\n      if (row.field.cell && record != null) return row.field.cell(record, side);\n      return display.value(\n        column(row.field),\n        typeOf(row.field),\n        side === 0 ? row.before : row.after,\n      );\n    };\n\n    /** 数值字段的变化：变化量（按字段的格式，带正负号）与变化率；没变或不是数值时没有 */\n    const change = (row: FieldCompareRow<T>): VNodeChild => {\n      if (!row.changed || row.delta === undefined) return null;\n      const type = typeOf(row.field);\n      const signed = { ...row.field.format, signDisplay: 'exceptZero' } as const;\n      const delta = formatCell(row.delta, type === 'text' ? 'number' : type, format, signed);\n      // 百分比字段的变化量本身就是百分点，不再给变化率\n      const ratio =\n        row.ratio !== undefined && type !== 'percent'\n          ? format.number(row.ratio, {\n              style: 'percent',\n              maximumFractionDigits: 1,\n              signDisplay: 'exceptZero',\n            })\n          : null;\n      const sign = Math.sign(toNumber(row.delta));\n      const tone =\n        !row.field.better || sign === 0\n          ? toneStyles.muted\n          : sign > 0 === (row.field.better === 'higher')\n            ? toneStyles.success\n            : toneStyles.danger;\n      return (\n        <span {...css.attrs(fieldCompareStyles.change, tone)}>\n          {delta}\n          {ratio && `（${ratio}）`}\n        </span>\n      );\n    };\n\n    const none = () => <span {...css.attrs(fieldCompareStyles.none)}>{lang.fieldCompareNone}</span>;\n\n    const table = (list: FieldCompareRow<T>[]) => {\n      const [field, from, to, delta] = lang.fieldCompareHeaders;\n      const numeric = list.some((row) => row.changed && row.delta !== undefined);\n      const columns: DataTableColumn<FieldCompareRow<T>>[] = [\n        { key: 'field', header: field, cell: (row) => row.field.header },\n        {\n          key: 'before',\n          align: 'start',\n          header: from,\n          cell: (row) => <span {...css.attrs(fieldCompareStyles.unchanged)}>{shown(row, 0)}</span>,\n        },\n        {\n          key: 'after',\n          align: 'start',\n          header: to,\n          cell: (row) => (\n            <span\n              {...css.attrs(\n                row.changed ? fieldCompareStyles.changed : fieldCompareStyles.unchanged,\n              )}\n            >\n              {shown(row, 1)}\n            </span>\n          ),\n        },\n        ...(numeric\n          ? [{ key: 'change', header: delta, align: 'start' as const, cell: change }]\n          : []),\n      ];\n      return (\n        <ColumnTable\n          {...mergePartProps<Partial<ColumnTableProps<FieldCompareRow<T>>>>(\n            { density: 'compact' },\n            propsTable,\n          )}\n          rows={list}\n          columns={columns}\n          getKey={(row) => row.field.key}\n          propsRow={(row) => ({ 'data-changed': row.changed || undefined }) as PartProps<'tr'>}\n        />\n      );\n    };\n\n    const list = (items: FieldCompareRow<T>[]) => (\n      <dl {...mergeAttrs<'dl'>({ sx: fieldCompareStyles.list }, propsList)}>\n        {items.map((row) => (\n          <div\n            key={row.field.key}\n            {...mergeAttrs<'div'>({ sx: fieldCompareStyles.item }, propsItem)}\n          >\n            <dt {...mergeAttrs<'dt'>({ sx: fieldCompareStyles.label }, propsLabel)}>\n              {row.field.header}\n            </dt>\n            <dd {...mergeAttrs<'dd'>({ sx: fieldCompareStyles.value }, propsValue)}>\n              {before != null && (\n                <>\n                  <del {...css.attrs(fieldCompareStyles.before)}>{shown(row, 0)}</del>\n                  <Icon icon={ArrowRight} sx={fieldCompareStyles.arrow} />\n                  <VisuallyHidden>{lang.fieldCompareTo}</VisuallyHidden>\n                </>\n              )}\n              <ins {...css.attrs(fieldCompareStyles.after)}>{shown(row, 1)}</ins>\n              {change(row)}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    );\n\n    return () => {\n      const items = rows();\n      return (\n        <div {...mergeAttrs<'div'>({}, rest)}>\n          {items.length === 0 ? none() : layout === 'list' ? list(items) : table(items)}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Gauge.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 NumericFormat } from '../config/lang/format';
 import { type NumericValue } from '../utils/data/numeric';

package/dist/display/Gauge.js

@@ -6,7 +6,7 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { useFormat } from "../config/lang/format.js";
 import { createVNode } from "vue";
 import { _component, 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/display/Gauge.tsx
 /** 外圈的一段区间：从上一段的终点（第一段从 min）到 to */
 /** 角色与取值由组件管理 */