@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/display/IndexBar.js

@@ -0,0 +1,158 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { useHost } from "../utils/host.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, nextTick, onBeforeUnmount, onMounted, ref, shallowReactive, watch } from "vue";
+//#region src/display/IndexBar.tsx
+/** 一组的标题登记给索引栏的 */
+/** 索引栏提供给各组标题的 */
+var IndexBarContext = createContext("IndexBar");
+/** 未声明的属性落到根元素（div）上 */
+/** IndexBar、IndexAnchor 的样式 */
+var indexBarStyles = css.create({
+	sidebar: {
+		position: "fixed",
+		insetInlineEnd: 0,
+		insetBlockStart: "50%",
+		zIndex: 200,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		paddingInline: "0.3em",
+		transform: "translateY(-50%)",
+		userSelect: "none"
+	},
+	letter: {
+		paddingBlock: "0.1em",
+		paddingInline: "0.4em",
+		fontSize: "0.7em",
+		fontWeight: "_medium",
+		lineHeight: "1.4",
+		color: {
+			default: "_textMuted",
+			"[data-active]": "_accentText"
+		}
+	},
+	anchor: {
+		position: "sticky",
+		zIndex: 1,
+		paddingBlock: "0.3em",
+		paddingInline: "_lg",
+		fontSize: "_sm",
+		fontWeight: "_semibold",
+		color: {
+			default: "_textMuted",
+			"[data-active]": "_accentText"
+		},
+		backgroundColor: {
+			default: "_background",
+			"[data-active]": "_surface"
+		}
+	}
+});
+/** 索引栏（div > 内容 + 右边的字母栏） */
+var IndexBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const stickyOffsetTop = readonlyProp(_props, "stickyOffsetTop", "0px");
+	const onSelect = readonlyProp(_props, "onSelect");
+	const children = childrenProp(_props);
+	const propsSidebar = readonlyProp(_props, "propsSidebar");
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const anchors = shallowReactive([]);
+	let active = ref(void 0);
+	let offsets = [];
+	const measureAnchors = async () => {
+		const scrollTop = host.scrollTop();
+		const rects = await Promise.all(anchors.map((anchor) => host.measure(anchor.element)));
+		offsets = anchors.map((anchor, position) => ({
+			index: anchor.index,
+			top: (rects[position]?.top ?? 0) + scrollTop
+		})).sort((a, b) => a.top - b.top);
+		update(host.scrollTop());
+	};
+	/** 当前的组：页面顶部已经越过的最后一个标题（留几像素的余量） */
+	const update = (scrollTop) => {
+		let current = offsets[0]?.index;
+		for (const offset of offsets) if (offset.top <= scrollTop + 4) current = offset.index;
+		active.value = current;
+	};
+	onMounted(() => void nextTick(measureAnchors));
+	watch(() => anchors.length, () => void nextTick(measureAnchors));
+	const stop = host.onScroll(update);
+	onBeforeUnmount(stop);
+	IndexBarContext.provide({
+		get active() {
+			return active.value;
+		},
+		get stickyOffsetTop() {
+			return stickyOffsetTop.value;
+		},
+		register(entry) {
+			anchors.push(entry);
+			return () => anchors.splice(anchors.indexOf(entry), 1);
+		}
+	});
+	const jump = (index) => {
+		const offset = offsets.find((item) => item.index === index);
+		if (!offset) return;
+		onSelect.value?.(index);
+		host.scrollTo(offset.top);
+		active.value = index;
+	};
+	let letters = [];
+	let letterRects = [];
+	let last;
+	const letterAt = (y) => anchors[letterRects.findIndex((rect) => rect !== null && y >= rect.top && y < rect.top + rect.height)]?.index;
+	const onTouchstart = () => {
+		last = void 0;
+		Promise.all(letters.slice(0, anchors.length).map((letter) => host.measure(letter))).then((rects) => letterRects = rects);
+	};
+	const onTouchmove = (event) => {
+		const index = letterAt(event.touches[0].clientY);
+		if (index && index !== last) jump(last = index);
+	};
+	return () => createVNode("div", mergeAttrs({}, rest), [children.value, createVNode("div", mergeAttrs({ sx: indexBarStyles.sidebar }, propsSidebar.value, {
+		onTouchstart,
+		onTouchmove,
+		...dataAttrs({ "data-touch-move": "catch" })
+	}), [anchors.map((anchor, position) => createVNode("span", mergeJsxProps(mergeAttrs({ sx: indexBarStyles.letter }, {
+		role: "button",
+		"aria-label": anchor.index,
+		onClick: () => jump(anchor.index),
+		...dataAttrs({ "data-active": anchor.index === active.value })
+	}), { "ref": (node) => letters[position] = node }), [anchor.index]))])]);
+}, {
+	name: "IndexBar",
+	props: [
+		"stickyOffsetTop",
+		"onSelect",
+		"propsSidebar"
+	]
+});
+/** 未声明的属性落到标题（div）上 */
+/** 一组的标题（div，吸顶） */
+var IndexAnchor = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache = [];
+	const index = readonlyProp(_props2, "index");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const bar = IndexBarContext.inject();
+	const entry = {
+		get index() {
+			return index.value;
+		},
+		element: null
+	};
+	onBeforeUnmount(bar.register(entry));
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({
+		sx: indexBarStyles.anchor,
+		style: { insetBlockStart: bar.stickyOffsetTop }
+	}, rest, dataAttrs({ "data-active": bar.active === index.value })), { "ref": _cache[0] || (_cache[0] = (node) => entry.element = node) }), [children.value ?? index.value]);
+}, {
+	name: "IndexAnchor",
+	props: ["index"]
+});
+//#endregion
+export { IndexAnchor, IndexBar, indexBarStyles };
+
+//# sourceMappingURL=IndexBar.js.map

