Popover Component For Vue 3 - popper

Install & Download:

# Yarn
$ yarn add vue3-popper
# NPM
$ npm i vue3-popper --save

Description:

A simple yet customizable and themeable popover component for Vue 3. Based on the known PopperJS library.

How to use it:

1. Import and register the component.

import { defineComponent } from "vue";
import Popper from "vue3-popper";
export default defineComponent({
  components: {
    Popper,
  },
});

2. Add the popover component to the template.

<template>
  <Popper>
    <button>Click me</button>
    <template #content>
      <div>This is the Popper content</div>
    </template>
  </Popper>
</template>

3. Available props to customize the popover component.

/**
 * Preferred placement (the "auto" placements will choose the side with most space.)
 */
placement: {
  type: String,
  default: "bottom",
  validator: function(value) {
    return [
      "auto",
      "auto-start",
      "auto-end",
      "top",
      "top-start",
      "top-end",
      "bottom",
      "bottom-start",
      "bottom-end",
      "right",
      "right-start",
      "right-end",
      "left",
      "left-start",
      "left-end",
    ].includes(value);
  },
},
/**
 * Disables automatically closing the popover when the user clicks away from it
 */
disableClickAway: {
  type: Boolean,
  default: false,
},
/**
 * Offset in pixels along the trigger element
 */
offsetSkid: {
  type: String,
  default: "0",
},
/**
 * Offset in pixels away from the trigger element
 */
offsetDistance: {
  type: String,
  default: "12",
},
/**
 * Trigger the popper on hover
 */
hover: {
  type: Boolean,
  default: false,
},
/**
 * Manually open/close the Popper, other events are ignored if this prop is set
 */
show: {
  type: Boolean,
  default: null,
},
/**
 * Disables the Popper. If it was already open, it will be closed.
 */
disabled: {
  type: Boolean,
  default: false,
},
/**
 * Open the Popper after a delay (ms).
 */
openDelay: {
  type: [Number, String],
  default: 0,
},
/**
 * Close the Popper after a delay (ms).
 */
closeDelay: {
  type: [Number, String],
  default: 0,
},
/**
 * The z-index of the Popper.
 */
zIndex: {
  type: [Number, String],
  default: 9999,
},
/**
 * Display an arrow on the popper
 */
arrow: {
  type: Boolean,
  default: false,
},
/**
 * Stop arrow from reaching the edge of the popper
 */
arrowPadding: {
  type: String,
  default: "0",
},
/**
 * If the Popper should be interactive, it will close when clicked/hovered if false
 */
interactive: {
  type: Boolean,
  default: true,
},
/**
 * Lock the Popper into place, it will not flip dynamically when it runs out of space if true
 */
locked: {
  type: Boolean,
  default: false,
},
/**
 * If the content is just a simple string, it can be passed in as a prop
 */
content: {
  type: String,
  default: null,
},

4. Events.