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

package/dist/feedback/Banner.js

@@ -0,0 +1,122 @@
+import { t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { fontSizeStyles, relativeFontSizeStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { presenceStyles } from "../utils/style/transitions.js";
+import { CloseButton } from "../base/CloseButton.js";
+import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
+import { useDismissible } from "../utils/motion/presence.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/Banner.tsx
+/** 横幅的样式 */
+/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */
+/** 未声明的属性落到外层 div 上 */
+/** Banner 的样式：root、icon、content、title、action、close */
+var bannerStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexWrap: "wrap",
+		columnGap: "_sm",
+		rowGap: "_xs",
+		width: "100%",
+		paddingBlock: "_sm",
+		paddingInlineStart: "_lg",
+		paddingInlineEnd: `calc(${t.space.lg} + 2em)`,
+		lineHeight: "_normal",
+		textAlign: "center"
+	},
+	balanced: { paddingInlineEnd: "_lg" },
+	icon: { flexShrink: 0 },
+	content: { minWidth: 0 },
+	title: {
+		fontWeight: "_semibold",
+		marginInlineEnd: "_sm"
+	},
+	action: {
+		flexShrink: 0,
+		fontWeight: "_medium"
+	},
+	close: {
+		position: "absolute",
+		insetInlineEnd: "_sm",
+		insetBlockStart: "50%",
+		translate: "0 -50%",
+		color: "inherit"
+	}
+});
+var ROLES = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+};
+/** 横幅：一行通栏通知，内容居中，可以关闭 */
+var Banner = /*#__PURE__*/ _component((_props, _ctx) => {
+	const tone = readonlyProp(_props, "tone", "info");
+	const variant = readonlyProp(_props, "variant", "soft");
+	const size = readonlyProp(_props, "size");
+	const title = readonlyProp(_props, "title");
+	const icon = readonlyProp(_props, "icon");
+	const action = readonlyProp(_props, "action");
+	const live = readonlyProp(_props, "live", "off");
+	const onClose = readonlyProp(_props, "onClose");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const propsClose = readonlyProp(_props, "propsClose");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const dismissible = useDismissible(() => onClose.value?.());
+	return () => {
+		const shownIcon = icon.value === false ? void 0 : icon.value ?? statusIcons[tone.value];
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+			bannerStyles.root,
+			!onClose.value && bannerStyles.balanced,
+			presenceStyles.fade,
+			statusToneSx(variant.value, tone.value),
+			size.value && fontSizeStyles[size.value],
+			dismissible.dismissing && presenceStyles.leaving
+		] }, rest, {
+			ref: dismissible.ref,
+			role: ROLES[live.value]
+		}), {
+			"data-tone": tone.value,
+			"data-state": dismissible.state
+		}), [
+			shownIcon && createVNode(Icon, mergePartProps({
+				icon: shownIcon,
+				sx: bannerStyles.icon
+			}, propsIcon.value), null),
+			createVNode("div", mergeAttrs({ sx: bannerStyles.content }, propsContent.value), [hasContent(title.value) && createVNode("strong", mergeAttrs({ sx: bannerStyles.title }, propsTitle.value), [title.value]), children.value]),
+			hasContent(action.value) && createVNode("div", mergeAttrs({ sx: bannerStyles.action }, propsAction.value), [action.value]),
+			onClose.value && createVNode(CloseButton, mergeProps$1({ sx: [bannerStyles.close, relativeFontSizeStyles.sm] }, propsClose.value, { onClick: dismissible.dismiss }), null)
+		]);
+	};
+}, {
+	name: "Banner",
+	props: [
+		"tone",
+		"variant",
+		"size",
+		"title",
+		"icon",
+		"action",
+		"live",
+		"onClose",
+		"propsIcon",
+		"propsContent",
+		"propsTitle",
+		"propsAction",
+		"propsClose"
+	]
+});
+//#endregion
+export { Banner, bannerStyles };
+
+//# sourceMappingURL=Banner.js.map

