Wowerlay is a popover library for Vue 3 applications.

Overview

Wowerlay is a popover library for Vue 3 applications. It isn't an alternative for Popper.

wowerlay

Demos/Examples

You can see all examples Here.

Intallation

For npm:

npm install wowerlay

For pnpm:

pnpm install wowerlay

For yarn:

yarn add wowerlay

Usage

First you need to register the plugin and import stylesheet.

main.js | main.ts

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');

Using Wowerlay.

To make Wowerlay visible you must set visibility to true and give a target element, template refs can be given.

Anthing goes to will be unmounted when visibility is false and you can change tag of wrapper with tag prop.

Hi How Are you?
Hey how you doin?
">
<template>
  <button ref="targetElement" @click="toggle">Hi How Are you?button>

  <Wowerlay 
    tag="section"
    :target="targetElement"
    v-model:visible="isVisible"
  >
    <div>Hey how you doin?div>
    <button>Goodbutton>
    <button>Badbutton>
  Wowerlay>
template>

<script setup lang="ts">
  import { Wowerlay } from 'wowerlay';
  import { ref } from 'vue';

  /*
   * if you are using typescript define template ref like this otherwise
   * you will get a type error.
   */
  const targetElement = ref<HTMLElement>();
  /* For JS */
  const targetElement = ref(null);

  const isVisible = ref(false);
  const toggle = () => (isVisible.value = !isVisible.value);
script>

If you don't want to use v-model:visible syntax you can use the following one:

Hi How Are you?
Hey how you doin?
">
<template>
  <button ref="targetElement" @click="toggle">Hi How Are you?button>

  <Wowerlay
    tag="span"
    :target="targetElement"
    :visible="isVisible"
    @update:visible="(state) => isVisible = state"
  >
    <div>Hey how you doin?div>
    <button>Goodbutton>
    <button>Badbutton>
  Wowerlay>
template>

If you don't want to prevent attribute inheritance you can use component inside of an element, it will work as expected because it'll be teleported to body eventually.

Hi How Are you?
Hey how you doin?
">
<template>
  <button ref="targetElement" @click="toggle">
    Hi How Are you?

    <Wowerlay
      tag="div"
      :target="targetElement"
      :visible="isVisible"
      @update:visible="(state) => isVisible = state"
    >
      <div>Hey how you doin?div>
      <button>Goodbutton>
      <button>Badbutton>
    Wowerlay>
  button>
template>

Styling Wowerlay

Styling wowerlay is simple. is just a single wrapper element.

!! You shouldn't change necessary styles !!

Content Goes Here ">
<Wowerlay tag="span" style="width: 300px; height: 300px; display: inline-block">
  Content Goes Here
Wowerlay>

Emits

interface WowerlayEmits {
  /**
   * Fires when wowerlay wants to change it's visibility state.
   */
  'update:visible': (visibility: Boolean) => void;
  
  /**
   * Fires when Wowerlay element changes, this can be used to do some DOM stuff to Wowerlay popover element.
   * Can be used as v-model:el
   */
  'update:el': (element: HTMLElement | null) => void;
}

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;
}

What about TypeScript?

This package has built-in TypeScript support for events and props. It works with JSX | TSX and Render Functions with type support.

To have types support in vue files we recommend you to use Volar.
Volar
TypeScript Vue Plugin

