comand-component-library 4.0.0 → 4.0.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.
- package/dist/comand-component-library.js +1670 -1603
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/{App.vue → ComponentLibrary.vue} +875 -413
- package/src/assets/data/main-navigation.json +2 -0
- package/src/components/CmdAddressData.vue +1 -1
- package/src/components/CmdBox.vue +40 -4
- package/src/components/CmdBoxWrapper.vue +15 -5
- package/src/components/CmdFormElement.vue +37 -33
- package/src/components/CmdHeadline.vue +97 -33
- package/src/components/CmdInputGroup.vue +6 -5
- package/src/components/CmdListOfLinks.vue +24 -24
- package/src/components/CmdLoginForm.vue +1 -0
- package/src/components/CmdMainNavigation.vue +20 -9
- package/src/components/CmdMultistepFormProgressBar.vue +43 -1
- package/src/components/CmdNewsletterSubscription.vue +7 -7
- package/src/components/CmdOpeningHours.vue +33 -18
- package/src/components/CmdOpeningHoursItem.vue +21 -13
- package/src/components/CmdPagination.vue +2 -2
- package/src/components/CmdSidebar.vue +6 -1
- package/src/components/CmdSiteHeader.vue +2 -0
- package/src/components/CmdSiteSearch.vue +12 -11
- package/src/components/CmdSystemMessage.vue +1 -0
- package/src/components/CmdTable.vue +9 -1
- package/src/components/CmdTextImageBlock.vue +2 -0
- package/src/components/CmdThumbnailScroller.vue +52 -32
- package/src/components/CmdTooltip.vue +5 -0
- package/src/components/CmdUploadForm.vue +67 -41
- package/src/components/ComponentSettings.vue +171 -0
- package/src/main.js +3 -3
@@ -181,6 +181,15 @@ export default {
|
|
181
181
|
type: Boolean,
|
182
182
|
default: false
|
183
183
|
},
|
184
|
+
/**
|
185
|
+
* toggle if overlay over content should be shown if off-canvas is open
|
186
|
+
*
|
187
|
+
* @affectsStyling: true
|
188
|
+
*/
|
189
|
+
showContentOverlay: {
|
190
|
+
type: Boolean,
|
191
|
+
default: true
|
192
|
+
},
|
184
193
|
/**
|
185
194
|
* list of all navigation-entries (incl. sub-entries)
|
186
195
|
*/
|
@@ -203,6 +212,11 @@ export default {
|
|
203
212
|
}
|
204
213
|
}
|
205
214
|
},
|
215
|
+
/**
|
216
|
+
* position for offcanvas-navigation
|
217
|
+
*
|
218
|
+
* @allowedValues: "right", "left"
|
219
|
+
*/
|
206
220
|
offcanvasPosition: {
|
207
221
|
type: String,
|
208
222
|
default: "right"
|
@@ -210,6 +224,8 @@ export default {
|
|
210
224
|
/**
|
211
225
|
* button to open off-canvas-navigation
|
212
226
|
*
|
227
|
+
* (persistOnMobile-property must be false)
|
228
|
+
*
|
213
229
|
* @requiredForAccessibility: partial
|
214
230
|
*/
|
215
231
|
buttonOffcanvas: {
|
@@ -235,15 +251,6 @@ export default {
|
|
235
251
|
subSubentriesIconClass: {
|
236
252
|
type: String,
|
237
253
|
default: "icon-single-arrow-right"
|
238
|
-
},
|
239
|
-
/**
|
240
|
-
* toggle if overlay over content should be shown if off-canvas is open
|
241
|
-
*
|
242
|
-
* @affectsStyling: true
|
243
|
-
*/
|
244
|
-
showContentOverlay: {
|
245
|
-
type: Boolean,
|
246
|
-
default: true
|
247
254
|
}
|
248
255
|
},
|
249
256
|
methods: {
|
@@ -384,6 +391,7 @@ export default {
|
|
384
391
|
@media only screen and (max-width: $medium-max-width) {
|
385
392
|
.cmd-main-navigation#main-navigation-wrapper {
|
386
393
|
--nav-transition: all .5s linear;
|
394
|
+
|
387
395
|
display: flex;
|
388
396
|
background: none; /* overwrite framework-css */
|
389
397
|
border: 0; /* overwrite framework-css */
|
@@ -401,11 +409,14 @@ export default {
|
|
401
409
|
|
402
410
|
&.open-off-canvas {
|
403
411
|
nav {
|
412
|
+
height: 100%;
|
413
|
+
background: var(--default-background);
|
404
414
|
left: 0;
|
405
415
|
opacity: 1;
|
406
416
|
padding: 0 !important;
|
407
417
|
transition: var(--nav-transition);
|
408
418
|
border-right: var(--default-border);
|
419
|
+
display: block;
|
409
420
|
}
|
410
421
|
|
411
422
|
&.show-content-overlay {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<ol class="cmd-multistep-form-progress-bar">
|
2
|
+
<ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
|
3
3
|
<li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
|
4
4
|
<!-- begin type === href -->
|
5
5
|
<a v-if="step.type === 'href'"
|
@@ -86,6 +86,10 @@ export default {
|
|
86
86
|
default() {
|
87
87
|
return "icon-single-arrow-right"
|
88
88
|
}
|
89
|
+
},
|
90
|
+
useGap: {
|
91
|
+
type: Boolean,
|
92
|
+
default: true
|
89
93
|
}
|
90
94
|
},
|
91
95
|
methods: {
|
@@ -108,6 +112,34 @@ export default {
|
|
108
112
|
justify-content: space-around;
|
109
113
|
border: var(--default-border);
|
110
114
|
margin: 0;
|
115
|
+
border-radius: var(--default-border-radius);
|
116
|
+
|
117
|
+
&.use-gap {
|
118
|
+
border: 0;
|
119
|
+
gap: var(--default-gap);
|
120
|
+
|
121
|
+
li {
|
122
|
+
border: var(--default-border) !important;
|
123
|
+
border-radius: var(--default-border-radius);;
|
124
|
+
|
125
|
+
a, a.active {
|
126
|
+
border: 0;
|
127
|
+
border-radius: inherit;
|
128
|
+
|
129
|
+
:is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
|
130
|
+
border: 0;
|
131
|
+
right: -1rem;
|
132
|
+
background: none;
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
a {
|
137
|
+
:is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
|
138
|
+
color: var(--default-text-color) !important;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
142
|
+
}
|
111
143
|
|
112
144
|
li {
|
113
145
|
display: flex;
|
@@ -115,6 +147,16 @@ export default {
|
|
115
147
|
list-style-type: none;
|
116
148
|
margin: 0;
|
117
149
|
|
150
|
+
&:first-child, &:first-child > a {
|
151
|
+
border-top-left-radius: inherit;
|
152
|
+
border-bottom-left-radius: inherit;
|
153
|
+
}
|
154
|
+
|
155
|
+
&:last-child, &:last-child > a {
|
156
|
+
border-top-right-radius: inherit;
|
157
|
+
border-bottom-right-radius: inherit;
|
158
|
+
}
|
159
|
+
|
118
160
|
a {
|
119
161
|
display: flex;
|
120
162
|
text-decoration: none;
|
@@ -71,6 +71,13 @@ export default {
|
|
71
71
|
return value === "submit" || value === "button"
|
72
72
|
}
|
73
73
|
},
|
74
|
+
/**
|
75
|
+
* toggle legend visibility
|
76
|
+
*/
|
77
|
+
showLegend: {
|
78
|
+
type: Boolean,
|
79
|
+
default: true
|
80
|
+
},
|
74
81
|
/**
|
75
82
|
* text used as legend for login-fieldset
|
76
83
|
*
|
@@ -80,13 +87,6 @@ export default {
|
|
80
87
|
type: String,
|
81
88
|
default: "Stay up-to-date"
|
82
89
|
},
|
83
|
-
/**
|
84
|
-
* toggle legend visibility
|
85
|
-
*/
|
86
|
-
showLegend: {
|
87
|
-
type: Boolean,
|
88
|
-
default: true
|
89
|
-
},
|
90
90
|
/**
|
91
91
|
* properties for CmdInputGroup-component
|
92
92
|
*/
|
@@ -55,7 +55,8 @@
|
|
55
55
|
:key="index"
|
56
56
|
:day="day"
|
57
57
|
:separator="separator"
|
58
|
-
:
|
58
|
+
:abbreviationTextAm="abbreviationTextAm"
|
59
|
+
:abbreviationTextPm="abbreviationTextPm"
|
59
60
|
/>
|
60
61
|
</dl>
|
61
62
|
<!-- end default view -->
|
@@ -82,7 +83,8 @@
|
|
82
83
|
<CmdOpeningHoursItem
|
83
84
|
:day="day"
|
84
85
|
:separator="separator"
|
85
|
-
:
|
86
|
+
:abbreviationTextAm="abbreviationTextAm"
|
87
|
+
:abbreviationTextPm="abbreviationTextPm"
|
86
88
|
/>
|
87
89
|
</dl>
|
88
90
|
</EditComponentWrapper>
|
@@ -168,13 +170,6 @@ export default {
|
|
168
170
|
}
|
169
171
|
},
|
170
172
|
props: {
|
171
|
-
/**
|
172
|
-
* set a link to a detail page
|
173
|
-
*/
|
174
|
-
link: {
|
175
|
-
type: Object,
|
176
|
-
required: false
|
177
|
-
},
|
178
173
|
/**
|
179
174
|
* toggles if "closed"-text will be shown
|
180
175
|
*
|
@@ -184,6 +179,13 @@ export default {
|
|
184
179
|
type: Boolean,
|
185
180
|
default: false
|
186
181
|
},
|
182
|
+
/**
|
183
|
+
* set a link to a detail page
|
184
|
+
*/
|
185
|
+
link: {
|
186
|
+
type: Object,
|
187
|
+
required: false
|
188
|
+
},
|
187
189
|
/**
|
188
190
|
* text for 'open'-information
|
189
191
|
*/
|
@@ -198,13 +200,26 @@ export default {
|
|
198
200
|
type: String,
|
199
201
|
default: "Closed right now!"
|
200
202
|
},
|
203
|
+
/**
|
204
|
+
* separator between time-spans
|
205
|
+
*/
|
201
206
|
separator: {
|
202
207
|
type: String,
|
203
208
|
default: "–"
|
204
209
|
},
|
205
|
-
|
210
|
+
/**
|
211
|
+
* abbreviation (behind time) for morning
|
212
|
+
*/
|
213
|
+
abbreviationTextAm: {
|
214
|
+
type: String,
|
215
|
+
default: "am"
|
216
|
+
},
|
217
|
+
/**
|
218
|
+
* abbreviation (behind time) for afternoon
|
219
|
+
*/
|
220
|
+
abbreviationTextPm: {
|
206
221
|
type: String,
|
207
|
-
default: "
|
222
|
+
default: "pm"
|
208
223
|
},
|
209
224
|
/**
|
210
225
|
* list of opening-hours
|
@@ -227,13 +242,6 @@ export default {
|
|
227
242
|
type: String,
|
228
243
|
required: false
|
229
244
|
},
|
230
|
-
/**
|
231
|
-
* properties for CmdHeadline-component
|
232
|
-
*/
|
233
|
-
cmdHeadline: {
|
234
|
-
type: Object,
|
235
|
-
required: false
|
236
|
-
},
|
237
245
|
/**
|
238
246
|
* option to set custom time format by function
|
239
247
|
*/
|
@@ -254,6 +262,13 @@ export default {
|
|
254
262
|
checkInterval: {
|
255
263
|
type: Number,
|
256
264
|
default: 5000
|
265
|
+
},
|
266
|
+
/**
|
267
|
+
* properties for CmdHeadline-component
|
268
|
+
*/
|
269
|
+
cmdHeadline: {
|
270
|
+
type: Object,
|
271
|
+
required: false
|
257
272
|
}
|
258
273
|
},
|
259
274
|
mounted() {
|
@@ -5,17 +5,11 @@
|
|
5
5
|
<dd>
|
6
6
|
<span v-if="day.am" class="am">
|
7
7
|
<template v-if="day.am.displayText">{{ day.am.displayText }}</template>
|
8
|
-
<template
|
9
|
-
v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
|
10
|
-
getTime(day.am.tillTime)
|
11
|
-
}}</template>
|
8
|
+
<template v-else>{{ getTime(day.am.fromTime, abbreviationTextAm) }} {{ separator }} {{getTime(day.am.tillTime)}}</template>
|
12
9
|
</span>
|
13
10
|
<span v-if="day.pm" class="pm">
|
14
11
|
<template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
|
15
|
-
<template
|
16
|
-
v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
|
17
|
-
getTime(day.pm.tillTime)
|
18
|
-
}}</template>
|
12
|
+
<template v-else>{{ getTime(day.pm.fromTime, abbreviationTextPm) }} {{ separator }} {{getTime(day.pm.tillTime)}}</template>
|
19
13
|
</span>
|
20
14
|
</dd>
|
21
15
|
</template>
|
@@ -178,11 +172,18 @@ export default {
|
|
178
172
|
default: "–"
|
179
173
|
},
|
180
174
|
/**
|
181
|
-
*
|
175
|
+
* abbreviation (behind time) for morning
|
182
176
|
*/
|
183
|
-
|
177
|
+
abbreviationTextAm: {
|
184
178
|
type: String,
|
185
|
-
default: "
|
179
|
+
default: "am"
|
180
|
+
},
|
181
|
+
/**
|
182
|
+
* abbreviation (behind time) for afternoon
|
183
|
+
*/
|
184
|
+
abbreviationTextPm: {
|
185
|
+
type: String,
|
186
|
+
default: "pm"
|
186
187
|
},
|
187
188
|
/**
|
188
189
|
* option to set custom time format by function
|
@@ -196,11 +197,14 @@ export default {
|
|
196
197
|
toggleClosedStatus(period) {
|
197
198
|
period === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
|
198
199
|
},
|
199
|
-
getTime(time) {
|
200
|
+
getTime(time, suffix) {
|
200
201
|
if (this.timeFormatter) {
|
201
202
|
return this.timeFormatter(time.hours, time.mins)
|
202
203
|
}
|
203
|
-
|
204
|
+
|
205
|
+
console.log("suffix", suffix)
|
206
|
+
|
207
|
+
return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
|
204
208
|
},
|
205
209
|
updateHandlerProvider() {
|
206
210
|
const data = this.editableDay
|
@@ -248,6 +252,10 @@ export default {
|
|
248
252
|
|
249
253
|
<style>
|
250
254
|
.edit-mode-opening-hours-item {
|
255
|
+
dt {
|
256
|
+
min-width: 3ch;
|
257
|
+
}
|
258
|
+
|
251
259
|
.am-wrapper, .pm-wrapper {
|
252
260
|
align-items: center;
|
253
261
|
gap: calc(var(--default-gap) / 2);
|
@@ -18,12 +18,12 @@
|
|
18
18
|
<div class="page-index">
|
19
19
|
<div class="flex-container">
|
20
20
|
<a :href="getHref(page)"
|
21
|
-
:class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
|
21
|
+
:class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
|
22
22
|
:title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
|
23
23
|
v-for="(page, index) in pages"
|
24
24
|
:key="index"
|
25
25
|
@click.stop.prevent="showPage(page)" aria-live="polite">
|
26
|
-
<span
|
26
|
+
<span>{{ index + 1 }}</span>
|
27
27
|
</a>
|
28
28
|
</div>
|
29
29
|
</div>
|
@@ -136,6 +136,11 @@ export default {
|
|
136
136
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
137
137
|
}
|
138
138
|
|
139
|
+
.cmd-box {
|
140
|
+
border-left: 0;
|
141
|
+
border-right: 0;
|
142
|
+
}
|
143
|
+
|
139
144
|
.inner-sidebar-wrapper {
|
140
145
|
flex: 1;
|
141
146
|
display: flex;
|
@@ -162,9 +167,9 @@ export default {
|
|
162
167
|
|
163
168
|
&.collapse-to-right {
|
164
169
|
flex-direction: row-reverse;
|
170
|
+
border-right: 0;
|
165
171
|
|
166
172
|
> a {
|
167
|
-
border-left: 0;
|
168
173
|
border-right: var(--default-border);
|
169
174
|
}
|
170
175
|
}
|
@@ -35,6 +35,7 @@
|
|
35
35
|
v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
|
36
36
|
:navigationEntries="cmdMainNavigation.navigationEntries"
|
37
37
|
:offcanvasPosition="cmdMainNavigation.offcanvasPosition"
|
38
|
+
:stretchMainItems="cmdMainNavigation.stretchMainItems"
|
38
39
|
:closeOffcanvas="closeOffcanvas"
|
39
40
|
@offcanvas="emitOffcanvasStatus"
|
40
41
|
/>
|
@@ -49,6 +50,7 @@
|
|
49
50
|
:navigationEntries="cmdMainNavigation.navigationEntries"
|
50
51
|
:offcanvasPosition="cmdMainNavigation.offcanvasPosition"
|
51
52
|
:closeOffcanvas="closeOffcanvas"
|
53
|
+
:stretchMainItems="cmdMainNavigation.stretchMainItems"
|
52
54
|
@offcanvas="emitOffcanvasStatus"
|
53
55
|
/>
|
54
56
|
<!-- end CmdMainNavigation -->
|
@@ -69,7 +69,7 @@
|
|
69
69
|
<!-- end form-elements -->
|
70
70
|
|
71
71
|
<!-- begin filters -->
|
72
|
-
<template v-if="
|
72
|
+
<template v-if="useFilters">
|
73
73
|
<a href="#" @click.prevent="showFilters = !showFilters">
|
74
74
|
<!-- begin CmdIcon -->
|
75
75
|
<CmdIcon
|
@@ -97,8 +97,9 @@
|
|
97
97
|
</template>
|
98
98
|
<!-- end filters -->
|
99
99
|
</fieldset>
|
100
|
+
|
100
101
|
<!-- begin CmdFormFilters -->
|
101
|
-
<CmdFormFilters v-if="
|
102
|
+
<CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
|
102
103
|
<!-- end CmdFormFilters -->
|
103
104
|
</template>
|
104
105
|
|
@@ -158,15 +159,6 @@ export default {
|
|
158
159
|
type: Boolean,
|
159
160
|
default: true
|
160
161
|
},
|
161
|
-
/**
|
162
|
-
* text for legend
|
163
|
-
*
|
164
|
-
* @requiredForAccessibility: true
|
165
|
-
*/
|
166
|
-
textLegend: {
|
167
|
-
type: String,
|
168
|
-
required: false
|
169
|
-
},
|
170
162
|
/**
|
171
163
|
* toggle legend visibility
|
172
164
|
*
|
@@ -176,6 +168,15 @@ export default {
|
|
176
168
|
type: Boolean,
|
177
169
|
default: true
|
178
170
|
},
|
171
|
+
/**
|
172
|
+
* text for legend
|
173
|
+
*
|
174
|
+
* @requiredForAccessibility: true
|
175
|
+
*/
|
176
|
+
textLegend: {
|
177
|
+
type: String,
|
178
|
+
required: false
|
179
|
+
},
|
179
180
|
/**
|
180
181
|
* send search result from outside to display inside this component
|
181
182
|
*/
|
@@ -133,6 +133,7 @@ export default {
|
|
133
133
|
<style>
|
134
134
|
/* begin cmd-system-message ---------------------------------------------------------------------------------------- */
|
135
135
|
.cmd-system-message {
|
136
|
+
display: inline-flex;
|
136
137
|
margin: var(--default-margin) 0;
|
137
138
|
align-items: center;
|
138
139
|
|
@@ -83,7 +83,7 @@ export default {
|
|
83
83
|
data() {
|
84
84
|
return {
|
85
85
|
showTableData: true,
|
86
|
-
fullWidth:
|
86
|
+
fullWidth: false,
|
87
87
|
hasOverflow: false
|
88
88
|
}
|
89
89
|
},
|
@@ -258,6 +258,14 @@ export default {
|
|
258
258
|
// this.$refs.table.previousElementSibling.style.right = `${newLeft}px`;
|
259
259
|
}
|
260
260
|
|
261
|
+
},
|
262
|
+
watch: {
|
263
|
+
fullWidthOnDefault: {
|
264
|
+
handler() {
|
265
|
+
this.fullWidth = this.fullWidthOnDefault
|
266
|
+
},
|
267
|
+
immediate: true
|
268
|
+
}
|
261
269
|
}
|
262
270
|
}
|
263
271
|
</script>
|
@@ -27,10 +27,10 @@
|
|
27
27
|
|
28
28
|
<!-- begin list of images to slide -->
|
29
29
|
<transition-group name="slide" tag="ul">
|
30
|
-
<li v-for="(item, index) in items" :key="index"
|
31
|
-
:class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']">
|
30
|
+
<li v-for="(item, index) in items" :key="index">
|
32
31
|
<a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
|
33
32
|
@click="executeLink(index, $event)"
|
33
|
+
:class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']"
|
34
34
|
:title="tooltip"
|
35
35
|
:target="executeOnClick === 'url' ? '_blank' : null"
|
36
36
|
>
|
@@ -117,6 +117,11 @@ export default {
|
|
117
117
|
}
|
118
118
|
},
|
119
119
|
props: {
|
120
|
+
/**
|
121
|
+
* orientation for scroller
|
122
|
+
*
|
123
|
+
* @allewedValues: "horizontal", "vertical"
|
124
|
+
*/
|
120
125
|
orientation: {
|
121
126
|
type: String,
|
122
127
|
default: "horizontal"
|
@@ -397,22 +402,39 @@ export default {
|
|
397
402
|
margin-top: 2rem;
|
398
403
|
flex: none; /* avoids items to shrink to small on small screens */
|
399
404
|
|
400
|
-
a {
|
401
|
-
text-align: center;
|
402
|
-
}
|
403
|
-
|
404
405
|
img {
|
405
406
|
border-radius: var(--border-radius);
|
406
407
|
min-width: 15rem;
|
407
408
|
max-height: 10rem;
|
408
409
|
}
|
409
410
|
|
410
|
-
|
411
|
-
|
411
|
+
a {
|
412
|
+
display: block;
|
413
|
+
text-align: center;
|
414
|
+
|
415
|
+
&.active {
|
416
|
+
color: var(--pure-white);
|
417
|
+
|
418
|
+
span, span[class*="icon"] {
|
419
|
+
color: inherit
|
420
|
+
}
|
421
|
+
|
412
422
|
figcaption {
|
413
423
|
opacity: 1;
|
414
424
|
}
|
415
425
|
}
|
426
|
+
|
427
|
+
&:has(img) {
|
428
|
+
padding: 0;
|
429
|
+
}
|
430
|
+
|
431
|
+
&:hover, &:active, &:focus {
|
432
|
+
&.active {
|
433
|
+
figcaption {
|
434
|
+
color: var(--hyperlink-color);
|
435
|
+
}
|
436
|
+
}
|
437
|
+
}
|
416
438
|
}
|
417
439
|
|
418
440
|
.image-wrapper {
|
@@ -468,38 +490,36 @@ export default {
|
|
468
490
|
a {
|
469
491
|
color: var(--color-scheme-text-color);
|
470
492
|
text-decoration: none;
|
471
|
-
}
|
472
493
|
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
494
|
+
&.active {
|
495
|
+
img {
|
496
|
+
border-color: var(--primary-color);
|
497
|
+
}
|
477
498
|
|
478
|
-
|
479
|
-
|
499
|
+
figcaption {
|
500
|
+
color: var(--primary-color);
|
501
|
+
}
|
480
502
|
}
|
481
|
-
}
|
482
503
|
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
504
|
+
&:not(.active) {
|
505
|
+
img {
|
506
|
+
border: var(--default-border);
|
507
|
+
opacity: var(--reduced-opacity);
|
508
|
+
}
|
488
509
|
|
489
|
-
|
490
|
-
|
510
|
+
figcaption {
|
511
|
+
text-decoration: none;
|
512
|
+
}
|
491
513
|
}
|
492
514
|
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
}
|
515
|
+
&:hover, &:active, &:focus {
|
516
|
+
figcaption {
|
517
|
+
color: var(--primary-color);
|
518
|
+
}
|
498
519
|
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
}
|
520
|
+
img {
|
521
|
+
border-color: var(--primary-color);
|
522
|
+
opacity: 1;
|
503
523
|
}
|
504
524
|
}
|
505
525
|
}
|
@@ -101,6 +101,8 @@ export default {
|
|
101
101
|
}
|
102
102
|
},
|
103
103
|
mounted() {
|
104
|
+
window.addEventListener('scroll', this.hideOnScroll);
|
105
|
+
|
104
106
|
if(this.relatedId) {
|
105
107
|
const relatedElement = document.getElementById(this.relatedId)
|
106
108
|
|
@@ -118,6 +120,9 @@ export default {
|
|
118
120
|
}
|
119
121
|
},
|
120
122
|
methods: {
|
123
|
+
hideOnScroll() {
|
124
|
+
this.tooltipVisibility = true
|
125
|
+
},
|
121
126
|
toggleTooltipVisibility(event) {
|
122
127
|
this.getPointerPosition(event)
|
123
128
|
this.tooltipVisibility = !this.tooltipVisibility
|