@xihan-ui/vue 2.1.0 → 3.1.0

package/dist/components/sankey-chart/sankey-chart.d.ts

@@ -0,0 +1,161 @@
+import { PayloadOf } from "../../runtime/payload.js";
+import { PropType, SlotsType, VNode } from "vue";
+import { ChartDatumDetails, ChartKey, NumberFormatSpec, SankeyChartApi, SankeyChartSchema, SankeyChartTranslations, SankeyLinkColor, SankeyLinkDatum, SankeyNodeAlign, SankeyNodeDatum, SankeyNodeSort, SankeyOrientation, SankeyTooltipModel } from "@xihan-ui/headless";
+//#region src/components/sankey-chart/sankey-chart.d.ts
+type SankeyChartProps = SankeyChartSchema['props'];
+/** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */
+type SankeyChartRootSlotProps = Pick<SankeyChartApi, 'legendItems' | 'active' | 'tooltip' | 'empty' | 'hiddenSeries' | 'activeKey' | 'toggleSeries' | 'setFocusedDatum' | 'table'>;
+/** 提示框插槽的载荷：激活的节点或流带与缺省的内容模型。 */
+interface SankeyChartTooltipSlotProps {
+  active: ChartDatumDetails | null;
+  tooltip: SankeyTooltipModel | null;
+}
+/** 标题：图表的可及名来源。 */
+declare const XhSankeyChartCaption: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 图例：项由组件按分组生成；不到两组时整条收起。 */
+declare const XhSankeyChartLegend: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 视口：尺寸观测的宿主，块尺寸由组件槽决定。 */
+declare const XhSankeyChartViewport: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 绘图区：渐变定义在最前，流带在下，节点其上，节点名再上，焦点环最上。 */
+declare const XhSankeyChartPlot: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 提示框：缺省内容按激活的节点或流带生成，作用域插槽可替换。 */
+declare const XhSankeyChartTooltip: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  default?: (props: SankeyChartTooltipSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 空态：没有可画的数据时显示，缺省文字取文案。 */
+declare const XhSankeyChartEmpty: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 根：铺开缺省结构或交给默认插槽，并在末尾追加摘要与数据表。 */
+declare const XhSankeyChartRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  nodes: {
+    type: PropType<readonly SankeyNodeDatum[]>;
+  };
+  links: {
+    type: PropType<readonly SankeyLinkDatum[]>;
+  };
+  orientation: {
+    type: PropType<SankeyOrientation>;
+  };
+  nodeAlign: {
+    type: PropType<SankeyNodeAlign>;
+  };
+  linkColor: {
+    type: PropType<SankeyLinkColor>;
+  };
+  nodeSort: {
+    type: PropType<SankeyNodeSort>;
+  };
+  format: {
+    type: PropType<NumberFormatSpec | ((value: number) => string)>;
+  };
+  hiddenSeries: {
+    type: PropType<string[]>;
+  };
+  defaultHiddenSeries: {
+    type: PropType<string[]>;
+  };
+  activeKey: {
+    type: PropType<ChartKey | null>;
+  };
+  pending: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  animated: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  locale: {
+    type: StringConstructor;
+  };
+  translations: {
+    type: PropType<Partial<SankeyChartTranslations>>;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'hidden-series-change': (_details: PayloadOf<SankeyChartProps, "onHiddenSeriesChange">) => true;
+  'update:hiddenSeries': (_hidden: PayloadOf<SankeyChartProps, "onHiddenSeriesChange">["hiddenSeries"]) => true;
+  'active-key-change': (_details: PayloadOf<SankeyChartProps, "onActiveKeyChange">) => true;
+  'update:activeKey': (_key: PayloadOf<SankeyChartProps, "onActiveKeyChange">["activeKey"]) => true;
+  'datum-active': (_details: PayloadOf<SankeyChartProps, "onDatumActive">) => true;
+  'datum-press': (_details: PayloadOf<SankeyChartProps, "onDatumPress">) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  nodes: {
+    type: PropType<readonly SankeyNodeDatum[]>;
+  };
+  links: {
+    type: PropType<readonly SankeyLinkDatum[]>;
+  };
+  orientation: {
+    type: PropType<SankeyOrientation>;
+  };
+  nodeAlign: {
+    type: PropType<SankeyNodeAlign>;
+  };
+  linkColor: {
+    type: PropType<SankeyLinkColor>;
+  };
+  nodeSort: {
+    type: PropType<SankeyNodeSort>;
+  };
+  format: {
+    type: PropType<NumberFormatSpec | ((value: number) => string)>;
+  };
+  hiddenSeries: {
+    type: PropType<string[]>;
+  };
+  defaultHiddenSeries: {
+    type: PropType<string[]>;
+  };
+  activeKey: {
+    type: PropType<ChartKey | null>;
+  };
+  pending: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  animated: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  locale: {
+    type: StringConstructor;
+  };
+  translations: {
+    type: PropType<Partial<SankeyChartTranslations>>;
+  };
+}>> & Readonly<{
+  "onHidden-series-change"?: ((_details: import("@xihan-ui/headless").ChartHiddenSeriesChangeDetails) => any) | undefined;
+  "onUpdate:hiddenSeries"?: ((_hidden: string[]) => any) | undefined;
+  "onActive-key-change"?: ((_details: import("@xihan-ui/headless").ChartActiveKeyChangeDetails) => any) | undefined;
+  "onUpdate:activeKey"?: ((_key: ChartKey | null) => any) | undefined;
+  "onDatum-active"?: ((_details: ChartDatumDetails | null) => any) | undefined;
+  "onDatum-press"?: ((_details: ChartDatumDetails) => any) | undefined;
+}>, {
+  pending: boolean;
+  animated: boolean;
+}, SlotsType<{
+  /** 自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区与空态）、提示框。 */
+  default?: (props: SankeyChartRootSlotProps) => VNode[];
+  /** 缺省结构里的标题内容。 */
+  caption?: () => VNode[];
+  /** 缺省结构里的提示框内容。 */
+  tooltip?: (props: SankeyChartTooltipSlotProps) => VNode[];
+  /** 缺省结构里的空态内容。 */
+  empty?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { SankeyChartRootSlotProps, SankeyChartTooltipSlotProps, XhSankeyChartCaption, XhSankeyChartEmpty, XhSankeyChartLegend, XhSankeyChartPlot, XhSankeyChartRoot, XhSankeyChartTooltip, XhSankeyChartViewport };
+//# sourceMappingURL=sankey-chart.d.ts.map

package/dist/components/sankey-chart/sankey-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.d.ts","names":[],"sources":["../../../src/components/sankey-chart/sankey-chart.ts"],"mappings":";;;;KA8BK,mBAAmB;;KAGZ,2BAA2B,KAAK;;UAG3B;EACf,QAAQ;EACR,SAAS;;;cAoDE,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAa9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAShC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAU5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;;EAGnB,WAAC,OAAO,gCAAgC;kCAWpD;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,8BAAA;;IAIF,MAAA,kBAAkB;;;IAClB,MAAA,kBAAkB;;;IACX,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACC,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;EAId,yBAAA,UAAA,UAAU;EACZ,wBAAA,SAAA,UAAU;EACX,sBAAA,UAAA,UAAU;EACf,qBAAA,MAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;;;IAtBZ,MAAA,kBAAkB;;;IAClB,MAAA,kBAAkB;;;IACX,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACC,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAavC,WAAC,OAAO,6BAA6B;;EAErC,gBAAM;;EAEN,WAAC,OAAO,gCAAgC;;EAE1C,cAAM;kCA8ChB"}

package/dist/components/sankey-chart/sankey-chart.js

@@ -0,0 +1,208 @@
+import { withXhConfig } from "../../config/config.js";
+import { provideSankeyChart, useSankeyChartContext } from "./context.js";
+import { useSankeyChart } from "./use-sankey-chart.js";
+import { defineComponent, h } from "vue";
+//#region src/components/sankey-chart/sankey-chart.ts
+/** 渐变定义：绘图区的第一个子节点，linkColor="gradient" 时每条流带一个渐变、两端各一个色标。 */
+function renderDefs(api) {
+	return h("defs", api.getDefsProps(), api.gradients.map((gradient) => h("linearGradient", {
+		...api.getGradientProps(gradient),
+		key: gradient.id
+	}, [h("stop", api.getGradientStopProps(gradient, "from")), h("stop", api.getGradientStopProps(gradient, "to"))])));
+}
+/** 一个场景标记画成 SVG 元素；文字标记带文字。 */
+function renderMark(api, mark) {
+	const props = {
+		...api.getMarkProps(mark),
+		key: mark.key
+	};
+	if (mark.kind === "group") return h("g", props, mark.children.map((child) => renderMark(api, child)));
+	if (mark.kind === "text") return h("text", props, mark.text);
+	return h("path", props);
+}
+/** 缺省的提示框内容：节点写合计与流入流出的明细，流带写流量与占比。 */
+function renderTooltipContent(api) {
+	const tooltip = api.tooltip;
+	if (!tooltip) return [];
+	return [h("div", api.getTooltipHeaderProps(), tooltip.header), ...tooltip.rows.map((row) => h("div", {
+		...api.getTooltipRowProps(row),
+		key: row.key
+	}, [
+		h("span", api.getTooltipSwatchProps(row)),
+		h("span", api.getTooltipValueProps(row), row.value),
+		h("span", api.getTooltipNameProps(row), row.name)
+	]))];
+}
+/** 摘要与数据表：由根自动生成、视觉隐藏，保证无障碍等价物始终存在。 */
+function renderA11y(api) {
+	const { columns, rows } = api.table;
+	return [h("p", api.getSummaryProps(), api.summary), h("table", api.getTableProps(), [
+		h("caption", api.tableCaption),
+		h("thead", [h("tr", columns.map((column) => h("th", {
+			key: column.id,
+			scope: "col"
+		}, column.label)))]),
+		h("tbody", rows.map((row, i) => h("tr", { key: i }, row.cells.map((cell, c) => c === 0 ? h("th", {
+			key: c,
+			scope: "row"
+		}, cell.text) : h("td", { key: c }, cell.text)))))
+	])];
+}
+/** 标题：图表的可及名来源。 */
+const XhSankeyChartCaption = defineComponent({
+	name: "XhSankeyChartCaption",
+	setup(_, { slots }) {
+		const ctx = useSankeyChartContext();
+		return () => h("figcaption", ctx.api.value.getCaptionProps(), slots.default?.());
+	}
+});
+/** 图例：项由组件按分组生成；不到两组时整条收起。 */
+const XhSankeyChartLegend = defineComponent({
+	name: "XhSankeyChartLegend",
+	setup() {
+		const ctx = useSankeyChartContext();
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getLegendProps(), api.legendItems.map((item) => h("button", {
+				...api.getLegendItemProps(item),
+				key: item.id
+			}, [h("span", api.getLegendSwatchProps(item)), h("span", api.getLegendLabelProps(item), item.name)])));
+		};
+	}
+});
+/** 视口：尺寸观测的宿主，块尺寸由组件槽决定。 */
+const XhSankeyChartViewport = defineComponent({
+	name: "XhSankeyChartViewport",
+	setup(_, { slots }) {
+		const ctx = useSankeyChartContext();
+		return () => h("div", {
+			...ctx.api.value.getViewportProps(),
+			ref: (el) => {
+				ctx.viewportRef.value = el;
+			}
+		}, slots.default?.());
+	}
+});
+/** 绘图区：渐变定义在最前，流带在下，节点其上，节点名再上，焦点环最上。 */
+const XhSankeyChartPlot = defineComponent({
+	name: "XhSankeyChartPlot",
+	setup() {
+		const ctx = useSankeyChartContext();
+		return () => {
+			const api = ctx.api.value;
+			const marks = [
+				...api.scene.layers.data,
+				...api.scene.layers.front,
+				...api.overlay.over
+			];
+			return h("svg", api.getPlotProps(), [renderDefs(api), ...marks.map((mark) => renderMark(api, mark))]);
+		};
+	}
+});
+/** 提示框：缺省内容按激活的节点或流带生成，作用域插槽可替换。 */
+const XhSankeyChartTooltip = defineComponent({
+	name: "XhSankeyChartTooltip",
+	slots: Object,
+	setup(_, { slots }) {
+		const ctx = useSankeyChartContext();
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getTooltipProps(), slots.default ? slots.default({
+				active: api.active,
+				tooltip: api.tooltip
+			}) : renderTooltipContent(api));
+		};
+	}
+});
+/** 空态：没有可画的数据时显示，缺省文字取文案。 */
+const XhSankeyChartEmpty = defineComponent({
+	name: "XhSankeyChartEmpty",
+	setup(_, { slots }) {
+		const ctx = useSankeyChartContext();
+		return () => h("div", ctx.api.value.getEmptyProps(), slots.default?.() ?? ctx.api.value.emptyText);
+	}
+});
+/** 根：铺开缺省结构或交给默认插槽，并在末尾追加摘要与数据表。 */
+const XhSankeyChartRoot = defineComponent({
+	name: "XhSankeyChartRoot",
+	props: {
+		nodes: { type: Array },
+		links: { type: Array },
+		orientation: { type: String },
+		nodeAlign: { type: String },
+		linkColor: { type: String },
+		nodeSort: { type: String },
+		format: { type: [Object, Function] },
+		hiddenSeries: { type: Array },
+		defaultHiddenSeries: { type: Array },
+		activeKey: { type: [
+			String,
+			Number,
+			Date,
+			null
+		] },
+		pending: {
+			type: Boolean,
+			default: void 0
+		},
+		animated: {
+			type: Boolean,
+			default: void 0
+		},
+		locale: { type: String },
+		translations: { type: Object }
+	},
+	emits: {
+		"hidden-series-change": (_details) => true,
+		"update:hiddenSeries": (_hidden) => true,
+		"active-key-change": (_details) => true,
+		"update:activeKey": (_key) => true,
+		"datum-active": (_details) => true,
+		"datum-press": (_details) => true
+	},
+	slots: Object,
+	setup(props, { slots, emit }) {
+		const ctx = useSankeyChart(withXhConfig("sankey-chart", props), {
+			onHiddenSeriesChange: (details) => {
+				emit("hidden-series-change", details);
+				emit("update:hiddenSeries", details.hiddenSeries);
+			},
+			onActiveKeyChange: (details) => {
+				emit("active-key-change", details);
+				emit("update:activeKey", details.activeKey);
+			},
+			onDatumActive: (details) => emit("datum-active", details),
+			onDatumPress: (details) => emit("datum-press", details)
+		});
+		provideSankeyChart(ctx);
+		return () => {
+			const api = ctx.api.value;
+			const content = slots.default ? slots.default({
+				legendItems: api.legendItems,
+				active: api.active,
+				tooltip: api.tooltip,
+				empty: api.empty,
+				table: api.table,
+				hiddenSeries: api.hiddenSeries,
+				activeKey: api.activeKey,
+				toggleSeries: api.toggleSeries,
+				setFocusedDatum: api.setFocusedDatum
+			}) : [
+				...slots.caption ? [h(XhSankeyChartCaption, null, () => slots.caption?.())] : [],
+				h(XhSankeyChartLegend),
+				h(XhSankeyChartViewport, null, () => [h(XhSankeyChartPlot), h(XhSankeyChartEmpty, null, slots.empty ? () => slots.empty?.() : void 0)]),
+				h(XhSankeyChartTooltip, null, slots.tooltip ? { default: slots.tooltip } : void 0)
+			];
+			return h("figure", {
+				...api.getRootProps(),
+				ref: (el) => {
+					ctx.rootRef.value = el;
+				}
+			}, [...content, ...renderA11y(api)]);
+		};
+	}
+});
+//#endregion
+export { XhSankeyChartCaption, XhSankeyChartEmpty, XhSankeyChartLegend, XhSankeyChartPlot, XhSankeyChartRoot, XhSankeyChartTooltip, XhSankeyChartViewport };
+
+//# sourceMappingURL=sankey-chart.js.map