package/dist/feedback/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/feedback/Banner.tsx"],"sourcesContent":["/**\n * 横幅：贴着页面（或区域）顶部的一行通栏通知，系统维护、试用到期、新功能上线、只读模式这类整页都相关的消息。\n *\n *   <Banner tone=\"warning\" title=\"系统维护\" action={<Link href=\"/notice\">查看详情</Link>} onClose={hide}>\n *     今晚 22:00–23:00 暂停服务\n *   </Banner>\n *\n * 和 Alert 的分工：Alert 放在内容里、说明某一块的状态，可以有多行正文；Banner 占满宽度、一行说完，内容居中，\n * 没有圆角，放在页面最上方（AppShell 的顶栏之上或之下）。实底（solid）最醒目，用于必须先看到的消息。\n * 关闭时先离场再报告 onClose（useDismissible），使用方移除并记住“已关闭”；没移除就重新出现。\n * 页面加载时就在的横幅不播报；运行中才出现的用 live（同 Alert）。\n * 部件：Root（div）、Icon、Content（div：标题与正文）、Title（strong）、Action、Close。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { useDismissible } from '../utils/motion/presence';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { AlertLives } from './Alert';\nimport { t } from '../config/theme/tokens';\n\n/** 横幅的样式 */\nexport interface BannerVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底：最醒目，必须先看到的消息 */\n  solid: unknown;\n}\n\n/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type BannerManaged = 'role' | 'title';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface BannerProps extends PartProps<'div', BannerManaged> {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 样式，默认 soft */\n  variant?: keyof BannerVariants;\n  /** 字号档位，默认继承上下文字号 */\n  size?: TextSize;\n  /** 加粗的开头（“系统维护”），与正文在同一行 */\n  title?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 正文后的操作（链接或小按钮） */\n  action?: VNodeChild;\n  /** 读屏播报方式，默认 off（同 Alert） */\n  live?: keyof AlertLives;\n  /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字区的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'strong'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** Banner 的样式：root、icon、content、title、action、close */\nexport const bannerStyles = css.create({\n  // 内容居中、一行说完；窄屏时换行。关闭按钮贴在结束边，不参与居中\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    width: '100%',\n    paddingBlock: '_sm',\n    paddingInlineStart: '_lg',\n    paddingInlineEnd: `calc(${t.space.lg} + 2em)`,\n    lineHeight: '_normal',\n    textAlign: 'center',\n  },\n  // 没有关闭按钮时两边留白一样\n  balanced: { paddingInlineEnd: '_lg' },\n  icon: { flexShrink: 0 },\n  content: { minWidth: 0 },\n  title: { fontWeight: '_semibold', marginInlineEnd: '_sm' },\n  action: { flexShrink: 0, fontWeight: '_medium' },\n  close: {\n    position: 'absolute',\n    insetInlineEnd: '_sm',\n    insetBlockStart: '50%',\n    translate: '0 -50%',\n    color: 'inherit',\n  },\n});\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 横幅：一行通栏通知，内容居中，可以关闭 */\nexport const Banner = _component(\n  ({\n    tone = 'info',\n    variant = 'soft',\n    size,\n    title,\n    icon,\n    action,\n    live = 'off',\n    onClose,\n    propsIcon,\n    propsContent,\n    propsTitle,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: BannerProps) => {\n    // 离场结束才交给使用方移除；使用方没移除时横幅重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                bannerStyles.root,\n                !onClose && bannerStyles.balanced,\n                presenceStyles.fade,\n                statusToneSx(variant, tone),\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live] },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {shownIcon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon: shownIcon, sx: bannerStyles.icon }, propsIcon)}\n            />\n          )}\n          <div {...mergeAttrs<'div'>({ sx: bannerStyles.content }, propsContent)}>\n            {hasContent(title) && (\n              <strong {...mergeAttrs<'strong'>({ sx: bannerStyles.title }, propsTitle)}>\n                {title}\n              </strong>\n            )}\n            {children}\n          </div>\n          {hasContent(action) && (\n            <div {...mergeAttrs<'div'>({ sx: bannerStyles.action }, propsAction)}>{action}</div>\n          )}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: [bannerStyles.close, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Empty.d.ts

@@ -0,0 +1,38 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */
+export interface EmptyOptions {
+    /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */
+    size?: TextSize;
+}
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+export interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {
+    /** 图标，默认 Lucide 的 Inbox；false 不显示 */
+    icon?: IconData | false;
+    /** 标题 */
+    title?: VNodeChild;
+    /** 说明 */
+    description?: VNodeChild;
+    /** 操作（如“新建”按钮） */
+    action?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 标题的部件属性 */
+    propsTitle?: Partial<TextProps>;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    /** 操作区的部件属性 */
+    propsAction?: PartProps<'div'>;
+    /** 标题与说明之外的内容 */
+    children?: VNodeChild;
+}
+/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */
+export declare const emptyRecipe: css.Recipe<"action" | "description" | "icon" | "root" | "title", {}>;
+/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */
+export type EmptyPart = (typeof emptyRecipe.parts)[number];
+/** 空状态：图标、标题、说明、操作，居中排列 */
+export declare const Empty: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<EmptyProps>;

package/dist/feedback/Empty.js

@@ -0,0 +1,114 @@
+import { useDefaults } from "../config/defaults.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { Paragraph, Text as Text$1 } from "../base/Text.js";
+import { createVNode, mergeProps, unref } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Inbox } from "@lucide/icons";
+//#region src/feedback/Empty.tsx
+/**
+* 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。
+*
+*   <Empty title="还没有订单" description="下单后会显示在这里。" action={<Button>去逛逛</Button>} />
+*   <Empty icon={SearchX} title="没有找到“{keyword}”" size="sm" />
+*
+* 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。
+* 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。
+*/
+/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */
+var emptyRecipe = css.recipe({
+	name: "Empty",
+	parts: [
+		"root",
+		"icon",
+		"title",
+		"description",
+		"action"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "_sm",
+			paddingBlock: "_xl",
+			paddingInline: "_lg",
+			textAlign: "center",
+			color: "_text"
+		},
+		icon: {
+			width: "2.5em",
+			height: "2.5em",
+			color: "_textMuted",
+			strokeWidth: "_sm"
+		},
+		title: { fontWeight: "_semibold" },
+		description: {
+			maxWidth: "32em",
+			color: "_textMuted"
+		},
+		action: { marginBlockStart: "_sm" }
+	}
+});
+/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */
+/** 空状态：图标、标题、说明、操作，居中排列 */
+var Empty = /*#__PURE__*/ _component((_props, _ctx) => {
+	const icon = readonlyProp(_props, "icon");
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const action = readonlyProp(_props, "action");
+	const size = readonlyProp(_props, "size");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Empty", () => ({ size: size.value }));
+	const recipe = useRecipe(emptyRecipe);
+	return () => {
+		const textSize = appearance().size;
+		const s = recipe();
+		return createVNode("div", mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, textSize && fontSizeStyles[textSize]]
+		}, rest), [
+			icon.value !== false && createVNode(Icon, mergePartProps({
+				...s.icon,
+				icon: icon.value ?? Inbox
+			}, propsIcon.value), null),
+			hasContent(title.value) && createVNode(Text$1, mergeProps(mergePartProps(s.title, propsTitle.value), { "key": "__site0" }), {
+				default: () => [unref(title)],
+				$stable: true
+			}),
+			hasContent(description.value) && createVNode(Paragraph, mergeProps(mergePartProps(s.description, propsDescription.value), { "key": "__site1" }), {
+				default: () => [unref(description)],
+				$stable: true
+			}),
+			children.value,
+			hasContent(action.value) && createVNode("div", mergeAttrs(s.action, propsAction.value), [action.value])
+		]);
+	};
+}, {
+	name: "Empty",
+	props: [
+		"icon",
+		"title",
+		"description",
+		"action",
+		"size",
+		"propsIcon",
+		"propsTitle",
+		"propsDescription",
+		"propsAction"
+	]
+});
+//#endregion
+export { Empty, emptyRecipe };
+
+//# sourceMappingURL=Empty.js.map

