@sit-onyx/nuxt-docs 0.7.0-dev-20260513151913 → 0.7.0-dev-20260518083349

package/app/components/GlobalSearch.vue

@@ -21,6 +21,12 @@ const props = defineProps<{
    * @see https://content.nuxt.com/docs/utils/query-collection-search-sections#api
    */
   options?: Parameters<typeof queryCollectionSearchSections>[1];
+  /**
+   * List of collections to include in the search.
+   *
+   * @default "content_{locale}" where `{locale}` is replaced with the current i18n locale.
+   */
+  collections?: (keyof Collections)[];
 }>();
 
 const { t, locale, locales } = useI18n();
@@ -32,11 +38,21 @@ watch(isOpen, (open) => {
   if (!open) searchTerm.value = "";
 });
 
+const collections = computed<(keyof Collections)[]>(() => {
+  if (props.collections) return props.collections;
+  return [`content_${locale.value}` as keyof Collections];
+});
+
 const { data, status } = await useLazyAsyncData(
-  () => `search-sections-${locale.value}-${props.options}`,
-  () => {
-    const collection = `content_${locale.value}` as keyof Collections;
-    return queryCollectionSearchSections(collection, props.options);
+  () => `search-sections-${collections.value.join("-")}-${props.options}`,
+  async () => {
+    const sections = await Promise.all(
+      collections.value.map((collection) => {
+        return queryCollectionSearchSections(collection, props.options);
+      }),
+    );
+
+    return sections.flatMap((section) => section);
   },
 );
 

package/app/components/NestableSidebarItem.vue

@@ -1,9 +1,16 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="TItem extends SidebarNavigationItem">
 import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
 import type { SidebarItemProps } from "./SidebarItem.vue";
 
 const props = defineProps<{
-  item: SidebarNavigationItem;
+  item: TItem;
+}>();
+
+const slots = defineSlots<{
+  /**
+   * Additional trailing content to display on the right.
+   */
+  trailing?(props: { item: TItem }): unknown;
 }>();
 
 const route = useRoute();
@@ -54,7 +61,11 @@ const { icon } = useIcon(computed(() => props.item.icon));
     v-if="!props.item.children?.length"
     class="sidebar-item"
     v-bind="getSidebarItemProps(props.item)"
-  />
+  >
+    <template v-if="slots.trailing" #trailing>
+      <slot name="trailing" :item="props.item"></slot>
+    </template>
+  </SidebarItem>
 
   <OnyxAccordion
     v-else
@@ -83,7 +94,11 @@ const { icon } = useIcon(computed(() => props.item.icon));
           :show-arrow="
             getSidebarItemProps(child).showArrow || getSidebarItemProps(props.item).showArrow
           "
-        />
+        >
+          <template v-if="slots.trailing" #trailing>
+            <slot name="trailing" :item="child as TItem"></slot>
+          </template>
+        </SidebarItem>
       </div>
     </OnyxAccordionItem>
   </OnyxAccordion>

package/app/components/SidebarItem.vue

@@ -15,19 +15,47 @@ export type SidebarItemProps = {
 
 const props = defineProps<SidebarItemProps>();
 
+const slots = defineSlots<{
+  /**
+   * Additional trailing content to display on the right.
+   */
+  trailing?(): unknown;
+}>();
+
 const { icon } = useIcon(computed(() => props.icon));
 </script>
 
 <template>
   <OnyxSidebarItem class="sidebar-item" :link="props.link">
-    <OnyxIcon v-if="icon" :icon />
-    {{ props.label }}
-    <OnyxIcon v-if="props.showArrow" :icon="iconArrowSmallRight" />
+    <div class="sidebar-item__content">
+      <OnyxIcon v-if="icon" :icon />
+      {{ props.label }}
+      <OnyxIcon v-if="props.showArrow" :icon="iconArrowSmallRight" />
+    </div>
+
+    <div v-if="slots.trailing" class="sidebar-item__trailing onyx-density-compact">
+      <slot name="trailing"></slot>
+    </div>
   </OnyxSidebarItem>
 </template>
 
 <style lang="scss" scoped>
 .sidebar-item {
   margin: var(--onyx-density-2xs) var(--onyx-density-xs);
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &__content {
+    display: flex;
+    align-items: inherit;
+    gap: inherit;
+  }
+
+  &__trailing {
+    display: flex;
+    align-items: inherit;
+    gap: inherit;
+    flex-wrap: wrap;
+  }
 }
 </style>

package/app/composables/useSidebarNavigation.ts

@@ -1,15 +1,19 @@
 import { computed, useAsyncData, useI18n, useLocalePath, useRoute } from "#imports"; // since nuxt 4.3 the auto-imports don't work for this composable anymore; Might be related to https://github.com/nuxt/nuxt/issues/22342
 import type { Collections, ContentNavigationItem } from "@nuxt/content";
 
-export type SidebarNavigationItem = {
+export type SidebarNavigationItem<TCollection extends keyof Collections = keyof Collections> = {
   title: string;
   /**
    * Item path. Already localized for i18n with `useLocalePath`.
    */
   path: string;
   icon?: string;
-  children?: SidebarNavigationItem[];
+  children?: SidebarNavigationItem<TCollection>[];
   sidebar?: SidebarNavigationOptions;
+  /**
+   * Additional fields. Must be defined when calling `useSidebarNavigation()`.
+   */
+  fields?: Partial<Collections[TCollection]>;
 };
 
 /**
@@ -34,24 +38,33 @@ export type SidebarNavigationOptions = {
   collapsed?: boolean;
 };
 
-export type UseSidebarNavigationOptions = {
-  /**
-   * Collection name to use for querying the navigation.
-   */
-  collection: Ref<keyof Collections>;
-};
+export type UseSidebarNavigationOptions<TCollection extends keyof Collections = keyof Collections> =
+  {
+    /**
+     * Collection name to use for querying the navigation.
+     */
+    collection: Ref<TCollection>;
+    /**
+     * Additional fields to include.
+     */
+    fields?: (keyof Collections[TCollection])[];
+  };
 
 /**
  * Composable for querying and mapping the navigation items for a given collection.
  */
-export const useSidebarNavigation = async (options: UseSidebarNavigationOptions) => {
+export const useSidebarNavigation = async <
+  TCollection extends keyof Collections = keyof Collections,
+>(
+  options: UseSidebarNavigationOptions<TCollection>,
+) => {
   const { locale } = useI18n();
   const localePath = useLocalePath();
   const route = useRoute();
 
   const { data } = await useAsyncData(
     () => `navigation-${options.collection.value}-${locale.value}`,
-    () => queryCollectionNavigation(options.collection.value),
+    () => queryCollectionNavigation(options.collection.value, options.fields),
     { default: () => [] },
   );
 
@@ -60,13 +73,23 @@ export const useSidebarNavigation = async (options: UseSidebarNavigationOptions)
    */
   const allItems = computed(() => {
     // map the items from "@nuxt/content" to our custom data scheme for better type support
-    const mapItem = (item: ContentNavigationItem): SidebarNavigationItem => {
+    const mapItem = (item: ContentNavigationItem): SidebarNavigationItem<TCollection> => {
+      const fields = options.fields?.reduce(
+        (obj, field) => {
+          const extraFieldValue = item[field as keyof typeof item];
+          obj[field] = extraFieldValue as Collections[TCollection][typeof field];
+          return obj;
+        },
+        {} as Collections[TCollection],
+      );
+
       return {
         title: item.title,
         path: localePath(item.path),
         children: item.children?.map(mapItem),
         sidebar: item.sidebar && typeof item.sidebar === "object" ? item.sidebar : undefined,
         icon: item.icon && typeof item.icon === "string" ? item.icon : undefined,
+        fields,
       };
     };
 
@@ -91,9 +114,9 @@ export const useSidebarNavigation = async (options: UseSidebarNavigationOptions)
    * that contains the `currentPath` within its subtree.
    */
   function findDeepestRoot(
-    items: SidebarNavigationItem[],
+    items: SidebarNavigationItem<TCollection>[],
     currentPath: string,
-  ): SidebarNavigationItem | undefined {
+  ): SidebarNavigationItem<TCollection> | undefined {
     /** Helper function to check if a path exists anywhere in a node's subtree */
     const containsPath = (node: SidebarNavigationItem, path: string): boolean => {
       if (node.path === path) return true;
@@ -125,10 +148,10 @@ export const useSidebarNavigation = async (options: UseSidebarNavigationOptions)
    * @param rootStack - (Internal) Accumulator for recursion
    */
   function findPreviousRootItem(
-    items: SidebarNavigationItem[],
+    items: SidebarNavigationItem<TCollection>[],
     currentPath: string,
-    rootStack: SidebarNavigationItem[] = [],
-  ): SidebarNavigationItem | undefined {
+    rootStack: SidebarNavigationItem<TCollection>[] = [],
+  ): SidebarNavigationItem<TCollection> | undefined {
     for (const item of items) {
       const isRoot = item.sidebar?.root === true;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.7.0-dev-20260513151913",
+  "version": "0.7.0-dev-20260518083349",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -35,7 +35,7 @@
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.9.1",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.14.0-dev-20260513151913"
+    "sit-onyx": "^1.14.0-dev-20260518083349"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": "^5.2.7",
@@ -43,17 +43,17 @@
     "@nuxt/content": "^3.13.0",
     "@nuxt/test-utils": "^4.0.3",
     "@nuxtjs/color-mode": "^4.0.0",
-    "@nuxtjs/mdc": "~0.21.1",
-    "@playwright/experimental-ct-vue": "1.59.1",
-    "@playwright/test": "1.59.1",
-    "nuxt": "4.4.4",
+    "@nuxtjs/mdc": "~0.22.0",
+    "@playwright/experimental-ct-vue": "1.60.0",
+    "@playwright/test": "1.60.0",
+    "nuxt": "4.4.5",
     "sass-embedded": "1.99.0",
     "typescript": "5.9.3",
     "vue": "3.5.34",
     "@sit-onyx/icons": "^1.9.1",
     "@sit-onyx/nuxt": "^1.0.1",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.14.0-dev-20260513151913"
+    "sit-onyx": "^1.14.0-dev-20260518083349"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",