package/dist/components/sankey-chart/sankey-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../../src/components/sankey-chart/sankey-chart.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// 提供 sankey chart 相关实现。\n\nimport type {\n  ChartDatumDetails,\n  ChartKey,\n  ChartMark,\n  NumberFormatSpec,\n  SankeyChartApi,\n  SankeyChartSchema,\n  SankeyChartTranslations,\n  SankeyLinkColor,\n  SankeyLinkDatum,\n  SankeyNodeAlign,\n  SankeyNodeDatum,\n  SankeyNodeSort,\n  SankeyOrientation,\n  SankeyTooltipModel,\n} 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 { provideSankeyChart, useSankeyChartContext } from './context'\nimport { useSankeyChart } from './use-sankey-chart'\n\ntype SankeyChartProps = SankeyChartSchema['props']\n\n/** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */\nexport type SankeyChartRootSlotProps = Pick<SankeyChartApi, 'legendItems' | 'active' | 'tooltip' | 'empty' | 'hiddenSeries' | 'activeKey' | 'toggleSeries' | 'setFocusedDatum' | 'table'>\n\n/** 提示框插槽的载荷：激活的节点或流带与缺省的内容模型。 */\nexport interface SankeyChartTooltipSlotProps {\n  active: ChartDatumDetails | null\n  tooltip: SankeyTooltipModel | null\n}\n\n/** 渐变定义：绘图区的第一个子节点，linkColor=\"gradient\" 时每条流带一个渐变、两端各一个色标。 */\nfunction renderDefs(api: SankeyChartApi): VNode {\n  return h('defs', api.getDefsProps() as Record<string, unknown>, api.gradients.map(gradient =>\n    h('linearGradient', { ...api.getGradientProps(gradient) as Record<string, unknown>, key: gradient.id }, [\n      h('stop', api.getGradientStopProps(gradient, 'from') as Record<string, unknown>),\n      h('stop', api.getGradientStopProps(gradient, 'to') as Record<string, unknown>),\n    ])))\n}\n\n/** 一个场景标记画成 SVG 元素；文字标记带文字。 */\nfunction renderMark(api: SankeyChartApi, mark: ChartMark): VNode {\n  const props = { ...api.getMarkProps(mark) as Record<string, unknown>, key: mark.key }\n  if (mark.kind === 'group')\n    return h('g', props, mark.children.map(child => renderMark(api, child)))\n  if (mark.kind === 'text')\n    return h('text', props, mark.text)\n  return h('path', props)\n}\n\n/** 缺省的提示框内容：节点写合计与流入流出的明细，流带写流量与占比。 */\nfunction renderTooltipContent(api: SankeyChartApi): VNode[] {\n  const tooltip = api.tooltip\n  if (!tooltip)\n    return []\n  return [\n    h('div', api.getTooltipHeaderProps() as Record<string, unknown>, tooltip.header),\n    ...tooltip.rows.map(row => h('div', { ...api.getTooltipRowProps(row) as Record<string, unknown>, key: row.key }, [\n      h('span', api.getTooltipSwatchProps(row) as Record<string, unknown>),\n      h('span', api.getTooltipValueProps(row) as Record<string, unknown>, row.value),\n      h('span', api.getTooltipNameProps(row) as Record<string, unknown>, row.name),\n    ])),\n  ]\n}\n\n/** 摘要与数据表：由根自动生成、视觉隐藏，保证无障碍等价物始终存在。 */\nfunction renderA11y(api: SankeyChartApi): VNode[] {\n  const { columns, rows } = api.table\n  return [\n    h('p', api.getSummaryProps() as Record<string, unknown>, api.summary),\n    h('table', api.getTableProps() as Record<string, unknown>, [\n      h('caption', api.tableCaption),\n      h('thead', [h('tr', columns.map(column => h('th', { key: column.id, scope: 'col' }, column.label)))]),\n      h('tbody', rows.map((row, i) => h('tr', { key: i }, row.cells.map((cell, c) =>\n        c === 0 ? h('th', { key: c, scope: 'row' }, cell.text) : h('td', { key: c }, cell.text))))),\n    ]),\n  ]\n}\n\n/** 标题：图表的可及名来源。 */\nexport const XhSankeyChartCaption = defineComponent({\n  name: 'XhSankeyChartCaption',\n  setup(_, { slots }) {\n    const ctx = useSankeyChartContext()\n    return () => h('figcaption', ctx.api.value.getCaptionProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 图例：项由组件按分组生成；不到两组时整条收起。 */\nexport const XhSankeyChartLegend = defineComponent({\n  name: 'XhSankeyChartLegend',\n  setup() {\n    const ctx = useSankeyChartContext()\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getLegendProps() as Record<string, unknown>, api.legendItems.map(item =>\n        h('button', { ...api.getLegendItemProps(item) as Record<string, unknown>, key: item.id }, [\n          h('span', api.getLegendSwatchProps(item) as Record<string, unknown>),\n          h('span', api.getLegendLabelProps(item) as Record<string, unknown>, item.name),\n        ])))\n    }\n  },\n})\n\n/** 视口：尺寸观测的宿主，块尺寸由组件槽决定。 */\nexport const XhSankeyChartViewport = defineComponent({\n  name: 'XhSankeyChartViewport',\n  setup(_, { slots }) {\n    const ctx = useSankeyChartContext()\n    return () => h('div', {\n      ...ctx.api.value.getViewportProps() as Record<string, unknown>,\n      ref: (el: unknown) => { ctx.viewportRef.value = el as HTMLElement },\n    }, slots.default?.())\n  },\n})\n\n/** 绘图区：渐变定义在最前，流带在下，节点其上，节点名再上，焦点环最上。 */\nexport const XhSankeyChartPlot = defineComponent({\n  name: 'XhSankeyChartPlot',\n  setup() {\n    const ctx = useSankeyChartContext()\n    return () => {\n      const api = ctx.api.value\n      const marks = [...api.scene.layers.data, ...api.scene.layers.front, ...api.overlay.over]\n      return h('svg', api.getPlotProps() as Record<string, unknown>, [renderDefs(api), ...marks.map(mark => renderMark(api, mark))])\n    }\n  },\n})\n\n/** 提示框：缺省内容按激活的节点或流带生成，作用域插槽可替换。 */\nexport const XhSankeyChartTooltip = defineComponent({\n  name: 'XhSankeyChartTooltip',\n  slots: Object as SlotsType<{\n    default?: (props: SankeyChartTooltipSlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useSankeyChartContext()\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getTooltipProps() as Record<string, unknown>, slots.default\n        ? slots.default({ active: api.active, tooltip: api.tooltip })\n        : renderTooltipContent(api))\n    }\n  },\n})\n\n/** 空态：没有可画的数据时显示，缺省文字取文案。 */\nexport const XhSankeyChartEmpty = defineComponent({\n  name: 'XhSankeyChartEmpty',\n  setup(_, { slots }) {\n    const ctx = useSankeyChartContext()\n    return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.emptyText)\n  },\n})\n\n/** 根：铺开缺省结构或交给默认插槽，并在末尾追加摘要与数据表。 */\nexport const XhSankeyChartRoot = defineComponent({\n  name: 'XhSankeyChartRoot',\n  // 缺省值由机器与 connect 决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    nodes: { type: Array as PropType<readonly SankeyNodeDatum[]> },\n    links: { type: Array as PropType<readonly SankeyLinkDatum[]> },\n    orientation: { type: String as PropType<SankeyOrientation> },\n    nodeAlign: { type: String as PropType<SankeyNodeAlign> },\n    linkColor: { type: String as PropType<SankeyLinkColor> },\n    nodeSort: { type: String as PropType<SankeyNodeSort> },\n    format: { type: [Object, Function] as PropType<NumberFormatSpec | ((value: number) => string)> },\n    hiddenSeries: { type: Array as PropType<string[]> },\n    defaultHiddenSeries: { type: Array as PropType<string[]> },\n    activeKey: { type: [String, Number, Date, null] as PropType<ChartKey | null> },\n    pending: { type: Boolean, default: undefined },\n    animated: { type: Boolean, default: undefined },\n    locale: { type: String },\n    translations: { type: Object as PropType<Partial<SankeyChartTranslations>> },\n  },\n  // hidden-series-change / active-key-change 携带 details；update:* 携带裸值，支持 v-model\n  emits: {\n    'hidden-series-change': (_details: PayloadOf<SankeyChartProps, 'onHiddenSeriesChange'>) => true,\n    'update:hiddenSeries': (_hidden: PayloadOf<SankeyChartProps, 'onHiddenSeriesChange'>['hiddenSeries']) => true,\n    'active-key-change': (_details: PayloadOf<SankeyChartProps, 'onActiveKeyChange'>) => true,\n    'update:activeKey': (_key: PayloadOf<SankeyChartProps, 'onActiveKeyChange'>['activeKey']) => true,\n    'datum-active': (_details: PayloadOf<SankeyChartProps, 'onDatumActive'>) => true,\n    'datum-press': (_details: PayloadOf<SankeyChartProps, 'onDatumPress'>) => true,\n  },\n  slots: Object as SlotsType<{\n    /** 自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区与空态）、提示框。 */\n    default?: (props: SankeyChartRootSlotProps) => VNode[]\n    /** 缺省结构里的标题内容。 */\n    caption?: () => VNode[]\n    /** 缺省结构里的提示框内容。 */\n    tooltip?: (props: SankeyChartTooltipSlotProps) => VNode[]\n    /** 缺省结构里的空态内容。 */\n    empty?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useSankeyChart(withXhConfig('sankey-chart', props) as SankeyChartProps, {\n      onHiddenSeriesChange: (details) => {\n        emit('hidden-series-change', details)\n        emit('update:hiddenSeries', details.hiddenSeries)\n      },\n      onActiveKeyChange: (details) => {\n        emit('active-key-change', details)\n        emit('update:activeKey', details.activeKey)\n      },\n      onDatumActive: details => emit('datum-active', details),\n      onDatumPress: details => emit('datum-press', details),\n    })\n    provideSankeyChart(ctx)\n    return () => {\n      const api = ctx.api.value\n      const content = slots.default\n        ? slots.default({\n            legendItems: api.legendItems,\n            active: api.active,\n            tooltip: api.tooltip,\n            empty: api.empty,\n            table: api.table,\n            hiddenSeries: api.hiddenSeries,\n            activeKey: api.activeKey,\n            toggleSeries: api.toggleSeries,\n            setFocusedDatum: api.setFocusedDatum,\n          })\n        : [\n            ...(slots.caption ? [h(XhSankeyChartCaption, null, () => slots.caption?.())] : []),\n            h(XhSankeyChartLegend),\n            // 空态放进视口：叠在绘图区上，标题与图例不被盖住\n            h(XhSankeyChartViewport, null, () => [\n              h(XhSankeyChartPlot),\n              h(XhSankeyChartEmpty, null, slots.empty ? () => slots.empty?.() : undefined),\n            ]),\n            h(XhSankeyChartTooltip, null, slots.tooltip ? { default: slots.tooltip } : undefined),\n          ]\n      return h('figure', {\n        ...api.getRootProps() as Record<string, unknown>,\n        ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n      }, [...content, ...renderA11y(api)])\n    }\n  },\n})\n"],"mappings":"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"}