Comments
  • Add Code Samples Support and Refactor Design

    Add Code Samples Support and Refactor Design

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) With this PR;
    • We can add sample codes to demos.
    • Demo design and colors refactored for it to look pretty.
    opened by kadiryazici 7
  • Combine WowerlayContainer into Wowerlay

    Combine WowerlayContainer into Wowerlay

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
    opened by kadiryazici 4
  • Refactor Demo Style and System

    Refactor Demo Style and System

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Refactor Demo System and Demo Components.
    • What is the current behavior? (You can also link to an open issue here)

      • Current implementation is using TSX;
      • Pattern to create demos is poor.
    • What is the new behavior (if this is a feature change)?

      • Current implementation is using Script Setup + TS + Vue;
      • Pattern to create demos is rich (i guess) now.
    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

      • Yes, now demo files should end with .demo.ts.
    opened by kadiryazici 3
  • Add position, fixed position, reactive target and gap support

    Add position, fixed position, reactive target and gap support

    With this PR;

    • Wowerlay can be forced to be placed in a direction bottom | right | top | left
    • vertical-gap and horizontal-gap prop support is added. This will set the gap between Wowerlay and its target.
    • Combined with previous PR to resolve dozens of Conflicts.
    • Reactive target support is added. Now Wowerlay will react when target changes.
    • fixed prop support is added. When set to true Wowerlay will not update its position.

    Additional

    • TypeScript version is updated.
    • package.json updated.
    • Readme.md is updated.
    documentation enhancement 
    opened by kadiryazici 3
  • Refactor background element, add backgroundAttrs prop

    Refactor background element, add backgroundAttrs prop

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Refactor, new prop.
    • What is the current behavior? (You can also link to an open issue here)

      • Users has no way to pass atribute to Wowerlay`s background element.

      • Wowerlay`s background element always stays visible, even if Wowerlay is hidden. image

      • noBackground prop just adds .no-background class instead of removing background element. image

    • What is the new behavior (if this is a feature change)?

      • Now If Wowerlay is not visible, neither background is. CleanShot 2022-08-25 at 20 02 12@2x

      • Now if noBackground prop is given, Wowerlay mounts to dom without background element. image

    opened by kadiryazici 2
  • Refactor scroll repositioning

    Refactor scroll repositioning

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Refactor
    • What is the new behavior (if this is a feature change)?

      • Now each Wowerlay instance will create click listener for Window.
      • Each Wowerlay instance will climb from target to root element and add scroll handler.
      • createWowerlay is removed, not needed anymore.
      • events file removed, not needed anymore.
    opened by kadiryazici 2
  • Add `syncWidth` and `syncHeight` props

    Add `syncWidth` and `syncHeight` props

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Feature
    • What is the current behavior? (You can also link to an open issue here)

      • Wowerlay cannot sync its bounds to target element.
    • What is the new behavior (if this is a feature change)?

      • Now wowerlay can set its bounds to target element.
    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

      • No
    enhancement 
    opened by kadiryazici 2
  • Refactor demos, and props

    Refactor demos, and props

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Refactor
      • Additional properties
    • What is the new behavior (if this is a feature change)?

    opened by kadiryazici 2
  • Update Readme and Typos

    Update Readme and Typos

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
      • Refactoring, docs
    opened by kadiryazici 2
  • Add Transition Support

    Add Transition Support

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Feature
    • What is the current behavior? (You can also link to an open issue here)

      • User cannot define or disable transition.
    • What is the new behavior (if this is a feature change)?

      • Now user can disable or set a custom transition.
    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

      • No
    • Other information: None

    opened by kadiryazici 2
  • Add eslint, update package.json

    Add eslint, update package.json

    • Please check if the PR fulfills these requirements
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)
    • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

      • Code Refactoring
    • What is the current behavior? (You can also link to an open issue here)

      • The code written with prettier only, no linter is used.
    • What is the new behavior (if this is a feature change)?

      • Now code follows specific linter rules, some of them are disabled for need.
    • Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

      • No
    • Other information:

      • All eslint errors are fixed, no new feature.
    opened by kadiryazici 2
Releases(0.7.0)
Owner
Wope
🔮 Track the results of your marketing efforts without help of any expert.
Wope
HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

Evandro C. Severgnini 0 Aug 10, 2021
Survey builder for vue.js applications

vue-survey-builder This is a survey builder component for vue.js applications. How to install You can install the component using npm i -S vue-survey-

null 104 Aug 10, 2022
Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Rogério Taques 10 Sep 19, 2022
A framework for building VR applications with Vue

A Wrapper of Panolens for building VR applications with Vue based on threejs

Mudin Ibrahim 445 Sep 30, 2022
Lexical components and composables for Vue applications.

lexical-vue Note: Lexical is currently in early development and APIs and packages are likely to change quite often. Lexical components and composables

Robert Soriano 97 Oct 6, 2022
Handling Google sign-in and sign-out for Vue.js applications

vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications. This package is updated to support detection of disabled cookies. This

JunGroupProductions 0 Jan 11, 2021
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 647 Oct 4, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 150 Sep 24, 2022
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Imperva 11 Mar 22, 2022
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Padmanabh Dabke 0 Jan 22, 2021
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

Jeongwoo Ahn 44 Sep 28, 2022
A fullscreen components for vue2, supports single page applications

Quick start @hyhello/vue-fullscreen The @hyhello/vue-fullscreen component for vue2, supports single page applications.

Hyhello 2 Mar 28, 2022
The word highlighter library for Vue 2 and Vue 3.

The word highlighter library for Vue 2 & Vue 3. Demo CodeSandbox ?? Installation Vue 3 yarn add vue-word-highlighter # or npm install vue-word-highlig

ryo 96 Sep 27, 2022
Vue.js clipboard library (no dependencies, less than 2kb)

Vue.js Clipboard Install npm install --save v-clipboard import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard) Using When an el

Yev Vlasenko 478 Aug 27, 2022
Text highlighter library for Vue.js :lipstick:

See working example here. Installation npm install --save vue-text-highlight # or yarn add vue-text-highlight Usage Basic Usage import Vue from 'vue';

Albert Lucianto 302 Sep 22, 2022
Vue.js library for handling REST service requests and model definitions.

Vue service model Vue.js Library for handling REST service requests with caching, aggregation and model definitions. Features Define models and easily

null 19 Jan 15, 2022
Vue 3 Wrapper of smooth-dnd library.

vue3-smooth-dnd Vue 3 Wrapper of smooth-dnd library. Live demo NOTE: This is a Vue 3 wrapper over smooth-dnd library. It's a fork of the already done

Gilbert Ndresaj 78 Sep 25, 2022
Qiskit components library for Vue.

Qiskit components library for Vue.

Qiskit Community 5 Mar 4, 2022
Based on the docs to provide code prompt files for vue component library

components-helper Based on the documents to provide code prompt files for vue component library Reference documents format reference test files Change

qiang 12 Sep 10, 2022