Customizable Popover Component For Vue 3 - wowerlay

Install & Download:

# Yarn
$ yarn add wowerlay
# NPM
$ npm i wowerlay

Description:

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:

Customizable Popover Component For Vue 3 wowerlay

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)