Fix window

Basic Usage

The FixWindow component is designed to attach itself to a parent element and dynamically adjust its position. It uses either fixed or absolute CSS positioning, depending on the configuration. The window will automatically reposition itself to ensure it stays within the visible boundaries of the screen.

<template>
  <div>
    Hover Me
    <FixWindow>This is a dynamic window!</FixWindow>
  </div>
</template>

In this example, the FixWindow appears when you hover over the button.

Model value

The modelValue prop controls the visibility of the FixWindow. When true, the FixWindow is displayed; when false, it is hidden. This prop is useful for programmatically managing the visibility of the window.

<FixWindow v-model="isVisible">
  This window is controlled programmatically.
</FixWindow>

Type position

The typePosition prop determines whether the FixWindow uses absolute or fixed CSS positioning.

• absolute: Positions the FixWindow relative to its nearest positioned ancestor.
• fixed: Positions the FixWindow relative to the viewport.

<template>
  <Button>
    Fixed Position
    <FixWindow typePosition="fixed">
      ...
    </FixWindow>
  </Button>
</template>

Positioning

The position of the FixWindow can be controlled using the position prop. Available options include top, bottom, left, right, and combinations like bottom-right.

The component will also dynamically adjust its position when the parent element moves closer to the edges of the visible screen. This ensures the FixWindow remains fully visible without overflowing the viewport.

<template>
  <div>
    Bottom Right
    <FixWindow position="bottom-right">
      Window at the bottom-right
    </FixWindow>
  </div>
</template>

Trigger Events

The FixWindow can be configured to open and close based on specific user interactions. Here’s a breakdown of the supported events:

Hover

Opens when the user hovers over the parent element and closes when the user's cursor leaves it.

<template>
  <div>
    Hover Me
    <FixWindow eventOpen="hover" eventClose="hover">
      Opened on hover
    </FixWindow>
  </div>
</template>

Click

Opens when the user clicks on the parent element and closes on another click.

<template>
  <div>
    Click Me
    <FixWindow eventOpen="click" eventClose="click">
      Opened on click
    </FixWindow>
  </div>
</template>

Double clicks

Opens when the user double-clicks on the parent element and closes on another double-click.

<template>
  <div>
    Double-Click Me
    <FixWindow eventOpen="dblclick" eventClose="dblclick">
      Opened on double-click
    </FixWindow>
  </div>
</template>

Mousedown

Opens when the user presses the mouse button and closes when the button is released.

<template>
  <div>
    Mouse Down
    <FixWindow eventOpen="mousedown" eventClose="mouseup">
      Opened on mouse down
    </FixWindow>
  </div>
</template>

Mouseup

Opens when the user releases the mouse button and closes when the user clicks elsewhere.

<template>
  <div>
    Mouse Up
    <FixWindow eventOpen="mouseup" eventClose="click">
      Opened on mouse up
    </FixWindow>
  </div>
</template>

Context Menu

Opens when the user right-clicks on the parent element.

<template>
  <div>
    Right-Click Me
    <FixWindow eventOpen="contextmenu" eventClose="click">
      Opened on right-click
    </FixWindow>
  </div>
</template>

None

Prevents the FixWindow from opening automatically. Use this if you want to control the visibility programmatically or via a close button.

<template>
  <div>
    Manual Control
    <FixWindow eventOpen="none" closeButton>
      Controlled manually
    </FixWindow>
  </div>
</template>

Element

The el prop specifies the target element that the FixWindow should align with. By default, the FixWindow will align itself with its parent element, but you can use this prop to explicitly set a target.

<template>
  <Button id="target-element">
    Hover Me
  </Button>
  <FixWindow :el="'#target-element'">
    This window is aligned to the button.
  </FixWindow>
</template>

Scrollable Element

The scrollableEl prop defines the scrollable element that affects the position of the FixWindow. This ensures that the FixWindow dynamically adjusts its position when the scrollable element moves.

<template>
  <div id="scrollable-container" style="overflow: auto;">
    <Button>
      Scroll-Affected FixWindow
      <FixWindow :scrollableEl="'#scrollable-container'">
        This window adjusts based on scrolling.
      </FixWindow>
    </Button>
  </div>
</template>

Delay

The delay prop introduces a delay (in milliseconds) before the FixWindow opens after the triggering event. This is useful for preventing accidental openings.

<template>
  <Button>
    Delayed FixWindow
    <FixWindow delay="500">
      Window opens after 500ms.
    </FixWindow>
  </Button>
</template>

Margin Px

The marginPx prop sets the margin (in pixels) between the FixWindow and its parent element.

<template>
  <Button>
    Margin Example
    <FixWindow :marginPx="10">
      10px margin from parent element.
    </FixWindow>
  </Button>
</template>

Translate Px

The translatePx prop fine-tunes the position of the FixWindow by translating it along the x or y axes (in pixels).

<template>
  <Button>
    Translated FixWindow
    <FixWindow translatePx="15">
      Window is shifted by 15px.
    </FixWindow>
  </Button>
</template>

Padding Window

The paddingWindow prop adds padding around the FixWindow to prevent it from getting too close to the edges of the screen.

<template>
  <Button>
    Padded FixWindow
    <FixWindow paddingWindow="20">
      20px padding from screen edges.
    </FixWindow>
  </Button>
</template>

By Cursor

The byCursor prop positions the FixWindow relative to the cursor's location. This is particularly useful for context menus or tooltips that need to follow the user's actions.

<template>
  <div>
    Right click here.
    <FixWindow byCursor eventOpen="contextmenu">
      Window is displayed at the cursor location.
    </FixWindow>
  </div>
</template>

Close Button

You can enable a close button inside the FixWindow by setting the closeButton prop to true. This is especially useful when the eventClose prop is set to none, as it provides users with a way to close the window.

Click Me

<template>
  <div>
    Close Me
    <FixWindow closeButton>
      ...
    </FixWindow>
  </div>
</template>

Styling

Mode

The mode prop allows you to control the general appearance of the FixWindow. Available options include:

• filled: Adds a background color and rounded corners.
• outlined: Adds a border with no background.
• underlined: Adds a subtle underline style.

<template>
  <div>
    Styled Window
    <FixWindow mode="outlined">
      Window with outlined mode
    </FixWindow>
  </div>
</template>

Custom Class

You can apply custom styles to the FixWindow using the class prop. This allows you to override or add additional styles to the container.

<template>
  <Button>
    Custom Class
    <FixWindow class="custom-class">
      Custom styled window
    </FixWindow>
  </Button>
</template>

Body Class

For more granular control, you can style the content area inside the FixWindow using the classBody prop.

<template>
  <Button>
    Custom Body Class
    <FixWindow classBody="custom-body-class">
      Window with custom body styling
    </FixWindow>
  </Button>
</template>

Prevent Event Propagation

The stopOpenPropagation prop stops the opening event (such as click, hover, etc.) from propagating to parent elements. This is useful in cases where the FixWindow is inside a component that has its own event handlers.

For example, if a FixWindow is inside a Button that triggers another action on click, you can use stopOpenPropagation to prevent the click event from propagating to the button's parent.

<template>
  <Button>
    Stop Propagation
    <FixWindow eventOpen="click" stopOpenPropagation>
      Event propagation stopped
    </FixWindow>
  </Button>
</template>