@xihan-ui/vue 1.0.0-alpha.2 → 1.0.0

package/dist/runtime/use-scrollbars.js

@@ -0,0 +1,66 @@
+import { vueNormalize } from "./normalize-props.js";
+import { useMachine } from "./use-machine.js";
+import { createVueIdGenerator } from "./vue-id.js";
+import { computed, h, ref, toValue } from "vue";
+import { SCROLLBAR_DEFAULT_TYPE, connectScrollbar, isOverflowing, scrollbarMachine } from "@xihan-ui/headless";
+import { createScope } from "@xihan-ui/kernel";
+//#region src/runtime/use-scrollbars.ts
+const DEFAULT_AXES = ["vertical"];
+function useScrollbars(options) {
+	const axes = options.axes ?? DEFAULT_AXES;
+	const scope = createScope(null, createVueIdGenerator());
+	const bars = [];
+	/**
+	* 这条轴的条子此刻常驻在场。判据不走 api：api 里就要读 gutter，读回来会绕成环，
+	* 所以直接读作者给的那份 props 与机器量到的尺寸。
+	*/
+	const standing = (bar) => {
+		const given = toValue(options.props);
+		const native = bar.service.context.get("coarse") && !given?.forceVisible;
+		const type = given?.type ?? SCROLLBAR_DEFAULT_TYPE;
+		return !native && (type === "always" || isOverflowing(bar.service.context.get("metrics")));
+	};
+	/** 两条轴都在场：各自在末端让出交叉口那一格，只有一条时不让，免得滑块行程平白短一截。 */
+	const both = () => axes.length > 1 && bars.length === axes.length && bars.every(standing);
+	for (const axis of axes) {
+		const rootRef = ref(null);
+		const trackRef = ref(null);
+		const service = useMachine(scrollbarMachine, () => ({
+			...toValue(options.props),
+			orientation: axis,
+			gutter: both()
+		}), scope);
+		service.refs.set("getScrollableEl", options.scrollable);
+		service.refs.set("getTrackEl", () => trackRef.value);
+		service.refs.set("getRootEl", () => rootRef.value);
+		bars.push({
+			axis,
+			service,
+			api: computed(() => connectScrollbar(service, vueNormalize)),
+			rootRef,
+			trackRef
+		});
+	}
+	/** 交叉口补丁只写在竖条里；只有一条轴在场时右下角没有缺口要补，收起来免得平白盖住一块内容。 */
+	const corner = (bar) => axes.length > 1 && bar.axis === "vertical" ? [h("div", {
+		...bar.api.value.getCornerProps(),
+		hidden: both() ? void 0 : true
+	})] : [];
+	return {
+		render: () => bars.map((bar) => h("div", {
+			...bar.api.value.getRootProps(),
+			key: `xh-scrollbar-${bar.axis}`,
+			ref: bar.rootRef
+		}, [h("div", {
+			...bar.api.value.getTrackProps(),
+			ref: bar.trackRef
+		}, [h("div", bar.api.value.getThumbProps())]), ...corner(bar)])),
+		measure: () => {
+			for (const bar of bars) bar.api.value.measure();
+		}
+	};
+}
+//#endregion
+export { useScrollbars };
+
+//# sourceMappingURL=use-scrollbars.js.map

package/dist/runtime/use-scrollbars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scrollbars.js","names":[],"sources":["../../src/runtime/use-scrollbars.ts"],"sourcesContent":["import type { ScrollbarApi, ScrollbarSchema } from '@xihan-ui/headless'\nimport type { Orientation } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, MaybeRefOrGetter, Ref, VNode } from 'vue'\nimport { connectScrollbar, isOverflowing, SCROLLBAR_DEFAULT_TYPE, scrollbarMachine } from '@xihan-ui/headless'\nimport { createScope } from '@xihan-ui/kernel'\nimport { computed, h, ref, toValue } from 'vue'\nimport { vueNormalize } from './normalize-props'\nimport { useMachine } from './use-machine'\nimport { createVueIdGenerator } from './vue-id'\n\n// 给已有滚动层配一套自绘滚动条。\n//\n// 条子是滚动层的兄弟，挂在组件既有的壳上（浮层族是 positioner，其余是 root）：\n// 壳是定位盒，条子绝对定位贴它的内边距盒，不占布局、不进滚动层内部、不搬去别处。\n// 宿主只交「谁在滚」与「摆哪几条轴」，节点形状与机器接线都在这里，宿主那侧只有一行 render。\n\n/** 交给条子的 props。轴由 axes 决定、让位按实测溢出算，两者都不从外面收。 */\nexport type ScrollbarsProps = Omit<ScrollbarSchema['props'], 'orientation' | 'gutter'>\n\nexport interface ScrollbarsOptions {\n  /**\n   * 真正在滚的那层。收 getter 而不是节点：ref 挂载后才有值，\n   * 多档互斥的宿主（同一个位置有两个可能的滚动层）在这里交此刻活着的那个。\n   */\n  scrollable: () => HTMLElement | null\n  /** 摆哪几条轴，默认只摆竖的。 */\n  axes?: readonly Orientation[]\n  /** 露面时机、尺寸档、方向这些，逐帧现读。 */\n  props?: MaybeRefOrGetter<ScrollbarsProps>\n}\n\nexport interface ScrollbarsHandle {\n  /** 条子的节点，宿主把它拼进壳的子节点末尾。 */\n  render: () => VNode[]\n  /** 重量一遍两条轴的尺寸。 */\n  measure: () => void\n}\n\ninterface Bar {\n  axis: Orientation\n  service: Service<ScrollbarSchema>\n  api: ComputedRef<ScrollbarApi>\n  rootRef: Ref<HTMLElement | null>\n  trackRef: Ref<HTMLElement | null>\n}\n\nconst DEFAULT_AXES: readonly Orientation[] = ['vertical']\n\nexport function useScrollbars(options: ScrollbarsOptions): ScrollbarsHandle {\n  const axes = options.axes ?? DEFAULT_AXES\n  const scope = createScope(null, createVueIdGenerator())\n  const bars: Bar[] = []\n\n  /**\n   * 这条轴的条子此刻常驻在场。判据不走 api：api 里就要读 gutter，读回来会绕成环，\n   * 所以直接读作者给的那份 props 与机器量到的尺寸。\n   */\n  const standing = (bar: Bar): boolean => {\n    const given = toValue(options.props)\n    const native = bar.service.context.get('coarse') && !given?.forceVisible\n    const type = given?.type ?? SCROLLBAR_DEFAULT_TYPE\n    return !native && (type === 'always' || isOverflowing(bar.service.context.get('metrics')))\n  }\n\n  /** 两条轴都在场：各自在末端让出交叉口那一格，只有一条时不让，免得滑块行程平白短一截。 */\n  const both = (): boolean => axes.length > 1 && bars.length === axes.length && bars.every(standing)\n\n  for (const axis of axes) {\n    const rootRef = ref<HTMLElement | null>(null)\n    const trackRef = ref<HTMLElement | null>(null)\n    // 每次取值现读 props：挂载后改 type / size 机器要跟着变\n    const service = useMachine(scrollbarMachine, () => ({\n      ...toValue(options.props),\n      orientation: axis,\n      gutter: both(),\n    }), scope)\n    // 传 getter 而非节点，ref 在挂载后才有值；量尺寸与挂监听都在机器的效应里进行\n    service.refs.set('getScrollableEl', options.scrollable)\n    service.refs.set('getTrackEl', () => trackRef.value)\n    service.refs.set('getRootEl', () => rootRef.value)\n    bars.push({\n      axis,\n      service,\n      api: computed(() => connectScrollbar(service, vueNormalize)),\n      rootRef,\n      trackRef,\n    })\n  }\n\n  /** 交叉口补丁只写在竖条里；只有一条轴在场时右下角没有缺口要补，收起来免得平白盖住一块内容。 */\n  const corner = (bar: Bar): VNode[] =>\n    axes.length > 1 && bar.axis === 'vertical'\n      ? [h('div', {\n          ...bar.api.value.getCornerProps() as Record<string, unknown>,\n          hidden: both() ? undefined : true,\n        })]\n      : []\n\n  return {\n    render: () => bars.map(bar => h('div', {\n      ...bar.api.value.getRootProps() as Record<string, unknown>,\n      key: `xh-scrollbar-${bar.axis}`,\n      ref: bar.rootRef,\n    }, [\n      h('div', {\n        ...bar.api.value.getTrackProps() as Record<string, unknown>,\n        ref: bar.trackRef,\n      }, [h('div', bar.api.value.getThumbProps() as Record<string, unknown>)]),\n      ...corner(bar),\n    ])),\n    measure: () => {\n      for (const bar of bars) bar.api.value.measure()\n    },\n  }\n}\n"],"mappings":";;;;;;;AA+CA,MAAM,eAAuC,CAAC,UAAU;AAExD,SAAgB,cAAc,SAA8C;CAC1E,MAAM,OAAO,QAAQ,QAAQ;CAC7B,MAAM,QAAQ,YAAY,MAAM,qBAAqB,CAAC;CACtD,MAAM,OAAc,CAAC;;;;;CAMrB,MAAM,YAAY,QAAsB;EACtC,MAAM,QAAQ,QAAQ,QAAQ,KAAK;EACnC,MAAM,SAAS,IAAI,QAAQ,QAAQ,IAAI,QAAQ,KAAK,CAAC,OAAO;EAC5D,MAAM,OAAO,OAAO,QAAQ;EAC5B,OAAO,CAAC,WAAW,SAAS,YAAY,cAAc,IAAI,QAAQ,QAAQ,IAAI,SAAS,CAAC;CAC1F;;CAGA,MAAM,aAAsB,KAAK,SAAS,KAAK,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,QAAQ;CAEjG,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,UAAU,IAAwB,IAAI;EAC5C,MAAM,WAAW,IAAwB,IAAI;EAE7C,MAAM,UAAU,WAAW,yBAAyB;GAClD,GAAG,QAAQ,QAAQ,KAAK;GACxB,aAAa;GACb,QAAQ,KAAK;EACf,IAAI,KAAK;EAET,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,UAAU;EACtD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;EACnD,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;EACjD,KAAK,KAAK;GACR;GACA;GACA,KAAK,eAAe,iBAAiB,SAAS,YAAY,CAAC;GAC3D;GACA;EACF,CAAC;CACH;;CAGA,MAAM,UAAU,QACd,KAAK,SAAS,KAAK,IAAI,SAAS,aAC5B,CAAC,EAAE,OAAO;EACR,GAAG,IAAI,IAAI,MAAM,eAAe;EAChC,QAAQ,KAAK,IAAI,KAAA,IAAY;CAC/B,CAAC,CAAC,IACF,CAAC;CAEP,OAAO;EACL,cAAc,KAAK,KAAI,QAAO,EAAE,OAAO;GACrC,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,KAAK,gBAAgB,IAAI;GACzB,KAAK,IAAI;EACX,GAAG,CACD,EAAE,OAAO;GACP,GAAG,IAAI,IAAI,MAAM,cAAc;GAC/B,KAAK,IAAI;EACX,GAAG,CAAC,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,CAA4B,CAAC,CAAC,GACvE,GAAG,OAAO,GAAG,CACf,CAAC,CAAC;EACF,eAAe;GACb,KAAK,MAAM,OAAO,MAAM,IAAI,IAAI,MAAM,QAAQ;EAChD;CACF;AACF"}

