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

package/dist/display/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_Fragment","_mergeProps","_vtp_childrenProp","_vue_shallowRef"],"sources":["../../src/display/Image.tsx"],"sourcesContent":["/**\n * 图片：懒加载，加载时是扫光的占位，加载失败显示占位与原因；写了 preview 时点击（或 Enter）看大图（Lightbox）。\n * 同一个 ImageGroup 里的图片共用一个 Lightbox，大图里可以左右切换（相册、工单附件、验收照片）。\n *\n *   <Image src=\"/photos/1-thumb.jpg\" alt=\"支架正面\" width={160} height={120} preview={{ src: '/photos/1.jpg' }} />\n *   <ImageGroup>\n *     {photos.map((photo) => <Image src={photo.thumb} alt={photo.title} preview={{ src: photo.url }} />)}\n *   </ImageGroup>\n *\n * 可以预览的图片是按钮：名称“查看大图：alt”，键盘能到。尺寸写 width、height（数字是 px），object-fit 用 fit。\n * 部件：Root（span，可以预览时是 button）、Image（img）、Fallback（span）。\n */\nimport { ImageOff } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Lightbox, type LightboxItem, type LightboxProps } from '../overlay/Lightbox';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\n\n/** object-fit 的取值 */\nexport interface ImageFits {\n  /** 铺满、裁掉多余（默认）：缩略图、头像 */\n  cover: unknown;\n  /** 整张放进去、留白：商品图、图纸 */\n  contain: unknown;\n  /** 拉伸铺满 */\n  fill: unknown;\n  /** 原大，超出的裁掉 */\n  none: unknown;\n  /** 比框大时同 contain，否则原大 */\n  'scale-down': unknown;\n}\n\n/** 预览的选项 */\nexport interface ImagePreviewOptions {\n  /** 大图的地址；不写时用 src */\n  src?: string;\n  /** 大图下方的说明 */\n  caption?: VNodeChild;\n  /** 下载的文件名；false 不显示下载按钮 */\n  download?: string | false;\n}\n\n/** 未声明的属性落到 img 上；外层用 propsRoot */\nexport interface ImageProps extends PartProps<'img', 'src' | 'alt' | 'width' | 'height'> {\n  /** 图片地址 */\n  src: string;\n  /** 图片的说明：读屏念它，加载失败时也显示 */\n  alt: string;\n  /** 宽度：数字是 px，也可以写 CSS 长度；不写时按图片 */\n  width?: number | string;\n  /** 高度：数字是 px，也可以写 CSS 长度 */\n  height?: number | string;\n  /** 图片在框里怎么放，默认 cover */\n  fit?: keyof ImageFits;\n  /** 圆角档位，默认 md */\n  radius?: Radius;\n  /** 点击看大图：true 或预览的选项（大图地址、说明、下载） */\n  preview?: boolean | ImagePreviewOptions;\n  /** 加载失败时显示的内容；默认是图标与 alt */\n  fallback?: VNodeChild;\n  /** 外层（span，可以预览时是 button）的部件属性 */\n  propsRoot?: PartProps<'span'>;\n  /** 加载失败的占位的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** Image 的样式：root、button、image、hidden、fallback */\nexport const imageStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    verticalAlign: 'middle',\n    backgroundColor: '_fill',\n    color: '_textMuted',\n  },\n  // 可以预览：去掉按钮外观，指针变成放大镜\n  button: {\n    padding: 0,\n    borderWidth: 0,\n    font: 'inherit',\n    cursor: 'zoom-in',\n  },\n  image: { display: 'block', width: '100%', height: '100%' },\n  // 加载完之前不显示（占位在扫光）；没写尺寸时仍占位，量得出图片大小\n  hidden: { opacity: 0 },\n  fallback: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    padding: '_sm',\n    fontSize: '_xs',\n    textAlign: 'center',\n  },\n});\n\n/** Image 的 object-fit：cover、contain、fill、none、scale-down */\nexport const imageFitStyles = css.create({\n  cover: { objectFit: 'cover' },\n  contain: { objectFit: 'contain' },\n  fill: { objectFit: 'fill' },\n  none: { objectFit: 'none' },\n  'scale-down': { objectFit: 'scale-down' },\n});\n\n/** Image 的动态样式：尺寸 */\nexport const imageDynamicStyles = css.create({\n  size: (width: string, height: string) => ({ width, height }),\n});\n\n/** ImageGroup 交给里面的 Image 的：登记自己、打开预览 */\ninterface ImageGroupState {\n  /** 登记一张可以预览的图，返回读它当前序号的函数与注销函数 */\n  register(item: () => LightboxItem): { index: () => number; release: () => void };\n  /** 从第 index 张打开预览 */\n  open(index: number): void;\n}\n\nconst ImageGroupContext = createContext<ImageGroupState>('ImageGroup');\n\nconst toLength = (value: number | string | undefined) =>\n  value == null ? 'auto' : typeof value === 'number' ? `${value}px` : value;\n\n/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */\nexport const Image = _component(\n  ({\n    src,\n    alt,\n    width,\n    height,\n    fit = 'cover',\n    radius = 'md',\n    preview = false,\n    fallback,\n    propsRoot,\n    propsFallback,\n    ...rest\n  }: ImageProps) => {\n    const lang = useLang();\n    const group = ImageGroupContext.inject(null);\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    let viewing = _state(false);\n    const options = () => (typeof preview === 'object' ? preview : {});\n    const item = (): LightboxItem => ({\n      src: options().src ?? src,\n      alt,\n      caption: options().caption,\n      download: options().download,\n    });\n    // 在 ImageGroup 里：登记自己，预览交给组\n    const membership = _untrack(preview) && group ? group.register(item) : undefined;\n    if (membership) _effect(() => membership.release);\n\n    // 地址换了：重新加载（只在变化时；挂载后再置回 loading 会盖掉已经到了的 load，缓存里的图就一直不显示）\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    function open() {\n      if (membership) group!.open(membership.index());\n      else viewing = true;\n    }\n\n    return () => {\n      const sx = [\n        imageStyles.root,\n        radiusStyles[radius],\n        imageDynamicStyles.size(toLength(width), toLength(height)),\n        status === 'loading' && shimmerStyles.wave,\n      ];\n      const content = (\n        <>\n          {status !== 'error' && (\n            <img\n              {...mergeAttrs<'img'>(\n                {\n                  sx: [\n                    imageStyles.image,\n                    imageFitStyles[fit],\n                    status === 'loading' && imageStyles.hidden,\n                    status === 'loaded' && shimmerStyles.reveal,\n                  ],\n                  loading: 'lazy',\n                  decoding: 'async',\n                },\n                rest,\n                {\n                  src,\n                  alt,\n                  onLoad: () => (status = 'loaded'),\n                  onError: () => (status = 'error'),\n                },\n              )}\n            />\n          )}\n          {status === 'error' && (\n            <span\n              {...mergeAttrs<'span'>({ sx: imageStyles.fallback }, propsFallback, {\n                role: 'img',\n                'aria-label': alt,\n              })}\n              aria-description={lang.imageError}\n            >\n              {fallback ?? (\n                <>\n                  <Icon icon={ImageOff} />\n                  <span aria-hidden=\"true\">{alt}</span>\n                </>\n              )}\n            </span>\n          )}\n        </>\n      );\n      if (!preview || status === 'error')\n        return <span {...mergeAttrs<'span'>({ sx }, propsRoot)}>{content}</span>;\n      return (\n        <>\n          <button\n            {...mergeAttrs<'button'>(\n              { sx: [...sx, imageStyles.button, focusRingStyles.visible] },\n              propsRoot as PartProps<'button'>,\n              { type: 'button', 'aria-label': lang.imagePreview(alt), onClick: open },\n            )}\n          >\n            {content}\n          </button>\n          {!membership && <Lightbox items={[item()]} _open={viewing} />}\n        </>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ImageGroupProps extends PartProps<'div'> {\n  /** 到头之后从另一头继续，默认 false */\n  loop?: boolean;\n  /** 预览（Lightbox）的部件属性 */\n  propsLightbox?: Partial<LightboxProps>;\n  /** 里面的 Image（也可以夹着别的内容） */\n  children?: VNodeChild;\n}\n\n/** ImageGroup 的样式：root */\nexport const imageGroupStyles = css.create({\n  root: { display: 'flex', flexWrap: 'wrap', gap: '_sm' },\n});\n\n/** 一组图片：共用一个预览，大图里左右切换 */\nexport const ImageGroup = _component(\n  ({ loop = false, propsLightbox, children, ...rest }: ImageGroupProps) => {\n    // 登记的图片：按登记（渲染）的顺序。不是响应式的：组的渲染不能读它们的属性——\n    // 渲染里生成的子节点会给它们新的属性，读了就又触发组的渲染，无限循环\n    let entries: { read: () => LightboxItem }[] = [];\n    // 打开预览时取的一份\n    let items = _state.raw<LightboxItem[]>([]);\n    let open = _state(false);\n    let index = _state(0);\n\n    ImageGroupContext.provide({\n      register(read) {\n        const entry = { read };\n        entries = [...entries, entry];\n        return {\n          index: () => entries.indexOf(entry),\n          release: () => (entries = entries.filter((item) => item !== entry)),\n        };\n      },\n      open(at) {\n        items = entries.map((entry) => entry.read());\n        index = at;\n        open = true;\n      },\n    });\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: imageGroupStyles.root }, rest)}>\n        {children}\n        <Lightbox\n          {...mergePartProps<Partial<LightboxProps>>({ loop }, propsLightbox)}\n          items={items}\n          _open={open}\n          _index={index}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/ItemList.d.ts