package/dist/components/sankey-chart/use-sankey-chart.d.ts

@@ -0,0 +1,19 @@
+import { ComputedRef, Ref } from "vue";
+import { Service } from "@xihan-ui/core";
+import { SankeyChartApi, SankeyChartSchema } from "@xihan-ui/headless";
+//#region src/components/sankey-chart/use-sankey-chart.d.ts
+/** 对外的回调：由外壳（emit）或组合式调用方提供，随 props 一并喂给机器。 */
+type SankeyChartNotifiers = Pick<SankeyChartSchema['props'], 'onHiddenSeriesChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress'>;
+interface SankeyChartContext {
+  api: ComputedRef<SankeyChartApi>;
+  service: Service<SankeyChartSchema>;
+  /** 根：机器在它上面读度量私有槽。 */
+  rootRef: Ref<HTMLElement | null>;
+  /** 视口：尺寸观测的宿主。 */
+  viewportRef: Ref<HTMLElement | null>;
+}
+/** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
+declare function useSankeyChart(props: SankeyChartSchema['props'], notify?: SankeyChartNotifiers): SankeyChartContext;
+//#endregion
+export { SankeyChartContext, SankeyChartNotifiers, useSankeyChart };
+//# sourceMappingURL=use-sankey-chart.d.ts.map

package/dist/components/sankey-chart/use-sankey-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sankey-chart.d.ts","names":[],"sources":["../../../src/components/sankey-chart/use-sankey-chart.ts"],"mappings":";;;;;KAgBY,uBAAuB,KACjC;UAIe;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;EAEb,aAAa,IAAI;;;iBAIH,eACd,OAAO,4BACP,SAAS,uBACR"}

package/dist/components/sankey-chart/use-sankey-chart.js

@@ -0,0 +1,26 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { useMachine } from "../../runtime/use-machine.js";
+import { computed, ref } from "vue";
+import { connectSankeyChart, sankeyChartMachine } from "@xihan-ui/headless";
+//#region src/components/sankey-chart/use-sankey-chart.ts
+/** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
+function useSankeyChart(props, notify) {
+	const rootRef = ref(null);
+	const viewportRef = ref(null);
+	const service = useMachine(sankeyChartMachine, () => ({
+		...props,
+		...notify
+	}));
+	service.refs.set("getRootEl", () => rootRef.value);
+	service.refs.set("getViewportEl", () => viewportRef.value);
+	return {
+		api: computed(() => connectSankeyChart(service, vueNormalize)),
+		service,
+		rootRef,
+		viewportRef
+	};
+}
+//#endregion
+export { useSankeyChart };
+
+//# sourceMappingURL=use-sankey-chart.js.map

package/dist/components/sankey-chart/use-sankey-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sankey-chart.js","names":[],"sources":["../../../src/components/sankey-chart/use-sankey-chart.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 sankey chart 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { SankeyChartApi, SankeyChartSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectSankeyChart, sankeyChartMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\n/** 对外的回调：由外壳（emit）或组合式调用方提供，随 props 一并喂给机器。 */\nexport type SankeyChartNotifiers = Pick<\n  SankeyChartSchema['props'],\n  'onHiddenSeriesChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress'\n>\n\nexport interface SankeyChartContext {\n  api: ComputedRef<SankeyChartApi>\n  service: Service<SankeyChartSchema>\n  /** 根：机器在它上面读度量私有槽。 */\n  rootRef: Ref<HTMLElement | null>\n  /** 视口：尺寸观测的宿主。 */\n  viewportRef: Ref<HTMLElement | null>\n}\n\n/** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */\nexport function useSankeyChart(\n  props: SankeyChartSchema['props'],\n  notify?: SankeyChartNotifiers,\n): SankeyChartContext {\n  const rootRef = ref<HTMLElement | null>(null)\n  const viewportRef = ref<HTMLElement | null>(null)\n  // 传响应式 props 对象本身而非快照，供机器每次读时重新展开\n  const service = useMachine(sankeyChartMachine, () => ({ ...props, ...notify }))\n  service.refs.set('getRootEl', () => rootRef.value)\n  service.refs.set('getViewportEl', () => viewportRef.value)\n  const api = computed(() => connectSankeyChart(service, vueNormalize))\n  return { api, service, rootRef, viewportRef }\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,eACd,OACA,QACoB;CACpB,MAAM,UAAU,IAAwB,IAAI;CAC5C,MAAM,cAAc,IAAwB,IAAI;CAEhD,MAAM,UAAU,WAAW,2BAA2B;EAAE,GAAG;EAAO,GAAG;CAAO,EAAE;CAC9E,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CACjD,QAAQ,KAAK,IAAI,uBAAuB,YAAY,KAAK;CAEzD,OAAO;EAAE,KADG,eAAe,mBAAmB,SAAS,YAAY,CACxD;EAAG;EAAS;EAAS;CAAY;AAC9C"}

package/dist/components/scroll-area/scroll-area.d.ts

@@ -1,9 +1,9 @@
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction, Orientation, Size } from "@xihan-ui/core";
-import { ScrollAreaApi, ScrollAreaOrientation, ScrollAreaVariant, ScrollbarType } from "@xihan-ui/headless";
+import { ScrollAreaApi, ScrollAreaOrientation, ScrollAreaScrollDetails, ScrollAreaVariant, ScrollbarType } from "@xihan-ui/headless";
 //#region src/components/scroll-area/scroll-area.d.ts
