@sit-onyx/nuxt-docs 0.2.0-dev-20260112110323 → 0.2.0-dev-20260113075525

package/app/components/NavBar.vue

@@ -4,7 +4,6 @@ import ColorSchemeSwitch from "./ColorSchemeSwitch.vue";
 
 const props = withDefaults(defineProps<OnyxNavBarProps>(), {
   appName: "Documentation",
-  withBackButton: true,
   // Vue defaults booleans to false so this explicit "undefined" is needed to correctly set the default breakpoint
   mobile: undefined,
 });

package/app/components/NestableSidebarItem.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
+
+const props = defineProps<{
+  item: SidebarNavigationItem;
+}>();
+
+const route = useRoute();
+
+const isAccordionOpen = ref(true);
+watch(
+  () => props.item.sidebar?.collapsed,
+  (collapsed) => {
+    isAccordionOpen.value = !collapsed;
+  },
+  { immediate: true },
+);
+
+const isChildActive = computed(() => {
+  const isActive = (item: SidebarNavigationItem): boolean => {
+    if (item.path === route.path) return true;
+    return item.children?.some(isActive) ?? false;
+  };
+
+  // ensure accordion is open if any child route is currently active
+  return props.item.children?.some(isActive) ?? false;
+});
+
+watch(
+  isChildActive,
+  (isActive) => {
+    // ensure accordion is open if any child route is currently active
+    // e.g. when reloading the page or navigating via global search
+    if (isActive) isAccordionOpen.value = true;
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <SidebarItem v-if="!props.item.children?.length" class="sidebar-item" :item="props.item" />
+
+  <OnyxAccordion
+    v-else
+    :model-value="isAccordionOpen ? [props.item.path] : undefined"
+    class="sidebar-accordion"
+    type="nested-large"
+    @update:model-value="isAccordionOpen = !isAccordionOpen"
+  >
+    <OnyxAccordionItem :value="props.item.path">
+      <template #header>
+        <div class="sidebar-accordion__header">
+          <ResolvableIcon v-if="props.item.icon" :name="props.item.icon" />
+          {{ props.item.title }}
+        </div>
+      </template>
+
+      <div class="sidebar-item__children">
+        <SidebarItem v-for="child in props.item.children" :key="child.path" :item="child" />
+      </div>
+    </OnyxAccordionItem>
+  </OnyxAccordion>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-item {
+  margin: var(--onyx-density-2xs) var(--onyx-density-xs);
+
+  &:first-of-type {
+    margin-top: var(--onyx-density-xs);
+  }
+
+  &__children {
+    display: flex;
+    flex-direction: column;
+    gap: var(--onyx-density-2xs);
+  }
+}
+
+.sidebar-accordion {
+  > .onyx-accordion-item {
+    :deep(> .onyx-accordion-item__panel) {
+      padding-top: 0;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--onyx-density-2xs);
+  }
+}
+</style>

package/app/components/PackageManagerCodeTabs.vue

@@ -29,10 +29,20 @@ const tabs = computed(() => {
 
   return tabs.filter((tab) => tab.code);
 });
+
+const getMDCValue = (code: string, language: string) => {
+  return `
+\`\`\`${language}
+${code}
+\`\`\`
+`;
+};
 </script>
 
 <template>
   <OnyxUnstableCodeTabs v-model="selectedTab">
-    <OnyxUnstableCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value" />
+    <OnyxUnstableCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value">
+      <MDC :value="getMDCValue(tab.code, tab.language)" />
+    </OnyxUnstableCodeTab>
   </OnyxUnstableCodeTabs>
 </template>

package/app/components/ResolvableIcon.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import * as ALL_ICONS from "@sit-onyx/icons";
+import { getIconImportName } from "@sit-onyx/icons/utils";
+
+const props = defineProps<{
+  /**
+   * Icon name that should be resolved.
+   */
+  name: string;
+}>();
+
+const icon = ref<string>();
+
+watch(
+  () => props.name,
+  (iconName) => {
+    icon.value = ALL_ICONS[getIconImportName(iconName) as keyof typeof ALL_ICONS];
+
+    if (import.meta.dev && !icon.value) {
+      // eslint-disable-next-line no-console -- used only during development environment
+      console.warn(`Dynamic icon with name "${iconName}" not found.`);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <OnyxIcon v-if="icon" :icon />
+</template>

package/app/components/SidebarItem.vue

@@ -1,86 +1,22 @@
 <script lang="ts" setup>
+import { iconArrowSmallRight } from "@sit-onyx/icons";
 import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
 
 const props = defineProps<{
-  item: SidebarNavigationItem;
+  item: Omit<SidebarNavigationItem, "children">;
 }>();
-
-const route = useRoute();
-
-const isAccordionOpen = ref(true);
-watch(
-  () => props.item.sidebar?.collapsed,
-  (collapsed) => {
-    isAccordionOpen.value = !collapsed;
-  },
-  { immediate: true },
-);
-
-const isChildActive = computed(() => {
-  const isActive = (item: SidebarNavigationItem): boolean => {
-    if (item.path === route.path) return true;
-    return item.children?.some(isActive) ?? false;
-  };
-
-  // ensure accordion is open if any child route is currently active
-  return props.item.children?.some(isActive) ?? false;
-});
-
-watch(
-  isChildActive,
-  (isActive) => {
-    // ensure accordion is open if any child route is currently active
-    // e.g. when reloading the page or navigating via global search
-    if (isActive) isAccordionOpen.value = true;
-  },
-  { immediate: true },
-);
 </script>
 
 <template>
-  <OnyxSidebarItem v-if="!props.item.children?.length" class="sidebar-item" :link="props.item.path">
+  <OnyxSidebarItem class="sidebar-item" :link="props.item.path">
+    <ResolvableIcon v-if="props.item.icon" :name="props.item.icon" />
     {{ props.item.title }}
+    <OnyxIcon v-if="props.item.sidebar?.root" :icon="iconArrowSmallRight" />
   </OnyxSidebarItem>
-
-  <OnyxAccordion
-    v-else
-    :model-value="isAccordionOpen ? [props.item.path] : undefined"
-    class="sidebar-accordion"
-    type="nested-large"
-    @update:model-value="isAccordionOpen = !isAccordionOpen"
-  >
-    <OnyxAccordionItem :value="props.item.path">
-      <template #header>{{ props.item.title }}</template>
-
-      <div class="sidebar-item__children">
-        <OnyxSidebarItem v-for="child in props.item.children" :key="child.path" :link="child.path">
-          {{ child.title }}
-        </OnyxSidebarItem>
-      </div>
-    </OnyxAccordionItem>
-  </OnyxAccordion>
 </template>
 
 <style lang="scss" scoped>
 .sidebar-item {
   margin: var(--onyx-density-2xs) var(--onyx-density-xs);
-
-  &:first-of-type {
-    margin-top: var(--onyx-density-xs);
-  }
-
-  &__children {
-    display: flex;
-    flex-direction: column;
-    gap: var(--onyx-density-2xs);
-  }
-}
-
-.sidebar-accordion {
-  > .onyx-accordion-item {
-    :deep(> .onyx-accordion-item__panel) {
-      padding-top: 0;
-    }
-  }
 }
 </style>

package/app/components/content/ProseTable.vue

@@ -5,18 +5,6 @@ const slots = defineSlots<{
   default(): VNode[];
 }>();
 
-/**
- * Extracts the table head and body as vnodes from the slot content.
- */
-const extractSlotContent = () => {
-  const [head, body] = slots.default();
-
-  return {
-    headRows: extractTableRows(head),
-    bodyRows: extractTableRows(body),
-  };
-};
-
 /**
  * Extracts all table rows `<tr>` vnodes from the given vnode (e.g. table head or body).
  */
@@ -33,8 +21,15 @@ const extractTableRows = (vnode?: VNode): VNode[] => {
   return vnode.children.default();
 };
 
-const content = shallowRef(extractSlotContent());
-onBeforeUpdate(() => (content.value = extractSlotContent())); // update content when component is updated
+const content = computed(() => {
+  const children = slots.default?.() ?? [];
+  const [head, body] = children;
+
+  return {
+    headRows: extractTableRows(head),
+    bodyRows: extractTableRows(body),
+  };
+});
 </script>
 
 <template>

package/app/composables/useSidebarNavigation.ts

@@ -6,6 +6,7 @@ export type SidebarNavigationItem = {
    * Item path. Already localized for i18n with `useLocalePath`.
    */
   path: string;
+  icon?: string;
   children?: SidebarNavigationItem[];
   sidebar?: SidebarNavigationOptions;
 };
@@ -56,6 +57,7 @@ export const useSidebarNavigation = async () => {
         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,
       };
     };
 

package/app/layouts/sidebar.vue

@@ -51,7 +51,7 @@ const { navigation } = await useSidebarNavigation();
         </template>
 
         <slot name="sidebarBody" :items="navigation">
-          <SidebarItem v-for="item in navigation" :key="item.path" :item="item" />
+          <NestableSidebarItem v-for="item in navigation" :key="item.path" :item="item" />
 
           <OnyxEmpty v-if="!navigation.length" class="sidebar__empty">
             {{ $t("onyx.select.empty") }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.2.0-dev-20260112110323",
+  "version": "0.2.0-dev-20260113075525",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -28,11 +28,12 @@
     "@nuxt/content": ">= 3",
     "@nuxt/image": ">= 1",
     "@nuxtjs/color-mode": ">= 4",
+    "@nuxtjs/mdc": ">= 0.17.2",
     "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.4.0-dev-20260112110323",
+    "@sit-onyx/icons": "^1.4.0-dev-20260113075525",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.6.0-dev-20260112110323"
+    "sit-onyx": "^1.6.0-dev-20260113075525"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -41,16 +42,17 @@
     "@nuxt/image": ">= 1",
     "@nuxt/test-utils": "^3.23.0",
     "@nuxtjs/color-mode": ">= 4",
+    "@nuxtjs/mdc": ">= 0.17.2",
     "@playwright/experimental-ct-vue": "1.57.0",
     "@playwright/test": "1.57.0",
     "nuxt": "4.2.2",
     "sass-embedded": "1.97.2",
     "typescript": "5.9.3",
     "vue": "3.5.26",
-    "@sit-onyx/icons": "^1.4.0-dev-20260112110323",
+    "@sit-onyx/icons": "^1.4.0-dev-20260113075525",
     "@sit-onyx/nuxt": "^1.0.1",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.6.0-dev-20260112110323"
+    "sit-onyx": "^1.6.0-dev-20260113075525"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",