From a6c22052e1c70e4ce6b2c7f783667a7f8c6cafa4 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Wed, 27 Nov 2024 14:27:47 +0100
Subject: [PATCH] fix(Link): partial query match for Vue (#2787)

---
 src/runtime/vue/components/Link.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/runtime/vue/components/Link.vue b/src/runtime/vue/components/Link.vue
index f383b0f5..335732c1 100644
--- a/src/runtime/vue/components/Link.vue
+++ b/src/runtime/vue/components/Link.vue
@@ -73,7 +73,7 @@ export interface LinkProps extends NuxtLinkProps {
   /** Will only be active if the current route is an exact match. */
   exact?: boolean
   /** Will only be active if the current route query is an exact match. */
-  exactQuery?: boolean
+  exactQuery?: boolean | 'partial'
   /** Will only be active if the current route hash is an exact match. */
   exactHash?: boolean
   /** The class to apply when the link is inactive. */
@@ -91,7 +91,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isEqual } from 'ohash'
+import { isEqual, diff } from 'ohash'
 import { useForwardProps } from 'radix-vue'
 import { reactiveOmit } from '@vueuse/core'
 import { hasProtocol } from 'ufo'
@@ -122,6 +122,16 @@ const ui = computed(() => tv({
   }
 }))
 
+function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added') {
+      filtered.push(q.key)
+    }
+    return filtered
+  }, [] as string[])
+  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+}
+
 const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
@@ -133,9 +143,12 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
     return false
   }
 
-  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
-    return false
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
+  } else if (props.exactQuery === true) {
+    if (!isEqual(linkRoute.query, route.query)) return false
   }
+
   if (props.exactHash && linkRoute.hash !== route.hash) {
     return false
   }