@sit-onyx/nuxt-docs 1.0.0-beta.4 → 1.0.0-beta.41

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.
@@ -7,8 +7,7 @@ const props = defineProps<NavItem>();
7
7
  * Same as `props` but without the `children` property to prevent console warnings when using `v-bind`.
8
8
  */
9
9
  const navItemProps = computed(() => {
10
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11
- const { children, ...rest } = props;
10
+ const { children: _, ...rest } = props;
12
11
  return rest;
13
12
  });
14
13
  </script>
@@ -0,0 +1,48 @@
1
+ <script lang="ts" setup>
2
+ import type { VNode } from "vue";
3
+
4
+ const slots = defineSlots<{
5
+ default(): VNode[];
6
+ }>();
7
+
8
+ /**
9
+ * Extracts the table head and body as vnodes from the slot content.
10
+ */
11
+ const extractSlotContent = () => {
12
+ const [head, body] = slots.default();
13
+
14
+ return {
15
+ headRows: extractTableRows(head),
16
+ bodyRows: extractTableRows(body),
17
+ };
18
+ };
19
+
20
+ /**
21
+ * Extracts all table rows `<tr>` vnodes from the given vnode (e.g. table head or body).
22
+ */
23
+ const extractTableRows = (vnode?: VNode): VNode[] => {
24
+ if (
25
+ !vnode?.children ||
26
+ typeof vnode.children !== "object" ||
27
+ !("default" in vnode.children) ||
28
+ typeof vnode.children.default !== "function"
29
+ ) {
30
+ return [];
31
+ }
32
+
33
+ return vnode.children.default();
34
+ };
35
+
36
+ const content = shallowRef(extractSlotContent());
37
+ onBeforeUpdate(() => (content.value = extractSlotContent())); // update content when component is updated
38
+ </script>
39
+
40
+ <template>
41
+ <OnyxTable striped with-vertical-borders>
42
+ <template #head>
43
+ <component :is="tr" v-for="tr in content.headRows" :key="tr.key" />
44
+ </template>
45
+
46
+ <component :is="tr" v-for="tr in content.bodyRows" :key="tr.key" />
47
+ </OnyxTable>
48
+ </template>
package/error.vue CHANGED
@@ -12,7 +12,7 @@ const handleError = () => clearError({ redirect: "/" });
12
12
  <template>
13
13
  <App>
14
14
  <div class="error">
15
- <ErrorSVG :title="props.error.message" />
15
+ <OnyxErrorSVG class="error__image" />
16
16
 
17
17
  <div class="error__headline">
18
18
  <OnyxHeadline is="h1">{{ props.error.message }}</OnyxHeadline>
@@ -1,7 +1,5 @@
1
1
  <template>
2
2
  <OnyxPageLayout>
3
- <div class="onyx-grid-container">
4
- <slot />
5
- </div>
3
+ <slot />
6
4
  </OnyxPageLayout>
7
5
  </template>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sit-onyx/nuxt-docs",
3
3
  "type": "module",
4
- "version": "1.0.0-beta.4",
4
+ "version": "1.0.0-beta.41",
5
5
  "description": "Nuxt layer/template for creating documentations with the onyx design system",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -29,9 +29,9 @@
29
29
  "@nuxt/image": ">= 1",
30
30
  "@nuxtjs/color-mode": ">= 3",
31
31
  "sass-embedded": ">= 1",
32
- "@sit-onyx/icons": "^1.0.0-beta.14",
33
- "@sit-onyx/nuxt": "^1.0.0-beta.193",
34
- "sit-onyx": "^1.0.0-beta.191"
32
+ "@sit-onyx/icons": "^1.0.0-beta.16",
33
+ "@sit-onyx/nuxt": "^1.0.0-beta.230",
34
+ "sit-onyx": "^1.0.0-beta.228"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@fontsource-variable/source-code-pro": ">= 5",
@@ -44,17 +44,17 @@
44
44
  "sass-embedded": "1.86.3",
45
45
  "typescript": "5.8.3",
46
46
  "vue": "3.5.13",
47
- "@sit-onyx/icons": "^1.0.0-beta.14",
48
- "@sit-onyx/nuxt": "^1.0.0-beta.193",
49
- "@sit-onyx/shared": "^1.0.0-beta.2",
50
- "sit-onyx": "^1.0.0-beta.191"
47
+ "@sit-onyx/icons": "^1.0.0-beta.16",
48
+ "@sit-onyx/nuxt": "^1.0.0-beta.230",
49
+ "@sit-onyx/shared": "^1.0.0-beta.3",
50
+ "sit-onyx": "^1.0.0-beta.228"
51
51
  },
