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

package/dist/feedback/PullRefresh.js

@@ -0,0 +1,178 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Loading } from "./Loading.js";
+import { useHost } from "../utils/host.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, onBeforeUnmount, ref, watch } from "vue";
+//#region src/feedback/PullRefresh.tsx
+/** 下拉的阶段 */
+/** 下拉的阶段 */
+/** 未声明的属性落到根元素（div）上 */
+/** PullRefresh 的样式：root、track、dragging、head */
+var pullRefreshStyles = css.create({
+	root: {
+		overflow: "hidden",
+		userSelect: "none"
+	},
+	track: {
+		position: "relative",
+		transitionProperty: "transform",
+		transitionDuration: "_md",
+		transitionTimingFunction: "_standard"
+	},
+	dragging: { transitionDuration: "0s" },
+	head: {
+		position: "absolute",
+		insetInline: 0,
+		insetBlockEnd: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		fontSize: "_sm",
+		color: "_textMuted"
+	}
+});
+var LOCK_DISTANCE = 8;
+/** 拉的手感：提示区高度以内跟手，再往下越拉越沉 */
+function damp(dy, head) {
+	if (dy <= head) return dy;
+	if (dy <= head * 2) return head + (dy - head) / 2;
+	return head * 1.5 + (dy - head * 2) / 4;
+}
+/** 下拉刷新（div > 滑动层：提示区 + 内容） */
+var PullRefresh = /*#__PURE__*/ _component((_props, _ctx) => {
+	const refreshing = bindable(_props, "_refreshing", () => false, _ctx.emit);
+	const onRefresh = readonlyProp(_props, "onRefresh");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const headHeight = readonlyProp(_props, "headHeight", 50);
+	const pullingText = readonlyProp(_props, "pullingText");
+	const loosingText = readonlyProp(_props, "loosingText");
+	const loadingText = readonlyProp(_props, "loadingText");
+	const successText = readonlyProp(_props, "successText");
+	const successDuration = readonlyProp(_props, "successDuration", 500);
+	const head = readonlyProp(_props, "head");
+	const children = childrenProp(_props);
+	const propsHead = readonlyProp(_props, "propsHead");
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	let drag = ref(null);
+	let pulling = ref(false);
+	let succeeded = ref(false);
+	let start = {
+		x: 0,
+		y: 0
+	};
+	let direction = null;
+	let tracking = false;
+	let successTimer;
+	const status = () => {
+		if (refreshing.value) return "loading";
+		if (succeeded.value) return "success";
+		if (drag.value === null || drag.value === 0) return "normal";
+		return drag.value >= headHeight.value ? "loosing" : "pulling";
+	};
+	watch(() => refreshing.value, (now, before) => {
+		if (now || !before || successText.value === void 0) return;
+		succeeded.value = true;
+		clearTimeout(successTimer);
+		successTimer = setTimeout(() => succeeded.value = false, successDuration.value);
+	});
+	onBeforeUnmount(() => clearTimeout(successTimer));
+	const refresh = async () => {
+		refreshing.value = true;
+		const pending = onRefresh.value?.();
+		if (!(pending instanceof Promise)) return;
+		try {
+			await pending;
+		} finally {
+			refreshing.value = false;
+		}
+	};
+	const onTouchstart = (event) => {
+		tracking = !disabled.value && !refreshing.value && !succeeded.value && host.scrollTop() <= 0;
+		if (!tracking) return;
+		const touch = event.touches[0];
+		start = {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		direction = null;
+	};
+	const onTouchmove = (event) => {
+		if (!tracking) return;
+		const touch = event.touches[0];
+		const dx = touch.clientX - start.x;
+		const dy = touch.clientY - start.y;
+		if (!direction) {
+			if (Math.abs(dx) < LOCK_DISTANCE && Math.abs(dy) < LOCK_DISTANCE) return;
+			direction = dy > 0 && dy > Math.abs(dx) ? "v" : "h";
+			if (direction === "h") return void (tracking = false);
+			pulling.value = true;
+		}
+		if (event.cancelable) event.preventDefault();
+		drag.value = damp(Math.max(0, dy), headHeight.value);
+	};
+	const onTouchend = () => {
+		tracking = false;
+		pulling.value = false;
+		if (drag.value === null) return;
+		const loosing = drag.value >= headHeight.value;
+		drag.value = null;
+		if (loosing) refresh();
+	};
+	const text = (current) => {
+		switch (current) {
+			case "pulling": return pullingText.value ?? config.lang.pulling;
+			case "loosing": return loosingText.value ?? config.lang.loosing;
+			case "loading": return createVNode(Loading, null, {
+				default: () => [loadingText.value ?? config.lang.refreshing],
+				$stable: true
+			});
+			case "success": return successText.value;
+			default: return null;
+		}
+	};
+	return () => {
+		const current = status();
+		const distance = drag.value ?? (current === "loading" || current === "success" ? headHeight.value : 0);
+		return createVNode("div", mergeAttrs({ sx: pullRefreshStyles.root }, rest, {
+			onTouchstart,
+			onTouchmove,
+			onTouchend,
+			onTouchcancel: onTouchend,
+			...dataAttrs({
+				"data-status": current,
+				"data-touch-move": pulling.value ? "catch" : true
+			})
+		}), [createVNode("div", mergeAttrs({
+			sx: [pullRefreshStyles.track, drag.value !== null && pullRefreshStyles.dragging],
+			style: { transform: distance ? `translateY(${distance}px)` : "none" }
+		}), [createVNode("div", mergeAttrs({
+			sx: pullRefreshStyles.head,
+			style: { height: `${headHeight.value}px` }
+		}, propsHead.value, { "aria-live": "polite" }), [head.value ? head.value(current, distance) : text(current)]), children.value])]);
+	};
+}, {
+	name: "PullRefresh",
+	props: [
+		"_refreshing",
+		"onUpdate:_refreshing",
+		"onRefresh",
+		"disabled",
+		"headHeight",
+		"pullingText",
+		"loosingText",
+		"loadingText",
+		"successText",
+		"successDuration",
+		"head",
+		"propsHead"
+	]
+});
+//#endregion
+export { PullRefresh, pullRefreshStyles };
+
+//# sourceMappingURL=PullRefresh.js.map

package/dist/feedback/PullRefresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullRefresh.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode"],"sources":["../../src/feedback/PullRefresh.tsx"],"sourcesContent":["/**\n * 下拉刷新：页面在顶部时往下拉，露出提示（下拉刷新 → 松手刷新 → 加载中），松手后调用 onRefresh。\n *\n *   <PullRefresh _refreshing={loading} onRefresh={reload}>\n *     <List … />\n *   </PullRefresh>\n *\n * onRefresh 返回 Promise 时自动在完成后收起；不返回时由使用方把 _refreshing 改回 false。\n * 只在页面滚到顶时接管下拉；拉动期间挡住页面自己的滚动与回弹（H5 取消 touchmove，小程序换成 catch）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { Loading } from './Loading';\n\n/** 下拉的阶段 */\nexport interface PullRefreshStatuses {\n  /** 没在拉 */\n  normal: unknown;\n  /** 拉了但还不够，松手会弹回 */\n  pulling: unknown;\n  /** 拉够了，松手就刷新 */\n  loosing: unknown;\n  /** 刷新中 */\n  loading: unknown;\n  /** 刷新完了，显示一会儿成功的提示 */\n  success: unknown;\n}\n\n/** 下拉的阶段 */\nexport type PullRefreshStatus = keyof PullRefreshStatuses;\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface PullRefreshProps extends PartProps<'div'> {\n  /** 是否在刷新；双向绑定写 `_refreshing={x}` */\n  _refreshing?: boolean;\n  /** 松手刷新；返回 Promise 时完成后自动收起 */\n  onRefresh?: () => void | Promise<unknown>;\n  /** 不能下拉 */\n  disabled?: boolean;\n  /**\n   * 顶部提示区的高度（px），也是拉到多少算\"拉够了\"\n   * @default 50\n   */\n  headHeight?: number;\n  /** 各阶段的提示文字；不给时用语言包 */\n  pullingText?: VNodeChild;\n  loosingText?: VNodeChild;\n  loadingText?: VNodeChild;\n  /** 刷新完显示的文字；不给时直接收起 */\n  successText?: VNodeChild;\n  /**\n   * 成功提示显示多久（ms）\n   * @default 500\n   */\n  successDuration?: number;\n  /** 自定义提示区的内容（代替各阶段的文字） */\n  head?: (status: PullRefreshStatus, distance: number) => VNodeChild;\n  /** 内容 */\n  children?: VNodeChild;\n  /** 提示区的部件属性 */\n  propsHead?: PartProps<'div'>;\n}\n\n/** PullRefresh 的样式：root、track、dragging、head */\nexport const pullRefreshStyles = css.create({\n  root: { overflow: 'hidden', userSelect: 'none' },\n  track: {\n    position: 'relative',\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n    transitionTimingFunction: '_standard',\n  },\n  dragging: { transitionDuration: '0s' },\n  head: {\n    position: 'absolute',\n    insetInline: 0,\n    insetBlockEnd: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n});\n\n// 判定横竖的移动距离（px）\nconst LOCK_DISTANCE = 8;\n\n/** 拉的手感：提示区高度以内跟手，再往下越拉越沉 */\nfunction damp(dy: number, head: number) {\n  if (dy <= head) return dy;\n  if (dy <= head * 2) return head + (dy - head) / 2;\n  return head * 1.5 + (dy - head * 2) / 4;\n}\n\n/** 下拉刷新（div > 滑动层：提示区 + 内容） */\nexport const PullRefresh = _component(\n  ({\n    _refreshing: refreshing = _bindable(false),\n    onRefresh,\n    disabled = false,\n    headHeight = 50,\n    pullingText,\n    loosingText,\n    loadingText,\n    successText,\n    successDuration = 500,\n    head,\n    children,\n    propsHead,\n    ...rest\n  }: PullRefreshProps) => {\n    const host = useHost();\n    const config = useConfig();\n    // 拉动中的距离（null 是没在拉）；刷新完的成功提示\n    let drag = _state<number | null>(null);\n    let pulling = _state(false);\n    let succeeded = _state(false);\n    let start = { x: 0, y: 0 };\n    let direction: 'h' | 'v' | null = null;\n    let tracking = false;\n    let successTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const status = (): PullRefreshStatus => {\n      if (refreshing) return 'loading';\n      if (succeeded) return 'success';\n      if (drag === null || drag === 0) return 'normal';\n      return drag >= headHeight ? 'loosing' : 'pulling';\n    };\n\n    // 刷新结束：有成功提示时先停一会儿再收起\n    watch(\n      () => refreshing,\n      (now, before) => {\n        if (now || !before || successText === undefined) return;\n        succeeded = true;\n        clearTimeout(successTimer);\n        successTimer = setTimeout(() => (succeeded = false), successDuration);\n      },\n    );\n    onBeforeUnmount(() => clearTimeout(successTimer));\n\n    const refresh = async () => {\n      refreshing = true;\n      const pending = onRefresh?.();\n      if (!(pending instanceof Promise)) return;\n      try {\n        await pending;\n      } finally {\n        refreshing = false;\n      }\n    };\n\n    const onTouchstart = (event: TouchEvent) => {\n      // 只在页面滚到顶、没在刷新时接管\n      tracking = !disabled && !refreshing && !succeeded && host.scrollTop() <= 0;\n      if (!tracking) return;\n      const touch = event.touches[0]!;\n      start = { x: touch.clientX, y: touch.clientY };\n      direction = null;\n    };\n    const onTouchmove = (event: TouchEvent) => {\n      if (!tracking) return;\n      const touch = event.touches[0]!;\n      const dx = touch.clientX - start.x;\n      const dy = touch.clientY - start.y;\n      if (!direction) {\n        if (Math.abs(dx) < LOCK_DISTANCE && Math.abs(dy) < LOCK_DISTANCE) return;\n        direction = dy > 0 && dy > Math.abs(dx) ? 'v' : 'h';\n        // 往上推、横滑：交给页面\n        if (direction === 'h') return void (tracking = false);\n        pulling = true;\n      }\n      // 挡住浏览器自己的下拉（刷新整页、回弹）\n      if (event.cancelable) event.preventDefault();\n      drag = damp(Math.max(0, dy), headHeight);\n    };\n    const onTouchend = () => {\n      tracking = false;\n      pulling = false;\n      if (drag === null) return;\n      const loosing = drag >= headHeight;\n      drag = null;\n      if (loosing) void refresh();\n    };\n\n    const text = (current: PullRefreshStatus): VNodeChild => {\n      switch (current) {\n        case 'pulling':\n          return pullingText ?? config.lang.pulling;\n        case 'loosing':\n          return loosingText ?? config.lang.loosing;\n        case 'loading':\n          return <Loading>{loadingText ?? config.lang.refreshing}</Loading>;\n        case 'success':\n          return successText;\n        default:\n          return null;\n      }\n    };\n\n    return () => {\n      const current = status();\n      const distance = drag ?? (current === 'loading' || current === 'success' ? headHeight : 0);\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: pullRefreshStyles.root }, rest, {\n            onTouchstart,\n            onTouchmove,\n            onTouchend,\n            onTouchcancel: onTouchend,\n            ...dataAttrs({\n              'data-status': current,\n              // 小程序：收 touchmove；拉动期间 catch，页面不跟着滚\n              'data-touch-move': pulling ? 'catch' : true,\n            }),\n          })}\n        >\n          <div\n            {...mergeAttrs<'div'>({\n              sx: [pullRefreshStyles.track, drag !== null && pullRefreshStyles.dragging],\n              style: { transform: distance ? `translateY(${distance}px)` : 'none' },\n            })}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                { sx: pullRefreshStyles.head, style: { height: `${headHeight}px` } },\n                propsHead,\n                {\n                  'aria-live': 'polite',\n                },\n              )}\n            >\n              {head ? head(current, distance) : text(current)}\n            </div>\n            {children}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Skeleton.d.ts

@@ -0,0 +1,56 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到占位的根元素（div）上 */
+export interface SkeletonProps extends PartProps<'div', 'role' | 'aria-busy' | 'title'> {
+    /**
+     * 是否显示占位；false 时显示 children
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * 文字的行数
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 每行的宽度；给数组时按行取，最后一行默认 60%
+     * @default '100%'
+     */
+    rowWidth?: string | string[];
+    /** 显示标题的块 */
+    title?: boolean;
+    /** 显示头像的块 */
+    avatar?: boolean;
+    /**
+     * 头像的形状
+     * @default 'round'
+     */
+    avatarShape?: 'round' | 'square';
+    /**
+     * 呼吸动画
+     * @default true
+     */
+    animate?: boolean;
+    /** 加载完显示的内容 */
+    children?: VNodeChild;
+    /** 头像块的部件属性 */
+    propsAvatar?: PartProps<'div'>;
+    /** 标题块的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 每行文字块的部件属性 */
+    propsRow?: PartProps<'div'>;
+}
+/** Skeleton 的样式：root、animate、avatar、square、body、block、title、row */
+export declare const skeletonStyles: Readonly<{
+    animate: css.CompiledStyles;
+    avatar: css.CompiledStyles;
+    block: css.CompiledStyles;
+    body: css.CompiledStyles;
+    root: css.CompiledStyles;
+    row: css.CompiledStyles;
+    square: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 骨架屏（div[aria-busy] > 头像 + 标题 + 文字行）；loading 为 false 时只渲染 children */
+export declare const Skeleton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SkeletonProps>;

package/dist/feedback/Skeleton.js

@@ -0,0 +1,99 @@
+import { mergeAttrs } from "../utils/props.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/feedback/Skeleton.tsx
+/** 未声明的属性落到占位的根元素（div）上 */
+var pulse = css.keyframes({ "50%": { opacity: .5 } });
+/** Skeleton 的样式：root、animate、avatar、square、body、block、title、row */
+var skeletonStyles = css.create({
+	root: {
+		display: "flex",
+		gap: "_lg",
+		paddingBlock: "_sm",
+		paddingInline: "_lg"
+	},
+	animate: {
+		animationName: pulse,
+		animationDuration: "1.4s",
+		animationTimingFunction: "_standard",
+		animationIterationCount: {
+			default: "infinite",
+			_reducedMotion: 0
+		}
+	},
+	avatar: {
+		flex: "none",
+		width: "2.5em",
+		height: "2.5em",
+		borderRadius: "_full"
+	},
+	square: { borderRadius: "_md" },
+	body: {
+		flex: "1 1 auto",
+		minWidth: 0,
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.85em"
+	},
+	block: {
+		backgroundColor: "_fill",
+		borderRadius: "_sm"
+	},
+	title: {
+		width: "40%",
+		height: "1.15em"
+	},
+	row: { height: "1em" }
+});
+/** 某一行的宽度：数组按行取；没给时最后一行（不止一行时）短一些，看起来像一段文字的结尾 */
+function widthOf(rowWidth, index, rows) {
+	if (Array.isArray(rowWidth)) return rowWidth[index] ?? "100%";
+	if (rowWidth) return rowWidth;
+	return rows > 1 && index === rows - 1 ? "60%" : "100%";
+}
+/** 骨架屏（div[aria-busy] > 头像 + 标题 + 文字行）；loading 为 false 时只渲染 children */
+var Skeleton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const loading = readonlyProp(_props, "loading", true);
+	const rows = readonlyProp(_props, "rows", 3);
+	const rowWidth = readonlyProp(_props, "rowWidth");
+	const title = readonlyProp(_props, "title", false);
+	const avatar = readonlyProp(_props, "avatar", false);
+	const avatarShape = readonlyProp(_props, "avatarShape", "round");
+	const animate = readonlyProp(_props, "animate", true);
+	const children = childrenProp(_props);
+	const propsAvatar = readonlyProp(_props, "propsAvatar");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsRow = readonlyProp(_props, "propsRow");
+	const rest = restProps(_props, _ctx, false);
+	return () => {
+		if (!loading.value) return children.value;
+		const block = (sx) => [
+			skeletonStyles.block,
+			sx,
+			animate.value && skeletonStyles.animate
+		];
+		return createVNode("div", mergeAttrs({ sx: skeletonStyles.root }, rest, { "aria-busy": "true" }), [avatar.value && createVNode("div", mergeAttrs({ sx: block([skeletonStyles.avatar, avatarShape.value === "square" && skeletonStyles.square]) }, propsAvatar.value), null), createVNode("div", mergeAttrs({ sx: skeletonStyles.body }), [title.value && createVNode("div", mergeAttrs({ sx: block(skeletonStyles.title) }, propsTitle.value), null), Array.from({ length: rows.value }, (_, index) => createVNode("div", mergeAttrs({
+			sx: block(skeletonStyles.row),
+			style: { width: widthOf(rowWidth.value, index, rows.value) }
+		}, propsRow.value), null))])]);
+	};
+}, {
+	name: "Skeleton",
+	props: [
+		"loading",
+		"rows",
+		"rowWidth",
+		"title",
+		"avatar",
+		"avatarShape",
+		"animate",
+		"propsAvatar",
+		"propsTitle",
+		"propsRow"
+	]
+});
+//#endregion
+export { Skeleton, skeletonStyles };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/feedback/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/feedback/Skeleton.tsx"],"sourcesContent":["/**\n * 骨架屏：内容加载出来之前，用灰色的块占住标题、头像、几行文字的位置，加载完换成真实内容。\n * 只用于整块内容（卡片、列表项、详情页）的占位；按钮、开关这类小组件的加载用 Loading。\n *\n *   <Skeleton loading={pending} avatar title rows={3}>\n *     <ArticleCard … />\n *   </Skeleton>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css, type SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到占位的根元素（div）上 */\nexport interface SkeletonProps extends PartProps<'div', 'role' | 'aria-busy' | 'title'> {\n  /**\n   * 是否显示占位；false 时显示 children\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * 文字的行数\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * 每行的宽度；给数组时按行取，最后一行默认 60%\n   * @default '100%'\n   */\n  rowWidth?: string | string[];\n  /** 显示标题的块 */\n  title?: boolean;\n  /** 显示头像的块 */\n  avatar?: boolean;\n  /**\n   * 头像的形状\n   * @default 'round'\n   */\n  avatarShape?: 'round' | 'square';\n  /**\n   * 呼吸动画\n   * @default true\n   */\n  animate?: boolean;\n  /** 加载完显示的内容 */\n  children?: VNodeChild;\n  /** 头像块的部件属性 */\n  propsAvatar?: PartProps<'div'>;\n  /** 标题块的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 每行文字块的部件属性 */\n  propsRow?: PartProps<'div'>;\n}\n\nconst pulse = css.keyframes({ '50%': { opacity: 0.5 } });\n\n/** Skeleton 的样式：root、animate、avatar、square、body、block、title、row */\nexport const skeletonStyles = css.create({\n  root: { display: 'flex', gap: '_lg', paddingBlock: '_sm', paddingInline: '_lg' },\n  animate: {\n    animationName: pulse,\n    animationDuration: '1.4s',\n    animationTimingFunction: '_standard',\n    // 减少动态效果时不闪\n    animationIterationCount: { default: 'infinite', _reducedMotion: 0 },\n  },\n  avatar: { flex: 'none', width: '2.5em', height: '2.5em', borderRadius: '_full' },\n  square: { borderRadius: '_md' },\n  body: { flex: '1 1 auto', minWidth: 0, display: 'flex', flexDirection: 'column', gap: '0.85em' },\n  block: { backgroundColor: '_fill', borderRadius: '_sm' },\n  title: { width: '40%', height: '1.15em' },\n  row: { height: '1em' },\n});\n\n/** 某一行的宽度：数组按行取；没给时最后一行（不止一行时）短一些，看起来像一段文字的结尾 */\nfunction widthOf(rowWidth: string | string[] | undefined, index: number, rows: number) {\n  if (Array.isArray(rowWidth)) return rowWidth[index] ?? '100%';\n  if (rowWidth) return rowWidth;\n  return rows > 1 && index === rows - 1 ? '60%' : '100%';\n}\n\n/** 骨架屏（div[aria-busy] > 头像 + 标题 + 文字行）；loading 为 false 时只渲染 children */\nexport const Skeleton = _component(\n  ({\n    loading = true,\n    rows = 3,\n    rowWidth,\n    title = false,\n    avatar = false,\n    avatarShape = 'round',\n    animate = true,\n    children,\n    propsAvatar,\n    propsTitle,\n    propsRow,\n    ...rest\n  }: SkeletonProps) =>\n    () => {\n      if (!loading) return children;\n      const block = (sx: SxStyles): SxStyles => [\n        skeletonStyles.block,\n        sx,\n        animate && skeletonStyles.animate,\n      ];\n      return (\n        <div {...mergeAttrs<'div'>({ sx: skeletonStyles.root }, rest, { 'aria-busy': 'true' })}>\n          {avatar && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: block([\n                    skeletonStyles.avatar,\n                    avatarShape === 'square' && skeletonStyles.square,\n                  ]),\n                },\n                propsAvatar,\n              )}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: skeletonStyles.body })}>\n            {title && (\n              <div {...mergeAttrs<'div'>({ sx: block(skeletonStyles.title) }, propsTitle)} />\n            )}\n            {Array.from({ length: rows }, (_, index) => (\n              <div\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: block(skeletonStyles.row),\n                    style: { width: widthOf(rowWidth, index, rows) },\n                  },\n                  propsRow,\n                )}\n              />\n            ))}\n          </div>\n        </div>\n      );\n    },\n);\n"],"mappings":";;;;;;AAsDA,IAAM,QAAQ,IAAI,UAAU,EAAE,OAAO,EAAE,SAAS,GAAI,EAAE,CAAC;;AAGvD,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EAAE,SAAS;EAAQ,KAAK;EAAO,cAAc;EAAO,eAAe;CAAM;CAC/E,SAAS;EACP,eAAe;EACf,mBAAmB;EACnB,yBAAyB;EAEzB,yBAAyB;GAAE,SAAS;GAAY,gBAAgB;EAAE;CACpE;CACA,QAAQ;EAAE,MAAM;EAAQ,OAAO;EAAS,QAAQ;EAAS,cAAc;CAAQ;CAC/E,QAAQ,EAAE,cAAc,MAAM;CAC9B,MAAM;EAAE,MAAM;EAAY,UAAU;EAAG,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAS;CAC/F,OAAO;EAAE,iBAAiB;EAAS,cAAc;CAAM;CACvD,OAAO;EAAE,OAAO;EAAO,QAAQ;CAAS;CACxC,KAAK,EAAE,QAAQ,MAAM;AACvB,CAAC;;AAGD,SAAS,QAAQ,UAAyC,OAAe,MAAc;CACrF,IAAI,MAAM,QAAQ,QAAQ,GAAG,OAAO,SAAS,UAAU;CACvD,IAAI,UAAU,OAAO;CACrB,OAAO,OAAO,KAAK,UAAU,OAAO,IAAI,QAAQ;AAClD;;AAGA,IAAa,WAAW,0BACtB,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WACY,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACP,CAAC;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAEA,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,UACJ,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,eACA,OAAO;CAAA,MAAA,UAAAA,aAAA,QAAA,WACX,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,cAAAD,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAKX,OAAIE,UAAA,QAAA,MAAA,KAAA;CAAA,aAED;EACJ,IAAI,CAAA,QAAA,OAAU,OAAA,SAAA;EACd,MAAM,SAAS,OAA2B;GACxC,eAAe;GACf;GACA,QAAA,SAAW,eAAe;EAAO;EAEnC,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,MAAM,EAAE,aAAa,OAAO,CAAC,GAAC,CACnF,OAAA,SAAAA,YAAA,OAEO,WACF,EACE,IAAI,MAAM,CACR,eAAe,QACf,YAAA,UAAgB,YAAY,eAAe,MAAM,CAClD,EACH,GAAC,YAAA,KAEH,GAAC,IAAA,GAEJA,YAAA,OACQ,WAAkB,EAAE,IAAI,eAAe,KAAK,CAAC,GAAC,CACpD,MAAA,SAAAA,YAAA,OACU,WAAkB,EAAE,IAAI,MAAM,eAAe,KAAK,EAAE,GAAC,WAAA,KAAY,GAAC,IAAA,GAE5E,MAAM,KAAK,EAAE,QAAM,KAAA,MAAO,IAAI,GAAG,UAAKA,YAAA,OAE/B,WACF;GACE,IAAI,MAAM,eAAe,GAAG;GAC5B,OAAO,EAAE,OAAO,QAAO,SAAA,OAAW,OAAK,KAAA,KAAM,EAAE;EACjD,GAAC,SAAA,KAEH,GAAC,IAAA,CAEJ,CAAC,CAAA,CAAA,CAAA;CAIV;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/feedback/Toast.d.ts

@@ -0,0 +1,89 @@
+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 ToastTypes {
+    /** 只有文字 */
+    text: unknown;
+    /** 加载中：旋转指示，不自动关闭 */
+    loading: unknown;
+    /** 成功：对勾 */
+    success: unknown;
+    /** 失败：叉 */
+    fail: unknown;
+}
+/** 显示的位置 */
+export interface ToastPositions {
+    /** 屏幕中间 */
+    middle: unknown;
+    /** 靠上 */
+    top: unknown;
+    /** 靠下 */
+    bottom: unknown;
+}
+/** 轻提示的选项（组件的 props 与 showToast 的参数共用） */
+export interface ToastOptions {
+    /** 文字 */
+    message?: VNodeChild;
+    /**
+     * 类型
+     * @default 'text'
+     */
+    type?: keyof ToastTypes;
+    /** 自定义图标（代替类型自带的） */
+    icon?: IconData;
+    /**
+     * 显示多久（ms）；0 表示不自动关闭。加载中默认不自动关闭
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * 位置
+     * @default 'middle'
+     */
+    position?: keyof ToastPositions;
+    /** 显示期间挡住页面的点击（加载中常用） */
+    forbidClick?: boolean;
+    /** 关闭之后 */
+    onClose?: () => void;
+}
+/** 未声明的属性落到提示框（div）上 */
+export interface ToastProps extends ToastOptions, PartProps<'div', 'role'> {
+    /** 是否显示；双向绑定写 `_open={x}`，到时间自动关闭时写回 false */
+    _open?: boolean;
+    /** 文字（与 message 二选一） */
+    children?: VNodeChild;
+}
+/** Toast 的样式：root、withIcon、各位置、icon、blocker */
+export declare const toastStyles: Readonly<{
+    blocker: css.CompiledStyles;
+    bottom: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    middle: css.CompiledStyles;
+    root: css.CompiledStyles;
+    top: css.CompiledStyles;
+    withIcon: css.CompiledStyles;
+}>;
+/** 轻提示（div[role=status]，渲染到浮层根） */
+export declare const Toast: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ToastProps>;
+/** 命令式轻提示的状态：ConfigProvider 里的出口按它渲染 */
+export declare const toastState: import("vue").ShallowReactive<{
+    open: boolean;
+    options: ToastOptions;
+}>;
+/** 命令式轻提示的控制器 */
+export interface ToastHandle {
+    /** 关闭这个提示（已经被后一个替换时什么也不做） */
+    close(): void;
+}
+/** 显示一个轻提示；同一时间只有一个，后一个替换前一个 */
+export declare function showToast(options: ToastOptions | string): ToastHandle;
+/** 加载中的轻提示：不自动关闭，默认挡住点击；用返回的 close() 关 */
+export declare const showLoadingToast: (options?: ToastOptions | string) => ToastHandle;
+/** 成功的轻提示 */
+export declare const showSuccessToast: (options: ToastOptions | string) => ToastHandle;
+/** 失败的轻提示 */
+export declare const showFailToast: (options: ToastOptions | string) => ToastHandle;
+/** 关闭当前的轻提示 */
+export declare function closeToast(): void;

package/dist/feedback/Toast.js

@@ -0,0 +1,186 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Loading } from "./Loading.js";
+import { useHost } from "../utils/host.js";
+import { usePresence } from "../utils/presence.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Teleport, createVNode, onBeforeUnmount, shallowReactive, watch } from "vue";
+import { CircleCheck, CircleX } from "@lucide/icons";
+//#region src/feedback/Toast.tsx
+/**
+* 轻提示：屏幕中间（或上、下）的一小块黑底文字，过一会儿自己消失。有文字、加载中、成功、失败四种。
+*
+*   showToast('已复制');
+*   const toast = showLoadingToast('提交中…');   …   toast.close();
+*   showSuccessToast('保存成功');
+*   <Toast _open={show} type="fail">网络不太好</Toast>
+*
+* 命令式的写法渲染在 ConfigProvider 里（页面要包一层）；同一时间只有一个，后一个替换前一个。
+*/
+/** 轻提示的类型 */
+/** 显示的位置 */
+/** 轻提示的选项（组件的 props 与 showToast 的参数共用） */
+/** 未声明的属性落到提示框（div）上 */
+/** Toast 的样式：root、withIcon、各位置、icon、blocker */
+var toastStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		position: "fixed",
+		insetInlineStart: "50%",
+		zIndex: 3e3,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		gap: "_sm",
+		maxWidth: "70%",
+		paddingBlock: "0.6em",
+		paddingInline: "1em",
+		borderRadius: "_lg",
+		backgroundColor: "_inverseSurface",
+		color: "_inverseText",
+		fontSize: "_md",
+		lineHeight: "1.4",
+		textAlign: "center",
+		overflowWrap: "anywhere",
+		pointerEvents: "none",
+		opacity: {
+			default: 0,
+			"[data-state=\"open\"]": 1
+		},
+		transitionProperty: "opacity, transform",
+		transitionDuration: "_md"
+	},
+	withIcon: {
+		minWidth: "7.5em",
+		minHeight: "7.5em",
+		justifyContent: "center",
+		padding: "_lg"
+	},
+	middle: {
+		insetBlockStart: "50%",
+		transform: {
+			default: "translate(-50%, -50%) scale(0.92)",
+			"[data-state=\"open\"]": "translate(-50%, -50%)"
+		}
+	},
+	top: {
+		insetBlockStart: "20%",
+		transform: "translateX(-50%)"
+	},
+	bottom: {
+		insetBlockEnd: "20%",
+		transform: "translateX(-50%)"
+	},
+	icon: { fontSize: "2.5em" },
+	blocker: {
+		position: "fixed",
+		inset: 0,
+		zIndex: 3e3
+	}
+});
+var ICONS = {
+	success: CircleCheck,
+	fail: CircleX
+};
+/** 轻提示（div[role=status]，渲染到浮层根） */
+var Toast = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const message = readonlyProp(_props, "message");
+	const type = readonlyProp(_props, "type", "text");
+	const icon = readonlyProp(_props, "icon");
+	const duration = readonlyProp(_props, "duration");
+	const position = readonlyProp(_props, "position", "middle");
+	const forbidClick = readonlyProp(_props, "forbidClick", false);
+	const onClose = readonlyProp(_props, "onClose");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	const presence = usePresence(() => open.value, 240);
+	let timer;
+	const schedule = () => {
+		clearTimeout(timer);
+		const wait = duration.value ?? (type.value === "loading" ? 0 : 2e3);
+		if (open.value && wait > 0) timer = setTimeout(() => {
+			open.value = false;
+			onClose.value?.();
+		}, wait);
+	};
+	watch(() => [
+		open.value,
+		message.value,
+		type.value,
+		duration.value
+	], schedule, { immediate: true });
+	onBeforeUnmount(() => clearTimeout(timer));
+	return () => {
+		if (!presence.mounted) return null;
+		const glyph = type.value === "loading" ? createVNode(Loading, { "size": 36 }, null) : icon.value || type.value !== "text" ? createVNode(Icon, {
+			"icon": icon.value ?? ICONS[type.value],
+			"sx": toastStyles.icon
+		}, null) : null;
+		return createVNode(Teleport, { "to": host.overlayRoot() }, { default: () => [forbidClick.value && createVNode("div", mergeAttrs({ sx: toastStyles.blocker }), null), createVNode("div", mergeAttrs({ sx: [
+			config.rootSx,
+			toastStyles.root,
+			toastStyles[position.value],
+			glyph && toastStyles.withIcon
+		] }, rest, {
+			role: "status",
+			...dataAttrs({ "data-state": presence.visible ? "open" : "closed" })
+		}), [glyph, message.value ?? children.value])] });
+	};
+}, {
+	name: "Toast",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"message",
+		"type",
+		"icon",
+		"duration",
+		"position",
+		"forbidClick",
+		"onClose"
+	]
+});
+/** 命令式轻提示的状态：ConfigProvider 里的出口按它渲染 */
+var toastState = shallowReactive({
+	open: false,
+	options: {}
+});
+/** 命令式轻提示的控制器 */
+/** 显示一个轻提示；同一时间只有一个，后一个替换前一个 */
+function showToast(options) {
+	const next = typeof options === "string" ? { message: options } : options;
+	toastState.options = next;
+	toastState.open = true;
+	return { close() {
+		if (toastState.options === next) toastState.open = false;
+	} };
+}
+/** 加载中的轻提示：不自动关闭，默认挡住点击；用返回的 close() 关 */
+var showLoadingToast = (options = {}) => showToast({
+	forbidClick: true,
+	...typeof options === "string" ? { message: options } : options,
+	type: "loading"
+});
+/** 成功的轻提示 */
+var showSuccessToast = (options) => showToast({
+	...typeof options === "string" ? { message: options } : options,
+	type: "success"
+});
+/** 失败的轻提示 */
+var showFailToast = (options) => showToast({
+	...typeof options === "string" ? { message: options } : options,
+	type: "fail"
+});
+/** 关闭当前的轻提示 */
+function closeToast() {
+	toastState.open = false;
+}
+//#endregion
+export { Toast, closeToast, showFailToast, showLoadingToast, showSuccessToast, showToast, toastState, toastStyles };
+
+//# sourceMappingURL=Toast.js.map