spoko-design-system 0.7.7 → 0.7.9
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/.astro/data-store.json +1 -1
- package/.astro/settings.json +4 -4
- package/.astro/types.d.ts +0 -1
- package/package.json +37 -37
- package/src/components/Breadcrumbs.vue +34 -50
- package/src/components/FeaturesList.vue +12 -16
- package/src/components/Post/PostCategories.vue +3 -11
- package/src/components/PrCode.vue +1 -1
- package/src/components/ProductDetailsList.vue +15 -43
- package/uno-config/index.ts +10 -0
- package/uno-config/theme/shortcuts/components.ts +32 -1
- package/src/components/Product/ProductCodes.vue +0 -174
package/.astro/data-store.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.
|
|
1
|
+
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.9.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"experimentalDefaultStyles\":true},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
|
package/.astro/settings.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
{
|
|
2
|
-
"_variables": {
|
|
3
|
-
"lastUpdateCheck":
|
|
4
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"_variables": {
|
|
3
|
+
"lastUpdateCheck": 1749557085797
|
|
4
|
+
}
|
|
5
5
|
}
|
package/.astro/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"module": "./index.ts",
|
|
@@ -40,74 +40,74 @@
|
|
|
40
40
|
"spoko design system"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@algolia/client-search": "^5.
|
|
44
|
-
"@astrojs/mdx": "^4.
|
|
45
|
-
"@astrojs/node": "^9.
|
|
46
|
-
"@astrojs/sitemap": "^3.
|
|
43
|
+
"@algolia/client-search": "^5.27.0",
|
|
44
|
+
"@astrojs/mdx": "^4.3.0",
|
|
45
|
+
"@astrojs/node": "^9.2.2",
|
|
46
|
+
"@astrojs/sitemap": "^3.4.1",
|
|
47
47
|
"@astrojs/ts-plugin": "^1.10.4",
|
|
48
|
-
"@astrojs/vue": "^5.0
|
|
48
|
+
"@astrojs/vue": "^5.1.0",
|
|
49
49
|
"@docsearch/css": "^3.9.0",
|
|
50
50
|
"@iconify-json/ant-design": "^1.2.5",
|
|
51
|
-
"@iconify-json/bi": "^1.2.
|
|
51
|
+
"@iconify-json/bi": "^1.2.4",
|
|
52
52
|
"@iconify-json/bx": "^1.2.2",
|
|
53
|
-
"@iconify-json/carbon": "^1.2.
|
|
53
|
+
"@iconify-json/carbon": "^1.2.9",
|
|
54
54
|
"@iconify-json/circle-flags": "^1.2.6",
|
|
55
55
|
"@iconify-json/ei": "^1.2.2",
|
|
56
56
|
"@iconify-json/el": "^1.2.1",
|
|
57
57
|
"@iconify-json/eos-icons": "^1.2.2",
|
|
58
58
|
"@iconify-json/et": "^1.2.1",
|
|
59
59
|
"@iconify-json/flowbite": "^1.2.5",
|
|
60
|
-
"@iconify-json/fluent": "^1.2.
|
|
60
|
+
"@iconify-json/fluent": "^1.2.23",
|
|
61
61
|
"@iconify-json/fluent-emoji": "1.2.3",
|
|
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.25",
|
|
66
66
|
"@iconify-json/mdi": "^1.2.3",
|
|
67
67
|
"@iconify-json/noto-v1": "^1.2.2",
|
|
68
|
-
"@iconify-json/octicon": "^1.2.
|
|
68
|
+
"@iconify-json/octicon": "^1.2.6",
|
|
69
69
|
"@iconify-json/ph": "^1.2.2",
|
|
70
|
-
"@iconify-json/simple-icons": "^1.2.
|
|
70
|
+
"@iconify-json/simple-icons": "^1.2.38",
|
|
71
71
|
"@iconify-json/system-uicons": "^1.2.2",
|
|
72
72
|
"@iconify-json/uil": "^1.2.3",
|
|
73
|
-
"@iconify/json": "^2.2.
|
|
74
|
-
"@iconify/vue": "^
|
|
75
|
-
"@playform/compress": "^0.
|
|
73
|
+
"@iconify/json": "^2.2.347",
|
|
74
|
+
"@iconify/vue": "^5.0.0",
|
|
75
|
+
"@playform/compress": "^0.2.0",
|
|
76
76
|
"@playform/inline": "^0.1.2",
|
|
77
|
-
"@unocss/astro": "66.1.
|
|
78
|
-
"@unocss/preset-attributify": "66.1.
|
|
79
|
-
"@unocss/preset-typography": "66.1.
|
|
80
|
-
"@unocss/preset-uno": "66.1.
|
|
81
|
-
"@unocss/preset-web-fonts": "66.1.
|
|
82
|
-
"@unocss/preset-wind": "66.1.
|
|
83
|
-
"@unocss/reset": "66.1.
|
|
84
|
-
"@vite-pwa/astro": "^1.0
|
|
85
|
-
"@vueuse/core": "^13.
|
|
77
|
+
"@unocss/astro": "66.1.4",
|
|
78
|
+
"@unocss/preset-attributify": "66.1.4",
|
|
79
|
+
"@unocss/preset-typography": "66.1.4",
|
|
80
|
+
"@unocss/preset-uno": "66.1.4",
|
|
81
|
+
"@unocss/preset-web-fonts": "66.1.4",
|
|
82
|
+
"@unocss/preset-wind": "66.1.4",
|
|
83
|
+
"@unocss/reset": "66.1.4",
|
|
84
|
+
"@vite-pwa/astro": "^1.1.0",
|
|
85
|
+
"@vueuse/core": "^13.3.0",
|
|
86
86
|
"astro-i18next": "1.0.0-beta.21",
|
|
87
87
|
"astro-icon": "^1.1.5",
|
|
88
|
-
"astro-meta-tags": "^0.3.
|
|
88
|
+
"astro-meta-tags": "^0.3.2",
|
|
89
89
|
"astro-navbar": "^2.3.9",
|
|
90
90
|
"astro-pagefind": "^1.8.3",
|
|
91
91
|
"astro-remote": "^0.3.4",
|
|
92
92
|
"dotenv": "^16.5.0",
|
|
93
|
-
"i18next": "^
|
|
94
|
-
"i18next-browser-languagedetector": "^8.0
|
|
93
|
+
"i18next": "^25.2.1",
|
|
94
|
+
"i18next-browser-languagedetector": "^8.1.0",
|
|
95
95
|
"i18next-fs-backend": "^2.6.0",
|
|
96
96
|
"i18next-http-backend": "^3.0.2",
|
|
97
|
-
"i18next-vue": "^5.
|
|
98
|
-
"swiper": "^11.2.
|
|
99
|
-
"unocss": "66.1.
|
|
100
|
-
"vue": "^3.5.
|
|
97
|
+
"i18next-vue": "^5.3.0",
|
|
98
|
+
"swiper": "^11.2.8",
|
|
99
|
+
"unocss": "66.1.4",
|
|
100
|
+
"vue": "^3.5.16"
|
|
101
101
|
},
|
|
102
102
|
"devDependencies": {
|
|
103
103
|
"@types/gtag.js": "^0.0.20",
|
|
104
|
-
"@types/node": "^
|
|
105
|
-
"@unocss/transformer-variant-group": "66.1.
|
|
106
|
-
"@vitejs/plugin-vue": "^5.2.
|
|
107
|
-
"@vue/compiler-sfc": "^3.5.
|
|
108
|
-
"astro": "^5.
|
|
104
|
+
"@types/node": "^24.0.0",
|
|
105
|
+
"@unocss/transformer-variant-group": "66.1.4",
|
|
106
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
107
|
+
"@vue/compiler-sfc": "^3.5.16",
|
|
108
|
+
"astro": "^5.9.2",
|
|
109
109
|
"unocss": "^0.65.0",
|
|
110
|
-
"vite": "^6.
|
|
110
|
+
"vite": "^6.3.5"
|
|
111
111
|
},
|
|
112
112
|
"packageManager": "pnpm@9.15.3",
|
|
113
113
|
"pnpm": {
|
|
@@ -32,76 +32,60 @@ const props = defineProps({
|
|
|
32
32
|
}
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
const isLast = (index:
|
|
35
|
+
const isLast = (index: number) => {
|
|
36
36
|
return index === props.breadcrumbs.length - 1
|
|
37
37
|
}
|
|
38
38
|
</script>
|
|
39
39
|
|
|
40
40
|
<template>
|
|
41
41
|
<nav>
|
|
42
|
-
<ul class="breadcrumbs
|
|
43
|
-
<li v-if="props.showBack" class="breadcrumb-item
|
|
42
|
+
<ul class="breadcrumbs-base">
|
|
43
|
+
<li v-if="props.showBack" class="breadcrumb-item">
|
|
44
44
|
<button
|
|
45
|
-
class="breadcrumb-
|
|
46
|
-
:title="props.textBack"
|
|
45
|
+
class="breadcrumb-back-btn"
|
|
46
|
+
:title="props.textBack"
|
|
47
|
+
onclick="history.back()"
|
|
48
|
+
>
|
|
47
49
|
<span class="block px-3" i-bx-bx-arrow-back />
|
|
48
50
|
</button>
|
|
49
51
|
</li>
|
|
50
52
|
</ul>
|
|
51
|
-
<ul class="breadcrumbs
|
|
52
|
-
|
|
53
|
-
<li v-if="props.showHome" class="breadcrumb-item
|
|
53
|
+
<ul class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12"
|
|
54
|
+
itemscope itemtype="https://schema.org/BreadcrumbList">
|
|
55
|
+
<li v-if="props.showHome" class="breadcrumb-item">
|
|
54
56
|
<a href="/"
|
|
55
|
-
class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto
|
|
56
|
-
:title="textBack"
|
|
57
|
+
class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
|
|
58
|
+
:title="props.textBack"
|
|
59
|
+
itemprop="item"
|
|
60
|
+
i-carbon-home>
|
|
57
61
|
</a>
|
|
58
62
|
<meta itemprop="position" content="1">
|
|
59
63
|
</li>
|
|
60
|
-
<li v-for="(crumb, index) in
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
itemprop="
|
|
64
|
+
<li v-for="(crumb, index) in breadcrumbs"
|
|
65
|
+
:key="index"
|
|
66
|
+
class="breadcrumb-item"
|
|
67
|
+
itemprop="itemListElement"
|
|
68
|
+
itemscope
|
|
69
|
+
itemtype="https://schema.org/ListItem">
|
|
70
|
+
<!-- Add separator as template content instead of CSS ::before -->
|
|
71
|
+
<span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
|
|
72
|
+
|
|
73
|
+
<a v-if="!isLast(index)"
|
|
74
|
+
:href="crumb.path"
|
|
75
|
+
class="breadcrumb-link"
|
|
76
|
+
itemprop="item"
|
|
77
|
+
:title="`Polo 6R ${crumb.name}`">
|
|
64
78
|
<strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
|
|
65
79
|
</a>
|
|
66
|
-
<a v-else
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
80
|
+
<a v-else
|
|
81
|
+
:href="crumb.path"
|
|
82
|
+
class="breadcrumb-link breadcrumb-link-disabled"
|
|
83
|
+
:title="`Polo 6R ${crumb.name} ${productNumber}`">
|
|
84
|
+
<strong class="font-normal" itemprop="name" v-html="crumb.name" />
|
|
85
|
+
<b class="hidden sm:inline font-normal">{{ productNumber }}</b>
|
|
70
86
|
</a>
|
|
71
87
|
<meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
|
|
72
88
|
</li>
|
|
73
89
|
</ul>
|
|
74
90
|
</nav>
|
|
75
91
|
</template>
|
|
76
|
-
|
|
77
|
-
<style scoped>.breadcrumbs {
|
|
78
|
-
list-style: none;
|
|
79
|
-
font-size: 0.875rem;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.breadcrumb-item + .breadcrumb-item::before {
|
|
83
|
-
@apply py-4.25 sm:py-1 px-1;
|
|
84
|
-
display: inline-block;
|
|
85
|
-
padding-right: .5rem;
|
|
86
|
-
color: #bdbdbd;
|
|
87
|
-
content: "/";
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.breadcrumb-item b {
|
|
91
|
-
@apply hidden sm:inline font-normal;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.breadcrumb-link {
|
|
95
|
-
border: 0;
|
|
96
|
-
cursor: pointer;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.breadcrumb-link--disabled {
|
|
100
|
-
cursor: default;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.breadcrumb-link--disabled:hover {
|
|
104
|
-
color: inherit;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
</style>
|
|
@@ -17,25 +17,21 @@ const props = defineProps({
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
|
-
<h2
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
<h2
|
|
21
|
+
class="features-list-caption"
|
|
22
|
+
v-if="props.caption"
|
|
23
|
+
>
|
|
24
|
+
{{ props.caption }}
|
|
25
|
+
</h2>
|
|
26
|
+
<ul class="features-list-ul">
|
|
27
|
+
<li
|
|
28
|
+
v-for="item in props.items"
|
|
29
|
+
class="features-list-item"
|
|
30
|
+
:key="item"
|
|
31
|
+
>
|
|
23
32
|
{{ item }}
|
|
24
33
|
</li>
|
|
25
34
|
</ul>
|
|
26
35
|
</template>
|
|
27
36
|
|
|
28
37
|
|
|
29
|
-
<style scoped>
|
|
30
|
-
ul {
|
|
31
|
-
@apply list-square pl-5;
|
|
32
|
-
|
|
33
|
-
li {
|
|
34
|
-
@apply relative mb-2;
|
|
35
|
-
|
|
36
|
-
&::marker {
|
|
37
|
-
@apply text-blue-400;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
</style>
|
|
@@ -20,20 +20,12 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
20
20
|
<template>
|
|
21
21
|
<a
|
|
22
22
|
:href="props.category.link"
|
|
23
|
-
class="category-link"
|
|
24
|
-
:class="{ 'active': props.active }"
|
|
23
|
+
class="category-link-base"
|
|
24
|
+
:class="{ 'category-link-active': props.active }"
|
|
25
25
|
:title="props.category.description || props.category.name"
|
|
26
26
|
>
|
|
27
27
|
{{ props.category.name }}
|
|
28
28
|
</a>
|
|
29
29
|
</template>
|
|
30
30
|
|
|
31
|
-
<style
|
|
32
|
-
.category-link {
|
|
33
|
-
@apply text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.category-link.active {
|
|
37
|
-
@apply text-blue-500;
|
|
38
|
-
}
|
|
39
|
-
</style>
|
|
31
|
+
<!-- No <style> section - all styles are now UnoCSS shortcuts -->
|
|
@@ -23,14 +23,14 @@ const props = defineProps({
|
|
|
23
23
|
caption: { type: String, default: null }
|
|
24
24
|
});
|
|
25
25
|
|
|
26
|
-
//
|
|
26
|
+
// Function for checking whether a value is a link
|
|
27
27
|
const isLink = (id: string) => {
|
|
28
28
|
return ['blog', 'youtube', 'vimeo'].includes(id);
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
// Function for specifying header text
|
|
32
32
|
const getHeaderText = (row: TableItem | GroupedLink) => {
|
|
33
|
-
//
|
|
33
|
+
// For the blog, we use id instead of name
|
|
34
34
|
if (row.id === 'blog') {
|
|
35
35
|
return row.id.charAt(0).toUpperCase() + row.id.slice(1); // "Blog" z dużej litery
|
|
36
36
|
}
|
|
@@ -39,7 +39,7 @@ const getHeaderText = (row: TableItem | GroupedLink) => {
|
|
|
39
39
|
return 'name' in row ? row.name : row.id.charAt(0).toUpperCase() + row.id.slice(1);
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
//
|
|
42
|
+
// Function to determine the icon class for a link type
|
|
43
43
|
const getLinkIconClass = (linkId: string) => {
|
|
44
44
|
switch (linkId) {
|
|
45
45
|
case 'blog':
|
|
@@ -91,21 +91,25 @@ const groupedItems = computed(() => {
|
|
|
91
91
|
</script>
|
|
92
92
|
|
|
93
93
|
<template>
|
|
94
|
-
<table class="details
|
|
94
|
+
<table class="details-table">
|
|
95
95
|
<caption v-if="!!$slots.caption || caption">
|
|
96
96
|
<slot name="caption">{{ caption }}</slot>
|
|
97
97
|
</caption>
|
|
98
98
|
<colgroup>
|
|
99
|
-
<col>
|
|
100
|
-
<col>
|
|
99
|
+
<col class="details-table-col">
|
|
100
|
+
<col class="details-table-col">
|
|
101
101
|
</colgroup>
|
|
102
102
|
<tbody>
|
|
103
|
-
<tr v-for="row, index in groupedItems" :key="index">
|
|
103
|
+
<tr v-for="row, index in groupedItems" :key="index" class="details-table-row">
|
|
104
104
|
<!-- We use the getHeaderText function to specify the header text -->
|
|
105
|
-
<ProductDetailName
|
|
105
|
+
<ProductDetailName
|
|
106
|
+
as="th"
|
|
107
|
+
:text="getHeaderText(row)"
|
|
108
|
+
class="details-table-header"
|
|
109
|
+
/>
|
|
106
110
|
|
|
107
111
|
<!-- Handling link groups -->
|
|
108
|
-
<td v-if="'links' in row" class="
|
|
112
|
+
<td v-if="'links' in row" class="details-table-cell">
|
|
109
113
|
<ul class="list-none p-0 m-0">
|
|
110
114
|
<li v-for="(link, linkIndex) in row.links" :key="linkIndex" class="mb-2 last:mb-0 flex items-center">
|
|
111
115
|
<span :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
|
|
@@ -116,43 +120,11 @@ const groupedItems = computed(() => {
|
|
|
116
120
|
</ul>
|
|
117
121
|
</td>
|
|
118
122
|
|
|
119
|
-
<!--
|
|
123
|
+
<!-- Support for standard types -->
|
|
120
124
|
<slot v-else-if="'id' in row" :name="row.id">
|
|
121
|
-
<td>{{ row.value }}</td>
|
|
125
|
+
<td class="details-table-cell">{{ row.value }}</td>
|
|
122
126
|
</slot>
|
|
123
127
|
</tr>
|
|
124
128
|
</tbody>
|
|
125
129
|
</table>
|
|
126
130
|
</template>
|
|
127
|
-
|
|
128
|
-
<style scoped>
|
|
129
|
-
.details {
|
|
130
|
-
@apply border-none shadow-none w-full md:w-auto;
|
|
131
|
-
box-shadow: none;
|
|
132
|
-
|
|
133
|
-
col {
|
|
134
|
-
@apply w-1/2 md:w-auto;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
tr {
|
|
138
|
-
@apply border-none;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
tr,
|
|
142
|
-
th {
|
|
143
|
-
@apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
th {
|
|
147
|
-
@apply px-0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
td {
|
|
151
|
-
@apply relative;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.link-primary {
|
|
156
|
-
@apply leading-none text-brand-primary hover:text-accent-light hover:underline;
|
|
157
|
-
}
|
|
158
|
-
</style>
|
package/uno-config/index.ts
CHANGED
|
@@ -105,6 +105,16 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
|
|
|
105
105
|
safelist: [
|
|
106
106
|
// Existing safelist items
|
|
107
107
|
'md:grid-cols-product',
|
|
108
|
+
|
|
109
|
+
'breadcrumb-link-disabled',
|
|
110
|
+
'breadcrumb-link',
|
|
111
|
+
'breadcrumb-item',
|
|
112
|
+
'features-list-caption',
|
|
113
|
+
'features-list-ul',
|
|
114
|
+
'features-list-item',
|
|
115
|
+
|
|
116
|
+
'category-link-base',
|
|
117
|
+
'category-link-active',
|
|
108
118
|
|
|
109
119
|
// Base peer class
|
|
110
120
|
'peer',
|
|
@@ -89,5 +89,36 @@ export const componentShortcuts = [
|
|
|
89
89
|
['product-link', PRODUCT_STYLES.link.base],
|
|
90
90
|
['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
|
|
91
91
|
['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
|
|
92
|
-
['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`]
|
|
92
|
+
['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
// FeaturesList component
|
|
96
|
+
['features-list', 'mb-6'],
|
|
97
|
+
['features-list-item', 'leading-5 relative mb-2'],
|
|
98
|
+
['features-list-ul', 'list-square pl-5 mb-6 marker:[color:#00b0f0]'],
|
|
99
|
+
|
|
100
|
+
['features-list-caption', 'mb-2 colon-after text-xl font-textbold block leading-none'],
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
// Breadcrumbs
|
|
105
|
+
['breadcrumbs-base', 'flex items-center p-0 leading-none list-none text-sm'],
|
|
106
|
+
['breadcrumb-item', 'flex'],
|
|
107
|
+
['breadcrumb-link', 'border-0 cursor-pointer whitespace-nowrap py-4.25 sm:py-1 px-1'],
|
|
108
|
+
['breadcrumb-link-disabled', 'cursor-default pointer-events-none'],
|
|
109
|
+
['breadcrumb-back-btn', 'flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light whitespace-nowrap my-auto'],
|
|
110
|
+
|
|
111
|
+
// PostCategories
|
|
112
|
+
['category-link-base', 'text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors'],
|
|
113
|
+
['category-link-active', 'text-blue-500'],
|
|
114
|
+
|
|
115
|
+
// Details table
|
|
116
|
+
['details-table', 'border-none shadow-none w-full md:w-auto'],
|
|
117
|
+
['details-table-row', 'border-none'],
|
|
118
|
+
['details-table-header', 'leading-none text-3.5 py-2 border-none xl:py-4 3xl:text-4 px-0 text-left'],
|
|
119
|
+
['details-table-cell', 'relative'],
|
|
120
|
+
['details-table-col', 'w-1/2 md:w-auto'],
|
|
121
|
+
['link-primary', 'leading-none text-brand-primary hover:text-accent-light hover:underline'],
|
|
122
|
+
|
|
123
|
+
|
|
93
124
|
];
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
import type { PropType } from 'vue'
|
|
3
|
-
|
|
4
|
-
const props = defineProps({
|
|
5
|
-
prcodes: {
|
|
6
|
-
type: Object as PropType<string[] | null>,
|
|
7
|
-
default: null,
|
|
8
|
-
required: true,
|
|
9
|
-
},
|
|
10
|
-
isPdp: {
|
|
11
|
-
type: Boolean,
|
|
12
|
-
default: false,
|
|
13
|
-
required: false,
|
|
14
|
-
},
|
|
15
|
-
})
|
|
16
|
-
|
|
17
|
-
const codes = props.prcodes || []
|
|
18
|
-
const decodedCodes = codes ? codes.sort() : []
|
|
19
|
-
|
|
20
|
-
const settings = {
|
|
21
|
-
prcodes: decodedCodes,
|
|
22
|
-
}
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<template>
|
|
26
|
-
|
|
27
|
-
<span
|
|
28
|
-
v-for="(prcode, index) in settings.prcodes"
|
|
29
|
-
:key="index"
|
|
30
|
-
class="not-last:mr-1"
|
|
31
|
-
>
|
|
32
|
-
<span data-pagefind-filter="PR-Code"
|
|
33
|
-
v-if="!String(prcode).includes('+')"
|
|
34
|
-
class="btn-prcode "
|
|
35
|
-
:class="`btn-prcode--${prcode}`"
|
|
36
|
-
>
|
|
37
|
-
{{ prcode }}
|
|
38
|
-
</span>
|
|
39
|
-
<span v-else >
|
|
40
|
-
<span v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" class="btn-prcode" :class="`btn-prcode--${splittedCode} ${isPdp ? ' btn-prcode--pdp' : ''}` " data-pagefind-filter="PR-Code">
|
|
41
|
-
{{ splittedCode }}
|
|
42
|
-
</span>
|
|
43
|
-
</span>
|
|
44
|
-
</span>
|
|
45
|
-
|
|
46
|
-
</template>
|
|
47
|
-
|
|
48
|
-
<style scoped>
|
|
49
|
-
.btn-prcode {
|
|
50
|
-
@apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-darker after:absolute after:w-4 text-center;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.btn-prcode--pdp {
|
|
54
|
-
@apply mb-1;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.btn-prcode::before {
|
|
58
|
-
@apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light;
|
|
59
|
-
display: none;
|
|
60
|
-
position: absolute;
|
|
61
|
-
text-align: center;
|
|
62
|
-
top: -10px;
|
|
63
|
-
transform: translateY(-50%) translateX(-50%);
|
|
64
|
-
left: 50%;
|
|
65
|
-
z-index: 50;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.btn-prcode:hover::before {
|
|
69
|
-
display: block;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.btn-prcode--2JK {
|
|
73
|
-
color: #f3881d;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.btn-prcode--2JK::before {
|
|
77
|
-
content: 'CROSS';
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.btn-prcode--1LR,
|
|
81
|
-
.btn-prcode--1ZG,
|
|
82
|
-
.btn-prcode--1ZJ {
|
|
83
|
-
&::before {
|
|
84
|
-
content: '⌀ 256 mm';
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.btn-prcode--1KD,
|
|
89
|
-
.btn-prcode--1ZP,
|
|
90
|
-
.btn-prcode--1ZR {
|
|
91
|
-
&::before {
|
|
92
|
-
content: '⌀ 310 mm';
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.btn-prcode--1ZD,
|
|
97
|
-
.btn-prcode--1ZC,
|
|
98
|
-
.btn-prcode--1LN {
|
|
99
|
-
&::before {
|
|
100
|
-
content: '⌀ 288 mm; LUCAS';
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.btn-prcode--2JZ {
|
|
105
|
-
@apply text-accent-light;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.btn-prcode--2JZ::before {
|
|
109
|
-
content: 'Bluemotion';
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.btn-prcode--7L6 {
|
|
113
|
-
@apply text-accent-light;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.btn-prcode--7L6::before {
|
|
117
|
-
content: 'Bluemotion (CFWA + start-stop)';
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.btn-prcode--1KK,
|
|
121
|
-
.btn-prcode--1KT,
|
|
122
|
-
.btn-prcode--1KV,
|
|
123
|
-
.btn-prcode--1LV,
|
|
124
|
-
.btn-prcode--2EJ {
|
|
125
|
-
&::before {
|
|
126
|
-
content: '⌀ 230 mm';
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.btn-prcode--2JE {
|
|
131
|
-
@apply text-accent-dark;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.btn-prcode--2JE::before {
|
|
135
|
-
content: 'BlueGT';
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.btn-prcode--2JP::before {
|
|
139
|
-
content: 'R-Line';
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.btn-prcode--E5M,
|
|
143
|
-
.btn-prcode--1KD,
|
|
144
|
-
.btn-prcode--1ZP,
|
|
145
|
-
.btn-prcode--2JQ,
|
|
146
|
-
.btn-prcode--TA2 {
|
|
147
|
-
color: blue;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.btn-prcode--E5M::before,
|
|
151
|
-
.btn-prcode--1KD::before,
|
|
152
|
-
.btn-prcode--1ZP::before,
|
|
153
|
-
.btn-prcode--2JQ::before,
|
|
154
|
-
.btn-prcode--TA2::before {
|
|
155
|
-
content: 'R WRC Street';
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.btn-prcode--1KV,
|
|
159
|
-
.btn-prcode--1ZD,
|
|
160
|
-
.btn-prcode--1ZR,
|
|
161
|
-
.btn-prcode--0NH,
|
|
162
|
-
.btn-prcode--2JD {
|
|
163
|
-
color: red;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.btn-prcode--1KV::before,
|
|
167
|
-
.btn-prcode--1ZD::before,
|
|
168
|
-
.btn-prcode--1ZR::before,
|
|
169
|
-
.btn-prcode--0NH::before,
|
|
170
|
-
.btn-prcode--2JD::before {
|
|
171
|
-
content: 'GTI';
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
</style>
|