FixWindow API

This page provides an overview of the FixWindow component API, detailing its props, emits, slots, and exposed methods/states.

Props

The FixWindow component accepts the following props:

Prop	Default	Type	Description
`modelValue`	`undefined`	`boolean` or `undefined`	Controls the visibility of the fixed window.
`el`	`undefined`	`RefLink` or `undefined`	The target element for the fixed window.
`scrollableEl`	`undefined`	`RefLink` or `undefined`	The scrollable element affecting the fixed window's position.
`typePosition`	`"fixed"`	`"absolute"` or `"fixed"` or `undefined`	The CSS positioning style for the fixed window.
`position`	`"top"`	`Position` or `undefined`	The position of the fixed window relative to the target element.
`class`	`""`	`StyleClass` or `undefined`	Custom CSS class for the fixed window container.
`classBody`	`""`	`StyleClass` or `undefined`	Custom CSS class for the body of the fixed window.
`mode`	`"filled"`	`StyleMode` or `undefined`	Styling mode for the fixed window.
`eventOpen`	`"hover"`	`FixWindowEvent` or `undefined`	Event that triggers the opening of the fixed window.
`eventClose`	`"hover"`	`FixWindowEvent` or `undefined`	Event that triggers the closing of the fixed window.
`delay`	`0`	`100` or `number` or `undefined`	Delay before opening the fixed window (in milliseconds).
`marginPx`	`10`	`2` or `5` or `number` or `undefined`	Margin between the fixed window and the target element (in pixels).
`translatePx`	`0`	`2` or `5` or `number` or `undefined`	Pixel translation for fine-tuning the fixed window's position.
`paddingWindow`	`0`	`2` or `5` or `number` or `undefined`	Padding for the fixed window's boundaries.
`byCursor`	`false`	`boolean` or `undefined`	Positions the fixed window based on cursor location.
`closeButton`	`false`	`boolean` or `undefined`	Enables a close button for the fixed window.
`stopOpenPropagation`	`false`	`boolean` or `undefined`	Prevents event propagation when opening the fixed window.

Slots

The FixWindow component provides the following slots:

Slot	Payload	Description
`default`	`VNode[]`	The default content of the fixed window.

Emits

The FixWindow component emits the following events:

Event	Payload	Description
`update:modelValue`	`boolean`	Emitted when the `modelValue` is updated, indicating the visibility state of the fixed window.
`open`	`MouseEvent` or `undefined`	Emitted when the fixed window is opened.
`close`	`MouseEvent` or `undefined`	Emitted when the fixed window is closed.

Expose

The FixWindow component exposes the following methods and states via ref:

Expose	Type	Description
`x`	`string`	Current x-coordinate position of the fixed window.
`y`	`string`	Current y-coordinate position of the fixed window.
`isOpen`	`boolean`	Indicates whether the fixed window is open.
`position`	`Position`	Current position of the fixed window.
`delay`	`number`	Current delay before opening the fixed window.
`marginPx`	`number`	Current margin between the fixed window and the target element.
`isCloseButton`	`boolean`	Indicates whether the close button is enabled.
`eventOpen`	`FixWindowEvent`	Event type for opening the fixed window.
`eventClose`	`FixWindowEvent`	Event type for closing the fixed window.
`element`	`HTMLElement`	The target HTML element for the fixed window.
`open`	`() => void`	Opens the fixed window.
`close`	`() => void`	Closes the fixed window.
`updatePosition`	`() => void`	Updates the position of the fixed window dynamically.

Types

FixWindowEvent

The FixWindowEvent type defines the possible events that can trigger the opening or closing of the fixed window:

Value	Description
`"hover"`	Triggered when the mouse hovers over the target element.
`"click"`	Triggered when the target element is clicked.
`"mousedown"`	Triggered when the mouse button is pressed down.
`"mouseup"`	Triggered when the mouse button is released.
`"dblclick"`	Triggered when the target element is double-clicked.
`"contextmenu"`	Triggered when the context menu is opened (right-click).
`"none"`	No event triggers the action.

StyleMode

Styling modes available for the fixed window:

Value	Description
`"filled"`	A filled background style.
`"outlined"`	An outlined style.
`"underlined"`	An underlined style.

Position

The Position type defines the relative position of the fixed window to the target element:

Value	Description
`"top"`	Positioned above the target element.
`"bottom"`	Positioned below the target element.
`"left"`	Positioned to the left of the target element.
`"right"`	Positioned to the right of the target element.
`"center"`	Centered relative to the target element.
`"bottom-left"`	Positioned at the bottom-left corner of the target element.
`"top-left"`	Positioned at the top-left corner of the target element.
`"bottom-right"`	Positioned at the bottom-right corner of the target element.
`"top-right"`	Positioned at the top-right corner of the target element.
`"center-top"`	Centered horizontally at the top of the target element.
`"center-bottom"`	Centered horizontally at the bottom of the target element.
`"center-right"`	Centered vertically at the right of the target element.
`"center-left"`	Centered vertically at the left of the target element.
`"right-top"`	Positioned at the top-right corner of the target element's right.
`"right-bottom"`	Positioned at the bottom-right corner of the target element's right.
`"left-top"`	Positioned at the top-left corner of the target element's left.
`"left-bottom"`	Positioned at the bottom-left corner of the target element's left.