package/dist/feedback/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","Text","_mergeProps","_vue_unref"],"sources":["../../src/feedback/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表、表格、搜索结果、下拉选项没有内容时的说明。图标 + 标题 + 说明 + 操作，居中排列。\n *\n *   <Empty title=\"还没有订单\" description=\"下单后会显示在这里。\" action={<Button>去逛逛</Button>} />\n *   <Empty icon={SearchX} title=\"没有找到“{keyword}”\" size=\"sm\" />\n *\n * 只是展示，不带角色；搜索后才出现的空结果，由所在的列表或区域决定要不要用 aria-live 播报。\n * 部件：Root（div）、Icon、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { Inbox } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** Empty 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface EmptyOptions {\n  /** 字号档位，内部尺寸随之缩放；放在下拉框、小卡片里用 sm。不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface EmptyProps extends PartProps<'div', 'title'>, EmptyOptions {\n  /** 图标，默认 Lucide 的 Inbox；false 不显示 */\n  icon?: IconData | false;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“新建”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 标题与说明之外的内容 */\n  children?: VNodeChild;\n}\n\n/** 空状态的配方：各部件的布局与颜色；字号档位用共用的 fontSizeStyles 另外叠加 */\nexport const emptyRecipe = css.recipe({\n  name: 'Empty',\n  parts: ['root', 'icon', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '2.5em', height: '2.5em', color: '_textMuted', strokeWidth: '_sm' },\n    title: { fontWeight: '_semibold' },\n    description: { maxWidth: '32em', color: '_textMuted' },\n    action: { marginBlockStart: '_sm' },\n  },\n});\n\n/** 空状态的部件（createUi / Provider 的 styles.Empty 按它定制） */\nexport type EmptyPart = (typeof emptyRecipe.parts)[number];\n\n/** 空状态：图标、标题、说明、操作，居中排列 */\nexport const Empty = _component(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: EmptyProps) => {\n    const appearance = useDefaults('Empty', () => ({ size }));\n    const recipe = useRecipe(emptyRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const s = recipe();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n        >\n          {icon !== false && (\n            <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: icon ?? Inbox }, propsIcon)} />\n          )}\n          {hasContent(title) && (\n            <Text {...mergePartProps<TextProps>(s.title, propsTitle)}>{title}</Text>\n          )}\n          {hasContent(description) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {description}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;CACN,OAAO;EAAC;EAAQ;EAAQ;EAAS;EAAe;CAAQ;CACxD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK;GACL,cAAc;GACd,eAAe;GACf,WAAW;GACX,OAAO;EACT;EACA,MAAM;GAAE,OAAO;GAAS,QAAQ;GAAS,OAAO;GAAc,aAAa;EAAM;EACjF,OAAO,EAAE,YAAY,YAAY;EACjC,aAAa;GAAE,UAAU;GAAQ,OAAO;EAAa;EACrD,QAAQ,EAAE,kBAAkB,MAAM;CACpC;AACF,CAAC;;;AAMD,IAAa,QAAQ,0BACnB,QAAA,SAYkB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADb,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB,EAAE,MAAI,KAAA,MAAC,EAAE;CACxD,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,WAAW,WAAW,CAAC,CAAC;EAC9B,MAAM,IAAI,OAAO;EACjB,OAAAC,YAAA,OAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI,CAAC,EAAE,KAAK,IAAI,YAAY,eAAe,SAAS;EAAE,GACnE,IACF,GAAC;GAEA,KAAA,UAAS,SAAKA,YAAA,MACH,eAA0B;IAAE,GAAG,EAAE;IAAM,MAAM,KAAA,SAAQ;GAAM,GAAC,UAAA,KAAW,GAAC,IAAA;GAEnF,WAAU,MAAA,KAAM,KAACA,YAAAC,QAAAC,WACN,eAA0B,EAAE,OAAK,WAAA,KAAY,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAEzD,WAAU,YAAA,KAAY,KAACH,YAAA,WAAAE,WACP,eAA0B,EAAE,aAAW,iBAAA,KAAkB,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,WAAA,CAAA;IAAA,SAAA;GAAA,CAAA;GAG1E,SAAA;GAEA,WAAU,OAAA,KAAO,KAACH,YAAA,OAAa,WAAkB,EAAE,QAAM,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EAAgB,CAAA;CAG9F;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/feedback/LoadingBar.d.ts

