@sit-onyx/nuxt-docs 0.1.0-dev-20251112123258 → 0.1.0-dev-20251112124157

package/app/components/ColorSchemeSwitch.vue

@@ -2,6 +2,13 @@
 import { iconCircleContrast } from "@sit-onyx/icons";
 import type { ColorSchemeValue } from "sit-onyx";
 
+defineSlots<{
+  /**
+   * Optional slot to override the trigger slot.
+   */
+  default?(props: { trigger: typeof trigger }): unknown;
+}>();
+
 const colorMode = useColorMode();
 const isColorSchemeDialogOpen = ref(false);
 
@@ -13,15 +20,21 @@ const colorScheme = computed({
     colorMode.preference = newValue === "auto" ? "system" : newValue;
   },
 });
+
+const trigger = {
+  onClick: () => (isColorSchemeDialogOpen.value = true),
+};
 </script>
 
 <template>
-  <OnyxIconButton
-    label="Toggle color scheme"
-    :icon="iconCircleContrast"
-    color="neutral"
-    @click="isColorSchemeDialogOpen = true"
-  />
+  <slot :trigger>
+    <OnyxIconButton
+      :label="$t('onyx.colorScheme.headline')"
+      :icon="iconCircleContrast"
+      color="neutral"
+      v-bind="trigger"
+    />
+  </slot>
 
   <OnyxColorSchemeDialog v-model="colorScheme" v-model:open="isColorSchemeDialogOpen" />
 </template>

package/app/components/GlobalSearch.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import {
+  iconCircleContrast,
+  iconFile,
+  iconSearch,
+  iconToolText,
+  iconTranslate,
+} from "@sit-onyx/icons";
+import { mergeVueProps, normalizedIncludes, type OnyxGlobalSearchOptionProps } from "sit-onyx";
+
+type SearchGroup = {
+  label: string;
+  options: OnyxGlobalSearchOptionProps[];
+};
+
+const { t, locale, locales } = useI18n();
+const localePath = useLocalePath();
+
+const isOpen = ref(false);
+const searchTerm = ref("");
+watch(isOpen, (open) => {
+  if (!open) searchTerm.value = "";
+});
+
+const { data, status } = await useLazyAsyncData(
+  () => `search-sections-${locale.value}`,
+  () => {
+    const collection = `content_${locale.value}` as const;
+    return queryCollectionSearchSections(collection);
+  },
+);
+
+const searchResults = computed<SearchGroup[]>(() => {
+  const map = new Map<string, OnyxGlobalSearchOptionProps[]>();
+
+  data.value?.forEach((section) => {
+    const parent =
+      section.level === 1
+        ? section.title
+        : (section.titles.at(0) ?? t("onyx.globalSearch.searchResults"));
+    const options = map.get(parent) ?? [];
+
+    let icon = iconToolText;
+    if (section.level === 1) icon = iconFile;
+
+    const option: OnyxGlobalSearchOptionProps = {
+      label: section.content ? `${section.title} > ${section.content}` : section.title,
+      value: section.id,
+      link: localePath(section.id),
+      icon,
+    };
+
+    // prevent duplicates
+    if (options.find((o) => o.value === option.value) || (section.level === 1 && options.length))
+      return;
+
+    options.push(option);
+    map.set(parent, options);
+  });
+
+  const groups = map
+    .entries()
+    .toArray()
+    .map<SearchGroup>(([label, options]) => ({ label, options }));
+
+  // add custom system wide actions
+  groups.push({
+    label: t("onyx.globalSearch.system"),
+    options: [
+      { label: t("onyx.languageSelect.headline"), value: "locale", icon: iconTranslate },
+      { label: t("onyx.colorScheme.headline"), value: "colorScheme", icon: iconCircleContrast },
+    ],
+  });
+
+  return groups;
+});
+
+const filteredSearchResults = computed(() => {
+  // if no search term is entered, we want to show all results so the search is never empty
+  if (!searchTerm.value) return searchResults.value;
+
+  return searchResults.value
+    .map<SearchGroup>((group) => {
+      return {
+        ...group,
+        options: group.options.filter((option) =>
+          normalizedIncludes(option.label, searchTerm.value),
+        ),
+      };
+    })
+    .filter((group) => group.options.length);
+});
+</script>
+
+<template>
+  <OnyxIconButton
+    :label="$t('onyx.globalSearch.label')"
+    :icon="iconSearch"
+    color="neutral"
+    @click="isOpen = true"
+  />
+
+  <OnyxUnstableGlobalSearch
+    v-model="searchTerm"
+    v-model:open="isOpen"
+    :loading="status === 'pending'"
+  >
+    <template v-if="filteredSearchResults.length" #default>
+      <OnyxUnstableGlobalSearchGroup
+        v-for="group in filteredSearchResults"
+        :key="group.label"
+        :label="group.label"
+        :skeleton="status === 'pending'"
+      >
+        <template v-for="option in group.options" :key="option.value">
+          <LazyLocaleSwitch v-if="option.value === 'locale' && locales.length > 1">
+            <template #default="{ trigger }">
+              <OnyxUnstableGlobalSearchOption v-bind="mergeVueProps(trigger, option)" />
+            </template>
+          </LazyLocaleSwitch>
+
+          <ColorSchemeSwitch v-else-if="option.value === 'colorScheme'">
+            <template #default="{ trigger }">
+              <OnyxUnstableGlobalSearchOption v-bind="mergeVueProps(trigger, option)" />
+            </template>
+          </ColorSchemeSwitch>
+
+          <OnyxUnstableGlobalSearchOption v-else v-bind="option" @click="isOpen = false" />
+        </template>
+      </OnyxUnstableGlobalSearchGroup>
+    </template>
+  </OnyxUnstableGlobalSearch>
+</template>

