# @soldeplata/popper-vue

> Popperjs implemented in a vue single file component

Latest version **1.0.5** (published 2023-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @soldeplata/popper-vue
pnpm add @soldeplata/popper-vue
yarn add @soldeplata/popper-vue
bun add @soldeplata/popper-vue
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-08-26 |
| First published | 2020-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 36.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | soldeplatadeveloper@gmail.com |
| Maintainers | soldeplata |
| Keywords | vue, popper, popperjs, popup, tooltip, vuejs |

## Links

- npm: https://www.npmjs.com/package/@soldeplata/popper-vue
- Repository: https://github.com/Silverium/popper-vue
- Homepage: https://github.com/Silverium/popper-vue#readme
- Issues: https://github.com/Silverium/popper-vue/issues
- npm.io page: https://npm.io/package/@soldeplata/popper-vue

## Dependencies (1)

- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.4.2

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-08-26
- 1.0.4 — 2020-06-26
- 1.0.3 — 2020-04-04
- 1.0.2 — 2020-03-08
- 1.0.1 — 2020-02-29
- 1.0.0 — 2020-02-23

## README

![Codecov](https://img.shields.io/codecov/c/gh/Silverium/popper-vue)
![npm](https://img.shields.io/npm/v/@soldeplata/popper-vue)
![npm peer dependency version](https://img.shields.io/npm/dependency-version/@soldeplata/popper-vue/peer/vue)
![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/Silverium/popper-vue/@popperjs/core)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@soldeplata/popper-vue)
![npm](https://img.shields.io/npm/dm/@soldeplata/popper-vue) 
 ![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@soldeplata/popper-vue)
![Node.js CI](https://github.com/Silverium/popper-vue/workflows/Node.js%20CI/badge.svg)

### Example
https://silverium.github.io/popper-vue/

# Popper for Vue
**Simple, powerful, configurable. Popper v2.x!!**

Positions a popup element close to the reference object.

It will always position itself automagically into a visible position. Supports adding an "arrow" element.

It relies in [@popper/core](https://www.npmjs.com/package/@popperjs/core) package.

## Install
#### yarn
  ```console
  yarn add @soldeplata/popper-vue
  ```
#### npm
  ```console
  npm i @soldeplata/popper-vue
  ```
## Usage

### VueJS single file component
```html
<script>
import PopperVue from '@soldeplata/popper-vue';

export default {
  components: {
    PopperVue,
  },
  ...
};
</script>
<template>
  ...
    <PopperVue
      :show="show"
      :options="options"
    >
      <button @click="show = !show">
        I have a popup on click
      </button>
      <template #popper>
        I am the popped element
      </template>
    </PopperVue>
  ...
</template>
```

## Props
| Prop              | Required | Type                    | Default   | Description                                                                                         |
|-------------------|----------|-------------------------|-----------|-----------------------------------------------------------------------------------------------------|
| show *OR* v-model | no       | `Boolean`               | false     | Toggles the popper element with a `v-show` directive (animations must take this into account)       |
| arrow             | no       | `Boolean`               | false     | Adds an arrow to the popped component (default background is transparent)                           |
| arrowClass        | no       | `Object, Array, String` | undefined | It's bound to `:class` of the arrow wrapper. Useful to set background color                         |
| options           | no       | `Object`                | undefined | Sets the options to the popper instance. [See popper documentation](https://popper.js.org/docs/v2/) |
| popperClass       | no       | `Object, Array, String` | undefined | It's bound to `:class` of the popper wrapper                                                        |

## Events
| Event   | Payload                        | Description                                                                                                     |
|---------|--------------------------------|-----------------------------------------------------------------------------------------------------------------|
| @popper | Instance from '@popperjs/core' | Emitted on mount. Popper native methods can be used. [See popper documentation](https://popper.js.org/docs/v2/) |
## Slots
| name    | Description                                                 |
|---------|-------------------------------------------------------------|
| default | Reference element over which the popup will be positioned   |
| popper  | Popper element that will be positioned around the Reference |

## Advanced example to build a tooltip
### Tooltip component
```html
<script lang="ts">
  import Vue from 'vue';
  import _ from 'lodash';
  import PopperVue from '@soldeplata/popper-vue';

  export default Vue.extend({
    name: 'TooltipExample',
    components: {
      PopperVue,
    },
    props: {
      show: {
        type: Boolean,
      },
      options: {
        type: Object,
        default: () => {},
      },
      boundaryId: {
        type: String,
      },
    },
    data() {
      return {
        tooltipOptions: _.merge(
          {
            placement: 'right',
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, 10], // separation from reference object
                },
              },
              {
                name: 'arrow',
                options: {
                  padding: 4, // 4px from the edges of the popper
                },
              },
            ],
          },
          this.options,
        ),
      };
    },

    mounted() {
      if (this.boundaryId) {
        const boundary =
          document.getElementById(this.boundaryId) ?? document.body;
        const boundaryModifier = {
          name: 'preventOverflow',
          options: {
            boundary,
            rootBoundary: 'document',
          },
        };
        this.tooltipOptions.modifiers.push(boundaryModifier);
      }
    },
  });
</script>

<template>
  <popper-vue
    popper-class="fade"
    arrow
    arrow-class="black-and-white"
    :show="show"
    :options="tooltipOptions"
  >
    <slot />
    <template #popper>
      <section class="black-and-white tooltip">
        <slot name="tooltip" />
      </section>
    </template>
  </popper-vue>
</template>

<style lang="scss">
  .fade {
    display: inherit !important; /* override v-show display: none */
    transition: opacity 0.3s;

    &[style*='display: none;'] {
      pointer-events: none; /* disable user interaction */
      user-select: none; /* disable user selection */
      opacity: 0;
    }
  }
  
  .black-and-white {
    color: white;
    background-color: black;
  }
  
  .tooltip {
    border-radius: 4px;
    padding: 8px;
  }
</style>
```
### Using the tooltip
```html
<script lang="ts">
  import Vue from 'vue';
  import Tooltip from './tooltip.vue';
  export default Vue.extend({
    components: {
      Tooltip,
    },
    data() {
      return {
        show: false,
      };
    },
  });
</script>

<template>
  <div>
    ...
    <article id="tooltipContainer">
      ...
      <Tooltip
        :show="show"
        boundary-id="tooltipContainer"
        :options="{ placement: 'auto-start' }"
        @mouseenter.native="() => (show = true)"
      >
        I have a tooltip activated on mouse enter
        <template #tooltip>
          <div @mouseleave="show = false">
            I am the tooltiped element, closed on mouse leave
          </div>
        </template>
      </Tooltip>
      ...
    </article>
    ...
  </div>
</template>
```

---
_Source: https://npm.io/package/@soldeplata/popper-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._