feat(Popover): add anchor slot

[J-Michalek]

🔗 Linked issue

Resolves: #4013

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I've added the #anchor slot to the Popover component to allow users to position the content to other elements.

Users requested the option to pass in an element that would be used as the anchor of the popover.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4119

commit: cc20ad8

[benjamincanac]

This doesn't seem to work when using an Input in the anchor slot as requested in the linked issue, the Popover gets closed automatically 🤔

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UPopover v-model:open="open">
    <template #anchor>
      <UInput placeholder="Search" class="w-56" @focus="open = true" />
    </template>

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

[J-Michalek]

This is definitely caused by RekaUI's DismissibleLayer component. I found several ways of making it work, but none of them seem ideal as they cause issues with closing the popover on blur of the input. I will show one of the ways and describe the other two:

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UPopover v-model:open="open"  :content="{ onFocusOutside: (e) => e.preventDefault() }">
    <template #anchor>
      <UInput placeholder="Search" class="w-56" @focus="open = true" />
    </template>

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </UPopover>
</template>

The other 2 ways I found were setting the :dismissible="false" or :modal="true" on the UPopover.

What would be the best way to handle this? Should I just show it in the example for the users or perhaps some other solution? Maybe this is something to handle upstream...

[benjamincanac]

I like the idea of showcasing the anchor slot with an Input, we can go with dismissible if it fixes the issue 😊

[J-Michalek]

I've updated the examples both in the docs and the playground. Seems to be working just fine, but the users will have to handle the closing logic by themselves...

[benjamincanac]

Thanks! 😊

[innocenzi]

Thank you all!