-/** 默认插槽的载荷：两条轴的滚动条状态、正被拖动的轴，以及右下角补丁是否应当显示。 */
-type ScrollAreaRootSlotProps = Pick<ScrollAreaApi, 'vertical' | 'horizontal' | 'draggingAxis' | 'cornerVisible'>;
+/** 默认插槽的载荷：两条轴的滚动条状态、正被拖动的轴、右下角补丁是否应当显示，以及滚动视口的命令。 */
+type ScrollAreaRootSlotProps = Pick<ScrollAreaApi, 'vertical' | 'horizontal' | 'draggingAxis' | 'cornerVisible' | 'scrollTo'>;
 declare const XhScrollAreaRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   type: {
     type: PropType<ScrollbarType>;
@@ -27,7 +27,12 @@ declare const XhScrollAreaRoot: import("vue").DefineComponent<import("vue").Extr
   forceVisible: BooleanConstructor;
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  /** 某条轴的滚动量变了，按轴分别通知。 */
+  'scroll-change': (_details: ScrollAreaScrollDetails) => true;
+  /** 某条轴滚到了末端，只在跨过末端那一下通知。 */
+  'reach-end': (_details: ScrollAreaScrollDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   type: {
     type: PropType<ScrollbarType>;
   };
@@ -48,7 +53,10 @@ declare const XhScrollAreaRoot: import("vue").DefineComponent<import("vue").Extr
   };
   /** 触屏（粗指针）上也绘制自绘滚动条；默认交给原生滚动。 */
   forceVisible: BooleanConstructor;
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+  "onScroll-change"?: ((_details: ScrollAreaScrollDetails) => any) | undefined;
+  "onReach-end"?: ((_details: ScrollAreaScrollDetails) => any) | undefined;
+}>, {
   forceVisible: boolean;
 }, SlotsType<{
   default?: (props: ScrollAreaRootSlotProps) => VNode[];

package/dist/components/scroll-area/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","names":[],"sources":["../../../src/components/scroll-area/scroll-area.ts"],"mappings":";;;;;KAqBY,0BAA0B,KAAK;cAE9B,gCAAgB,8BAAA;;IAID,MAAA,SAAS;;;;;;IAEF,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;IALR,MAAA,SAAS;;;;;;IAEF,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;EAKtB,WAAC,OAAO,4BAA4B;kCAahD;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAU/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAS9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,8BAAA;;;IAIC,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAY1C;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAW5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"scroll-area.d.ts","names":[],"sources":["../../../src/components/scroll-area/scroll-area.ts"],"mappings":";;;;;KAqBY,0BAA0B,KAAK;cAE9B,gCAAgB,8BAAA;;IAID,MAAA,SAAS;;;;;;IAEF,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;EAMJ,kBAAA,UAAA;;EAEJ,cAAA,UAAA;;;IAbA,MAAA,SAAS;;;;;;IAEF,MAAA,SAAS;;;IACb,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACV,MAAA,SAAS;;;;;;;;;;EAWtB,WAAC,OAAO,4BAA4B;kCAqBhD;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAU/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAS9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,8BAAA;;;IAIC,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;;;qCAY1C;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAW5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAO5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/scroll-area/scroll-area.js

@@ -15,15 +15,29 @@ const XhScrollAreaRoot = defineComponent({
 		/** 触屏（粗指针）上也绘制自绘滚动条；默认交给原生滚动。 */
 		forceVisible: Boolean
 	},
+	emits: {
+		/** 某条轴的滚动量变了，按轴分别通知。 */
+		"scroll-change": (_details) => true,
+		/** 某条轴滚到了末端，只在跨过末端那一下通知。 */
+		"reach-end": (_details) => true
+	},
 	slots: Object,
-	setup(props, { slots }) {
-		const ctx = useScrollArea(withXhConfig("scroll-area", props));
+	setup(props, { slots, emit, expose }) {
+		const source = withXhConfig("scroll-area", props);
+		const ctx = useScrollArea(() => ({
+			...source,
+			onScrollChange: (details) => emit("scroll-change", details),
+			onReachEnd: (details) => emit("reach-end", details)
+		}));
 		provideScrollArea(ctx);
+		const scrollTo = (options) => ctx.api.value.scrollTo(options);
+		expose({ scrollTo });
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			vertical: ctx.api.value.vertical,
 			horizontal: ctx.api.value.horizontal,
 			draggingAxis: ctx.api.value.draggingAxis,
-			cornerVisible: ctx.api.value.cornerVisible
+			cornerVisible: ctx.api.value.cornerVisible,
+			scrollTo
 		}));
 	}
 });

