# Install

```shell
npm i @vaadin/popover
npm i @mate/popover-addons
```

# Import

```vue
<script setup>
import { MatePopover } from '@mate/vue-popover';
import { Onboarding, OnboardingStep } from '@mate/popover-addons';
</script>
```

# Variants

## Default

```html
<a id="popover-target" href="#">Details anzeigen</a>
<vaadin-popover for="popover-target">
    <MateFacetList>
      <MateFacet keyText="Schlüssel">Wert</MateFacet>
      <MateFacet keyText="Weiterer Schlüssel">Weiterer Wert</MateFacet>
    </MateFacetList>
</vaadin-popover>
```

```javascript
document.querySelector('vaadin-popover').renderer = (root, popover, model) => root.innerHtml = `<p>Content</p>`;
```

## Onboarding

```html
    <h4 ref="target1">How to use Popup to create an onboarding experience</h4>
    <span ref="target2">The idea is to use the Popup component to create a simple Onboarding (also known as Walkthrough) experience for the user. A simple API was created as part of the component to make it easy to create such onboarding. There are two classes: Onboarding and OnboardingStep. To use it, create an instance of the Onboarding class and fill it with the OnboardingSteps. In the simplest form, you only have to provide three things for each OnboardingStep: a target element, a header text, and a content text.</span>
    <vaadin-button ref="target3">Some action</vaadin-button>
    <vaadin-button ref="onboardingStart" theme="primary">Start walkthrough</vaadin-button>
```

```javascript
const onboarding = new Onboarding();

  const step1 = {} as OnboardingStep;
  step1.renderer = ((root, _popover) => render(html`
  <h5>The feature is explained here</h5>
  <span>You can associate the Onboarding Step with any Component on the screen. Note: This popup is configured to show the walkthrough steps in the footer.</span>
`, root));
  step1.title = 'Welcome!';
  step1.targetElement = this.$refs.target1 as HTMLElement;

  const step2 = {} as OnboardingStep;
  step2.renderer = (root, _popover) => render(html`
  <h5>The feature is explained here</h5>
  <span>Popup for this step is positioned to the bottom of the target element.</span>
`, root);
  step2.title = 'Bottom positioned';
  step2.targetElement = this.$refs.target2 as HTMLElement;
  step2.position = 'bottom';

  const step3 = {} as OnboardingStep;
  step3.renderer = (root, _popover) => render(html`
  <h5>This step allows linking to other parts of the application</h5>
  <span>You can integrate links as well as CTA-Buttons in the explantation to nudge users to other onboarding activities so they are setup for success.</span>
  <vaadin-button>Another action</vaadin-button>
`, root);
  step3.title = 'Actions';
  step3.targetElement = this.$refs.target3 as HTMLElement;

  const step4 = {} as OnboardingStep;
  step4.renderer = (root, _popover) => render(html`
  <span>This onboarding step does not have any related target element</span>
`, root);
  step4.title = 'No target set';

  onboarding.steps = [ step1, step2, step3, step4 ];

  this.$refs.onboardingStart.addEventListener('click', e => onboarding.start());
```