spoko-design-system 0.7.4 → 0.7.6
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/package.json +19 -19
- package/src/components/ProductDetailsList.vue +80 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"module": "./index.ts",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"spoko design system"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@algolia/client-search": "^5.23.
|
|
43
|
+
"@algolia/client-search": "^5.23.3",
|
|
44
44
|
"@astrojs/mdx": "^4.2.3",
|
|
45
45
|
"@astrojs/node": "^9.1.3",
|
|
46
46
|
"@astrojs/sitemap": "^3.3.0",
|
|
@@ -62,27 +62,27 @@
|
|
|
62
62
|
"@iconify-json/ic": "^1.2.2",
|
|
63
63
|
"@iconify-json/icon-park-outline": "^1.2.2",
|
|
64
64
|
"@iconify-json/la": "^1.2.1",
|
|
65
|
-
"@iconify-json/material-symbols-light": "^1.2.
|
|
65
|
+
"@iconify-json/material-symbols-light": "^1.2.18",
|
|
66
66
|
"@iconify-json/mdi": "^1.2.3",
|
|
67
67
|
"@iconify-json/noto-v1": "^1.2.2",
|
|
68
68
|
"@iconify-json/octicon": "^1.2.5",
|
|
69
69
|
"@iconify-json/ph": "^1.2.2",
|
|
70
|
-
"@iconify-json/simple-icons": "^1.2.
|
|
70
|
+
"@iconify-json/simple-icons": "^1.2.31",
|
|
71
71
|
"@iconify-json/system-uicons": "^1.2.2",
|
|
72
72
|
"@iconify-json/uil": "^1.2.3",
|
|
73
|
-
"@iconify/json": "^2.2.
|
|
73
|
+
"@iconify/json": "^2.2.325",
|
|
74
74
|
"@iconify/vue": "^4.3.0",
|
|
75
|
-
"@playform/compress": "^0.1.
|
|
75
|
+
"@playform/compress": "^0.1.9",
|
|
76
76
|
"@playform/inline": "^0.1.2",
|
|
77
|
-
"@unocss/astro": "66.1.0-beta.
|
|
78
|
-
"@unocss/preset-attributify": "66.1.0-beta.
|
|
79
|
-
"@unocss/preset-typography": "66.1.0-beta.
|
|
80
|
-
"@unocss/preset-uno": "66.1.0-beta.
|
|
81
|
-
"@unocss/preset-web-fonts": "66.1.0-beta.
|
|
82
|
-
"@unocss/preset-wind": "66.1.0-beta.
|
|
83
|
-
"@unocss/reset": "66.1.0-beta.
|
|
77
|
+
"@unocss/astro": "66.1.0-beta.10",
|
|
78
|
+
"@unocss/preset-attributify": "66.1.0-beta.10",
|
|
79
|
+
"@unocss/preset-typography": "66.1.0-beta.10",
|
|
80
|
+
"@unocss/preset-uno": "66.1.0-beta.10",
|
|
81
|
+
"@unocss/preset-web-fonts": "66.1.0-beta.10",
|
|
82
|
+
"@unocss/preset-wind": "66.1.0-beta.10",
|
|
83
|
+
"@unocss/reset": "66.1.0-beta.10",
|
|
84
84
|
"@vite-pwa/astro": "^1.0.0",
|
|
85
|
-
"@vueuse/core": "^13.
|
|
85
|
+
"@vueuse/core": "^13.1.0",
|
|
86
86
|
"astro-i18next": "1.0.0-beta.21",
|
|
87
87
|
"astro-icon": "^1.1.5",
|
|
88
88
|
"astro-meta-tags": "^0.3.1",
|
|
@@ -96,18 +96,18 @@
|
|
|
96
96
|
"i18next-http-backend": "^3.0.2",
|
|
97
97
|
"i18next-vue": "^5.2.0",
|
|
98
98
|
"swiper": "^11.2.6",
|
|
99
|
-
"unocss": "66.1.0-beta.
|
|
99
|
+
"unocss": "66.1.0-beta.10",
|
|
100
100
|
"vue": "^3.5.13"
|
|
101
101
|
},
|
|
102
102
|
"devDependencies": {
|
|
103
103
|
"@types/gtag.js": "^0.0.20",
|
|
104
|
-
"@types/node": "^22.
|
|
105
|
-
"@unocss/transformer-variant-group": "66.1.0-beta.
|
|
104
|
+
"@types/node": "^22.14.0",
|
|
105
|
+
"@unocss/transformer-variant-group": "66.1.0-beta.10",
|
|
106
106
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
107
107
|
"@vue/compiler-sfc": "^3.5.13",
|
|
108
|
-
"astro": "^5.
|
|
108
|
+
"astro": "^5.6.1",
|
|
109
109
|
"unocss": "^0.65.0",
|
|
110
|
-
"vite": "^6.2.
|
|
110
|
+
"vite": "^6.2.5"
|
|
111
111
|
},
|
|
112
112
|
"packageManager": "pnpm@9.15.3",
|
|
113
113
|
"pnpm": {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { PropType } from "vue";
|
|
2
|
+
import { PropType, computed } from "vue";
|
|
3
3
|
import ProductDetailName from "./ProductDetailName.vue";
|
|
4
4
|
|
|
5
5
|
interface TableItem {
|
|
@@ -10,24 +10,84 @@ interface TableItem {
|
|
|
10
10
|
icon?: boolean;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
interface GroupedLink {
|
|
14
|
+
id: string;
|
|
15
|
+
links: {
|
|
16
|
+
name: string;
|
|
17
|
+
value: string;
|
|
18
|
+
}[];
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
const props = defineProps({
|
|
14
22
|
items: { type: Array as PropType<TableItem[]>, default: () => [] },
|
|
15
23
|
caption: { type: String, default: null }
|
|
16
24
|
});
|
|
17
25
|
|
|
26
|
+
// Function for checking whether a value is a link
|
|
18
27
|
const isLink = (id: string) => {
|
|
19
28
|
return ['blog', 'youtube', 'vimeo'].includes(id);
|
|
20
29
|
};
|
|
21
30
|
|
|
22
|
-
|
|
23
|
-
const getHeaderText = (row: TableItem) => {
|
|
31
|
+
// Function for specifying header text
|
|
32
|
+
const getHeaderText = (row: TableItem | GroupedLink) => {
|
|
33
|
+
// For the blog, we use id instead of name
|
|
24
34
|
if (row.id === 'blog') {
|
|
25
|
-
return row.id.charAt(0).toUpperCase() + row.id.slice(1);
|
|
35
|
+
return row.id.charAt(0).toUpperCase() + row.id.slice(1); // "Blog" z dużej litery
|
|
26
36
|
}
|
|
27
37
|
|
|
38
|
+
// For other types, we use name (if it is GroupedLink, there is no name)
|
|
39
|
+
return 'name' in row ? row.name : row.id.charAt(0).toUpperCase() + row.id.slice(1);
|
|
40
|
+
};
|
|
28
41
|
|
|
29
|
-
|
|
42
|
+
// Function to determine the icon class for a link type
|
|
43
|
+
const getLinkIconClass = (linkId: string) => {
|
|
44
|
+
switch (linkId) {
|
|
45
|
+
case 'blog':
|
|
46
|
+
return 'i-lucide-book-text';
|
|
47
|
+
case 'youtube':
|
|
48
|
+
return 'i-simple-icons-youtube';
|
|
49
|
+
case 'vimeo':
|
|
50
|
+
return 'i-simple-icons-vimeo';
|
|
51
|
+
default:
|
|
52
|
+
return 'i-lucide-link';
|
|
53
|
+
}
|
|
30
54
|
};
|
|
55
|
+
|
|
56
|
+
// Grouping of elements by id
|
|
57
|
+
const groupedItems = computed(() => {
|
|
58
|
+
const result: (TableItem | GroupedLink)[] = [];
|
|
59
|
+
const linkGroups = new Map<string, GroupedLink>();
|
|
60
|
+
|
|
61
|
+
// We process all elements
|
|
62
|
+
props.items.forEach(item => {
|
|
63
|
+
// If it's a link (blog, youtube, vimeo)
|
|
64
|
+
if (isLink(item.id)) {
|
|
65
|
+
// Add a link to the relevant group
|
|
66
|
+
if (!linkGroups.has(item.id)) {
|
|
67
|
+
linkGroups.set(item.id, {
|
|
68
|
+
id: item.id,
|
|
69
|
+
links: []
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Dodajemy link do odpowiedniej grupy
|
|
74
|
+
linkGroups.get(item.id)?.links.push({
|
|
75
|
+
name: item.name,
|
|
76
|
+
value: item.value as string
|
|
77
|
+
});
|
|
78
|
+
} else {
|
|
79
|
+
// If it is not a link, we add it normally to the results
|
|
80
|
+
result.push(item);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// Add all link groups at the end
|
|
85
|
+
linkGroups.forEach(group => {
|
|
86
|
+
result.push(group);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
return result;
|
|
90
|
+
});
|
|
31
91
|
</script>
|
|
32
92
|
|
|
33
93
|
<template>
|
|
@@ -40,16 +100,24 @@ const getHeaderText = (row: TableItem) => {
|
|
|
40
100
|
<col>
|
|
41
101
|
</colgroup>
|
|
42
102
|
<tbody>
|
|
43
|
-
<tr v-for="row, index in
|
|
103
|
+
<tr v-for="row, index in groupedItems" :key="index">
|
|
104
|
+
<!-- We use the getHeaderText function to specify the header text -->
|
|
44
105
|
<ProductDetailName as="th" :text="getHeaderText(row)" />
|
|
45
106
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
107
|
+
<!-- Handling link groups -->
|
|
108
|
+
<td v-if="'links' in row" class="link-cell">
|
|
109
|
+
<ul class="list-none p-0 m-0">
|
|
110
|
+
<li v-for="(link, linkIndex) in row.links" :key="linkIndex" class="mb-2 last:mb-0 flex items-center">
|
|
111
|
+
<span :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
|
|
112
|
+
<a :href="link.value" target="_blank" rel="noopener noreferrer" class="link-primary">
|
|
113
|
+
{{ link.name }}
|
|
114
|
+
</a>
|
|
115
|
+
</li>
|
|
116
|
+
</ul>
|
|
50
117
|
</td>
|
|
51
118
|
|
|
52
|
-
|
|
119
|
+
<!-- Support for standard types -->
|
|
120
|
+
<slot v-else-if="'id' in row" :name="row.id">
|
|
53
121
|
<td>{{ row.value }}</td>
|
|
54
122
|
</slot>
|
|
55
123
|
</tr>
|
|
@@ -85,6 +153,6 @@ const getHeaderText = (row: TableItem) => {
|
|
|
85
153
|
}
|
|
86
154
|
|
|
87
155
|
.link-primary {
|
|
88
|
-
@apply text-
|
|
156
|
+
@apply leading-none text-brand-primary hover:text-accent-light hover:underline;
|
|
89
157
|
}
|
|
90
158
|
</style>
|