package/dist/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../src/components/scroll-area/scroll-area.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// 提供 scroll area 相关实现。\n\nimport type { Direction, Orientation, Size } from '@xihan-ui/core'\nimport type { ScrollAreaApi, ScrollAreaOrientation, ScrollAreaProps, ScrollAreaScrollbarProps, ScrollAreaVariant, ScrollbarType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport {\n  provideScrollArea,\n  provideScrollAreaScrollbar,\n  useScrollAreaContext,\n  useScrollAreaScrollbarContext,\n} from './context'\nimport { useScrollArea } from './use-scroll-area'\n\n/** 默认插槽的载荷：两条轴的滚动条状态、正被拖动的轴，以及右下角补丁是否应当显示。 */\nexport type ScrollAreaRootSlotProps = Pick<ScrollAreaApi, 'vertical' | 'horizontal' | 'draggingAxis' | 'cornerVisible'>\n\nexport const XhScrollAreaRoot = defineComponent({\n  name: 'XhScrollAreaRoot',\n  // 缺省值由 scrollbar 的机器与 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    type: { type: String as PropType<ScrollbarType> },\n    hideDelay: { type: Number },\n    orientation: { type: String as PropType<ScrollAreaOrientation> },\n    variant: { type: String as PropType<ScrollAreaVariant> },\n    size: { type: String as PropType<Size> },\n    dir: { type: String as PropType<Direction> },\n    /** 触屏（粗指针）上也绘制自绘滚动条；默认交给原生滚动。 */\n    forceVisible: Boolean,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ScrollAreaRootSlotProps) => VNode[]\n  }>,\n  // 组件不对外报事件，滚动是原生的，宿主直接在视口上监听\n  setup(props, { slots }) {\n    const ctx = useScrollArea(withXhConfig('scroll-area', props) as ScrollAreaProps)\n    provideScrollArea(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      vertical: ctx.api.value.vertical,\n      horizontal: ctx.api.value.horizontal,\n      draggingAxis: ctx.api.value.draggingAxis,\n      cornerVisible: ctx.api.value.cornerVisible,\n    }))\n  },\n})\n\nexport const XhScrollAreaViewport = defineComponent({\n  name: 'XhScrollAreaViewport',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    // 视口节点交给两台机器，尺寸与滚动量在效应与事件里现量\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 XhScrollAreaContent = defineComponent({\n  name: 'XhScrollAreaContent',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      ref: ctx.contentRef,\n    }, slots.default?.())\n  },\n})\n\n/** 某条轴的滚动条挂载点，同时是该 scrollbar 的根；其中按 scrollbar 的写法放置轨道、滑块与交叉口。 */\nexport const XhScrollAreaScrollbar = defineComponent({\n  name: 'XhScrollAreaScrollbar',\n  props: {\n    /** 该滚动条管理哪条轴。 */\n    orientation: { type: String as PropType<Orientation>, default: 'vertical' },\n  },\n  setup(props, { slots }) {\n    const ctx = useScrollAreaContext()\n    const scrollbar = computed<ScrollAreaScrollbarProps>(() => ({ orientation: props.orientation }))\n    provideScrollAreaScrollbar({ scrollbar })\n    return () => h('div', {\n      ...ctx.api.value.getScrollbarProps(scrollbar.value) as Record<string, unknown>,\n      // 根节点交给机器：指针进出它也算「手还在这儿」\n      ref: ctx.scrollbarRefs[props.orientation],\n    }, slots.default?.())\n  },\n})\n\nexport const XhScrollAreaTrack = defineComponent({\n  name: 'XhScrollAreaTrack',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    const { scrollbar } = useScrollAreaScrollbarContext()\n    // 轨道节点交给机器，长度在按下滑块时现量\n    return () => h('div', {\n      ...ctx.api.value.getTrackProps(scrollbar.value) as Record<string, unknown>,\n      ref: ctx.trackRefs[scrollbar.value.orientation],\n    }, slots.default?.())\n  },\n})\n\nexport const XhScrollAreaThumb = defineComponent({\n  name: 'XhScrollAreaThumb',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    const { scrollbar } = useScrollAreaScrollbarContext()\n    return () => h('div', ctx.api.value.getThumbProps(scrollbar.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 交叉口补丁，写在竖条的挂载点中；两条都在场时才显示。 */\nexport const XhScrollAreaCorner = defineComponent({\n  name: 'XhScrollAreaCorner',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    return () => h('div', ctx.api.value.getCornerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;;AAuBA,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CAEN,OAAO;EACL,MAAM,EAAE,MAAM,OAAkC;EAChD,WAAW,EAAE,MAAM,OAAO;EAC1B,aAAa,EAAE,MAAM,OAA0C;EAC/D,SAAS,EAAE,MAAM,OAAsC;EACvD,MAAM,EAAE,MAAM,OAAyB;EACvC,KAAK,EAAE,MAAM,OAA8B;;EAE3C,cAAc;CAChB;CACA,OAAO;CAIP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,cAAc,aAAa,eAAe,KAAK,CAAoB;EAC/E,kBAAkB,GAAG;EACrB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,UAAU,IAAI,IAAI,MAAM;GACxB,YAAY,IAAI,IAAI,MAAM;GAC1B,cAAc,IAAI,IAAI,MAAM;GAC5B,eAAe,IAAI,IAAI,MAAM;EAC/B,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EAEjC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,iBAAiB;GAClC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,gBAAgB;GACjC,KAAK,IAAI;EACX,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;;AAGD,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,OAAO;;AAEL,aAAa;EAAE,MAAM;EAAiC,SAAS;CAAW,EAC5E;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,qBAAqB;EACjC,MAAM,YAAY,gBAA0C,EAAE,aAAa,MAAM,YAAY,EAAE;EAC/F,2BAA2B,EAAE,UAAU,CAAC;EACxC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,kBAAkB,UAAU,KAAK;GAElD,KAAK,IAAI,cAAc,MAAM;EAC/B,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,cAAc,8BAA8B;EAEpD,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,cAAc,UAAU,KAAK;GAC9C,KAAK,IAAI,UAAU,UAAU,MAAM;EACrC,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,MAAM,EAAE,cAAc,8BAA8B;EACpD,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,UAAU,KAAK,GAA8B,MAAM,UAAU,CAAC;CAClH;AACF,CAAC;;AAGD,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,eAAe,GAA8B,MAAM,UAAU,CAAC;CACpG;AACF,CAAC"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../src/components/scroll-area/scroll-area.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// 提供 scroll area 相关实现。\n\nimport type { Direction, Orientation, Size } from '@xihan-ui/core'\nimport type { ScrollAreaApi, ScrollAreaOrientation, ScrollAreaProps, ScrollAreaScrollbarProps, ScrollAreaScrollDetails, ScrollAreaScrollToOptions, ScrollAreaVariant, ScrollbarType } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport {\n  provideScrollArea,\n  provideScrollAreaScrollbar,\n  useScrollAreaContext,\n  useScrollAreaScrollbarContext,\n} from './context'\nimport { useScrollArea } from './use-scroll-area'\n\n/** 默认插槽的载荷：两条轴的滚动条状态、正被拖动的轴、右下角补丁是否应当显示，以及滚动视口的命令。 */\nexport type ScrollAreaRootSlotProps = Pick<ScrollAreaApi, 'vertical' | 'horizontal' | 'draggingAxis' | 'cornerVisible' | 'scrollTo'>\n\nexport const XhScrollAreaRoot = defineComponent({\n  name: 'XhScrollAreaRoot',\n  // 缺省值由 scrollbar 的机器与 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    type: { type: String as PropType<ScrollbarType> },\n    hideDelay: { type: Number },\n    orientation: { type: String as PropType<ScrollAreaOrientation> },\n    variant: { type: String as PropType<ScrollAreaVariant> },\n    size: { type: String as PropType<Size> },\n    dir: { type: String as PropType<Direction> },\n    /** 触屏（粗指针）上也绘制自绘滚动条；默认交给原生滚动。 */\n    forceVisible: Boolean,\n  },\n  emits: {\n    /** 某条轴的滚动量变了，按轴分别通知。 */\n    'scroll-change': (_details: ScrollAreaScrollDetails) => true,\n    /** 某条轴滚到了末端，只在跨过末端那一下通知。 */\n    'reach-end': (_details: ScrollAreaScrollDetails) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ScrollAreaRootSlotProps) => VNode[]\n  }>,\n  // 滚动本身是原生的；滚动量变化与到头由两台 scrollbar 机器按轴报出来\n  setup(props, { slots, emit, expose }) {\n    const source = withXhConfig('scroll-area', props) as ScrollAreaProps\n    const ctx = useScrollArea(() => ({\n      ...source,\n      onScrollChange: details => emit('scroll-change', details),\n      onReachEnd: details => emit('reach-end', details),\n    }))\n    provideScrollArea(ctx)\n    const scrollTo = (options: ScrollAreaScrollToOptions): void => ctx.api.value.scrollTo(options)\n    expose({ scrollTo })\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      vertical: ctx.api.value.vertical,\n      horizontal: ctx.api.value.horizontal,\n      draggingAxis: ctx.api.value.draggingAxis,\n      cornerVisible: ctx.api.value.cornerVisible,\n      scrollTo,\n    }))\n  },\n})\n\nexport const XhScrollAreaViewport = defineComponent({\n  name: 'XhScrollAreaViewport',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    // 视口节点交给两台机器，尺寸与滚动量在效应与事件里现量\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 XhScrollAreaContent = defineComponent({\n  name: 'XhScrollAreaContent',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    return () => h('div', {\n      ...ctx.api.value.getContentProps() as Record<string, unknown>,\n      ref: ctx.contentRef,\n    }, slots.default?.())\n  },\n})\n\n/** 某条轴的滚动条挂载点，同时是该 scrollbar 的根；其中按 scrollbar 的写法放置轨道、滑块与交叉口。 */\nexport const XhScrollAreaScrollbar = defineComponent({\n  name: 'XhScrollAreaScrollbar',\n  props: {\n    /** 该滚动条管理哪条轴。 */\n    orientation: { type: String as PropType<Orientation>, default: 'vertical' },\n  },\n  setup(props, { slots }) {\n    const ctx = useScrollAreaContext()\n    const scrollbar = computed<ScrollAreaScrollbarProps>(() => ({ orientation: props.orientation }))\n    provideScrollAreaScrollbar({ scrollbar })\n    return () => h('div', {\n      ...ctx.api.value.getScrollbarProps(scrollbar.value) as Record<string, unknown>,\n      // 根节点交给机器：指针进出它也算「手还在这儿」\n      ref: ctx.scrollbarRefs[props.orientation],\n    }, slots.default?.())\n  },\n})\n\nexport const XhScrollAreaTrack = defineComponent({\n  name: 'XhScrollAreaTrack',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    const { scrollbar } = useScrollAreaScrollbarContext()\n    // 轨道节点交给机器，长度在按下滑块时现量\n    return () => h('div', {\n      ...ctx.api.value.getTrackProps(scrollbar.value) as Record<string, unknown>,\n      ref: ctx.trackRefs[scrollbar.value.orientation],\n    }, slots.default?.())\n  },\n})\n\nexport const XhScrollAreaThumb = defineComponent({\n  name: 'XhScrollAreaThumb',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    const { scrollbar } = useScrollAreaScrollbarContext()\n    return () => h('div', ctx.api.value.getThumbProps(scrollbar.value) as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 交叉口补丁，写在竖条的挂载点中；两条都在场时才显示。 */\nexport const XhScrollAreaCorner = defineComponent({\n  name: 'XhScrollAreaCorner',\n  setup(_, { slots }) {\n    const ctx = useScrollAreaContext()\n    return () => h('div', ctx.api.value.getCornerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}