@@ -0,0 +1,45 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 加载条的状态 */
+export interface LoadingBarState {
+    /** 进度，0–100 */
+    readonly progress: number;
+    /** 是否显示（开始一会儿之后、结束淡出之前） */
+    readonly visible: boolean;
+    /** 出错了：危险色 */
+    readonly failed: boolean;
+}
+/** 加载条的控制器 */
+export interface LoadingBarController extends LoadingBarState {
+    /** 开始（已经在走时重新开始计时） */
+    start(): void;
+    /** 完成：走满后淡出 */
+    finish(): void;
+    /** 出错：变成危险色、走满后淡出 */
+    error(): void;
+}
+/** createLoadingBar 的选项 */
+export interface LoadingBarOptions {
+    /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */
+    delay?: number;
+}
+/** 创建加载条的控制器 */
+export declare function createLoadingBar({ delay }?: LoadingBarOptions): LoadingBarController;
+/** 未声明的属性落到加载条的 div 上 */
+export interface LoadingBarProps extends PartProps<'div', 'role'> {
+    /** createLoadingBar 的控制器 */
+    controller: LoadingBarController;
+}
+/** LoadingBar 的样式：root、visible、bar、failed */
+export declare const loadingBarStyles: Readonly<{
+    bar: css.CompiledStyles;
+    failed: css.CompiledStyles;
+    root: css.CompiledStyles;
+    visible: css.CompiledStyles;
+}>;
+/** 进度对应的缩放 */
+export declare const loadingBarScaleStyles: Readonly<{
+    readonly at: (progress: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 加载条：显示控制器的进度 */
+export declare const LoadingBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LoadingBarProps>;

package/dist/feedback/LoadingBar.js

@@ -0,0 +1,124 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { createVNode, mergeProps, shallowReactive } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/LoadingBar.tsx
+/** 加载条的状态 */
+/** 加载条的控制器 */
+/** createLoadingBar 的选项 */
+/** 每次涨多少：离 90% 越近涨得越慢 */
+var trickle = (progress) => (90 - progress) * .12 + .5;
+/** 创建加载条的控制器 */
+function createLoadingBar({ delay = 200 } = {}) {
+	const state = shallowReactive({
+		progress: 0,
+		visible: false,
+		failed: false
+	});
+	let timer;
+	let showTimer;
+	let hideTimer;
+	function stop() {
+		clearInterval(timer);
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+	}
+	function end(failed) {
+		stop();
+		if (!state.visible) {
+			state.progress = 0;
+			return;
+		}
+		state.failed = failed;
+		state.progress = 100;
+		hideTimer = setTimeout(() => {
+			state.visible = false;
+			hideTimer = setTimeout(() => state.progress = 0, 300);
+		}, 300);
+	}
+	return {
+		get progress() {
+			return state.progress;
+		},
+		get visible() {
+			return state.visible;
+		},
+		get failed() {
+			return state.failed;
+		},
+		start() {
+			stop();
+			state.failed = false;
+			state.progress = state.visible ? state.progress : 0;
+			showTimer = setTimeout(() => {
+				state.visible = true;
+				state.progress = Math.max(state.progress, 8);
+			}, delay);
+			timer = setInterval(() => {
+				if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);
+			}, 300);
+		},
+		finish: () => end(false),
+		error: () => end(true)
+	};
+}
+/** 未声明的属性落到加载条的 div 上 */
+/** LoadingBar 的样式：root、visible、bar、failed */
+var loadingBarStyles = css.create({
+	root: {
+		position: "fixed",
+		insetInline: 0,
+		insetBlockStart: 0,
+		zIndex: 2e3,
+		height: "_borderWidths.md",
+		pointerEvents: "none",
+		opacity: 0,
+		transition: `opacity ${t.durations.md} ${t.easings.standard}`
+	},
+	visible: { opacity: 1 },
+	bar: {
+		height: "100%",
+		backgroundColor: {
+			default: "_accent",
+			_forcedColors: "Highlight"
+		},
+		boxShadow: `0 0 8px ${t.colors.accent}`,
+		transformOrigin: {
+			default: "left center",
+			":dir(rtl)": "right center"
+		},
+		transition: `transform ${t.durations.md} ${t.easings.standard}`
+	},
+	failed: {
+		backgroundColor: "_danger",
+		boxShadow: "none"
+	}
+});
+/** 进度对应的缩放 */
+var loadingBarScaleStyles = css.create({ at: (progress) => ({ transform: `scaleX(${progress / 100})` }) });
+/** 加载条：显示控制器的进度 */
+var LoadingBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const controller = readonlyProp(_props, "controller");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	return () => createVNode("div", mergeProps(mergeAttrs({
+		sx: [loadingBarStyles.root, controller.value.visible && loadingBarStyles.visible],
+		"aria-label": lang.loading
+	}, rest, {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(controller.value.progress),
+		"aria-busy": controller.value.visible && controller.value.progress < 100,
+		"aria-hidden": controller.value.visible ? void 0 : true
+	}), { "data-state": controller.value.failed ? "error" : controller.value.visible ? "loading" : "idle" }), [createVNode("div", css.attrs(loadingBarStyles.bar, controller.value.failed && loadingBarStyles.failed, css.bind(loadingBarScaleStyles.at, () => [controller.value.progress], true)), null)]);
+}, {
+	name: "LoadingBar",
+	props: ["controller"]
+});
+//#endregion
+export { LoadingBar, createLoadingBar, loadingBarScaleStyles, loadingBarStyles };
+
+//# sourceMappingURL=LoadingBar.js.map

