feat(navigation): allow passing QueryBuilder or QueryBuilderParams in fetchNavigation or <ContentNavigation>

docs/content/4.api/1.components/3.content-navigation.md

@@ -10,7 +10,7 @@ The `<ContentNavigation>`{lang=html} is a renderless component shortening the ac
 ## Props
 
 - `query`{lang=ts}: A query to be passed to `fetchContentNavigation()`.
-  - Type: `QueryBuilderParams`{lang=ts}
+  - Type: `QueryBuilderParams | QueryBuilder`{lang=ts}
   - Default: `undefined`{lang=ts}
 
 ## Slots
@@ -43,3 +43,35 @@ The `empty`{lang=ts} slot can be used to display a default content before render
   </nav>
 </template>
 ```
+
+## Query
+
+By providing the `query` prop you can customise the content used for navigation.
+
+Here we pass along a `QueryBuilder` instance.
+
+```vue
+<script setup>
+const catsQuery = queryContent('cats')
+/*
+// If you'd prefer to pass along raw `QueryBuilderParams`:
+const catsQuery = {
+  where: [
+    { _path: /^\/cats/ },
+  ],
+}
+*/
+</script>
+
+<template>
+<ContentNavigation v-slot="{ navigation }" :query="catsQuery">
+  <NuxtLink
+    v-for="link of navigation"
+    :key="link._path"
+    :to="link._path"
+  >
+    {{ link.navTitle || link.title }}
+  </NuxtLink>
+</ContentNavigation>
+</template>
+```

src/runtime/components/ContentNavigation.ts

@@ -1,6 +1,7 @@
-import { PropType, toRefs, defineComponent, h, useSlots } from 'vue'
+import { PropType, toRefs, defineComponent, h, useSlots, computed } from 'vue'
 import { hash } from 'ohash'
 import type { NavItem, QueryBuilderParams } from '../types'
+import { QueryBuilder } from '../types'
 import { useAsyncData, fetchContentNavigation } from '#imports'
 
 export default defineComponent({
@@ -9,7 +10,7 @@ export default defineComponent({
      * A query to be passed to `fetchContentNavigation()`.
      */
     query: {
-      type: Object as PropType<QueryBuilderParams>,
+      type: Object as PropType<QueryBuilderParams | QueryBuilder>,
       required: false,
       default: undefined
     }
@@ -19,9 +20,20 @@ export default defineComponent({
       query
     } = toRefs(props)
 
+    const queryBuilder = computed(() => {
+      /*
+       * We need to extract params from a possible QueryBuilder beforehand
+       * so we don't end up with a duplicate useAsyncData key.
+       */
+      if (typeof query.value.params === 'function') {
+        return query.value.params()
+      }
+      return query.value
+    })
+
     const { data, refresh } = await useAsyncData<NavItem[]>(
-      `content-navigation-${hash(query.value)}`,
-      () => fetchContentNavigation(query.value)
+      `content-navigation-${hash(queryBuilder.value)}`,
+      () => fetchContentNavigation(queryBuilder.value)
     )
 
     return {

test/fixtures/basic/pages/nav-with-query.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const catsQuery = queryContent('cats')
+const numbers = queryContent('numbers')
+const dogsQuery = {
+  where: [
+    { _path: /^\/dogs/ }
+  ]
+}
+</script>
+
+<template>
+  <ContentNavigation v-for="(q, key) in [dogsQuery, catsQuery, numbers]" v-slot="{ navigation }" :key="key" :query="q">
+    <div>
+      {{ navigation }}
+      <NuxtLink
+        v-if="navigation"
+        v-for="link of navigation[0].children"
+        :key="link._path"
+        :to="link._path"
+        style="margin-right: 1rem;"
+      >
+        {{ link.navTitle || link.title }}
+      </NuxtLink>
+    </div>
+    <br>
+  </ContentNavigation>
+</template>