package/dist/components/select/select.d.ts

@@ -1,6 +1,6 @@
 import { PropType, SlotsType, VNode } from "vue";
 import { ControlVariant, Direction, Placement, Size, Tone } from "@xihan-ui/core";
-import { SelectApi, SelectNode, SelectNodeMeta, SelectOpenChangeDetails, SelectSchema, SelectValueChangeDetails } from "@xihan-ui/headless";
+import { CollectionVirtualizer, SelectApi, SelectNode, SelectNodeMeta, SelectOpenChangeDetails, SelectSchema, SelectValueChangeDetails } from "@xihan-ui/headless";
 //#region src/components/select/select.d.ts
 type SelectProps = SelectSchema['props'];
 /** 默认插槽的载荷：展开态、选中集合与显示文字、可见标签与被折叠的个数及其文字，以及修改展开、修改值、清空、移除值四个动作。 */
@@ -9,6 +9,9 @@ declare const XhSelectRoot: import("vue").DefineComponent<import("vue").ExtractP
   collection: {
     type: PropType<SelectNode[]>;
   };
+  virtualizer: {
+    type: PropType<CollectionVirtualizer>;
+  };
   /** 标题文字。提供后不必再写 label 部件；需要放置其他内容时改用 label 插槽。 */
   label: {
     type: StringConstructor;
@@ -85,6 +88,7 @@ declare const XhSelectRoot: import("vue").DefineComponent<import("vue").ExtractP
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  clear: () => true;
   'value-change': (_details: SelectValueChangeDetails) => true;
   'open-change': (_details: SelectOpenChangeDetails) => true;
   'update:value': (_value: string[]) => true;
@@ -93,6 +97,9 @@ declare const XhSelectRoot: import("vue").DefineComponent<import("vue").ExtractP
   collection: {
     type: PropType<SelectNode[]>;
   };
+  virtualizer: {
+    type: PropType<CollectionVirtualizer>;
+  };
   /** 标题文字。提供后不必再写 label 部件；需要放置其他内容时改用 label 插槽。 */
   label: {
     type: StringConstructor;
@@ -169,6 +176,7 @@ declare const XhSelectRoot: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
   "onValue-change"?: ((_details: SelectValueChangeDetails) => any) | undefined;
   "onUpdate:value"?: ((_value: string[]) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onOpen-change"?: ((_details: SelectOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
 }>, {