@xihan-ui/vue 2.0.0 → 3.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"hierarchy-chart.js","names":[],"sources":["../../../src/components/hierarchy-chart/hierarchy-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// 提供 hierarchy chart 相关实现。\n\nimport type {\n  ChartDatumDetails,\n  ChartKey,\n  ChartMark,\n  ChartPalette,\n  ChartRow,\n  HierarchyChartApi,\n  HierarchyChartSchema,\n  HierarchyChartTranslations,\n  HierarchyColorBy,\n  HierarchyLayout,\n  HierarchyTile,\n  HierarchyTooltipModel,\n  NumberFormatSpec,\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 { provideHierarchyChart, useHierarchyChartContext } from './context'\nimport { useHierarchyChart } from './use-hierarchy-chart'\n\ntype HierarchyChartProps = HierarchyChartSchema['props']\n\n/** 默认插槽的载荷：自行摆放部件时用得上的状态与动作。 */\nexport type HierarchyChartRootSlotProps = Pick<HierarchyChartApi, 'active' | 'tooltip' | 'empty' | 'path' | 'rootKey' | 'activeKey' | 'drillTo' | 'drillUp' | 'setFocusedDatum' | 'table'>\n\n/** 提示框插槽的载荷：激活的节点与缺省的内容模型。 */\nexport interface HierarchyChartTooltipSlotProps {\n  active: ChartDatumDetails | null\n  tooltip: HierarchyTooltipModel | null\n}\n\n/** 一个场景标记画成 SVG 元素；文字标记带文字。 */\nfunction renderMark(api: HierarchyChartApi, 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: HierarchyChartApi): 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: HierarchyChartApi): 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 XhHierarchyChartCaption = defineComponent({\n  name: 'XhHierarchyChartCaption',\n  setup(_, { slots }) {\n    const ctx = useHierarchyChartContext()\n    return () => h('figcaption', ctx.api.value.getCaptionProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\n/** 下钻路径：从最顶层到当前的根，每一项是一个按钮；还在最顶层时收起。 */\nexport const XhHierarchyChartPath = defineComponent({\n  name: 'XhHierarchyChartPath',\n  setup() {\n    const ctx = useHierarchyChartContext()\n    return () => {\n      const api = ctx.api.value\n      return h('nav', api.getPathProps() as Record<string, unknown>, api.path.map(item =>\n        h('button', { ...api.getPathItemProps(item) as Record<string, unknown>, key: item.key ?? '' }, item.name)))\n    }\n  },\n})\n\n/** 图例：按值着色时每个看得见的层一条色阶（名字、低端的值、渐变条、高端的值）；其余着色方式收起。 */\nexport const XhHierarchyChartLegend = defineComponent({\n  name: 'XhHierarchyChartLegend',\n  setup() {\n    const ctx = useHierarchyChartContext()\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getLegendProps() as Record<string, unknown>, api.legendScales.map(scale =>\n        h('div', { ...api.getLegendScaleProps(scale) as Record<string, unknown>, key: scale.level }, [\n          h('span', api.getLegendScaleNameProps() as Record<string, unknown>, scale.name),\n          h('span', api.getLegendScaleValueProps('min') as Record<string, unknown>, scale.min),\n          h('span', api.getLegendScaleBarProps() as Record<string, unknown>),\n          h('span', api.getLegendScaleValueProps('max') as Record<string, unknown>, scale.max),\n        ])))\n    }\n  },\n})\n\n/** 视口：尺寸观测的宿主，块尺寸由组件槽决定。 */\nexport const XhHierarchyChartViewport = defineComponent({\n  name: 'XhHierarchyChartViewport',\n  setup(_, { slots }) {\n    const ctx = useHierarchyChartContext()\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 XhHierarchyChartPlot = defineComponent({\n  name: 'XhHierarchyChartPlot',\n  setup() {\n    const ctx = useHierarchyChartContext()\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>, marks.map(mark => renderMark(api, mark)))\n    }\n  },\n})\n\n/** 提示框：缺省内容按激活的节点生成，作用域插槽可替换。 */\nexport const XhHierarchyChartTooltip = defineComponent({\n  name: 'XhHierarchyChartTooltip',\n  slots: Object as SlotsType<{\n    default?: (props: HierarchyChartTooltipSlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useHierarchyChartContext()\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 XhHierarchyChartEmpty = defineComponent({\n  name: 'XhHierarchyChartEmpty',\n  setup(_, { slots }) {\n    const ctx = useHierarchyChartContext()\n    return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.emptyText)\n  },\n})\n\n/** 根：铺开缺省结构或交给默认插槽，并在末尾追加摘要与数据表。 */\nexport const XhHierarchyChartRoot = defineComponent({\n  name: 'XhHierarchyChartRoot',\n  // 缺省值由机器与 connect 决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    data: { type: [Object, Array] as PropType<ChartRow | readonly ChartRow[]> },\n    childrenField: { type: String },\n    idField: { type: String },\n    parentField: { type: String },\n    nameField: { type: String },\n    valueField: { type: String },\n    layout: { type: String as PropType<HierarchyLayout> },\n    tile: { type: String as PropType<HierarchyTile> },\n    depth: { type: Number },\n    colorBy: { type: String as PropType<HierarchyColorBy> },\n    palette: { type: String as PropType<ChartPalette> },\n    orientation: { type: String as PropType<'vertical' | 'horizontal'> },\n    rootKey: { type: [String, null] as PropType<string | null> },\n    defaultRootKey: { type: [String, null] as PropType<string | null> },\n    format: { type: [Object, Function] as PropType<NumberFormatSpec | ((value: number) => 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<HierarchyChartTranslations>> },\n  },\n  // root-key-change / active-key-change 携带 details；update:* 携带裸值，支持 v-model\n  emits: {\n    'root-key-change': (_details: PayloadOf<HierarchyChartProps, 'onRootKeyChange'>) => true,\n    'update:rootKey': (_key: PayloadOf<HierarchyChartProps, 'onRootKeyChange'>['rootKey']) => true,\n    'active-key-change': (_details: PayloadOf<HierarchyChartProps, 'onActiveKeyChange'>) => true,\n    'update:activeKey': (_key: PayloadOf<HierarchyChartProps, 'onActiveKeyChange'>['activeKey']) => true,\n    'datum-active': (_details: PayloadOf<HierarchyChartProps, 'onDatumActive'>) => true,\n    'datum-press': (_details: PayloadOf<HierarchyChartProps, 'onDatumPress'>) => true,\n  },\n  slots: Object as SlotsType<{\n    /** 自行摆放部件；不写时铺开缺省结构：下钻路径、视口（绘图区与空态）、提示框。 */\n    default?: (props: HierarchyChartRootSlotProps) => VNode[]\n    /** 缺省结构里的标题内容。 */\n    caption?: () => VNode[]\n    /** 缺省结构里的提示框内容。 */\n    tooltip?: (props: HierarchyChartTooltipSlotProps) => VNode[]\n    /** 缺省结构里的空态内容。 */\n    empty?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useHierarchyChart(withXhConfig('hierarchy-chart', props) as HierarchyChartProps, {\n      onRootKeyChange: (details) => {\n        emit('root-key-change', details)\n        emit('update:rootKey', details.rootKey)\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    provideHierarchyChart(ctx)\n    return () => {\n      const api = ctx.api.value\n      const content = slots.default\n        ? slots.default({\n            active: api.active,\n            tooltip: api.tooltip,\n            empty: api.empty,\n            table: api.table,\n            path: api.path,\n            rootKey: api.rootKey,\n            activeKey: api.activeKey,\n            drillTo: api.drillTo,\n            drillUp: api.drillUp,\n            setFocusedDatum: api.setFocusedDatum,\n          })\n        : [\n            ...(slots.caption ? [h(XhHierarchyChartCaption, null, () => slots.caption?.())] : []),\n            h(XhHierarchyChartPath),\n            h(XhHierarchyChartLegend),\n            // 空态放进视口：叠在绘图区上，标题与路径不被盖住\n            h(XhHierarchyChartViewport, null, () => [\n              h(XhHierarchyChartPlot),\n              h(XhHierarchyChartEmpty, null, slots.empty ? () => slots.empty?.() : undefined),\n            ]),\n            h(XhHierarchyChartTooltip, 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/hierarchy-chart/use-hierarchy-chart.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hierarchy-chart.d.ts","names":[],"sources":["../../../src/components/hierarchy-chart/use-hierarchy-chart.ts"],"mappings":";;;;;KAgBY,0BAA0B,KACpC;UAIe;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;EAEb,aAAa,IAAI;;;iBAIH,kBACd,OAAO,+BACP,SAAS,0BACR"}

