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