@@ -0,0 +1,69 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Space } from '../utils/style/styles';
+/** 条目的疏密 */
+export interface ItemListDensities {
+    /** 紧凑：卡片里的短列表 */
+    compact: unknown;
+    /** 标准（默认）：弹出层、页面里的列表 */
+    standard: unknown;
+}
+/** 未声明的属性落到 ul 上 */
+export interface ItemListProps extends PartProps<'ul'> {
+    /** 条目之间画线 */
+    divided?: boolean;
+    /** 悬停时着底色：整条可点时 */
+    hoverable?: boolean;
+    /**
+     * 疏密
+     * @default 'standard'
+     */
+    density?: keyof ItemListDensities;
+    /** 条目两侧的内边距（与弹出层、卡片的内边距对齐） */
+    inset?: Space;
+    /** ItemListItem */
+    children?: VNodeChild;
+}
+/** 未声明的属性落到 li 上；原生的 title 属性让给标题 */
+export interface ItemListItemProps extends PartProps<'li', 'title'> {
+    /** 起始边：图标、色点、头像、状态 */
+    start?: VNodeChild;
+    /** 标题：一句话，常是链接 */
+    title?: VNodeChild;
+    /** 标题下的说明（次要文字） */
+    description?: VNodeChild;
+    /** 结束边：标记、数字、时间、操作 */
+    end?: VNodeChild;
+    /**
+     * 起始边、结束边与内容的对齐：center 垂直居中，start 贴着第一行（多行内容、色点对齐标题）
+     * @default 'center'
+     */
+    align?: 'center' | 'start';
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'span'>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'span'>;
+    /** 说明下面的更多内容 */
+    children?: VNodeChild;
+}
+/** ItemList 的样式：list、item、divided、hoverable、compact、standard、body、title、description… */
+export declare const itemListStyles: Readonly<{
+    alignStart: css.CompiledStyles;
+    body: css.CompiledStyles;
+    compact: css.CompiledStyles;
+    description: css.CompiledStyles;
+    divided: css.CompiledStyles;
+    end: css.CompiledStyles;
+    hoverable: css.CompiledStyles;
+    item: css.CompiledStyles;
+    list: css.CompiledStyles;
+    noStart: css.CompiledStyles;
+    standard: css.CompiledStyles;
+    startAligned: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 条目列表（ul） */
+export declare const ItemList: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ItemListProps>;
+/** 条目列表的一条（li） */
+export declare const ItemListItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ItemListItemProps>;

package/dist/display/ItemList.js

@@ -0,0 +1,147 @@
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { paddingInlineStyles } from "../utils/style/styles.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/ItemList.tsx
+/** 条目的疏密 */
+/** ItemList 交给条目的外观 */
+var ItemListContext = createContext("ItemList");
+/** 未声明的属性落到 ul 上 */
+/** 未声明的属性落到 li 上；原生的 title 属性让给标题 */
+/** ItemList 的样式：list、item、divided、hoverable、compact、standard、body、title、description… */
+var itemListStyles = css.create({
+	list: {
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		display: "flex",
+		flexDirection: "column"
+	},
+	item: {
+		display: "grid",
+		gridTemplateColumns: "auto minmax(0, 1fr) auto",
+		columnGap: "_sm",
+		alignItems: "center"
+	},
+	alignStart: { alignItems: "start" },
+	divided: {
+		borderBlockEndWidth: {
+			default: "_xs",
+			":last-child": 0
+		},
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_borderMuted"
+	},
+	hoverable: { backgroundColor: {
+		default: null,
+		":hover": "_fillHover"
+	} },
+	compact: { paddingBlock: "_xs" },
+	standard: { paddingBlock: "_sm" },
+	noStart: { gridTemplateColumns: "minmax(0, 1fr) auto" },
+	startAligned: {
+		display: "flex",
+		alignItems: "center",
+		minHeight: "1lh"
+	},
+	body: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		minWidth: 0
+	},
+	title: {
+		minWidth: 0,
+		overflowWrap: "anywhere"
+	},
+	description: {
+		color: "_textMuted",
+		fontSize: "_xs",
+		minWidth: 0,
+		overflowWrap: "anywhere"
+	},
+	end: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		justifySelf: "end"
+	}
+});
+/** 条目列表（ul） */
+var ItemList = /*#__PURE__*/ _component((_props, _ctx) => {
+	const divided = readonlyProp(_props, "divided", false);
+	const hoverable = readonlyProp(_props, "hoverable", false);
+	const density = readonlyProp(_props, "density", "standard");
+	const inset = readonlyProp(_props, "inset");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	ItemListContext.provide(() => ({
+		divided: divided.value,
+		hoverable: hoverable.value,
+		density: density.value,
+		inset: inset.value
+	}));
+	return () => createVNode("ul", mergeAttrs({ sx: itemListStyles.list }, rest), [children.value]);
+}, {
+	name: "ItemList",
+	props: [
+		"divided",
+		"hoverable",
+		"density",
+		"inset"
+	]
+});
+/** 条目列表的一条（li） */
+var ItemListItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const start = readonlyProp(_props2, "start");
+	const title = readonlyProp(_props2, "title");
+	const description = readonlyProp(_props2, "description");
+	const end = readonlyProp(_props2, "end");
+	const align = readonlyProp(_props2, "align", "center");
+	const propsTitle = readonlyProp(_props2, "propsTitle");
+	const propsDescription = readonlyProp(_props2, "propsDescription");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const look = ItemListContext.inject(() => ({
+		divided: false,
+		hoverable: false,
+		density: "standard",
+		inset: void 0
+	}));
+	return () => {
+		const { divided, hoverable, density, inset } = look();
+		return createVNode("li", mergeAttrs({ sx: [
+			itemListStyles.item,
+			itemListStyles[density],
+			start.value == null && itemListStyles.noStart,
+			align.value === "start" && itemListStyles.alignStart,
+			divided && itemListStyles.divided,
+			hoverable && itemListStyles.hoverable,
+			inset && paddingInlineStyles[inset]
+		] }, rest), [
+			hasContent(start.value) && createVNode("span", css.attrs(align.value === "start" && itemListStyles.startAligned), [start.value]),
+			createVNode("span", css.attrs(itemListStyles.body), [
+				hasContent(title.value) && createVNode("span", mergeAttrs({ sx: itemListStyles.title }, propsTitle.value), [title.value]),
+				hasContent(description.value) && createVNode("span", mergeAttrs({ sx: itemListStyles.description }, propsDescription.value), [description.value]),
+				children.value
+			]),
+			end.value != null ? createVNode("span", css.attrs(itemListStyles.end), [end.value]) : createVNode("span", null, null)
+		]);
+	};
+}, {
+	name: "ItemListItem",
+	props: [
+		"start",
+		"title",
+		"description",
+		"end",
+		"align",
+		"propsTitle",
+		"propsDescription"
+	]
+});
+//#endregion
+export { ItemList, ItemListItem, itemListStyles };
+
+//# sourceMappingURL=ItemList.js.map