package/app/components/LocaleSwitch.vue

@@ -2,6 +2,13 @@
 import { iconTranslate } from "@sit-onyx/icons";
 import type { SelectDialogOption } from "sit-onyx";
 
+defineSlots<{
+  /**
+   * Optional slot to override the trigger slot.
+   */
+  default?(props: { trigger: typeof trigger }): unknown;
+}>();
+
 const { locale, setLocale, locales } = useI18n();
 const isLanguageDialogOpen = ref(false);
 
@@ -18,16 +25,22 @@ const currentLocaleLabel = computed(() => {
   // using "!" here is safe since splitting a string will always return at least one string in the returned array
   return locale.value.split("-")[0]!.split("_")[0]!.toUpperCase();
 });
+
+const trigger = {
+  onClick: () => (isLanguageDialogOpen.value = true),
+};
 </script>
 
 <template>
-  <OnyxButton
-    :label="currentLocaleLabel"
-    :icon="iconTranslate"
-    color="neutral"
-    mode="plain"
-    @click="isLanguageDialogOpen = true"
-  />
+  <slot :trigger>
+    <OnyxButton
+      :label="currentLocaleLabel"
+      :icon="iconTranslate"
+      color="neutral"
+      mode="plain"
+      v-bind="trigger"
+    />
+  </slot>
 
   <OnyxSelectDialog
     v-model:open="isLanguageDialogOpen"

package/app/components/NavBar.vue

@@ -29,8 +29,10 @@ const localePath = useLocalePath();
 
     <slot></slot>
 
-    <template v-if="slots.globalContextArea" #globalContextArea>
-      <slot name="globalContextArea"></slot>
+    <template #globalContextArea>
+      <slot name="globalContextArea">
+        <GlobalSearch />
+      </slot>
     </template>
 
     <template v-if="slots.mobileActivePage" #mobileActivePage>

package/app/layouts/sidebar.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ContentNavigationItem } from "@nuxt/content";
-import { iconSearch } from "@sit-onyx/icons";
-import { normalizedIncludes, type OnyxPageLayoutProps, type OnyxSidebarProps } from "sit-onyx";
+import { type OnyxPageLayoutProps, type OnyxSidebarProps } from "sit-onyx";
 
 const props = defineProps<
   OnyxPageLayoutProps & {
@@ -47,35 +46,7 @@ const navigation = await useAsyncData(
   },
 );
 
-const searchTerm = ref("");
-
-const allSidebarItems = computed(() => navigation.data.value ?? []);
-
-const filterItem = (
-  item: ContentNavigationItem,
-  search: string,
-): ContentNavigationItem | undefined => {
-  if (!item.children) {
-    return normalizedIncludes(item.title, search) ? item : undefined;
-  }
-
-  const children = item.children
-    .map((child) => filterItem(child, search))
-    .filter((child) => child != undefined);
-
-  if (!children.length) return undefined;
-  return { ...item, children };
-};
-
-const filteredSidebarItems = computed(() => {
-  if (!searchTerm.value) return allSidebarItems.value;
-
-  const items = allSidebarItems.value
-    .map((item) => filterItem(item, searchTerm.value))
-    .filter((item) => item != undefined);
-
-  return items;
-});
+const sidebarItems = computed(() => navigation.data.value ?? []);
 </script>
 
 <template>
@@ -86,29 +57,14 @@ const filteredSidebarItems = computed(() => {
         v-bind="props.sidebar"
         :label="$t('onyx.navigation.navigationHeadline')"
       >
-        <template #header>
-          <slot name="sidebarHeader">
-            <OnyxInput
-              v-model="searchTerm"
-              :label="$t('onyx.select.searchPlaceholder')"
-              hide-label
-              :placeholder="$t('onyx.select.searchPlaceholder')"
-            >
-              <template #leading>
-                <OnyxIcon :icon="iconSearch" />
-              </template>
-            </OnyxInput>
-          </slot>
+        <template v-if="slots.sidebarHeader" #header>
+          <slot name="sidebarHeader"> </slot>
         </template>
 
-        <slot name="sidebarBody" :items="filteredSidebarItems">
-          <SidebarItem
-            v-for="item in filteredSidebarItems"
-            :key="localePath(item.path)"
-            :item="item"
-          />
+        <slot name="sidebarBody" :items="sidebarItems">
+          <SidebarItem v-for="item in sidebarItems" :key="localePath(item.path)" :item="item" />
 
-          <OnyxEmpty v-if="!filteredSidebarItems.length" class="sidebar__empty">
+          <OnyxEmpty v-if="!sidebarItems.length" class="sidebar__empty">
             {{ $t("onyx.select.empty") }}
           </OnyxEmpty>
         </slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.1.0-dev-20251112123258",
+  "version": "0.1.0-dev-20251112124157",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -30,9 +30,9 @@
     "@nuxtjs/color-mode": ">= 3",
     "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.2.0-dev-20251112123258",
+    "@sit-onyx/icons": "^1.2.0-dev-20251112124157",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.4.0-dev-20251112123258"
+    "sit-onyx": "^1.4.0-dev-20251112124157"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -47,10 +47,10 @@
     "sass-embedded": "1.93.3",
     "typescript": "5.9.3",
     "vue": "3.5.23",
-    "@sit-onyx/icons": "^1.2.0-dev-20251112123258",
-    "@sit-onyx/nuxt": "^1.0.1",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.4.0-dev-20251112123258"
+    "@sit-onyx/nuxt": "^1.0.1",
+    "@sit-onyx/icons": "^1.2.0-dev-20251112124157",
+    "sit-onyx": "^1.4.0-dev-20251112124157"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",