@sit-onyx/nuxt-docs 0.2.0 → 0.3.0-dev-20260211170858

package/app/assets/styles/index.scss

@@ -0,0 +1,4 @@
+:root {
+  /** Basic vertical spacing for markdown elements. */
+  --onyx-docs-density-paragraph: var(--onyx-density-md);
+}

package/app/components/NestableSidebarItem.vue

@@ -45,6 +45,8 @@ const getSidebarItemProps = (item: SidebarNavigationItem): SidebarItemProps => {
     showArrow: item.sidebar?.root,
   };
 };
+
+const { icon } = useIcon(computed(() => props.item.icon));
 </script>
 
 <template>
@@ -64,7 +66,7 @@ const getSidebarItemProps = (item: SidebarNavigationItem): SidebarItemProps => {
     <OnyxAccordionItem :value="props.item.path">
       <template #header>
         <div class="sidebar-accordion__header">
-          <ResolvableIcon v-if="props.item.icon" :name="props.item.icon" />
+          <OnyxIcon v-if="icon" :icon />
           {{ props.item.title }}
         </div>
       </template>

package/app/components/PackageManagerCodeTabs.vue

@@ -33,9 +33,15 @@ const tabs = computed(() => {
 </script>
 
 <template>
-  <OnyxUnstableCodeTabs v-model="selectedTab">
-    <OnyxUnstableCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value">
+  <OnyxCodeTabs v-model="selectedTab" class="tabs">
+    <OnyxCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value">
       <HighlightedCode :code="tab.code" :language="tab.language" />
-    </OnyxUnstableCodeTab>
-  </OnyxUnstableCodeTabs>
+    </OnyxCodeTab>
+  </OnyxCodeTabs>
 </template>
+
+<style lang="scss" scoped>
+.tabs {
+  margin-block: var(--onyx-docs-density-paragraph);
+}
+</style>

package/app/components/SidebarItem.vue

@@ -14,11 +14,13 @@ export type SidebarItemProps = {
 };
 
 const props = defineProps<SidebarItemProps>();
+
+const { icon } = useIcon(computed(() => props.icon));
 </script>
 
 <template>
   <OnyxSidebarItem class="sidebar-item" :link="props.link">
-    <ResolvableIcon v-if="props.icon" :name="props.icon" />
+    <OnyxIcon v-if="icon" :icon />
     {{ props.label }}
     <OnyxIcon v-if="props.showArrow" :icon="iconArrowSmallRight" />
   </OnyxSidebarItem>

package/app/components/content/InfoCard.global.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { OnyxInfoCardProps } from "sit-onyx";
+
+const props = withDefaults(defineProps<OnyxInfoCardProps>(), {
+  icon: undefined, // using "undefined" so it does not default to "false" so the correct default icon is used by the OnyxInfoCard
+});
+
+const slots = defineSlots<{
+  default?(): unknown;
+}>();
+
+const { icon: iconContent } = useIcon(
+  computed(() => (typeof props.icon === "string" ? props.icon : undefined)),
+);
+</script>
+
+<template>
+  <OnyxInfoCard class="card" v-bind="props" :icon="iconContent ?? props.icon">
+    <template v-if="slots.default" #default>
+      <slot mdc-unwrap="p"></slot>
+    </template>
+  </OnyxInfoCard>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  margin-block: var(--onyx-docs-density-paragraph);
+}
+</style>

package/app/components/content/ProseA.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LinkTarget } from "sit-onyx";
+import { isInternalLink, type LinkTarget } from "sit-onyx";
 
 const props = withDefaults(
   defineProps<{
@@ -21,7 +21,11 @@ onMounted(() => (isMounted.value = true));
 </script>
 
 <template>
-  <OnyxLink v-bind="props" :with-external-icon="isMounted ? 'auto' : false">
+  <OnyxLink
+    v-bind="props"
+    :target="!isInternalLink(props.href) ? '_blank' : props.target"
+    :with-external-icon="isMounted ? 'auto' : false"
+  >
     <slot></slot>
   </OnyxLink>
 </template>

package/app/components/content/ProseCode.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <code class="onyx-text--small">
+    <slot></slot>
+  </code>
+</template>
+
+<style lang="scss" scoped>
+code {
+  background-color: var(--onyx-color-base-background-blank);
+  border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
+  border-radius: var(--onyx-radius-sm);
+  padding: var(--onyx-density-3xs) var(--onyx-density-2xs);
+}
+</style>

package/app/components/content/ProseH2.vue

@@ -16,7 +16,7 @@ defineSlots<{
 
 <style lang="scss" scoped>
 .onyx-headline {
-  margin-top: var(--onyx-density-lg);
+  margin-top: var(--onyx-density-2xl);
   margin-bottom: var(--onyx-density-xs);
 }
 </style>

package/app/components/content/ProseH3.vue

@@ -16,7 +16,7 @@ defineSlots<{
 
 <style lang="scss" scoped>
 .onyx-headline {
-  margin-top: var(--onyx-density-lg);
+  margin-top: var(--onyx-density-xl);
   margin-bottom: var(--onyx-density-2xs);
 }
 </style>

package/app/components/content/ProseHr.global.vue

@@ -0,0 +1,12 @@
+<!--
+ Note: this component needs to marked as global so it is displayed correctly when building the app (since @nuxt/content does not include a ProseHr by default)
+-->
+<template>
+  <OnyxSeparator class="separator" />
+</template>
+
+<style lang="scss" scoped>
+.separator {
+  margin-block: var(--onyx-docs-density-paragraph);
+}
+</style>

package/app/components/content/ProseOl.vue

@@ -12,7 +12,6 @@ defineSlots<{
 
 <style lang="scss" scoped>
 ol {
-  margin-top: var(--onyx-density-xs);
-  margin-bottom: var(--onyx-density-xs);
+  margin-block: var(--onyx-density-xs);
 }
 </style>

package/app/components/content/ProseP.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <p>
+    <slot></slot>
+  </p>
+</template>
+
+<style lang="scss" scoped>
+p {
+  margin-block: var(--onyx-docs-density-paragraph);
+}
+</style>

package/app/components/content/ProsePre.vue

@@ -38,14 +38,9 @@ const value = "tab-1";
 </script>
 
 <template>
-  <OnyxUnstableCodeTabs :model-value="value">
-    <OnyxUnstableCodeTab
-      :value
-      :code="props.code"
-      :language="props.language"
-      :label="props.filename"
-    >
+  <OnyxCodeTabs :model-value="value">
+    <OnyxCodeTab :value :code="props.code" :language="props.language" :label="props.filename">
       <pre :class="props.class"><slot></slot></pre>
-    </OnyxUnstableCodeTab>
-  </OnyxUnstableCodeTabs>
+    </OnyxCodeTab>
+  </OnyxCodeTabs>
 </template>

package/app/components/content/ProseTable.vue

@@ -33,7 +33,7 @@ const content = computed(() => {
 </script>
 
 <template>
-  <OnyxTable striped with-vertical-borders>
+  <OnyxTable class="table" striped with-vertical-borders>
     <template #head>
       <component :is="tr" v-for="tr in content.headRows" :key="tr.key" />
     </template>
@@ -41,3 +41,9 @@ const content = computed(() => {
     <component :is="tr" v-for="tr in content.bodyRows" :key="tr.key" />
   </OnyxTable>
 </template>
+
+<style lang="scss" scoped>
+.table {
+  margin-block: var(--onyx-docs-density-paragraph);
+}
+</style>

package/app/components/content/ProseUl.vue

@@ -12,7 +12,6 @@ defineSlots<{
 
 <style lang="scss" scoped>
 ul {
-  margin-top: var(--onyx-density-xs);
-  margin-bottom: var(--onyx-density-xs);
+  margin-block: var(--onyx-density-xs);
 }
 </style>

package/app/composables/useIcon.ts

@@ -0,0 +1,31 @@
+import * as ALL_ICONS from "@sit-onyx/icons";
+import { getIconImportName } from "@sit-onyx/icons/utils";
+
+/**
+ * Composable for resolving the icon content based on the icon name.
+ */
+export const useIcon = (iconName: MaybeRef<string | undefined>) => {
+  const icon = ref<string>();
+
+  watch(
+    toRef(iconName),
+    (newIconName) => {
+      icon.value = newIconName
+        ? ALL_ICONS[getIconImportName(newIconName) as keyof typeof ALL_ICONS]
+        : undefined;
+
+      if (newIconName && 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 },
+  );
+
+  return {
+    /**
+     * Resolved icon content.
+     */
+    icon,
+  };
+};

package/app/composables/useSidebarNavigation.ts

@@ -1,3 +1,4 @@
+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 = {

package/nuxt.config.ts

@@ -1,4 +1,11 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { createResolver } from "nuxt/kit";
+
+// using a resolver here so path are correctly resolved when extending this app as Nuxt layer
+const { resolve } = createResolver(import.meta.url);
+
+/**
+ * @see 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
@@ -10,7 +17,11 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-01-20",
   typescript: { typeCheck: "build" },
   modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image", "@nuxtjs/i18n"],
-  css: ["@fontsource-variable/source-code-pro", "@fontsource-variable/source-sans-3"],
+  css: [
+    "@fontsource-variable/source-code-pro",
+    "@fontsource-variable/source-sans-3",
+    resolve("./app/assets/styles/index.scss"),
+  ],
   i18n: {
     defaultLocale: "en",
     // we explicitly don't define any default locales here so the project is fully in charge if defining which locales to use.
@@ -21,6 +32,7 @@ export default defineNuxtConfig({
     components: {
       map: {
         br: "ProseBr",
+        hr: "ProseHr",
       },
     },
   },

package/package.json

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

package/app/components/ResolvableIcon.vue

@@ -1,31 +0,0 @@
-<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>