package/dist/feedback/LoadingBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingBar.tsx"],"sourcesContent":["/**\n * 页面顶部的加载条：路由切换、整页刷新数据时，窗口最上方一条细线从左往右走（同 NProgress、GitHub 的顶部进度）。\n * 控制器 + 显示（同 Toast），组件内外都能用：\n *\n *   export const loadingBar = createLoadingBar();       // 应用里创建一次\n *   <LoadingBar controller={loadingBar} />               // App 里放一个\n *   loadingBar.start(); await load(); loadingBar.finish();   // 或 useRouteLoadingBar(router, loadingBar)\n *\n * 不知道真实进度：start 后先快后慢地涨，停在 90% 前等 finish；finish 走满后淡出，error 变成危险色走满后淡出。\n * 很快完成的（200ms 内）不显示，免得每次切换都闪一下。加载条只是视觉提示：对读屏是 role=\"progressbar\"\n * 加 aria-busy，真正的“加载中”应当由页面内容区域（aria-busy、骨架）告诉读屏。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowReactive } from 'vue';\nimport { useLang } from '../config/context';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 加载条的状态 */\nexport interface LoadingBarState {\n  /** 进度，0–100 */\n  readonly progress: number;\n  /** 是否显示（开始一会儿之后、结束淡出之前） */\n  readonly visible: boolean;\n  /** 出错了：危险色 */\n  readonly failed: boolean;\n}\n\n/** 加载条的控制器 */\nexport interface LoadingBarController extends LoadingBarState {\n  /** 开始（已经在走时重新开始计时） */\n  start(): void;\n  /** 完成：走满后淡出 */\n  finish(): void;\n  /** 出错：变成危险色、走满后淡出 */\n  error(): void;\n}\n\n/** createLoadingBar 的选项 */\nexport interface LoadingBarOptions {\n  /** 多久之后才显示（毫秒），默认 200：很快完成的不显示 */\n  delay?: number;\n}\n\n/** 每次涨多少：离 90% 越近涨得越慢 */\nconst trickle = (progress: number) => (90 - progress) * 0.12 + 0.5;\n\n/** 创建加载条的控制器 */\nexport function createLoadingBar({ delay = 200 }: LoadingBarOptions = {}): LoadingBarController {\n  const state = shallowReactive({ progress: 0, visible: false, failed: false });\n  let timer: ReturnType<typeof setInterval> | undefined;\n  let showTimer: ReturnType<typeof setTimeout> | undefined;\n  let hideTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stop() {\n    clearInterval(timer);\n    clearTimeout(showTimer);\n    clearTimeout(hideTimer);\n  }\n\n  function end(failed: boolean) {\n    stop();\n    if (!state.visible) {\n      state.progress = 0;\n      return;\n    }\n    state.failed = failed;\n    state.progress = 100;\n    // 走满的过渡结束后淡出，淡出后归零\n    hideTimer = setTimeout(() => {\n      state.visible = false;\n      hideTimer = setTimeout(() => (state.progress = 0), 300);\n    }, 300);\n  }\n\n  return {\n    get progress() {\n      return state.progress;\n    },\n    get visible() {\n      return state.visible;\n    },\n    get failed() {\n      return state.failed;\n    },\n    start() {\n      stop();\n      state.failed = false;\n      state.progress = state.visible ? state.progress : 0;\n      showTimer = setTimeout(() => {\n        state.visible = true;\n        state.progress = Math.max(state.progress, 8);\n      }, delay);\n      timer = setInterval(() => {\n        if (state.visible) state.progress = Math.min(state.progress + trickle(state.progress), 90);\n      }, 300);\n    },\n    finish: () => end(false),\n    error: () => end(true),\n  };\n}\n\n/** 未声明的属性落到加载条的 div 上 */\nexport interface LoadingBarProps extends PartProps<'div', 'role'> {\n  /** createLoadingBar 的控制器 */\n  controller: LoadingBarController;\n}\n\n/** LoadingBar 的样式：root、visible、bar、failed */\nexport const loadingBarStyles = css.create({\n  root: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockStart: 0,\n    zIndex: 2000,\n    height: '_borderWidths.md',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n  },\n  visible: { opacity: 1 },\n  bar: {\n    height: '100%',\n    backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n    boxShadow: `0 0 8px ${t.colors.accent}`,\n    transformOrigin: { default: 'left center', ':dir(rtl)': 'right center' },\n    transition: `transform ${t.durations.md} ${t.easings.standard}`,\n  },\n  failed: { backgroundColor: '_danger', boxShadow: 'none' },\n});\n\n/** 进度对应的缩放 */\nexport const loadingBarScaleStyles = css.create({\n  at: (progress: number) => ({ transform: `scaleX(${progress / 100})` }),\n});\n\n/** 加载条：显示控制器的进度 */\nexport const LoadingBar = _component(({ controller, ...rest }: LoadingBarProps) => {\n  const lang = useLang();\n  return () => (\n    <div\n      {...mergeAttrs<'div'>(\n        {\n          sx: [loadingBarStyles.root, controller.visible && loadingBarStyles.visible],\n          'aria-label': lang.loading,\n        },\n        rest,\n        {\n          role: 'progressbar',\n          'aria-valuemin': 0,\n          'aria-valuemax': 100,\n          'aria-valuenow': Math.round(controller.progress),\n          'aria-busy': controller.visible && controller.progress < 100,\n          'aria-hidden': controller.visible ? undefined : true,\n        },\n      )}\n      data-state={controller.failed ? 'error' : controller.visible ? 'loading' : 'idle'}\n    >\n      <div\n        {...css.attrs(\n          loadingBarStyles.bar,\n          controller.failed && loadingBarStyles.failed,\n          loadingBarScaleStyles.at(controller.progress),\n        )}\n      />\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/feedback/LoadingOverlay.d.ts

@@ -0,0 +1,29 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type SpinnerProps } from '../base/Spinner';
+import { type PartProps } from '../utils/props';
+/** 忙碌由组件按 loading 管理 */
+export type LoadingOverlayManaged = 'aria-busy';
+/** 未声明的属性落到外层 div 上 */
+export interface LoadingOverlayProps extends PartProps<'div', LoadingOverlayManaged> {
+    /** 加载中：盖上遮罩 */
+    loading?: boolean;
+    /** 读屏念的说明，默认取语言包（加载中） */
+    label?: string;
+    /** 遮罩下的内容模糊 */
+    blur?: boolean;
+    /** 遮罩的部件属性 */
+    propsOverlay?: PartProps<'div'>;
+    /** 加载指示的部件属性 */
+    propsSpinner?: Partial<SpinnerProps>;
+    children?: VNodeChild;
+}
+/** LoadingOverlay 的样式：root、overlay、blur、spinner */
+export declare const loadingOverlayStyles: Readonly<{
+    blur: css.CompiledStyles;
+    overlay: css.CompiledStyles;
+    root: css.CompiledStyles;
+    spinner: css.CompiledStyles;
+}>;
+/** 加载遮罩：盖住内容，显示加载指示 */
+export declare const LoadingOverlay: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LoadingOverlayProps>;

package/dist/feedback/LoadingOverlay.js

@@ -0,0 +1,70 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { Spinner } from "../base/Spinner.js";
+import { presenceStyles } from "../utils/style/transitions.js";
+import { usePresence } from "../utils/motion/presence.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/LoadingOverlay.tsx
+/** 忙碌由组件按 loading 管理 */
+/** 未声明的属性落到外层 div 上 */
+/** LoadingOverlay 的样式：root、overlay、blur、spinner */
+var loadingOverlayStyles = css.create({
+	root: { position: "relative" },
+	overlay: {
+		position: "absolute",
+		inset: 0,
+		zIndex: 1,
+		display: "grid",
+		placeItems: "center",
+		borderRadius: "inherit",
+		backgroundColor: `color-mix(in srgb, ${t.colors.surface} 70%, transparent)`,
+		opacity: {
+			default: 1,
+			"@starting-style": 0
+		},
+		transition: `opacity ${t.durations.md} ${t.easings.enter}`
+	},
+	blur: { backdropFilter: "blur(2px)" },
+	spinner: {
+		fontSize: "_xl",
+		color: "_accent"
+	}
+});
+/** 加载遮罩：盖住内容，显示加载指示 */
+var LoadingOverlay = /*#__PURE__*/ _component((_props, _ctx) => {
+	const loading = readonlyProp(_props, "loading", false);
+	const label = readonlyProp(_props, "label");
+	const blur = readonlyProp(_props, "blur", false);
+	const propsOverlay = readonlyProp(_props, "propsOverlay");
+	const propsSpinner = readonlyProp(_props, "propsSpinner");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const shown = useDelayedLoading(() => loading.value);
+	const presence = usePresence(() => shown.value);
+	return () => createVNode("div", mergeAttrs({ sx: loadingOverlayStyles.root }, rest, { "aria-busy": loading.value || void 0 }), [children.value, presence.mounted && createVNode("div", mergeProps(mergeAttrs({ sx: [
+		loadingOverlayStyles.overlay,
+		blur.value && loadingOverlayStyles.blur,
+		presence.state === "closed" && presenceStyles.leaving
+	] }, propsOverlay.value, { ref: presence.ref }), { "data-state": presence.state }), [createVNode(Spinner, mergePartProps({
+		sx: loadingOverlayStyles.spinner,
+		label: label.value ?? lang.loading
+	}, propsSpinner.value), null)])]);
+}, {
+	name: "LoadingOverlay",
+	props: [
+		"loading",
+		"label",
+		"blur",
+		"propsOverlay",
+		"propsSpinner"
+	]
+});
+//#endregion
+export { LoadingOverlay, loadingOverlayStyles };
+
+//# sourceMappingURL=LoadingOverlay.js.map

package/dist/feedback/LoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/LoadingOverlay.tsx"],"sourcesContent":["/**\n * 加载遮罩（div）：盖住一块区域（卡片、表单、图表），内容保留在下面，中间显示加载指示。\n *\n *   <LoadingOverlay loading={saving}>\n *     <Form controller={form}>…</Form>\n *   </LoadingOverlay>\n *\n * 外层带 aria-busy；遮罩防闪烁（useDelayedLoading：很快完成时不出现，出现后至少显示一会儿），淡入淡出（usePresence）。\n * 遮罩挡住指针操作；键盘仍可操作下面的内容，需要禁止时由内容自己处理（如表单的 disabled）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useLang } from '../config/context';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePresence } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type LoadingOverlayManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface LoadingOverlayProps extends PartProps<'div', LoadingOverlayManaged> {\n  /** 加载中：盖上遮罩 */\n  loading?: boolean;\n  /** 读屏念的说明，默认取语言包（加载中） */\n  label?: string;\n  /** 遮罩下的内容模糊 */\n  blur?: boolean;\n  /** 遮罩的部件属性 */\n  propsOverlay?: PartProps<'div'>;\n  /** 加载指示的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  children?: VNodeChild;\n}\n\n/** LoadingOverlay 的样式：root、overlay、blur、spinner */\nexport const loadingOverlayStyles = css.create({\n  // 遮罩按外层定位\n  root: { position: 'relative' },\n  overlay: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 1,\n    display: 'grid',\n    placeItems: 'center',\n    borderRadius: 'inherit',\n    backgroundColor: `color-mix(in srgb, ${t.colors.surface} 70%, transparent)`,\n    opacity: { default: 1, '@starting-style': 0 },\n    transition: `opacity ${t.durations.md} ${t.easings.enter}`,\n  },\n  blur: { backdropFilter: 'blur(2px)' },\n  spinner: { fontSize: '_xl', color: '_accent' },\n});\n\n/** 加载遮罩：盖住内容，显示加载指示 */\nexport const LoadingOverlay = _component(\n  ({\n    loading = false,\n    label,\n    blur = false,\n    propsOverlay,\n    propsSpinner,\n    children,\n    ...rest\n  }: LoadingOverlayProps) => {\n    const lang = useLang();\n    const shown = useDelayedLoading(() => loading);\n    const presence = usePresence(() => shown.value);\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: loadingOverlayStyles.root }, rest, {\n          'aria-busy': loading || undefined,\n        })}\n      >\n        {children}\n        {presence.mounted && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  loadingOverlayStyles.overlay,\n                  blur && loadingOverlayStyles.blur,\n                  presence.state === 'closed' && presenceStyles.leaving,\n                ],\n              },\n              propsOverlay,\n              { ref: presence.ref },\n            )}\n            data-state={presence.state}\n          >\n            <Spinner\n              {...mergePartProps<SpinnerProps>(\n                { sx: loadingOverlayStyles.spinner, label: label ?? lang.loading },\n                propsSpinner,\n              )}\n            />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,MAAM,EAAE,UAAU,WAAW;CAC7B,SAAS;EACP,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,cAAc;EACd,iBAAiB,sBAAsB,EAAE,OAAO,QAAO;EACvD,SAAS;GAAE,SAAS;GAAG,mBAAmB;EAAE;EAC5C,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;CACA,MAAM,EAAE,gBAAgB,YAAY;CACpC,SAAS;EAAE,UAAU;EAAO,OAAO;CAAU;AAC/C,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAQ2B;CAAA,MAAA,UAAAA,aAAA,QAAA,WAPf,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAER,KAAK;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIT,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,wBAAkB,QAAA,KAAa;CAC7C,MAAM,WAAW,kBAAkB,MAAM,KAAK;CAE9C,aAAOC,YAAA,OAEC,WAAkB,EAAE,IAAI,qBAAqB,KAAK,GAAG,MAAM,EAC7D,aAAa,QAAA,SAAW,KAAA,EAC1B,CAAC,GAAC,CAAA,SAAA,OAGD,SAAS,WAAOA,YAAA,OAAAC,WAET,WACF,EACE,IAAI;EACF,qBAAqB;EACrB,KAAA,SAAQ,qBAAqB;EAC7B,SAAS,UAAU,YAAY,eAAe;CAAO,EAEzD,GAAC,aAAA,OAED,EAAE,KAAK,SAAS,IAAI,CACtB,GAAC,EAAA,cACW,SAAS,MAAK,CAAA,GAAA,CAAAD,YAAA,SAGpB,eACF;EAAE,IAAI,qBAAqB;EAAS,OAAO,MAAA,SAAS,KAAK;CAAQ,GAAC,aAAA,KAEpE,GAAC,IAAA,CAAA,CAAA,CAGN,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}