feat(ui): enable links on Popover items

front/src/components/ui/popover/PopoverItem.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
+import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { POPOVER_CONTEXT_INJECTION_KEY, type PopoverContext } from '~/injection-keys'
 
 const emit = defineEmits<{'internal:id': [value: number]}>()
 
-const { parentPopoverContext } = defineProps<{ parentPopoverContext?: PopoverContext }>()
+const { parentPopoverContext, to } = defineProps<{
+  parentPopoverContext?: PopoverContext;
+  to?:RouterLinkProps['to'];
+}>()
 const { items, hoveredItem } = parentPopoverContext ?? inject(POPOVER_CONTEXT_INJECTION_KEY, {
   items: ref(0),
   hoveredItem: ref(-2)
@@ -15,10 +19,30 @@ emit('internal:id', id)
 </script>
 
 <template>
-  <div
+  <a v-if="to && typeof to === 'string' && to.startsWith('http')"
+    :href="to.toString()"
+    class="popover-item"
+    target="_blank"
+  >
+    <slot />
+
+    <div class="after" />
+    <slot name="after" />
+  </a>
+  <RouterLink v-else-if="to"
+    :to="to"
+    class="popover-item"
+    @mouseover="hoveredItem = id"
+  >
+    <slot />
+
+    <div class="after" />
+    <slot name="after" />
+  </RouterLink>
+  <div v-else
     @mouseover="hoveredItem = id"
     class="popover-item"
-    >
+  >
     <slot />
 
     <div class="after" />

front/ui-docs/components/ui/popover.md

@@ -449,6 +449,10 @@ const open = ref(false)
   </template>
 </Popover>
 
+## Links
+
+You can use `PopoverItem`s as Links by providing a `to` prop with the route object or and external Url (`http...`). Read more on the [Link component](./link) page.
+
 ## Menu
 
 Here is an example of a completed menu containing all supported features.