Customizable Popover Component For Vue 3 – wowerlay

wowerlay is a Vue 3 component that helps you create animated, customizable popovers on elements.

How to use it:

1. Import and register the wowerlay component.

// stylesheet
import 'wowerlay/style.css';
import { createApp } from 'vue';
import { createWowerlay } from 'wowerlay';
import App from './App.vue';
const app = createApp(App);
const wowerlay = createWowerlay();
app.use(wowerlay);
app.mount('#app');

2. Attach the popover to the target trigger element as follows:

<template>
  <button ref="targetElement" @click="toggle">Click Me</button>
  <Wowerlay 
    tag="section"
    :target="targetElement"
    v-model:visible="isVisible"
  >
    <div>Popover Content</div>
  </Wowerlay>
</template>

import { Wowerlay } from 'wowerlay';
import { ref } from 'vue';
const targetElement = ref<HTMLElement>();
const targetElement = ref(null);
const isVisible = ref(false);
const toggle = () => (isVisible.value = !isVisible.value);

3. Available component props.

interface WowerlayProps {
  /**
   * Primary position for Wowerlay.
   * @default "bottom"
   */
  position?:
    | 'left'
    | 'left-start'
    | 'left-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end';
  /**
   * Target element for Wowerlay to follow
   */
  target: HTMLElement;
  /**
   * If given, Wowerlay will be able to leave screen.
   * @default false
   */
  canLeaveViewport?: boolean;
  /**
   * If given Wowerlay won't update its position after mounted
   * @default false
   */
  fixed?: boolean;
  /**
   * If given Wowerlay will not flip to stay in view.
   * @default false
   */
  noFlip?: boolean;
  /**
   * Tag name for Wowerlay wrapper element.
   * @default "div"
   */
  tag?: string;
  /**
   * Horizontal gap betweeen Wowerlay and the target
   * @default 0
   */
  horizontalGap?: number;
  /**
   * Vertical gap between Wowerlay and the target.
   * @default 0
   */
  verticalGap?: number;
  /**
   * Disables click blocker background when Wowerlay is visible
   * @default false
   */
  noBackground?: boolean;
  /**
   * Disable or set custom transition for Wowerlay
   * @set false to disable transition
   * @set string to use your own transition name.
   */
  transition?: string | boolean;
  /**
   * If enabled Wowerlay will sync its width same as target's width.
   * @set true to enable.
   * @default false
   */
  syncWidth?: boolean;
  /**
   * If enabled Wowerlay will sync its width same as target's width.
   * @set true to enable.
   * @default false
   */
  syncHeight?: boolean;
}

Preview:

Changelog:

1.1.0 (09/14/2023)

• Transition handling mechanism is changed, now Transition component is on top of wowerlay-background element, that means you are targeting background element if noBackground prop is not given. For CSS transitions now users must select .wowerlay-background-name-active .wowerlay if target is background.

1.0.2 (06/20/2023)

• Bugfix

1.0.1 (06/13/2023)

• Added arrow slot for supporting custom arrows.
• Added arrowPadding prop for floating-ui arrow middleware.

1.0.0 (06/07/2023)

• Now thanks to floating-ui, Wowerlay supports VirtualElement a.k.a an object with getBoundingClientRect as the target.
• New middlewares[] prop can inject custom middlewares into Floating-UI.
• Now Wowerlay writes it’s information to itself as attributes: data-popover-placement, data-popover-rect, data-popover-x and data-popover-y. Purpose of these attributes are placement-based transitioning. See Demo/JS Transition for sample code.
• Now transition prop accepts a function that handles both enter and leave transitions. See Demo/JS Transition for sample code.
• Some of the Floating-UI types are exported from Wowerlay.

0.8.0 (11/14/2022)

• Added data-wowerlay-scope and data-wowerlay-stop attributes.

0.7.0 (08/30/2022)

• Added backgroundAttrs prop, with this you can pass any attribute to Wowerlay’s background element.
• Now Wowerlay do not leave a div.wowerlay-background when it isn’t visible.
• Now if noBackground prop is given, instead of adding .no-background to background element, Wowerlay mounts to body without a background element.
• Removed createWowerlay function (it’s deprecated in 0.6.0).

0.6.0 (07/07/2022)

• Updated Now each Wowerlay instance will climb from target element to root element and attach a scroll event for better auto replacement.
• Updated Now each Wowerlay instance adds a click event to Window, it used to be single click event for all instances.
  Breaking Changes
• Deprecated createWowerlay, now each Wowerlay component instance are independent, altough we still provide an empty function not to break projects.

0.5.2 (04/13/2022)

• Added syncWidth and syncHeight props.

Download Details:

Author: teamseodo

Live Demo: https://wowerlay.pages.dev/

Download Link: https://github.com/teamseodo/wowerlay/archive/refs/heads/main.zip

Official Website: https://github.com/teamseodo/wowerlay

Install & Download:

# Yarn
$ yarn add wowerlay

# NPM
$ npm i wowerlay