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

package/dist/display/Image.js

@@ -0,0 +1,212 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles, radiusStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { Lightbox } from "../overlay/Lightbox.js";
+import { Fragment, createVNode, mergeProps, ref, shallowRef, watch } from "vue";
+import { _component, childrenProp, createContext, effect, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ImageOff } from "@lucide/icons";
+//#region src/display/Image.tsx
+/**
+* 图片：懒加载，加载时是扫光的占位，加载失败显示占位与原因；写了 preview 时点击（或 Enter）看大图（Lightbox）。
+* 同一个 ImageGroup 里的图片共用一个 Lightbox，大图里可以左右切换（相册、工单附件、验收照片）。
+*
+*   <Image src="/photos/1-thumb.jpg" alt="支架正面" width={160} height={120} preview={{ src: '/photos/1.jpg' }} />
+*   <ImageGroup>
+*     {photos.map((photo) => <Image src={photo.thumb} alt={photo.title} preview={{ src: photo.url }} />)}
+*   </ImageGroup>
+*
+* 可以预览的图片是按钮：名称“查看大图：alt”，键盘能到。尺寸写 width、height（数字是 px），object-fit 用 fit。
+* 部件：Root（span，可以预览时是 button）、Image（img）、Fallback（span）。
+*/
+/** object-fit 的取值 */
+/** 预览的选项 */
+/** 未声明的属性落到 img 上；外层用 propsRoot */
+/** Image 的样式：root、button、image、hidden、fallback */
+var imageStyles = css.create({
+	root: {
+		position: "relative",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		verticalAlign: "middle",
+		backgroundColor: "_fill",
+		color: "_textMuted"
+	},
+	button: {
+		padding: 0,
+		borderWidth: 0,
+		font: "inherit",
+		cursor: "zoom-in"
+	},
+	image: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	},
+	hidden: { opacity: 0 },
+	fallback: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_xs",
+		padding: "_sm",
+		fontSize: "_xs",
+		textAlign: "center"
+	}
+});
+/** Image 的 object-fit：cover、contain、fill、none、scale-down */
+var imageFitStyles = css.create({
+	cover: { objectFit: "cover" },
+	contain: { objectFit: "contain" },
+	fill: { objectFit: "fill" },
+	none: { objectFit: "none" },
+	"scale-down": { objectFit: "scale-down" }
+});
+/** Image 的动态样式：尺寸 */
+var imageDynamicStyles = css.create({ size: (width, height) => ({
+	width,
+	height
+}) });
+/** ImageGroup 交给里面的 Image 的：登记自己、打开预览 */
+var ImageGroupContext = createContext("ImageGroup");
+var toLength = (value) => value == null ? "auto" : typeof value === "number" ? `${value}px` : value;
+/** 图片：懒加载、加载中占位、失败占位，可以点开看大图 */
+var Image = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const src = readonlyProp(_props, "src");
+	const alt = readonlyProp(_props, "alt");
+	const width = readonlyProp(_props, "width");
+	const height = readonlyProp(_props, "height");
+	const fit = readonlyProp(_props, "fit", "cover");
+	const radius = readonlyProp(_props, "radius", "md");
+	const preview = readonlyProp(_props, "preview", false);
+	const fallback = readonlyProp(_props, "fallback");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsFallback = readonlyProp(_props, "propsFallback");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const group = ImageGroupContext.inject(null);
+	let status = ref("loading");
+	let viewing = ref(false);
+	const options = () => typeof preview.value === "object" ? preview.value : {};
+	const item = () => ({
+		src: options().src ?? src.value,
+		alt: alt.value,
+		caption: options().caption,
+		download: options().download
+	});
+	const membership = untrack(() => preview.value) && group ? group.register(item) : void 0;
+	if (membership) effect(() => membership.release);
+	watch(() => src.value, () => status.value = "loading");
+	function open() {
+		if (membership) group.open(membership.index());
+		else viewing.value = true;
+	}
+	return () => {
+		const sx = [
+			imageStyles.root,
+			radiusStyles[radius.value],
+			imageDynamicStyles.size(toLength(width.value), toLength(height.value)),
+			status.value === "loading" && shimmerStyles.wave
+		];
+		const content = createVNode(Fragment, null, [status.value !== "error" && createVNode("img", mergeAttrs({
+			sx: [
+				imageStyles.image,
+				imageFitStyles[fit.value],
+				status.value === "loading" && imageStyles.hidden,
+				status.value === "loaded" && shimmerStyles.reveal
+			],
+			loading: "lazy",
+			decoding: "async"
+		}, rest, {
+			src: src.value,
+			alt: alt.value,
+			onLoad: () => status.value = "loaded",
+			onError: () => status.value = "error"
+		}), null), status.value === "error" && createVNode("span", mergeProps(mergeAttrs({ sx: imageStyles.fallback }, propsFallback.value, {
+			role: "img",
+			"aria-label": alt.value
+		}), { "aria-description": lang.imageError }), [fallback.value ?? createVNode(Fragment, null, [createVNode(Icon, { "icon": ImageOff }, null), createVNode("span", { "aria-hidden": "true" }, [alt.value])])])]);
+		if (!preview.value || status.value === "error") return createVNode("span", mergeAttrs({ sx }, propsRoot.value), [content]);
+		return createVNode(Fragment, null, [createVNode("button", mergeAttrs({ sx: [
+			...sx,
+			imageStyles.button,
+			focusRingStyles.visible
+		] }, propsRoot.value, {
+			type: "button",
+			"aria-label": lang.imagePreview(alt.value),
+			onClick: open
+		}), [content]), !membership && createVNode(Lightbox, {
+			"items": [item()],
+			"_open": viewing.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => viewing.value = $event)
+		}, null)]);
+	};
+}, {
+	name: "Image",
+	props: [
+		"src",
+		"alt",
+		"width",
+		"height",
+		"fit",
+		"radius",
+		"preview",
+		"fallback",
+		"propsRoot",
+		"propsFallback"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** ImageGroup 的样式：root */
+var imageGroupStyles = css.create({ root: {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "_sm"
+} });
+/** 一组图片：共用一个预览，大图里左右切换 */
+var ImageGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache2 = [];
+	const loop = readonlyProp(_props2, "loop", false);
+	const propsLightbox = readonlyProp(_props2, "propsLightbox");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	let entries = [];
+	let items = shallowRef([]);
+	let open = ref(false);
+	let index = ref(0);
+	ImageGroupContext.provide({
+		register(read) {
+			const entry = { read };
+			entries = [...entries, entry];
+			return {
+				index: () => entries.indexOf(entry),
+				release: () => entries = entries.filter((item) => item !== entry)
+			};
+		},
+		open(at) {
+			items.value = entries.map((entry) => entry.read());
+			index.value = at;
+			open.value = true;
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: imageGroupStyles.root }, rest), [children.value, createVNode(Lightbox, mergeProps(mergePartProps({ loop: loop.value }, propsLightbox.value), {
+		"items": items.value,
+		"_open": open.value,
+		"onUpdate:_open": _cache2[0] || (_cache2[0] = ($event) => open.value = $event),
+		"_index": index.value,
+		"onUpdate:_index": _cache2[1] || (_cache2[1] = ($event) => index.value = $event)
+	}), null)]);
+}, {
+	name: "ImageGroup",
+	props: ["loop", "propsLightbox"]
+});
+//#endregion
+export { Image, ImageGroup, imageDynamicStyles, imageFitStyles, imageGroupStyles, imageStyles };
+
+//# sourceMappingURL=Image.js.map

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>;