@xihan-ui/vue 1.1.0 → 2.0.0

package/dist/components/floating-panel/floating-panel.d.ts

@@ -1,10 +1,10 @@
 import { PayloadOf } from "../../runtime/payload.js";
 import { PropType, SlotsType, VNode } from "vue";
-import { FloatingPanelApi, FloatingPanelPosition, FloatingPanelResizeEdge, FloatingPanelSchema, FloatingPanelSize, FloatingPanelStage } from "@xihan-ui/headless";
+import { FloatingPanelApi, FloatingPanelPosition, FloatingPanelResizeEdge, FloatingPanelSchema, FloatingPanelSize, FloatingPanelWindowState } from "@xihan-ui/headless";
 //#region src/components/floating-panel/floating-panel.d.ts
 type FloatingPanelProps = FloatingPanelSchema['props'];
-/** 默认插槽的载荷：开合、形态与矩形，以及改这四样的动作。 */
-type FloatingPanelRootSlotProps = Pick<FloatingPanelApi, 'open' | 'stage' | 'position' | 'size' | 'dragging' | 'resizing' | 'canDrag' | 'canResize' | 'setOpen' | 'setPosition' | 'setSize' | 'setStage'>;
+/** 默认插槽的载荷：开合、形态与矩形，以及修改这四项的动作。 */
+type FloatingPanelRootSlotProps = Pick<FloatingPanelApi, 'open' | 'windowState' | 'position' | 'dimensions' | 'dragging' | 'resizing' | 'canDrag' | 'canResize' | 'setOpen' | 'setPosition' | 'setDimensions' | 'setWindowState'>;
 declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   open: {
     type: BooleanConstructor;
@@ -16,35 +16,27 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
   };
   position: {
     type: PropType<FloatingPanelPosition>;
-    default: undefined;
   };
   defaultPosition: {
     type: PropType<FloatingPanelPosition>;
-    default: undefined;
   };
