spoko-design-system 1.4.2 → 1.4.3
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.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"module": "./index.ts",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"spoko design system"
|
|
52
52
|
],
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@algolia/client-search": "^5.
|
|
55
|
-
"@astrojs/mdx": "^4.3.
|
|
54
|
+
"@algolia/client-search": "^5.41.0",
|
|
55
|
+
"@astrojs/mdx": "^4.3.8",
|
|
56
56
|
"@astrojs/node": "^9.5.0",
|
|
57
57
|
"@astrojs/sitemap": "^3.6.0",
|
|
58
58
|
"@astrojs/ts-plugin": "^1.10.5",
|
|
@@ -68,25 +68,25 @@
|
|
|
68
68
|
"@iconify-json/eos-icons": "^1.2.4",
|
|
69
69
|
"@iconify-json/et": "^1.2.1",
|
|
70
70
|
"@iconify-json/flowbite": "^1.2.7",
|
|
71
|
-
"@iconify-json/fluent": "^1.2.
|
|
71
|
+
"@iconify-json/fluent": "^1.2.34",
|
|
72
72
|
"@iconify-json/fluent-emoji": "1.2.6",
|
|
73
73
|
"@iconify-json/ic": "^1.2.4",
|
|
74
74
|
"@iconify-json/icon-park-outline": "^1.2.4",
|
|
75
75
|
"@iconify-json/la": "^1.2.1",
|
|
76
|
-
"@iconify-json/lucide": "^1.2.
|
|
76
|
+
"@iconify-json/lucide": "^1.2.71",
|
|
77
77
|
"@iconify-json/material-symbols-light": "^1.2.42",
|
|
78
78
|
"@iconify-json/mdi": "^1.2.3",
|
|
79
79
|
"@iconify-json/noto-v1": "^1.2.5",
|
|
80
80
|
"@iconify-json/octicon": "^1.2.16",
|
|
81
81
|
"@iconify-json/ph": "^1.2.2",
|
|
82
|
-
"@iconify-json/simple-icons": "^1.2.
|
|
82
|
+
"@iconify-json/simple-icons": "^1.2.55",
|
|
83
83
|
"@iconify-json/streamline": "^1.2.5",
|
|
84
84
|
"@iconify-json/streamline-emojis": "^1.2.4",
|
|
85
85
|
"@iconify-json/streamline-freehand-color": "^1.2.2",
|
|
86
86
|
"@iconify-json/system-uicons": "^1.2.4",
|
|
87
87
|
"@iconify-json/uil": "^1.2.3",
|
|
88
|
-
"@iconify-json/vscode-icons": "^1.2.
|
|
89
|
-
"@iconify/json": "^2.2.
|
|
88
|
+
"@iconify-json/vscode-icons": "^1.2.33",
|
|
89
|
+
"@iconify/json": "^2.2.400",
|
|
90
90
|
"@iconify/vue": "^5.0.0",
|
|
91
91
|
"@playform/compress": "^0.2.0",
|
|
92
92
|
"@playform/inline": "^0.1.2",
|
|
@@ -98,14 +98,14 @@
|
|
|
98
98
|
"@unocss/preset-wind": "66.5.4",
|
|
99
99
|
"@unocss/reset": "66.5.4",
|
|
100
100
|
"@vite-pwa/astro": "^1.1.1",
|
|
101
|
-
"@vueuse/core": "^
|
|
101
|
+
"@vueuse/core": "^14.0.0",
|
|
102
102
|
"astro-icon": "^1.1.5",
|
|
103
103
|
"astro-meta-tags": "^0.4.0",
|
|
104
104
|
"astro-navbar": "^2.4.0",
|
|
105
105
|
"astro-pagefind": "^1.8.5",
|
|
106
106
|
"astro-remote": "^0.3.4",
|
|
107
107
|
"dotenv": "^17.2.3",
|
|
108
|
-
"swiper": "^12.0.
|
|
108
|
+
"swiper": "^12.0.3",
|
|
109
109
|
"unocss": "66.5.4",
|
|
110
110
|
"vue": "^3.5.22"
|
|
111
111
|
},
|
|
@@ -113,14 +113,14 @@
|
|
|
113
113
|
"@semantic-release/changelog": "^6.0.3",
|
|
114
114
|
"@semantic-release/git": "^10.0.1",
|
|
115
115
|
"@types/gtag.js": "^0.0.20",
|
|
116
|
-
"@types/node": "^24.
|
|
117
|
-
"@typescript-eslint/eslint-plugin": "^8.46.
|
|
118
|
-
"@typescript-eslint/parser": "^8.46.
|
|
116
|
+
"@types/node": "^24.9.1",
|
|
117
|
+
"@typescript-eslint/eslint-plugin": "^8.46.2",
|
|
118
|
+
"@typescript-eslint/parser": "^8.46.2",
|
|
119
119
|
"@unocss/transformer-variant-group": "66.5.4",
|
|
120
120
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
121
121
|
"@vue/compiler-sfc": "^3.5.22",
|
|
122
122
|
"@vue/eslint-config-typescript": "^14.6.0",
|
|
123
|
-
"astro": "^5.
|
|
123
|
+
"astro": "^5.15.1",
|
|
124
124
|
"conventional-changelog-conventionalcommits": "^9.1.0",
|
|
125
125
|
"eslint": "^9.38.0",
|
|
126
126
|
"eslint-plugin-astro": "^1.3.1",
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
"prettier-plugin-astro": "^0.14.1",
|
|
130
130
|
"semantic-release": "^25.0.1",
|
|
131
131
|
"unocss": "^0.65.0",
|
|
132
|
-
"vite": "^7.1.
|
|
132
|
+
"vite": "^7.1.12"
|
|
133
133
|
},
|
|
134
134
|
"packageManager": "pnpm@10.17.1",
|
|
135
135
|
"pnpm": {
|
|
@@ -12,32 +12,32 @@ export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
|
|
|
12
12
|
export const tableItems = [
|
|
13
13
|
{
|
|
14
14
|
id: "number",
|
|
15
|
-
|
|
15
|
+
label: "Part number",
|
|
16
16
|
value: "6R0071609GRU",
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
id: "prcodes",
|
|
20
|
-
|
|
20
|
+
label: "PR-Codes",
|
|
21
21
|
value: ["PJ4", "CA2", "C4E", "2JZ"],
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
id: "color",
|
|
25
|
-
|
|
25
|
+
label: "Color",
|
|
26
26
|
value: "Black",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
id: "position",
|
|
30
|
-
|
|
30
|
+
label: "Fitting position",
|
|
31
31
|
value: "Front axle",
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
id: "brake-disck-thicnkess",
|
|
35
|
-
|
|
35
|
+
label: "Brake disc thicknes",
|
|
36
36
|
value: "22 mm",
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
id: "weight",
|
|
40
|
-
|
|
40
|
+
label: "Weight",
|
|
41
41
|
value: "5.185 kg"
|
|
42
42
|
}
|
|
43
43
|
];
|
|
@@ -58,35 +58,35 @@ export const tableItems = [
|
|
|
58
58
|
</div>
|
|
59
59
|
|
|
60
60
|
```ts
|
|
61
|
-
|
|
61
|
+
const tableItems = [
|
|
62
62
|
{
|
|
63
63
|
id: "number",
|
|
64
|
-
|
|
64
|
+
label: "Part number",
|
|
65
65
|
value: "6R0071609GRU",
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
id: "prcodes",
|
|
69
|
-
|
|
69
|
+
label: "PR-Codes",
|
|
70
70
|
value: ["PJ4", "CA2", "C4E"]
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
73
|
id: "color",
|
|
74
|
-
|
|
74
|
+
label: "Color",
|
|
75
75
|
value: "Black",
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
id: "position",
|
|
79
|
-
|
|
79
|
+
label: "Fitting position",
|
|
80
80
|
value: "Front axle",
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
id: "brake-disck-thicnkess",
|
|
84
|
-
|
|
84
|
+
label: "Brake disc thicknes",
|
|
85
85
|
value: "22 mm",
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
id: "weight",
|
|
89
|
-
|
|
89
|
+
label: "Weight",
|
|
90
90
|
value: "5.185 kg"
|
|
91
91
|
}
|
|
92
92
|
];
|
|
@@ -103,7 +103,7 @@ export const tableItems = [
|
|
|
103
103
|
</td>
|
|
104
104
|
</ProductDetailsList>
|
|
105
105
|
```
|
|
106
|
-
|
|
106
|
+
### Vue:
|
|
107
107
|
```js
|
|
108
108
|
<ProductDetailsList items={tableItems}>
|
|
109
109
|
<template #number >
|
|
@@ -113,4 +113,85 @@ export const tableItems = [
|
|
|
113
113
|
<ProductCodes as="td" prcodes={prcodesArray} />
|
|
114
114
|
</template>
|
|
115
115
|
</ProductDetailsList>
|
|
116
|
-
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Props
|
|
119
|
+
|
|
120
|
+
### items
|
|
121
|
+
Array of table items with the following structure:
|
|
122
|
+
- `id` (string): Unique identifier for the row, also used for slot names
|
|
123
|
+
- `label` (string): Display name for the table header
|
|
124
|
+
- `value` (unknown): The value to display - can be string, number, boolean, string array, or Link array
|
|
125
|
+
- `type` (optional string): Set to `'links'` for link arrays
|
|
126
|
+
- `isGenericArray` (optional boolean): Set to `true` for generic string arrays
|
|
127
|
+
|
|
128
|
+
### caption
|
|
129
|
+
Optional string for the table caption.
|
|
130
|
+
|
|
131
|
+
## Value Types
|
|
132
|
+
|
|
133
|
+
The component supports multiple value types:
|
|
134
|
+
|
|
135
|
+
### Link Arrays
|
|
136
|
+
Use `type: 'links'` to display an array of links with icons:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
{
|
|
140
|
+
id: "resources",
|
|
141
|
+
label: "Resources",
|
|
142
|
+
type: "links",
|
|
143
|
+
value: [
|
|
144
|
+
{ type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
|
|
145
|
+
{ type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
|
|
146
|
+
{ type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Supported link types with icons:
|
|
152
|
+
- `blog` - Book text icon
|
|
153
|
+
- `youtube` - YouTube icon
|
|
154
|
+
- `vimeo` - Vimeo icon
|
|
155
|
+
- Default - Generic link icon
|
|
156
|
+
|
|
157
|
+
### Generic String Arrays
|
|
158
|
+
Use `isGenericArray: true` to display a bulleted list:
|
|
159
|
+
|
|
160
|
+
```ts
|
|
161
|
+
{
|
|
162
|
+
id: "position",
|
|
163
|
+
label: "Fitting position",
|
|
164
|
+
isGenericArray: true,
|
|
165
|
+
value: ["Front axle", "Rear axle"]
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### HTML Values
|
|
170
|
+
The component automatically detects and renders HTML strings:
|
|
171
|
+
|
|
172
|
+
```ts
|
|
173
|
+
{
|
|
174
|
+
id: "description",
|
|
175
|
+
label: "Description",
|
|
176
|
+
value: "Compatible with <span class='font-bold'>multiple models</span>"
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Simple Values
|
|
181
|
+
Strings, numbers, and booleans are displayed as-is:
|
|
182
|
+
|
|
183
|
+
```ts
|
|
184
|
+
{
|
|
185
|
+
id: "weight",
|
|
186
|
+
label: "Weight",
|
|
187
|
+
value: "5.185 kg"
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Slots
|
|
192
|
+
|
|
193
|
+
### caption
|
|
194
|
+
Override the default caption with custom content.
|
|
195
|
+
|
|
196
|
+
### Row-specific slots
|
|
197
|
+
Use the row's `id` as the slot name to override the default value rendering. The slot receives the entire row as slot props.
|