@rovit/popper v3.9.0

@rovit/popper

The @rovit/popper utility is based on Popper.js 2.x and comes with a usePopper utility that's meant to be used with the Vue Composition API.

Here's the basic example from Storybook:

<script>
import { ref } from 'vue'
import { usePopper } from './use-popper'

export default {
  name: 'Popper',
  props: {},
  setup(props, context) {
    const theButton = ref(null)
    const thePopup = ref(null)
    const popper = usePopper(theButton, thePopup)

    return {
      theButton,
      thePopup,
      popper
    }
  }
}
</script>

<template>
  <div class="flex flex-row items-center justify-center h-64">
    <button
      ref="theButton"
      type="button"
      class="px-2 py-1 text-white bg-purple-700 rounded"
      @click="popper.toggle"
    >
      Click me to toggle the popper
    </button>
    <div v-show="popper.isVisible" ref="thePopup" class="w-64">
      <div class="p-3 text-center bg-gray-400 border-gray-500 rounded">
        This is the popper
      </div>
    </div>
  </div>
</template>

Setup

To create a popper, make sure you've accomplished all of the following:

1. Install the module and import it into your component.
2. Create an element with a ref that represents the button or item that will trigger the popper to open. It's usually simplest to use camelCase style naming, which simplifies the next step. (underscored values would work, too)
3. Create an element with a ref that represents the popup menu that will open.
4. In your component's setup function, create two ref variables named the same as the ref you put on each of the above elements.
5. Pass the two variables into the usePopper utility. const popper = usePopper(theButton, thePopup)
6. Return the popper and the two ref variables at the end of the setup function.
7. Attach event handlers to open, close, or toggle the popper.

API

The @rovit/popper accepts the exact same arguments as the createPopper utility from @popperjs/core. See the documentation, here: https://popper.js.org/docs/v2/constructors/. Below is a summary of the options, since they're kind of scattered all over the Popper.js documentation site.