package/dist/display/IndexBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndexBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/IndexBar.tsx"],"sourcesContent":["/**\n * 索引栏：按首字母分组的长列表（城市、通讯录），右边一列字母，点或在上面滑动跳到那一组，各组的标题滚到顶部时吸住。\n *\n *   <IndexBar>\n *     <IndexAnchor index=\"A\" />\n *     <Cell title=\"安庆\" />\n *     <IndexAnchor index=\"B\" />\n *     <Cell title=\"北京\" />\n *   </IndexBar>\n *\n * 跳转与当前组都按页面滚动算：各组标题的位置在挂上时量一次（宿主的异步测量），之后滚动只比较数字。\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, onBeforeUnmount, onMounted, shallowReactive, watch, type VNodeChild } from 'vue';\nimport { useHost, type HostRect } from '../utils/host';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 一组的标题登记给索引栏的 */\ninterface AnchorEntry {\n  readonly index: string;\n  element: unknown;\n}\n\n/** 索引栏提供给各组标题的 */\ninterface IndexBarState {\n  readonly active: string | undefined;\n  readonly stickyOffsetTop: string;\n  register(entry: AnchorEntry): () => void;\n}\n\nconst IndexBarContext = createContext<IndexBarState>('IndexBar');\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface IndexBarProps extends Omit<PartProps<'div'>, 'onSelect'> {\n  /**\n   * 组标题吸住时离顶部多远（CSS 长度；页面顶部有固定的导航栏时写它的高度）\n   * @default '0px'\n   */\n  stickyOffsetTop?: string;\n  /** 点（或滑到）右边的一个字母 */\n  onSelect?: (index: string) => void;\n  /** 各组的 IndexAnchor 与内容 */\n  children?: VNodeChild;\n  /** 右边字母栏的部件属性 */\n  propsSidebar?: PartProps<'div'>;\n}\n\n/** IndexBar、IndexAnchor 的样式 */\nexport const indexBarStyles = css.create({\n  sidebar: {\n    position: 'fixed',\n    insetInlineEnd: 0,\n    insetBlockStart: '50%',\n    zIndex: 200,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    paddingInline: '0.3em',\n    transform: 'translateY(-50%)',\n    userSelect: 'none',\n  },\n  letter: {\n    paddingBlock: '0.1em',\n    paddingInline: '0.4em',\n    fontSize: '0.7em',\n    fontWeight: '_medium',\n    lineHeight: '1.4',\n    color: { default: '_textMuted', '[data-active]': '_accentText' },\n  },\n  anchor: {\n    position: 'sticky',\n    zIndex: 1,\n    paddingBlock: '0.3em',\n    paddingInline: '_lg',\n    fontSize: '_sm',\n    fontWeight: '_semibold',\n    color: { default: '_textMuted', '[data-active]': '_accentText' },\n    backgroundColor: { default: '_background', '[data-active]': '_surface' },\n  },\n});\n\n/** 索引栏（div > 内容 + 右边的字母栏） */\nexport const IndexBar = _component(\n  ({ stickyOffsetTop = '0px', onSelect, children, propsSidebar, ...rest }: IndexBarProps) => {\n    const host = useHost();\n    const anchors = shallowReactive<AnchorEntry[]>([]);\n    let active = _state<string | undefined>(undefined);\n    // 各组标题在页面里的位置（px，相对页面顶部），挂上时与组变化时量\n    let offsets: { index: string; top: number }[] = [];\n    const measureAnchors = async () => {\n      const scrollTop = host.scrollTop();\n      const rects = await Promise.all(anchors.map((anchor) => host.measure(anchor.element)));\n      offsets = anchors\n        .map((anchor, position) => ({\n          index: anchor.index,\n          top: (rects[position]?.top ?? 0) + scrollTop,\n        }))\n        .sort((a, b) => a.top - b.top);\n      update(host.scrollTop());\n    };\n    /** 当前的组：页面顶部已经越过的最后一个标题（留几像素的余量） */\n    const update = (scrollTop: number) => {\n      let current = offsets[0]?.index;\n      for (const offset of offsets) if (offset.top <= scrollTop + 4) current = offset.index;\n      active = current;\n    };\n    onMounted(() => void nextTick(measureAnchors));\n    watch(\n      () => anchors.length,\n      () => void nextTick(measureAnchors),\n    );\n    const stop = host.onScroll(update);\n    onBeforeUnmount(stop);\n\n    IndexBarContext.provide({\n      get active() {\n        return active;\n      },\n      get stickyOffsetTop() {\n        return stickyOffsetTop;\n      },\n      register(entry) {\n        anchors.push(entry);\n        return () => anchors.splice(anchors.indexOf(entry), 1);\n      },\n    });\n\n    // 跳到一组：按挂上时量的位置（吸住的标题量出来是吸住的位置，不是这一组开始的地方）\n    const jump = (index: string) => {\n      const offset = offsets.find((item) => item.index === index);\n      if (!offset) return;\n      onSelect?.(index);\n      host.scrollTo(offset.top);\n      active = index;\n    };\n\n    // 在字母栏上滑动：按下时量各字母的位置，移动时按纵坐标找字母\n    let letters: unknown[] = [];\n    let letterRects: (HostRect | null)[] = [];\n    let last: string | undefined;\n    const letterAt = (y: number) =>\n      anchors[\n        letterRects.findIndex(\n          (rect) => rect !== null && y >= rect.top && y < rect.top + rect.height,\n        )\n      ]?.index;\n    const onTouchstart = () => {\n      last = undefined;\n      void Promise.all(letters.slice(0, anchors.length).map((letter) => host.measure(letter))).then(\n        (rects) => (letterRects = rects),\n      );\n    };\n    const onTouchmove = (event: TouchEvent) => {\n      const index = letterAt(event.touches[0]!.clientY);\n      if (index && index !== last) jump((last = index));\n    };\n\n    return () => (\n      <div {...mergeAttrs<'div'>({}, rest)}>\n        {children}\n        <div\n          {...mergeAttrs<'div'>({ sx: indexBarStyles.sidebar }, propsSidebar, {\n            onTouchstart,\n            onTouchmove,\n            // 小程序：在字母栏上滑动时页面不跟着滚\n            ...dataAttrs({ 'data-touch-move': 'catch' }),\n          })}\n        >\n          {anchors.map((anchor, position) => (\n            <span\n              {...mergeAttrs<'span'>(\n                { sx: indexBarStyles.letter },\n                {\n                  role: 'button',\n                  'aria-label': anchor.index,\n                  onClick: () => jump(anchor.index),\n                  ...dataAttrs({ 'data-active': anchor.index === active }),\n                },\n              )}\n              ref={(node: unknown) => (letters[position] = node)}\n            >\n              {anchor.index}\n            </span>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到标题（div）上 */\nexport interface IndexAnchorProps extends PartProps<'div'> {\n  /** 这一组的字母（也是右边字母栏上的字） */\n  index: string;\n  /** 标题的内容；不给时显示 index */\n  children?: VNodeChild;\n}\n\n/** 一组的标题（div，吸顶） */\nexport const IndexAnchor = _component(({ index, children, ...rest }: IndexAnchorProps) => {\n  const bar = IndexBarContext.inject();\n  const entry: AnchorEntry = {\n    get index() {\n      return index;\n    },\n    element: null,\n  };\n  onBeforeUnmount(bar.register(entry));\n  return () => (\n    <div\n      {...mergeAttrs<'div'>(\n        { sx: indexBarStyles.anchor, style: { insetBlockStart: bar.stickyOffsetTop } },\n        rest,\n        dataAttrs({ 'data-active': bar.active === index }),\n      )}\n      ref={(node: unknown) => (entry.element = node)}\n    >\n      {children ?? index}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/display/List.d.ts

@@ -0,0 +1,34 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface ListProps extends Omit<PartProps<'div', 'role'>, 'onLoad'> {
+    /** 是否在加载；双向绑定写 `_loading={x}` */
+    _loading?: boolean;
+    /** 是否加载失败；双向绑定写 `_error={x}` */
+    _error?: boolean;
+    /** 已经加载完了（不再触发 onLoad） */
+    finished?: boolean;
+    /**
+     * 离底部多近（px）开始加载
+     * @default 300
+     */
+    offset?: number;
+    /** 加载下一页；返回 Promise 时完成后自动结束加载中，抛错时显示失败 */
+    onLoad?: () => void | Promise<unknown>;
+    /** 加载完时底部的文字；不给时用语言包的“没有更多了”，null 不显示 */
+    finishedText?: VNodeChild;
+    /** 失败时底部的文字；不给时用语言包 */
+    errorText?: VNodeChild;
+    /** 列表的内容 */
+    children?: VNodeChild;
+    /** 底部状态栏的部件属性 */
+    propsFooter?: PartProps<'div'>;
+}
+/** List 的样式：footer、error */
+export declare const listStyles: Readonly<{
+    error: css.CompiledStyles;
+    footer: css.CompiledStyles;
+}>;
+/** 列表（div[role=feed] > 内容 + 底部状态） */
+export declare const List: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ListProps>;

package/dist/display/List.js

@@ -0,0 +1,105 @@
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { Loading } from "../feedback/Loading.js";
+import { useHost } from "../utils/host.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+//#region src/display/List.tsx
+/** 未声明的属性落到根元素（div）上 */
+/** List 的样式：footer、error */
+var listStyles = css.create({
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: "3.2em",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	error: { cursor: "pointer" }
+});
+/** 列表（div[role=feed] > 内容 + 底部状态） */
+var List = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const loading = bindable(_props, "_loading", () => false, _ctx.emit);
+	const error = bindable(_props, "_error", () => false, _ctx.emit);
+	const finished = readonlyProp(_props, "finished", false);
+	const offset = readonlyProp(_props, "offset", 300);
+	const onLoad = readonlyProp(_props, "onLoad");
+	const finishedText = readonlyProp(_props, "finishedText");
+	const errorText = readonlyProp(_props, "errorText");
+	const children = childrenProp(_props);
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	let footer = null;
+	let checking = false;
+	const load = async () => {
+		loading.value = true;
+		const pending = onLoad.value?.();
+		if (!(pending instanceof Promise)) return;
+		try {
+			await pending;
+		} catch {
+			error.value = true;
+		} finally {
+			loading.value = false;
+		}
+	};
+	/** 底部离可视区的下沿不到 offset 时加载 */
+	const check = async () => {
+		if (checking || loading.value || error.value || finished.value) return;
+		checking = true;
+		try {
+			const rect = await host.measure(footer);
+			if (rect && rect.top - host.window().height <= offset.value && !loading.value && !error.value && !finished.value) await load();
+		} finally {
+			checking = false;
+		}
+	};
+	const stop = host.onScroll(() => void check());
+	onBeforeUnmount(stop);
+	onMounted(() => void check());
+	watch(() => [
+		loading.value,
+		finished.value,
+		error.value
+	], () => void nextTick(check));
+	const retry = () => {
+		error.value = false;
+		check();
+	};
+	return () => {
+		const status = error.value ? errorText.value ?? config.lang.loadFailed : loading.value ? createVNode(Loading, { "key": "__site0" }, {
+			default: () => [config.lang.loading],
+			$stable: true
+		}) : finished.value && finishedText.value !== null ? hasContent(finishedText.value) ? finishedText.value : config.lang.noMore : null;
+		return createVNode("div", mergeAttrs({}, rest, {
+			role: "feed",
+			"aria-busy": loading.value ? "true" : "false"
+		}), [children.value, createVNode("div", mergeJsxProps(mergeAttrs({ sx: [listStyles.footer, error.value && listStyles.error] }, propsFooter.value, error.value ? {
+			role: "button",
+			onClick: retry
+		} : {}), { "ref": _cache[0] || (_cache[0] = (node) => footer = node) }), [status])]);
+	};
+}, {
+	name: "List",
+	props: [
+		"_loading",
+		"onUpdate:_loading",
+		"_error",
+		"onUpdate:_error",
+		"finished",
+		"offset",
+		"onLoad",
+		"finishedText",
+		"errorText",
+		"propsFooter"
+	]
+});
+//#endregion
+export { List, listStyles };
+
+//# sourceMappingURL=List.js.map