package/dist/components/hierarchy-chart/use-hierarchy-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 { connectHierarchyChart, hierarchyChartMachine } from "@xihan-ui/headless";
+//#region src/components/hierarchy-chart/use-hierarchy-chart.ts
+/** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */
+function useHierarchyChart(props, notify) {
+	const rootRef = ref(null);
+	const viewportRef = ref(null);
+	const service = useMachine(hierarchyChartMachine, () => ({
+		...props,
+		...notify
+	}));
+	service.refs.set("getRootEl", () => rootRef.value);
+	service.refs.set("getViewportEl", () => viewportRef.value);
+	return {
+		api: computed(() => connectHierarchyChart(service, vueNormalize)),
+		service,
+		rootRef,
+		viewportRef
+	};
+}
+//#endregion
+export { useHierarchyChart };
+
+//# sourceMappingURL=use-hierarchy-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hierarchy-chart.js","names":[],"sources":["../../../src/components/hierarchy-chart/use-hierarchy-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 hierarchy chart 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { HierarchyChartApi, HierarchyChartSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectHierarchyChart, hierarchyChartMachine } 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 HierarchyChartNotifiers = Pick<\n  HierarchyChartSchema['props'],\n  'onRootKeyChange' | 'onActiveKeyChange' | 'onDatumActive' | 'onDatumPress'\n>\n\nexport interface HierarchyChartContext {\n  api: ComputedRef<HierarchyChartApi>\n  service: Service<HierarchyChartSchema>\n  /** 根：机器在它上面读度量私有槽。 */\n  rootRef: Ref<HTMLElement | null>\n  /** 视口：尺寸观测的宿主。 */\n  viewportRef: Ref<HTMLElement | null>\n}\n\n/** 量测、度量与文字度量器都在状态机的效应里做，DOM 取值口经 refs 交入。 */\nexport function useHierarchyChart(\n  props: HierarchyChartSchema['props'],\n  notify?: HierarchyChartNotifiers,\n): HierarchyChartContext {\n  const rootRef = ref<HTMLElement | null>(null)\n  const viewportRef = ref<HTMLElement | null>(null)\n  // 传响应式 props 对象本身而非快照，供机器每次读时重新展开\n  const service = useMachine(hierarchyChartMachine, () => ({ ...props, ...notify }))\n  service.refs.set('getRootEl', () => rootRef.value)\n  service.refs.set('getViewportEl', () => viewportRef.value)\n  const api = computed(() => connectHierarchyChart(service, vueNormalize))\n  return { api, service, rootRef, viewportRef }\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,kBACd,OACA,QACuB;CACvB,MAAM,UAAU,IAAwB,IAAI;CAC5C,MAAM,cAAc,IAAwB,IAAI;CAEhD,MAAM,UAAU,WAAW,8BAA8B;EAAE,GAAG;EAAO,GAAG;CAAO,EAAE;CACjF,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CACjD,QAAQ,KAAK,IAAI,uBAAuB,YAAY,KAAK;CAEzD,OAAO;EAAE,KADG,eAAe,sBAAsB,SAAS,YAAY,CAC3D;EAAG;EAAS;EAAS;CAAY;AAC9C"}

package/dist/components/hover-card/hover-card.js

@@ -1,7 +1,7 @@
-import { XhPortal } from "../../runtime/portal.js";
-import { useScrollbars } from "../../runtime/use-scrollbars.js";
 import { mergePartProps } from "../../runtime/merge-props.js";
 import { mergeIntoChild } from "../../runtime/as-child.js";
+import { XhPortal } from "../../runtime/portal.js";
+import { useScrollbars } from "../../runtime/use-scrollbars.js";
 import { provideHoverCard, useHoverCardContext } from "./context.js";
 import { useHoverCard } from "./use-hover-card.js";
 import { defineComponent, h, mergeProps } from "vue";

package/dist/components/icon/icon.d.ts

@@ -1,5 +1,5 @@
 import { PropType, VNode } from "vue";
