@xihan-ui/vue 2.1.0 → 3.0.0

package/dist/components/tree-select/use-tree-select.js

@@ -11,8 +11,10 @@ import { createPositionEngine } from "@xihan-ui/position";
 function useTreeSelect(props, handlers = {}) {
 	const xhConfig = useXhConfig();
 	const triggerRef = ref(null);
+	const controlRef = ref(null);
 	const positionerRef = ref(null);
 	const contentRef = ref(null);
+	const treeRef = ref(null);
 	const idGen = createVueIdGenerator();
 	const scope = createScope(null, idGen);
 	const service = useMachine(treeSelectMachine, () => ({
@@ -35,7 +37,8 @@ function useTreeSelect(props, handlers = {}) {
 		service.refs.set("config", config);
 		service.refs.set("registerLayer", registerLayer);
 		service.refs.set("position", createPositionEngine());
-		service.refs.set("getAnchorEl", () => triggerRef.value);
+		service.refs.set("getAnchorEl", () => controlRef.value ?? triggerRef.value);
+		service.refs.set("getTriggerEl", () => triggerRef.value);
 		service.refs.set("getFloatingEl", () => positionerRef.value);
 		service.refs.set("getContentEl", () => contentRef.value);
 	}
@@ -50,8 +53,10 @@ function useTreeSelect(props, handlers = {}) {
 		service,
 		api,
 		triggerRef,
+		controlRef,
 		positionerRef,
 		contentRef,
+		treeRef,
 		portalTarget: computed(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? "body")
 	};
 }

package/dist/components/tree-select/use-tree-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree-select.js","names":[],"sources":["../../../src/components/tree-select/use-tree-select.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use tree select 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { TreeSelectApi, TreeSelectSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectTreeSelect, treeSelectMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface TreeSelectContext {\n  /** 状态机实例，供部件上报 DOM 侧的事实（如节点卸载带走了焦点）。 */\n  service: Service<TreeSelectSchema>\n  api: ComputedRef<TreeSelectApi>\n  triggerRef: Ref<HTMLElement | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** 当前是否应当渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nexport function useTreeSelect(\n  props: TreeSelectSchema['props'],\n  handlers: Pick<TreeSelectSchema['props'], 'onValueChange' | 'onExpandedValueChange' | 'onOpenChange' | 'onBranchLoadStart' | 'onBranchLoad' | 'onBranchLoadError'> = {},\n): TreeSelectContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  // 对外回调由组件外壳（emit）或组合式调用方提供，随 props 一并喂给机器\n  const service = useMachine(treeSelectMachine, () => ({ ...props, ...handlers }), scope)\n\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按展开态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，点它算层内交互，开合由 trigger 自己切换；\n      // 浮层壳一并记上：content 之外还浮着自绘滚动条，按住它拖动不该把浮层消解掉\n      branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n      isModal: () => false,\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动；锚点取 trigger\n    service.refs.set('config', config!)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n    service.refs.set('getAnchorEl', () => triggerRef.value)\n    service.refs.set('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n  }\n\n  const api = computed(() => connectTreeSelect(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({\n    config,\n    isOpen: () => api.value.open,\n    contentRef,\n    onPresence: presence => service.refs.set('presence', presence),\n  })\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, triggerRef, positionerRef, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AAiCA,SAAgB,cACd,OACA,WAAqK,CAAC,GACnJ;CACnB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CAErC,MAAM,UAAU,WAAW,0BAA0B;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CAGtF,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;EACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CACzD;CAEA,MAAM,MAAM,eAAe,kBAAkB,SAAS,YAAY,CAAC;CAWnE,OAAO;EAAE,SATO,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM;GACxB;GACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;EAC/D,CAIe;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY,cAFlD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEvC;CAAE;AACtF"}
+{"version":3,"file":"use-tree-select.js","names":[],"sources":["../../../src/components/tree-select/use-tree-select.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use tree select 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { TreeSelectApi, TreeSelectSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectTreeSelect, treeSelectMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface TreeSelectContext {\n  /** 状态机实例，供部件上报 DOM 侧的事实（如节点卸载带走了焦点）。 */\n  service: Service<TreeSelectSchema>\n  api: ComputedRef<TreeSelectApi>\n  triggerRef: Ref<HTMLElement | null>\n  controlRef: Ref<HTMLElement | null>\n  positionerRef: Ref<HTMLElement | null>\n  contentRef: Ref<HTMLElement | null>\n  /** 树部件：浮层里的滚动面，自绘条接在它上面。 */\n  treeRef: Ref<HTMLElement | null>\n  /** 当前是否应当渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的容器 > 运行时的浮层落点 > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nexport function useTreeSelect(\n  props: TreeSelectSchema['props'],\n  handlers: Pick<TreeSelectSchema['props'], 'onValueChange' | 'onExpandedValueChange' | 'onOpenChange' | 'onBranchLoadStart' | 'onBranchLoad' | 'onBranchLoadError'> = {},\n): TreeSelectContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const controlRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n  const treeRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  // 对外回调由组件外壳（emit）或组合式调用方提供，随 props 一并喂给机器\n  const service = useMachine(treeSelectMachine, () => ({ ...props, ...handlers }), scope)\n\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按展开态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，点它算层内交互，开合由 trigger 自己切换；\n      // 浮层壳一并记上：content 之外还浮着自绘滚动条，按住它拖动不该把浮层消解掉\n      branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n      isModal: () => false,\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动；锚点取 trigger\n    service.refs.set('config', config!)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n    // 锚点是字段盒：列表面板与盒子同宽、左缘对齐；作者没写 control 时退回触发器\n    service.refs.set('getAnchorEl', () => controlRef.value ?? triggerRef.value)\n    service.refs.set('getTriggerEl', () => triggerRef.value)\n    service.refs.set('getFloatingEl', () => positionerRef.value)\n    service.refs.set('getContentEl', () => contentRef.value)\n  }\n\n  const api = computed(() => connectTreeSelect(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({\n    config,\n    isOpen: () => api.value.open,\n    contentRef,\n    onPresence: presence => service.refs.set('presence', presence),\n  })\n  // 全局配置写了容器就用它，否则落到运行时那个单一浮层落点；没有 DOM 时才回到 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, triggerRef, controlRef, positionerRef, contentRef, treeRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AAoCA,SAAgB,cACd,OACA,WAAqK,CAAC,GACnJ;CACnB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,UAAU,IAAwB,IAAI;CAE5C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CAErC,MAAM,UAAU,WAAW,0BAA0B;EAAE,GAAG;EAAO,GAAG;CAAS,IAAI,KAAK;CAGtF,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EAEnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,SAAS,WAAW,KAAK;EAC1E,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;EACvD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CACzD;CAEA,MAAM,MAAM,eAAe,kBAAkB,SAAS,YAAY,CAAC;CAWnE,OAAO;EAAE,SATO,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM;GACxB;GACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;EAC/D,CAIe;EAAG;EAAS;EAAK;EAAY;EAAY;EAAe;EAAY;EAAS,cAFvE,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAElB;CAAE;AAC3G"}

package/dist/components/truncate/truncate.d.ts

@@ -1,19 +1,26 @@
 import { PayloadOf } from "../../runtime/payload.js";
-import { SlotsType, VNode } from "vue";
-import { TruncateApi, TruncateSchema } from "@xihan-ui/headless";
+import { PropType, SlotsType, VNode } from "vue";
+import { TruncateApi, TruncatePosition, TruncateSchema, TruncateTranslations } from "@xihan-ui/headless";
 //#region src/components/truncate/truncate.d.ts
 type TruncateProps = TruncateSchema['props'];
 /** 默认插槽的载荷：展开态与测得的是否溢出，以及展开与重新测量的方法。 */
 type TruncateSlotProps = Pick<TruncateApi, 'open' | 'overflowing' | 'setOpen' | 'measure'>;
+/** trigger 插槽的载荷：展开态与按钮此刻的缺省文案。 */
+type TruncateTriggerSlotProps = Pick<TruncateApi, 'open' | 'triggerLabel'>;
 /**
  * 一段受限的文字：单行收为省略号，多行按行数裁剪。
  * 是否溢出由测量得出，写在 data-overflowing 上，也经默认插槽的 overflowing 交出：
  * 是否再附加提示由作者决定，这里不处理浮层。
+ * 开了 expandable 时在文字盒子之后铺一颗展开按钮，两个节点并排交给外层排版，透传属性落在文字盒子上。
  */
 declare const XhTruncate: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   lines: {
     type: NumberConstructor;
   };
+  /** 省略号落在哪：end 末尾、middle 中间（只对单行生效），默认 end。 */
+  position: {
+    type: PropType<TruncatePosition>;
+  };
   expandable: BooleanConstructor;
   open: {
     type: BooleanConstructor;
@@ -21,9 +28,14 @@ declare const XhTruncate: import("vue").DefineComponent<import("vue").ExtractPro
   };
   defaultOpen: BooleanConstructor;
   tooltip: BooleanConstructor;
+  translations: {
+    type: PropType<Partial<TruncateTranslations>>;
+  };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'open-change': (_details: PayloadOf<TruncateProps, "onOpenChange">) => true;
   'update:open': (_open: PayloadOf<TruncateProps, "onOpenChange">["open"]) => true;
   'overflow-change': (_details: PayloadOf<TruncateProps, "onOverflowChange">) => true;
@@ -31,6 +43,10 @@ declare const XhTruncate: import("vue").DefineComponent<import("vue").ExtractPro
   lines: {
     type: NumberConstructor;
   };
+  /** 省略号落在哪：end 末尾、middle 中间（只对单行生效），默认 end。 */
+  position: {
+    type: PropType<TruncatePosition>;
+  };
   expandable: BooleanConstructor;
   open: {
     type: BooleanConstructor;
@@ -38,6 +54,9 @@ declare const XhTruncate: import("vue").DefineComponent<import("vue").ExtractPro
   };
   defaultOpen: BooleanConstructor;
   tooltip: BooleanConstructor;
+  translations: {
+    type: PropType<Partial<TruncateTranslations>>;
+  };
 }>> & Readonly<{
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").TruncateOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
@@ -49,7 +68,9 @@ declare const XhTruncate: import("vue").DefineComponent<import("vue").ExtractPro
   expandable: boolean;
 }, SlotsType<{
   default?: (props: TruncateSlotProps) => VNode[];
+  /** 展开按钮里的内容，缺省是随展开态切换的那一句文案。 */
+  trigger?: (props: TruncateTriggerSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { TruncateSlotProps, XhTruncate };
+export { TruncateSlotProps, TruncateTriggerSlotProps, XhTruncate };
 //# sourceMappingURL=truncate.d.ts.map

package/dist/components/truncate/truncate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"truncate.d.ts","names":[],"sources":["../../../src/components/truncate/truncate.ts"],"mappings":";;;;KAaK,gBAAgB;;KAGT,oBAAoB,KAAK;;;;;;cAOxB,0BAAU,8BAAA;;;;;;;;;;;;;;EAYO,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;EAG9B,WAAC,OAAO,sBAAsB;kCAoB1C"}
+{"version":3,"file":"truncate.d.ts","names":[],"sources":["../../../src/components/truncate/truncate.ts"],"mappings":";;;;KAcK,gBAAgB;;KAGT,oBAAoB,KAAK;;KAGzB,2BAA2B,KAAK;;;;;;;cAQ/B,0BAAU,8BAAA;;;;;;IAOS,MAAA,SAAS;;;;;;;;;;IAKL,MAAA,SAAS,QAAQ;;;;;;;EAIvB,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;;;;;;;IAXZ,MAAA,SAAS;;;;;;;;;;IAKL,MAAA,SAAS,QAAQ;;;;;;;;;;;;EASvC,WAAC,OAAO,sBAAsB;;EAE9B,WAAC,OAAO,6BAA6B;kCAgCjD"}

package/dist/components/truncate/truncate.js

@@ -1,3 +1,4 @@
+import { withXhConfig } from "../../config/config.js";
 import { useTruncate } from "./use-truncate.js";
 import { defineComponent, h } from "vue";
 //#region src/components/truncate/truncate.ts
@@ -5,18 +6,23 @@ import { defineComponent, h } from "vue";
 * 一段受限的文字：单行收为省略号，多行按行数裁剪。
 * 是否溢出由测量得出，写在 data-overflowing 上，也经默认插槽的 overflowing 交出：
 * 是否再附加提示由作者决定，这里不处理浮层。
+* 开了 expandable 时在文字盒子之后铺一颗展开按钮，两个节点并排交给外层排版，透传属性落在文字盒子上。
 */
 const XhTruncate = defineComponent({
 	name: "XhTruncate",
+	inheritAttrs: false,
 	props: {
 		lines: { type: Number },
+		/** 省略号落在哪：end 末尾、middle 中间（只对单行生效），默认 end。 */
+		position: { type: String },
 		expandable: Boolean,
 		open: {
 			type: Boolean,
 			default: void 0
 		},
 		defaultOpen: Boolean,
-		tooltip: Boolean
+		tooltip: Boolean,
+		translations: { type: Object }
 	},
 	emits: {
 		"open-change": (_details) => true,
@@ -24,25 +30,34 @@ const XhTruncate = defineComponent({
 		"overflow-change": (_details) => true
 	},
 	slots: Object,
-	setup(props, { slots, emit }) {
-		const ctx = useTruncate(props, {
+	setup(props, { slots, emit, attrs }) {
+		const ctx = useTruncate(withXhConfig("truncate", props), {
 			onOpenChange: (details) => {
 				emit("open-change", details);
 				emit("update:open", details.open);
 			},
 			onOverflowChange: (details) => emit("overflow-change", details)
 		});
-		return () => h("div", {
-			...ctx.api.value.getRootProps(),
-			ref: (el) => {
-				ctx.rootRef.value = el;
-			}
-		}, slots.default?.({
-			open: ctx.api.value.open,
-			overflowing: ctx.api.value.overflowing,
-			setOpen: ctx.api.value.setOpen,
-			measure: ctx.api.value.measure
-		}));
+		return () => {
+			const api = ctx.api.value;
+			const text = h("div", {
+				...attrs,
+				...api.getRootProps(),
+				ref: (el) => {
+					ctx.rootRef.value = el;
+				}
+			}, slots.default?.({
+				open: api.open,
+				overflowing: api.overflowing,
+				setOpen: api.setOpen,
+				measure: api.measure
+			}));
+			if (!props.expandable) return text;
+			return [text, h("button", api.getTriggerProps(), slots.trigger?.({
+				open: api.open,
+				triggerLabel: api.triggerLabel
+			}) ?? api.triggerLabel)];
+		};
 	}
 });
 //#endregion

package/dist/components/truncate/truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/truncate/truncate.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 truncate 相关实现。\n\nimport type { TruncateApi, TruncateSchema } from '@xihan-ui/headless'\nimport type { SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { useTruncate } from './use-truncate'\n\ntype TruncateProps = TruncateSchema['props']\n\n/** 默认插槽的载荷：展开态与测得的是否溢出，以及展开与重新测量的方法。 */\nexport type TruncateSlotProps = Pick<TruncateApi, 'open' | 'overflowing' | 'setOpen' | 'measure'>\n\n/**\n * 一段受限的文字：单行收为省略号，多行按行数裁剪。\n * 是否溢出由测量得出，写在 data-overflowing 上，也经默认插槽的 overflowing 交出：\n * 是否再附加提示由作者决定，这里不处理浮层。\n */\nexport const XhTruncate = defineComponent({\n  name: 'XhTruncate',\n  // 缺省值由机器与 connect 决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    lines: { type: Number },\n    expandable: Boolean,\n    open: { type: Boolean, default: undefined },\n    defaultOpen: Boolean,\n    tooltip: Boolean,\n  },\n  // open-change 携带 { open }，update:open 携带裸布尔\n  emits: {\n    'open-change': (_details: PayloadOf<TruncateProps, 'onOpenChange'>) => true,\n    'update:open': (_open: PayloadOf<TruncateProps, 'onOpenChange'>['open']) => true,\n    'overflow-change': (_details: PayloadOf<TruncateProps, 'onOverflowChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: TruncateSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useTruncate(props as TruncateProps, {\n      onOpenChange: (details) => {\n        emit('open-change', details)\n        emit('update:open', details.open)\n      },\n      onOverflowChange: details => emit('overflow-change', details),\n    })\n    return () => h('div', {\n      ...ctx.api.value.getRootProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n    }, slots.default?.({\n      open: ctx.api.value.open,\n      overflowing: ctx.api.value.overflowing,\n      setOpen: ctx.api.value.setOpen,\n      measure: ctx.api.value.measure,\n    }))\n  },\n})\n"],"mappings":";;;;;;;;AAuBA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CAEN,OAAO;EACL,OAAO,EAAE,MAAM,OAAO;EACtB,YAAY;EACZ,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa;EACb,SAAS;CACX;CAEA,OAAO;EACL,gBAAgB,aAAuD;EACvE,gBAAgB,UAA4D;EAC5E,oBAAoB,aAA2D;CACjF;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,MAAM,YAAY,OAAwB;GAC9C,eAAe,YAAY;IACzB,KAAK,eAAe,OAAO;IAC3B,KAAK,eAAe,QAAQ,IAAI;GAClC;GACA,mBAAkB,YAAW,KAAK,mBAAmB,OAAO;EAC9D,CAAC;EACD,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,MAAM,OAAgB;IAAE,IAAI,QAAQ,QAAQ;GAAkB;EAChE,GAAG,MAAM,UAAU;GACjB,MAAM,IAAI,IAAI,MAAM;GACpB,aAAa,IAAI,IAAI,MAAM;GAC3B,SAAS,IAAI,IAAI,MAAM;GACvB,SAAS,IAAI,IAAI,MAAM;EACzB,CAAC,CAAC;CACJ;AACF,CAAC"}
+{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/truncate/truncate.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 truncate 相关实现。\n\nimport type { TruncateApi, TruncatePosition, TruncateSchema, TruncateTranslations } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useTruncate } from './use-truncate'\n\ntype TruncateProps = TruncateSchema['props']\n\n/** 默认插槽的载荷：展开态与测得的是否溢出，以及展开与重新测量的方法。 */\nexport type TruncateSlotProps = Pick<TruncateApi, 'open' | 'overflowing' | 'setOpen' | 'measure'>\n\n/** trigger 插槽的载荷：展开态与按钮此刻的缺省文案。 */\nexport type TruncateTriggerSlotProps = Pick<TruncateApi, 'open' | 'triggerLabel'>\n\n/**\n * 一段受限的文字：单行收为省略号，多行按行数裁剪。\n * 是否溢出由测量得出，写在 data-overflowing 上，也经默认插槽的 overflowing 交出：\n * 是否再附加提示由作者决定，这里不处理浮层。\n * 开了 expandable 时在文字盒子之后铺一颗展开按钮，两个节点并排交给外层排版，透传属性落在文字盒子上。\n */\nexport const XhTruncate = defineComponent({\n  name: 'XhTruncate',\n  inheritAttrs: false,\n  // 缺省值由机器与 connect 决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    lines: { type: Number },\n    /** 省略号落在哪：end 末尾、middle 中间（只对单行生效），默认 end。 */\n    position: { type: String as PropType<TruncatePosition> },\n    expandable: Boolean,\n    open: { type: Boolean, default: undefined },\n    defaultOpen: Boolean,\n    tooltip: Boolean,\n    translations: { type: Object as PropType<Partial<TruncateTranslations>> },\n  },\n  // open-change 携带 { open }，update:open 携带裸布尔\n  emits: {\n    'open-change': (_details: PayloadOf<TruncateProps, 'onOpenChange'>) => true,\n    'update:open': (_open: PayloadOf<TruncateProps, 'onOpenChange'>['open']) => true,\n    'overflow-change': (_details: PayloadOf<TruncateProps, 'onOverflowChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: TruncateSlotProps) => VNode[]\n    /** 展开按钮里的内容，缺省是随展开态切换的那一句文案。 */\n    trigger?: (props: TruncateTriggerSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit, attrs }) {\n    const ctx = useTruncate(withXhConfig('truncate', props) as TruncateProps, {\n      onOpenChange: (details) => {\n        emit('open-change', details)\n        emit('update:open', details.open)\n      },\n      onOverflowChange: details => emit('overflow-change', details),\n    })\n    return () => {\n      const api = ctx.api.value\n      const text = h('div', {\n        ...attrs,\n        ...api.getRootProps() as Record<string, unknown>,\n        ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n      }, slots.default?.({\n        open: api.open,\n        overflowing: api.overflowing,\n        setOpen: api.setOpen,\n        measure: api.measure,\n      }))\n      if (!props.expandable)\n        return text\n      const trigger = h(\n        'button',\n        api.getTriggerProps() as Record<string, unknown>,\n        slots.trigger?.({ open: api.open, triggerLabel: api.triggerLabel }) ?? api.triggerLabel,\n      )\n      return [text, trigger]\n    }\n  },\n})\n"],"mappings":";;;;;;;;;;AA4BA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,cAAc;CAEd,OAAO;EACL,OAAO,EAAE,MAAM,OAAO;;EAEtB,UAAU,EAAE,MAAM,OAAqC;EACvD,YAAY;EACZ,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa;EACb,SAAS;EACT,cAAc,EAAE,MAAM,OAAkD;CAC1E;CAEA,OAAO;EACL,gBAAgB,aAAuD;EACvE,gBAAgB,UAA4D;EAC5E,oBAAoB,aAA2D;CACjF;CACA,OAAO;CAKP,MAAM,OAAO,EAAE,OAAO,MAAM,SAAS;EACnC,MAAM,MAAM,YAAY,aAAa,YAAY,KAAK,GAAoB;GACxE,eAAe,YAAY;IACzB,KAAK,eAAe,OAAO;IAC3B,KAAK,eAAe,QAAQ,IAAI;GAClC;GACA,mBAAkB,YAAW,KAAK,mBAAmB,OAAO;EAC9D,CAAC;EACD,aAAa;GACX,MAAM,MAAM,IAAI,IAAI;GACpB,MAAM,OAAO,EAAE,OAAO;IACpB,GAAG;IACH,GAAG,IAAI,aAAa;IACpB,MAAM,OAAgB;KAAE,IAAI,QAAQ,QAAQ;IAAkB;GAChE,GAAG,MAAM,UAAU;IACjB,MAAM,IAAI;IACV,aAAa,IAAI;IACjB,SAAS,IAAI;IACb,SAAS,IAAI;GACf,CAAC,CAAC;GACF,IAAI,CAAC,MAAM,YACT,OAAO;GAMT,OAAO,CAAC,MALQ,EACd,UACA,IAAI,gBAAgB,GACpB,MAAM,UAAU;IAAE,MAAM,IAAI;IAAM,cAAc,IAAI;GAAa,CAAC,KAAK,IAAI,YAEzD,CAAC;EACvB;CACF;AACF,CAAC"}

package/dist/components/truncate/use-truncate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-truncate.d.ts","names":[],"sources":["../../../src/components/truncate/use-truncate.ts"],"mappings":";;;;;KAgBY,oBAAoB,KAAK;UAEpB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;;iBAIC,YACd,OAAO,yBACP,SAAS,oBACR"}
+{"version":3,"file":"use-truncate.d.ts","names":[],"sources":["../../../src/components/truncate/use-truncate.ts"],"mappings":";;;;;KAkBY,oBAAoB,KAAK;UAEpB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;;iBAIC,YACd,OAAO,yBACP,SAAS,oBACR"}

package/dist/components/truncate/use-truncate.js

@@ -1,6 +1,8 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
+import { createVueIdGenerator } from "../../runtime/vue-id.js";
 import { computed, ref } from "vue";
+import { createScope } from "@xihan-ui/core";
 import { connectTruncate, truncateMachine } from "@xihan-ui/headless";
 //#region src/components/truncate/use-truncate.ts
 /** 测量与监听都在状态机的效应中运行，DOM 取值口经 refs 交入。 */
@@ -9,7 +11,7 @@ function useTruncate(props, notify) {
 	const service = useMachine(truncateMachine, () => ({
 		...props,
 		...notify
-	}));
+	}), createScope(null, createVueIdGenerator()));
 	service.refs.set("getRootEl", () => rootRef.value);
 	return {
 		api: computed(() => connectTruncate(service, vueNormalize)),

package/dist/components/truncate/use-truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-truncate.js","names":[],"sources":["../../../src/components/truncate/use-truncate.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use truncate 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { TruncateApi, TruncateSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectTruncate, truncateMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\n/** 对外的两个回调。 */\nexport type TruncateNotifiers = Pick<TruncateSchema['props'], 'onOpenChange' | 'onOverflowChange'>\n\nexport interface TruncateContext {\n  api: ComputedRef<TruncateApi>\n  service: Service<TruncateSchema>\n  /** 限制文字的盒子：溢出与文字都测量它。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\n/** 测量与监听都在状态机的效应中运行，DOM 取值口经 refs 交入。 */\nexport function useTruncate(\n  props: TruncateSchema['props'],\n  notify?: TruncateNotifiers,\n): TruncateContext {\n  const rootRef = ref<HTMLElement | null>(null)\n  // 传响应式 props 对象本身而非快照，供机器每次读时重新展开\n  const service = useMachine(truncateMachine, () => ({ ...props, ...notify }))\n\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectTruncate(service, vueNormalize))\n  return { api, service, rootRef }\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,YACd,OACA,QACiB;CACjB,MAAM,UAAU,IAAwB,IAAI;CAE5C,MAAM,UAAU,WAAW,wBAAwB;EAAE,GAAG;EAAO,GAAG;CAAO,EAAE;CAE3E,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAGjD,OAAO;EAAE,KADG,eAAe,gBAAgB,SAAS,YAAY,CACrD;EAAG;EAAS;CAAQ;AACjC"}
+{"version":3,"file":"use-truncate.js","names":[],"sources":["../../../src/components/truncate/use-truncate.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use truncate 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { TruncateApi, TruncateSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectTruncate, truncateMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\n/** 对外的两个回调。 */\nexport type TruncateNotifiers = Pick<TruncateSchema['props'], 'onOpenChange' | 'onOverflowChange'>\n\nexport interface TruncateContext {\n  api: ComputedRef<TruncateApi>\n  service: Service<TruncateSchema>\n  /** 限制文字的盒子：溢出与文字都测量它。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\n/** 测量与监听都在状态机的效应中运行，DOM 取值口经 refs 交入。 */\nexport function useTruncate(\n  props: TruncateSchema['props'],\n  notify?: TruncateNotifiers,\n): TruncateContext {\n  const rootRef = ref<HTMLElement | null>(null)\n  // 传响应式 props 对象本身而非快照，供机器每次读时重新展开；\n  // 展开按钮以 aria-controls 指回文字盒子，id 要按实例派生\n  const service = useMachine(truncateMachine, () => ({ ...props, ...notify }), createScope(null, createVueIdGenerator()))\n\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectTruncate(service, vueNormalize))\n  return { api, service, rootRef }\n}\n"],"mappings":";;;;;;;;AA4BA,SAAgB,YACd,OACA,QACiB;CACjB,MAAM,UAAU,IAAwB,IAAI;CAG5C,MAAM,UAAU,WAAW,wBAAwB;EAAE,GAAG;EAAO,GAAG;CAAO,IAAI,YAAY,MAAM,qBAAqB,CAAC,CAAC;CAEtH,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAGjD,OAAO;EAAE,KADG,eAAe,gBAAgB,SAAS,YAAY,CACrD;EAAG;EAAS;CAAQ;AACjC"}

package/dist/components/typography/typography.d.ts

@@ -55,8 +55,8 @@ declare const XhTypographyParagraph: import("vue").DefineComponent<{}, () => imp
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
- * 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重。
- * as 决定渲染为哪个标签，默认 span；需要 code / strong 的原生语义时自行写明。
+ * 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重；删除线、下划线与标记各是一个开关。
+ * as 决定渲染为哪个标签，默认 span；需要 code / strong / del / mark 的原生语义时自行写明。
  */
 declare const XhTypographyText: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   tone: {
@@ -68,6 +68,21 @@ declare const XhTypographyText: import("vue").DefineComponent<import("vue").Extr
   weight: {
     type: PropType<TypographyWeight>;
   };
+  /** 删除线：只画线，表达"已删除"时 as 写 del 或 s。 */
+  strikethrough: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** 下划线：只画线，与链接同形。 */
+  underline: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** 标记：淡底加同族字色，有 tone 时换成该族；表达"被标出"时 as 写 mark。 */
+  mark: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   as: {
     type: StringConstructor;
     default: string;
@@ -84,12 +99,30 @@ declare const XhTypographyText: import("vue").DefineComponent<import("vue").Extr
   weight: {
     type: PropType<TypographyWeight>;
   };
+  /** 删除线：只画线，表达"已删除"时 as 写 del 或 s。 */
+  strikethrough: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** 下划线：只画线，与链接同形。 */
+  underline: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** 标记：淡底加同族字色，有 tone 时换成该族；表达"被标出"时 as 写 mark。 */
+  mark: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
   as: {
     type: StringConstructor;
     default: string;
   };
 }>> & Readonly<{}>, {
   as: string;
+  mark: boolean;
+  strikethrough: boolean;
+  underline: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * 富文本容器：外来的 HTML（Markdown 渲染结果）铺入其中，样式按标签给出。

package/dist/components/typography/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","names":[],"sources":["../../../src/components/typography/typography.ts"],"mappings":";;;;;cAiBa,gCAAgB,8BAAA;;IAGD,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACR,MAAA,SAAS;;;;;;IAFX,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACR,MAAA,SAAS;;MASrC,oDAAA;;;;;cAMW,mCAAmB,8BAAA;;IAGO,MAAA,SAAS;;;;;;;;;;IAAT,MAAA,SAAS;;;;;;;;qCAW9C;cAEW,qCAAqB,wCAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;;;;cAMW,gCAAgB,8BAAA;;IAGD,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;;;IAFX,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;qCAWrC;;;;;cAMW,iCAAiB,8BAAA;;;;;;;;;;;;;;qCAS5B;cAGW,gCAAgB,wCAAA,oBAAA,4BAAA;;8BAM3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"typography.d.ts","names":[],"sources":["../../../src/components/typography/typography.ts"],"mappings":";;;;;cAiBa,gCAAgB,8BAAA;;IAGD,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACR,MAAA,SAAS;;;;;;IAFX,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACR,MAAA,SAAS;;MASrC,oDAAA;;;;;cAMW,mCAAmB,8BAAA;;IAGO,MAAA,SAAS;;;;;;;;;;IAAT,MAAA,SAAS;;;;;;;;qCAW9C;cAEW,qCAAqB,wCAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;;;;cAMW,gCAAgB,8BAAA;;IAGD,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;IAFX,MAAA,SAAS;;;IACN,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;qCAwBrC;;;;;cAMW,iCAAiB,8BAAA;;;;;;;;;;;;;;qCAS5B;cAGW,gCAAgB,wCAAA,oBAAA,4BAAA;;8BAM3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/typography/typography.js

@@ -45,8 +45,8 @@ const XhTypographyParagraph = defineComponent({
 	}
 });
 /**
-* 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重。
-* as 决定渲染为哪个标签，默认 span；需要 code / strong 的原生语义时自行写明。
+* 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重；删除线、下划线与标记各是一个开关。
+* as 决定渲染为哪个标签，默认 span；需要 code / strong / del / mark 的原生语义时自行写明。
 */
 const XhTypographyText = defineComponent({
 	name: "XhTypographyText",
@@ -54,6 +54,21 @@ const XhTypographyText = defineComponent({
 		tone: { type: String },
 		variant: { type: String },
 		weight: { type: String },
+		/** 删除线：只画线，表达"已删除"时 as 写 del 或 s。 */
+		strikethrough: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 下划线：只画线，与链接同形。 */
+		underline: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 标记：淡底加同族字色，有 tone 时换成该族；表达"被标出"时 as 写 mark。 */
+		mark: {
+			type: Boolean,
+			default: void 0
+		},
 		as: {
 			type: String,
 			default: "span"
@@ -64,7 +79,10 @@ const XhTypographyText = defineComponent({
 		return () => h(props.as, ctx.api.value.getTextProps({
 			tone: props.tone,
 			variant: props.variant,
-			weight: props.weight
+			weight: props.weight,
+			strikethrough: props.strikethrough,
+			underline: props.underline,
+			mark: props.mark
 		}), slots.default?.());
 	}
 });

package/dist/components/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../../../src/components/typography/typography.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 typography 相关实现。\n\nimport type { Size, Tone } from '@xihan-ui/core'\nimport type { TypographyAlign, TypographyLevel, TypographyProps, TypographyVariant, TypographyWeight } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectTypography } from '@xihan-ui/headless'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { provideTypography, useTypographyContext } from './context'\n\n/** 正文块容器，管理段间距与最大行宽；默认值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined */\nexport const XhTypographyRoot = defineComponent({\n  name: 'XhTypographyRoot',\n  props: {\n    size: { type: String as PropType<Size> },\n    align: { type: String as PropType<TypographyAlign> },\n    weight: { type: String as PropType<TypographyWeight> },\n  },\n  setup(props, { slots }) {\n    // withXhConfig 只能在 setup 期调，连接层在渲染期读这份代理\n    const configured = withXhConfig('typography', props)\n    const api = computed(() => connectTypography(configured as TypographyProps, vueNormalize))\n    provideTypography({ api })\n    return () => h('div', api.value.getRootProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 标题：level 只切换字号档位，不决定标签。\n * as 决定渲染为哪个标签，默认 p；需要进入文档大纲时写 as=\"h2\"。\n */\nexport const XhTypographyHeading = defineComponent({\n  name: 'XhTypographyHeading',\n  props: {\n    level: { type: [Number, String] as PropType<TypographyLevel | string> },\n    as: { type: String, default: 'p' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(\n      props.as,\n      ctx.api.value.getHeadingProps({ level: props.level }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhTypographyParagraph = defineComponent({\n  name: 'XhTypographyParagraph',\n  setup(_, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h('p', ctx.api.value.getParagraphProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重。\n * as 决定渲染为哪个标签，默认 span；需要 code / strong 的原生语义时自行写明。\n */\nexport const XhTypographyText = defineComponent({\n  name: 'XhTypographyText',\n  props: {\n    tone: { type: String as PropType<Tone> },\n    variant: { type: String as PropType<TypographyVariant> },\n    weight: { type: String as PropType<TypographyWeight> },\n    as: { type: String, default: 'span' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(\n      props.as,\n      ctx.api.value.getTextProps({ tone: props.tone, variant: props.variant, weight: props.weight }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\n/**\n * 富文本容器：外来的 HTML（Markdown 渲染结果）铺入其中，样式按标签给出。\n * as 决定渲染为哪个标签，默认 div。\n */\nexport const XhTypographyProse = defineComponent({\n  name: 'XhTypographyProse',\n  props: {\n    as: { type: String, default: 'div' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(props.as, ctx.api.value.getProseProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n// href、target、rel 由作者写，这里只给身份\nexport const XhTypographyLink = defineComponent({\n  name: 'XhTypographyLink',\n  setup(_, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h('a', ctx.api.value.getLinkProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;;;;AAiBA,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;EACL,MAAM,EAAE,MAAM,OAAyB;EACvC,OAAO,EAAE,MAAM,OAAoC;EACnD,QAAQ,EAAE,MAAM,OAAqC;CACvD;CACA,MAAM,OAAO,EAAE,SAAS;EAEtB,MAAM,aAAa,aAAa,cAAc,KAAK;EACnD,MAAM,MAAM,eAAe,kBAAkB,YAA+B,YAAY,CAAC;EACzF,kBAAkB,EAAE,IAAI,CAAC;EACzB,aAAa,EAAE,OAAO,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAC9F;AACF,CAAC;;;;;AAMD,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,OAAO;EACL,OAAO,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAwC;EACtE,IAAI;GAAE,MAAM;GAAQ,SAAS;EAAI;CACnC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EACX,MAAM,IACN,IAAI,IAAI,MAAM,gBAAgB,EAAE,OAAO,MAAM,MAAM,CAAC,GACpD,MAAM,UAAU,CAClB;CACF;AACF,CAAC;AAED,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,KAAK,IAAI,IAAI,MAAM,kBAAkB,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;;;;;AAMD,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;EACL,MAAM,EAAE,MAAM,OAAyB;EACvC,SAAS,EAAE,MAAM,OAAsC;EACvD,QAAQ,EAAE,MAAM,OAAqC;EACrD,IAAI;GAAE,MAAM;GAAQ,SAAS;EAAO;CACtC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EACX,MAAM,IACN,IAAI,IAAI,MAAM,aAAa;GAAE,MAAM,MAAM;GAAM,SAAS,MAAM;GAAS,QAAQ,MAAM;EAAO,CAAC,GAC7F,MAAM,UAAU,CAClB;CACF;AACF,CAAC;;;;;AAMD,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO,EACL,IAAI;EAAE,MAAM;EAAQ,SAAS;CAAM,EACrC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,MAAM,IAAI,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CACtG;AACF,CAAC;AAGD,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,KAAK,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAChG;AACF,CAAC"}
+{"version":3,"file":"typography.js","names":[],"sources":["../../../src/components/typography/typography.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 typography 相关实现。\n\nimport type { Size, Tone } from '@xihan-ui/core'\nimport type { TypographyAlign, TypographyLevel, TypographyProps, TypographyVariant, TypographyWeight } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectTypography } from '@xihan-ui/headless'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { provideTypography, useTypographyContext } from './context'\n\n/** 正文块容器，管理段间距与最大行宽；默认值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined */\nexport const XhTypographyRoot = defineComponent({\n  name: 'XhTypographyRoot',\n  props: {\n    size: { type: String as PropType<Size> },\n    align: { type: String as PropType<TypographyAlign> },\n    weight: { type: String as PropType<TypographyWeight> },\n  },\n  setup(props, { slots }) {\n    // withXhConfig 只能在 setup 期调，连接层在渲染期读这份代理\n    const configured = withXhConfig('typography', props)\n    const api = computed(() => connectTypography(configured as TypographyProps, vueNormalize))\n    provideTypography({ api })\n    return () => h('div', api.value.getRootProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 标题：level 只切换字号档位，不决定标签。\n * as 决定渲染为哪个标签，默认 p；需要进入文档大纲时写 as=\"h2\"。\n */\nexport const XhTypographyHeading = defineComponent({\n  name: 'XhTypographyHeading',\n  props: {\n    level: { type: [Number, String] as PropType<TypographyLevel | string> },\n    as: { type: String, default: 'p' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(\n      props.as,\n      ctx.api.value.getHeadingProps({ level: props.level }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhTypographyParagraph = defineComponent({\n  name: 'XhTypographyParagraph',\n  setup(_, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h('p', ctx.api.value.getParagraphProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/**\n * 行内文字：variant 切换形态，tone 切换语气色，weight 切换字重；删除线、下划线与标记各是一个开关。\n * as 决定渲染为哪个标签，默认 span；需要 code / strong / del / mark 的原生语义时自行写明。\n */\nexport const XhTypographyText = defineComponent({\n  name: 'XhTypographyText',\n  props: {\n    tone: { type: String as PropType<Tone> },\n    variant: { type: String as PropType<TypographyVariant> },\n    weight: { type: String as PropType<TypographyWeight> },\n    /** 删除线：只画线，表达\"已删除\"时 as 写 del 或 s。 */\n    strikethrough: { type: Boolean, default: undefined },\n    /** 下划线：只画线，与链接同形。 */\n    underline: { type: Boolean, default: undefined },\n    /** 标记：淡底加同族字色，有 tone 时换成该族；表达\"被标出\"时 as 写 mark。 */\n    mark: { type: Boolean, default: undefined },\n    as: { type: String, default: 'span' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(\n      props.as,\n      ctx.api.value.getTextProps({\n        tone: props.tone,\n        variant: props.variant,\n        weight: props.weight,\n        strikethrough: props.strikethrough,\n        underline: props.underline,\n        mark: props.mark,\n      }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\n/**\n * 富文本容器：外来的 HTML（Markdown 渲染结果）铺入其中，样式按标签给出。\n * as 决定渲染为哪个标签，默认 div。\n */\nexport const XhTypographyProse = defineComponent({\n  name: 'XhTypographyProse',\n  props: {\n    as: { type: String, default: 'div' },\n  },\n  setup(props, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h(props.as, ctx.api.value.getProseProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n// href、target、rel 由作者写，这里只给身份\nexport const XhTypographyLink = defineComponent({\n  name: 'XhTypographyLink',\n  setup(_, { slots }) {\n    const ctx = useTypographyContext()\n    return () => h('a', ctx.api.value.getLinkProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;;;;AAiBA,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;EACL,MAAM,EAAE,MAAM,OAAyB;EACvC,OAAO,EAAE,MAAM,OAAoC;EACnD,QAAQ,EAAE,MAAM,OAAqC;CACvD;CACA,MAAM,OAAO,EAAE,SAAS;EAEtB,MAAM,aAAa,aAAa,cAAc,KAAK;EACnD,MAAM,MAAM,eAAe,kBAAkB,YAA+B,YAAY,CAAC;EACzF,kBAAkB,EAAE,IAAI,CAAC;EACzB,aAAa,EAAE,OAAO,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAC9F;AACF,CAAC;;;;;AAMD,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,OAAO;EACL,OAAO,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAwC;EACtE,IAAI;GAAE,MAAM;GAAQ,SAAS;EAAI;CACnC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EACX,MAAM,IACN,IAAI,IAAI,MAAM,gBAAgB,EAAE,OAAO,MAAM,MAAM,CAAC,GACpD,MAAM,UAAU,CAClB;CACF;AACF,CAAC;AAED,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,KAAK,IAAI,IAAI,MAAM,kBAAkB,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;;;;;AAMD,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;EACL,MAAM,EAAE,MAAM,OAAyB;EACvC,SAAS,EAAE,MAAM,OAAsC;EACvD,QAAQ,EAAE,MAAM,OAAqC;;EAErD,eAAe;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAEnD,WAAW;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAE/C,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,IAAI;GAAE,MAAM;GAAQ,SAAS;EAAO;CACtC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EACX,MAAM,IACN,IAAI,IAAI,MAAM,aAAa;GACzB,MAAM,MAAM;GACZ,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,eAAe,MAAM;GACrB,WAAW,MAAM;GACjB,MAAM,MAAM;EACd,CAAC,GACD,MAAM,UAAU,CAClB;CACF;AACF,CAAC;;;;;AAMD,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO,EACL,IAAI;EAAE,MAAM;EAAQ,SAAS;CAAM,EACrC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,MAAM,IAAI,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CACtG;AACF,CAAC;AAGD,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,KAAK,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU,CAAC;CAChG;AACF,CAAC"}

package/dist/components/virtualizer/virtualizer.d.ts

@@ -1,10 +1,10 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { VirtualizerApi, VirtualizerRangeChangeDetails, VirtualizerSchema } from "@xihan-ui/headless";
+import { VirtualizerAnchor, VirtualizerApi, VirtualizerRangeChangeDetails, VirtualizerSchema, VirtualizerScrollContainer } from "@xihan-ui/headless";
 //#region src/components/virtualizer/virtualizer.d.ts
 type VirtualizerProps = VirtualizerSchema['props'];
 /** 默认插槽的载荷：当前应渲染的条目与总长、可视区首末下标与滚动态，以及滚动与测量尺寸的动作。 */
-type VirtualizerRootSlotProps = Pick<VirtualizerApi, 'virtualItems' | 'totalSize' | 'startIndex' | 'endIndex' | 'scrolling' | 'lanes' | 'scrollToIndex' | 'measureElement' | 'measure'>;
+type VirtualizerRootSlotProps = Pick<VirtualizerApi, 'virtualItems' | 'totalSize' | 'startIndex' | 'endIndex' | 'scrolling' | 'lanes' | 'collectionVirtualizer' | 'scrollToIndex' | 'measureElement' | 'measure'>;
 declare const XhVirtualizerRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   count: {
     type: NumberConstructor;
@@ -37,6 +37,18 @@ declare const XhVirtualizerRoot: import("vue").DefineComponent<import("vue").Ext
   lanes: {
     type: NumberConstructor;
   };
+  viewportTabIndex: {
+    type: NumberConstructor;
+  };
+  scrollContainer: {
+    type: PropType<VirtualizerScrollContainer>;
+  };
+  anchor: {
+    type: PropType<VirtualizerAnchor>;
+  };
+  stickyIndices: {
+    type: PropType<number[]>;
+  };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -73,6 +85,18 @@ declare const XhVirtualizerRoot: import("vue").DefineComponent<import("vue").Ext
   lanes: {
     type: NumberConstructor;
   };
+  viewportTabIndex: {
+    type: NumberConstructor;
+  };
+  scrollContainer: {
+    type: PropType<VirtualizerScrollContainer>;
+  };
+  anchor: {
+    type: PropType<VirtualizerAnchor>;
+  };
+  stickyIndices: {
+    type: PropType<number[]>;
+  };
 }>> & Readonly<{
   "onRange-change"?: ((_details: VirtualizerRangeChangeDetails) => any) | undefined;
 }>, {

package/dist/components/virtualizer/virtualizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.d.ts","names":[],"sources":["../../../src/components/virtualizer/virtualizer.ts"],"mappings":";;;;KAcK,mBAAmB;;KAGZ,2BAA2B,KACrC;cAYW,iCAAiB,8BAAA;;;;;IAKkB,MAAA,oBAAoB;;;;;;;;;;;;;IAIhC,MAAA,UAAU;;;;;;;;;;;;;;;;;EAQf,iBAAA,UAAA,UAAU;;;;;;IAZO,MAAA,oBAAoB;;;;;;;;;;;;;IAIhC,MAAA,UAAU;;;;;;;;;;;;;;;;;;;EAWhC,WAAC,OAAO,6BAA6B;kCAkBjD;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAUhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAS/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,8BAAA;;;IAIS,MAAA;;;;;;;;;;;;;IAAA,MAAA;;;;;;;;;;qCAqBrC"}
+{"version":3,"file":"virtualizer.d.ts","names":[],"sources":["../../../src/components/virtualizer/virtualizer.ts"],"mappings":";;;;KAcK,mBAAmB;;KAGZ,2BAA2B,KACrC;cAaW,iCAAiB,8BAAA;;;;;IAKkB,MAAA,oBAAoB;;;;;;;;;;;;;IAIhC,MAAA,UAAU;;;;;;;;;;;;;;;;;;IAMP,MAAA,SAAS;;;IAClB,MAAA,SAAS;;;IACH,MAAA;;;;;EAIL,iBAAA,UAAA,UAAU;;;;;;IAhBO,MAAA,oBAAoB;;;;;;;;;;;;;IAIhC,MAAA,UAAU;;;;;;;;;;;;;;;;;;IAMP,MAAA,SAAS;;;IAClB,MAAA,SAAS;;;IACH,MAAA;;;;;;;EAOtB,WAAC,OAAO,6BAA6B;kCAmBjD;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAUhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAS/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,8BAAA;;;IAIS,MAAA;;;;;;;;;;;;;IAAA,MAAA;;;;;;;;;;qCAqCrC"}

package/dist/components/virtualizer/virtualizer.js

@@ -1,6 +1,6 @@
 import { useVirtualizer } from "./use-virtualizer.js";
 import { provideVirtualizer, useVirtualizerContext } from "./context.js";
-import { defineComponent, h, onMounted, onUpdated, ref } from "vue";
+import { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
 //#region src/components/virtualizer/virtualizer.ts
 const XhVirtualizerRoot = defineComponent({
 	name: "XhVirtualizerRoot",
@@ -17,7 +17,11 @@ const XhVirtualizerRoot = defineComponent({
 		scrollMargin: { type: Number },
 		paddingStart: { type: Number },
 		paddingEnd: { type: Number },
-		lanes: { type: Number }
+		lanes: { type: Number },
+		viewportTabIndex: { type: Number },
+		scrollContainer: { type: String },
+		anchor: { type: String },
+		stickyIndices: { type: Array }
 	},
 	emits: { "range-change": (_details) => true },
 	slots: Object,
@@ -32,6 +36,7 @@ const XhVirtualizerRoot = defineComponent({
 			endIndex: ctx.api.value.endIndex,
 			scrolling: ctx.api.value.scrolling,
 			lanes: ctx.api.value.lanes,
+			collectionVirtualizer: ctx.api.value.collectionVirtualizer,
 			scrollToIndex: ctx.api.value.scrollToIndex,
 			measureElement: ctx.api.value.measureElement,
 			measure: ctx.api.value.measure
@@ -75,14 +80,26 @@ const XhVirtualizerItem = defineComponent({
 	setup(props, { slots }) {
 		const ctx = useVirtualizerContext();
 		const el = ref(null);
+		let registeredIndex = null;
+		const bindItem = (value) => {
+			const node = value;
+			const next = Number(props.value);
+			if (registeredIndex != null && (node == null || registeredIndex !== next)) ctx.api.value.registerItemElement(registeredIndex, null);
+			registeredIndex = node == null ? null : next;
+			el.value = node;
+			if (node) ctx.api.value.registerItemElement(next, node);
+		};
 		const report = () => {
 			if (props.measure) ctx.api.value.measureElement(el.value);
 		};
 		onMounted(report);
 		onUpdated(report);
+		onBeforeUnmount(() => {
+			if (registeredIndex != null) ctx.api.value.registerItemElement(registeredIndex, null);
+		});
 		return () => h("div", {
 			...ctx.api.value.getItemProps({ index: Number(props.value) }),
-			ref: el
+			ref: bindItem
 		}, slots.default?.());
 	}
 });

package/dist/components/virtualizer/virtualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.js","names":[],"sources":["../../../src/components/virtualizer/virtualizer.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 virtualizer 相关实现。\n\nimport type { VirtualizerApi, VirtualizerRangeChangeDetails, VirtualizerSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, onMounted, onUpdated, ref } from 'vue'\nimport { provideVirtualizer, useVirtualizerContext } from './context'\nimport { useVirtualizer } from './use-virtualizer'\n\ntype VirtualizerProps = VirtualizerSchema['props']\n\n/** 默认插槽的载荷：当前应渲染的条目与总长、可视区首末下标与滚动态，以及滚动与测量尺寸的动作。 */\nexport type VirtualizerRootSlotProps = Pick<\n  VirtualizerApi,\n  | 'virtualItems'\n  | 'totalSize'\n  | 'startIndex'\n  | 'endIndex'\n  | 'scrolling'\n  | 'lanes'\n  | 'scrollToIndex'\n  | 'measureElement'\n  | 'measure'\n>\n\nexport const XhVirtualizerRoot = defineComponent({\n  name: 'XhVirtualizerRoot',\n  // 有机器与 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    count: { type: Number },\n    estimateSize: { type: [Number, Function] as PropType<number | ((index: number) => number)> },\n    overscan: { type: Number },\n    horizontal: { type: Boolean, default: undefined },\n    gap: { type: Number },\n    getItemKey: { type: Function as PropType<(index: number) => string | number> },\n    scrollMargin: { type: Number },\n    paddingStart: { type: Number },\n    paddingEnd: { type: Number },\n    lanes: { type: Number },\n  },\n  // change 携带当前该渲染哪些条目的详情\n  emits: {\n    'range-change': (_details: PayloadOf<VirtualizerProps, 'onRangeChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: VirtualizerRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: VirtualizerProps['onRangeChange'] = (details: VirtualizerRangeChangeDetails) => emit('range-change', details)\n    const ctx = useVirtualizer(props as VirtualizerProps, notify)\n    provideVirtualizer(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      virtualItems: ctx.api.value.virtualItems,\n      totalSize: ctx.api.value.totalSize,\n      startIndex: ctx.api.value.startIndex,\n      endIndex: ctx.api.value.endIndex,\n      scrolling: ctx.api.value.scrolling,\n      lanes: ctx.api.value.lanes,\n      scrollToIndex: ctx.api.value.scrollToIndex,\n      measureElement: ctx.api.value.measureElement,\n      measure: ctx.api.value.measure,\n    }))\n  },\n})\n\nexport const XhVirtualizerViewport = defineComponent({\n  name: 'XhVirtualizerViewport',\n  setup(_, { slots }) {\n    const ctx = useVirtualizerContext()\n    // 视口节点经 ref 交给机器，由内核在效应里接上\n    return () => h('div', {\n      ...ctx.api.value.getViewportProps() as Record<string, unknown>,\n      ref: ctx.viewportRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhVirtualizerContent = defineComponent({\n  name: 'XhVirtualizerContent',\n  setup(_, { slots }) {\n    const ctx = useVirtualizerContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      ref: ctx.contentRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhVirtualizerItem = defineComponent({\n  name: 'XhVirtualizerItem',\n  props: {\n    /** 该节点的下标。 */\n    value: { type: [Number, String] as PropType<number | string>, required: true },\n    /** 是否把真实尺寸回传给内核；未开启时条目尺寸按 estimateSize 计算。 */\n    measure: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const ctx = useVirtualizerContext()\n    const el = ref<HTMLElement | null>(null)\n\n    // 在挂载与更新后量尺寸，此时节点已落进 DOM\n    const report = (): void => {\n      if (props.measure)\n        ctx.api.value.measureElement(el.value)\n    }\n    onMounted(report)\n    onUpdated(report)\n\n    return () => h('div', {\n      ...ctx.api.value.getItemProps({ index: Number(props.value) }) as Record<string, unknown>,\n      ref: el,\n    }, slots.default?.())\n  },\n})\n"],"mappings":";;;;AA8BA,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CAEN,OAAO;EACL,OAAO,EAAE,MAAM,OAAO;EACtB,cAAc,EAAE,MAAM,CAAC,QAAQ,QAAQ,EAAoD;EAC3F,UAAU,EAAE,MAAM,OAAO;EACzB,YAAY;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAChD,KAAK,EAAE,MAAM,OAAO;EACpB,YAAY,EAAE,MAAM,SAAyD;EAC7E,cAAc,EAAE,MAAM,OAAO;EAC7B,cAAc,EAAE,MAAM,OAAO;EAC7B,YAAY,EAAE,MAAM,OAAO;EAC3B,OAAO,EAAE,MAAM,OAAO;CACxB;CAEA,OAAO,EACL,iBAAiB,aAA2D,KAC9E;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAA6C,YAA2C,KAAK,gBAAgB,OAAO;EAC1H,MAAM,MAAM,eAAe,OAA2B,MAAM;EAC5D,mBAAmB,GAAG;EACtB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,cAAc,IAAI,IAAI,MAAM;GAC5B,WAAW,IAAI,IAAI,MAAM;GACzB,YAAY,IAAI,IAAI,MAAM;GAC1B,UAAU,IAAI,IAAI,MAAM;GACxB,WAAW,IAAI,IAAI,MAAM;GACzB,OAAO,IAAI,IAAI,MAAM;GACrB,eAAe,IAAI,IAAI,MAAM;GAC7B,gBAAgB,IAAI,IAAI,MAAM;GAC9B,SAAS,IAAI,IAAI,MAAM;EACzB,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,sBAAsB;EAElC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,iBAAiB;GAClC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,sBAAsB;EAClC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,gBAAgB;GACjC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO;;EAEL,OAAO;GAAE,MAAM,CAAC,QAAQ,MAAM;GAAgC,UAAU;EAAK;;EAE7E,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAC/C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,sBAAsB;EAClC,MAAM,KAAK,IAAwB,IAAI;EAGvC,MAAM,eAAqB;GACzB,IAAI,MAAM,SACR,IAAI,IAAI,MAAM,eAAe,GAAG,KAAK;EACzC;EACA,UAAU,MAAM;EAChB,UAAU,MAAM;EAEhB,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,aAAa,EAAE,OAAO,OAAO,MAAM,KAAK,EAAE,CAAC;GAC5D,KAAK;EACP,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC"}
+{"version":3,"file":"virtualizer.js","names":[],"sources":["../../../src/components/virtualizer/virtualizer.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 virtualizer 相关实现。\n\nimport type { VirtualizerAnchor, VirtualizerApi, VirtualizerRangeChangeDetails, VirtualizerSchema, VirtualizerScrollContainer } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'\nimport { provideVirtualizer, useVirtualizerContext } from './context'\nimport { useVirtualizer } from './use-virtualizer'\n\ntype VirtualizerProps = VirtualizerSchema['props']\n\n/** 默认插槽的载荷：当前应渲染的条目与总长、可视区首末下标与滚动态，以及滚动与测量尺寸的动作。 */\nexport type VirtualizerRootSlotProps = Pick<\n  VirtualizerApi,\n  | 'virtualItems'\n  | 'totalSize'\n  | 'startIndex'\n  | 'endIndex'\n  | 'scrolling'\n  | 'lanes'\n  | 'collectionVirtualizer'\n  | 'scrollToIndex'\n  | 'measureElement'\n  | 'measure'\n>\n\nexport const XhVirtualizerRoot = defineComponent({\n  name: 'XhVirtualizerRoot',\n  // 有机器与 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    count: { type: Number },\n    estimateSize: { type: [Number, Function] as PropType<number | ((index: number) => number)> },\n    overscan: { type: Number },\n    horizontal: { type: Boolean, default: undefined },\n    gap: { type: Number },\n    getItemKey: { type: Function as PropType<(index: number) => string | number> },\n    scrollMargin: { type: Number },\n    paddingStart: { type: Number },\n    paddingEnd: { type: Number },\n    lanes: { type: Number },\n    viewportTabIndex: { type: Number },\n    scrollContainer: { type: String as PropType<VirtualizerScrollContainer> },\n    anchor: { type: String as PropType<VirtualizerAnchor> },\n    stickyIndices: { type: Array as PropType<number[]> },\n  },\n  // change 携带当前该渲染哪些条目的详情\n  emits: {\n    'range-change': (_details: PayloadOf<VirtualizerProps, 'onRangeChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: VirtualizerRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: VirtualizerProps['onRangeChange'] = (details: VirtualizerRangeChangeDetails) => emit('range-change', details)\n    const ctx = useVirtualizer(props as VirtualizerProps, notify)\n    provideVirtualizer(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      virtualItems: ctx.api.value.virtualItems,\n      totalSize: ctx.api.value.totalSize,\n      startIndex: ctx.api.value.startIndex,\n      endIndex: ctx.api.value.endIndex,\n      scrolling: ctx.api.value.scrolling,\n      lanes: ctx.api.value.lanes,\n      collectionVirtualizer: ctx.api.value.collectionVirtualizer,\n      scrollToIndex: ctx.api.value.scrollToIndex,\n      measureElement: ctx.api.value.measureElement,\n      measure: ctx.api.value.measure,\n    }))\n  },\n})\n\nexport const XhVirtualizerViewport = defineComponent({\n  name: 'XhVirtualizerViewport',\n  setup(_, { slots }) {\n    const ctx = useVirtualizerContext()\n    // 视口节点经 ref 交给机器，由内核在效应里接上\n    return () => h('div', {\n      ...ctx.api.value.getViewportProps() as Record<string, unknown>,\n      ref: ctx.viewportRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhVirtualizerContent = defineComponent({\n  name: 'XhVirtualizerContent',\n  setup(_, { slots }) {\n    const ctx = useVirtualizerContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      ref: ctx.contentRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhVirtualizerItem = defineComponent({\n  name: 'XhVirtualizerItem',\n  props: {\n    /** 该节点的下标。 */\n    value: { type: [Number, String] as PropType<number | string>, required: true },\n    /** 是否把真实尺寸回传给内核；未开启时条目尺寸按 estimateSize 计算。 */\n    measure: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const ctx = useVirtualizerContext()\n    const el = ref<HTMLElement | null>(null)\n    let registeredIndex: number | null = null\n\n    const bindItem = (value: unknown): void => {\n      const node = value as HTMLElement | null\n      const next = Number(props.value)\n      if (registeredIndex != null && (node == null || registeredIndex !== next))\n        ctx.api.value.registerItemElement(registeredIndex, null)\n      registeredIndex = node == null ? null : next\n      el.value = node\n      if (node)\n        ctx.api.value.registerItemElement(next, node)\n    }\n\n    // 在挂载与更新后量尺寸，此时节点已落进 DOM\n    const report = (): void => {\n      if (props.measure)\n        ctx.api.value.measureElement(el.value)\n    }\n    onMounted(report)\n    onUpdated(report)\n    onBeforeUnmount(() => {\n      if (registeredIndex != null)\n        ctx.api.value.registerItemElement(registeredIndex, null)\n    })\n\n    return () => h('div', {\n      ...ctx.api.value.getItemProps({ index: Number(props.value) }) as Record<string, unknown>,\n      ref: bindItem,\n    }, slots.default?.())\n  },\n})\n"],"mappings":";;;;AA+BA,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CAEN,OAAO;EACL,OAAO,EAAE,MAAM,OAAO;EACtB,cAAc,EAAE,MAAM,CAAC,QAAQ,QAAQ,EAAoD;EAC3F,UAAU,EAAE,MAAM,OAAO;EACzB,YAAY;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAChD,KAAK,EAAE,MAAM,OAAO;EACpB,YAAY,EAAE,MAAM,SAAyD;EAC7E,cAAc,EAAE,MAAM,OAAO;EAC7B,cAAc,EAAE,MAAM,OAAO;EAC7B,YAAY,EAAE,MAAM,OAAO;EAC3B,OAAO,EAAE,MAAM,OAAO;EACtB,kBAAkB,EAAE,MAAM,OAAO;EACjC,iBAAiB,EAAE,MAAM,OAA+C;EACxE,QAAQ,EAAE,MAAM,OAAsC;EACtD,eAAe,EAAE,MAAM,MAA4B;CACrD;CAEA,OAAO,EACL,iBAAiB,aAA2D,KAC9E;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAA6C,YAA2C,KAAK,gBAAgB,OAAO;EAC1H,MAAM,MAAM,eAAe,OAA2B,MAAM;EAC5D,mBAAmB,GAAG;EACtB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,cAAc,IAAI,IAAI,MAAM;GAC5B,WAAW,IAAI,IAAI,MAAM;GACzB,YAAY,IAAI,IAAI,MAAM;GAC1B,UAAU,IAAI,IAAI,MAAM;GACxB,WAAW,IAAI,IAAI,MAAM;GACzB,OAAO,IAAI,IAAI,MAAM;GACrB,uBAAuB,IAAI,IAAI,MAAM;GACrC,eAAe,IAAI,IAAI,MAAM;GAC7B,gBAAgB,IAAI,IAAI,MAAM;GAC9B,SAAS,IAAI,IAAI,MAAM;EACzB,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,sBAAsB;EAElC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,iBAAiB;GAClC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,sBAAsB;EAClC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,gBAAgB;GACjC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO;;EAEL,OAAO;GAAE,MAAM,CAAC,QAAQ,MAAM;GAAgC,UAAU;EAAK;;EAE7E,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAC/C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,sBAAsB;EAClC,MAAM,KAAK,IAAwB,IAAI;EACvC,IAAI,kBAAiC;EAErC,MAAM,YAAY,UAAyB;GACzC,MAAM,OAAO;GACb,MAAM,OAAO,OAAO,MAAM,KAAK;GAC/B,IAAI,mBAAmB,SAAS,QAAQ,QAAQ,oBAAoB,OAClE,IAAI,IAAI,MAAM,oBAAoB,iBAAiB,IAAI;GACzD,kBAAkB,QAAQ,OAAO,OAAO;GACxC,GAAG,QAAQ;GACX,IAAI,MACF,IAAI,IAAI,MAAM,oBAAoB,MAAM,IAAI;EAChD;EAGA,MAAM,eAAqB;GACzB,IAAI,MAAM,SACR,IAAI,IAAI,MAAM,eAAe,GAAG,KAAK;EACzC;EACA,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,sBAAsB;GACpB,IAAI,mBAAmB,MACrB,IAAI,IAAI,MAAM,oBAAoB,iBAAiB,IAAI;EAC3D,CAAC;EAED,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,aAAa,EAAE,OAAO,OAAO,MAAM,KAAK,EAAE,CAAC;GAC5D,KAAK;EACP,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC"}

package/dist/components/watermark/watermark.d.ts

@@ -4,6 +4,7 @@ import { WatermarkImageSize } from "@xihan-ui/headless";
 /**
  * 水印覆盖的区域。图样由 connect 计算为一张 SVG，写为根上的内联 CSS 变量，
  * 由皮肤铺为一层覆盖在内容之上的伪元素：印记因此不进入无障碍树、不接收点击、也不可选中。
+ * 机器负责地址形式图片的取回与防篡改，根节点经 refs 交给它。
  */
 declare const XhWatermarkRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   text: {
@@ -30,6 +31,11 @@ declare const XhWatermarkRoot: import("vue").DefineComponent<import("vue").Extra
   imageSize: {
     type: PropType<WatermarkImageSize>;
   };
+  /** 全屏档：印子固定铺满整个视口。 */
+  fullscreen: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -57,7 +63,14 @@ declare const XhWatermarkRoot: import("vue").DefineComponent<import("vue").Extra
   imageSize: {
     type: PropType<WatermarkImageSize>;
   };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  /** 全屏档：印子固定铺满整个视口。 */
+  fullscreen: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  fullscreen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** 被覆盖的内容。 */
 declare const XhWatermarkContent: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;

package/dist/components/watermark/watermark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.d.ts","names":[],"sources":["../../../src/components/watermark/watermark.ts"],"mappings":";;;;;;;cAkBa,+BAAe,8BAAA;;IAIS,MAAA;;;;;;;;;;;;;;;;;;;;;IAOJ,MAAA,SAAS;;;;;;IAPL,MAAA;;;;;;;;;;;;;;;;;;;;;IAOJ,MAAA,SAAS;;MAOxC,oDAAA;;cAGW,kCAAkB,wCAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"watermark.d.ts","names":[],"sources":["../../../src/components/watermark/watermark.ts"],"mappings":";;;;;;;;cAoBa,+BAAe,8BAAA;;IAIS,MAAA;;;;;;;;;;;;;;;;;;;;;IAOJ,MAAA,SAAS;;;;;;;;;;;IAPL,MAAA;;;;;;;;;;;;;;;;;;;;;IAOJ,MAAA,SAAS;;;;;;;;;qCAexC;;cAGW,kCAAkB,wCAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}