package/dist/services/dialog-service.d.ts

@@ -1,20 +1,51 @@
+import { XhConfig } from "../config/config.js";
+import { MaybeRefOrGetter, VNodeChild } from "vue";
 import { Tone } from "@xihan-ui/kernel";
 //#region src/services/dialog-service.d.ts
+/**
+ * 对话框正文。给串走 description 部件（读屏的 aria-describedby 由它接）；
+ * 给渲染函数则整块摊在正文位，自己决定渲染什么。
+ *
+ * 不收裸 VNode：服务的宿主是常驻的，忙态一翻就整棵重渲，
+ * 同一个 VNode 实例被复用时的行为未定义。
+ */
+type DialogBody = string | (() => VNodeChild);
 interface ConfirmOptions {
   title: string;
-  content?: string;
+  content?: DialogBody;
   /** 确认钮语气，默认 brand；危险操作传 danger。 */
   tone?: Tone;
-  okText?: string;
-  cancelText?: string;
+  /** 标题旁的类型徽记。不给则不出徽记。 */
+  badge?: 'info' | 'success' | 'warning' | 'error';
+  okText?: MaybeRefOrGetter<string>;
+  cancelText?: MaybeRefOrGetter<string>;
   /** Promise 拒绝时对话框保持打开。 */
   onOk?: () => void | Promise<unknown>;
 }
-/** 单按钮告知框的入参：没有取消钮，其余同 confirm。 */
-type AlertOptions = Omit<ConfirmOptions, 'tone'>;
+/** 单按钮告知框的入参：没有取消钮，徽记由预设档自己定，其余同 confirm。 */
+type AlertOptions = Omit<ConfirmOptions, 'tone' | 'badge'>;
+/** 取值型弹窗的入参。正文自己拼表单，确认时把那份值带回来。 */
+interface PromptOptions<T extends object> extends Omit<ConfirmOptions, 'onOk' | 'content'> {
+  /** 每次打开建一份初值；服务用 reactive 包起来交给 body 与 onOk，两边同一份。 */
+  initialValue: T;
+  /** 用那份可写代理渲染表单主体。 */
+  body: (value: T) => VNodeChild;
+  /** 落焦到哪个节点，CSS 选择器。 */
+  initialFocus?: string;
+  /** 返回 false（或拒绝）表示校验没过，弹窗保持打开。 */
+  onOk?: (value: T) => boolean | void | Promise<boolean | void>;
+}
 interface DialogServiceOptions {
-  okText?: string;
-  cancelText?: string;
+  /** 确认钮文案，缺省 OK。 */
+  okText?: MaybeRefOrGetter<string>;
+  /** 取消钮文案，缺省 Cancel。 */
+  cancelText?: MaybeRefOrGetter<string>;
+  /**
+   * 喂给对话框子树的全局配置（locale / translations / size / portalContainer）。
+   * 本服务自带宿主应用，接不到组件树里的 provideXhConfig，要让它跟应用同语言就从这里给；
+   * 传 ref/getter 即可运行期跟着切语言，也可以之后用 setConfig 推。
+   */
+  config?: MaybeRefOrGetter<XhConfig>;
   /** 宿主容器；不给就在 body 下新建一个。 */
   target?: HTMLElement;
 }
@@ -25,10 +56,14 @@ interface DialogService {
   success: (options: AlertOptions) => Promise<void>;
   warning: (options: AlertOptions) => Promise<void>;
   error: (options: AlertOptions) => Promise<void>;
+  /** 确认后 resolve 一份值的普通对象快照；取消 / Esc / 卸载 resolve null。 */
+  prompt: <T extends object>(options: PromptOptions<T>) => Promise<T | null>;
+  /** 换一份全局配置源。 */
+  setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void;
   /** 卸载宿主应用并移除容器。 */
   dispose: () => void;
 }
 declare function createDialogService(options?: DialogServiceOptions): DialogService;
 //#endregion
-export { AlertOptions, ConfirmOptions, DialogService, DialogServiceOptions, createDialogService };
+export { AlertOptions, ConfirmOptions, DialogBody, DialogService, DialogServiceOptions, PromptOptions, createDialogService };
 //# sourceMappingURL=dialog-service.d.ts.map

package/dist/services/dialog-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-service.d.ts","names":[],"sources":["../../src/services/dialog-service.ts"],"mappings":";;UAWiB;EACf;EACA;;EAEA,OAAO;EACP;EACA;;EAEA,oBAAoB;;;KAIV,eAAe,KAAK;UAEf;EACf;EACA;;EAEA,SAAS;;UAGM;;EAEf,UAAU,SAAS,mBAAmB;EACtC,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,iBAAiB;EACpC,UAAU,SAAS,iBAAiB;EACpC,QAAQ,SAAS,iBAAiB;;EAElC;;iBAoBc,oBAAoB,UAAS,uBAA4B"}
+{"version":3,"file":"dialog-service.d.ts","names":[],"sources":["../../src/services/dialog-service.ts"],"mappings":";;;;;;;;;;;KAsBY,6BAA6B;UAExB;EACf;EACA,UAAU;;EAEV,OAAO;;EAEP;EACA,SAAS;EACT,aAAa;;EAEb,oBAAoB;;;KAIV,eAAe,KAAK;;UAGf,cAAc,0BAA0B,KAAK;;EAE5D,cAAc;;EAEd,OAAO,OAAO,MAAM;;EAEpB;;EAEA,QAAQ,OAAO,uBAAuB;;UAGvB;;EAEf,SAAS;;EAET,aAAa;;;;;;EAMb,SAAS,iBAAiB;;EAE1B,SAAS;;UAGM;;EAEf,UAAU,SAAS,mBAAmB;EACtC,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,iBAAiB;EACpC,UAAU,SAAS,iBAAiB;EACpC,QAAQ,SAAS,iBAAiB;;EAElC,SAAS,kBAAkB,SAAS,cAAc,OAAO,QAAQ;;EAEjE,YAAY,MAAM,iBAAiB;;EAEnC;;iBAyBc,oBAAoB,UAAS,uBAA4B"}

package/dist/services/dialog-service.js

@@ -1,20 +1,24 @@
 import { XhButton, XhButtonIndicator, XhButtonLabel } from "../components/button.js";
 import { XhDialogContent, XhDialogDescription, XhDialogRoot, XhDialogTitle } from "../components/dialog/dialog.js";
 import { spinArc, typeBadge } from "./glyph.js";
