spoko-design-system 0.2.4 → 0.2.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/dev-dist/sw.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "astro dev",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@iconify-json/circle-flags": "^1.1.46",
|
|
41
41
|
"@iconify-json/el": "^1.1.8",
|
|
42
42
|
"@iconify-json/eos-icons": "^1.1.10",
|
|
43
|
-
"@iconify-json/flowbite": "^1.1.
|
|
43
|
+
"@iconify-json/flowbite": "^1.1.1",
|
|
44
44
|
"@iconify-json/fluent": "^1.1.47",
|
|
45
45
|
"@iconify-json/fluent-emoji": "1.1.18",
|
|
46
46
|
"@iconify-json/icon-park-outline": "^1.1.15",
|
|
@@ -51,16 +51,16 @@
|
|
|
51
51
|
"@iconify-json/ph": "^1.1.11",
|
|
52
52
|
"@iconify-json/simple-icons": "^1.1.90",
|
|
53
53
|
"@iconify-json/uil": "^1.1.8",
|
|
54
|
-
"@iconify/json": "^2.2.
|
|
54
|
+
"@iconify/json": "^2.2.180",
|
|
55
55
|
"@iconify/vue": "^4.1.1",
|
|
56
56
|
"@types/node": "^20.11.16",
|
|
57
|
-
"@unocss/astro": "^0.58.
|
|
58
|
-
"@unocss/preset-attributify": "^0.58.
|
|
59
|
-
"@unocss/preset-typography": "^0.58.
|
|
60
|
-
"@unocss/preset-uno": "^0.58.
|
|
61
|
-
"@unocss/preset-web-fonts": "^0.58.
|
|
62
|
-
"@unocss/preset-wind": "^0.58.
|
|
63
|
-
"@unocss/reset": "^0.58.
|
|
57
|
+
"@unocss/astro": "^0.58.5",
|
|
58
|
+
"@unocss/preset-attributify": "^0.58.5",
|
|
59
|
+
"@unocss/preset-typography": "^0.58.5",
|
|
60
|
+
"@unocss/preset-uno": "^0.58.5",
|
|
61
|
+
"@unocss/preset-web-fonts": "^0.58.5",
|
|
62
|
+
"@unocss/preset-wind": "^0.58.5",
|
|
63
|
+
"@unocss/reset": "^0.58.5",
|
|
64
64
|
"@vite-pwa/astro": "^0.2.0",
|
|
65
65
|
"@vueuse/core": "^10.7.2",
|
|
66
66
|
"astro-compress": "^2.2.9",
|
|
@@ -74,14 +74,14 @@
|
|
|
74
74
|
"i18next-http-backend": "^2.4.3",
|
|
75
75
|
"i18next-vue": "^3.0.0",
|
|
76
76
|
"sass": "^1.70.0",
|
|
77
|
-
"swiper": "^11.0.
|
|
77
|
+
"swiper": "^11.0.6",
|
|
78
78
|
"unocss": "^0.57.7",
|
|
79
79
|
"vite": "^5.0.12",
|
|
80
80
|
"vue": "^3.4.15"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
|
-
"@unocss/transformer-variant-group": "^0.58.
|
|
84
|
-
"astro": "^4.3.
|
|
83
|
+
"@unocss/transformer-variant-group": "^0.58.5",
|
|
84
|
+
"astro": "^4.3.3",
|
|
85
85
|
"unocss": "^0.58.3"
|
|
86
86
|
},
|
|
87
87
|
"pnpm": {
|
|
@@ -21,7 +21,7 @@ const props = defineProps({
|
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
23
|
<template>
|
|
24
|
-
<component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex">
|
|
24
|
+
<component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
|
|
25
25
|
<span :class="styles && styles.length ? styles : 'mt-auto'">
|
|
26
26
|
<b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
|
|
27
27
|
</span>
|
|
@@ -27,31 +27,31 @@ const props = defineProps({
|
|
|
27
27
|
<tbody>
|
|
28
28
|
<tr v-for="row, index in props.items" :key="index">
|
|
29
29
|
<ProductDetailName as="th" :text="row.name" />
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
>
|
|
34
|
-
{{ row.value }}
|
|
35
|
-
</slot>
|
|
36
|
-
</td>
|
|
30
|
+
<slot :name="row.id">
|
|
31
|
+
<td>{{ row.value }}</td>
|
|
32
|
+
</slot>
|
|
37
33
|
</tr>
|
|
38
34
|
</tbody>
|
|
39
35
|
</table>
|
|
40
36
|
</template>
|
|
41
37
|
|
|
42
|
-
<style lang="scss">
|
|
38
|
+
<style lang="scss" scoped>
|
|
43
39
|
.details {
|
|
44
|
-
@apply border-none w-full md:w-auto
|
|
40
|
+
@apply border-none shadow-none w-full md:w-auto
|
|
45
41
|
box-shadow: none;
|
|
46
42
|
|
|
47
43
|
col {
|
|
48
44
|
@apply w-1/2 md:w-auto;
|
|
45
|
+
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
tr {
|
|
49
|
+
@apply border-none;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
td,
|
|
52
52
|
tr,
|
|
53
53
|
th {
|
|
54
|
-
@apply leading-
|
|
54
|
+
@apply leading-none text-sm py-2 border-none text-xs md:(text-sm leading-none) xl:(py-4) 3xl:(text-base leading-none);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
th {
|
|
@@ -59,7 +59,7 @@ const props = defineProps({
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
td {
|
|
62
|
-
@apply relative
|
|
62
|
+
@apply relative;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
</style>
|
|
@@ -47,8 +47,12 @@ export const tableItems = [
|
|
|
47
47
|
<div class="component-preview flex-wrap">
|
|
48
48
|
<div class="bg-white rounded-lg p-8">
|
|
49
49
|
<ProductDetailsList items={tableItems}>
|
|
50
|
-
<
|
|
51
|
-
|
|
50
|
+
<td slot="number" class="pt-0">
|
|
51
|
+
<ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
|
|
52
|
+
</td>
|
|
53
|
+
<td slot="prcodes" class="pt-0">
|
|
54
|
+
<ProductCodes prcodes={prcodesArray} />
|
|
55
|
+
</td>
|
|
52
56
|
</ProductDetailsList>
|
|
53
57
|
</div>
|
|
54
58
|
</div>
|
|
@@ -91,18 +95,22 @@ export const tableItems = [
|
|
|
91
95
|
### Astro:
|
|
92
96
|
```js
|
|
93
97
|
<ProductDetailsList items={tableItems}>
|
|
94
|
-
<
|
|
95
|
-
|
|
98
|
+
<td slot="number" class="pt-0">
|
|
99
|
+
<ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
|
|
100
|
+
</td>
|
|
101
|
+
<td slot="prcodes" class="pt-0">
|
|
102
|
+
<ProductCodes prcodes={prcodesArray} />
|
|
103
|
+
</td>
|
|
96
104
|
</ProductDetailsList>
|
|
97
105
|
```
|
|
98
106
|
### Vue:
|
|
99
107
|
```js
|
|
100
108
|
<ProductDetailsList items={tableItems}>
|
|
101
109
|
<template #number >
|
|
102
|
-
<ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
|
|
110
|
+
<ProductNumber as="td" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
|
|
103
111
|
</template>
|
|
104
112
|
<template #prcodes >
|
|
105
|
-
<ProductCodes prcodes={prcodesArray} />
|
|
113
|
+
<ProductCodes as="td" prcodes={prcodesArray} />
|
|
106
114
|
</template>
|
|
107
115
|
</ProductDetailsList>
|
|
108
116
|
```
|
package/uno.config.ts
CHANGED
|
@@ -28,6 +28,7 @@ export default defineConfig({
|
|
|
28
28
|
transformerVariantGroup(),
|
|
29
29
|
],
|
|
30
30
|
shortcuts: [
|
|
31
|
+
['detail-name', 'text-gray-900 leading-tight font-textlight line-clamp-3 whitespace-normal md:(whitespace-pre-wrap line-clamp-9 font-textregular)'],
|
|
31
32
|
['product-number','font-novamono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
|
|
32
33
|
['colon-after', 'after:content-[":"]'],
|
|
33
34
|
['headline','font-headlight font-bold '],
|
|
@@ -64,10 +65,10 @@ export default defineConfig({
|
|
|
64
65
|
['subcat', 'whitespace-nowrap cursor-pointer text-light-blue-600 dark:text-lightBlue-500 hover:text-lightBlue-600 font-light mb-1 py-2 md:py-0'],
|
|
65
66
|
['product-row','bg-white flex flex-wrap odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:w-auto sm:grid sm:grid-cols-3 gap-x-1 gap-y-0 md:(grid-cols-product gap-x-4) justify-start content-start content-start place-content-start py-4 pb-6 sm:pb-4'],
|
|
66
67
|
['product-row__photo','aspect-ratio-[4/3] mb-2 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0) w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden relative bg-gray-100 md:(col-span-1 row-span-1) box-content'], //filter drop-shadow-sm
|
|
67
|
-
['product-row__description', 'text-xs text-gray-900
|
|
68
|
+
['product-row__description', 'text-xs text-gray-900 leading-tight mt-2 font-textlight line-clamp-3 whitespace-normal md:(text-sm mt-0 font-textregular whitespace-pre-wrap)'],
|
|
68
69
|
['product-row__main', 'w-full sm:w-auto col-span-2 leading-none relative sm:pl-1 md:(pl-0 row-start-1 col-start-2 col-span-1)'],
|
|
69
70
|
['product-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
|
|
70
|
-
|
|
71
|
+
|
|
71
72
|
['detail-row','text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 gap-4 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max)'],
|
|
72
73
|
['product-thumb', 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-gray-100'],
|
|
73
74
|
['product-thumb--plp','aspect-ratio-[4/3] flex items-center flex justify-center mb-3 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'], //filter drop-shadow-sm
|