package/dist/display/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/List.tsx"],"sourcesContent":["/**\n * 列表：滚到离底部不远时自动加载下一页，底部显示加载中、没有更多了、加载失败（点了重试）。\n *\n *   <List finished={done} onLoad={async () => { rows.push(...(await fetchPage(++page))); done = page >= last; }}>\n *     {rows.map((row) => <Cell title={row.name} />)}\n *   </List>\n *\n * onLoad 返回 Promise 时自动管理加载中与失败（抛错时显示“加载失败，点击重试”）；不返回时由使用方改 _loading、_error。\n * 离底部多近用宿主量底部的位置判断：H5 与小程序都按页面滚动。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, onBeforeUnmount, onMounted, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { Loading } from '../feedback/Loading';\nimport { useHost } from '../utils/host';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface ListProps extends Omit<PartProps<'div', 'role'>, 'onLoad'> {\n  /** 是否在加载；双向绑定写 `_loading={x}` */\n  _loading?: boolean;\n  /** 是否加载失败；双向绑定写 `_error={x}` */\n  _error?: boolean;\n  /** 已经加载完了（不再触发 onLoad） */\n  finished?: boolean;\n  /**\n   * 离底部多近（px）开始加载\n   * @default 300\n   */\n  offset?: number;\n  /** 加载下一页；返回 Promise 时完成后自动结束加载中，抛错时显示失败 */\n  onLoad?: () => void | Promise<unknown>;\n  /** 加载完时底部的文字；不给时用语言包的“没有更多了”，null 不显示 */\n  finishedText?: VNodeChild;\n  /** 失败时底部的文字；不给时用语言包 */\n  errorText?: VNodeChild;\n  /** 列表的内容 */\n  children?: VNodeChild;\n  /** 底部状态栏的部件属性 */\n  propsFooter?: PartProps<'div'>;\n}\n\n/** List 的样式：footer、error */\nexport const listStyles = css.create({\n  footer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '3.2em',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  error: { cursor: 'pointer' },\n});\n\n/** 列表（div[role=feed] > 内容 + 底部状态） */\nexport const List = _component(\n  ({\n    _loading: loading = _bindable(false),\n    _error: error = _bindable(false),\n    finished = false,\n    offset = 300,\n    onLoad,\n    finishedText,\n    errorText,\n    children,\n    propsFooter,\n    ...rest\n  }: ListProps) => {\n    const host = useHost();\n    const config = useConfig();\n    let footer: unknown = null;\n    let checking = false;\n\n    const load = async () => {\n      loading = true;\n      const pending = onLoad?.();\n      if (!(pending instanceof Promise)) return;\n      try {\n        await pending;\n      } catch {\n        error = true;\n      } finally {\n        loading = false;\n      }\n    };\n    /** 底部离可视区的下沿不到 offset 时加载 */\n    const check = async () => {\n      if (checking || loading || error || finished) return;\n      checking = true;\n      try {\n        const rect = await host.measure(footer);\n        if (rect && rect.top - host.window().height <= offset && !loading && !error && !finished)\n          await load();\n      } finally {\n        checking = false;\n      }\n    };\n\n    const stop = host.onScroll(() => void check());\n    onBeforeUnmount(stop);\n    onMounted(() => void check());\n    // 一页加载完、内容还不满一屏时接着加载\n    watch(\n      () => [loading, finished, error],\n      () => void nextTick(check),\n    );\n\n    const retry = () => {\n      error = false;\n      void check();\n    };\n\n    return () => {\n      const status = error ? (\n        (errorText ?? config.lang.loadFailed)\n      ) : loading ? (\n        <Loading>{config.lang.loading}</Loading>\n      ) : finished && finishedText !== null ? (\n        hasContent(finishedText) ? (\n          finishedText\n        ) : (\n          config.lang.noMore\n        )\n      ) : null;\n      return (\n        <div\n          {...mergeAttrs<'div'>({}, rest, {\n            role: 'feed',\n            'aria-busy': loading ? 'true' : 'false',\n          })}\n        >\n          {children}\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [listStyles.footer, error && listStyles.error] },\n              propsFooter,\n              // 失败时整条可点：重试\n              error ? { role: 'button', onClick: retry } : {},\n            )}\n            ref={(node: unknown) => (footer = node)}\n          >\n            {status}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AA4CA,IAAa,aAAa,IAAI,OAAO;CACnC,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,WAAW;EACX,UAAU;EACV,OAAO;CACT;CACA,OAAO,EAAE,QAAQ,UAAU;AAC7B,CAAC;;AAGD,IAAa,OAAO,0BAClB,QAAA,SAWiB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,SAAA,QAAA,kBAVe,OAAK,KAAA,IAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBACT,OAAK,KAAA,IAAA;CAAA,MAAA,WAAAC,aAAA,QAAA,YACpB,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,UACP,GAAG;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,cAAAD,aAAA,QAAA,aAAA;CAAA,MAMT,OAAIE,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,IAAI,SAAkB;CACtB,IAAI,WAAW;CAEf,MAAM,OAAO,YAAY;EACvB,QAAA,QAAU;EACV,MAAM,UAAU,OAAA,QAAS;EACzB,IAAI,EAAE,mBAAmB,UAAU;EACnC,IAAI;GACF,MAAM;EACR,QAAQ;GACN,MAAA,QAAQ;EACV,UAAU;GACR,QAAA,QAAU;EACZ;CACF;;CAEA,MAAM,QAAQ,YAAY;EACxB,IAAI,YAAQ,QAAA,SAAW,MAAA,SAAS,SAAA,OAAc;EAC9C,WAAW;EACX,IAAI;GACF,MAAM,OAAO,MAAM,KAAK,QAAQ,MAAM;GACtC,IAAI,QAAQ,KAAK,MAAM,KAAK,OAAO,CAAC,CAAC,UAAM,OAAA,SAAc,CAAA,QAAA,SAAY,CAAA,MAAA,SAAU,CAAA,SAAA,OAC7E,MAAM,KAAK;EACf,UAAU;GACR,WAAW;EACb;CACF;CAEA,MAAM,OAAO,KAAK,eAAe,KAAK,MAAM,CAAC;CAC7C,gBAAgB,IAAI;CACpB,gBAAgB,KAAK,MAAM,CAAC;CAE5B,YACQ;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;CAAA,SACA,KAAK,SAAS,KAAK,CAC3B;CAEA,MAAM,cAAc;EAClB,MAAA,QAAQ;EACR,MAAW;CACb;CAEA,aAAa;EACX,MAAM,SAAS,MAAA,QACZ,UAAA,SAAa,OAAO,KAAK,aACxB,QAAA,QAAAC,YAAA,SAAA,EAAA,OAAA,UAAA,GAAA;GAAA,eAAA,CACQ,OAAO,KAAK,OAAO;GAAA,SAAA;EAAA,CAAA,IAC3B,SAAA,SAAY,aAAA,UAAiB,OAC/B,WAAU,aAAA,KAAa,IAAC,aAAA,QAGtB,OAAO,KAAK,SAEZ;EACJ,OAAAA,YAAA,OAEQ,WAAkB,CAAC,GAAG,MAAM;GAC9B,MAAM;GACN,aAAa,QAAA,QAAU,SAAS;EAClC,CAAC,GAAC,CAAA,SAAA,OAAAA,YAAA,OAAAC,cAII,WACF,EAAE,IAAI,CAAC,WAAW,QAAQ,MAAA,SAAS,WAAW,KAAK,EAAE,GAAC,YAAA,OAGtD,MAAA,QAAQ;GAAE,MAAM;GAAU,SAAS;EAAM,IAAI,CAAC,CAChD,GAAC,EAAA,OAAA,OAAA,OAAA,OAAA,MACK,SAAmB,SAAS,MAAK,CAAA,GAAA,CAEtC,MAAM,CAAA,CAAA,CAAA;CAIf;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/NoticeBar.d.ts

@@ -0,0 +1,57 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 右边的操作 */
+export interface NoticeBarModes {
+    /** 关闭按钮 */
+    closeable: unknown;
+    /** 箭头：整条可点 */
+    link: unknown;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface NoticeBarProps extends Omit<PartProps<'div', 'role'>, 'onClose'> {
+    /** 文字（与 children 二选一） */
+    text?: VNodeChild;
+    /** 右边的操作 */
+    mode?: keyof NoticeBarModes;
+    /**
+     * 色调
+     * @default 'warning'
+     */
+    tone?: 'warning' | 'accent' | 'danger' | 'success';
+    /**
+     * 前面的图标；false 不显示
+     * @default Volume2
+     */
+    icon?: IconData | false;
+    /** 多行显示，不滚动 */
+    wrapable?: boolean;
+    /**
+     * 滚动的速度（px/s）
+     * @default 60
+     */
+    speed?: number;
+    /** 点了关闭（关闭后不再显示） */
+    onClose?: () => void;
+    /** 文字 */
+    children?: VNodeChild;
+    /** 文字那一栏的部件属性 */
+    propsContent?: PartProps<'div'>;
+}
+/** NoticeBar 的样式：root、各色调、icon、viewport、text、scrolling、wrap、action */
+export declare const noticeBarStyles: Readonly<{
+    accent: css.CompiledStyles;
+    action: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    root: css.CompiledStyles;
+    scrolling: css.CompiledStyles;
+    success: css.CompiledStyles;
+    text: css.CompiledStyles;
+    viewport: css.CompiledStyles;
+    warning: css.CompiledStyles;
+    wrap: css.CompiledStyles;
+}>;
+/** 通知栏（div[role=alert] > 图标 + 文字 + 操作） */
+export declare const NoticeBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NoticeBarProps>;

package/dist/display/NoticeBar.js

@@ -0,0 +1,172 @@
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useHost } from "../utils/host.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, onMounted, onUpdated, ref } from "vue";
+import { ChevronRight, Volume2, X } from "@lucide/icons";
+//#region src/display/NoticeBar.tsx
+/**
+* 通知栏：页面顶部一条浅色的公告，前面一个喇叭；文字放不下时从右往左滚动，可关闭或带箭头点进详情。
+*
+*   <NoticeBar>双十一活动 11 月 1 日开始，全场满 300 减 50</NoticeBar>
+*   <NoticeBar mode="closeable" tone="danger">账户存在风险，请尽快完善实名信息</NoticeBar>
+*   <NoticeBar wrapable>多行显示，不滚动……</NoticeBar>
+*/
+/** 右边的操作 */
+/** 未声明的属性落到根元素（div）上 */
+var marquee = css.keyframes({
+	from: { transform: "translateX(0)" },
+	to: { transform: "translateX(-100%)" }
+});
+/** NoticeBar 的样式：root、各色调、icon、viewport、text、scrolling、wrap、action */
+var noticeBarStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minHeight: "2.6em",
+		paddingBlock: "0.4em",
+		paddingInline: "_lg",
+		fontSize: "_sm",
+		lineHeight: "1.5"
+	},
+	warning: {
+		color: "_warningText",
+		backgroundColor: "_warningSoft"
+	},
+	accent: {
+		color: "_accentText",
+		backgroundColor: "_accentSoft"
+	},
+	danger: {
+		color: "_dangerText",
+		backgroundColor: "_dangerSoft"
+	},
+	success: {
+		color: "_successText",
+		backgroundColor: "_successSoft"
+	},
+	icon: {
+		flex: "none",
+		fontSize: "1.15em"
+	},
+	viewport: {
+		position: "relative",
+		flex: "1 1 auto",
+		minWidth: 0,
+		overflow: "hidden"
+	},
+	text: {
+		display: "inline-block",
+		whiteSpace: "nowrap"
+	},
+	scrolling: {
+		animationName: marquee,
+		animationTimingFunction: "linear",
+		animationIterationCount: {
+			default: "infinite",
+			_reducedMotion: 0
+		}
+	},
+	wrap: {
+		whiteSpace: "normal",
+		overflowWrap: "anywhere"
+	},
+	action: {
+		flex: "none",
+		display: "inline-flex",
+		padding: 0,
+		margin: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: "inherit",
+		fontSize: "1.15em",
+		cursor: "pointer"
+	}
+});
+/** 通知栏（div[role=alert] > 图标 + 文字 + 操作） */
+var NoticeBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const text = readonlyProp(_props, "text");
+	const mode = readonlyProp(_props, "mode");
+	const tone = readonlyProp(_props, "tone", "warning");
+	const icon = readonlyProp(_props, "icon", () => Volume2);
+	const wrapable = readonlyProp(_props, "wrapable", false);
+	const speed = readonlyProp(_props, "speed", 60);
+	const onClose = readonlyProp(_props, "onClose");
+	const children = childrenProp(_props);
+	const propsContent = readonlyProp(_props, "propsContent");
+	const rest = restProps(_props, _ctx, false);
+	const config = useConfig();
+	const host = useHost();
+	let closed = ref(false);
+	let scroll = ref(null);
+	let viewport = null;
+	let content = null;
+	const measure = async () => {
+		if (closed.value) return;
+		if (wrapable.value) return void (scroll.value = null);
+		const [box, inner] = await Promise.all([host.measure(viewport), host.measure(content)]);
+		const width = (inner?.width ?? 0) - (scroll.value?.viewport ?? 0);
+		const next = box && width > box.width ? {
+			viewport: box.width,
+			text: width
+		} : null;
+		if (next?.viewport !== scroll.value?.viewport || next?.text !== scroll.value?.text) scroll.value = next;
+	};
+	onMounted(() => void measure());
+	onUpdated(() => void measure());
+	return () => {
+		if (closed.value) return null;
+		const body = text.value ?? children.value;
+		return createVNode("div", mergeAttrs({ sx: [noticeBarStyles.root, noticeBarStyles[tone.value]] }, rest, { role: "alert" }), [
+			icon.value && createVNode(Icon, {
+				"icon": icon.value,
+				"sx": noticeBarStyles.icon
+			}, null),
+			createVNode("div", mergeJsxProps(mergeAttrs({ sx: noticeBarStyles.viewport }, propsContent.value), { "ref": _cache[0] || (_cache[0] = (node) => viewport = node) }), [createVNode("span", mergeJsxProps(mergeAttrs({
+				sx: [
+					noticeBarStyles.text,
+					wrapable.value && noticeBarStyles.wrap,
+					scroll.value && noticeBarStyles.scrolling
+				],
+				style: scroll.value ? {
+					paddingInlineStart: `${scroll.value.viewport}px`,
+					animationDuration: `${(scroll.value.viewport + scroll.value.text) / speed.value}s`
+				} : void 0
+			}), { "ref": _cache[1] || (_cache[1] = (node) => content = node) }), [hasContent(body) ? body : null])]),
+			mode.value === "closeable" && createVNode("button", mergeJsxProps(mergeAttrs({ sx: noticeBarStyles.action }), {
+				"type": "button",
+				"aria-label": config.lang.close,
+				"onClick": _cache[2] || (_cache[2] = (event) => {
+					event.stopPropagation();
+					closed.value = true;
+					onClose.value?.();
+				})
+			}), [createVNode(Icon, { "icon": X }, null)]),
+			mode.value === "link" && createVNode(Icon, {
+				"icon": ChevronRight,
+				"sx": noticeBarStyles.icon
+			}, null)
+		]);
+	};
+}, {
+	name: "NoticeBar",
+	props: [
+		"text",
+		"mode",
+		"tone",
+		"icon",
+		"wrapable",
+		"speed",
+		"onClose",
+		"propsContent"
+	]
+});
+//#endregion
+export { NoticeBar, noticeBarStyles };
+
+//# sourceMappingURL=NoticeBar.js.map