-import { createApp, defineComponent, h, reactive } from "vue";
+import { mountServiceHost } from "./mount-host.js";
+import { createServiceConfig } from "./service-config.js";
+import { createApp, defineComponent, h, reactive, shallowRef, toRaw, toValue } from "vue";
+import { ensurePortalRoot } from "@xihan-ui/kernel";
 //#region src/services/dialog-service.ts
 /** 关到再开之间留出退场窗口，动效走完再放下一个。 */
 const EXIT_WINDOW_MS = 250;
 function createDialogService(options = {}) {
 	if (typeof document === "undefined") throw new Error("createDialogService 需要 document；SSR 里请等到客户端再创建");
 	const defaults = {
-		okText: options.okText ?? "确定",
-		cancelText: options.cancelText ?? "取消"
+		okText: options.okText ?? "OK",
+		cancelText: options.cancelText ?? "Cancel"
 	};
+	const configSource = createServiceConfig(options.config);
 	const holder = options.target ?? document.createElement("div");
-	if (!options.target) document.body.appendChild(holder);
+	if (!options.target) ensurePortalRoot(document).appendChild(holder);
+	const current = shallowRef(null);
 	const state = reactive({
-		current: null,
 		open: false,
 		busy: false
 	});
@@ -22,13 +26,13 @@ function createDialogService(options = {}) {
 	let disposed = false;
 	let advanceTimer = null;
 	function next() {
-		if (disposed || state.current || queue.length === 0) return;
-		state.current = queue.shift();
+		if (disposed || current.value || queue.length === 0) return;
+		current.value = queue.shift();
 		state.busy = false;
 		state.open = true;
 	}
 	function settle(ok) {
-		const spec = state.current;
+		const spec = current.value;
 		if (!spec || spec.settled) return;
 		spec.settled = true;
 		spec.resolve(ok);
@@ -38,7 +42,7 @@ function createDialogService(options = {}) {
 		if (advanceTimer) return;
 		advanceTimer = setTimeout(() => {
 			advanceTimer = null;
-			state.current = null;
+			current.value = null;
 			state.busy = false;
 			next();
 		}, EXIT_WINDOW_MS);
@@ -55,12 +59,15 @@ function createDialogService(options = {}) {
 		scheduleAdvance();
 	}
 	async function ok() {
-		const spec = state.current;
+		const spec = current.value;
 		if (!spec || state.busy) return;
 		if (spec.onOk) {
 			state.busy = true;
 			try {
-				await spec.onOk();
+				if (await spec.onOk() === false) {
+					state.busy = false;
+					return;
+				}
 			} catch (err) {
 				state.busy = false;
 				console.error("[xh] confirm onOk 失败，对话框保持打开", err);
@@ -84,39 +91,42 @@ function createDialogService(options = {}) {
 	const Host = defineComponent({
 		name: "XhDialogServiceHost",
 		setup() {
+			configSource.provide();
 			return () => {
-				const spec = state.current;
+				const spec = current.value;
 				return h(XhDialogRoot, {
 					"open": state.open,
 					"onUpdate:open": onOpenChange,
 					"modal": true,
 					"role": "alertdialog",
 					"closeOnEscape": !state.busy,
-					"closeOnInteractOutside": false
+					"closeOnInteractOutside": false,
+					"initialFocus": spec?.initialFocus
 				}, () => spec ? h(XhDialogContent, null, () => [
 					h("div", {
 						"style": {
 							display: "flex",
 							alignItems: "center",
-							gap: "var(--xh-space-2)"
+							gap: "var(--xh-control-gap-md)"
 						},
 						"data-tone": spec.badge ? toneOfBadge(spec.badge) : void 0
 					}, [spec.badge ? typeBadge(spec.badge) : null, h(XhDialogTitle, () => spec.title)]),
-					spec.content ? h(XhDialogDescription, () => spec.content) : null,
+					typeof spec.content === "string" ? h(XhDialogDescription, () => spec.content) : typeof spec.content === "function" ? spec.content() : null,
+					spec.body && spec.value ? spec.body(spec.value) : null,
 					h("div", { style: {
 						display: "flex",
 						justifyContent: "flex-end",
-						gap: "var(--xh-space-2)"
+						gap: "var(--xh-control-gap-md)"
 					} }, [spec.showCancel ? h(XhButton, {
 						variant: "ghost",
 						disabled: state.busy,
 						onClick: () => close(false)
-					}, () => spec.cancelText) : null, h(XhButton, {
+					}, () => toValue(spec.cancelText)) : null, h(XhButton, {
 						variant: "solid",
 						tone: spec.tone,
 						loading: state.busy,
 						onClick: ok
-					}, () => [state.busy ? h(XhButtonIndicator, () => spinArc()) : null, h(XhButtonLabel, () => state.busy ? `${spec.okText}…` : spec.okText)])])
+					}, () => [state.busy ? h(XhButtonIndicator, () => spinArc()) : null, h(XhButtonLabel, () => state.busy ? `${toValue(spec.okText)}…` : toValue(spec.okText))])])
 				]) : null);
 			};
 		}
@@ -125,7 +135,7 @@ function createDialogService(options = {}) {
 		return badge === "error" ? "danger" : badge;
 	}
 	const app = createApp(Host);
-	app.mount(holder);
+	const mounted = mountServiceHost(app, holder, "dialog");
 	const alert = (badge, tone) => async (opts) => {
 		await request({
 			title: opts.title,
@@ -146,12 +156,29 @@ function createDialogService(options = {}) {
 			okText: opts.okText ?? defaults.okText,
 			cancelText: opts.cancelText ?? defaults.cancelText,
 			showCancel: true,
+			badge: opts.badge,
 			onOk: opts.onOk
 		}),
+		prompt: (opts) => {
+			const value = reactive({ ...opts.initialValue });
+			return request({
+				title: opts.title,
+				tone: opts.tone ?? "brand",
+				okText: opts.okText ?? defaults.okText,
+				cancelText: opts.cancelText ?? defaults.cancelText,
+				showCancel: true,
+				badge: opts.badge,
+				initialFocus: opts.initialFocus,
+				body: (v) => opts.body(v),
+				value,
+				onOk: opts.onOk ? () => opts.onOk(value) : void 0
+			}).then((ok) => ok ? { ...toRaw(value) } : null);
+		},
 		info: alert("info", "info"),
 		success: alert("success", "success"),
 		warning: alert("warning", "warning"),
 		error: alert("error", "danger"),
+		setConfig: (next) => configSource.set(next),
 		dispose: () => {
 			disposed = true;
 			if (advanceTimer) {
@@ -160,7 +187,7 @@ function createDialogService(options = {}) {
 			}
 			settle(false);
 			for (const spec of queue.splice(0)) spec.resolve(false);
-			app.unmount();
+			if (mounted) app.unmount();
 			if (!options.target) holder.remove();
 		}
 	};

package/dist/services/dialog-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-service.js","names":[],"sources":["../../src/services/dialog-service.ts"],"sourcesContent":["// 全局命令式确认框服务：confirm/info/success/warning/error 一次调用弹出，\n// 自带标题徽记、正文与按钮行。同一时刻只挂一个对话框，后来的排队顺次弹出，\n// 避开多层模态叠加。onOk 返回 Promise 时确认钮自动进入 pending 并拦住关闭，\n// 失败保持打开以便重试或取消。\nimport type { Tone } from '@xihan-ui/kernel'\nimport type { App } from 'vue'\nimport { createApp, defineComponent, h, reactive } from 'vue'\nimport { XhButton, XhButtonIndicator, XhButtonLabel } from '../components/button'\nimport { XhDialogContent, XhDialogDescription, XhDialogRoot, XhDialogTitle } from '../components/dialog/dialog'\nimport { spinArc, typeBadge } from './glyph'\n\nexport interface ConfirmOptions {\n  title: string\n  content?: string\n  /** 确认钮语气，默认 brand；危险操作传 danger。 */\n  tone?: Tone\n  okText?: string\n  cancelText?: string\n  /** Promise 拒绝时对话框保持打开。 */\n  onOk?: () => void | Promise<unknown>\n}\n\n/** 单按钮告知框的入参：没有取消钮，其余同 confirm。 */\nexport type AlertOptions = Omit<ConfirmOptions, 'tone'>\n\nexport interface DialogServiceOptions {\n  okText?: string\n  cancelText?: string\n  /** 宿主容器；不给就在 body 下新建一个。 */\n  target?: HTMLElement\n}\n\nexport interface DialogService {\n  /** 确认走 onOk 后 resolve true；取消/Esc resolve false。 */\n  confirm: (options: ConfirmOptions) => Promise<boolean>\n  info: (options: AlertOptions) => Promise<void>\n  success: (options: AlertOptions) => Promise<void>\n  warning: (options: AlertOptions) => Promise<void>\n  error: (options: AlertOptions) => Promise<void>\n  /** 卸载宿主应用并移除容器。 */\n  dispose: () => void\n}\n\ninterface Spec {\n  title: string\n  content?: string\n  tone: Tone\n  okText: string\n  cancelText: string\n  showCancel: boolean\n  /** 标题旁的类型徽记（预设档用），confirm 不带。 */\n  badge?: 'info' | 'success' | 'warning' | 'error'\n  onOk?: () => void | Promise<unknown>\n  resolve: (ok: boolean) => void\n  settled: boolean\n}\n\n/** 关到再开之间留出退场窗口，动效走完再放下一个。 */\nconst EXIT_WINDOW_MS = 250\n\nexport function createDialogService(options: DialogServiceOptions = {}): DialogService {\n  if (typeof document === 'undefined')\n    throw new Error('createDialogService 需要 document；SSR 里请等到客户端再创建')\n\n  const defaults = { okText: options.okText ?? '确定', cancelText: options.cancelText ?? '取消' }\n  const holder = options.target ?? document.createElement('div')\n  if (!options.target)\n    document.body.appendChild(holder)\n\n  const state = reactive({\n    current: null as Spec | null,\n    open: false,\n    busy: false,\n  })\n  const queue: Spec[] = []\n  let disposed = false\n  let advanceTimer: ReturnType<typeof setTimeout> | null = null\n\n  function next(): void {\n    if (disposed || state.current || queue.length === 0)\n      return\n    state.current = queue.shift()!\n    state.busy = false\n    state.open = true\n  }\n\n  function settle(ok: boolean): void {\n    const spec = state.current\n    if (!spec || spec.settled)\n      return\n    spec.settled = true\n    spec.resolve(ok)\n  }\n\n  /** 退场窗口走完再清当前项、放下一个；程序化关闭与机器侧关闭都汇到这里，只挂一只表。 */\n  function scheduleAdvance(): void {\n    if (advanceTimer)\n      return\n    advanceTimer = setTimeout(() => {\n      advanceTimer = null\n      state.current = null\n      state.busy = false\n      next()\n    }, EXIT_WINDOW_MS)\n  }\n\n  function close(ok: boolean): void {\n    settle(ok)\n    state.open = false\n    scheduleAdvance()\n  }\n\n  // 机器侧的关闭（Esc 等）从这里回来：未定的一律按取消结\n  function onOpenChange(open: boolean): void {\n    if (open)\n      return\n    settle(false)\n    state.open = false\n    scheduleAdvance()\n  }\n\n  async function ok(): Promise<void> {\n    const spec = state.current\n    if (!spec || state.busy)\n      return\n    if (spec.onOk) {\n      state.busy = true\n      try {\n        await spec.onOk()\n      }\n      catch (err) {\n        state.busy = false\n        console.error('[xh] confirm onOk 失败，对话框保持打开', err)\n        return\n      }\n      state.busy = false\n    }\n    close(true)\n  }\n\n  function request(spec: Omit<Spec, 'resolve' | 'settled'>): Promise<boolean> {\n    if (disposed)\n      return Promise.reject(new Error('dialog 服务已卸载'))\n    return new Promise<boolean>((resolve) => {\n      queue.push({ ...spec, resolve, settled: false })\n      next()\n    })\n  }\n\n  const Host = defineComponent({\n    name: 'XhDialogServiceHost',\n    setup() {\n      return () => {\n        const spec = state.current\n        return h(XhDialogRoot, {\n          'open': state.open,\n          'onUpdate:open': onOpenChange,\n          'modal': true,\n          'role': 'alertdialog',\n          'closeOnEscape': !state.busy,\n          'closeOnInteractOutside': false,\n        }, () => spec\n          ? h(XhDialogContent, null, () => [\n              h('div', { 'style': { display: 'flex', alignItems: 'center', gap: 'var(--xh-space-2)' }, 'data-tone': spec.badge ? toneOfBadge(spec.badge) : undefined }, [\n                spec.badge ? typeBadge(spec.badge) : null,\n                h(XhDialogTitle, () => spec.title),\n              ]),\n              spec.content ? h(XhDialogDescription, () => spec.content) : null,\n              h('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 'var(--xh-space-2)' } }, [\n                spec.showCancel\n                  ? h(XhButton, { variant: 'ghost', disabled: state.busy, onClick: () => close(false) }, () => spec.cancelText)\n                  : null,\n                h(XhButton, { variant: 'solid', tone: spec.tone, loading: state.busy, onClick: ok }, () => [\n                  state.busy ? h(XhButtonIndicator, () => spinArc()) : null,\n                  h(XhButtonLabel, () => (state.busy ? `${spec.okText}…` : spec.okText)),\n                ]),\n              ]),\n            ])\n          : null)\n      }\n    },\n  })\n\n  function toneOfBadge(badge: NonNullable<Spec['badge']>): Tone {\n    return badge === 'error' ? 'danger' : badge\n  }\n\n  const app: App = createApp(Host)\n  app.mount(holder)\n\n  const alert = (badge: NonNullable<Spec['badge']>, tone: Tone) => async (opts: AlertOptions): Promise<void> => {\n    await request({\n      title: opts.title,\n      content: opts.content,\n      tone,\n      okText: opts.okText ?? defaults.okText,\n      cancelText: defaults.cancelText,\n      showCancel: false,\n      badge,\n      onOk: opts.onOk,\n    })\n  }\n\n  return {\n    confirm: opts => request({\n      title: opts.title,\n      content: opts.content,\n      tone: opts.tone ?? 'brand',\n      okText: opts.okText ?? defaults.okText,\n      cancelText: opts.cancelText ?? defaults.cancelText,\n      showCancel: true,\n      onOk: opts.onOk,\n    }),\n    info: alert('info', 'info'),\n    success: alert('success', 'success'),\n    warning: alert('warning', 'warning'),\n    error: alert('error', 'danger'),\n    dispose: () => {\n      disposed = true\n      if (advanceTimer) {\n        clearTimeout(advanceTimer)\n        advanceTimer = null\n      }\n      settle(false)\n      for (const spec of queue.splice(0))\n        spec.resolve(false)\n      app.unmount()\n      if (!options.target)\n        holder.remove()\n    },\n  }\n}\n"],"mappings":";;;;;;AA0DA,MAAM,iBAAiB;AAEvB,SAAgB,oBAAoB,UAAgC,CAAC,GAAkB;CACrF,IAAI,OAAO,aAAa,aACtB,MAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,WAAW;EAAE,QAAQ,QAAQ,UAAU;EAAM,YAAY,QAAQ,cAAc;CAAK;CAC1F,MAAM,SAAS,QAAQ,UAAU,SAAS,cAAc,KAAK;CAC7D,IAAI,CAAC,QAAQ,QACX,SAAS,KAAK,YAAY,MAAM;CAElC,MAAM,QAAQ,SAAS;EACrB,SAAS;EACT,MAAM;EACN,MAAM;CACR,CAAC;CACD,MAAM,QAAgB,CAAC;CACvB,IAAI,WAAW;CACf,IAAI,eAAqD;CAEzD,SAAS,OAAa;EACpB,IAAI,YAAY,MAAM,WAAW,MAAM,WAAW,GAChD;EACF,MAAM,UAAU,MAAM,MAAM;EAC5B,MAAM,OAAO;EACb,MAAM,OAAO;CACf;CAEA,SAAS,OAAO,IAAmB;EACjC,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,QAAQ,KAAK,SAChB;EACF,KAAK,UAAU;EACf,KAAK,QAAQ,EAAE;CACjB;;CAGA,SAAS,kBAAwB;EAC/B,IAAI,cACF;EACF,eAAe,iBAAiB;GAC9B,eAAe;GACf,MAAM,UAAU;GAChB,MAAM,OAAO;GACb,KAAK;EACP,GAAG,cAAc;CACnB;CAEA,SAAS,MAAM,IAAmB;EAChC,OAAO,EAAE;EACT,MAAM,OAAO;EACb,gBAAgB;CAClB;CAGA,SAAS,aAAa,MAAqB;EACzC,IAAI,MACF;EACF,OAAO,KAAK;EACZ,MAAM,OAAO;EACb,gBAAgB;CAClB;CAEA,eAAe,KAAoB;EACjC,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,QAAQ,MAAM,MACjB;EACF,IAAI,KAAK,MAAM;GACb,MAAM,OAAO;GACb,IAAI;IACF,MAAM,KAAK,KAAK;GAClB,SACO,KAAK;IACV,MAAM,OAAO;IACb,QAAQ,MAAM,gCAAgC,GAAG;IACjD;GACF;GACA,MAAM,OAAO;EACf;EACA,MAAM,IAAI;CACZ;CAEA,SAAS,QAAQ,MAA2D;EAC1E,IAAI,UACF,OAAO,QAAQ,uBAAO,IAAI,MAAM,cAAc,CAAC;EACjD,OAAO,IAAI,SAAkB,YAAY;GACvC,MAAM,KAAK;IAAE,GAAG;IAAM;IAAS,SAAS;GAAM,CAAC;GAC/C,KAAK;EACP,CAAC;CACH;CAEA,MAAM,OAAO,gBAAgB;EAC3B,MAAM;EACN,QAAQ;GACN,aAAa;IACX,MAAM,OAAO,MAAM;IACnB,OAAO,EAAE,cAAc;KACrB,QAAQ,MAAM;KACd,iBAAiB;KACjB,SAAS;KACT,QAAQ;KACR,iBAAiB,CAAC,MAAM;KACxB,0BAA0B;IAC5B,SAAS,OACL,EAAE,iBAAiB,YAAY;KAC7B,EAAE,OAAO;MAAE,SAAS;OAAE,SAAS;OAAQ,YAAY;OAAU,KAAK;MAAoB;MAAG,aAAa,KAAK,QAAQ,YAAY,KAAK,KAAK,IAAI,KAAA;KAAU,GAAG,CACxJ,KAAK,QAAQ,UAAU,KAAK,KAAK,IAAI,MACrC,EAAE,qBAAqB,KAAK,KAAK,CACnC,CAAC;KACD,KAAK,UAAU,EAAE,2BAA2B,KAAK,OAAO,IAAI;KAC5D,EAAE,OAAO,EAAE,OAAO;MAAE,SAAS;MAAQ,gBAAgB;MAAY,KAAK;KAAoB,EAAE,GAAG,CAC7F,KAAK,aACD,EAAE,UAAU;MAAE,SAAS;MAAS,UAAU,MAAM;MAAM,eAAe,MAAM,KAAK;KAAE,SAAS,KAAK,UAAU,IAC1G,MACJ,EAAE,UAAU;MAAE,SAAS;MAAS,MAAM,KAAK;MAAM,SAAS,MAAM;MAAM,SAAS;KAAG,SAAS,CACzF,MAAM,OAAO,EAAE,yBAAyB,QAAQ,CAAC,IAAI,MACrD,EAAE,qBAAsB,MAAM,OAAO,GAAG,KAAK,OAAO,KAAK,KAAK,MAAO,CACvE,CAAC,CACH,CAAC;IACH,CAAC,IACD,IAAI;GACV;EACF;CACF,CAAC;CAED,SAAS,YAAY,OAAyC;EAC5D,OAAO,UAAU,UAAU,WAAW;CACxC;CAEA,MAAM,MAAW,UAAU,IAAI;CAC/B,IAAI,MAAM,MAAM;CAEhB,MAAM,SAAS,OAAmC,SAAe,OAAO,SAAsC;EAC5G,MAAM,QAAQ;GACZ,OAAO,KAAK;GACZ,SAAS,KAAK;GACd;GACA,QAAQ,KAAK,UAAU,SAAS;GAChC,YAAY,SAAS;GACrB,YAAY;GACZ;GACA,MAAM,KAAK;EACb,CAAC;CACH;CAEA,OAAO;EACL,UAAS,SAAQ,QAAQ;GACvB,OAAO,KAAK;GACZ,SAAS,KAAK;GACd,MAAM,KAAK,QAAQ;GACnB,QAAQ,KAAK,UAAU,SAAS;GAChC,YAAY,KAAK,cAAc,SAAS;GACxC,YAAY;GACZ,MAAM,KAAK;EACb,CAAC;EACD,MAAM,MAAM,QAAQ,MAAM;EAC1B,SAAS,MAAM,WAAW,SAAS;EACnC,SAAS,MAAM,WAAW,SAAS;EACnC,OAAO,MAAM,SAAS,QAAQ;EAC9B,eAAe;GACb,WAAW;GACX,IAAI,cAAc;IAChB,aAAa,YAAY;IACzB,eAAe;GACjB;GACA,OAAO,KAAK;GACZ,KAAK,MAAM,QAAQ,MAAM,OAAO,CAAC,GAC/B,KAAK,QAAQ,KAAK;GACpB,IAAI,QAAQ;GACZ,IAAI,CAAC,QAAQ,QACX,OAAO,OAAO;EAClB;CACF;AACF"}
+{"version":3,"file":"dialog-service.js","names":[],"sources":["../../src/services/dialog-service.ts"],"sourcesContent":["// 全局命令式确认框服务：confirm/info/success/warning/error 一次调用弹出，\n// 自带标题徽记、正文与按钮行。同一时刻只挂一个对话框，后来的排队顺次弹出，\n// 避开多层模态叠加。onOk 返回 Promise 时确认钮自动进入 pending 并拦住关闭，\n// 失败保持打开以便重试或取消。\nimport type { Tone } from '@xihan-ui/kernel'\nimport type { App, MaybeRefOrGetter, VNodeChild } from 'vue'\nimport type { XhConfig } from '../config/config'\nimport { ensurePortalRoot } from '@xihan-ui/kernel'\nimport { createApp, defineComponent, h, reactive, shallowRef, toRaw, toValue } from 'vue'\nimport { XhButton, XhButtonIndicator, XhButtonLabel } from '../components/button'\nimport { XhDialogContent, XhDialogDescription, XhDialogRoot, XhDialogTitle } from '../components/dialog/dialog'\nimport { spinArc, typeBadge } from './glyph'\nimport { mountServiceHost } from './mount-host'\nimport { createServiceConfig } from './service-config'\n\n/**\n * 对话框正文。给串走 description 部件（读屏的 aria-describedby 由它接）；\n * 给渲染函数则整块摊在正文位，自己决定渲染什么。\n *\n * 不收裸 VNode：服务的宿主是常驻的，忙态一翻就整棵重渲，\n * 同一个 VNode 实例被复用时的行为未定义。\n */\nexport type DialogBody = string | (() => VNodeChild)\n\nexport interface ConfirmOptions {\n  title: string\n  content?: DialogBody\n  /** 确认钮语气，默认 brand；危险操作传 danger。 */\n  tone?: Tone\n  /** 标题旁的类型徽记。不给则不出徽记。 */\n  badge?: 'info' | 'success' | 'warning' | 'error'\n  okText?: MaybeRefOrGetter<string>\n  cancelText?: MaybeRefOrGetter<string>\n  /** Promise 拒绝时对话框保持打开。 */\n  onOk?: () => void | Promise<unknown>\n}\n\n/** 单按钮告知框的入参：没有取消钮，徽记由预设档自己定，其余同 confirm。 */\nexport type AlertOptions = Omit<ConfirmOptions, 'tone' | 'badge'>\n\n/** 取值型弹窗的入参。正文自己拼表单，确认时把那份值带回来。 */\nexport interface PromptOptions<T extends object> extends Omit<ConfirmOptions, 'onOk' | 'content'> {\n  /** 每次打开建一份初值；服务用 reactive 包起来交给 body 与 onOk，两边同一份。 */\n  initialValue: T\n  /** 用那份可写代理渲染表单主体。 */\n  body: (value: T) => VNodeChild\n  /** 落焦到哪个节点，CSS 选择器。 */\n  initialFocus?: string\n  /** 返回 false（或拒绝）表示校验没过，弹窗保持打开。 */\n  onOk?: (value: T) => boolean | void | Promise<boolean | void>\n}\n\nexport interface DialogServiceOptions {\n  /** 确认钮文案，缺省 OK。 */\n  okText?: MaybeRefOrGetter<string>\n  /** 取消钮文案，缺省 Cancel。 */\n  cancelText?: MaybeRefOrGetter<string>\n  /**\n   * 喂给对话框子树的全局配置（locale / translations / size / portalContainer）。\n   * 本服务自带宿主应用，接不到组件树里的 provideXhConfig，要让它跟应用同语言就从这里给；\n   * 传 ref/getter 即可运行期跟着切语言，也可以之后用 setConfig 推。\n   */\n  config?: MaybeRefOrGetter<XhConfig>\n  /** 宿主容器；不给就在 body 下新建一个。 */\n  target?: HTMLElement\n}\n\nexport interface DialogService {\n  /** 确认走 onOk 后 resolve true；取消/Esc resolve false。 */\n  confirm: (options: ConfirmOptions) => Promise<boolean>\n  info: (options: AlertOptions) => Promise<void>\n  success: (options: AlertOptions) => Promise<void>\n  warning: (options: AlertOptions) => Promise<void>\n  error: (options: AlertOptions) => Promise<void>\n  /** 确认后 resolve 一份值的普通对象快照；取消 / Esc / 卸载 resolve null。 */\n  prompt: <T extends object>(options: PromptOptions<T>) => Promise<T | null>\n  /** 换一份全局配置源。 */\n  setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void\n  /** 卸载宿主应用并移除容器。 */\n  dispose: () => void\n}\n\ninterface Spec {\n  title: string\n  content?: DialogBody\n  tone: Tone\n  okText: MaybeRefOrGetter<string>\n  cancelText: MaybeRefOrGetter<string>\n  showCancel: boolean\n  /** 标题旁的类型徽记（预设档用），confirm 不带。 */\n  badge?: 'info' | 'success' | 'warning' | 'error'\n  /** 返回 false 表示不放行；confirm 那一路的返回值不参与判定。 */\n  onOk?: () => unknown\n  /** 取值型弹窗的正文与那份可写的值，两边同一个对象。 */\n  body?: (value: object) => VNodeChild\n  value?: object\n  initialFocus?: string\n  resolve: (ok: boolean) => void\n  settled: boolean\n}\n\n/** 关到再开之间留出退场窗口，动效走完再放下一个。 */\nconst EXIT_WINDOW_MS = 250\n\nexport function createDialogService(options: DialogServiceOptions = {}): DialogService {\n  if (typeof document === 'undefined')\n    throw new Error('createDialogService 需要 document；SSR 里请等到客户端再创建')\n\n  // 文案不在创建时求值：队列里的对话框会跨过一次切语言\n  const defaults = { okText: options.okText ?? 'OK', cancelText: options.cancelText ?? 'Cancel' }\n  const configSource = createServiceConfig(options.config)\n  const holder = options.target ?? document.createElement('div')\n  if (!options.target)\n    ensurePortalRoot(document).appendChild(holder)\n\n  // 当前项单独放 shallowRef：进 reactive 会把 Spec 里那几个 MaybeRefOrGetter 的 Ref 分支解包掉\n  const current = shallowRef<Spec | null>(null)\n  const state = reactive({\n    open: false,\n    busy: false,\n  })\n  const queue: Spec[] = []\n  let disposed = false\n  let advanceTimer: ReturnType<typeof setTimeout> | null = null\n\n  function next(): void {\n    if (disposed || current.value || queue.length === 0)\n      return\n    current.value = queue.shift()!\n    state.busy = false\n    state.open = true\n  }\n\n  function settle(ok: boolean): void {\n    const spec = current.value\n    if (!spec || spec.settled)\n      return\n    spec.settled = true\n    spec.resolve(ok)\n  }\n\n  /** 退场窗口走完再清当前项、放下一个；程序化关闭与机器侧关闭都汇到这里，只挂一只表。 */\n  function scheduleAdvance(): void {\n    if (advanceTimer)\n      return\n    advanceTimer = setTimeout(() => {\n      advanceTimer = null\n      current.value = null\n      state.busy = false\n      next()\n    }, EXIT_WINDOW_MS)\n  }\n\n  function close(ok: boolean): void {\n    settle(ok)\n    state.open = false\n    scheduleAdvance()\n  }\n\n  // 机器侧的关闭（Esc 等）从这里回来：未定的一律按取消结\n  function onOpenChange(open: boolean): void {\n    if (open)\n      return\n    settle(false)\n    state.open = false\n    scheduleAdvance()\n  }\n\n  async function ok(): Promise<void> {\n    const spec = current.value\n    if (!spec || state.busy)\n      return\n    if (spec.onOk) {\n      state.busy = true\n      try {\n        // 取值型弹窗的 onOk 收 false 表示校验没过，对话框保持打开；\n        // confirm 的 onOk 签名不吃 false，语义不受影响\n        const verdict = await spec.onOk()\n        if (verdict === false) {\n          state.busy = false\n          return\n        }\n      }\n      catch (err) {\n        state.busy = false\n        console.error('[xh] confirm onOk 失败，对话框保持打开', err)\n        return\n      }\n      state.busy = false\n    }\n    close(true)\n  }\n\n  function request(spec: Omit<Spec, 'resolve' | 'settled'>): Promise<boolean> {\n    if (disposed)\n      return Promise.reject(new Error('dialog 服务已卸载'))\n    return new Promise<boolean>((resolve) => {\n      queue.push({ ...spec, resolve, settled: false })\n      next()\n    })\n  }\n\n  const Host = defineComponent({\n    name: 'XhDialogServiceHost',\n    setup() {\n      configSource.provide()\n      return () => {\n        const spec = current.value\n        return h(XhDialogRoot, {\n          'open': state.open,\n          'onUpdate:open': onOpenChange,\n          'modal': true,\n          'role': 'alertdialog',\n          'closeOnEscape': !state.busy,\n          'closeOnInteractOutside': false,\n          'initialFocus': spec?.initialFocus,\n        }, () => spec\n          ? h(XhDialogContent, null, () => [\n              h('div', { 'style': { display: 'flex', alignItems: 'center', gap: 'var(--xh-control-gap-md)' }, 'data-tone': spec.badge ? toneOfBadge(spec.badge) : undefined }, [\n                spec.badge ? typeBadge(spec.badge) : null,\n                h(XhDialogTitle, () => spec.title),\n              ]),\n              // 串走 description（读屏的 aria-describedby 接在它上面），渲染函数直接摊开\n              typeof spec.content === 'string'\n                ? h(XhDialogDescription, () => spec.content as string)\n                : typeof spec.content === 'function' ? spec.content() : null,\n              spec.body && spec.value ? spec.body(spec.value) : null,\n              h('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 'var(--xh-control-gap-md)' } }, [\n                spec.showCancel\n                  ? h(XhButton, { variant: 'ghost', disabled: state.busy, onClick: () => close(false) }, () => toValue(spec.cancelText))\n                  : null,\n                h(XhButton, { variant: 'solid', tone: spec.tone, loading: state.busy, onClick: ok }, () => [\n                  state.busy ? h(XhButtonIndicator, () => spinArc()) : null,\n                  h(XhButtonLabel, () => (state.busy ? `${toValue(spec.okText)}…` : toValue(spec.okText))),\n                ]),\n              ]),\n            ])\n          : null)\n      }\n    },\n  })\n\n  function toneOfBadge(badge: NonNullable<Spec['badge']>): Tone {\n    return badge === 'error' ? 'danger' : badge\n  }\n\n  const app: App = createApp(Host)\n  const mounted = mountServiceHost(app, holder, 'dialog')\n\n  const alert = (badge: NonNullable<Spec['badge']>, tone: Tone) => async (opts: AlertOptions): Promise<void> => {\n    await request({\n      title: opts.title,\n      content: opts.content,\n      tone,\n      okText: opts.okText ?? defaults.okText,\n      cancelText: defaults.cancelText,\n      showCancel: false,\n      badge,\n      onOk: opts.onOk,\n    })\n  }\n\n  return {\n    confirm: opts => request({\n      title: opts.title,\n      content: opts.content,\n      tone: opts.tone ?? 'brand',\n      okText: opts.okText ?? defaults.okText,\n      cancelText: opts.cancelText ?? defaults.cancelText,\n      showCancel: true,\n      badge: opts.badge,\n      onOk: opts.onOk,\n    }),\n    prompt: <T extends object>(opts: PromptOptions<T>): Promise<T | null> => {\n      // body 与 onOk 拿的是同一份可写代理：正文里改了什么，确认时就读到什么\n      const value = reactive({ ...opts.initialValue }) as T\n      return request({\n        title: opts.title,\n        tone: opts.tone ?? 'brand',\n        okText: opts.okText ?? defaults.okText,\n        cancelText: opts.cancelText ?? defaults.cancelText,\n        showCancel: true,\n        badge: opts.badge,\n        initialFocus: opts.initialFocus,\n        body: v => opts.body(v as T),\n        value,\n        onOk: opts.onOk ? () => opts.onOk!(value) : undefined,\n      }).then(ok => (ok ? { ...toRaw(value) } as T : null))\n    },\n    info: alert('info', 'info'),\n    success: alert('success', 'success'),\n    warning: alert('warning', 'warning'),\n    error: alert('error', 'danger'),\n    setConfig: next => configSource.set(next),\n    dispose: () => {\n      disposed = true\n      if (advanceTimer) {\n        clearTimeout(advanceTimer)\n        advanceTimer = null\n      }\n      settle(false)\n      for (const spec of queue.splice(0))\n        spec.resolve(false)\n      if (mounted)\n        app.unmount()\n      if (!options.target)\n        holder.remove()\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/services/glyph.js

@@ -1,23 +1,47 @@
 import { h } from "vue";
+import { resolveMotionPreference } from "@xihan-ui/motion";
 //#region src/services/glyph.ts
+/** 裸字形跟着宿主声明的图标尺寸走；宿主没声明时退回控件指示符那一档。 */
+const GLYPH_SIZE = "var(--xh-icon-size, var(--xh-control-indicator-size))";
+const GLYPH_STYLE = {
+	display: "grid",
+	placeItems: "center",
+	flex: "none",
+	inlineSize: GLYPH_SIZE,
+	blockSize: GLYPH_SIZE,
+	color: "var(--xh-_tone-fg, var(--xh-fg-default))"
+};
+/** 徽记的圆底取中号字形尺寸；里面的字形四边各让出一个 space-1。 */
+const BADGE_SIZE = "var(--xh-glyph-size-md)";
+const MARK_SIZE = "calc(var(--xh-glyph-size-md) - 2 * var(--xh-space-1))";
 const BADGE_STYLE = {
 	display: "grid",
 	placeItems: "center",
 	flex: "none",
-	inlineSize: "20px",
-	blockSize: "20px",
-	borderRadius: "999px",
+	inlineSize: BADGE_SIZE,
+	blockSize: BADGE_SIZE,
+	borderRadius: "var(--xh-shape-pill)",
 	background: "var(--xh-_tone-subtle, var(--xh-bg-muted))",
-	color: "var(--xh-_tone-fg, var(--xh-fg-default))",
-	fontSize: "12px",
-	lineHeight: "1"
+	color: "var(--xh-_tone-fg, var(--xh-fg-default))"
 };
-const GLYPH_TEXT = {
-	info: "ℹ",
-	success: "✓",
-	warning: "!",
-	error: "✕"
+/** 四种类型各取哪枚字形令牌；图形经 mask 着色，跟着徽记的前景色走。 */
+const GLYPH_MARK = {
+	info: "--xh-glyph-mark-info",
+	success: "--xh-glyph-mark-check",
+	warning: "--xh-glyph-mark-warning",
+	error: "--xh-glyph-mark-close"
 };
+function markStyle(token) {
+	const image = `var(${token})`;
+	return {
+		display: "block",
+		inlineSize: MARK_SIZE,
+		blockSize: MARK_SIZE,
+		backgroundColor: "currentColor",
+		WebkitMask: `${image} center / contain no-repeat`,
+		mask: `${image} center / contain no-repeat`
+	};
+}
 /** 旋转的加载弧线；转动动画由外层容器（如 XhButtonIndicator）或自带样式提供。 */
 function spinArc(size = "1em") {
 	return h("svg", {
@@ -38,24 +62,73 @@ function spinArc(size = "1em") {
 		"stroke-dashoffset": "22"
 	})]);
 }
-/** 类型徽记：圆底 + 字形；loading 给转圈弧线。 */
-function typeBadge(type) {
+/** 解析 CSS 时长（"640ms" / "0.8s"）为毫秒，解析不出来给 0。 */
+function parseDuration(value) {
+	const n = Number.parseFloat(value);
+	if (!Number.isFinite(n)) return 0;
+	return /s\s*$/.test(value) && !/ms\s*$/.test(value) ? n * 1e3 : n;
+}
+/**
+* 让徽记转起来。动画用 Web Animations 而不是 CSS 动画名：模板是内联样式渲染的，
+* 不归任何一份皮肤管，引用皮肤里的 @keyframes 名字时那份皮肤不一定在场。
+* 时长读 --xh-spin-duration 令牌；减弱动效时不转，静止的弧线仍读得出「还没好」。
+*/
+function spin(el) {
+	if (typeof el.animate !== "function" || resolveMotionPreference(el.ownerDocument?.defaultView ?? void 0) === "reduce") return;
+	const duration = parseDuration(getComputedStyle(el).getPropertyValue("--xh-spin-duration"));
+	if (duration <= 0) return;
+	el.animate([{ rotate: "0deg" }, { rotate: "360deg" }], {
+		duration,
+		iterations: Number.POSITIVE_INFINITY,
+		easing: "linear"
+	});
+}
+/**
+* 状态字形：不带圆底的一枚字形，尺寸随宿主的 --xh-icon-size，颜色随语气。
+*
+* 与 typeBadge 的分工是体量：圆底徽记是给对话框那种有余裕的版面用的（眼下只剩它在用），
+* 排在一行短消息里会把行高顶起来，也让一句话的反馈看着像一则公告。
+*/
+function typeGlyph(type) {
 	if (!type) return null;
 	if (type === "loading") return h("span", {
+		"key": "spin",
+		"style": GLYPH_STYLE,
+		"aria-hidden": "true",
+		"onVnodeMounted": (vnode) => spin(vnode.el)
+	}, [spinArc("100%")]);
+	const mark = GLYPH_MARK[type];
+	if (!mark) return null;
+	const image = `var(${mark})`;
+	return h("span", {
+		"key": "mark",
 		"style": {
-			...BADGE_STYLE,
-			animation: "xh-spin 0.8s linear infinite"
+			...GLYPH_STYLE,
+			backgroundColor: "currentColor",
+			WebkitMask: `${image} center / contain no-repeat`,
+			mask: `${image} center / contain no-repeat`
 		},
 		"aria-hidden": "true"
-	}, [spinArc("12px")]);
-	const glyph = GLYPH_TEXT[type];
-	if (!glyph) return null;
+	});
+}
+/** 类型徽记：圆底 + 字形；loading 给转圈弧线。 */
+function typeBadge(type) {
+	if (!type) return null;
+	if (type === "loading") return h("span", {
+		"key": "spin",
+		"style": BADGE_STYLE,
+		"aria-hidden": "true",
+		"onVnodeMounted": (vnode) => spin(vnode.el)
+	}, [spinArc(MARK_SIZE)]);
+	const mark = GLYPH_MARK[type];
+	if (!mark) return null;
 	return h("span", {
+		"key": "mark",
 		"style": BADGE_STYLE,
 		"aria-hidden": "true"
-	}, glyph);
+	}, [h("span", { style: markStyle(mark) })]);
 }
 //#endregion
-export { spinArc, typeBadge };
+export { spinArc, typeBadge, typeGlyph };
 
 //# sourceMappingURL=glyph.js.map

package/dist/services/glyph.js.map

@@ -1 +1 @@
-{"version":3,"file":"glyph.js","names":[],"sources":["../../src/services/glyph.ts"],"sourcesContent":["// 反馈服务默认模板用的装饰图形：类型徽记与加载弧线。\n// 纯装饰（aria-hidden），读屏内容由标题与描述承担；配色取语气层继承下来的私有槽，\n// 随宿主 data-tone 自动换族。\nimport type { VNode } from 'vue'\nimport { h } from 'vue'\n\nconst BADGE_STYLE = {\n  display: 'grid',\n  placeItems: 'center',\n  flex: 'none',\n  inlineSize: '20px',\n  blockSize: '20px',\n  borderRadius: '999px',\n  background: 'var(--xh-_tone-subtle, var(--xh-bg-muted))',\n  color: 'var(--xh-_tone-fg, var(--xh-fg-default))',\n  fontSize: '12px',\n  lineHeight: '1',\n} as const\n\nconst GLYPH_TEXT: Record<string, string> = {\n  info: 'ℹ',\n  success: '✓',\n  warning: '!',\n  error: '✕',\n}\n\n/** 旋转的加载弧线；转动动画由外层容器（如 XhButtonIndicator）或自带样式提供。 */\nexport function spinArc(size = '1em'): VNode {\n  return h('svg', {\n    'viewBox': '0 0 16 16',\n    'width': size,\n    'height': size,\n    'aria-hidden': 'true',\n    'style': { display: 'block' },\n  }, [\n    h('circle', {\n      'cx': 8,\n      'cy': 8,\n      'r': 6.5,\n      'fill': 'none',\n      'stroke': 'currentColor',\n      'stroke-width': 2,\n      'stroke-linecap': 'round',\n      'stroke-dasharray': '30',\n      'stroke-dashoffset': '22',\n    }),\n  ])\n}\n\n/** 类型徽记：圆底 + 字形；loading 给转圈弧线。 */\nexport function typeBadge(type: string | undefined): VNode | null {\n  if (!type)\n    return null\n  if (type === 'loading') {\n    return h('span', { 'style': { ...BADGE_STYLE, animation: 'xh-spin 0.8s linear infinite' }, 'aria-hidden': 'true' }, [spinArc('12px')])\n  }\n  const glyph = GLYPH_TEXT[type]\n  if (!glyph)\n    return null\n  return h('span', { 'style': BADGE_STYLE, 'aria-hidden': 'true' }, glyph)\n}\n"],"mappings":";;AAMA,MAAM,cAAc;CAClB,SAAS;CACT,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,WAAW;CACX,cAAc;CACd,YAAY;CACZ,OAAO;CACP,UAAU;CACV,YAAY;AACd;AAEA,MAAM,aAAqC;CACzC,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT;;AAGA,SAAgB,QAAQ,OAAO,OAAc;CAC3C,OAAO,EAAE,OAAO;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,eAAe;EACf,SAAS,EAAE,SAAS,QAAQ;CAC9B,GAAG,CACD,EAAE,UAAU;EACV,MAAM;EACN,MAAM;EACN,KAAK;EACL,QAAQ;EACR,UAAU;EACV,gBAAgB;EAChB,kBAAkB;EAClB,oBAAoB;EACpB,qBAAqB;CACvB,CAAC,CACH,CAAC;AACH;;AAGA,SAAgB,UAAU,MAAwC;CAChE,IAAI,CAAC,MACH,OAAO;CACT,IAAI,SAAS,WACX,OAAO,EAAE,QAAQ;EAAE,SAAS;GAAE,GAAG;GAAa,WAAW;EAA+B;EAAG,eAAe;CAAO,GAAG,CAAC,QAAQ,MAAM,CAAC,CAAC;CAEvI,MAAM,QAAQ,WAAW;CACzB,IAAI,CAAC,OACH,OAAO;CACT,OAAO,EAAE,QAAQ;EAAE,SAAS;EAAa,eAAe;CAAO,GAAG,KAAK;AACzE"}
+{"version":3,"file":"glyph.js","names":[],"sources":["../../src/services/glyph.ts"],"sourcesContent":["// 反馈服务默认模板用的装饰图形：裸字形（typeGlyph）、圆底徽记（typeBadge）与加载弧线。\n// 纯装饰（aria-hidden），读屏内容由标题与描述承担；配色取语气层继承下来的私有槽，\n// 随宿主 data-tone 自动换族。徽记里的图形取 --xh-glyph-mark-* 令牌，与皮肤的兜底字形同一套。\nimport type { VNode } from 'vue'\nimport { resolveMotionPreference } from '@xihan-ui/motion'\nimport { h } from 'vue'\n\n/** 裸字形跟着宿主声明的图标尺寸走；宿主没声明时退回控件指示符那一档。 */\nconst GLYPH_SIZE = 'var(--xh-icon-size, var(--xh-control-indicator-size))'\n\nconst GLYPH_STYLE = {\n  display: 'grid',\n  placeItems: 'center',\n  flex: 'none',\n  inlineSize: GLYPH_SIZE,\n  blockSize: GLYPH_SIZE,\n  /* 字形压的是同族淡底，不是白底：主色 600 档兑上去只剩 2.1–2.7（浅色 success / warning、\n     深色 neutral），够不到图形该有的 3:1。-fg 档在同一批底上最低 4.08，与 alert 的图标同档 */\n  color: 'var(--xh-_tone-fg, var(--xh-fg-default))',\n} as const\n\n/** 徽记的圆底取中号字形尺寸；里面的字形四边各让出一个 space-1。 */\nconst BADGE_SIZE = 'var(--xh-glyph-size-md)'\nconst MARK_SIZE = 'calc(var(--xh-glyph-size-md) - 2 * var(--xh-space-1))'\n\nconst BADGE_STYLE = {\n  display: 'grid',\n  placeItems: 'center',\n  flex: 'none',\n  inlineSize: BADGE_SIZE,\n  blockSize: BADGE_SIZE,\n  borderRadius: 'var(--xh-shape-pill)',\n  background: 'var(--xh-_tone-subtle, var(--xh-bg-muted))',\n  color: 'var(--xh-_tone-fg, var(--xh-fg-default))',\n} as const\n\n/** 四种类型各取哪枚字形令牌；图形经 mask 着色，跟着徽记的前景色走。 */\nconst GLYPH_MARK: Record<string, string> = {\n  info: '--xh-glyph-mark-info',\n  success: '--xh-glyph-mark-check',\n  warning: '--xh-glyph-mark-warning',\n  error: '--xh-glyph-mark-close',\n}\n\nfunction markStyle(token: string): Record<string, string> {\n  const image = `var(${token})`\n  return {\n    display: 'block',\n    inlineSize: MARK_SIZE,\n    blockSize: MARK_SIZE,\n    backgroundColor: 'currentColor',\n    WebkitMask: `${image} center / contain no-repeat`,\n    mask: `${image} center / contain no-repeat`,\n  }\n}\n\n/** 旋转的加载弧线；转动动画由外层容器（如 XhButtonIndicator）或自带样式提供。 */\nexport function spinArc(size = '1em'): VNode {\n  return h('svg', {\n    'viewBox': '0 0 16 16',\n    'width': size,\n    'height': size,\n    'aria-hidden': 'true',\n    'style': { display: 'block' },\n  }, [\n    h('circle', {\n      'cx': 8,\n      'cy': 8,\n      'r': 6.5,\n      'fill': 'none',\n      'stroke': 'currentColor',\n      'stroke-width': 2,\n      'stroke-linecap': 'round',\n      'stroke-dasharray': '30',\n      'stroke-dashoffset': '22',\n    }),\n  ])\n}\n\n/** 解析 CSS 时长（\"640ms\" / \"0.8s\"）为毫秒，解析不出来给 0。 */\nfunction parseDuration(value: string): number {\n  const n = Number.parseFloat(value)\n  if (!Number.isFinite(n))\n    return 0\n  return /s\\s*$/.test(value) && !/ms\\s*$/.test(value) ? n * 1000 : n\n}\n\n/**\n * 让徽记转起来。动画用 Web Animations 而不是 CSS 动画名：模板是内联样式渲染的，\n * 不归任何一份皮肤管，引用皮肤里的 @keyframes 名字时那份皮肤不一定在场。\n * 时长读 --xh-spin-duration 令牌；减弱动效时不转，静止的弧线仍读得出「还没好」。\n */\nfunction spin(el: HTMLElement): void {\n  if (typeof el.animate !== 'function' || resolveMotionPreference(el.ownerDocument?.defaultView ?? undefined) === 'reduce')\n    return\n  const duration = parseDuration(getComputedStyle(el).getPropertyValue('--xh-spin-duration'))\n  if (duration <= 0)\n    return\n  el.animate([{ rotate: '0deg' }, { rotate: '360deg' }], { duration, iterations: Number.POSITIVE_INFINITY, easing: 'linear' })\n}\n\n/**\n * 状态字形：不带圆底的一枚字形，尺寸随宿主的 --xh-icon-size，颜色随语气。\n *\n * 与 typeBadge 的分工是体量：圆底徽记是给对话框那种有余裕的版面用的（眼下只剩它在用），\n * 排在一行短消息里会把行高顶起来，也让一句话的反馈看着像一则公告。\n */\nexport function typeGlyph(type: string | undefined): VNode | null {\n  if (!type)\n    return null\n  if (type === 'loading') {\n    // key 必须与下面那支不同：同为无 key 的 span 会被判成同一个节点就地复用，\n    // 而转圈是 Web Animations 挂在元素上的，样式补丁不会把它收走——\n    // loading 改写成 success 之后那枚勾号会一直转\n    return h('span', {\n      'key': 'spin',\n      'style': GLYPH_STYLE,\n      'aria-hidden': 'true',\n      'onVnodeMounted': vnode => spin(vnode.el as HTMLElement),\n    }, [spinArc('100%')])\n  }\n  const mark = GLYPH_MARK[type]\n  if (!mark)\n    return null\n  const image = `var(${mark})`\n  // 图案经 mask 着色，取的就是本元素的 color，不必再套一层内节点\n  return h('span', {\n    'key': 'mark',\n    'style': {\n      ...GLYPH_STYLE,\n      backgroundColor: 'currentColor',\n      WebkitMask: `${image} center / contain no-repeat`,\n      mask: `${image} center / contain no-repeat`,\n    },\n    'aria-hidden': 'true',\n  })\n}\n\n/** 类型徽记：圆底 + 字形；loading 给转圈弧线。 */\nexport function typeBadge(type: string | undefined): VNode | null {\n  if (!type)\n    return null\n  if (type === 'loading') {\n    // 两支的 key 必须不同，理由同 typeGlyph\n    return h('span', {\n      'key': 'spin',\n      'style': BADGE_STYLE,\n      'aria-hidden': 'true',\n      'onVnodeMounted': vnode => spin(vnode.el as HTMLElement),\n    }, [spinArc(MARK_SIZE)])\n  }\n  const mark = GLYPH_MARK[type]\n  if (!mark)\n    return null\n  return h('span', { 'key': 'mark', 'style': BADGE_STYLE, 'aria-hidden': 'true' }, [h('span', { style: markStyle(mark) })])\n}\n"],"mappings":";;;;AAQA,MAAM,aAAa;AAEnB,MAAM,cAAc;CAClB,SAAS;CACT,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,WAAW;CAGX,OAAO;AACT;;AAGA,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,cAAc;CAClB,SAAS;CACT,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,WAAW;CACX,cAAc;CACd,YAAY;CACZ,OAAO;AACT;;AAGA,MAAM,aAAqC;CACzC,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,SAAS,UAAU,OAAuC;CACxD,MAAM,QAAQ,OAAO,MAAM;CAC3B,OAAO;EACL,SAAS;EACT,YAAY;EACZ,WAAW;EACX,iBAAiB;EACjB,YAAY,GAAG,MAAM;EACrB,MAAM,GAAG,MAAM;CACjB;AACF;;AAGA,SAAgB,QAAQ,OAAO,OAAc;CAC3C,OAAO,EAAE,OAAO;EACd,WAAW;EACX,SAAS;EACT,UAAU;EACV,eAAe;EACf,SAAS,EAAE,SAAS,QAAQ;CAC9B,GAAG,CACD,EAAE,UAAU;EACV,MAAM;EACN,MAAM;EACN,KAAK;EACL,QAAQ;EACR,UAAU;EACV,gBAAgB;EAChB,kBAAkB;EAClB,oBAAoB;EACpB,qBAAqB;CACvB,CAAC,CACH,CAAC;AACH;;AAGA,SAAS,cAAc,OAAuB;CAC5C,MAAM,IAAI,OAAO,WAAW,KAAK;CACjC,IAAI,CAAC,OAAO,SAAS,CAAC,GACpB,OAAO;CACT,OAAO,QAAQ,KAAK,KAAK,KAAK,CAAC,SAAS,KAAK,KAAK,IAAI,IAAI,MAAO;AACnE;;;;;;AAOA,SAAS,KAAK,IAAuB;CACnC,IAAI,OAAO,GAAG,YAAY,cAAc,wBAAwB,GAAG,eAAe,eAAe,KAAA,CAAS,MAAM,UAC9G;CACF,MAAM,WAAW,cAAc,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,oBAAoB,CAAC;CAC1F,IAAI,YAAY,GACd;CACF,GAAG,QAAQ,CAAC,EAAE,QAAQ,OAAO,GAAG,EAAE,QAAQ,SAAS,CAAC,GAAG;EAAE;EAAU,YAAY,OAAO;EAAmB,QAAQ;CAAS,CAAC;AAC7H;;;;;;;AAQA,SAAgB,UAAU,MAAwC;CAChE,IAAI,CAAC,MACH,OAAO;CACT,IAAI,SAAS,WAIX,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;EACT,eAAe;EACf,mBAAkB,UAAS,KAAK,MAAM,EAAiB;CACzD,GAAG,CAAC,QAAQ,MAAM,CAAC,CAAC;CAEtB,MAAM,OAAO,WAAW;CACxB,IAAI,CAAC,MACH,OAAO;CACT,MAAM,QAAQ,OAAO,KAAK;CAE1B,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;GACP,GAAG;GACH,iBAAiB;GACjB,YAAY,GAAG,MAAM;GACrB,MAAM,GAAG,MAAM;EACjB;EACA,eAAe;CACjB,CAAC;AACH;;AAGA,SAAgB,UAAU,MAAwC;CAChE,IAAI,CAAC,MACH,OAAO;CACT,IAAI,SAAS,WAEX,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;EACT,eAAe;EACf,mBAAkB,UAAS,KAAK,MAAM,EAAiB;CACzD,GAAG,CAAC,QAAQ,SAAS,CAAC,CAAC;CAEzB,MAAM,OAAO,WAAW;CACxB,IAAI,CAAC,MACH,OAAO;CACT,OAAO,EAAE,QAAQ;EAAE,OAAO;EAAQ,SAAS;EAAa,eAAe;CAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC;AAC1H"}

package/dist/services/loading-bar-service.d.ts

@@ -0,0 +1,46 @@
+import { XhConfig } from "../config/config.js";
+import { MaybeRefOrGetter } from "vue";
+import { LoadingBarTranslations } from "@xihan-ui/headless";
+import { Tone } from "@xihan-ui/kernel";
+//#region src/services/loading-bar-service.d.ts
+interface LoadingBarServiceOptions {
+  /** 正常收尾的语气，缺省 brand。 */
+  tone?: Tone;
+  /** error() 收尾用的语气，缺省 danger：出错的收尾要与正常收尾区分得开。 */
+  errorTone?: Tone;
+  height?: string | number;
+  color?: string;
+  trickle?: boolean;
+  trickleSpeed?: number;
+  minimum?: number;
+  fadeDuration?: number;
+  translations?: MaybeRefOrGetter<Partial<LoadingBarTranslations>>;
+  /**
+   * 喂给进度条子树的全局配置。
+   * 本服务自带宿主应用，接不到组件树里的 provideXhConfig，要让它跟应用同语言就从这里给；
+   * 传 ref/getter 即可运行期跟着切语言，也可以之后用 setConfig 推。
+   */
+  config?: MaybeRefOrGetter<XhConfig>;
+  /** 宿主容器；不给就在 body 下新建一个。 */
+  target?: HTMLElement;
+}
+interface LoadingBarService {
+  /** 在途计数 +1；从 0 起跳即开始爬升。 */
+  start: () => void;
+  /** 在途计数 -1（夹到 0，多调不会变负）；归零才收。 */
+  finish: () => void;
+  /** 强制归零并以 errorTone 收。 */
+  error: () => void;
+  /** 不管还剩几笔在途一律收掉（路由跳走时用）。 */
+  finishAll: () => void;
+  /** 切成确定进度：给了值就照它显示，内部爬升停止；再 start() 回到不确定。 */
+  set: (value: number) => void;
+  /** 换一份全局配置源。 */
+  setConfig: (next: MaybeRefOrGetter<XhConfig> | undefined) => void;
+  /** 卸载宿主应用并移除容器。 */
+  dispose: () => void;
+}
+declare function createLoadingBarService(options?: LoadingBarServiceOptions): LoadingBarService;
+//#endregion
+export { LoadingBarService, LoadingBarServiceOptions, createLoadingBarService };
+//# sourceMappingURL=loading-bar-service.d.ts.map

package/dist/services/loading-bar-service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-bar-service.d.ts","names":[],"sources":["../../src/services/loading-bar-service.ts"],"mappings":";;;;;UAeiB;;EAEf,OAAO;;EAEP,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA,eAAe,iBAAiB,QAAQ;;;;;;EAMxC,SAAS,iBAAiB;;EAE1B,SAAS;;UAGM;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA,MAAM;;EAEN,YAAY,MAAM,iBAAiB;;EAEnC;;iBAGc,wBAAwB,UAAS,2BAAgC"}