@sit-onyx/nuxt-docs 1.0.0-beta.91 → 1.0.0-beta.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "1.0.0-beta.91",
+  "version": "1.0.0-beta.92",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -35,8 +35,8 @@
     "@nuxtjs/color-mode": ">= 3",
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.0.0-beta.21",
-    "@sit-onyx/nuxt": "^1.0.0-beta.279",
-    "sit-onyx": "^1.0.0-beta.278"
+    "@sit-onyx/nuxt": "^1.0.0-beta.280",
+    "sit-onyx": "^1.0.0-beta.279"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -47,14 +47,14 @@
     "@nuxtjs/color-mode": ">= 3",
     "@playwright/experimental-ct-vue": "1.54.1",
     "@playwright/test": "1.54.1",
-    "nuxt": "^3.17.7",
+    "nuxt": "^4.0.1",
     "sass-embedded": "1.89.2",
     "typescript": "5.8.3",
     "vue": "3.5.18",
     "@sit-onyx/icons": "^1.0.0-beta.21",
-    "@sit-onyx/nuxt": "^1.0.0-beta.279",
+    "@sit-onyx/nuxt": "^1.0.0-beta.280",
     "@sit-onyx/shared": "^1.0.0-beta.4",
-    "sit-onyx": "^1.0.0-beta.278"
+    "sit-onyx": "^1.0.0-beta.279"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",

package/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.vue

@@ -1,17 +0,0 @@
-<template>
-  <OnyxAppLayout class="onyx-grid-max-md onyx-grid-center">
-    <template #navBar>
-      <NavBar />
-    </template>
-
-    <NuxtRouteAnnouncer />
-
-    <NuxtLayout>
-      <slot>
-        <NuxtPage />
-      </slot>
-    </NuxtLayout>
-
-    <OnyxToast />
-  </OnyxAppLayout>
-</template>

package/components/NavBar.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import circleContrast from "@sit-onyx/icons/circle-contrast.svg?raw";
-import { extractLinkProps, type ColorSchemeValue } from "sit-onyx";
-
-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;
-  },
-});
-</script>
-
-<template>
-  <OnyxNavBar v-bind="onyxDocs.nav" @navigate-back="router.back">
-    <NavItem
-      v-for="item in onyxDocs.nav?.items"
-      :key="extractLinkProps(item.link ?? '').href"
-      v-bind="item"
-    />
-
-    <template #contextArea>
-      <OnyxIconButton
-        label="Toggle color scheme"
-        :icon="circleContrast"
-        color="neutral"
-        @click="isColorSchemeDialogOpen = true"
-      />
-    </template>
-
-    <OnyxColorSchemeDialog
-      v-model="colorScheme"
-      :open="isColorSchemeDialogOpen"
-      @close="isColorSchemeDialogOpen = false"
-    />
-  </OnyxNavBar>
-</template>

package/components/NavItem.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { NavItem } from "../app.config";
-
-const props = defineProps<NavItem>();
-
-/**
- * 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;
-});
-</script>
-
-<template>
-  <OnyxNavItem v-bind="navItemProps">
-    <template v-if="props.children?.length" #children>
-      <NavItem v-for="child in props.children" :key="child.label" v-bind="child" />
-    </template>
-  </OnyxNavItem>
-</template>

package/components/content/ProseA.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import type { LinkTarget } from "sit-onyx";
-
-const props = withDefaults(
-  defineProps<{
-    href?: string;
-    target?: LinkTarget;
-  }>(),
-  {
-    href: "",
-  },
-);
-
-defineSlots<{
-  default(): unknown;
-}>();
-
-// needed to show external link icon only on mounted to prevent hydration errors
-const isMounted = ref(false);
-onMounted(() => (isMounted.value = true));
-</script>
-
-<template>
-  <OnyxLink v-bind="props" :with-external-icon="isMounted ? 'auto' : false">
-    <slot></slot>
-  </OnyxLink>
-</template>

package/components/content/ProseH1.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h1" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseH2.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h2" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseH3.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h3" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseH4.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h4" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseH5.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h5" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseH6.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  id?: string;
-}>();
-
-defineSlots<{
-  default(): unknown;
-}>();
-</script>
-
-<template>
-  <OnyxHeadline is="h6" :hash="props.id">
-    <slot />
-  </OnyxHeadline>
-</template>

package/components/content/ProseImg.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    src?: string;
-    alt?: string;
-  }>(),
-  {
-    src: "",
-    alt: "",
-  },
-);
-</script>
-
-<template>
-  <NuxtImg :src="props.src" :alt="props.alt" :format="src?.endsWith('.svg') ? undefined : 'webp'" />
-</template>

package/components/content/ProseTable.vue

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-import type { VNode } from "vue";
-
-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).
- */
-const extractTableRows = (vnode?: VNode): VNode[] => {
-  if (
-    !vnode?.children ||
-    typeof vnode.children !== "object" ||
-    !("default" in vnode.children) ||
-    typeof vnode.children.default !== "function"
-  ) {
-    return [];
-  }
-
-  return vnode.children.default();
-};
-
-const content = shallowRef(extractSlotContent());
-onBeforeUpdate(() => (content.value = extractSlotContent())); // update content when component is updated
-</script>
-
-<template>
-  <OnyxTable striped with-vertical-borders>
-    <template #head>
-      <component :is="tr" v-for="tr in content.headRows" :key="tr.key" />
-    </template>
-
-    <component :is="tr" v-for="tr in content.bodyRows" :key="tr.key" />
-  </OnyxTable>
-</template>

package/error.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { NuxtError } from "#app";
-import App from "./app.vue";
-
-const props = defineProps<{
-  error: NuxtError;
-}>();
-
-const handleError = () => clearError({ redirect: "/" });
-</script>
-
-<template>
-  <App>
-    <div class="error">
-      <OnyxErrorSVG class="error__image" />
-
-      <div class="error__headline">
-        <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
-        <OnyxButton label="Back to home" @click="handleError" />
-      </div>
-
-      <OnyxAccordion>
-        <OnyxAccordionItem value="details">
-          <template #header>Technical error details</template>
-          <pre class="error__details">{{ props.error }}</pre>
-        </OnyxAccordionItem>
-      </OnyxAccordion>
-    </div>
-  </App>
-</template>
-
-<style lang="scss" scoped>
-.error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--onyx-density-3xl);
-
-  &__image {
-    width: 32rem;
-    display: block;
-  }
-
-  &__headline {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--onyx-density-md);
-  }
-
-  &__details {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    font-family: var(--onyx-font-family-mono);
-  }
-}
-</style>

package/layouts/default.vue

@@ -1,5 +0,0 @@
-<template>
-  <OnyxPageLayout>
-    <slot />
-  </OnyxPageLayout>
-</template>

package/pages/[...path].vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const route = useRoute();
-const collection = await useAsyncData(() => queryCollection("content").path(route.path).first());
-
-if (!collection.data.value) {
-  throw createError({
-    message: "Page not found",
-    statusCode: 404,
-  });
-}
-
-const data = toRef(() => collection.data.value!);
-useSeoMeta({ ...data.value.seo });
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if  -- the v-if here is theoretically not needed because we throw above it ifs undefined so the user will be redirected to the error page. However, there is still a console warning so we include the v-if here to prevent it. -->
-<template>
-  <ContentRenderer v-if="data" :value="data" />
-</template>