package/dist/display/NoticeBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoticeBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/NoticeBar.tsx"],"sourcesContent":["/**\n * 通知栏：页面顶部一条浅色的公告，前面一个喇叭；文字放不下时从右往左滚动，可关闭或带箭头点进详情。\n *\n *   <NoticeBar>双十一活动 11 月 1 日开始，全场满 300 减 50</NoticeBar>\n *   <NoticeBar mode=\"closeable\" tone=\"danger\">账户存在风险，请尽快完善实名信息</NoticeBar>\n *   <NoticeBar wrapable>多行显示，不滚动……</NoticeBar>\n */\nimport { ChevronRight, Volume2, X } from '@lucide/icons';\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 { Icon, type IconData } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 右边的操作 */\nexport interface NoticeBarModes {\n  /** 关闭按钮 */\n  closeable: unknown;\n  /** 箭头：整条可点 */\n  link: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface NoticeBarProps extends Omit<PartProps<'div', 'role'>, 'onClose'> {\n  /** 文字（与 children 二选一） */\n  text?: VNodeChild;\n  /** 右边的操作 */\n  mode?: keyof NoticeBarModes;\n  /**\n   * 色调\n   * @default 'warning'\n   */\n  tone?: 'warning' | 'accent' | 'danger' | 'success';\n  /**\n   * 前面的图标；false 不显示\n   * @default Volume2\n   */\n  icon?: IconData | false;\n  /** 多行显示，不滚动 */\n  wrapable?: boolean;\n  /**\n   * 滚动的速度（px/s）\n   * @default 60\n   */\n  speed?: number;\n  /** 点了关闭（关闭后不再显示） */\n  onClose?: () => void;\n  /** 文字 */\n  children?: VNodeChild;\n  /** 文字那一栏的部件属性 */\n  propsContent?: PartProps<'div'>;\n}\n\nconst marquee = css.keyframes({\n  from: { transform: 'translateX(0)' },\n  to: { transform: 'translateX(-100%)' },\n});\n\n/** NoticeBar 的样式：root、各色调、icon、viewport、text、scrolling、wrap、action */\nexport const noticeBarStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minHeight: '2.6em',\n    paddingBlock: '0.4em',\n    paddingInline: '_lg',\n    fontSize: '_sm',\n    lineHeight: '1.5',\n  },\n  warning: { color: '_warningText', backgroundColor: '_warningSoft' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft' },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n  success: { color: '_successText', backgroundColor: '_successSoft' },\n  icon: { flex: 'none', fontSize: '1.15em' },\n  viewport: { position: 'relative', flex: '1 1 auto', minWidth: 0, overflow: 'hidden' },\n  text: { display: 'inline-block', whiteSpace: 'nowrap' },\n  // 滚动时：左边留出整个可视宽度（从右边进来），动画移动自己的全部宽度\n  scrolling: {\n    animationName: marquee,\n    animationTimingFunction: 'linear',\n    animationIterationCount: { default: 'infinite', _reducedMotion: 0 },\n  },\n  wrap: { whiteSpace: 'normal', overflowWrap: 'anywhere' },\n  action: {\n    flex: 'none',\n    display: 'inline-flex',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    fontSize: '1.15em',\n    cursor: 'pointer',\n  },\n});\n\n/** 通知栏（div[role=alert] > 图标 + 文字 + 操作） */\nexport const NoticeBar = _component(\n  ({\n    text,\n    mode,\n    tone = 'warning',\n    icon = Volume2,\n    wrapable = false,\n    speed = 60,\n    onClose,\n    children,\n    propsContent,\n    ...rest\n  }: NoticeBarProps) => {\n    const config = useConfig();\n    const host = useHost();\n    let closed = _state(false);\n    // 放不下时的滚动：可视宽度与文字宽度（px）\n    let scroll = _state<{ viewport: number; text: number } | null>(null);\n    let viewport: unknown = null;\n    let content: unknown = null;\n    const measure = async () => {\n      // 关闭后节点已经卸掉，不再量\n      if (closed) return;\n      if (wrapable) return void (scroll = null);\n      const [box, inner] = await Promise.all([host.measure(viewport), host.measure(content)]);\n      // 滚动时文字左边加了可视宽度的内边距，量到的宽度要减掉\n      const width = (inner?.width ?? 0) - (scroll?.viewport ?? 0);\n      const next = box && width > box.width ? { viewport: box.width, text: width } : null;\n      // 量出来没变就不赋值：否则又触发一次渲染、再量一次，停不下来\n      if (next?.viewport !== scroll?.viewport || next?.text !== scroll?.text) scroll = next;\n    };\n    // 文字、children 换了都会重新渲染，渲染完再量（children 是插槽，不能在渲染函数外读）\n    onMounted(() => void measure());\n    onUpdated(() => void measure());\n\n    return () => {\n      if (closed) return null;\n      const body = text ?? children;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [noticeBarStyles.root, noticeBarStyles[tone]] }, rest, {\n            role: 'alert',\n          })}\n        >\n          {icon && <Icon icon={icon} sx={noticeBarStyles.icon} />}\n          <div\n            {...mergeAttrs<'div'>({ sx: noticeBarStyles.viewport }, propsContent)}\n            ref={(node: unknown) => (viewport = node)}\n          >\n            <span\n              {...mergeAttrs<'span'>({\n                sx: [\n                  noticeBarStyles.text,\n                  wrapable && noticeBarStyles.wrap,\n                  scroll && noticeBarStyles.scrolling,\n                ],\n                style: scroll\n                  ? {\n                      paddingInlineStart: `${scroll.viewport}px`,\n                      animationDuration: `${(scroll.viewport + scroll.text) / speed}s`,\n                    }\n                  : undefined,\n              })}\n              ref={(node: unknown) => (content = node)}\n            >\n              {hasContent(body) ? body : null}\n            </span>\n          </div>\n          {mode === 'closeable' && (\n            <button\n              {...mergeAttrs<'button'>({ sx: noticeBarStyles.action })}\n              type=\"button\"\n              aria-label={config.lang.close}\n              onClick={(event: Event) => {\n                event.stopPropagation();\n                closed = true;\n                onClose?.();\n              }}\n            >\n              <Icon icon={X} />\n            </button>\n          )}\n          {mode === 'link' && <Icon icon={ChevronRight} sx={noticeBarStyles.icon} />}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuDA,IAAM,UAAU,IAAI,UAAU;CAC5B,MAAM,EAAE,WAAW,gBAAgB;CACnC,IAAI,EAAE,WAAW,oBAAoB;AACvC,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,WAAW;EACX,cAAc;EACd,eAAe;EACf,UAAU;EACV,YAAY;CACd;CACA,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;CAC/D,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;CAC/D,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,MAAM;EAAE,MAAM;EAAQ,UAAU;CAAS;CACzC,UAAU;EAAE,UAAU;EAAY,MAAM;EAAY,UAAU;EAAG,UAAU;CAAS;CACpF,MAAM;EAAE,SAAS;EAAgB,YAAY;CAAS;CAEtD,WAAW;EACT,eAAe;EACf,yBAAyB;EACzB,yBAAyB;GAAE,SAAS;GAAY,gBAAgB;EAAE;CACpE;CACA,MAAM;EAAE,YAAY;EAAU,cAAc;CAAW;CACvD,QAAQ;EACN,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,OAAO;EACP,UAAU;EACV,QAAQ;CACV;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAWsB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QARb,SAAS;CAAA,MAAA,OAAAA,aAAA,QAAA,cACT,OAAO;CAAA,MAAA,WAAAA,aAAA,QAAA,YACH,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,EAAE;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,eAAAD,aAAA,QAAA,cAAA;CAAA,MAIP,OAAIE,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,QAAQ;CACrB,IAAI,SAAMC,IAAU,KAAK;CAEzB,IAAI,SAAMA,IAAqD,IAAI;CACnE,IAAI,WAAoB;CACxB,IAAI,UAAmB;CACvB,MAAM,UAAU,YAAY;EAE1B,IAAA,OAAA,OAAY;EACZ,IAAA,SAAA,OAAc,OAAO,MAAM,OAAA,QAAS;EACpC,MAAM,CAAC,KAAK,SAAS,MAAM,QAAQ,IAAI,CAAC,KAAK,QAAQ,QAAQ,GAAG,KAAK,QAAQ,OAAO,CAAC,CAAC;EAEtF,MAAM,SAAS,OAAO,SAAS,MAAM,OAAA,OAAQ,YAAY;EACzD,MAAM,OAAO,OAAO,QAAQ,IAAI,QAAQ;GAAE,UAAU,IAAI;GAAO,MAAM;EAAM,IAAI;EAE/E,IAAI,MAAM,aAAa,OAAA,OAAQ,YAAY,MAAM,SAAS,OAAA,OAAQ,MAAM,OAAA,QAAS;CACnF;CAEA,gBAAgB,KAAK,QAAQ,CAAC;CAC9B,gBAAgB,KAAK,QAAQ,CAAC;CAE9B,aAAa;EACX,IAAA,OAAA,OAAY,OAAO;EACnB,MAAM,OAAO,KAAA,SAAA,SAAA;EACb,OAAAC,YAAA,OAEQ,WAAkB,EAAE,IAAI,CAAC,gBAAgB,MAAM,gBAAe,KAAA,MAAM,EAAE,GAAG,MAAM,EACjF,MAAM,QACR,CAAC,GAAC;GAED,KAAA,SAAAA,YAAA,MAAA;IAAA,QAAA,KAAA;IAAA,MAA8B,gBAAgB;GAAI,GAAA,IAAA;GAAIA,YAAA,OAAAC,cAEjD,WAAkB,EAAE,IAAI,gBAAgB,SAAS,GAAC,aAAA,KAAc,GAAC,EAAA,OAAA,OAAA,OAAA,OAAA,MAC/D,SAAmB,WAAW,MAAK,CAAA,GAAA,CAAAD,YAAA,QAAAC,cAGnC,WAAmB;IACrB,IAAI;KACF,gBAAgB;KAChB,SAAA,SAAY,gBAAgB;KAC5B,OAAA,SAAU,gBAAgB;IAAS;IAErC,OAAO,OAAA,QACH;KACE,oBAAoB,GAAG,OAAA,MAAO,SAAQ;KACtC,mBAAmB,IAAI,OAAA,MAAO,WAAW,OAAA,MAAO,QAAI,MAAA,MAAS;IAC/D,IACA,KAAA;GACN,CAAC,GAAC,EAAA,OAAA,OAAA,OAAA,OAAA,MACI,SAAmB,UAAU,MAAK,CAAA,GAAA,CAEvC,WAAW,IAAI,IAAI,OAAO,IAAI,CAAA,CAAA,CAAA;GAGlC,KAAA,UAAS,eAAWD,YAAA,UAAAC,cAEb,WAAqB,EAAE,IAAI,gBAAgB,OAAO,CAAC,GAAC;IAAA,QAAA;IAAA,cAE5C,OAAO,KAAK;IAAK,WAAA,OAAA,OAAA,OAAA,MACnB,UAAiB;KACzB,MAAM,gBAAgB;KACtB,OAAA,QAAS;KACT,QAAA,QAAU;IACZ;GAAC,CAAA,GAAA,CAAAD,YAAA,MAAA,EAAA,QAEW,EAAC,GAAA,IAAA,CAAA,CAAA;GAGhB,KAAA,UAAS,UAAMA,YAAA,MAAA;IAAA,QAAgB;IAAY,MAAM,gBAAgB;GAAI,GAAA,IAAA;EAAI,CAAA;CAGhF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Steps.d.ts

@@ -0,0 +1,59 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 一步的状态 */
+export interface StepStatuses {
+    /** 已完成：对勾 */
+    done: unknown;
+    /** 进行中：实心的主色圆点 */
+    process: unknown;
+    /** 未开始：灰色圆点 */
+    wait: unknown;
+    /** 出错：叉 */
+    error: unknown;
+}
+/** 一步 */
+export interface StepItem {
+    /** 标题 */
+    title: VNodeChild;
+    /** 说明（竖排时显示在标题下面） */
+    description?: VNodeChild;
+    /** 状态；不给时按 active 算 */
+    status?: keyof StepStatuses;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface StepsProps extends PartProps<'div', 'role'> {
+    /** 各步 */
+    items: StepItem[];
+    /**
+     * 当前是第几步（从 0 开始）：之前的是已完成，这一步是进行中
+     * @default 0
+     */
+    active?: number;
+    /**
+     * 方向
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /** 每一步的部件属性 */
+    propsItem?: PartProps<'div'>;
+}
+/** Steps 的样式 */
+export declare const stepsStyles: Readonly<{
+    body: css.CompiledStyles;
+    description: css.CompiledStyles;
+    done: css.CompiledStyles;
+    dot: css.CompiledStyles;
+    error: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemVertical: css.CompiledStyles;
+    line: css.CompiledStyles;
+    lineVertical: css.CompiledStyles;
+    process: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+    wait: css.CompiledStyles;
+}>;
+/** 步骤条（div[role=list] > 各步） */
+export declare const Steps: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StepsProps>;