@sit-onyx/nuxt-docs 0.2.0-dev-20260113111714 → 0.2.0-dev-20260113131929

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/app/components/NestableSidebarItem.vue +27 -2
  2. package/app/components/SidebarItem.vue +17 -8
  3. package/package.json +5 -5
package/app/components/NestableSidebarItem.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts" setup>
2
2
  import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
3
+ import type { SidebarItemProps } from "./SidebarItem.vue";
3
4
 
4
5
  const props = defineProps<{
5
6
  item: SidebarNavigationItem;
@@ -35,10 +36,23 @@ watch(
35
36
  },
36
37
  { immediate: true },
37
38
  );
39
+
40
+ const getSidebarItemProps = (item: SidebarNavigationItem): SidebarItemProps => {
41
+ return {
42
+ label: item.title,
43
+ link: item.path,
44
+ icon: item.icon,
45
+ showArrow: item.sidebar?.root,
46
+ };
47
+ };
38
48
  </script>
39
49
 
40
50
  <template>
41
- <SidebarItem v-if="!props.item.children?.length" class="sidebar-item" :item="props.item" />
51
+ <SidebarItem
52
+ v-if="!props.item.children?.length"
53
+ class="sidebar-item"
54
+ v-bind="getSidebarItemProps(props.item)"
55
+ />
42
56
 
43
57
  <OnyxAccordion
44
58
  v-else
@@ -56,7 +70,18 @@ watch(
56
70
  </template>
57
71
 
58
72
  <div class="sidebar-item__children">
59
- <SidebarItem v-for="child in props.item.children" :key="child.path" :item="child" />
73
+ <!--
74
+ When the accordion is used (so the item has children), it does not show the item arrow in the accordion itself.
75
+ So for the child item, the arrow should also be shown if the parent should show it.
76
+ -->
77
+ <SidebarItem
78
+ v-for="child in props.item.children"
79
+ :key="child.path"
80
+ v-bind="getSidebarItemProps(child)"
81
+ :show-arrow="
82
+ getSidebarItemProps(child).showArrow || getSidebarItemProps(props.item).showArrow
83
+ "
84
+ />
60
85
  </div>
61
86
  </OnyxAccordionItem>
62
87
  </OnyxAccordion>
package/app/components/SidebarItem.vue CHANGED
@@ -1,17 +1,26 @@
1
1
  <script lang="ts" setup>
2
2
  import { iconArrowSmallRight } from "@sit-onyx/icons";
3
- import type { SidebarNavigationItem } from "../composables/useSidebarNavigation.js";
3
+ import type { OnyxSidebarItemProps } from "sit-onyx";
4
4
 
5
- const props = defineProps<{
6
- item: Omit<SidebarNavigationItem, "children">;
7
- }>();
5
+ export type SidebarItemProps = {
6
+ label: string;
7
+ link: NonNullable<OnyxSidebarItemProps["link"]>;
8
+ icon?: string;
9
+ /**
10
+ * Whether to show an arrow icon indicating that the item link
11
+ * leads to a deeper nested layer in the navigation tree.
12
+ */
13
+ showArrow?: boolean;
14
+ };
15
+
16
+ const props = defineProps<SidebarItemProps>();
8
17
  </script>
9
18
 
10
19
  <template>
11
- <OnyxSidebarItem class="sidebar-item" :link="props.item.path">
12
- <ResolvableIcon v-if="props.item.icon" :name="props.item.icon" />
13
- {{ props.item.title }}
14
- <OnyxIcon v-if="props.item.sidebar?.root" :icon="iconArrowSmallRight" />
20
+ <OnyxSidebarItem class="sidebar-item" :link="props.link">
21
+ <ResolvableIcon v-if="props.icon" :name="props.icon" />
22
+ {{ props.label }}
23
+ <OnyxIcon v-if="props.showArrow" :icon="iconArrowSmallRight" />
15
24
  </OnyxSidebarItem>
16
25
  </template>
17
26
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sit-onyx/nuxt-docs",
3
- "version": "0.2.0-dev-20260113111714",
3
+ "version": "0.2.0-dev-20260113131929",
4
4
  "description": "Nuxt layer/template for creating documentations with the onyx design system",
5
5
  "type": "module",
6
6
  "author": "Schwarz IT KG",
@@ -31,9 +31,9 @@
31
31
  "@nuxtjs/mdc": ">= 0.17.2",
32
32
  "@nuxtjs/i18n": ">= 10",
33
33
  "sass-embedded": ">= 1",
34
- "@sit-onyx/icons": "^1.4.0-dev-20260113111714",
34
+ "@sit-onyx/icons": "^1.4.0-dev-20260113131929",
35
35
  "@sit-onyx/nuxt": "^1.0.1",
36
- "sit-onyx": "^1.6.0-dev-20260113111714"
36
+ "sit-onyx": "^1.6.0-dev-20260113131929"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@fontsource-variable/source-code-pro": ">= 5",
@@ -49,10 +49,10 @@
49
49
  "sass-embedded": "1.97.2",
50
50
  "typescript": "5.9.3",
51
51
  "vue": "3.5.26",
52
- "@sit-onyx/icons": "^1.4.0-dev-20260113111714",
52
+ "@sit-onyx/icons": "^1.4.0-dev-20260113131929",
53
53
  "@sit-onyx/nuxt": "^1.0.1",
54
54
  "@sit-onyx/shared": "^0.1.0",
55
- "sit-onyx": "^1.6.0-dev-20260113111714"
55
+ "sit-onyx": "^1.6.0-dev-20260113131929"
56
56
  },
57
57
  "scripts": {
58
58
  "dev": "pnpm dev:prepare && nuxi dev playground",