@sit-onyx/nuxt-docs 1.0.0-beta.105 → 1.0.0-beta.107

package/app/components/ColorSchemeSwitch.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { iconCircleContrast } from "@sit-onyx/icons";
+import type { ColorSchemeValue } from "sit-onyx";
+
+const colorMode = useColorMode();
+const isColorSchemeDialogOpen = ref(false);
+
+const colorScheme = computed({
+  get: () => {
+    return colorMode.preference === "system" ? "auto" : (colorMode.preference as ColorSchemeValue);
+  },
+  set: (newValue) => {
+    colorMode.preference = newValue === "auto" ? "system" : newValue;
+  },
+});
+</script>
+
+<template>
+  <OnyxIconButton
+    label="Toggle color scheme"
+    :icon="iconCircleContrast"
+    color="neutral"
+    @click="isColorSchemeDialogOpen = true"
+  />
+
+  <OnyxColorSchemeDialog v-model="colorScheme" v-model:open="isColorSchemeDialogOpen" />
+</template>

package/app/components/LocaleSwitch.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { iconTranslate } from "@sit-onyx/icons";
+import type { SelectDialogOption } from "sit-onyx";
+
+const { locale, setLocale, locales } = useI18n();
+const isLanguageDialogOpen = ref(false);
+
+const languageOptions = computed(() => {
+  return locales.value.map((locale) => {
+    return {
+      label: locale.name ?? locale.code,
+      value: locale.code,
+    } satisfies SelectDialogOption;
+  });
+});
+
+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();
+});
+</script>
+
+<template>
+  <OnyxButton
+    :label="currentLocaleLabel"
+    :icon="iconTranslate"
+    color="neutral"
+    mode="plain"
+    @click="isLanguageDialogOpen = true"
+  />
+
+  <OnyxSelectDialog
+    v-model:open="isLanguageDialogOpen"
+    :label="$t('onyx.languageSelect.headline')"
+    :model-value="locale"
+    :options="languageOptions"
+    @update:model-value="setLocale($event)"
+  >
+    <template #description> {{ $t("onyx.languageSelect.subtitle") }} </template>
+  </OnyxSelectDialog>
+</template>

package/app/components/NavBar.vue

@@ -1,82 +1,47 @@
 <script setup lang="ts">
-import { iconCircleContrast, iconTranslate } from "@sit-onyx/icons";
-import { extractLinkProps, type ColorSchemeValue, type SelectDialogOption } from "sit-onyx";
+import type { OnyxNavBarProps, OnyxNavBarSlots } from "sit-onyx";
+import ColorSchemeSwitch from "./ColorSchemeSwitch.vue";
 
