@mirweb/mir-web-components 2.1.7 → 2.2.1
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.
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
|
|
26
26
|
&__wrapper {
|
|
27
27
|
max-width: $max-width;
|
|
28
|
-
padding: 0 30px
|
|
28
|
+
padding: 0 30px 60px 30px;
|
|
29
29
|
margin: 0 auto;
|
|
30
30
|
margin-top: -30px;
|
|
31
31
|
:deep(img) {
|
|
32
32
|
width: 100%;
|
|
33
33
|
}
|
|
34
34
|
@include md {
|
|
35
|
-
padding: 0 0
|
|
35
|
+
padding: 0 0 60px 0;
|
|
36
36
|
margin-top: -30px;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<section class="table-section">
|
|
3
|
+
<div class="responsive-table-wrapper">
|
|
4
|
+
<div class="responsive-table">
|
|
5
|
+
<div
|
|
6
|
+
v-for="(row, rowIndex) in blok?.add_row"
|
|
7
|
+
:key="row?._uid"
|
|
8
|
+
:class="[
|
|
9
|
+
'table-row',
|
|
10
|
+
{ highlight: row?.highlight, 'even-row': rowIndex % 2 === 1 },
|
|
11
|
+
]"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
v-for="column in row?.add_column"
|
|
15
|
+
:key="column?._uid"
|
|
16
|
+
class="table-cell"
|
|
17
|
+
>
|
|
18
|
+
<div class="table-cell-content">
|
|
19
|
+
<a
|
|
20
|
+
v-if="column?.link?.story?.url"
|
|
21
|
+
:href="column?.link?.url"
|
|
22
|
+
target="_blank"
|
|
23
|
+
rel="noopener noreferrer"
|
|
24
|
+
>
|
|
25
|
+
<slot name="text" :text="column?.text"></slot>
|
|
26
|
+
</a>
|
|
27
|
+
<span v-else>
|
|
28
|
+
<slot name="text" :text="column?.text"></slot>
|
|
29
|
+
<span v-if="column?.hover_description" class="hover-dots">
|
|
30
|
+
<span class="hover-icon"></span>
|
|
31
|
+
<div class="hover-description">
|
|
32
|
+
<small>{{ column?.hover_description }}</small>
|
|
33
|
+
</div>
|
|
34
|
+
</span>
|
|
35
|
+
</span>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script setup lang="ts">
|
|
45
|
+
import { defineProps } from "vue";
|
|
46
|
+
|
|
47
|
+
defineProps({
|
|
48
|
+
blok: { type: Object, required: true },
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<style lang="scss" scoped>
|
|
53
|
+
.table-section {
|
|
54
|
+
max-width: 984px;
|
|
55
|
+
margin: 0px auto;
|
|
56
|
+
padding: 0px;
|
|
57
|
+
overflow-x: visible;
|
|
58
|
+
|
|
59
|
+
@media screen and (max-width: 984px) {
|
|
60
|
+
padding: 0px 30px;
|
|
61
|
+
overflow-x: auto;
|
|
62
|
+
scrollbar-width: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
:deep(b) {
|
|
66
|
+
font-weight: 700;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:deep(p) {
|
|
70
|
+
a {
|
|
71
|
+
color: #2084c9;
|
|
72
|
+
text-decoration: 0.3px underline;
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
color: #003087;
|
|
77
|
+
transition: color 0.3s ease;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
.responsive-table-wrapper {
|
|
83
|
+
min-width: 588px;
|
|
84
|
+
display: flex;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
|
|
87
|
+
@media screen and (max-width: 984px) {
|
|
88
|
+
display: block;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.responsive-table {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
width: max-content;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.table-row {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.table-row.even-row {
|
|
104
|
+
background-color: #effafe;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.table-row.highlight {
|
|
108
|
+
background-color: #cbeefa;
|
|
109
|
+
min-height: 90px;
|
|
110
|
+
border-radius: 0.4rem 0.4rem 0 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.table-cell {
|
|
114
|
+
flex: 1;
|
|
115
|
+
border: 1px solid rgba(221, 221, 221, 0.2);
|
|
116
|
+
padding: 20px 20px;
|
|
117
|
+
position: relative;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
min-width: 150px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.table-cell-content {
|
|
124
|
+
position: relative;
|
|
125
|
+
|
|
126
|
+
a {
|
|
127
|
+
color: inherit;
|
|
128
|
+
text-decoration: underline;
|
|
129
|
+
|
|
130
|
+
&:hover {
|
|
131
|
+
text-decoration: underline;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
span {
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
:deep(.hover-dots) {
|
|
141
|
+
position: relative;
|
|
142
|
+
display: inline-block;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
padding: 5px;
|
|
145
|
+
margin-left: 10px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
:deep(.hover-icon) {
|
|
149
|
+
width: 16px;
|
|
150
|
+
height: 16px;
|
|
151
|
+
background-image: url("https://a.storyblok.com/f/230581/22x22/00b84adecf/info-blue.svg"); /* Your icon's URL */
|
|
152
|
+
background-size: cover;
|
|
153
|
+
background-repeat: no-repeat;
|
|
154
|
+
background-position: center;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
:deep(.hover-description) {
|
|
158
|
+
display: none; /* Hidden by default */
|
|
159
|
+
position: absolute;
|
|
160
|
+
top: 0px;
|
|
161
|
+
left: 30px;
|
|
162
|
+
background-color: #fff;
|
|
163
|
+
color: #0c0931;
|
|
164
|
+
font-size: 14px;
|
|
165
|
+
white-space: normal;
|
|
166
|
+
z-index: 100;
|
|
167
|
+
border-radius: 4px;
|
|
168
|
+
margin-top: 0px;
|
|
169
|
+
width: max-content;
|
|
170
|
+
max-width: 200px;
|
|
171
|
+
padding: 15px;
|
|
172
|
+
box-shadow: 0 0 15px #cbeefa;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
:deep(.hover-dots:hover .hover-description) {
|
|
176
|
+
display: block; /* Show description when hovering over .hover-dots */
|
|
177
|
+
}
|
|
178
|
+
</style>
|
package/dist/components/index.ts
CHANGED
|
@@ -39,6 +39,7 @@ export { default as BlockPromo } from "./blocks/promo/promo.vue";
|
|
|
39
39
|
export { default as BlockQuote } from "./blocks/quote/quote.vue";
|
|
40
40
|
export { default as BlockRichText } from "./blocks/rich-text/rich-text.vue";
|
|
41
41
|
export { default as BlockRichTextColumns } from "./blocks/rich-text/rich-text-columns.vue";
|
|
42
|
+
export { default as BlockTableList } from "./blocks/table-list/table-list.vue";
|
|
42
43
|
export { default as BlockTimeline } from "./blocks/timeline/timeline.vue";
|
|
43
44
|
export { default as BlockVimeo } from "./blocks/vimeo/vimeo.vue";
|
|
44
45
|
export { default as BlockFrontPageHero } from "./blocks/frontpage-hero/frontpage-hero.vue";
|