-import { IconRecord, Tone } from "@xihan-ui/core";
+import { ActionVariant, IconRecord, Tone } from "@xihan-ui/core";
 import { IconFlip, IconRotate, IconSize, IconWeight } from "@xihan-ui/headless";
 //#region src/components/icon/icon.d.ts
 /**
@@ -24,6 +24,9 @@ declare const XhIcon: import("vue").DefineComponent<import("vue").ExtractPropTyp
   tone: {
     type: PropType<Tone>;
   };
+  frame: {
+    type: PropType<ActionVariant>;
+  };
   rotate: {
     type: PropType<IconRotate | string>;
   };
@@ -48,6 +51,9 @@ declare const XhIcon: import("vue").DefineComponent<import("vue").ExtractPropTyp
   tone: {
     type: PropType<Tone>;
   };
+  frame: {
+    type: PropType<ActionVariant>;
+  };
   rotate: {
     type: PropType<IconRotate | string>;
   };

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","names":[],"sources":["../../../src/components/icon/icon.ts"],"mappings":";;;;;;;;;;cA6Ba,sBAAM,8BAAA;;IAIS,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACG,MAAA,SAAS;;;IACrB,MAAA,SAAS;;;;;;IANT,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACG,MAAA,SAAS;;;IACrB,MAAA,SAAS;;MAmBnC,oDAAA"}
+{"version":3,"file":"icon.d.ts","names":[],"sources":["../../../src/components/icon/icon.ts"],"mappings":";;;;;;;;;;cA6Ba,sBAAM,8BAAA;;IAIS,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACE,MAAA,SAAS;;;IACrB,MAAA,SAAS;;;;;;IAPT,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACE,MAAA,SAAS;;;IACrB,MAAA,SAAS;;MAmBnC,oDAAA"}

package/dist/components/icon/icon.js

@@ -24,6 +24,7 @@ const XhIcon = defineComponent({
 		size: { type: String },
 		weight: { type: String },
 		tone: { type: String },
+		frame: { type: String },
 		rotate: { type: [Number, String] },
 		flip: { type: String }
 	},

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../src/components/icon/icon.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// 提供 icon 相关实现。\n\nimport type { IconNode, IconRecord, Tone } from '@xihan-ui/core'\nimport type { IconFlip, IconProps, IconRotate, IconSize, IconWeight } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { useIcon } from './use-icon'\n\n/**\n * 把一个图元节点建为 VNode，递归到底。\n * 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 向下传递。\n */\nfunction renderNode(node: IconNode): VNode {\n  return h(node.tag, node.attrs as Record<string, unknown> | undefined, node.children?.map(renderNode))\n}\n\n/**\n * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳中。\n * 默认插槽给出内容时改由插槽内容填充根，元素不再生成 glyph 与图元；\n * 判据是插槽产出中有真正会渲染出内容的节点：既不是插槽函数是否存在（宿主可能恒传一个插槽），\n * 也不是产出数组非空（`v-if` 为假时产出中还剩一个注释节点）。\n */\nexport const XhIcon = defineComponent({\n  name: 'XhIcon',\n  // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    icon: { type: Object as PropType<IconRecord> },\n    label: { type: String },\n    size: { type: String as PropType<IconSize> },\n    weight: { type: String as PropType<IconWeight> },\n    tone: { type: String as PropType<Tone> },\n    rotate: { type: [Number, String] as PropType<IconRotate | string> },\n    flip: { type: String as PropType<IconFlip> },\n  },\n  setup(props, { slots }) {\n    const ctx = useIcon(withXhConfig('icon', props) as IconProps)\n    return () => {\n      const authored = slots.default?.()\n      return h(\n        'svg',\n        ctx.api.value.getRootProps() as Record<string, unknown>,\n        slotPaints(authored)\n          ? authored\n          : [h(\n              'g',\n              ctx.api.value.getGlyphProps() as Record<string, unknown>,\n              ctx.api.value.nodes.map(renderNode),\n            )],\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;;;AAmBA,SAAS,WAAW,MAAuB;CACzC,OAAO,EAAE,KAAK,KAAK,KAAK,OAA8C,KAAK,UAAU,IAAI,UAAU,CAAC;AACtG;;;;;;;AAQA,MAAa,SAAS,gBAAgB;CACpC,MAAM;CAEN,OAAO;EACL,MAAM,EAAE,MAAM,OAA+B;EAC7C,OAAO,EAAE,MAAM,OAAO;EACtB,MAAM,EAAE,MAAM,OAA6B;EAC3C,QAAQ,EAAE,MAAM,OAA+B;EAC/C,MAAM,EAAE,MAAM,OAAyB;EACvC,QAAQ,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAmC;EAClE,MAAM,EAAE,MAAM,OAA6B;CAC7C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,QAAQ,aAAa,QAAQ,KAAK,CAAc;EAC5D,aAAa;GACX,MAAM,WAAW,MAAM,UAAU;GACjC,OAAO,EACL,OACA,IAAI,IAAI,MAAM,aAAa,GAC3B,WAAW,QAAQ,IACf,WACA,CAAC,EACC,KACA,IAAI,IAAI,MAAM,cAAc,GAC5B,IAAI,IAAI,MAAM,MAAM,IAAI,UAAU,CACpC,CAAC,CACP;EACF;CACF;AACF,CAAC"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../src/components/icon/icon.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// 提供 icon 相关实现。\n\nimport type { ActionVariant, IconNode, IconRecord, Tone } from '@xihan-ui/core'\nimport type { IconFlip, IconProps, IconRotate, IconSize, IconWeight } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { useIcon } from './use-icon'\n\n/**\n * 把一个图元节点建为 VNode，递归到底。\n * 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 向下传递。\n */\nfunction renderNode(node: IconNode): VNode {\n  return h(node.tag, node.attrs as Record<string, unknown> | undefined, node.children?.map(renderNode))\n}\n\n/**\n * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳中。\n * 默认插槽给出内容时改由插槽内容填充根，元素不再生成 glyph 与图元；\n * 判据是插槽产出中有真正会渲染出内容的节点：既不是插槽函数是否存在（宿主可能恒传一个插槽），\n * 也不是产出数组非空（`v-if` 为假时产出中还剩一个注释节点）。\n */\nexport const XhIcon = defineComponent({\n  name: 'XhIcon',\n  // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    icon: { type: Object as PropType<IconRecord> },\n    label: { type: String },\n    size: { type: String as PropType<IconSize> },\n    weight: { type: String as PropType<IconWeight> },\n    tone: { type: String as PropType<Tone> },\n    frame: { type: String as PropType<ActionVariant> },\n    rotate: { type: [Number, String] as PropType<IconRotate | string> },\n    flip: { type: String as PropType<IconFlip> },\n  },\n  setup(props, { slots }) {\n    const ctx = useIcon(withXhConfig('icon', props) as IconProps)\n    return () => {\n      const authored = slots.default?.()\n      return h(\n        'svg',\n        ctx.api.value.getRootProps() as Record<string, unknown>,\n        slotPaints(authored)\n          ? authored\n          : [h(\n              'g',\n              ctx.api.value.getGlyphProps() as Record<string, unknown>,\n              ctx.api.value.nodes.map(renderNode),\n            )],\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;;;AAmBA,SAAS,WAAW,MAAuB;CACzC,OAAO,EAAE,KAAK,KAAK,KAAK,OAA8C,KAAK,UAAU,IAAI,UAAU,CAAC;AACtG;;;;;;;AAQA,MAAa,SAAS,gBAAgB;CACpC,MAAM;CAEN,OAAO;EACL,MAAM,EAAE,MAAM,OAA+B;EAC7C,OAAO,EAAE,MAAM,OAAO;EACtB,MAAM,EAAE,MAAM,OAA6B;EAC3C,QAAQ,EAAE,MAAM,OAA+B;EAC/C,MAAM,EAAE,MAAM,OAAyB;EACvC,OAAO,EAAE,MAAM,OAAkC;EACjD,QAAQ,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAmC;EAClE,MAAM,EAAE,MAAM,OAA6B;CAC7C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,QAAQ,aAAa,QAAQ,KAAK,CAAc;EAC5D,aAAa;GACX,MAAM,WAAW,MAAM,UAAU;GACjC,OAAO,EACL,OACA,IAAI,IAAI,MAAM,aAAa,GAC3B,WAAW,QAAQ,IACf,WACA,CAAC,EACC,KACA,IAAI,IAAI,MAAM,cAAc,GAC5B,IAAI,IAAI,MAAM,MAAM,IAAI,UAAU,CACpC,CAAC,CACP;EACF;CACF;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-image.d.ts","names":[],"sources":["../../../src/components/image/use-image.ts"],"mappings":";;;;UAeiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;iBAGH,SACd,OAAO,sBACP,iBAAiB,yCAChB"}
+{"version":3,"file":"use-image.d.ts","names":[],"sources":["../../../src/components/image/use-image.ts"],"mappings":";;;;UAiBiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;iBAGH,SACd,OAAO,sBACP,iBAAiB,yCAChB"}

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

@@ -1,13 +1,15 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
+import { createVueIdGenerator } from "../../runtime/vue-id.js";
 import { computed } from "vue";
+import { createScope } from "@xihan-ui/core";
 import { connectImage, imageMachine } from "@xihan-ui/headless";
 //#region src/components/image/use-image.ts
 function useImage(props, onStatusChange) {
 	const service = useMachine(imageMachine, () => ({
 		...props,
 		onStatusChange
-	}));
+	}), createScope(null, createVueIdGenerator()));
 	return {
 		service,
 		api: computed(() => connectImage(service, vueNormalize))

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

@@ -1 +1 @@
-{"version":3,"file":"use-image.js","names":[],"sources":["../../../src/components/image/use-image.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 image 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectImage, imageMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface ImageContext {\n  service: Service<ImageSchema>\n  api: ComputedRef<ImageApi>\n}\n\nexport function useImage(\n  props: ImageSchema['props'],\n  onStatusChange?: ImageSchema['props']['onStatusChange'],\n): ImageContext {\n  const service = useMachine(imageMachine, () => ({ ...props, onStatusChange }))\n  const api = computed(() => connectImage(service, vueNormalize))\n  return { service, api }\n}\n"],"mappings":";;;;;AAoBA,SAAgB,SACd,OACA,gBACc;CACd,MAAM,UAAU,WAAW,qBAAqB;EAAE,GAAG;EAAO;CAAe,EAAE;CAE7E,OAAO;EAAE;EAAS,KADN,eAAe,aAAa,SAAS,YAAY,CACzC;CAAE;AACxB"}
+{"version":3,"file":"use-image.js","names":[],"sources":["../../../src/components/image/use-image.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 image 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectImage, imageMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface ImageContext {\n  service: Service<ImageSchema>\n  api: ComputedRef<ImageApi>\n}\n\nexport function useImage(\n  props: ImageSchema['props'],\n  onStatusChange?: ImageSchema['props']['onStatusChange'],\n): ImageContext {\n  // 占位层与回退节点带 scope 派生的 id：撤下时按它找到节点，等淡出播完再藏起\n  const service = useMachine(imageMachine, () => ({ ...props, onStatusChange }), createScope(null, createVueIdGenerator()))\n  const api = computed(() => connectImage(service, vueNormalize))\n  return { service, api }\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,SACd,OACA,gBACc;CAEd,MAAM,UAAU,WAAW,qBAAqB;EAAE,GAAG;EAAO;CAAe,IAAI,YAAY,MAAM,qBAAqB,CAAC,CAAC;CAExH,OAAO;EAAE;EAAS,KADN,eAAe,aAAa,SAAS,YAAY,CACzC;CAAE;AACxB"}

package/dist/components/image-cropper/image-cropper.d.ts

@@ -1,10 +1,10 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { ImageCropperApi, ImageCropperHandlePosition, ImageCropperRect, ImageCropperSchema, ImageCropperShape } from "@xihan-ui/headless";
+import { ImageCropperApi, ImageCropperFlip, ImageCropperFlipAxis, ImageCropperHandlePosition, ImageCropperRect, ImageCropperSchema, ImageCropperShape } from "@xihan-ui/headless";
 //#region src/components/image-cropper/image-cropper.d.ts
 type ImageCropperProps = ImageCropperSchema['props'];
-/** 默认插槽的载荷：裁切矩形与图片自然尺寸、缩放与旋转、两种拖动标记，以及修改值、修改倍率与获取结果。 */
-type ImageCropperRootSlotProps = Pick<ImageCropperApi, 'value' | 'zoom' | 'rotation' | 'natural' | 'dragging' | 'resizing' | 'disabled' | 'readOnly' | 'getCropRect' | 'setValue' | 'setZoom' | 'setRotation'>;
+/** 默认插槽的载荷：裁切矩形与图片自然尺寸、缩放、旋转与翻转、两种拖动标记，以及修改值、修改呈现与出图。 */
+type ImageCropperRootSlotProps = Pick<ImageCropperApi, 'value' | 'zoom' | 'rotation' | 'flip' | 'natural' | 'dragging' | 'resizing' | 'disabled' | 'readOnly' | 'getCropRect' | 'toCanvas' | 'setValue' | 'setZoom' | 'setRotation' | 'setFlip' | 'toggleFlip'>;
 declare const XhImageCropperRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   src: {
     type: StringConstructor;
@@ -57,6 +57,12 @@ declare const XhImageCropperRoot: import("vue").DefineComponent<import("vue").Ex
   rotationStep: {
     type: NumberConstructor;
   };
+  flip: {
+    type: PropType<ImageCropperFlip>;
+  };
+  defaultFlip: {
+    type: PropType<ImageCropperFlip>;
+  };
   shape: {
     type: PropType<ImageCropperShape>;
   };
@@ -84,6 +90,8 @@ declare const XhImageCropperRoot: import("vue").DefineComponent<import("vue").Ex
   'update:zoom': (_zoom: PayloadOf<ImageCropperProps, "onZoomChange">["zoom"]) => true;
   'rotation-change': (_details: PayloadOf<ImageCropperProps, "onRotationChange">) => true;
   'update:rotation': (_rotation: PayloadOf<ImageCropperProps, "onRotationChange">["rotation"]) => true;
+  'flip-change': (_details: PayloadOf<ImageCropperProps, "onFlipChange">) => true;
+  'update:flip': (_flip: PayloadOf<ImageCropperProps, "onFlipChange">["flip"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   src: {
     type: StringConstructor;
@@ -136,6 +144,12 @@ declare const XhImageCropperRoot: import("vue").DefineComponent<import("vue").Ex
   rotationStep: {
     type: NumberConstructor;
   };
+  flip: {
+    type: PropType<ImageCropperFlip>;
+  };
+  defaultFlip: {
+    type: PropType<ImageCropperFlip>;
+  };
   shape: {
     type: PropType<ImageCropperShape>;
   };
@@ -161,6 +175,8 @@ declare const XhImageCropperRoot: import("vue").DefineComponent<import("vue").Ex
   "onUpdate:zoom"?: ((_zoom: number) => any) | undefined;
   "onRotation-change"?: ((_details: import("@xihan-ui/headless").ImageCropperRotationChangeDetails) => any) | undefined;
   "onUpdate:rotation"?: ((_rotation: number) => any) | undefined;
+  "onFlip-change"?: ((_details: import("@xihan-ui/headless").ImageCropperFlipChangeDetails) => any) | undefined;
+  "onUpdate:flip"?: ((_flip: ImageCropperFlip) => any) | undefined;
 }>, {
   disabled: boolean;
   readOnly: boolean;
@@ -200,9 +216,24 @@ declare const XhImageCropperZoomSlider: import("vue").DefineComponent<{}, () =>
 declare const XhImageCropperRotateSlider: 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 XhImageCropperFlipTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 这颗按钮翻哪条轴，必填。 */
+  axis: {
+    type: PropType<ImageCropperFlipAxis>;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 这颗按钮翻哪条轴，必填。 */
+  axis: {
+    type: PropType<ImageCropperFlipAxis>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhImageCropperHiddenInput: 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>;
 //#endregion
-export { ImageCropperRootSlotProps, XhImageCropperCropArea, XhImageCropperCropHandle, XhImageCropperGrid, XhImageCropperHiddenInput, XhImageCropperImage, XhImageCropperRoot, XhImageCropperRotateSlider, XhImageCropperViewport, XhImageCropperZoomSlider };
+export { ImageCropperRootSlotProps, XhImageCropperCropArea, XhImageCropperCropHandle, XhImageCropperFlipTrigger, XhImageCropperGrid, XhImageCropperHiddenInput, XhImageCropperImage, XhImageCropperRoot, XhImageCropperRotateSlider, XhImageCropperViewport, XhImageCropperZoomSlider };
 //# sourceMappingURL=image-cropper.d.ts.map

package/dist/components/image-cropper/image-cropper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper.d.ts","names":[],"sources":["../../../src/components/image-cropper/image-cropper.ts"],"mappings":";;;;KAsBK,oBAAoB;;KAGb,4BAA4B,KACtC;cAKW,kCAAkB,8BAAA;;;;;;;;IAMI,MAAA;;;IACN,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAahB,MAAA,SAAS;;;;;;;;;;;;;;IAKhB,MAAA,SAAS;;;;;EAMA,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACJ,qBAAA,UAAA,UAAU;EACf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;;;;;;;;;IAhCV,MAAA;;;IACN,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAahB,MAAA,SAAS;;;;;;;;;;;;;;IAKhB,MAAA,SAAS;;;;;;;;;;;;;;EAejB,WAAC,OAAO,8BAA8B;kCAsClD;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAUjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,8BAAA;;;IAIL,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAWvC,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"image-cropper.d.ts","names":[],"sources":["../../../src/components/image-cropper/image-cropper.ts"],"mappings":";;;;KAwBK,oBAAoB;;KAGb,4BAA4B,KACtC;cAKW,kCAAkB,8BAAA;;;;;;;;IAMI,MAAA;;;IACN,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAajB,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACf,MAAA,SAAS;;;;;;;;;;;;;;IAKhB,MAAA,SAAS;;;;;EAMA,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACJ,qBAAA,UAAA,UAAU;EACf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;EACf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;;;;;;;;;IApCF,MAAA;;;IACN,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAajB,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACf,MAAA,SAAS;;;;;;;;;;;;;;IAKhB,MAAA,SAAS;;;;;;;;;;;;;;;;EAiBjB,WAAC,OAAO,8BAA8B;kCA8ClD;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAUjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAU9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,8BAAA;;;IAIL,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAWvC,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,8BAAA;;;IAIV,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAUnC,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAMpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/image-cropper/image-cropper.js

@@ -24,6 +24,8 @@ const XhImageCropperRoot = defineComponent({
 		minRotation: { type: Number },
 		maxRotation: { type: Number },
 		rotationStep: { type: Number },
+		flip: { type: Object },
+		defaultFlip: { type: Object },
 		shape: { type: String },
 		disabled: {
 			type: Boolean,
@@ -43,7 +45,9 @@ const XhImageCropperRoot = defineComponent({
 		"zoom-change": (_details) => true,
 		"update:zoom": (_zoom) => true,
 		"rotation-change": (_details) => true,
-		"update:rotation": (_rotation) => true
+		"update:rotation": (_rotation) => true,
+		"flip-change": (_details) => true,
+		"update:flip": (_flip) => true
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
@@ -62,26 +66,35 @@ const XhImageCropperRoot = defineComponent({
 			emit("rotation-change", details);
 			emit("update:rotation", details.rotation);
 		};
+		const onFlipChange = (details) => {
+			emit("flip-change", details);
+			emit("update:flip", details.flip);
+		};
 		const ctx = useImageCropper(withXhConfig("image-cropper", useFormControlProps(props)), {
 			onValueChange,
 			onValueChangeEnd,
 			onZoomChange,
-			onRotationChange
+			onRotationChange,
+			onFlipChange
 		});
 		provideImageCropper(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			value: ctx.api.value.value,
 			zoom: ctx.api.value.zoom,
 			rotation: ctx.api.value.rotation,
+			flip: ctx.api.value.flip,
 			natural: ctx.api.value.natural,
 			dragging: ctx.api.value.dragging,
 			resizing: ctx.api.value.resizing,
 			disabled: ctx.api.value.disabled,
 			readOnly: ctx.api.value.readOnly,
 			getCropRect: ctx.api.value.getCropRect,
+			toCanvas: ctx.api.value.toCanvas,
 			setValue: ctx.api.value.setValue,
 			setZoom: ctx.api.value.setZoom,
-			setRotation: ctx.api.value.setRotation
+			setRotation: ctx.api.value.setRotation,
+			setFlip: ctx.api.value.setFlip,
+			toggleFlip: ctx.api.value.toggleFlip
 		}));
 	}
 });
@@ -99,7 +112,10 @@ const XhImageCropperImage = defineComponent({
 	name: "XhImageCropperImage",
 	setup() {
 		const ctx = useImageCropperContext();
-		return () => h("img", ctx.api.value.getImageProps());
+		return () => h("img", {
+			...ctx.api.value.getImageProps(),
+			ref: ctx.imageRef
+		});
 	}
 });
 const XhImageCropperCropArea = defineComponent({
@@ -143,6 +159,19 @@ const XhImageCropperRotateSlider = defineComponent({
 		return () => h("input", ctx.api.value.getRotateSliderProps());
 	}
 });
+const XhImageCropperFlipTrigger = defineComponent({
+	name: "XhImageCropperFlipTrigger",
+	props: { 
+	/** 这颗按钮翻哪条轴，必填。 */
+axis: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const ctx = useImageCropperContext();
+		return () => h("button", ctx.api.value.getFlipTriggerProps({ axis: props.axis }), slots.default?.());
+	}
+});
 const XhImageCropperHiddenInput = defineComponent({
 	name: "XhImageCropperHiddenInput",
 	setup() {
@@ -151,6 +180,6 @@ const XhImageCropperHiddenInput = defineComponent({
 	}
 });
 //#endregion
-export { XhImageCropperCropArea, XhImageCropperCropHandle, XhImageCropperGrid, XhImageCropperHiddenInput, XhImageCropperImage, XhImageCropperRoot, XhImageCropperRotateSlider, XhImageCropperViewport, XhImageCropperZoomSlider };
+export { XhImageCropperCropArea, XhImageCropperCropHandle, XhImageCropperFlipTrigger, XhImageCropperGrid, XhImageCropperHiddenInput, XhImageCropperImage, XhImageCropperRoot, XhImageCropperRotateSlider, XhImageCropperViewport, XhImageCropperZoomSlider };
 
 //# sourceMappingURL=image-cropper.js.map

package/dist/components/image-cropper/image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/image-cropper.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// 提供 image cropper 相关实现。\n\nimport type {\n  ImageCropperApi,\n  ImageCropperHandlePosition,\n  ImageCropperRect,\n  ImageCropperSchema,\n  ImageCropperShape,\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 { useFormControlProps } from '../form/use-form-control'\nimport { provideImageCropper, useImageCropperContext } from './context'\nimport { useImageCropper } from './use-image-cropper'\n\ntype ImageCropperProps = ImageCropperSchema['props']\n\n/** 默认插槽的载荷：裁切矩形与图片自然尺寸、缩放与旋转、两种拖动标记，以及修改值、修改倍率与获取结果。 */\nexport type ImageCropperRootSlotProps = Pick<\n  ImageCropperApi,\n  'value' | 'zoom' | 'rotation' | 'natural' | 'dragging' | 'resizing' | 'disabled' | 'readOnly'\n  | 'getCropRect' | 'setValue' | 'setZoom' | 'setRotation'\n>\n\nexport const XhImageCropperRoot = defineComponent({\n  name: 'XhImageCropperRoot',\n  // 缺省值由 connect 与机器决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    src: { type: String },\n    alt: { type: String },\n    aspectRatio: { type: Number as PropType<number | null> },\n    value: { type: Object as PropType<ImageCropperRect> },\n    defaultValue: { type: Object as PropType<ImageCropperRect> },\n    minWidth: { type: Number },\n    minHeight: { type: Number },\n    zoom: { type: Number },\n    defaultZoom: { type: Number },\n    minZoom: { type: Number },\n    maxZoom: { type: Number },\n    zoomStep: { type: Number },\n    rotation: { type: Number },\n    defaultRotation: { type: Number },\n    minRotation: { type: Number },\n    maxRotation: { type: Number },\n    rotationStep: { type: Number },\n    shape: { type: String as PropType<ImageCropperShape> },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    name: { type: String },\n    translations: {\n      type: Object as PropType<ImageCropperProps['translations']>,\n    },\n  },\n  // value-change 携带 { value }，update:value 携带裸矩形；\n  // value-change-end 在一次指针拖动松手时发一次，一次方向键微调也发一次\n  emits: {\n    'value-change': (_details: PayloadOf<ImageCropperProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<ImageCropperProps, 'onValueChange'>['value']) => true,\n    'value-change-end': (_details: PayloadOf<ImageCropperProps, 'onValueChangeEnd'>) => true,\n    'zoom-change': (_details: PayloadOf<ImageCropperProps, 'onZoomChange'>) => true,\n    'update:zoom': (_zoom: PayloadOf<ImageCropperProps, 'onZoomChange'>['zoom']) => true,\n    'rotation-change': (_details: PayloadOf<ImageCropperProps, 'onRotationChange'>) => true,\n    'update:rotation': (_rotation: PayloadOf<ImageCropperProps, 'onRotationChange'>['rotation']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ImageCropperRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: ImageCropperProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onValueChangeEnd: ImageCropperProps['onValueChangeEnd'] = (details) => {\n      emit('value-change-end', details)\n    }\n    const onZoomChange: ImageCropperProps['onZoomChange'] = (details) => {\n      emit('zoom-change', details)\n      emit('update:zoom', details.zoom)\n    }\n    const onRotationChange: ImageCropperProps['onRotationChange'] = (details) => {\n      emit('rotation-change', details)\n      emit('update:rotation', details.rotation)\n    }\n    const ctx = useImageCropper(\n      withXhConfig('image-cropper', useFormControlProps(props)) as ImageCropperProps,\n      { onValueChange, onValueChangeEnd, onZoomChange, onRotationChange },\n    )\n    provideImageCropper(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      zoom: ctx.api.value.zoom,\n      rotation: ctx.api.value.rotation,\n      natural: ctx.api.value.natural,\n      dragging: ctx.api.value.dragging,\n      resizing: ctx.api.value.resizing,\n      disabled: ctx.api.value.disabled,\n      readOnly: ctx.api.value.readOnly,\n      getCropRect: ctx.api.value.getCropRect,\n      setValue: ctx.api.value.setValue,\n      setZoom: ctx.api.value.setZoom,\n      setRotation: ctx.api.value.setRotation,\n    }))\n  },\n})\n\nexport const XhImageCropperViewport = defineComponent({\n  name: 'XhImageCropperViewport',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\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 XhImageCropperImage = defineComponent({\n  name: 'XhImageCropperImage',\n  setup() {\n    const ctx = useImageCropperContext()\n    // 用原生 img：自然尺寸与 load 事件都归它。src 与 alt 由根上的同名 prop 写进来\n    return () => h('img', ctx.api.value.getImageProps() as Record<string, unknown>)\n  },\n})\n\nexport const XhImageCropperCropArea = defineComponent({\n  name: 'XhImageCropperCropArea',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\n    return () => h('div', ctx.api.value.getCropAreaProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhImageCropperCropHandle = defineComponent({\n  name: 'XhImageCropperCropHandle',\n  props: {\n    /** 该把手拖动的方位，必填。 */\n    position: { type: String as PropType<ImageCropperHandlePosition>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useImageCropperContext()\n    // 用原生 button：它天然可聚焦、天然在 Tab 序列里\n    return () => h(\n      'button',\n      ctx.api.value.getCropHandleProps({ position: props.position }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhImageCropperGrid = defineComponent({\n  name: 'XhImageCropperGrid',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\n    return () => h('div', ctx.api.value.getGridProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhImageCropperZoomSlider = defineComponent({\n  name: 'XhImageCropperZoomSlider',\n  setup() {\n    const ctx = useImageCropperContext()\n    // 用原生 range：拇指拖动、方向键步进与读屏播报都归它\n    return () => h('input', ctx.api.value.getZoomSliderProps() as Record<string, unknown>)\n  },\n})\n\nexport const XhImageCropperRotateSlider = defineComponent({\n  name: 'XhImageCropperRotateSlider',\n  setup() {\n    const ctx = useImageCropperContext()\n    return () => h('input', ctx.api.value.getRotateSliderProps() as Record<string, unknown>)\n  },\n})\n\nexport const XhImageCropperHiddenInput = defineComponent({\n  name: 'XhImageCropperHiddenInput',\n  setup() {\n    const ctx = useImageCropperContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/image-cropper.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// 提供 image cropper 相关实现。\n\nimport type {\n  ImageCropperApi,\n  ImageCropperFlip,\n  ImageCropperFlipAxis,\n  ImageCropperHandlePosition,\n  ImageCropperRect,\n  ImageCropperSchema,\n  ImageCropperShape,\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 { useFormControlProps } from '../form/use-form-control'\nimport { provideImageCropper, useImageCropperContext } from './context'\nimport { useImageCropper } from './use-image-cropper'\n\ntype ImageCropperProps = ImageCropperSchema['props']\n\n/** 默认插槽的载荷：裁切矩形与图片自然尺寸、缩放、旋转与翻转、两种拖动标记，以及修改值、修改呈现与出图。 */\nexport type ImageCropperRootSlotProps = Pick<\n  ImageCropperApi,\n  'value' | 'zoom' | 'rotation' | 'flip' | 'natural' | 'dragging' | 'resizing' | 'disabled' | 'readOnly'\n  | 'getCropRect' | 'toCanvas' | 'setValue' | 'setZoom' | 'setRotation' | 'setFlip' | 'toggleFlip'\n>\n\nexport const XhImageCropperRoot = defineComponent({\n  name: 'XhImageCropperRoot',\n  // 缺省值由 connect 与机器决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    src: { type: String },\n    alt: { type: String },\n    aspectRatio: { type: Number as PropType<number | null> },\n    value: { type: Object as PropType<ImageCropperRect> },\n    defaultValue: { type: Object as PropType<ImageCropperRect> },\n    minWidth: { type: Number },\n    minHeight: { type: Number },\n    zoom: { type: Number },\n    defaultZoom: { type: Number },\n    minZoom: { type: Number },\n    maxZoom: { type: Number },\n    zoomStep: { type: Number },\n    rotation: { type: Number },\n    defaultRotation: { type: Number },\n    minRotation: { type: Number },\n    maxRotation: { type: Number },\n    rotationStep: { type: Number },\n    flip: { type: Object as PropType<ImageCropperFlip> },\n    defaultFlip: { type: Object as PropType<ImageCropperFlip> },\n    shape: { type: String as PropType<ImageCropperShape> },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    name: { type: String },\n    translations: {\n      type: Object as PropType<ImageCropperProps['translations']>,\n    },\n  },\n  // value-change 携带 { value }，update:value 携带裸矩形；\n  // value-change-end 在一次指针拖动松手时发一次，一次方向键微调也发一次\n  emits: {\n    'value-change': (_details: PayloadOf<ImageCropperProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<ImageCropperProps, 'onValueChange'>['value']) => true,\n    'value-change-end': (_details: PayloadOf<ImageCropperProps, 'onValueChangeEnd'>) => true,\n    'zoom-change': (_details: PayloadOf<ImageCropperProps, 'onZoomChange'>) => true,\n    'update:zoom': (_zoom: PayloadOf<ImageCropperProps, 'onZoomChange'>['zoom']) => true,\n    'rotation-change': (_details: PayloadOf<ImageCropperProps, 'onRotationChange'>) => true,\n    'update:rotation': (_rotation: PayloadOf<ImageCropperProps, 'onRotationChange'>['rotation']) => true,\n    'flip-change': (_details: PayloadOf<ImageCropperProps, 'onFlipChange'>) => true,\n    'update:flip': (_flip: PayloadOf<ImageCropperProps, 'onFlipChange'>['flip']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ImageCropperRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const onValueChange: ImageCropperProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const onValueChangeEnd: ImageCropperProps['onValueChangeEnd'] = (details) => {\n      emit('value-change-end', details)\n    }\n    const onZoomChange: ImageCropperProps['onZoomChange'] = (details) => {\n      emit('zoom-change', details)\n      emit('update:zoom', details.zoom)\n    }\n    const onRotationChange: ImageCropperProps['onRotationChange'] = (details) => {\n      emit('rotation-change', details)\n      emit('update:rotation', details.rotation)\n    }\n    const onFlipChange: ImageCropperProps['onFlipChange'] = (details) => {\n      emit('flip-change', details)\n      emit('update:flip', details.flip)\n    }\n    const ctx = useImageCropper(\n      withXhConfig('image-cropper', useFormControlProps(props)) as ImageCropperProps,\n      { onValueChange, onValueChangeEnd, onZoomChange, onRotationChange, onFlipChange },\n    )\n    provideImageCropper(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      zoom: ctx.api.value.zoom,\n      rotation: ctx.api.value.rotation,\n      flip: ctx.api.value.flip,\n      natural: ctx.api.value.natural,\n      dragging: ctx.api.value.dragging,\n      resizing: ctx.api.value.resizing,\n      disabled: ctx.api.value.disabled,\n      readOnly: ctx.api.value.readOnly,\n      getCropRect: ctx.api.value.getCropRect,\n      toCanvas: ctx.api.value.toCanvas,\n      setValue: ctx.api.value.setValue,\n      setZoom: ctx.api.value.setZoom,\n      setRotation: ctx.api.value.setRotation,\n      setFlip: ctx.api.value.setFlip,\n      toggleFlip: ctx.api.value.toggleFlip,\n    }))\n  },\n})\n\nexport const XhImageCropperViewport = defineComponent({\n  name: 'XhImageCropperViewport',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\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 XhImageCropperImage = defineComponent({\n  name: 'XhImageCropperImage',\n  setup() {\n    const ctx = useImageCropperContext()\n    // 用原生 img：自然尺寸与 load 事件都归它，出图也从它取像素。src 与 alt 由根上的同名 prop 写进来\n    return () => h('img', {\n      ...ctx.api.value.getImageProps() as Record<string, unknown>,\n      ref: ctx.imageRef,\n    })\n  },\n})\n\nexport const XhImageCropperCropArea = defineComponent({\n  name: 'XhImageCropperCropArea',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\n    return () => h('div', ctx.api.value.getCropAreaProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhImageCropperCropHandle = defineComponent({\n  name: 'XhImageCropperCropHandle',\n  props: {\n    /** 该把手拖动的方位，必填。 */\n    position: { type: String as PropType<ImageCropperHandlePosition>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useImageCropperContext()\n    // 用原生 button：它天然可聚焦、天然在 Tab 序列里\n    return () => h(\n      'button',\n      ctx.api.value.getCropHandleProps({ position: props.position }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhImageCropperGrid = defineComponent({\n  name: 'XhImageCropperGrid',\n  setup(_, { slots }) {\n    const ctx = useImageCropperContext()\n    return () => h('div', ctx.api.value.getGridProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhImageCropperZoomSlider = defineComponent({\n  name: 'XhImageCropperZoomSlider',\n  setup() {\n    const ctx = useImageCropperContext()\n    // 用原生 range：拇指拖动、方向键步进与读屏播报都归它\n    return () => h('input', ctx.api.value.getZoomSliderProps() as Record<string, unknown>)\n  },\n})\n\nexport const XhImageCropperRotateSlider = defineComponent({\n  name: 'XhImageCropperRotateSlider',\n  setup() {\n    const ctx = useImageCropperContext()\n    return () => h('input', ctx.api.value.getRotateSliderProps() as Record<string, unknown>)\n  },\n})\n\nexport const XhImageCropperFlipTrigger = defineComponent({\n  name: 'XhImageCropperFlipTrigger',\n  props: {\n    /** 这颗按钮翻哪条轴，必填。 */\n    axis: { type: String as PropType<ImageCropperFlipAxis>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useImageCropperContext()\n    return () => h(\n      'button',\n      ctx.api.value.getFlipTriggerProps({ axis: props.axis }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhImageCropperHiddenInput = defineComponent({\n  name: 'XhImageCropperHiddenInput',\n  setup() {\n    const ctx = useImageCropperContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n  },\n})\n"],"mappings":"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"}

package/dist/components/image-cropper/use-image-cropper.d.ts

@@ -7,8 +7,10 @@ interface ImageCropperContext {
   service: Service<ImageCropperSchema>;
   /** 视口节点，状态机在指针事件中读取它的矩形。 */
   viewportRef: Ref<HTMLElement | null>;
+  /** 源图节点，出图时从它取像素。 */
+  imageRef: Ref<HTMLImageElement | null>;
 }
-type Handlers = Pick<ImageCropperSchema['props'], 'onValueChange' | 'onValueChangeEnd' | 'onZoomChange' | 'onRotationChange'>;
+type Handlers = Pick<ImageCropperSchema['props'], 'onValueChange' | 'onValueChangeEnd' | 'onZoomChange' | 'onRotationChange' | 'onFlipChange'>;
 declare function useImageCropper(props: ImageCropperSchema['props'], handlers?: Handlers): ImageCropperContext;
 //#endregion
 export { ImageCropperContext, useImageCropper };

package/dist/components/image-cropper/use-image-cropper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-image-cropper.d.ts","names":[],"sources":["../../../src/components/image-cropper/use-image-cropper.ts"],"mappings":";;;;UAeiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,aAAa,IAAI;;KAGd,WAAW,KAAK;iBAGL,gBACd,OAAO,6BACP,WAAU,WACT"}
+{"version":3,"file":"use-image-cropper.d.ts","names":[],"sources":["../../../src/components/image-cropper/use-image-cropper.ts"],"mappings":";;;;UAeiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,aAAa,IAAI;;EAEjB,UAAU,IAAI;;KAGX,WAAW,KAAK;iBAGL,gBACd,OAAO,6BACP,WAAU,WACT"}

package/dist/components/image-cropper/use-image-cropper.js

@@ -5,15 +5,18 @@ import { connectImageCropper, imageCropperMachine } from "@xihan-ui/headless";
 //#region src/components/image-cropper/use-image-cropper.ts
 function useImageCropper(props, handlers = {}) {
 	const viewportRef = ref(null);
+	const imageRef = ref(null);
 	const service = useMachine(imageCropperMachine, () => ({
 		...props,
 		...handlers
 	}));
 	service.refs.set("getViewportEl", () => viewportRef.value);
+	service.refs.set("getImageEl", () => imageRef.value);
 	return {
 		api: computed(() => connectImageCropper(service, vueNormalize)),
 		service,
-		viewportRef
+		viewportRef,
+		imageRef
 	};
 }
 //#endregion

package/dist/components/image-cropper/use-image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/use-image-cropper.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 image cropper 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ImageCropperApi, ImageCropperSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectImageCropper, imageCropperMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface ImageCropperContext {\n  api: ComputedRef<ImageCropperApi>\n  service: Service<ImageCropperSchema>\n  /** 视口节点，状态机在指针事件中读取它的矩形。 */\n  viewportRef: Ref<HTMLElement | null>\n}\n\ntype Handlers = Pick<ImageCropperSchema['props'], 'onValueChange' | 'onValueChangeEnd' | 'onZoomChange' | 'onRotationChange'>\n\n// 不建 scope：connect 不派生任何 id\nexport function useImageCropper(\n  props: ImageCropperSchema['props'],\n  handlers: Handlers = {},\n): ImageCropperContext {\n  const viewportRef = ref<HTMLElement | null>(null)\n  const service = useMachine(imageCropperMachine, () => ({ ...props, ...handlers }))\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getViewportEl', () => viewportRef.value)\n\n  const api = computed(() => connectImageCropper(service, vueNormalize))\n  return { api, service, viewportRef }\n}\n"],"mappings":";;;;;AAyBA,SAAgB,gBACd,OACA,WAAqB,CAAC,GACD;CACrB,MAAM,cAAc,IAAwB,IAAI;CAChD,MAAM,UAAU,WAAW,4BAA4B;EAAE,GAAG;EAAO,GAAG;CAAS,EAAE;CAGjF,QAAQ,KAAK,IAAI,uBAAuB,YAAY,KAAK;CAGzD,OAAO;EAAE,KADG,eAAe,oBAAoB,SAAS,YAAY,CACzD;EAAG;EAAS;CAAY;AACrC"}
+{"version":3,"file":"use-image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/use-image-cropper.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 image cropper 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ImageCropperApi, ImageCropperSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectImageCropper, imageCropperMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface ImageCropperContext {\n  api: ComputedRef<ImageCropperApi>\n  service: Service<ImageCropperSchema>\n  /** 视口节点，状态机在指针事件中读取它的矩形。 */\n  viewportRef: Ref<HTMLElement | null>\n  /** 源图节点，出图时从它取像素。 */\n  imageRef: Ref<HTMLImageElement | null>\n}\n\ntype Handlers = Pick<ImageCropperSchema['props'], 'onValueChange' | 'onValueChangeEnd' | 'onZoomChange' | 'onRotationChange' | 'onFlipChange'>\n\n// 不建 scope：connect 不派生任何 id\nexport function useImageCropper(\n  props: ImageCropperSchema['props'],\n  handlers: Handlers = {},\n): ImageCropperContext {\n  const viewportRef = ref<HTMLElement | null>(null)\n  const imageRef = ref<HTMLImageElement | null>(null)\n  const service = useMachine(imageCropperMachine, () => ({ ...props, ...handlers }))\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getViewportEl', () => viewportRef.value)\n  service.refs.set('getImageEl', () => imageRef.value)\n\n  const api = computed(() => connectImageCropper(service, vueNormalize))\n  return { api, service, viewportRef, imageRef }\n}\n"],"mappings":";;;;;AA2BA,SAAgB,gBACd,OACA,WAAqB,CAAC,GACD;CACrB,MAAM,cAAc,IAAwB,IAAI;CAChD,MAAM,WAAW,IAA6B,IAAI;CAClD,MAAM,UAAU,WAAW,4BAA4B;EAAE,GAAG;EAAO,GAAG;CAAS,EAAE;CAGjF,QAAQ,KAAK,IAAI,uBAAuB,YAAY,KAAK;CACzD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CAGnD,OAAO;EAAE,KADG,eAAe,oBAAoB,SAAS,YAAY,CACzD;EAAG;EAAS;EAAa;CAAS;AAC/C"}

package/dist/components/image-viewer/image-viewer.js

@@ -1,7 +1,7 @@
 import { withXhConfig } from "../../config/config.js";
-import { XhPortal } from "../../runtime/portal.js";
 import { mergePartProps } from "../../runtime/merge-props.js";
 import { mergeIntoChild } from "../../runtime/as-child.js";
+import { XhPortal } from "../../runtime/portal.js";
 import { provideImageViewer, useImageViewerContext } from "./context.js";
 import { useImageViewer } from "./use-image-viewer.js";
 import { defineComponent, h, mergeProps } from "vue";

package/dist/components/image-viewer/use-image-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-image-viewer.d.ts","names":[],"sources":["../../../src/components/image-viewer/use-image-viewer.ts"],"mappings":";;;;UAoBiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;EAEjB,cAAc,qBAAqB;EACnC,UAAU;EACV,YAAY,IAAI;EAChB,aAAa,IAAI;;iBAGH,eACd,OAAO,4BACP,WAAU,KAAK,gEACd"}
+{"version":3,"file":"use-image-viewer.d.ts","names":[],"sources":["../../../src/components/image-viewer/use-image-viewer.ts"],"mappings":";;;;UAmBiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;EAEjB,cAAc,qBAAqB;EACnC,UAAU;EACV,YAAY,IAAI;EAChB,aAAa,IAAI;;iBAGH,eACd,OAAO,4BACP,WAAU,KAAK,gEACd"}

package/dist/components/image-viewer/use-image-viewer.js

@@ -1,9 +1,9 @@
+import { useOverlayExit } from "../../runtime/use-overlay-exit.js";
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useXhConfig } from "../../config/config.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { attachCssExit, createPresence } from "@xihan-ui/core/presence";
+import { computed, ref } from "vue";
 import { createRuntimeConfig, createScope } from "@xihan-ui/core";
 import { connectImageViewer, imageViewerMachine } from "@xihan-ui/headless";
 //#region src/components/image-viewer/use-image-viewer.ts
@@ -16,7 +16,6 @@ function useImageViewer(props, handlers = {}) {
 		...props,
 		...handlers
 	}), scope);
-	const rendered = ref(service.state.get() === "open");
 	const xhConfig = useXhConfig();
 	let config = null;
 	if (typeof document !== "undefined") {
@@ -32,34 +31,17 @@ function useImageViewer(props, handlers = {}) {
 			isModal: () => true,
 			surfaces: () => [backdropRef.value].filter(Boolean)
 		});
-		const presence = createPresence({
-			config,
-			open: service.state.get() === "open",
-			onRenderedChange: (r) => {
-				rendered.value = r;
-			}
-		});
-		rendered.value = presence.rendered;
 		service.refs.set("config", config);
 		service.refs.set("registerLayer", registerLayer);
-		service.refs.set("presence", presence);
 		service.refs.set("getContentEl", () => contentRef.value);
-		watch(() => service.state.get() === "open", (open) => presence.update(open), { flush: "post" });
-		const tracked = /* @__PURE__ */ new Map();
-		watch([contentRef, backdropRef], (nodes) => {
-			const next = new Set(nodes.filter((node) => node !== null));
-			for (const node of next) if (!tracked.has(node)) tracked.set(node, attachCssExit(node, presence));
-			for (const [node, detach] of tracked) if (!next.has(node)) {
-				tracked.delete(node);
-				detach();
-			}
-		}, { flush: "post" });
-		onBeforeUnmount(() => {
-			presence.dispose();
-			for (const detach of tracked.values()) detach();
-			tracked.clear();
-		});
 	}
+	const rendered = useOverlayExit({
+		config,
+		isOpen: () => service.state.get() === "open",
+		contentRef,
+		additionalExitRefs: [backdropRef],
+		onPresence: (presence) => service.refs.set("presence", presence)
+	});
 	return {
 		service,
 		api: computed(() => connectImageViewer(service, vueNormalize)),