-const { onyxDocs } = useAppConfig();
-const router = useRouter();
-const colorMode = useColorMode();
-
-const isColorSchemeDialogOpen = ref(false);
-
-const colorScheme = computed({
-  get: () => {
-    return colorMode.preference === "system" ? "auto" : (colorMode.preference as ColorSchemeValue);
-  },
-  set: (newValue) => {
-    colorMode.preference = newValue === "auto" ? "system" : newValue;
-  },
+const props = withDefaults(defineProps<OnyxNavBarProps>(), {
+  appName: "Documentation",
+  withBackButton: true,
 });
 
-const { locale, setLocale, locales } = useI18n();
-const localePath = useLocalePath();
-const isLanguageDialogOpen = ref(false);
+const slots = defineSlots<OnyxNavBarSlots>();
 
-const languageOptions = computed(() => {
-  return locales.value.map((locale) => {
-    return {
-      label: locale.name ?? locale.code,
-      value: locale.code,
-    } satisfies SelectDialogOption;
-  });
-});
-
-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 router = useRouter();
+const { locales } = useI18n();
+const localePath = useLocalePath();
 </script>
 
 <template>
   <OnyxNavBar
-    :app-area="{ link: localePath('/') }"
-    v-bind="onyxDocs.nav"
+    v-bind="props"
+    :app-area="props.appArea ?? { link: localePath('/') }"
     @navigate-back="router.back"
   >
-    <NavItem
-      v-for="item in onyxDocs.nav?.items"
-      :key="extractLinkProps(item.link ?? '').href"
-      v-bind="item"
-    />
+    <!-- eslint-disable vue/require-explicit-slots -- slots type is imported from onyx but eslint does not seem to be able to handle this -->
+    <template v-if="slots.appArea" #appArea>
+      <slot name="appArea"></slot>
+    </template>
 
-    <template #contextArea>
-      <template v-if="locales.length > 1">
-        <OnyxButton
-          :label="currentLocaleLabel"
-          :icon="iconTranslate"
-          color="neutral"
-          mode="plain"
-          @click="isLanguageDialogOpen = true"
-        />
+    <slot></slot>
 
-        <OnyxSelectDialog
-          v-model:open="isLanguageDialogOpen"
-          :label="$t('onyx.languageSelect.headline')"
-          :model-value="locale"
-          :options="languageOptions"
-          @update:model-value="setLocale($event)"
-        >
-          <template #description> {{ $t("onyx.languageSelect.subtitle") }} </template>
-        </OnyxSelectDialog>
-      </template>
+    <template v-if="slots.globalContextArea" #globalContextArea>
+      <slot name="globalContextArea"></slot>
+    </template>
 
-      <OnyxIconButton
-        label="Toggle color scheme"
-        :icon="iconCircleContrast"
-        color="neutral"
-        @click="isColorSchemeDialogOpen = true"
-      />
+    <template v-if="slots.mobileActivePage" #mobileActivePage>
+      <slot name="mobileActivePage"></slot>
     </template>
 
-    <OnyxColorSchemeDialog v-model="colorScheme" v-model:open="isColorSchemeDialogOpen" />
+    <template #contextArea>
+      <slot name="contextArea">
+        <!-- using lazy here so the locale switch code is not loaded when only one locale exists -->
+        <LazyLocaleSwitch v-if="locales.length > 1" />
+        <ColorSchemeSwitch />
+      </slot>
+    </template>
+    <!-- eslint-enable vue/require-explicit-slots -->
   </OnyxNavBar>
 </template>

package/app/error.vue

@@ -6,9 +6,23 @@ const props = defineProps<{
   error: NuxtError;
 }>();
 
+defineSlots<{
+  /**
+   * Slot to override the default "Back to home" action(s).
+   *
+   * @params clearError - Function to clear the error and redirect to the home page
+   */
+  actions?(props: { clearError: typeof _clearError }): unknown;
+  /**
+   * Slot to override the error details section.
+   * By default, an accordion will be displayed that shows the technical error details.
+   */
+  details?(): unknown;
+}>();
+
 const localePath = useLocalePath();
 
-const handleError = () => clearError({ redirect: localePath("/") });
+const _clearError = () => clearError({ redirect: localePath("/") });
 </script>
 
 <template>
@@ -18,15 +32,20 @@ const handleError = () => clearError({ redirect: localePath("/") });
 
       <div class="error__headline">
         <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
-        <OnyxButton label="Back to home" @click="handleError" />
+
+        <slot name="actions" :clear-error="_clearError">
+          <OnyxButton label="Back to home" @click="_clearError" />
+        </slot>
       </div>
 
-      <OnyxAccordion>
-        <OnyxAccordionItem value="details">
-          <template #header>Technical error details</template>
-          <pre class="error__details">{{ props.error }}</pre>
-        </OnyxAccordionItem>
-      </OnyxAccordion>
+      <slot name="details">
+        <OnyxAccordion>
+          <OnyxAccordionItem value="details">
+            <template #header>Technical error details</template>
+            <pre class="error__details">{{ JSON.stringify(props.error, null, 2) }}</pre>
+          </OnyxAccordionItem>
+        </OnyxAccordion>
+      </slot>
     </div>
   </App>
 </template>

package/nuxt.config.ts

@@ -1,5 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  $meta: {
+    // the name is used to generate import aliases so the user can easily import
+    // any component or file from this layer from "#layers/onyx"
+    // see: https://nuxt.com/docs/4.x/guide/going-further/layers#named-layer-aliases
+    name: "onyx",
+  },
   devtools: { enabled: true },
   compatibilityDate: "2025-01-20",
   typescript: { typeCheck: "build" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "1.0.0-beta.105",
+  "version": "1.0.0-beta.107",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -31,8 +31,8 @@
     "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.0.0-beta.24",
-    "@sit-onyx/nuxt": "^1.0.0-beta.290",
-    "sit-onyx": "^1.0.0-beta.290"
+    "@sit-onyx/nuxt": "^1.0.0-beta.291",
+    "sit-onyx": "^1.0.0-beta.291"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -47,10 +47,10 @@
     "sass-embedded": "1.90.0",
     "typescript": "5.9.2",
     "vue": "3.5.18",
+    "@sit-onyx/nuxt": "^1.0.0-beta.291",
+    "@sit-onyx/icons": "^1.0.0-beta.24",
     "@sit-onyx/shared": "^1.0.0-beta.4",
-    "@sit-onyx/nuxt": "^1.0.0-beta.290",
-    "sit-onyx": "^1.0.0-beta.290",
-    "@sit-onyx/icons": "^1.0.0-beta.24"
+    "sit-onyx": "^1.0.0-beta.291"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",

package/app/app.config.ts

@@ -1,32 +0,0 @@
-import type { OnyxNavBarProps, OnyxNavItemProps } from "sit-onyx";
-
-// TYPES
-declare module "@nuxt/schema" {
-  interface AppConfigInput {
-    onyxDocs?: OnyxAppConfig;
-  }
-
-  interface AppConfig {
-    onyxDocs: OnyxAppConfig & typeof defaultAppConfig;
-  }
-}
-
-export type OnyxAppConfig = {
-  nav?: Partial<OnyxNavBarProps> & {
-    items?: NavItem[];
-  };
-};
-
-export type NavItem = OnyxNavItemProps & { children?: NavItem[] };
-
-// CONFIG
-const defaultAppConfig = {
-  nav: {
-    appName: "Documentation",
-    withBackButton: true,
-  },
-} satisfies OnyxAppConfig;
-
-export default defineAppConfig({
-  onyxDocs: defaultAppConfig,
-});

package/app/components/NavItem.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { extractLinkProps } from "sit-onyx";
-import type { NavItem } from "../app.config";
-
-const props = defineProps<NavItem>();
-
-const localePath = useLocalePath();
-
-/**
- * Same as `props` but without the `children` property to prevent console warnings when using `v-bind`.
- */
-const navItemProps = computed(() => {
-  const { children: _, ...rest } = props;
-  return rest;
-});
-
-/**
- * Nav item link depending on the current locale / i18n.
- */
-const localeLink = computed(() => {
-  if (!props.link) return;
-  const _link = extractLinkProps(props.link);
-  return { ..._link, href: localePath(_link.href) };
-});
-</script>
-
-<template>
-  <OnyxNavItem v-bind="navItemProps" :link="localeLink">
-    <template v-if="props.children?.length" #children>
-      <NavItem v-for="child in props.children" :key="child.label" v-bind="child" />
-    </template>
-  </OnyxNavItem>
-</template>