nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.96k stars 495 forks source link

ULink exactQuery, but only match the given ones #1905

Open MickL opened 3 months ago

MickL commented 3 months ago

Description

Lets say I have a page with multiple query params:

/products
/products?type=shirts
/products?type=shirts&page=2

And I have a menu that uses <ULink> or in my case <UVerticalNavigation>:

<NuxtLink to="/products">All</NuxtLink>
<NuxtLink :to="{path: '/products', query: { type: 'shirts' }">Shirts</NuxtLink>
<NuxtLink :to="{path: '/products', query: { type: 'pants' }">Pants</NuxtLink>

Now I can use prop exact-query to style the active link BUT as soon as I add a second query param, e.g. when navigation to page 2, the link is inactive:

/products?type=shirts -> OK
/products?type=shirts&page=2 -> Not active anymore
/products?type=shirts&color=red&page=3 -> Not active anymore

Therefor it would be great if there would be another exact-query prop that will make the link active if the given query params match and ignoring if there are any extra query params.

Additional context

No response

github-actions[bot] commented 3 days ago

This issue is stale because it has been open for 30 days with no activity.

MickL commented 3 days ago

Please dont close an unresolved issue