From 7162f496fa9c27fa624016ef670b98964d9651eb Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 23:15:31 +0100
Subject: [PATCH] feat(ui): enable links on Popover items

---
 .../src/components/ui/popover/PopoverItem.vue | 32 ++++++++++++++++---
 front/ui-docs/components/ui/popover.md        |  4 +++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/front/src/components/ui/popover/PopoverItem.vue b/front/src/components/ui/popover/PopoverItem.vue
index db65b51de..b31f9bf83 100644
--- a/front/src/components/ui/popover/PopoverItem.vue
+++ b/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" />
diff --git a/front/ui-docs/components/ui/popover.md b/front/ui-docs/components/ui/popover.md
index 83f0b56be..5466b5887 100644
--- a/front/ui-docs/components/ui/popover.md
+++ b/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.