comand-component-library 3.3.87 → 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 +1728 -1655
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +2629 -0
- package/src/assets/data/address-data.json +3 -3
- package/src/assets/data/main-navigation.json +2 -0
- package/src/components/CmdAddressData.vue +91 -97
- package/src/components/CmdAddressDataItem.vue +60 -52
- package/src/components/CmdBankAccountData.vue +1 -1
- package/src/components/CmdBox.vue +50 -14
- package/src/components/CmdBoxWrapper.vue +23 -9
- package/src/components/CmdBreadcrumbs.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +14 -11
- package/src/components/CmdContainer.vue +1 -1
- package/src/components/CmdCookieDisclaimer.vue +1 -1
- package/src/components/CmdCopyrightInformation.vue +1 -1
- package/src/components/CmdFancyBox.vue +8 -5
- package/src/components/CmdForm.vue +7 -1
- package/src/components/CmdFormElement.vue +58 -108
- package/src/components/CmdFormFilters.vue +2 -1
- package/src/components/CmdGoogleMaps.vue +1 -1
- package/src/components/CmdHeadline.vue +116 -52
- package/src/components/CmdIcon.vue +1 -1
- package/src/components/CmdImage.vue +1 -1
- package/src/components/CmdImageGallery.vue +1 -1
- package/src/components/CmdImageZoom.vue +1 -1
- package/src/components/CmdInputGroup.vue +8 -7
- package/src/components/CmdListOfLinks.vue +25 -25
- package/src/components/CmdListOfLinksItem.vue +0 -4
- package/src/components/CmdListOfRequirements.vue +10 -2
- package/src/components/CmdLoginForm.vue +2 -1
- package/src/components/CmdMainNavigation.vue +38 -26
- package/src/components/CmdMultistepFormProgressBar.vue +50 -4
- package/src/components/CmdNewsletterSubscription.vue +8 -15
- package/src/components/CmdOpeningHours.vue +34 -19
- package/src/components/CmdOpeningHoursItem.vue +22 -14
- package/src/components/CmdPagination.vue +22 -16
- package/src/components/CmdProgressBar.vue +1 -1
- package/src/components/CmdSidebar.vue +13 -2
- package/src/components/CmdSiteFooter.vue +14 -14
- package/src/components/CmdSiteHeader.vue +14 -29
- package/src/components/CmdSiteSearch.vue +12 -11
- package/src/components/CmdSlideButton.vue +9 -7
- package/src/components/CmdSlideshow.vue +14 -12
- package/src/components/CmdSocialNetworks.vue +11 -4
- package/src/components/CmdSocialNetworksItem.vue +2 -7
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdSystemMessage.vue +11 -6
- package/src/components/CmdTable.vue +64 -16
- package/src/components/CmdTabs.vue +2 -2
- package/src/components/CmdTextImageBlock.vue +3 -1
- package/src/components/CmdThumbnailScroller.vue +180 -155
- package/src/components/CmdToggleDarkMode.vue +1 -1
- package/src/components/CmdTooltip.vue +6 -1
- package/src/components/CmdUploadForm.vue +69 -43
- package/src/components/CmdWidthLimitationWrapper.vue +7 -3
- package/src/components/ComponentSettings.vue +171 -0
- package/src/main.js +3 -3
- package/src/mixins/FieldValidation.js +0 -17
- package/src/App.vue +0 -2119
@@ -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: {
|
@@ -100,14 +104,42 @@ export default {
|
|
100
104
|
}
|
101
105
|
</script>
|
102
106
|
|
103
|
-
<style
|
107
|
+
<style>
|
104
108
|
/* begin cmd-multistep-form-progress-bar ---------------------------------------------------------------------------------------- */
|
105
|
-
@import '../assets/styles/variables';
|
106
109
|
|
107
110
|
.cmd-multistep-form-progress-bar {
|
108
111
|
display: flex;
|
109
112
|
justify-content: space-around;
|
110
113
|
border: var(--default-border);
|
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;
|
@@ -263,6 +305,10 @@ export default {
|
|
263
305
|
}
|
264
306
|
}
|
265
307
|
}
|
308
|
+
</style>
|
309
|
+
|
310
|
+
<style lang="scss">
|
311
|
+
@import '../assets/styles/variables';
|
266
312
|
|
267
313
|
@media only screen and (width < #{$small-max-width}) {
|
268
314
|
.cmd-multistep-form-progress-bar {
|
@@ -274,7 +320,7 @@ export default {
|
|
274
320
|
}
|
275
321
|
|
276
322
|
a {
|
277
|
-
span, [class*="icon-"] {
|
323
|
+
:is(span, [class*="icon-"]) {
|
278
324
|
& + [class*="icon-"] {
|
279
325
|
&:last-child {
|
280
326
|
left: auto;
|
@@ -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
|
*/
|
@@ -171,11 +171,4 @@ export default {
|
|
171
171
|
}
|
172
172
|
}
|
173
173
|
}
|
174
|
-
</script>
|
175
|
-
|
176
|
-
<style lang="scss">
|
177
|
-
/* begin cmd-newsletter-subscription ---------------------------------------------------------------------------------------- */
|
178
|
-
|
179
|
-
|
180
|
-
/* cmd-newsletter-subscription------------------------------------------------------------------------------------------ */
|
181
|
-
</style>
|
174
|
+
</script>
|
@@ -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() {
|
@@ -434,7 +449,7 @@ export default {
|
|
434
449
|
}
|
435
450
|
</script>
|
436
451
|
|
437
|
-
<style
|
452
|
+
<style>
|
438
453
|
/* begin cmd-opening-hours ------------------------------------------------------------------------------------------ */
|
439
454
|
.cmd-opening-hours {
|
440
455
|
> a, > span {
|
@@ -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
|
@@ -246,8 +250,12 @@ export default {
|
|
246
250
|
}
|
247
251
|
</script>
|
248
252
|
|
249
|
-
<style
|
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
|
-
|
26
|
+
<span>{{ index + 1 }}</span>
|
27
27
|
</a>
|
28
28
|
</div>
|
29
29
|
</div>
|
@@ -48,11 +48,12 @@
|
|
48
48
|
// import mixins
|
49
49
|
import I18n from "../mixins/I18n"
|
50
50
|
import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
|
51
|
+
|
51
52
|
export default {
|
52
53
|
name: "CmdPager",
|
53
54
|
mixins: [
|
54
|
-
|
55
|
-
|
55
|
+
I18n,
|
56
|
+
DefaultMessageProperties
|
56
57
|
],
|
57
58
|
emits: ['click'],
|
58
59
|
data() {
|
@@ -165,10 +166,8 @@ export default {
|
|
165
166
|
}
|
166
167
|
</script>
|
167
168
|
|
168
|
-
<style
|
169
|
+
<style>
|
169
170
|
/* begin cmd-pagination ---------------------------------------------------------------------------------------- */
|
170
|
-
@import '../assets/styles/variables';
|
171
|
-
|
172
171
|
.cmd-pager {
|
173
172
|
display: flex;
|
174
173
|
justify-content: space-between;
|
@@ -208,7 +207,14 @@ export default {
|
|
208
207
|
}
|
209
208
|
}
|
210
209
|
|
211
|
-
|
210
|
+
}
|
211
|
+
</style>
|
212
|
+
|
213
|
+
<style lang="scss">
|
214
|
+
@import '../assets/styles/variables';
|
215
|
+
|
216
|
+
@media only screen and (max-width: $medium-max-width) {
|
217
|
+
.cmd-pager {
|
212
218
|
> a.button {
|
213
219
|
span {
|
214
220
|
margin: 0;
|
@@ -218,16 +224,16 @@ export default {
|
|
218
224
|
}
|
219
225
|
}
|
220
226
|
}
|
221
|
-
}
|
222
227
|
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
228
|
+
@media only screen and (max-width: $small-max-width) {
|
229
|
+
.button {
|
230
|
+
width: auto; /* overwrite default settings from framework.css */
|
231
|
+
}
|
227
232
|
|
228
|
-
|
229
|
-
|
230
|
-
|
233
|
+
.page-index {
|
234
|
+
.flex-container {
|
235
|
+
flex-direction: row; /* overwrite default settings from framework.css */
|
236
|
+
}
|
231
237
|
}
|
232
238
|
}
|
233
239
|
}
|
@@ -122,7 +122,8 @@ export default {
|
|
122
122
|
}
|
123
123
|
</script>
|
124
124
|
|
125
|
-
<style
|
125
|
+
<style>
|
126
|
+
/* begin cmd-sidebar ---------------------------------------------------------------------------------------- */
|
126
127
|
.cmd-sidebar {
|
127
128
|
display: flex;
|
128
129
|
height: 100%;
|
@@ -131,6 +132,15 @@ export default {
|
|
131
132
|
padding: 0;
|
132
133
|
}
|
133
134
|
|
135
|
+
.cmd-box-wrapper > .grid-container-create-columns {
|
136
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
137
|
+
}
|
138
|
+
|
139
|
+
.cmd-box {
|
140
|
+
border-left: 0;
|
141
|
+
border-right: 0;
|
142
|
+
}
|
143
|
+
|
134
144
|
.inner-sidebar-wrapper {
|
135
145
|
flex: 1;
|
136
146
|
display: flex;
|
@@ -157,11 +167,12 @@ export default {
|
|
157
167
|
|
158
168
|
&.collapse-to-right {
|
159
169
|
flex-direction: row-reverse;
|
170
|
+
border-right: 0;
|
160
171
|
|
161
172
|
> a {
|
162
|
-
border-left: 0;
|
163
173
|
border-right: var(--default-border);
|
164
174
|
}
|
165
175
|
}
|
166
176
|
}
|
177
|
+
/* end cmd-sidebar ---------------------------------------------------------------------------------------- */
|
167
178
|
</style>
|
@@ -23,10 +23,8 @@ export default {
|
|
23
23
|
}
|
24
24
|
</script>
|
25
25
|
|
26
|
-
<style
|
26
|
+
<style>
|
27
27
|
/* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
|
28
|
-
@import '../assets/styles/variables';
|
29
|
-
|
30
28
|
.cmd-site-footer {
|
31
29
|
padding: var(--grid-gap) 0;
|
32
30
|
border-top: var(--default-border);
|
@@ -49,6 +47,10 @@ export default {
|
|
49
47
|
flex: none;
|
50
48
|
}
|
51
49
|
}
|
50
|
+
</style>
|
51
|
+
|
52
|
+
<style lang="scss">
|
53
|
+
@import '../assets/styles/variables';
|
52
54
|
|
53
55
|
@media only screen and (max-width: $medium-max-width) {
|
54
56
|
.cmd-site-footer {
|
@@ -57,21 +59,19 @@ export default {
|
|
57
59
|
margin-bottom: calc(var(--default-margin) * 2);
|
58
60
|
}
|
59
61
|
}
|
60
|
-
}
|
61
|
-
}
|
62
62
|
|
63
|
-
@media only screen and (max-width: $small-max-width) {
|
64
|
-
|
65
|
-
|
66
|
-
text-decoration: underline;
|
63
|
+
@media only screen and (max-width: $small-max-width) {
|
64
|
+
a {
|
65
|
+
text-decoration: underline;
|
67
66
|
|
68
|
-
|
69
|
-
|
67
|
+
&:active {
|
68
|
+
text-decoration: none;
|
69
|
+
}
|
70
70
|
}
|
71
|
-
}
|
72
71
|
|
73
|
-
|
74
|
-
|
72
|
+
h4, h5, h6 {
|
73
|
+
margin-top: var(--default-margin);
|
74
|
+
}
|
75
75
|
}
|
76
76
|
}
|
77
77
|
}
|
@@ -1,5 +1,7 @@
|
|
1
1
|
<template>
|
2
|
-
<div
|
2
|
+
<div
|
3
|
+
:class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
|
4
|
+
role="banner">
|
3
5
|
<!-- begin slot for elements above header -->
|
4
6
|
<div v-if="$slots.topheader" class="top-header">
|
5
7
|
<slot name="topheader"></slot>
|
@@ -33,6 +35,7 @@
|
|
33
35
|
v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
|
34
36
|
:navigationEntries="cmdMainNavigation.navigationEntries"
|
35
37
|
:offcanvasPosition="cmdMainNavigation.offcanvasPosition"
|
38
|
+
:stretchMainItems="cmdMainNavigation.stretchMainItems"
|
36
39
|
:closeOffcanvas="closeOffcanvas"
|
37
40
|
@offcanvas="emitOffcanvasStatus"
|
38
41
|
/>
|
@@ -47,6 +50,7 @@
|
|
47
50
|
:navigationEntries="cmdMainNavigation.navigationEntries"
|
48
51
|
:offcanvasPosition="cmdMainNavigation.offcanvasPosition"
|
49
52
|
:closeOffcanvas="closeOffcanvas"
|
53
|
+
:stretchMainItems="cmdMainNavigation.stretchMainItems"
|
50
54
|
@offcanvas="emitOffcanvasStatus"
|
51
55
|
/>
|
52
56
|
<!-- end CmdMainNavigation -->
|
@@ -106,7 +110,7 @@ export default {
|
|
106
110
|
}
|
107
111
|
},
|
108
112
|
methods: {
|
109
|
-
emitOffcanvasStatus(event){
|
113
|
+
emitOffcanvasStatus(event) {
|
110
114
|
this.$emit("offcanvas", event)
|
111
115
|
}
|
112
116
|
}
|
@@ -115,8 +119,6 @@ export default {
|
|
115
119
|
|
116
120
|
<style lang="scss">
|
117
121
|
/* begin cmd-site-header ---------------------------------------------------------------------------------------- */
|
118
|
-
@import '../assets/styles/variables';
|
119
|
-
|
120
122
|
.cmd-site-header {
|
121
123
|
grid-area: site-header;
|
122
124
|
display: flex;
|
@@ -152,7 +154,7 @@ export default {
|
|
152
154
|
border-bottom: 0;
|
153
155
|
}
|
154
156
|
|
155
|
-
|
157
|
+
/* use id to ensure high specificity */
|
156
158
|
> .cmd-main-navigation#main-navigation-wrapper:last-child {
|
157
159
|
border-bottom: 0;
|
158
160
|
}
|
@@ -183,14 +185,10 @@ export default {
|
|
183
185
|
.cmd-main-navigation,
|
184
186
|
nav ul li {
|
185
187
|
border-bottom: 0;
|
186
|
-
background: none;
|
187
|
-
}
|
188
|
-
|
189
|
-
.cmd-company-logo {
|
190
|
-
grid-column: span var(--grid-small-span);
|
191
188
|
}
|
192
189
|
}
|
193
190
|
|
191
|
+
/* begin inline-navigation (shares spaces with company-logo */
|
194
192
|
&.navigation-inline {
|
195
193
|
header {
|
196
194
|
&.has-navigation {
|
@@ -209,26 +207,7 @@ export default {
|
|
209
207
|
display: flex;
|
210
208
|
align-items: center;
|
211
209
|
justify-content: flex-end;
|
212
|
-
border: 0;
|
213
210
|
grid-column: span var(--grid-large-span);
|
214
|
-
background: none;
|
215
|
-
|
216
|
-
:where(nav, .nav) {
|
217
|
-
margin-right: 0;
|
218
|
-
|
219
|
-
> ul {
|
220
|
-
border: 0;
|
221
|
-
background: none;
|
222
|
-
|
223
|
-
li {
|
224
|
-
border: 0;
|
225
|
-
|
226
|
-
ul {
|
227
|
-
border-top: var(--default-border);
|
228
|
-
}
|
229
|
-
}
|
230
|
-
}
|
231
|
-
}
|
232
211
|
|
233
212
|
&:not(.persist-on-mobile) {
|
234
213
|
padding-left: 0 !important;
|
@@ -244,7 +223,13 @@ export default {
|
|
244
223
|
}
|
245
224
|
}
|
246
225
|
}
|
226
|
+
|
227
|
+
/* end inline-navigation (shares spaces with company-logo */
|
247
228
|
}
|
229
|
+
</style>
|
230
|
+
|
231
|
+
<style lang="scss">
|
232
|
+
@import '../assets/styles/variables';
|
248
233
|
|
249
234
|
@media only screen and (max-width: $medium-max-width) {
|
250
235
|
.cmd-site-header {
|
@@ -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
|
*/
|