@sit-onyx/nuxt-docs 1.0.0-beta.124 → 1.0.0-beta.125

package/app/components/SidebarItem.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { ContentNavigationItem } from "@nuxt/content";
+
+const props = defineProps<{
+  item: ContentNavigationItem;
+}>();
+
+const localePath = useLocalePath();
+
+const isAccordionOpen = ref(true);
+
+const children = computed(() => {
+  // filter out children that are directories
+  return props.item.children?.filter((child) => child.page !== false);
+});
+</script>
+
+<template>
+  <OnyxSidebarItem v-if="!children" class="sidebar-item" :link="localePath(props.item.path)">
+    {{ props.item.title }}
+  </OnyxSidebarItem>
+
+  <OnyxAccordion
+    v-else
+    :model-value="isAccordionOpen ? [localePath(item.path)] : undefined"
+    class="sidebar-accordion"
+    type="nested-large"
+    @update:model-value="isAccordionOpen = !isAccordionOpen"
+  >
+    <OnyxAccordionItem :value="localePath(item.path)">
+      <template #header>{{ props.item.title }}</template>
+
+      <div class="sidebar-item__children">
+        <OnyxSidebarItem
+          v-for="child in children"
+          :key="localePath(child.path)"
+          :link="localePath(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/ProseH1.vue

@@ -13,3 +13,9 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-bottom: var(--onyx-density-lg);
+}
+</style>

package/app/components/content/ProseH2.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/app/components/content/ProseH3.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-2xs);
+}
+</style>

package/app/components/content/ProseH4.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/app/components/content/ProseH5.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/app/components/content/ProseH6.vue

@@ -13,3 +13,10 @@ defineSlots<{
     <slot />
   </OnyxHeadline>
 </template>
+
+<style lang="scss" scoped>
+.onyx-headline {
+  margin-top: var(--onyx-density-lg);
+  margin-bottom: var(--onyx-density-3xs);
+}
+</style>

package/app/components/content/ProseOl.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <ol>
+    <slot></slot>
+  </ol>
+</template>
+
+<style lang="scss" scoped>
+ol {
+  margin-top: var(--onyx-density-xs);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/app/components/content/ProseUl.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineSlots<{
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <ul>
+    <slot></slot>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  margin-top: var(--onyx-density-xs);
+  margin-bottom: var(--onyx-density-xs);
+}
+</style>

package/app/layouts/default.vue

@@ -1,5 +1,14 @@
+<script lang="ts" setup>
+defineSlots<{
+  /**
+   * Main page content.
+   */
+  default(): unknown;
+}>();
+</script>
+
 <template>
   <OnyxPageLayout>
-    <slot />
+    <slot></slot>
   </OnyxPageLayout>
 </template>

package/app/layouts/sidebar.vue

@@ -0,0 +1,144 @@
+<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";
+
+const props = defineProps<
+  OnyxPageLayoutProps & {
+    sidebar?: OnyxSidebarProps;
+  }
+>();
+
+const slots = defineSlots<{
+  /**
+   * Main page content.
+   */
+  default(): unknown;
+  /**
+   * Page footer content.
+   */
+  footer?(): unknown;
+  /**
+   * Optional right sidebar.
+   */
+  sidebarRight?(): unknown;
+  /**
+   * Optionally override the main sidebar body content.
+   */
+  sidebarBody?(props: { items: ContentNavigationItem[] }): unknown;
+  /**
+   * Optionally override the sidebar header content.
+   */
+  sidebarHeader?(): unknown;
+  /**
+   * Sidebar footer content.
+   */
+  sidebarFooter?(): unknown;
+}>();
+
+const { locale } = useI18n();
+const localePath = useLocalePath();
+
+const navigation = await useAsyncData(
+  () => `navigation-${locale.value}`,
+  () => {
+    const collection = `content_${locale.value}` as const;
+    return queryCollectionNavigation(collection);
+  },
+);
+
+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;
+});
+</script>
+
+<template>
+  <OnyxPageLayout v-bind="props">
+    <template #sidebar>
+      <OnyxSidebar
+        class="sidebar"
+        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>
+
+        <slot name="sidebarBody" :items="filteredSidebarItems">
+          <SidebarItem
+            v-for="item in filteredSidebarItems"
+            :key="localePath(item.path)"
+            :item="item"
+          />
+
+          <OnyxEmpty v-if="!filteredSidebarItems.length" class="sidebar__empty">
+            {{ $t("onyx.select.empty") }}
+          </OnyxEmpty>
+        </slot>
+
+        <template v-if="!!slots.sidebarFooter" #footer>
+          <slot name="sidebarFooter"></slot>
+        </template>
+      </OnyxSidebar>
+    </template>
+
+    <slot></slot>
+
+    <template v-if="!!slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+
+    <template v-if="!!slots.sidebarRight" #sidebarRight>
+      <slot name="sidebarRight"></slot>
+    </template>
+  </OnyxPageLayout>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  white-space: pre-line;
+}
+
+.sidebar {
+  &__empty {
+    max-width: 100%;
+  }
+}
+</style>

package/app/pages/[...slug].vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import type { Collections } from "@nuxt/content";
+definePageMeta({ layout: "sidebar" });
 
 const route = useRoute();
 const { locale } = useI18n();
+
 const slug = computed(() => {
-  const value = String(route.params.slug);
-  return value.startsWith("/") ? value : `/${value}`;
+  const path = Array.isArray(route.params.slug)
+    ? route.params.slug.join("/")
+    : (route.params.slug ?? "");
+  return path.startsWith("/") ? path : `/${path}`;
 });
 
 const collection = await useAsyncData(
   () => `page-${slug.value}-${locale.value}`,
   () => {
-    const collection = `content_${locale.value}` as keyof Collections;
+    const collection = `content_${locale.value}` as const;
     return queryCollection(collection).path(slug.value).first();
   },
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "1.0.0-beta.124",
+  "version": "1.0.0-beta.125",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -32,7 +32,7 @@
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.0.0-beta.26",
     "@sit-onyx/nuxt": "^1.0.0-beta.308",
-    "sit-onyx": "^1.0.0-beta.320"
+    "sit-onyx": "^1.0.0-beta.322"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -49,8 +49,8 @@
     "vue": "3.5.20",
     "@sit-onyx/icons": "^1.0.0-beta.26",
     "@sit-onyx/nuxt": "^1.0.0-beta.308",
-    "@sit-onyx/shared": "^1.0.0-beta.4",
-    "sit-onyx": "^1.0.0-beta.320"
+    "sit-onyx": "^1.0.0-beta.322",
+    "@sit-onyx/shared": "^1.0.0-beta.4"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",