52
52
  "scripts": {
53
- "dev": "nuxi dev .playground",
54
- "dev:prepare": "nuxt prepare .playground",
55
- "build": "nuxt build .playground",
56
- "generate": "nuxt generate .playground",
57
- "preview": "nuxt preview .playground",
58
- "test:playwright": "pnpm dev:prepare && cd .playground && pnpm test:playwright"
53
+ "dev": "nuxi dev playground",
54
+ "dev:prepare": "nuxt prepare playground",
55
+ "build": "nuxt build playground",
56
+ "generate": "nuxt generate playground",
57
+ "preview": "nuxt preview playground",
58
+ "test:playwright": "pnpm dev:prepare && (cd playground && pnpm test:playwright)"
59
59
  }
60
60
  }
package/tsconfig.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "extends": "./.playground/.nuxt/tsconfig.json"
2
+ "extends": "./playground/.nuxt/tsconfig.json"
3
3
  }
@@ -1,211 +0,0 @@
1
- <script lang="ts" setup>
2
- const props = defineProps<{
3
- title: string;
4
- }>();
5
- </script>
6
-
7
- <template>
8
- <svg
9
- class="error__image"
10
- xmlns="http://www.w3.org/2000/svg"
11
- viewBox="0 0 1119.60911 699"
12
- xmlns:xlink="http://www.w3.org/1999/xlink"
13
- role="img"
14
- >
15
- <title>{{ props.title }}</title>
16
- <circle cx="292.60911" cy="213" r="213" fill="var(--onyx-color-base-neutral-200)" />
17
- <path
18
- d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
19
- transform="translate(-31.39089 -100.5)"
20
- fill="var(--onyx-color-steel-900)"
21
- />
22
- <path
23
- d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
24
- transform="translate(-31.39089 -100.5)"
25
- fill="var(--onyx-color-base-primary-500)"
26
- />
27
- <path
28
- d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
29
- transform="translate(-31.39089 -100.5)"
30
- fill="var(--onyx-color-base-primary-500)"
31
- />
32
- <path
33
- d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
34
- transform="translate(-31.39089 -100.5)"
35
- fill="var(--onyx-color-steel-900)"
36
- />
37
- <ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="var(--onyx-color-steel-800)" />
38
- <ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
39
- <ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="var(--onyx-color-steel-800)" />
40
- <ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="var(--onyx-color-steel-800)" />
41
- <path
42
- d="M494,726.5c90,23,263-30,282-90"
43
- transform="translate(-31.39089 -100.5)"
44
- fill="none"
45
- stroke="var(--onyx-color-steel-700)"
46
- stroke-miterlimit="10"
47
- stroke-width="2"
48
- />
49
- <path
50
- d="M341,359.5s130-36,138,80-107,149-17,172"
51
- transform="translate(-31.39089 -100.5)"
52
- fill="none"
53
- stroke="var(--onyx-color-steel-700)"
54
- stroke-miterlimit="10"
55
- stroke-width="2"
56
- />
57
- <path
58
- d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
59
- transform="translate(-31.39089 -100.5)"
60
- fill="none"
61
- stroke="var(--onyx-color-steel-700)"
62
- stroke-miterlimit="10"
63
- stroke-width="2"
64
- />
65
- <path
66
- d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
67
- transform="translate(-31.39089 -100.5)"
68
- fill="var(--onyx-color-steel-900)"
69
- />
70
- <path
71
- d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
72
- transform="translate(-31.39089 -100.5)"
73
- opacity="0.1"
74
- />
75
- <rect
76
- x="578.43291"
77
- y="212.68859"
78
- width="513.25314"
79
- height="357.51989"
80
- rx="18.04568"
81
- fill="var(--onyx-color-steel-900)"
82
- />
83
- <rect
84
- x="595.70294"
85
- y="231.77652"
86
- width="478.71308"
87
- height="267.83694"
88
- fill="var(--onyx-color-steel-800)"
89
- />
90
- <circle cx="835.05948" cy="223.29299" r="3.02983" fill="var(--onyx-color-steel-200)" />
91
- <path
92
- d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
93
- transform="translate(-31.39089 -100.5)"
94
- fill="var(--onyx-color-steel-900)"
95
- />
96
- <polygon
97
- points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
98
- fill="var(--onyx-color-steel-900)"
99
- />
100
- <path
101
- d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
102
- transform="translate(-31.39089 -100.5)"
103
- fill="var(--onyx-color-steel-900)"
104
- />
105
- <path
106
- d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
107
- transform="translate(-31.39089 -100.5)"
108
- opacity="0.1"
109
- />
110
- <ellipse
111
- cx="1066.53846"
112
- cy="654.13477"
113
- rx="7.87756"
114
- ry="2.42386"
115
- fill="var(--onyx-color-steel-200)"
116
- />
117
- <circle cx="835.05948" cy="545.66686" r="11.51335" fill="var(--onyx-color-steel-200)" />
118
- <polygon
119
- points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
120
- opacity="0.1"
121
- />
122
- <rect x="108.60911" y="159" width="208" height="242" fill="var(--onyx-color-steel-900)" />
123
- <rect x="87.60911" y="135" width="250" height="86" fill="var(--onyx-color-steel-800)" />
124
- <rect x="87.60911" y="237" width="250" height="86" fill="var(--onyx-color-steel-800)" />
125
- <rect x="87.60911" y="339" width="250" height="86" fill="var(--onyx-color-steel-800)" />
126
- <rect
127
- x="271.60911"
128
- y="150"
129
- width="16"
130
- height="16"
131
- fill="var(--onyx-color-base-primary-500)"
132
- opacity="0.4"
133
- />
134
- <rect
135
- x="294.60911"
136
- y="150"
137
- width="16"
138
- height="16"
139
- fill="var(--onyx-color-base-primary-500)"
140
- opacity="0.8"
141
- />
142
- <rect x="317.60911" y="150" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
143
- <rect
144
- x="271.60911"
145
- y="251"
146
- width="16"
147
- height="16"
148
- fill="var(--onyx-color-base-primary-500)"
149
- opacity="0.4"
150
- />
151
- <rect
152
- x="294.60911"
153
- y="251"
154
- width="16"
155
- height="16"
156
- fill="var(--onyx-color-base-primary-500)"
157
- opacity="0.8"
158
- />
159
- <rect x="317.60911" y="251" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
160
- <rect
161
- x="271.60911"
162
- y="352"
163
- width="16"
164
- height="16"
165
- fill="var(--onyx-color-base-primary-500)"
166
- opacity="0.4"
167
- />
168
- <rect
169
- x="294.60911"
170
- y="352"
171
- width="16"
172
- height="16"
173
- fill="var(--onyx-color-base-primary-500)"
174
- opacity="0.8"
175
- />
176
- <rect x="317.60911" y="352" width="16" height="16" fill="var(--onyx-color-base-primary-500)" />
177
- <circle cx="316.60911" cy="538" r="79" fill="var(--onyx-color-steel-900)" />
178
- <rect x="280.60911" y="600" width="24" height="43" fill="var(--onyx-color-steel-900)" />
179
- <rect x="328.60911" y="600" width="24" height="43" fill="var(--onyx-color-steel-900)" />
180
- <ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="var(--onyx-color-steel-900)" />
181
- <ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="var(--onyx-color-steel-900)" />
182
- <circle cx="318.60911" cy="518" r="27" fill="#fff" />
183
- <circle cx="318.60911" cy="518" r="9" fill="var(--onyx-color-steel-800)" />
184
- <path
185
- d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
186
- transform="translate(-31.39089 -100.5)"
187
- fill="var(--onyx-color-base-primary-500)"
188
- />
189
- <ellipse
190
- cx="417.21511"
191
- cy="611.34365"
192
- rx="39.5"
193
- ry="12.40027"
194
- transform="translate(-238.28665 112.98044) rotate(-23.17116)"
195
- fill="var(--onyx-color-steel-900)"
196
- />
197
- <ellipse
198
- cx="269.21511"
199
- cy="664.34365"
200
- rx="39.5"
201
- ry="12.40027"
202
- transform="translate(-271.07969 59.02084) rotate(-23.17116)"
203
- fill="var(--onyx-color-steel-900)"
204
- />
205
- <path
206
- d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
207
- transform="translate(-31.39089 -100.5)"
208
- fill="#fff"
209
- />
210
- </svg>
211
- </template>