spoko-design-system 0.1.3 → 0.1.4
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 +12 -12
- package/src/components/Headline.vue +1 -1
- package/src/components/ProductDetailName.vue +56 -0
- package/src/components/ProductDetailsList.vue +36 -0
- package/src/components/SlimBanner.vue +2 -2
- package/src/config.ts +1 -0
- package/src/layouts/Layout.astro +1 -1
- package/src/pages/components/card.mdx +30 -72
- package/src/pages/components/details-list.mdx +66 -0
- package/src/pages/components/table.mdx +6 -6
- package/src/pages/index.astro +2 -2
- package/src/styles/base/_typography.scss +1 -0
- package/uno.config.ts +3 -3
- /package/src/components/{MainTable.vue → Table.vue} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "astro dev",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@algolia/client-search": "^4.22.1",
|
|
31
|
-
"@astrojs/mdx": "^2.1.
|
|
31
|
+
"@astrojs/mdx": "^2.1.1",
|
|
32
32
|
"@astrojs/node": "^7.0.4",
|
|
33
33
|
"@astrojs/sitemap": "^3.0.5",
|
|
34
34
|
"@astrojs/vue": "^4.0.8",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@iconify-json/el": "^1.1.8",
|
|
43
43
|
"@iconify-json/eos-icons": "^1.1.10",
|
|
44
44
|
"@iconify-json/flowbite": "^1.1.0",
|
|
45
|
-
"@iconify-json/fluent": "^1.1.
|
|
45
|
+
"@iconify-json/fluent": "^1.1.47",
|
|
46
46
|
"@iconify-json/fluent-emoji": "1.1.18",
|
|
47
47
|
"@iconify-json/icon-park-outline": "^1.1.15",
|
|
48
48
|
"@iconify-json/la": "^1.1.8",
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"@iconify-json/noto-v1": "^1.1.11",
|
|
51
51
|
"@iconify-json/octicon": "^1.1.52",
|
|
52
52
|
"@iconify-json/ph": "^1.1.10",
|
|
53
|
-
"@iconify-json/simple-icons": "^1.
|
|
53
|
+
"@iconify-json/simple-icons": "^1.1.90",
|
|
54
54
|
"@iconify-json/uil": "^1.1.8",
|
|
55
|
-
"@iconify/json": "^2.2.
|
|
55
|
+
"@iconify/json": "^2.2.177",
|
|
56
56
|
"@iconify/vue": "^4.1.1",
|
|
57
|
-
"@types/node": "^20.11.
|
|
57
|
+
"@types/node": "^20.11.14",
|
|
58
58
|
"@types/react": "^18.2.48",
|
|
59
59
|
"@unocss/astro": "^0.58.4",
|
|
60
60
|
"@unocss/preset-attributify": "^0.58.4",
|
|
@@ -66,23 +66,23 @@
|
|
|
66
66
|
"@vueuse/core": "^10.7.2",
|
|
67
67
|
"astro-compress": "^2.2.8",
|
|
68
68
|
"astro-i18next": "1.0.0-beta.21",
|
|
69
|
-
"astro-icon": "^1.0.
|
|
69
|
+
"astro-icon": "^1.0.4",
|
|
70
70
|
"astro-navbar": "^2.3.0",
|
|
71
71
|
"astro-pagefind": "^1.4.0",
|
|
72
|
-
"i18next": "^23.
|
|
72
|
+
"i18next": "^23.8.2",
|
|
73
73
|
"i18next-browser-languagedetector": "^7.2.0",
|
|
74
74
|
"i18next-fs-backend": "^2.3.1",
|
|
75
|
-
"i18next-http-backend": "^2.4.
|
|
75
|
+
"i18next-http-backend": "^2.4.3",
|
|
76
76
|
"i18next-vue": "^3.0.0",
|
|
77
77
|
"sass": "^1.70.0",
|
|
78
|
+
"swiper": "^11.0.5",
|
|
78
79
|
"unocss": "^0.57.7",
|
|
79
80
|
"vite": "^5.0.12",
|
|
80
|
-
"vue": "^3.4.15"
|
|
81
|
-
"swiper": "^11.0.5"
|
|
81
|
+
"vue": "^3.4.15"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
84
84
|
"@unocss/transformer-variant-group": "^0.58.4",
|
|
85
|
-
"astro": "^4.2.
|
|
85
|
+
"astro": "^4.2.8",
|
|
86
86
|
"unocss": "^0.58.3"
|
|
87
87
|
},
|
|
88
88
|
"pnpm": {
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
as: {
|
|
6
|
+
type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
|
|
7
|
+
default: 'div',
|
|
8
|
+
required: true,
|
|
9
|
+
},
|
|
10
|
+
text: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: '',
|
|
13
|
+
required: true,
|
|
14
|
+
},
|
|
15
|
+
styles: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: '',
|
|
18
|
+
required: false,
|
|
19
|
+
}
|
|
20
|
+
})
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<template>
|
|
24
|
+
<component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex">
|
|
25
|
+
<span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
|
|
26
|
+
{{ props.text }}
|
|
27
|
+
</span>
|
|
28
|
+
</component>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<style lang="scss">
|
|
33
|
+
.detail-name {
|
|
34
|
+
@apply overflow-hidden relative;
|
|
35
|
+
|
|
36
|
+
span {
|
|
37
|
+
@apply block bg-white dark:bg-blue-901 relative z-10 pr-1.5 w-full;
|
|
38
|
+
|
|
39
|
+
&:before {
|
|
40
|
+
// order: 2;
|
|
41
|
+
@apply text-gray-300 absolute select-none border-b border-gray-200 dark:border-gray-600 w-full -z-1;
|
|
42
|
+
height: 1em;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
font-weight: 100;
|
|
45
|
+
bottom: 3px;
|
|
46
|
+
left: 0;
|
|
47
|
+
flex: 1;
|
|
48
|
+
content: '';
|
|
49
|
+
position:absolute;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
</style>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import ProductDetailName from "./ProductDetailName.vue";
|
|
3
|
+
const props = defineProps<{
|
|
4
|
+
value: {name: string, value: string}[];
|
|
5
|
+
}>();
|
|
6
|
+
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<table class="details table-auto text-left bg-white">
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr class="border" v-for="row, index in props.value" :key="index">
|
|
13
|
+
<ProductDetailName as="th" :text="row.name" />
|
|
14
|
+
<td>{{ row.value }}</td>
|
|
15
|
+
</tr>
|
|
16
|
+
</tbody>
|
|
17
|
+
</table>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<style lang="scss">
|
|
21
|
+
.details {
|
|
22
|
+
border: none;
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
|
|
25
|
+
td,
|
|
26
|
+
tr,
|
|
27
|
+
th {
|
|
28
|
+
border: none;
|
|
29
|
+
@apply leading-4 text-sm;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
th {
|
|
33
|
+
@apply pr-0
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
@@ -16,7 +16,7 @@ const toggleVisibility = () => {
|
|
|
16
16
|
|
|
17
17
|
<template>
|
|
18
18
|
<div v-if="isShow" data-pagefind-ignore
|
|
19
|
-
class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4
|
|
19
|
+
class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 py-3 flex items-center justify-center text-xs sm:(text-base px-8) leading-none text-white relative print-hidden">
|
|
20
20
|
<span
|
|
21
21
|
class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
|
|
22
22
|
<span class="leading-none "><span
|
|
@@ -31,7 +31,7 @@ const toggleVisibility = () => {
|
|
|
31
31
|
</button>
|
|
32
32
|
</div>
|
|
33
33
|
<div v-else data-pagefind-ignore
|
|
34
|
-
class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white
|
|
34
|
+
class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
|
|
35
35
|
<div class="tracking-widest leading-none">
|
|
36
36
|
<span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
|
|
37
37
|
data-text="TERRORIST" /> <span data-text="STATE" />
|
package/src/config.ts
CHANGED
|
@@ -29,6 +29,7 @@ export const SIDEBAR = [
|
|
|
29
29
|
{ text: "Card", link: "/components/card/" },
|
|
30
30
|
{ text: "Carousel", link: "/components/carousel/" },
|
|
31
31
|
{ text: "Copyright", link: "/components/copyright/" },
|
|
32
|
+
{ text: "Details List", link: "/components/details-list/" },
|
|
32
33
|
{ text: "HandDrive", link: "/components/hand-drive/" },
|
|
33
34
|
{ text: "Headline", link: "/components/headline/" },
|
|
34
35
|
{ text: "Icons", link: "/components/icons/" },
|
package/src/layouts/Layout.astro
CHANGED
|
@@ -12,7 +12,7 @@ import Image from '../../components/Image.astro'
|
|
|
12
12
|
Card - product link component which can be used for carousels, section with related products, recently added etc.
|
|
13
13
|
|
|
14
14
|
<div class="component-preview">
|
|
15
|
-
<div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
15
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
16
16
|
<Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
17
17
|
<a href="#">
|
|
18
18
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
|
|
@@ -70,7 +70,7 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
70
70
|
</div>
|
|
71
71
|
|
|
72
72
|
```html
|
|
73
|
-
<div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
73
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
|
|
74
74
|
<Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
|
|
75
75
|
<a href="#">
|
|
76
76
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
|
|
@@ -97,132 +97,96 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
97
97
|
<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
|
|
98
98
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
99
99
|
<a href="#">
|
|
100
|
-
<img src="https://picsum.photos/600/
|
|
100
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
101
101
|
<div class="px-4 py-3 w-72">
|
|
102
102
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
103
103
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
104
104
|
<div class="flex items-center">
|
|
105
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
105
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
106
106
|
<del>
|
|
107
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
107
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
108
108
|
</del>
|
|
109
|
-
<
|
|
110
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
111
|
-
<path fill-rule="evenodd"
|
|
112
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
113
|
-
<path
|
|
114
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
115
|
-
</svg></div>
|
|
109
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
116
110
|
</div>
|
|
117
111
|
</div>
|
|
118
112
|
</a>
|
|
119
113
|
</div>
|
|
120
114
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
121
115
|
<a href="#">
|
|
122
|
-
<img src="https://picsum.photos/600/
|
|
116
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
123
117
|
<div class="px-4 py-3 w-72">
|
|
124
118
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
125
119
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
126
120
|
<div class="flex items-center">
|
|
127
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
121
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
128
122
|
<del>
|
|
129
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
123
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
130
124
|
</del>
|
|
131
|
-
<
|
|
132
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
133
|
-
<path fill-rule="evenodd"
|
|
134
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
135
|
-
<path
|
|
136
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
137
|
-
</svg></div>
|
|
125
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
138
126
|
</div>
|
|
139
127
|
</div>
|
|
140
128
|
</a>
|
|
141
129
|
</div>
|
|
142
130
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
143
131
|
<a href="#">
|
|
144
|
-
<img src="https://picsum.photos/600/
|
|
132
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
145
133
|
<div class="px-4 py-3 w-72">
|
|
146
134
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
147
135
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
148
136
|
<div class="flex items-center">
|
|
149
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
137
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
150
138
|
<del>
|
|
151
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
139
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
152
140
|
</del>
|
|
153
|
-
<
|
|
154
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
155
|
-
<path fill-rule="evenodd"
|
|
156
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
157
|
-
<path
|
|
158
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
159
|
-
</svg></div>
|
|
141
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
160
142
|
</div>
|
|
161
143
|
</div>
|
|
162
144
|
</a>
|
|
163
145
|
</div>
|
|
164
146
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
165
147
|
<a href="#">
|
|
166
|
-
<img src="https://picsum.photos/600/
|
|
148
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
167
149
|
<div class="px-4 py-3 w-72">
|
|
168
150
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
169
151
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
170
152
|
<div class="flex items-center">
|
|
171
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
153
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
172
154
|
<del>
|
|
173
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
155
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
174
156
|
</del>
|
|
175
|
-
<
|
|
176
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
177
|
-
<path fill-rule="evenodd"
|
|
178
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
179
|
-
<path
|
|
180
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
181
|
-
</svg></div>
|
|
157
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
182
158
|
</div>
|
|
183
159
|
</div>
|
|
184
160
|
</a>
|
|
185
161
|
</div>
|
|
186
162
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
187
163
|
<a href="#">
|
|
188
|
-
<img src="https://picsum.photos/600/
|
|
164
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
189
165
|
<div class="px-4 py-3 w-72">
|
|
190
166
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
191
167
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
192
168
|
<div class="flex items-center">
|
|
193
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
169
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
194
170
|
<del>
|
|
195
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
171
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
196
172
|
</del>
|
|
197
|
-
<
|
|
198
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
199
|
-
<path fill-rule="evenodd"
|
|
200
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
201
|
-
<path
|
|
202
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
203
|
-
</svg></div>
|
|
173
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
204
174
|
</div>
|
|
205
175
|
</div>
|
|
206
176
|
</a>
|
|
207
177
|
</div>
|
|
208
178
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
209
179
|
<a href="#">
|
|
210
|
-
<img src="https://picsum.photos/600/
|
|
180
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
211
181
|
<div class="px-4 py-3 w-72">
|
|
212
182
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
213
183
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
214
184
|
<div class="flex items-center">
|
|
215
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
185
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
216
186
|
<del>
|
|
217
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
187
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
218
188
|
</del>
|
|
219
|
-
<
|
|
220
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
221
|
-
<path fill-rule="evenodd"
|
|
222
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
223
|
-
<path
|
|
224
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
225
|
-
</svg></div>
|
|
189
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
226
190
|
</div>
|
|
227
191
|
</div>
|
|
228
192
|
</a>
|
|
@@ -233,22 +197,16 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
233
197
|
<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
|
|
234
198
|
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
235
199
|
<a href="#">
|
|
236
|
-
<img src="https://picsum.photos/600/
|
|
200
|
+
<img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
|
|
237
201
|
<div class="px-4 py-3 w-72">
|
|
238
202
|
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
239
203
|
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
240
204
|
<div class="flex items-center">
|
|
241
|
-
<p class="text-lg font-semibold text-black cursor-auto my-3"
|
|
205
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
|
|
242
206
|
<del>
|
|
243
|
-
<p class="text-sm text-gray-600 cursor-auto ml-2"
|
|
207
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
|
|
244
208
|
</del>
|
|
245
|
-
<
|
|
246
|
-
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
247
|
-
<path fill-rule="evenodd"
|
|
248
|
-
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
249
|
-
<path
|
|
250
|
-
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
251
|
-
</svg></div>
|
|
209
|
+
<Icon name="octicon:info-24" class="ml-auto" />
|
|
252
210
|
</div>
|
|
253
211
|
</div>
|
|
254
212
|
</a>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "DetailsList"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
import ProductDetailsList from '../../components/ProductDetailsList.vue'
|
|
7
|
+
|
|
8
|
+
export const tablevalue = [
|
|
9
|
+
{
|
|
10
|
+
name: "Product ID",
|
|
11
|
+
value: "9452694356",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
name: "Color",
|
|
15
|
+
value: "Black",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "Fitting position",
|
|
19
|
+
value: "Front axle",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
name: "Brake disc thicknes",
|
|
23
|
+
value: "22 mm",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
name: "Weight",
|
|
27
|
+
value: "5.185 kg"
|
|
28
|
+
}
|
|
29
|
+
];
|
|
30
|
+
|
|
31
|
+
# Product Details Table
|
|
32
|
+
|
|
33
|
+
<div class="component-preview flex-wrap">
|
|
34
|
+
<div class="bg-white rounded-lg p-8">
|
|
35
|
+
<ProductDetailsList value={tablevalue}></ProductDetailsList>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
const tablevalue = [
|
|
41
|
+
{
|
|
42
|
+
name: "Product ID",
|
|
43
|
+
value: "9452694356",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Color",
|
|
47
|
+
value: "Black",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Fitting position",
|
|
51
|
+
value: "Front axle",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "Brake disc thicknes",
|
|
55
|
+
value: "22 mm",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: "Weight",
|
|
59
|
+
value: "5.185 kg"
|
|
60
|
+
}
|
|
61
|
+
];
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
```html
|
|
65
|
+
<ProductDetailsList value={tablevalue}></ProductDetailsList>
|
|
66
|
+
```
|
|
@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import Table from '../../components/Table.vue'
|
|
8
8
|
export const tableData = [
|
|
9
9
|
{
|
|
10
10
|
id: 1,
|
|
@@ -44,7 +44,7 @@ export const tableDataSecondary = [
|
|
|
44
44
|
Simple table based on JSON data object.
|
|
45
45
|
|
|
46
46
|
<div class="component-preview">
|
|
47
|
-
<
|
|
47
|
+
<Table data={tableData}></Table>
|
|
48
48
|
</div>
|
|
49
49
|
|
|
50
50
|
## Code
|
|
@@ -72,10 +72,10 @@ const tableData = [
|
|
|
72
72
|
|
|
73
73
|
```html
|
|
74
74
|
<!-- Astro -->
|
|
75
|
-
<
|
|
75
|
+
<Table data={tableData} />
|
|
76
76
|
|
|
77
77
|
<!-- Vue -->
|
|
78
|
-
<
|
|
78
|
+
<Table :data="tableData" />
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
|
|
@@ -83,7 +83,7 @@ const tableData = [
|
|
|
83
83
|
# Table
|
|
84
84
|
|
|
85
85
|
<div class="component-preview">
|
|
86
|
-
<
|
|
86
|
+
<Table data={tableDataSecondary} />
|
|
87
87
|
</div>
|
|
88
88
|
|
|
89
89
|
## Code
|
|
@@ -105,5 +105,5 @@ const tableDataSecondary = [
|
|
|
105
105
|
];
|
|
106
106
|
|
|
107
107
|
|
|
108
|
-
<
|
|
108
|
+
<Table data={tableDataSecondary} />
|
|
109
109
|
```
|
package/src/pages/index.astro
CHANGED
|
@@ -49,7 +49,7 @@ const navItems = [
|
|
|
49
49
|
</Button>
|
|
50
50
|
</Jumbatron>
|
|
51
51
|
<nav>
|
|
52
|
-
<
|
|
52
|
+
<div class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row) ">
|
|
53
53
|
{
|
|
54
54
|
navItems.map(({ title, description, url, icon }) => (
|
|
55
55
|
<a
|
|
@@ -65,7 +65,7 @@ const navItems = [
|
|
|
65
65
|
</a>
|
|
66
66
|
))
|
|
67
67
|
}
|
|
68
|
-
</
|
|
68
|
+
</div>
|
|
69
69
|
</nav>
|
|
70
70
|
</div>
|
|
71
71
|
</Layout>
|
package/uno.config.ts
CHANGED
|
@@ -38,11 +38,11 @@ export default defineConfig({
|
|
|
38
38
|
['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
|
|
39
39
|
['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
|
|
40
40
|
['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
|
|
41
|
-
['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
|
|
42
|
-
['img--medium', 'w-60'],
|
|
41
|
+
['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
|
|
42
|
+
['img--medium', 'h-full w-60'],
|
|
43
43
|
['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
|
|
44
44
|
['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
|
|
45
|
-
['btn-primary', 'bg-lightBlue-
|
|
45
|
+
['btn-primary', 'bg-lightBlue-400 border border-transparent font-medium hover:bg-lightBlue-500 inline-flex items-center justify-center shadow text-base text-blue-700'],
|
|
46
46
|
['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
|
|
47
47
|
['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
|
|
48
48
|
['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
|
|
File without changes
|