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:

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