package/dist/display/ItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemList.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/ItemList.tsx"],"sourcesContent":["/**\n * 条目列表：一行一条，起始边是图标、色点或头像，中间是标题与说明，结束边是标记、数字或操作。\n * 待办、通知、我负责的任务、清单这类“界面里的列表”（正文里的列表用 List）。参考 Ant Design 的 List.Item.Meta。\n *\n *   <ItemList divided>\n *     <ItemListItem start={<StatusDot />} title={<Link href=\"/inbox\">资料审核</Link>}\n *       description=\"PO-2026-0187 · 官网改版\" end={<DeadlineBadge due=\"2026-10-23\" />} />\n *   </ItemList>\n *\n * divided 在条目之间画线；hoverable 悬停时着底色（整条可点时）；inset 是条目两侧的内边距（放在弹出层、\n * 卡片正文里时与容器的内边距对齐）。标题与说明默认单行省略不了时换行；align=\"start\" 让起始边、结束边贴着第一行。\n */\nimport { createContext, _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 { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { paddingInlineStyles, type Space } from '../utils/style/styles';\n\n/** 条目的疏密 */\nexport interface ItemListDensities {\n  /** 紧凑：卡片里的短列表 */\n  compact: unknown;\n  /** 标准（默认）：弹出层、页面里的列表 */\n  standard: unknown;\n}\n\n/** ItemList 交给条目的外观 */\ninterface ItemListLook {\n  divided: boolean;\n  hoverable: boolean;\n  density: keyof ItemListDensities;\n  inset: Space | undefined;\n}\n\nconst ItemListContext = createContext<() => ItemListLook>('ItemList');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ItemListProps extends PartProps<'ul'> {\n  /** 条目之间画线 */\n  divided?: boolean;\n  /** 悬停时着底色：整条可点时 */\n  hoverable?: boolean;\n  /**\n   * 疏密\n   * @default 'standard'\n   */\n  density?: keyof ItemListDensities;\n  /** 条目两侧的内边距（与弹出层、卡片的内边距对齐） */\n  inset?: Space;\n  /** ItemListItem */\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到 li 上；原生的 title 属性让给标题 */\nexport interface ItemListItemProps extends PartProps<'li', 'title'> {\n  /** 起始边：图标、色点、头像、状态 */\n  start?: VNodeChild;\n  /** 标题：一句话，常是链接 */\n  title?: VNodeChild;\n  /** 标题下的说明（次要文字） */\n  description?: VNodeChild;\n  /** 结束边：标记、数字、时间、操作 */\n  end?: VNodeChild;\n  /**\n   * 起始边、结束边与内容的对齐：center 垂直居中，start 贴着第一行（多行内容、色点对齐标题）\n   * @default 'center'\n   */\n  align?: 'center' | 'start';\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'span'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 说明下面的更多内容 */\n  children?: VNodeChild;\n}\n\n/** ItemList 的样式：list、item、divided、hoverable、compact、standard、body、title、description… */\nexport const itemListStyles = css.create({\n  list: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' },\n  item: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr) auto',\n    columnGap: '_sm',\n    alignItems: 'center',\n  },\n  alignStart: { alignItems: 'start' },\n  divided: {\n    borderBlockEndWidth: { default: '_xs', ':last-child': 0 },\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n  hoverable: { backgroundColor: { default: null, ':hover': '_fillHover' } },\n  compact: { paddingBlock: '_xs' },\n  standard: { paddingBlock: '_sm' },\n  // 没有 start 时第一列宽度为 0、不留间距\n  noStart: { gridTemplateColumns: 'minmax(0, 1fr) auto' },\n  // 色点、小图标贴着第一行的中线\n  startAligned: { display: 'flex', alignItems: 'center', minHeight: '1lh' },\n  body: { display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0 },\n  title: { minWidth: 0, overflowWrap: 'anywhere' },\n  description: { color: '_textMuted', fontSize: '_xs', minWidth: 0, overflowWrap: 'anywhere' },\n  end: { display: 'flex', alignItems: 'center', gap: '_xs', justifySelf: 'end' },\n});\n\n/** 条目列表（ul） */\nexport const ItemList = _component(\n  ({\n    divided = false,\n    hoverable = false,\n    density = 'standard',\n    inset,\n    children,\n    ...rest\n  }: ItemListProps) => {\n    ItemListContext.provide(() => ({ divided, hoverable, density, inset }));\n    return () => <ul {...mergeAttrs<'ul'>({ sx: itemListStyles.list }, rest)}>{children}</ul>;\n  },\n);\n\n/** 条目列表的一条（li） */\nexport const ItemListItem = _component(\n  ({\n    start,\n    title,\n    description,\n    end,\n    align = 'center',\n    propsTitle,\n    propsDescription,\n    children,\n    ...rest\n  }: ItemListItemProps) => {\n    const look = ItemListContext.inject(() => ({\n      divided: false,\n      hoverable: false,\n      density: 'standard' as const,\n      inset: undefined,\n    }));\n    return () => {\n      const { divided, hoverable, density, inset } = look();\n      return (\n        <li\n          {...mergeAttrs<'li'>(\n            {\n              sx: [\n                itemListStyles.item,\n                itemListStyles[density],\n                start == null && itemListStyles.noStart,\n                align === 'start' && itemListStyles.alignStart,\n                divided && itemListStyles.divided,\n                hoverable && itemListStyles.hoverable,\n                inset && paddingInlineStyles[inset],\n              ],\n            },\n            rest,\n          )}\n        >\n          {hasContent(start) && (\n            <span {...css.attrs(align === 'start' && itemListStyles.startAligned)}>{start}</span>\n          )}\n          <span {...css.attrs(itemListStyles.body)}>\n            {hasContent(title) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.title }, propsTitle)}>{title}</span>\n            )}\n            {hasContent(description) && (\n              <span {...mergeAttrs<'span'>({ sx: itemListStyles.description }, propsDescription)}>\n                {description}\n              </span>\n            )}\n            {children}\n          </span>\n          {end != null ? <span {...css.attrs(itemListStyles.end)}>{end}</span> : <span />}\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Marquee.d.ts

@@ -0,0 +1,59 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Space, type StyleTable } from '../utils/style/styles';
+/** 滚动方向 */
+export interface MarqueeDirections {
+    /** 向左（默认） */
+    left: unknown;
+    /** 向右 */
+    right: unknown;
+    /** 向上 */
+    up: unknown;
+    /** 向下 */
+    down: unknown;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface MarqueeProps extends PartProps<'div'> {
+    /** 滚动方向，默认 left */
+    direction?: keyof MarqueeDirections;
+    /** 速度：每秒多少 px，默认 40 */
+    speed?: number;
+    /** 指针悬停、焦点在里面时暂停，默认 true */
+    pauseOnHover?: boolean;
+    /** 暂停 */
+    paused?: boolean;
+    /** 两端渐隐 */
+    fade?: boolean;
+    /** 项之间（以及两份之间）的间距，默认 lg */
+    gap?: Space;
+    /** 动画层的部件属性 */
+    propsTrack?: PartProps<'div'>;
+    /** 每一份内容的部件属性 */
+    propsGroup?: PartProps<'div'>;
+    /** 内容 */
+    children?: VNodeChild;
+}
+/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */
+export declare const marqueeStyles: Readonly<{
+    copy: css.CompiledStyles;
+    fade: css.CompiledStyles;
+    fadeVertical: css.CompiledStyles;
+    group: css.CompiledStyles;
+    groupVertical: css.CompiledStyles;
+    pausable: css.CompiledStyles;
+    paused: css.CompiledStyles;
+    reverse: css.CompiledStyles;
+    root: css.CompiledStyles;
+    track: css.CompiledStyles;
+    trackVertical: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */
+export declare const marqueeTrailStyles: Readonly<Record<'inline' | 'block', StyleTable<Space>>>;
+/** Marquee 的样式：duration（一圈的时长） */
+export declare const marqueeDynamicStyles: Readonly<{
+    readonly duration: (seconds: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */
+export declare const Marquee: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MarqueeProps>;

package/dist/display/Marquee.js

@@ -0,0 +1,155 @@
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles, gapStyles } from "../utils/style/styles.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { useReducedMotion } from "../utils/dom/media-query.js";
+import { createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Marquee.tsx
+/** 滚动方向 */
+/** 未声明的属性落到外层 div 上 */
+var scrollX = css.keyframes({
+	from: { transform: "none" },
+	to: { transform: "translateX(-50%)" }
+});
+var scrollY = css.keyframes({
+	from: { transform: "none" },
+	to: { transform: "translateY(-50%)" }
+});
+/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */
+var marqueeStyles = css.create({
+	root: {
+		display: "flex",
+		overflow: {
+			default: "hidden",
+			_reducedMotion: "auto"
+		}
+	},
+	vertical: { flexDirection: "column" },
+	fade: { maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)" },
+	fadeVertical: { maskImage: "linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)" },
+	track: {
+		display: "flex",
+		flexShrink: 0,
+		width: "max-content",
+		animationName: {
+			default: scrollX,
+			_reducedMotion: "none"
+		},
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite"
+	},
+	trackVertical: {
+		flexDirection: "column",
+		width: "auto",
+		height: "max-content",
+		animationName: {
+			default: scrollY,
+			_reducedMotion: "none"
+		}
+	},
+	reverse: { animationDirection: "reverse" },
+	pausable: { animationPlayState: {
+		default: "running",
+		":hover": "paused",
+		":focus-within": "paused"
+	} },
+	paused: { animationPlayState: "paused" },
+	group: {
+		display: "flex",
+		flexShrink: 0,
+		alignItems: "center"
+	},
+	groupVertical: { flexDirection: "column" },
+	copy: { display: {
+		default: null,
+		_reducedMotion: "none"
+	} }
+});
+/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */
+var marqueeTrailStyles = {
+	inline: css.create({
+		none: { paddingInlineEnd: "_none" },
+		xs: { paddingInlineEnd: "_xs" },
+		sm: { paddingInlineEnd: "_sm" },
+		md: { paddingInlineEnd: "_md" },
+		lg: { paddingInlineEnd: "_lg" },
+		xl: { paddingInlineEnd: "_xl" }
+	}),
+	block: css.create({
+		none: { paddingBlockEnd: "_none" },
+		xs: { paddingBlockEnd: "_xs" },
+		sm: { paddingBlockEnd: "_sm" },
+		md: { paddingBlockEnd: "_md" },
+		lg: { paddingBlockEnd: "_lg" },
+		xl: { paddingBlockEnd: "_xl" }
+	})
+};
+/** Marquee 的样式：duration（一圈的时长） */
+var marqueeDynamicStyles = css.create({ duration: (seconds) => ({ animationDuration: `${seconds}s` }) });
+/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */
+var Marquee = /*#__PURE__*/ _component((_props, _ctx) => {
+	const direction = readonlyProp(_props, "direction", "left");
+	const speed = readonlyProp(_props, "speed", 40);
+	const pauseOnHover = readonlyProp(_props, "pauseOnHover", true);
+	const paused = readonlyProp(_props, "paused", false);
+	const fade = readonlyProp(_props, "fade", false);
+	const gap = readonlyProp(_props, "gap", "lg");
+	const propsTrack = readonlyProp(_props, "propsTrack");
+	const propsGroup = readonlyProp(_props, "propsGroup");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let group = shallowRef(null);
+	let length = ref(0);
+	const reducedMotion = useReducedMotion();
+	const vertical = () => direction.value === "up" || direction.value === "down";
+	useResizeObserver(() => group.value, () => {
+		if (group.value) length.value = vertical() ? group.value.offsetHeight : group.value.offsetWidth;
+	});
+	const renderGroup = (copy) => createVNode("div", mergeAttrs({ sx: [
+		marqueeStyles.group,
+		vertical() && marqueeStyles.groupVertical,
+		gapStyles[gap.value],
+		marqueeTrailStyles[vertical() ? "block" : "inline"][gap.value],
+		copy && marqueeStyles.copy
+	] }, propsGroup.value, copy ? {
+		"aria-hidden": true,
+		inert: true
+	} : { ref: group }), [children.value]);
+	return () => createVNode("div", mergeProps(mergeAttrs({
+		sx: [
+			marqueeStyles.root,
+			css.select(() => vertical() && marqueeStyles.vertical, true),
+			fade.value && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),
+			reducedMotion.value && focusRingStyles.visible
+		],
+		role: "marquee",
+		tabindex: reducedMotion.value ? 0 : void 0
+	}, rest), {
+		"data-direction": direction.value,
+		"data-paused": paused.value || void 0
+	}), [createVNode("div", mergeAttrs({ sx: [
+		marqueeStyles.track,
+		css.select(() => vertical() && marqueeStyles.trackVertical, true),
+		(direction.value === "right" || direction.value === "down") && marqueeStyles.reverse,
+		pauseOnHover.value && marqueeStyles.pausable,
+		paused.value && marqueeStyles.paused,
+		css.bind(marqueeDynamicStyles.duration, () => [Math.max(length.value, 1) / Math.max(speed.value, 1)], true)
+	] }, propsTrack.value), [renderGroup(false), renderGroup(true)])]);
+}, {
+	name: "Marquee",
+	props: [
+		"direction",
+		"speed",
+		"pauseOnHover",
+		"paused",
+		"fade",
+		"gap",
+		"propsTrack",
+		"propsGroup"
+	]
+});
+//#endregion
+export { Marquee, marqueeDynamicStyles, marqueeStyles, marqueeTrailStyles };
+
+//# sourceMappingURL=Marquee.js.map

package/dist/display/Marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Marquee.tsx"],"sourcesContent":["/**\n * 跑马灯（div）：内容循环滚动（合作伙伴 logo、公告、标签墙）。纯 CSS 动画：内容复制一份接在后面，\n * 平移到正好一份的长度时与开头重合，无缝循环。\n *\n *   <Marquee speed={40} pauseOnHover aria-label=\"合作伙伴\">\n *     {partners.map((partner) => <img src={partner.logo} alt={partner.name} />)}\n *   </Marquee>\n *\n * - 方向 left / right / up / down；speed 是每秒多少 px（按一份内容的长度换算成动画时长，内容变化时重新量）；\n * - 指针悬停、焦点在里面时暂停（pauseOnHover）；paused 由外部控制（WCAG 2.2.2：给用户一个暂停按钮）；\n * - 减少动态效果时不滚动，内容可以手动滚动查看（容器可以聚焦，键盘也能滚）；\n * - role=\"marquee\"（ARIA 的跑马灯角色，用 aria-label 命名）；复制的那份对读屏隐藏且不可聚焦（inert），读屏只念一遍。\n *\n * 部件：Root（div）、Track（div，做动画的那一层）、Group（div，一份内容）。\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 { useReducedMotion } from '../utils/dom/media-query';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles, gapStyles, type Space, type StyleTable } from '../utils/style/styles';\n\n/** 滚动方向 */\nexport interface MarqueeDirections {\n  /** 向左（默认） */\n  left: unknown;\n  /** 向右 */\n  right: unknown;\n  /** 向上 */\n  up: unknown;\n  /** 向下 */\n  down: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface MarqueeProps extends PartProps<'div'> {\n  /** 滚动方向，默认 left */\n  direction?: keyof MarqueeDirections;\n  /** 速度：每秒多少 px，默认 40 */\n  speed?: number;\n  /** 指针悬停、焦点在里面时暂停，默认 true */\n  pauseOnHover?: boolean;\n  /** 暂停 */\n  paused?: boolean;\n  /** 两端渐隐 */\n  fade?: boolean;\n  /** 项之间（以及两份之间）的间距，默认 lg */\n  gap?: Space;\n  /** 动画层的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 每一份内容的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\nconst scrollX = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateX(-50%)' },\n});\nconst scrollY = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateY(-50%)' },\n});\n\n/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */\nexport const marqueeStyles = css.create({\n  root: {\n    display: 'flex',\n    overflow: { default: 'hidden', _reducedMotion: 'auto' },\n  },\n  vertical: { flexDirection: 'column' },\n  fade: {\n    maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',\n  },\n  fadeVertical: {\n    maskImage: 'linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)',\n  },\n  // 两份内容并排；平移 -50% 正好是一份（含它后面的间距）\n  track: {\n    display: 'flex',\n    flexShrink: 0,\n    width: 'max-content',\n    animationName: { default: scrollX, _reducedMotion: 'none' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n  trackVertical: {\n    flexDirection: 'column',\n    width: 'auto',\n    height: 'max-content',\n    animationName: { default: scrollY, _reducedMotion: 'none' },\n  },\n  reverse: { animationDirection: 'reverse' },\n  pausable: {\n    animationPlayState: { default: 'running', ':hover': 'paused', ':focus-within': 'paused' },\n  },\n  paused: { animationPlayState: 'paused' },\n  group: { display: 'flex', flexShrink: 0, alignItems: 'center' },\n  groupVertical: { flexDirection: 'column' },\n  // 不滚动时用不着复制的那份\n  copy: { display: { default: null, _reducedMotion: 'none' } },\n});\n\n/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */\nexport const marqueeTrailStyles: Readonly<Record<'inline' | 'block', StyleTable<Space>>> = {\n  inline: css.create({\n    none: { paddingInlineEnd: '_none' },\n    xs: { paddingInlineEnd: '_xs' },\n    sm: { paddingInlineEnd: '_sm' },\n    md: { paddingInlineEnd: '_md' },\n    lg: { paddingInlineEnd: '_lg' },\n    xl: { paddingInlineEnd: '_xl' },\n  }),\n  block: css.create({\n    none: { paddingBlockEnd: '_none' },\n    xs: { paddingBlockEnd: '_xs' },\n    sm: { paddingBlockEnd: '_sm' },\n    md: { paddingBlockEnd: '_md' },\n    lg: { paddingBlockEnd: '_lg' },\n    xl: { paddingBlockEnd: '_xl' },\n  }),\n};\n\n// 时长是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Marquee 的样式：duration（一圈的时长） */\nexport const marqueeDynamicStyles = css.create({\n  duration: (seconds: number) => ({ animationDuration: `${seconds}s` }),\n});\n\n/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */\nexport const Marquee = _component(\n  ({\n    direction = 'left',\n    speed = 40,\n    pauseOnHover = true,\n    paused = false,\n    fade = false,\n    gap = 'lg',\n    propsTrack,\n    propsGroup,\n    children,\n    ...rest\n  }: MarqueeProps) => {\n    let group = _state.raw<HTMLElement | null>(null);\n    // 一份内容（含间距）的长度：换算动画时长\n    let length = _state(0);\n    // 减少动态效果时变成手动滚动的区域：键盘要能聚焦它才能滚动\n    const reducedMotion = useReducedMotion();\n    const vertical = () => direction === 'up' || direction === 'down';\n\n    useResizeObserver(\n      () => group,\n      () => {\n        if (group) length = vertical() ? group.offsetHeight : group.offsetWidth;\n      },\n    );\n\n    const renderGroup = (copy: boolean) => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.group,\n              vertical() && marqueeStyles.groupVertical,\n              gapStyles[gap],\n              // 每份后面留一个间距：两份之间与项之间一样宽\n              marqueeTrailStyles[vertical() ? 'block' : 'inline'][gap],\n              copy && marqueeStyles.copy,\n            ],\n          },\n          propsGroup,\n          copy ? { 'aria-hidden': true, inert: true } : { ref: _toRef(group) },\n        )}\n      >\n        {children}\n      </div>\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.root,\n              vertical() && marqueeStyles.vertical,\n              fade && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),\n              reducedMotion.value && focusRingStyles.visible,\n            ],\n            role: 'marquee',\n            tabindex: reducedMotion.value ? 0 : undefined,\n          },\n          rest,\n        )}\n        data-direction={direction}\n        data-paused={paused || undefined}\n      >\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                marqueeStyles.track,\n                vertical() && marqueeStyles.trackVertical,\n                (direction === 'right' || direction === 'down') && marqueeStyles.reverse,\n                pauseOnHover && marqueeStyles.pausable,\n                paused && marqueeStyles.paused,\n                marqueeDynamicStyles.duration(Math.max(length, 1) / Math.max(speed, 1)),\n              ],\n            },\n            propsTrack,\n          )}\n        >\n          {renderGroup(false)}\n          {renderGroup(true)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/ProportionBar.d.ts

@@ -0,0 +1,55 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 比例条的一段 */
+export interface ProportionSegment {
+    /** 标识 */
+    key: string;
+    /** 名称 */
+    label: string;
+    /** 数量 */
+    value: number;
+    /** 色调；不写时按顺序取 accent、info、success、warning、danger、neutral */
+    tone?: StatusTone;
+    /** 任意 CSS 颜色；写了时不看 tone */
+    color?: string;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface ProportionBarProps extends PartProps<'div'> {
+    /** 各段：按顺序从起始边排 */
+    segments: readonly ProportionSegment[];
+    /** 横条的名称（读屏）：后面自动带上各段的数量 */
+    'aria-label': string;
+    /** 图例里数量的写法，默认是数字 */
+    valueText?: (segment: ProportionSegment) => VNodeChild;
+    /**
+     * 下面的图例
+     * @default true
+     */
+    legend?: boolean;
+    /**
+     * 横条的粗细
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /** 图例每一项后面的补充（“待定价”） */
+    legendExtra?: (segment: ProportionSegment) => VNodeChild;
+}
+/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */
+export declare const proportionBarStyles: Readonly<{
+    bar: css.CompiledStyles;
+    legend: css.CompiledStyles;
+    legendItem: css.CompiledStyles;
+    md: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** ProportionBar 的动态样式：段的份额、任意颜色 */
+export declare const proportionBarDynamicStyles: Readonly<{
+    readonly share: (value: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly color: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 比例条 */
+export declare const ProportionBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProportionBarProps>;