Popover ​

<script setup lang="ts">
import { ref } from 'vue';
import { Popover, PrimaryButton, TertiaryButton } from '@youcan/ui-vue3';
const show = ref(false);
</script>

<template>
  <Popover
    v-model:show="show"
    position="top"
    object-fit="cover"
    class="popover"
    @click-outside="show = false"
  >
    <template #title>
      Introducing Themes!
    </template>
    <template #description>
      <p class="mr-0">
        Introducing themes, a new way to make your store stand out
      </p>
    </template>
    <template #footer>
      <div class="actions">
        <PrimaryButton @click="show = false">
          Get started
        </PrimaryButton>
        <TertiaryButton @click="show = false">
          Later
        </TertiaryButton>
      </div>
    </template>
    <PrimaryButton @click="show = !show;">
      <span>Show Popover</span>
    </PrimaryButton>
  </Popover>
</template>