-  size: {
+  dimensions: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
-  defaultSize: {
+  defaultDimensions: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
   minSize: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
   maxSize: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
-  stage: {
-    type: PropType<FloatingPanelStage>;
-    default: undefined;
+  windowState: {
+    type: PropType<FloatingPanelWindowState>;
   };
-  defaultStage: {
-    type: PropType<FloatingPanelStage>;
-    default: undefined;
+  defaultWindowState: {
+    type: PropType<FloatingPanelWindowState>;
   };
   draggable: {
     type: BooleanConstructor;
@@ -60,7 +52,6 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
   };
   translations: {
     type: PropType<FloatingPanelProps["translations"]>;
-    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -69,10 +60,10 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
   'update:open': (_open: PayloadOf<FloatingPanelProps, "onOpenChange">["open"]) => true;
   'position-change': (_details: PayloadOf<FloatingPanelProps, "onPositionChange">) => true;
   'update:position': (_position: PayloadOf<FloatingPanelProps, "onPositionChange">["position"]) => true;
-  'size-change': (_details: PayloadOf<FloatingPanelProps, "onSizeChange">) => true;
-  'update:size': (_size: PayloadOf<FloatingPanelProps, "onSizeChange">["size"]) => true;
-  'stage-change': (_details: PayloadOf<FloatingPanelProps, "onStageChange">) => true;
-  'update:stage': (_stage: PayloadOf<FloatingPanelProps, "onStageChange">["stage"]) => true;
+  'dimensions-change': (_details: PayloadOf<FloatingPanelProps, "onDimensionsChange">) => true;
+  'update:dimensions': (_dimensions: PayloadOf<FloatingPanelProps, "onDimensionsChange">["dimensions"]) => true;
+  'window-state-change': (_details: PayloadOf<FloatingPanelProps, "onWindowStateChange">) => true;
+  'update:windowState': (_windowState: PayloadOf<FloatingPanelProps, "onWindowStateChange">["windowState"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   open: {
     type: BooleanConstructor;
@@ -84,35 +75,27 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
   };
   position: {
     type: PropType<FloatingPanelPosition>;
-    default: undefined;
   };
   defaultPosition: {
     type: PropType<FloatingPanelPosition>;
-    default: undefined;
   };
-  size: {
+  dimensions: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
-  defaultSize: {
+  defaultDimensions: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
   minSize: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
   maxSize: {
     type: PropType<FloatingPanelSize>;
-    default: undefined;
   };
-  stage: {
-    type: PropType<FloatingPanelStage>;
-    default: undefined;
+  windowState: {
+    type: PropType<FloatingPanelWindowState>;
   };
-  defaultStage: {
-    type: PropType<FloatingPanelStage>;
-    default: undefined;
+  defaultWindowState: {
+    type: PropType<FloatingPanelWindowState>;
   };
   draggable: {
     type: BooleanConstructor;
@@ -128,31 +111,21 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
   };
   translations: {
     type: PropType<FloatingPanelProps["translations"]>;
-    default: undefined;
   };
 }>> & Readonly<{
   "onOpen-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelOpenChangeDetails) => any) | undefined;
   "onUpdate:open"?: ((_open: boolean) => any) | undefined;
   "onPosition-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelPositionChangeDetails) => any) | undefined;
   "onUpdate:position"?: ((_position: FloatingPanelPosition) => any) | undefined;
-  "onSize-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelSizeChangeDetails) => any) | undefined;
-  "onUpdate:size"?: ((_size: FloatingPanelSize) => any) | undefined;
-  "onStage-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelStageChangeDetails) => any) | undefined;
-  "onUpdate:stage"?: ((_stage: FloatingPanelStage) => any) | undefined;
+  "onDimensions-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelDimensionsChangeDetails) => any) | undefined;
+  "onUpdate:dimensions"?: ((_dimensions: FloatingPanelSize) => any) | undefined;
+  "onWindow-state-change"?: ((_details: import("@xihan-ui/headless").FloatingPanelWindowStateChangeDetails) => any) | undefined;
+  "onUpdate:windowState"?: ((_windowState: FloatingPanelWindowState) => any) | undefined;
 }>, {
-  size: FloatingPanelSize;
   disabled: boolean;
   open: boolean;
   defaultOpen: boolean;
-  translations: Partial<import("@xihan-ui/headless").FloatingPanelTranslations> | undefined;
   resizable: boolean;
-  position: FloatingPanelPosition;
-  stage: FloatingPanelStage;
-  defaultPosition: FloatingPanelPosition;
-  defaultSize: FloatingPanelSize;
-  minSize: FloatingPanelSize;
-  maxSize: FloatingPanelSize;
-  defaultStage: FloatingPanelStage;
   draggable: boolean;
 }, SlotsType<{
   default?: (props: FloatingPanelRootSlotProps) => VNode[];
@@ -160,9 +133,19 @@ declare const XhFloatingPanelRoot: import("vue").DefineComponent<import("vue").E
 declare const XhFloatingPanelTrigger: 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 XhFloatingPanelPositioner: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const XhFloatingPanelPositioner: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
+  };
+}>, () => 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>;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 本实例的 Portal 容器；优先于应用级配置。 */
+  container: {
+    type: PropType<Element>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFloatingPanelContent: 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>;
@@ -176,7 +159,7 @@ declare const XhFloatingPanelDragTrigger: import("vue").DefineComponent<{}, () =
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhFloatingPanelResizeTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 这个把手守哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
+  /** 该把手负责哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
   edge: {
     type: PropType<FloatingPanelResizeEdge>;
     required: true;
@@ -184,24 +167,24 @@ declare const XhFloatingPanelResizeTrigger: import("vue").DefineComponent<import
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-  /** 这个把手守哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
+  /** 该把手负责哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
   edge: {
     type: PropType<FloatingPanelResizeEdge>;
     required: true;
   };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const XhFloatingPanelStageTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-  /** 按下它切到哪个形态；已经在该形态时再按一次回到常规。 */
-  stage: {
-    type: PropType<FloatingPanelStage>;
+declare const XhFloatingPanelWindowStateTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 按下它切换到哪个形态；已处于该形态时再按一次回到常规。 */
+  windowState: {
+    type: PropType<FloatingPanelWindowState>;
     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<{
-  /** 按下它切到哪个形态；已经在该形态时再按一次回到常规。 */
-  stage: {
-    type: PropType<FloatingPanelStage>;
+  /** 按下它切换到哪个形态；已处于该形态时再按一次回到常规。 */
+  windowState: {
+    type: PropType<FloatingPanelWindowState>;
     required: true;
   };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -212,5 +195,5 @@ declare const XhFloatingPanelBody: import("vue").DefineComponent<{}, () => VNode
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { FloatingPanelRootSlotProps, XhFloatingPanelBody, XhFloatingPanelCloseTrigger, XhFloatingPanelContent, XhFloatingPanelDragTrigger, XhFloatingPanelHeader, XhFloatingPanelPositioner, XhFloatingPanelResizeTrigger, XhFloatingPanelRoot, XhFloatingPanelStageTrigger, XhFloatingPanelTitle, XhFloatingPanelTrigger };
+export { FloatingPanelRootSlotProps, XhFloatingPanelBody, XhFloatingPanelCloseTrigger, XhFloatingPanelContent, XhFloatingPanelDragTrigger, XhFloatingPanelHeader, XhFloatingPanelPositioner, XhFloatingPanelResizeTrigger, XhFloatingPanelRoot, XhFloatingPanelTitle, XhFloatingPanelTrigger, XhFloatingPanelWindowStateTrigger };
 //# sourceMappingURL=floating-panel.d.ts.map

package/dist/components/floating-panel/floating-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-panel.d.ts","names":[],"sources":["../../../src/components/floating-panel/floating-panel.ts"],"mappings":";;;;KAeK,qBAAqB;;KAGd,6BAA6B,KACvC;cAKW,mCAAmB,8BAAA;;;;;;;;;;IAMA,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACpB,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACb,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACX,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;IAKT,MAAA,SAAS;;;;;;EAIf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;EACf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACN,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;;;;;;;;;IAvBP,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACpB,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;IACb,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACX,MAAA,SAAS;;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;;IAKT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc/B,WAAC,OAAO,+BAA+B;kCAqCnD;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAepC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAWjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,4CAA4B,8BAAA;;;IAIb,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAWnC,oDAAA;cAEW,2CAA2B,8BAAA;;;IAIX,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAUpC,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAMtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"floating-panel.d.ts","names":[],"sources":["../../../src/components/floating-panel/floating-panel.ts"],"mappings":";;;;KAuBK,qBAAqB;;KAGd,6BAA6B,KACvC;cAKW,mCAAmB,8BAAA;;;;;;;;;;IAMA,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACnB,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;IAKf,MAAA,SAAS;;;;;EAIf,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;EACH,oBAAA,UAAA,UAAU;EACT,oBAAA,WAAA,UAAU;EACT,sBAAA,UAAA,UAAU;EACP,sBAAA,aAAA,UAAU;EACX,wBAAA,UAAA,UAAU;EACP,uBAAA,cAAA,UAAU;;;;;;;;;;;IAvBnB,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACd,MAAA,SAAS;;;IACF,MAAA,SAAS;;;IACnB,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACL,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;;;;;;;;IAKf,MAAA,SAAS;;;;;;;;;;;;;;;;;;EAc/B,WAAC,OAAO,+BAA+B;kCAqCnD;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,yCAAyB,8BAAA;;;IAIL,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAwBxC,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAWjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAMrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,4CAA4B,8BAAA;;;IAIb,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAWnC,oDAAA;cAEW,iDAAiC,8BAAA;;;IAIX,MAAA,SAAS;;;;;;;;IAAT,MAAA,SAAS;;;MAU1C,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAMtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/floating-panel/floating-panel.js

@@ -1,7 +1,8 @@
 import { withXhConfig } from "../../config/config.js";
+import { XhPortal } from "../../runtime/portal.js";
 import { provideFloatingPanel, useFloatingPanelContext } from "./context.js";
 import { useFloatingPanel } from "./use-floating-panel.js";
-import { Teleport, defineComponent, h, mergeProps } from "vue";
+import { defineComponent, h, mergeProps } from "vue";
 //#region src/components/floating-panel/floating-panel.ts
 const XhFloatingPanelRoot = defineComponent({
 	name: "XhFloatingPanelRoot",
@@ -14,38 +15,14 @@ const XhFloatingPanelRoot = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
-		position: {
-			type: Object,
-			default: void 0
-		},
-		defaultPosition: {
-			type: Object,
-			default: void 0
-		},
-		size: {
-			type: Object,
-			default: void 0
-		},
-		defaultSize: {
-			type: Object,
-			default: void 0
-		},
-		minSize: {
-			type: Object,
-			default: void 0
-		},
-		maxSize: {
-			type: Object,
-			default: void 0
-		},
-		stage: {
-			type: String,
-			default: void 0
-		},
-		defaultStage: {
-			type: String,
-			default: void 0
-		},
+		position: { type: Object },
+		defaultPosition: { type: Object },
+		dimensions: { type: Object },
+		defaultDimensions: { type: Object },
+		minSize: { type: Object },
+		maxSize: { type: Object },
+		windowState: { type: String },
+		defaultWindowState: { type: String },
 		draggable: {
 			type: Boolean,
 			default: void 0
@@ -58,20 +35,17 @@ const XhFloatingPanelRoot = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
-		translations: {
-			type: Object,
-			default: void 0
-		}
+		translations: { type: Object }
 	},
 	emits: {
 		"open-change": (_details) => true,
 		"update:open": (_open) => true,
 		"position-change": (_details) => true,
 		"update:position": (_position) => true,
-		"size-change": (_details) => true,
-		"update:size": (_size) => true,
-		"stage-change": (_details) => true,
-		"update:stage": (_stage) => true
+		"dimensions-change": (_details) => true,
+		"update:dimensions": (_dimensions) => true,
+		"window-state-change": (_details) => true,
+		"update:windowState": (_windowState) => true
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
@@ -84,29 +58,29 @@ const XhFloatingPanelRoot = defineComponent({
 				emit("position-change", details);
 				emit("update:position", details.position);
 			},
-			onSizeChange: (details) => {
-				emit("size-change", details);
-				emit("update:size", details.size);
+			onDimensionsChange: (details) => {
+				emit("dimensions-change", details);
+				emit("update:dimensions", details.dimensions);
 			},
-			onStageChange: (details) => {
-				emit("stage-change", details);
-				emit("update:stage", details.stage);
+			onWindowStateChange: (details) => {
+				emit("window-state-change", details);
+				emit("update:windowState", details.windowState);
 			}
 		});
 		provideFloatingPanel(ctx);
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			open: ctx.api.value.open,
-			stage: ctx.api.value.stage,
+			windowState: ctx.api.value.windowState,
 			position: ctx.api.value.position,
-			size: ctx.api.value.size,
+			dimensions: ctx.api.value.dimensions,
 			dragging: ctx.api.value.dragging,
 			resizing: ctx.api.value.resizing,
 			canDrag: ctx.api.value.canDrag,
 			canResize: ctx.api.value.canResize,
 			setOpen: ctx.api.value.setOpen,
 			setPosition: ctx.api.value.setPosition,
-			setSize: ctx.api.value.setSize,
-			setStage: ctx.api.value.setStage
+			setDimensions: ctx.api.value.setDimensions,
+			setWindowState: ctx.api.value.setWindowState
 		}));
 	}
 });
@@ -119,10 +93,18 @@ const XhFloatingPanelTrigger = defineComponent({
 });
 const XhFloatingPanelPositioner = defineComponent({
 	name: "XhFloatingPanelPositioner",
+	props: { 
+	/** 本实例的 Portal 容器；优先于应用级配置。 */
+container: { type: Object } },
 	inheritAttrs: false,
-	setup(_, { slots, attrs }) {
+	setup(props, { slots, attrs }) {
 		const ctx = useFloatingPanelContext();
-		return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", mergeProps(ctx.api.value.getPositionerProps(), attrs), slots.default?.())]);
+		return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [h("div", {
+			...mergeProps(ctx.api.value.getPositionerProps(), attrs, ctx.visible.value ? {} : { style: { display: "none" } }),
+			ref: (el) => {
+				ctx.positionerRef.value = el;
+			}
+		}, slots.default?.())]);
 	}
 });
 const XhFloatingPanelContent = defineComponent({
@@ -159,7 +141,7 @@ const XhFloatingPanelDragTrigger = defineComponent({
 const XhFloatingPanelResizeTrigger = defineComponent({
 	name: "XhFloatingPanelResizeTrigger",
 	props: { 
-	/** 这个把手守哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
+	/** 该把手负责哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */
 edge: {
 		type: String,
 		required: true
@@ -169,17 +151,17 @@ edge: {
 		return () => h("div", ctx.api.value.getResizeTriggerProps({ edge: props.edge }), slots.default?.());
 	}
 });
-const XhFloatingPanelStageTrigger = defineComponent({
-	name: "XhFloatingPanelStageTrigger",
+const XhFloatingPanelWindowStateTrigger = defineComponent({
+	name: "XhFloatingPanelWindowStateTrigger",
 	props: { 
-	/** 按下它切到哪个形态；已经在该形态时再按一次回到常规。 */
-stage: {
+	/** 按下它切换到哪个形态；已处于该形态时再按一次回到常规。 */
+windowState: {
 		type: String,
 		required: true
 	} },
 	setup(props, { slots }) {
 		const ctx = useFloatingPanelContext();
-		return () => h("button", ctx.api.value.getStageTriggerProps({ stage: props.stage }), slots.default?.());
+		return () => h("button", ctx.api.value.getWindowStateTriggerProps({ windowState: props.windowState }), slots.default?.());
 	}
 });
 const XhFloatingPanelCloseTrigger = defineComponent({
@@ -197,6 +179,6 @@ const XhFloatingPanelBody = defineComponent({
 	}
 });
 //#endregion
-export { XhFloatingPanelBody, XhFloatingPanelCloseTrigger, XhFloatingPanelContent, XhFloatingPanelDragTrigger, XhFloatingPanelHeader, XhFloatingPanelPositioner, XhFloatingPanelResizeTrigger, XhFloatingPanelRoot, XhFloatingPanelStageTrigger, XhFloatingPanelTitle, XhFloatingPanelTrigger };
+export { XhFloatingPanelBody, XhFloatingPanelCloseTrigger, XhFloatingPanelContent, XhFloatingPanelDragTrigger, XhFloatingPanelHeader, XhFloatingPanelPositioner, XhFloatingPanelResizeTrigger, XhFloatingPanelRoot, XhFloatingPanelTitle, XhFloatingPanelTrigger, XhFloatingPanelWindowStateTrigger };
 
 //# sourceMappingURL=floating-panel.js.map

package/dist/components/floating-panel/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-panel.js","names":[],"sources":["../../../src/components/floating-panel/floating-panel.ts"],"sourcesContent":["import type {\n  FloatingPanelApi,\n  FloatingPanelPosition,\n  FloatingPanelResizeEdge,\n  FloatingPanelSchema,\n  FloatingPanelSize,\n  FloatingPanelStage,\n} from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps, Teleport } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideFloatingPanel, useFloatingPanelContext } from './context'\nimport { useFloatingPanel } from './use-floating-panel'\n\ntype FloatingPanelProps = FloatingPanelSchema['props']\n\n/** 默认插槽的载荷：开合、形态与矩形，以及改这四样的动作。 */\nexport type FloatingPanelRootSlotProps = Pick<\n  FloatingPanelApi,\n  'open' | 'stage' | 'position' | 'size' | 'dragging' | 'resizing' | 'canDrag' | 'canResize'\n  | 'setOpen' | 'setPosition' | 'setSize' | 'setStage'\n>\n\nexport const XhFloatingPanelRoot = defineComponent({\n  name: 'XhFloatingPanelRoot',\n  // 全部 default: undefined，缺省值由 connect 与机器决定\n  props: {\n    open: { type: Boolean, default: undefined },\n    defaultOpen: { type: Boolean, default: undefined },\n    position: { type: Object as PropType<FloatingPanelPosition>, default: undefined },\n    defaultPosition: { type: Object as PropType<FloatingPanelPosition>, default: undefined },\n    size: { type: Object as PropType<FloatingPanelSize>, default: undefined },\n    defaultSize: { type: Object as PropType<FloatingPanelSize>, default: undefined },\n    minSize: { type: Object as PropType<FloatingPanelSize>, default: undefined },\n    maxSize: { type: Object as PropType<FloatingPanelSize>, default: undefined },\n    stage: { type: String as PropType<FloatingPanelStage>, default: undefined },\n    defaultStage: { type: String as PropType<FloatingPanelStage>, default: undefined },\n    // 缺省为真的两个开关：写成裸 Boolean 会被 Vue 的布尔 casting 永久关死\n    draggable: { type: Boolean, default: undefined },\n    resizable: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    translations: { type: Object as PropType<FloatingPanelProps['translations']>, default: undefined },\n  },\n  // 语义事件收整个 details，update: 收裸值\n  emits: {\n    'open-change': (_details: PayloadOf<FloatingPanelProps, 'onOpenChange'>) => true,\n    'update:open': (_open: PayloadOf<FloatingPanelProps, 'onOpenChange'>['open']) => true,\n    'position-change': (_details: PayloadOf<FloatingPanelProps, 'onPositionChange'>) => true,\n    'update:position': (_position: PayloadOf<FloatingPanelProps, 'onPositionChange'>['position']) => true,\n    'size-change': (_details: PayloadOf<FloatingPanelProps, 'onSizeChange'>) => true,\n    'update:size': (_size: PayloadOf<FloatingPanelProps, 'onSizeChange'>['size']) => true,\n    'stage-change': (_details: PayloadOf<FloatingPanelProps, 'onStageChange'>) => true,\n    'update:stage': (_stage: PayloadOf<FloatingPanelProps, 'onStageChange'>['stage']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FloatingPanelRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useFloatingPanel(withXhConfig('floating-panel', props) as FloatingPanelProps, {\n      onOpenChange: (details) => {\n        emit('open-change', details)\n        emit('update:open', details.open)\n      },\n      onPositionChange: (details) => {\n        emit('position-change', details)\n        emit('update:position', details.position)\n      },\n      onSizeChange: (details) => {\n        emit('size-change', details)\n        emit('update:size', details.size)\n      },\n      onStageChange: (details) => {\n        emit('stage-change', details)\n        emit('update:stage', details.stage)\n      },\n    })\n    provideFloatingPanel(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      open: ctx.api.value.open,\n      stage: ctx.api.value.stage,\n      position: ctx.api.value.position,\n      size: ctx.api.value.size,\n      dragging: ctx.api.value.dragging,\n      resizing: ctx.api.value.resizing,\n      canDrag: ctx.api.value.canDrag,\n      canResize: ctx.api.value.canResize,\n      setOpen: ctx.api.value.setOpen,\n      setPosition: ctx.api.value.setPosition,\n      setSize: ctx.api.value.setSize,\n      setStage: ctx.api.value.setStage,\n    }))\n  },\n})\n\nexport const XhFloatingPanelTrigger = defineComponent({\n  name: 'XhFloatingPanelTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 用原生 button，激活交给平台\n    return () => h('button', ctx.api.value.getTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelPositioner = defineComponent({\n  name: 'XhFloatingPanelPositioner',\n  // 根是 Teleport，Vue 不会把直通属性合上去，作者写的 class 与 style 得自己接住落到 positioner 上\n  inheritAttrs: false,\n  setup(_, { slots, attrs }) {\n    const ctx = useFloatingPanelContext()\n    // 定位层搬到 portal 落点，逃开祖先的层叠上下文\n    return () => h(Teleport, { to: ctx.portalTarget.value }, [\n      h(\n        'div',\n        mergeProps(ctx.api.value.getPositionerProps() as Record<string, unknown>, attrs),\n        slots.default?.(),\n      ),\n    ])\n  },\n})\n\nexport const XhFloatingPanelContent = defineComponent({\n  name: 'XhFloatingPanelContent',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 节点交给机器：跟手期间的指针监听要挂在它所在的那个文档上\n    return () => h(\n      'div',\n      { ...ctx.api.value.getContentProps() as Record<string, unknown>, ref: ctx.contentRef },\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelHeader = defineComponent({\n  name: 'XhFloatingPanelHeader',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('div', ctx.api.value.getHeaderProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelTitle = defineComponent({\n  name: 'XhFloatingPanelTitle',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelDragTrigger = defineComponent({\n  name: 'XhFloatingPanelDragTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('button', ctx.api.value.getDragTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelResizeTrigger = defineComponent({\n  name: 'XhFloatingPanelResizeTrigger',\n  props: {\n    /** 这个把手守哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */\n    edge: { type: String as PropType<FloatingPanelResizeEdge>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 把手是 role=separator 的元素而不是按钮：方向键推边，按钮的激活键在这里没有语义\n    return () => h(\n      'div',\n      ctx.api.value.getResizeTriggerProps({ edge: props.edge }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelStageTrigger = defineComponent({\n  name: 'XhFloatingPanelStageTrigger',\n  props: {\n    /** 按下它切到哪个形态；已经在该形态时再按一次回到常规。 */\n    stage: { type: String as PropType<FloatingPanelStage>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h(\n      'button',\n      ctx.api.value.getStageTriggerProps({ stage: props.stage }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelCloseTrigger = defineComponent({\n  name: 'XhFloatingPanelCloseTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('button', ctx.api.value.getCloseTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelBody = defineComponent({\n  name: 'XhFloatingPanelBody',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('div', ctx.api.value.getBodyProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"floating-panel.js","names":[],"sources":["../../../src/components/floating-panel/floating-panel.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// 提供 floating panel 相关实现。\n\nimport type {\n  FloatingPanelApi,\n  FloatingPanelPosition,\n  FloatingPanelResizeEdge,\n  FloatingPanelSchema,\n  FloatingPanelSize,\n  FloatingPanelWindowState,\n} from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { XhPortal } from '../../runtime/portal'\nimport { provideFloatingPanel, useFloatingPanelContext } from './context'\nimport { useFloatingPanel } from './use-floating-panel'\n\ntype FloatingPanelProps = FloatingPanelSchema['props']\n\n/** 默认插槽的载荷：开合、形态与矩形，以及修改这四项的动作。 */\nexport type FloatingPanelRootSlotProps = Pick<\n  FloatingPanelApi,\n  'open' | 'windowState' | 'position' | 'dimensions' | 'dragging' | 'resizing' | 'canDrag' | 'canResize'\n  | 'setOpen' | 'setPosition' | 'setDimensions' | 'setWindowState'\n>\n\nexport const XhFloatingPanelRoot = defineComponent({\n  name: 'XhFloatingPanelRoot',\n  // 缺省值由 connect 与机器决定；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    open: { type: Boolean, default: undefined },\n    defaultOpen: { type: Boolean, default: undefined },\n    position: { type: Object as PropType<FloatingPanelPosition> },\n    defaultPosition: { type: Object as PropType<FloatingPanelPosition> },\n    dimensions: { type: Object as PropType<FloatingPanelSize> },\n    defaultDimensions: { type: Object as PropType<FloatingPanelSize> },\n    minSize: { type: Object as PropType<FloatingPanelSize> },\n    maxSize: { type: Object as PropType<FloatingPanelSize> },\n    windowState: { type: String as PropType<FloatingPanelWindowState> },\n    defaultWindowState: { type: String as PropType<FloatingPanelWindowState> },\n    // 缺省为真的两个开关：写成裸 Boolean 会被 Vue 的布尔 casting 永久关死\n    draggable: { type: Boolean, default: undefined },\n    resizable: { type: Boolean, default: undefined },\n    disabled: { type: Boolean, default: undefined },\n    translations: { type: Object as PropType<FloatingPanelProps['translations']> },\n  },\n  // 语义事件收整个 details，update: 收裸值\n  emits: {\n    'open-change': (_details: PayloadOf<FloatingPanelProps, 'onOpenChange'>) => true,\n    'update:open': (_open: PayloadOf<FloatingPanelProps, 'onOpenChange'>['open']) => true,\n    'position-change': (_details: PayloadOf<FloatingPanelProps, 'onPositionChange'>) => true,\n    'update:position': (_position: PayloadOf<FloatingPanelProps, 'onPositionChange'>['position']) => true,\n    'dimensions-change': (_details: PayloadOf<FloatingPanelProps, 'onDimensionsChange'>) => true,\n    'update:dimensions': (_dimensions: PayloadOf<FloatingPanelProps, 'onDimensionsChange'>['dimensions']) => true,\n    'window-state-change': (_details: PayloadOf<FloatingPanelProps, 'onWindowStateChange'>) => true,\n    'update:windowState': (_windowState: PayloadOf<FloatingPanelProps, 'onWindowStateChange'>['windowState']) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: FloatingPanelRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const ctx = useFloatingPanel(withXhConfig('floating-panel', props) as FloatingPanelProps, {\n      onOpenChange: (details) => {\n        emit('open-change', details)\n        emit('update:open', details.open)\n      },\n      onPositionChange: (details) => {\n        emit('position-change', details)\n        emit('update:position', details.position)\n      },\n      onDimensionsChange: (details) => {\n        emit('dimensions-change', details)\n        emit('update:dimensions', details.dimensions)\n      },\n      onWindowStateChange: (details) => {\n        emit('window-state-change', details)\n        emit('update:windowState', details.windowState)\n      },\n    })\n    provideFloatingPanel(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      open: ctx.api.value.open,\n      windowState: ctx.api.value.windowState,\n      position: ctx.api.value.position,\n      dimensions: ctx.api.value.dimensions,\n      dragging: ctx.api.value.dragging,\n      resizing: ctx.api.value.resizing,\n      canDrag: ctx.api.value.canDrag,\n      canResize: ctx.api.value.canResize,\n      setOpen: ctx.api.value.setOpen,\n      setPosition: ctx.api.value.setPosition,\n      setDimensions: ctx.api.value.setDimensions,\n      setWindowState: ctx.api.value.setWindowState,\n    }))\n  },\n})\n\nexport const XhFloatingPanelTrigger = defineComponent({\n  name: 'XhFloatingPanelTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 用原生 button，激活交给平台\n    return () => h('button', ctx.api.value.getTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelPositioner = defineComponent({\n  name: 'XhFloatingPanelPositioner',\n  props: {\n    /** 本实例的 Portal 容器；优先于应用级配置。 */\n    container: { type: Object as PropType<Element> },\n  },\n  // 根是 Teleport，Vue 不会把直通属性合上去，作者写的 class 与 style 得自己接住落到 positioner 上\n  inheritAttrs: false,\n  setup(props, { slots, attrs }) {\n    const ctx = useFloatingPanelContext()\n    // 定位层搬到 portal 落点，逃开祖先的层叠上下文\n    return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value }, () => [\n      h(\n        'div',\n        {\n          ...mergeProps(\n            ctx.api.value.getPositionerProps() as Record<string, unknown>,\n            attrs,\n            // 收起跟着退场闸门走：皮肤刻意没给 positioner 补 [hidden]{display:none}（补了\n            // 退场就一帧都播不出来），所以真正的收起落成内联 display\n            ctx.visible.value ? {} : { style: { display: 'none' } },\n          ),\n          ref: (el: unknown) => { ctx.positionerRef.value = el as HTMLElement },\n        },\n        slots.default?.(),\n      ),\n    ])\n  },\n})\n\nexport const XhFloatingPanelContent = defineComponent({\n  name: 'XhFloatingPanelContent',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 节点交给机器：跟手期间的指针监听要挂在它所在的那个文档上\n    return () => h(\n      'div',\n      { ...ctx.api.value.getContentProps() as Record<string, unknown>, ref: ctx.contentRef },\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelHeader = defineComponent({\n  name: 'XhFloatingPanelHeader',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('div', ctx.api.value.getHeaderProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelTitle = defineComponent({\n  name: 'XhFloatingPanelTitle',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelDragTrigger = defineComponent({\n  name: 'XhFloatingPanelDragTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('button', ctx.api.value.getDragTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelResizeTrigger = defineComponent({\n  name: 'XhFloatingPanelResizeTrigger',\n  props: {\n    /** 该把手负责哪条边：n / e / s / w 四条边与 ne / nw / se / sw 四个角。 */\n    edge: { type: String as PropType<FloatingPanelResizeEdge>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFloatingPanelContext()\n    // 把手是 role=separator 的元素而不是按钮：方向键推边，按钮的激活键在这里没有语义\n    return () => h(\n      'div',\n      ctx.api.value.getResizeTriggerProps({ edge: props.edge }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelWindowStateTrigger = defineComponent({\n  name: 'XhFloatingPanelWindowStateTrigger',\n  props: {\n    /** 按下它切换到哪个形态；已处于该形态时再按一次回到常规。 */\n    windowState: { type: String as PropType<FloatingPanelWindowState>, required: true },\n  },\n  setup(props, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h(\n      'button',\n      ctx.api.value.getWindowStateTriggerProps({ windowState: props.windowState }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\nexport const XhFloatingPanelCloseTrigger = defineComponent({\n  name: 'XhFloatingPanelCloseTrigger',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('button', ctx.api.value.getCloseTriggerProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhFloatingPanelBody = defineComponent({\n  name: 'XhFloatingPanelBody',\n  setup(_, { slots }) {\n    const ctx = useFloatingPanelContext()\n    return () => h('div', ctx.api.value.getBodyProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":"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"}

package/dist/components/floating-panel/use-floating-panel.d.ts

@@ -1,17 +1,21 @@
 import { ComputedRef, Ref } from "vue";
+import { Service } from "@xihan-ui/core";
 import { FloatingPanelApi, FloatingPanelSchema } from "@xihan-ui/headless";
-import { Service } from "@xihan-ui/machine";
 //#region src/components/floating-panel/use-floating-panel.d.ts
 interface FloatingPanelContext {
   api: ComputedRef<FloatingPanelApi>;
   service: Service<FloatingPanelSchema>;
-  /** 面板节点，跟手期间机器取它的文档挂指针监听。 */
+  /** 面板节点，拖动期间状态机取它的文档挂载指针监听。 */
   contentRef: Ref<HTMLElement | null>;
-  /** 浮层搬到哪儿：全局配置的 portalContainer > 单一落点。 */
+  /** 定位层节点，进退场动画挂在它上面。 */
+  positionerRef: Ref<HTMLElement | null>;
+  /** 定位层当前是否应当可见：退场动画播完之前仍为真。 */
+  visible: Ref<boolean>;
+  /** 浮层迁移到的位置：全局配置的 portalContainer > 单一落点。 */
   portalTarget: ComputedRef<string | Element>;
 }
-/** 回调打包成一个对象：这个组件有四路对外通知，逐个当形参排下去没法读。 */
-type FloatingPanelNotifiers = Pick<FloatingPanelSchema['props'], 'onOpenChange' | 'onPositionChange' | 'onSizeChange' | 'onStageChange'>;
+/** 回调打包为一个对象：该组件有四路对外通知，逐个作为形参排列不便阅读。 */
+type FloatingPanelNotifiers = Pick<FloatingPanelSchema['props'], 'onOpenChange' | 'onPositionChange' | 'onDimensionsChange' | 'onWindowStateChange'>;
 declare function useFloatingPanel(props: FloatingPanelSchema['props'], notifiers?: FloatingPanelNotifiers): FloatingPanelContext;
 //#endregion
 export { FloatingPanelContext, FloatingPanelNotifiers, useFloatingPanel };

package/dist/components/floating-panel/use-floating-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-floating-panel.d.ts","names":[],"sources":["../../../src/components/floating-panel/use-floating-panel.ts"],"mappings":";;;;UAWiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,YAAY,IAAI;;EAEhB,cAAc,qBAAqB;;;KAIzB,yBAAyB,KACnC;iBAIc,iBACd,OAAO,8BACP,YAAW,yBACV"}
+{"version":3,"file":"use-floating-panel.d.ts","names":[],"sources":["../../../src/components/floating-panel/use-floating-panel.ts"],"mappings":";;;;UAmBiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,YAAY,IAAI;;EAEhB,eAAe,IAAI;;EAEnB,SAAS;;EAET,cAAc,qBAAqB;;;KAIzB,yBAAyB,KACnC;iBAIc,iBACd,OAAO,8BACP,YAAW,yBACV"}

package/dist/components/floating-panel/use-floating-panel.js

@@ -1,24 +1,40 @@
+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, ref } from "vue";
+import { createRuntimeConfig, createScope, ensurePortalRoot } from "@xihan-ui/core";
 import { connectFloatingPanel, floatingPanelMachine } from "@xihan-ui/headless";
-import { createScope, ensurePortalRoot } from "@xihan-ui/kernel";
 //#region src/components/floating-panel/use-floating-panel.ts
 function useFloatingPanel(props, notifiers = {}) {
 	const contentRef = ref(null);
+	const positionerRef = ref(null);
+	const idGen = createVueIdGenerator();
+	const scope = createScope(null, idGen);
 	const service = useMachine(floatingPanelMachine, () => ({
 		...props,
 		...notifiers
-	}), createScope(null, createVueIdGenerator()));
+	}), scope);
 	service.refs.set("getContentEl", () => contentRef.value);
 	const api = computed(() => connectFloatingPanel(service, vueNormalize));
+	let config = null;
+	if (typeof document !== "undefined") config = createRuntimeConfig({
+		scope,
+		idGenerator: idGen
+	});
+	const visible = useOverlayExit({
+		config,
+		isOpen: () => api.value.open,
+		contentRef: positionerRef
+	});
 	const xhConfig = useXhConfig();
 	return {
 		api,
 		service,
 		contentRef,
+		positionerRef,
+		visible,
 		portalTarget: computed(() => xhConfig.value.portalContainer?.() ?? (typeof document === "undefined" ? "body" : ensurePortalRoot(document)))
 	};
 }

package/dist/components/floating-panel/use-floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-floating-panel.js","names":[],"sources":["../../../src/components/floating-panel/use-floating-panel.ts"],"sourcesContent":["import type { FloatingPanelApi, FloatingPanelSchema } from '@xihan-ui/headless'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectFloatingPanel, floatingPanelMachine } from '@xihan-ui/headless'\nimport { createScope, ensurePortalRoot } from '@xihan-ui/kernel'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface FloatingPanelContext {\n  api: ComputedRef<FloatingPanelApi>\n  service: Service<FloatingPanelSchema>\n  /** 面板节点，跟手期间机器取它的文档挂指针监听。 */\n  contentRef: Ref<HTMLElement | null>\n  /** 浮层搬到哪儿：全局配置的 portalContainer > 单一落点。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\n/** 回调打包成一个对象：这个组件有四路对外通知，逐个当形参排下去没法读。 */\nexport type FloatingPanelNotifiers = Pick<\n  FloatingPanelSchema['props'],\n  'onOpenChange' | 'onPositionChange' | 'onSizeChange' | 'onStageChange'\n>\n\nexport function useFloatingPanel(\n  props: FloatingPanelSchema['props'],\n  notifiers: FloatingPanelNotifiers = {},\n): FloatingPanelContext {\n  const contentRef = ref<HTMLElement | null>(null)\n\n  // connect 要派生 content 与 title 的 id，因此建 scope：id 走 Vue 的 useId，\n  // 同页多个面板的 IDREF 才不会相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(floatingPanelMachine, () => ({ ...props, ...notifiers }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getContentEl', () => contentRef.value)\n\n  const api = computed(() => connectFloatingPanel(service, vueNormalize))\n\n  // 定位层要逃开祖先的层叠上下文：祖先链上任意一处 transform / filter / contain 都会抢走\n  // position: fixed 的包含块，而连接层写的 left/top 是视口坐标，面板会落到错误的位置。\n  // 先问全局配置的落点，没有才落单一 portal 根\n  const xhConfig = useXhConfig()\n  const portalTarget = computed<string | Element>(() =>\n    xhConfig.value.portalContainer?.() ?? (typeof document === 'undefined' ? 'body' : ensurePortalRoot(document)),\n  )\n\n  return { api, service, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;AA0BA,SAAgB,iBACd,OACA,YAAoC,CAAC,GACf;CACtB,MAAM,aAAa,IAAwB,IAAI;CAM/C,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,GAAG;CAAU,IADnE,YAAY,MADZ,qBACsB,CACqD,CAAC;CAG1F,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CAEvD,MAAM,MAAM,eAAe,qBAAqB,SAAS,YAAY,CAAC;CAKtE,MAAM,WAAW,YAAY;CAK7B,OAAO;EAAE;EAAK;EAAS;EAAY,cAJd,eACnB,SAAS,MAAM,kBAAkB,MAAM,OAAO,aAAa,cAAc,SAAS,iBAAiB,QAAQ,EAG/D;CAAE;AAClD"}
+{"version":3,"file":"use-floating-panel.js","names":[],"sources":["../../../src/components/floating-panel/use-floating-panel.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 floating panel 相关实现。\n\nimport type { RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { FloatingPanelApi, FloatingPanelSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope, ensurePortalRoot } from '@xihan-ui/core'\nimport { connectFloatingPanel, floatingPanelMachine } from '@xihan-ui/headless'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface FloatingPanelContext {\n  api: ComputedRef<FloatingPanelApi>\n  service: Service<FloatingPanelSchema>\n  /** 面板节点，拖动期间状态机取它的文档挂载指针监听。 */\n  contentRef: Ref<HTMLElement | null>\n  /** 定位层节点，进退场动画挂在它上面。 */\n  positionerRef: Ref<HTMLElement | null>\n  /** 定位层当前是否应当可见：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的 portalContainer > 单一落点。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\n/** 回调打包为一个对象：该组件有四路对外通知，逐个作为形参排列不便阅读。 */\nexport type FloatingPanelNotifiers = Pick<\n  FloatingPanelSchema['props'],\n  'onOpenChange' | 'onPositionChange' | 'onDimensionsChange' | 'onWindowStateChange'\n>\n\nexport function useFloatingPanel(\n  props: FloatingPanelSchema['props'],\n  notifiers: FloatingPanelNotifiers = {},\n): FloatingPanelContext {\n  const contentRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n\n  // connect 要派生 content 与 title 的 id，因此建 scope：id 走 Vue 的 useId，\n  // 同页多个面板的 IDREF 才不会相撞\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(floatingPanelMachine, () => ({ ...props, ...notifiers }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getContentEl', () => contentRef.value)\n\n  const api = computed(() => connectFloatingPanel(service, vueNormalize))\n\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n  if (typeof document !== 'undefined')\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走。面板整棵子树都在 positioner 底下，\n  // 收起与进退场动画都落在它身上，探测器也从它身上读 animationName\n  const visible = useOverlayExit({ config, isOpen: () => api.value.open, contentRef: positionerRef })\n\n  // 定位层要逃开祖先的层叠上下文：祖先链上任意一处 transform / filter / contain 都会抢走\n  // position: fixed 的包含块，而连接层写的 left/top 是视口坐标，面板会落到错误的位置。\n  // 先问全局配置的落点，没有才落单一 portal 根\n  const xhConfig = useXhConfig()\n  const portalTarget = computed<string | Element>(() =>\n    xhConfig.value.portalContainer?.() ?? (typeof document === 'undefined' ? 'body' : ensurePortalRoot(document)),\n  )\n\n  return { api, service, contentRef, positionerRef, visible, portalTarget }\n}\n"],"mappings":";;;;;;;;;AAsCA,SAAgB,iBACd,OACA,YAAoC,CAAC,GACf;CACtB,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAIlD,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,6BAA6B;EAAE,GAAG;EAAO,GAAG;CAAU,IAAI,KAAK;CAG1F,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CAEvD,MAAM,MAAM,eAAe,qBAAqB,SAAS,YAAY,CAAC;CAGtE,IAAI,SAA+B;CACnC,IAAI,OAAO,aAAa,aACtB,SAAS,oBAAoB;EAAE;EAAO,aAAa;CAAM,CAAC;CAI5D,MAAM,UAAU,eAAe;EAAE;EAAQ,cAAc,IAAI,MAAM;EAAM,YAAY;CAAc,CAAC;CAKlG,MAAM,WAAW,YAAY;CAK7B,OAAO;EAAE;EAAK;EAAS;EAAY;EAAe;EAAS,cAJtC,eACnB,SAAS,MAAM,kBAAkB,MAAM,OAAO,aAAa,cAAc,SAAS,iBAAiB,QAAQ,EAGvC;CAAE;AAC1E"}

package/dist/components/form/context.js

@@ -9,7 +9,7 @@ function useFormContext() {
 	if (!ctx) throw new Error("[xh] Form 部件必须用在 XhFormRoot 内");
 	return ctx;
 }
-/** 表单外也能用的部件（如 Field）从这里拿：不在表单里就是 null。 */
+/** 表单外也能使用的部件（如 Field）从这里获取：不在表单内时为 null。 */
 function useOptionalFormContext() {
 	return inject(KEY, null);
 }

package/dist/components/form/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/form/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { FormContext } from './use-form'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<FormContext> = Symbol.for('xh-form')\n\nexport function provideForm(ctx: FormContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useFormContext(): FormContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Form 部件必须用在 XhFormRoot 内')\n  return ctx\n}\n\n/** 表单外也能用的部件（如 Field）从这里拿：不在表单里就是 null。 */\nexport function useOptionalFormContext(): FormContext | null {\n  return inject(KEY, null)\n}\n\n/** 字段容器把字段名交给后代：Field 据此从表单上下文自取校验态。 */\nexport interface FormFieldHandle {\n  name: () => string\n}\n\nconst FIELD_KEY: InjectionKey<FormFieldHandle> = Symbol.for('xh-form-field')\n\nexport function provideFormField(handle: FormFieldHandle): void {\n  provide(FIELD_KEY, handle)\n}\n\nexport function useOptionalFormField(): FormFieldHandle | null {\n  return inject(FIELD_KEY, null)\n}\n"],"mappings":";;AAIA,MAAM,MAAiC,OAAO,IAAI,SAAS;AAE3D,SAAgB,YAAY,KAAwB;CAClD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,iBAA8B;CAC5C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,+BAA+B;CACjD,OAAO;AACT;;AAGA,SAAgB,yBAA6C;CAC3D,OAAO,OAAO,KAAK,IAAI;AACzB;AAOA,MAAM,YAA2C,OAAO,IAAI,eAAe;AAE3E,SAAgB,iBAAiB,QAA+B;CAC9D,QAAQ,WAAW,MAAM;AAC3B;AAEA,SAAgB,uBAA+C;CAC7D,OAAO,OAAO,WAAW,IAAI;AAC/B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/form/context.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// 提供 context 相关实现。\n\nimport type { FormPath } from '@xihan-ui/headless'\nimport type { InjectionKey } from 'vue'\nimport type { FormContext } from './use-form'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<FormContext> = Symbol.for('xh-form')\n\nexport function provideForm(ctx: FormContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useFormContext(): FormContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Form 部件必须用在 XhFormRoot 内')\n  return ctx\n}\n\n/** 表单外也能使用的部件（如 Field）从这里获取：不在表单内时为 null。 */\nexport function useOptionalFormContext(): FormContext | null {\n  return inject(KEY, null)\n}\n\n/** 字段容器把字段名交给后代：Field 据此从表单上下文自取校验态。 */\nexport interface FormFieldHandle {\n  name: () => FormPath\n}\n\nconst FIELD_KEY: InjectionKey<FormFieldHandle> = Symbol.for('xh-form-field')\n\nexport function provideFormField(handle: FormFieldHandle): void {\n  provide(FIELD_KEY, handle)\n}\n\nexport function useOptionalFormField(): FormFieldHandle | null {\n  return inject(FIELD_KEY, null)\n}\n"],"mappings":";;AAYA,MAAM,MAAiC,OAAO,IAAI,SAAS;AAE3D,SAAgB,YAAY,KAAwB;CAClD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,iBAA8B;CAC5C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,+BAA+B;CACjD,OAAO;AACT;;AAGA,SAAgB,yBAA6C;CAC3D,OAAO,OAAO,KAAK,IAAI;AACzB;AAOA,MAAM,YAA2C,OAAO,IAAI,eAAe;AAE3E,SAAgB,iBAAiB,QAA+B;CAC9D,QAAQ,WAAW,MAAM;AAC3B;AAEA,SAAgB,uBAA+C;CAC7D,OAAO,OAAO,WAAW,IAAI;AAC/B"}