comand-component-library 3.3.7 → 3.3.8
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.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +97 -28
- package/src/assets/data/address-data.json +8 -0
- package/src/assets/data/image-gallery.json +44 -20
- package/src/assets/data/image.json +28 -0
- package/src/assets/data/slideshow.json +68 -51
- package/src/assets/data/thumbnail-scroller.json +96 -40
- package/src/assets/styles/global-styles.scss +1 -1
- package/src/components/CmdAddressData.vue +45 -2
- package/src/components/CmdBox.vue +112 -62
- package/src/components/CmdCompanyLogo.vue +19 -2
- package/src/components/CmdFakeSelect.vue +2 -2
- package/src/components/CmdFancyBox.vue +41 -43
- package/src/components/CmdFormElement.vue +52 -42
- package/src/components/CmdFormFilters.vue +1 -1
- package/src/components/CmdHeadline.vue +29 -4
- package/src/components/CmdIcon.vue +4 -4
- package/src/components/CmdImage.vue +55 -0
- package/src/components/CmdImageGallery.vue +16 -15
- package/src/components/CmdImageZoom.vue +29 -13
- package/src/components/CmdInputGroup.vue +1 -2
- package/src/components/CmdListOfRequirements.vue +1 -1
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +3 -3
- package/src/components/CmdMultistepFormProgressBar.vue +9 -9
- package/src/components/CmdPager.vue +124 -88
- package/src/components/CmdShareButtons.vue +1 -1
- package/src/components/CmdSlideButton.vue +10 -3
- package/src/components/CmdSlideshow.vue +38 -31
- package/src/components/CmdSystemMessage.vue +32 -16
- package/src/components/CmdTable.vue +1 -1
- package/src/components/CmdTabs.vue +11 -11
- package/src/components/CmdThumbnailScroller.vue +15 -12
- package/src/components/CmdTooltip.vue +3 -3
- package/src/components/CmdUploadForm.vue +20 -20
- package/src/documentation/generated/CmdBoxPropertyDescriptions.json +7 -0
- package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +3 -13
- package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +10 -0
- package/src/documentation/generated/CmdIconPropertyDescriptions.json +1 -1
- package/src/documentation/generated/CmdImagePropertyDescriptions.json +12 -0
- package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +4 -4
- package/src/documentation/generated/CmdPagerPropertyDescriptions.json +14 -9
- package/src/index.js +3 -1
- package/src/mixins/CmdAddressData/DefaultMessageProperties.js +5 -2
- package/src/mixins/CmdBox/DefaultMessageProperties.js +3 -1
- package/src/mixins/CmdPager/DefaultMessageProperties.js +10 -0
@@ -439,7 +439,7 @@ export default {
|
|
439
439
|
span {
|
440
440
|
font-weight: bold;
|
441
441
|
|
442
|
-
&[class*="icon"] {
|
442
|
+
&[class*="icon-"] {
|
443
443
|
font-size: var(--font-size-small);
|
444
444
|
}
|
445
445
|
}
|
@@ -472,7 +472,7 @@ export default {
|
|
472
472
|
padding-left: calc(var(--default-margin) * 2);
|
473
473
|
|
474
474
|
span {
|
475
|
-
& +
|
475
|
+
& + [class*="icon-"]::before {
|
476
476
|
display: inline-block;
|
477
477
|
transform: rotate(0);
|
478
478
|
}
|
@@ -492,7 +492,7 @@ export default {
|
|
492
492
|
|
493
493
|
&.open {
|
494
494
|
> a span {
|
495
|
-
+
|
495
|
+
+ [class*="icon-"]::before {
|
496
496
|
display: inline-block;
|
497
497
|
transform: rotate(-180deg);
|
498
498
|
}
|
@@ -130,10 +130,10 @@ export default {
|
|
130
130
|
width: 100%;
|
131
131
|
background: var(--primary-color-reduced-opacity);
|
132
132
|
|
133
|
-
span,
|
133
|
+
span, [class*="icon-"] {
|
134
134
|
color: var(--default-background-color-reduced-opacity);
|
135
135
|
|
136
|
-
& +
|
136
|
+
& + [class*="icon-"] {
|
137
137
|
&:last-child {
|
138
138
|
border: var(--default-border);
|
139
139
|
border-radius: var(--full-circle);
|
@@ -155,7 +155,7 @@ export default {
|
|
155
155
|
}
|
156
156
|
|
157
157
|
&:hover, &:active, &:focus {
|
158
|
-
span,
|
158
|
+
span, [class*="icon-"] {
|
159
159
|
color: var(--pure-white);
|
160
160
|
}
|
161
161
|
}
|
@@ -181,7 +181,7 @@ export default {
|
|
181
181
|
|
182
182
|
&:last-child {
|
183
183
|
a {
|
184
|
-
|
184
|
+
[class*="icon-"] {
|
185
185
|
&:last-of-type {
|
186
186
|
display: none;
|
187
187
|
}
|
@@ -193,7 +193,7 @@ export default {
|
|
193
193
|
a {
|
194
194
|
background: var(--primary-color);
|
195
195
|
|
196
|
-
span,
|
196
|
+
span, [class*="icon-"] {
|
197
197
|
color: var(--pure-white);
|
198
198
|
}
|
199
199
|
}
|
@@ -215,7 +215,7 @@ export default {
|
|
215
215
|
span, span[class*='color'] {
|
216
216
|
color: inherit;
|
217
217
|
|
218
|
-
& +
|
218
|
+
& + [class*="icon-"] {
|
219
219
|
&:last-child {
|
220
220
|
border-color: var(--border-color);
|
221
221
|
color: var(--pure-white);
|
@@ -225,7 +225,7 @@ export default {
|
|
225
225
|
}
|
226
226
|
|
227
227
|
&:hover, &:active, &:focus {
|
228
|
-
span,
|
228
|
+
span, [class*="icon-"] {
|
229
229
|
&:not(:last-child) {
|
230
230
|
color: var(--primary-color);
|
231
231
|
}
|
@@ -251,8 +251,8 @@ export default {
|
|
251
251
|
}
|
252
252
|
|
253
253
|
a {
|
254
|
-
span,
|
255
|
-
& +
|
254
|
+
span, [class*="icon-"] {
|
255
|
+
& + [class*="icon-"] {
|
256
256
|
&:last-child {
|
257
257
|
left: auto;
|
258
258
|
right: auto;
|
@@ -1,42 +1,54 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-pager">
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
3
|
+
<!-- begin button/link to previous page -->
|
4
|
+
<a
|
5
|
+
:href="getPreviousHref"
|
6
|
+
:class="['page-change', {'disabled': currentPage === 1, 'button': linkType === 'button'}]"
|
7
|
+
@click.prevent="previousPage"
|
8
|
+
:title="!prevLink.showText ? prevLink.text : null"
|
9
|
+
>
|
10
|
+
<!-- begin CmdIcon -->
|
11
|
+
<CmdIcon :iconClass="prevLink.iconClass" :type="prevLink.iconType"/>
|
12
|
+
<!-- end CmdIcon -->
|
13
|
+
<span v-if="prevLink.showText">{{ prevLink.text }}</span>
|
14
|
+
</a>
|
15
|
+
<!-- end button/link to previous page -->
|
16
|
+
|
17
|
+
<!-- begin buttons/link with page numbers -->
|
18
|
+
<div class="page-index">
|
19
|
+
<div class="flex-container">
|
20
|
+
<a :href="getHref(page)"
|
21
|
+
:class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
|
22
|
+
:title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
|
23
|
+
v-for="(page, index) in pages"
|
24
|
+
:key="index"
|
25
|
+
@click.stop.prevent="showPage(page)" aria-live="polite">
|
26
|
+
<span>{{ index + 1 }}</span>
|
27
|
+
</a>
|
23
28
|
</div>
|
24
|
-
<!-- end buttons with page numbers -->
|
25
|
-
|
26
|
-
<!-- begin button to next page -->
|
27
|
-
<a class="page-change" :class="{'disabled': currentPage === numberOfPages, 'button': showLinksAsButtons}"
|
28
|
-
@click.prevent="nextPage">
|
29
|
-
<span v-if="nextButton.buttonText">{{ nextButton.buttonText }}</span>
|
30
|
-
<!-- begin CmdIcon -->
|
31
|
-
<CmdIcon :iconClass="nextButton.iconClass" :type="nextButton.iconType" />
|
32
|
-
<!-- end CmdIcon -->
|
33
|
-
</a>
|
34
|
-
<!-- end button to next page -->
|
35
29
|
</div>
|
30
|
+
<!-- end buttons/link with page numbers -->
|
31
|
+
|
32
|
+
<!-- begin button/link to next page -->
|
33
|
+
<a :href="getNextHref"
|
34
|
+
:class="['page-change', {'disabled': currentPage === numberOfPages, 'button': linkType === 'button'}]"
|
35
|
+
@click.prevent="nextPage"
|
36
|
+
:title="!nextLink.showText ? nextLink.text : null"
|
37
|
+
>
|
38
|
+
<span v-if="nextLink.showText">{{ nextLink.text }}</span>
|
39
|
+
<!-- begin CmdIcon -->
|
40
|
+
<CmdIcon :iconClass="nextLink.iconClass" :type="nextLink.iconType"/>
|
41
|
+
<!-- end CmdIcon -->
|
42
|
+
</a>
|
43
|
+
<!-- end button/link to next page -->
|
36
44
|
</div>
|
37
45
|
</template>
|
38
46
|
|
39
47
|
<script>
|
48
|
+
// import mixins
|
49
|
+
import I18n from "../mixins/I18n"
|
50
|
+
import DefaultMessageProperties from "../mixins/CmdPager/DefaultMessageProperties"
|
51
|
+
|
40
52
|
// import components
|
41
53
|
import CmdIcon from "./CmdIcon"
|
42
54
|
|
@@ -45,6 +57,10 @@ export default {
|
|
45
57
|
components: {
|
46
58
|
CmdIcon
|
47
59
|
},
|
60
|
+
mixins: [
|
61
|
+
I18n,
|
62
|
+
DefaultMessageProperties
|
63
|
+
],
|
48
64
|
emits: ['click'],
|
49
65
|
data() {
|
50
66
|
return {
|
@@ -53,9 +69,9 @@ export default {
|
|
53
69
|
},
|
54
70
|
props: {
|
55
71
|
/**
|
56
|
-
* number of
|
72
|
+
* number of pages displayed
|
57
73
|
*/
|
58
|
-
|
74
|
+
pages: {
|
59
75
|
type: Number,
|
60
76
|
required: true
|
61
77
|
},
|
@@ -67,37 +83,41 @@ export default {
|
|
67
83
|
required: true
|
68
84
|
},
|
69
85
|
/**
|
70
|
-
*
|
86
|
+
* set type of links
|
87
|
+
*
|
88
|
+
* @allowedValues: "href", "button"
|
71
89
|
*/
|
72
|
-
|
73
|
-
type:
|
74
|
-
default:
|
90
|
+
linkType: {
|
91
|
+
type: String,
|
92
|
+
default: "href"
|
75
93
|
},
|
76
94
|
/**
|
77
|
-
*
|
95
|
+
* link to switch to previous page
|
78
96
|
*
|
79
97
|
* @requiredForAccessibility: partial
|
80
98
|
*/
|
81
|
-
|
99
|
+
prevLink: {
|
82
100
|
type: Object,
|
83
|
-
default: function() {
|
101
|
+
default: function () {
|
84
102
|
return {
|
85
103
|
iconClass: "icon-single-arrow-left",
|
86
|
-
|
104
|
+
text: "prev",
|
105
|
+
showText: true
|
87
106
|
}
|
88
107
|
}
|
89
108
|
},
|
90
109
|
/**
|
91
|
-
*
|
110
|
+
* link to switch to next page
|
92
111
|
*
|
93
112
|
* @requiredForAccessibility: partial
|
94
113
|
*/
|
95
|
-
|
114
|
+
nextLink: {
|
96
115
|
type: Object,
|
97
|
-
default: function() {
|
116
|
+
default: function () {
|
98
117
|
return {
|
99
118
|
iconClass: "icon-single-arrow-right",
|
100
|
-
|
119
|
+
text: "next",
|
120
|
+
showText: true
|
101
121
|
}
|
102
122
|
}
|
103
123
|
}
|
@@ -105,12 +125,30 @@ export default {
|
|
105
125
|
computed: {
|
106
126
|
numberOfPages() {
|
107
127
|
return Math.ceil(this.items / this.itemsPerPage)
|
128
|
+
},
|
129
|
+
getPreviousHref() {
|
130
|
+
if (this.currentPage === 1) {
|
131
|
+
return null
|
132
|
+
}
|
133
|
+
return "#"
|
134
|
+
},
|
135
|
+
getNextHref() {
|
136
|
+
if (this.currentPage === this.numberOfPages) {
|
137
|
+
return null
|
138
|
+
}
|
139
|
+
return "#"
|
108
140
|
}
|
109
141
|
},
|
110
142
|
methods: {
|
143
|
+
getHref(page) {
|
144
|
+
if (this.linkType !== "href" || this.currentPage === page) {
|
145
|
+
return null
|
146
|
+
}
|
147
|
+
return "#"
|
148
|
+
},
|
111
149
|
showPage(page) {
|
112
150
|
this.currentPage = page
|
113
|
-
this.$emit(
|
151
|
+
this.$emit("click", page)
|
114
152
|
},
|
115
153
|
nextPage() {
|
116
154
|
if (this.currentPage < this.numberOfPages) {
|
@@ -128,70 +166,68 @@ export default {
|
|
128
166
|
</script>
|
129
167
|
|
130
168
|
<style lang="scss">
|
131
|
-
@import '../assets/styles/variables';
|
132
169
|
/* begin cmd-pager ---------------------------------------------------------------------------------------- */
|
170
|
+
@import '../assets/styles/variables';
|
171
|
+
|
133
172
|
.cmd-pager {
|
134
|
-
|
135
|
-
|
173
|
+
display: flex;
|
174
|
+
justify-content: space-between;
|
175
|
+
|
176
|
+
button, .button {
|
177
|
+
float: none;
|
178
|
+
margin: 0;
|
179
|
+
|
180
|
+
span {
|
181
|
+
align-self: center;
|
182
|
+
}
|
136
183
|
}
|
137
184
|
|
138
|
-
|
185
|
+
a {
|
139
186
|
display: flex;
|
140
|
-
|
141
|
-
|
142
|
-
button, .button {
|
143
|
-
float: none;
|
144
|
-
margin: 0;
|
187
|
+
align-items: center;
|
188
|
+
text-decoration: none;
|
145
189
|
|
146
|
-
|
147
|
-
|
148
|
-
}
|
190
|
+
&:hover, &:active, &:focus {
|
191
|
+
cursor: pointer;
|
149
192
|
}
|
150
193
|
|
151
|
-
|
152
|
-
&:last-of-type {
|
153
|
-
> [class*="icon-"] {
|
154
|
-
margin-right: 0;
|
155
|
-
}
|
156
|
-
}
|
157
|
-
|
194
|
+
&:last-of-type {
|
158
195
|
> [class*="icon-"] {
|
159
|
-
|
196
|
+
margin-right: 0;
|
160
197
|
}
|
161
198
|
}
|
162
199
|
|
163
|
-
|
164
|
-
|
200
|
+
> [class*="icon-"] {
|
201
|
+
font-size: var(--icon-size-small);
|
165
202
|
}
|
203
|
+
}
|
166
204
|
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
padding-top: 0;
|
171
|
-
}
|
205
|
+
.page-index {
|
206
|
+
a:not(.button) {
|
207
|
+
padding: 0 calc(var(--default-padding) / 2);
|
172
208
|
}
|
209
|
+
}
|
173
210
|
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
211
|
+
@media only screen and (max-width: $medium-max-width) {
|
212
|
+
> a.button {
|
213
|
+
span {
|
214
|
+
margin: 0;
|
178
215
|
|
179
|
-
|
180
|
-
|
181
|
-
}
|
216
|
+
&:not([class*='icon']) {
|
217
|
+
display: none;
|
182
218
|
}
|
183
219
|
}
|
184
220
|
}
|
221
|
+
}
|
185
222
|
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
223
|
+
@media only screen and (max-width: $small-max-width) {
|
224
|
+
.button {
|
225
|
+
width: auto; /* overwrite default settings from framework.css */
|
226
|
+
}
|
190
227
|
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
}
|
228
|
+
.page-index {
|
229
|
+
.flex-container {
|
230
|
+
flex-direction: row; /* overwrite default settings from framework.css */
|
195
231
|
}
|
196
232
|
}
|
197
233
|
}
|
@@ -3,13 +3,21 @@
|
|
3
3
|
@click.prevent
|
4
4
|
:class="['cmd-slide-button', 'button', slideButtonType]"
|
5
5
|
:title="getDirection.tooltip">
|
6
|
-
|
6
|
+
<!-- being CmdIcon -->
|
7
|
+
<CmdIcon :iconClass="getDirection.iconClass || 'next'" />
|
8
|
+
<!-- end CmdIcon -->
|
7
9
|
</a>
|
8
10
|
</template>
|
9
11
|
|
10
12
|
<script>
|
13
|
+
// import components
|
14
|
+
import CmdIcon from "./CmdIcon"
|
15
|
+
|
11
16
|
export default {
|
12
17
|
name: "CmdSlideButton",
|
18
|
+
components: {
|
19
|
+
CmdIcon
|
20
|
+
},
|
13
21
|
props: {
|
14
22
|
/**
|
15
23
|
* set slide-button-type
|
@@ -88,7 +96,7 @@ export default {
|
|
88
96
|
transition: var(--default-transition);
|
89
97
|
|
90
98
|
span {
|
91
|
-
color: var(--
|
99
|
+
color: var(--hyperlink-color-highlighted);
|
92
100
|
}
|
93
101
|
}
|
94
102
|
|
@@ -105,7 +113,6 @@ export default {
|
|
105
113
|
&.up, &.down {
|
106
114
|
width: 100%;
|
107
115
|
height: auto;
|
108
|
-
height: auto;
|
109
116
|
left: 0;
|
110
117
|
top: 0;
|
111
118
|
}
|
@@ -10,23 +10,27 @@
|
|
10
10
|
|
11
11
|
<!-- begin area to slide -->
|
12
12
|
<transition name="fade">
|
13
|
-
<a v-if="currentItem?.href" :href="currentItem
|
13
|
+
<a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
|
14
14
|
<figure v-if="currentItem && !useSlot" class="slideshow-item">
|
15
|
-
|
16
|
-
<
|
15
|
+
<!-- begin CmdImage -->
|
16
|
+
<CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
17
|
+
<!-- begin CmdImage -->
|
17
18
|
</figure>
|
18
19
|
</a>
|
19
|
-
<figure v-else-if="currentItem && !currentItem
|
20
|
-
|
21
|
-
|
20
|
+
<figure v-else-if="currentItem && !currentItem?.link?.href && !useSlot" :key="index" class="slideshow-item">
|
21
|
+
<!-- begin CmdImage -->
|
22
|
+
<CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
23
|
+
<!-- begin CmdImage -->
|
22
24
|
</figure>
|
23
25
|
<div
|
24
|
-
class="image-wrapper"
|
25
26
|
v-else-if="currentItem && useSlot"
|
27
|
+
class="image-wrapper"
|
26
28
|
:key="index"
|
27
|
-
:style="'background-image: url(' + currentItem.
|
29
|
+
:style="'background-image: url(' + currentItem.image.srcLarge + ')'"
|
28
30
|
>
|
31
|
+
<!-- begin slot -->
|
29
32
|
<slot :name="'item' + currentSlotItem"></slot>
|
33
|
+
<!-- end slot -->
|
30
34
|
</div>
|
31
35
|
</transition>
|
32
36
|
<!-- end area to slide -->
|
@@ -49,6 +53,7 @@
|
|
49
53
|
|
50
54
|
<script>
|
51
55
|
// import components
|
56
|
+
import CmdImage from "./CmdImage"
|
52
57
|
import CmdSlideButton from "./CmdSlideButton"
|
53
58
|
|
54
59
|
const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
|
@@ -67,6 +72,7 @@ export default {
|
|
67
72
|
}
|
68
73
|
},
|
69
74
|
components: {
|
75
|
+
CmdImage,
|
70
76
|
CmdSlideButton
|
71
77
|
},
|
72
78
|
props: {
|
@@ -182,14 +188,12 @@ export default {
|
|
182
188
|
}
|
183
189
|
this.preload(this.index)
|
184
190
|
},
|
185
|
-
|
186
191
|
setupSlider() {
|
187
192
|
this.preload();
|
188
193
|
if (this.autoplay && this.hnd === null) {
|
189
194
|
this.hnd = window.setInterval(() => this.pause || this.showNextItem(), this.autoplayInterval);
|
190
195
|
}
|
191
196
|
},
|
192
|
-
|
193
197
|
preload(index = 0, num = 2) {
|
194
198
|
if (!this.preloadComplete) {
|
195
199
|
for (let i = index, n = index + num, c = this.slideshowItems.length; i < n && i < c; i++) {
|
@@ -202,34 +206,37 @@ export default {
|
|
202
206
|
this.preloadComplete = !this.slideshowItems.find(NOT_YET_PRELOADED_IMAGES);
|
203
207
|
}
|
204
208
|
},
|
205
|
-
|
206
209
|
getDeviceImage(item) {
|
207
|
-
if (item === undefined || item.
|
210
|
+
if (item === undefined || item.image === undefined) {
|
208
211
|
return null;
|
209
212
|
}
|
210
213
|
const deviceWidth = window.innerWidth;
|
211
|
-
const
|
212
|
-
|
213
|
-
for (let i = 0, c = item.
|
214
|
-
const deviceImage = item.
|
215
|
-
|
216
|
-
if (!deviceImage.maxWidth || deviceWidth <= deviceImage.maxWidth) {
|
217
|
-
image.
|
218
|
-
image.alt = item.alt
|
219
|
-
image.
|
220
|
-
|
221
|
-
|
222
|
-
|
214
|
+
const currentImage = {};
|
215
|
+
|
216
|
+
for (let i = 0, c = item.image.length; i < c; i++) {
|
217
|
+
const deviceImage = item.image[i];
|
218
|
+
|
219
|
+
if (!deviceImage.image.maxWidth || deviceWidth <= deviceImage.image.maxWidth) {
|
220
|
+
currentImage.image.srcSmall = deviceImage.image.srcSmall
|
221
|
+
currentImage.image.alt = item.image.alt
|
222
|
+
currentImage.image.tooltip = item.image.tooltip
|
223
|
+
currentImage.figcaption.text = item.figcaption.text
|
224
|
+
currentImage.figcaption.position = item.figcaption.position
|
225
|
+
currentImage.figcaption.textAlign = item.figcaption.textAlign
|
226
|
+
currentImage.figcaption.show = item.figcaption.show
|
227
|
+
return currentImage;
|
223
228
|
}
|
224
229
|
}
|
225
230
|
|
226
|
-
if (item.
|
227
|
-
image.
|
228
|
-
image.alt = item.alt
|
229
|
-
image.
|
230
|
-
|
231
|
-
|
232
|
-
|
231
|
+
if (item.image.length) {
|
232
|
+
currentImage.image.srcSmall = item.image.srcSmall
|
233
|
+
currentImage.image.alt = item.image.alt
|
234
|
+
currentImage.image.tooltip = item.image.tooltip
|
235
|
+
currentImage.figcaption.text = item.figcaption.text
|
236
|
+
currentImage.figcaption.position = item.figcaption.position
|
237
|
+
currentImage.figcaption.textAlign = item.figcaption.textAlign
|
238
|
+
currentImage.figcaption.show = item.figcaption.show
|
239
|
+
return currentImage;
|
233
240
|
}
|
234
241
|
return null;
|
235
242
|
}
|
@@ -22,7 +22,7 @@
|
|
22
22
|
<!-- begin CmdHeadline -->
|
23
23
|
<CmdHeadline
|
24
24
|
class="message-headline"
|
25
|
-
:
|
25
|
+
:headlineIcon="headlineIcon"
|
26
26
|
:headlineText="systemMessage"
|
27
27
|
:headlineLevel="messageHeadlineLevel"
|
28
28
|
:id="htmlId"
|
@@ -82,7 +82,8 @@ export default {
|
|
82
82
|
default: function() {
|
83
83
|
return {
|
84
84
|
show: true,
|
85
|
-
iconClass: "icon-warning"
|
85
|
+
iconClass: "icon-warning",
|
86
|
+
type: "auto"
|
86
87
|
}
|
87
88
|
}
|
88
89
|
},
|
@@ -118,6 +119,17 @@ export default {
|
|
118
119
|
}
|
119
120
|
}
|
120
121
|
},
|
122
|
+
computed: {
|
123
|
+
headlineIcon() {
|
124
|
+
if(this.iconMessage.show) {
|
125
|
+
return {
|
126
|
+
iconClass: this.iconMessage.iconClass,
|
127
|
+
type: this.iconMessage.type
|
128
|
+
}
|
129
|
+
}
|
130
|
+
return null
|
131
|
+
}
|
132
|
+
},
|
121
133
|
watch: {
|
122
134
|
message() {
|
123
135
|
this.showSystemMessage = true
|
@@ -145,28 +157,32 @@ export default {
|
|
145
157
|
}
|
146
158
|
}
|
147
159
|
|
148
|
-
> a
|
149
|
-
|
150
|
-
font-weight: bold;
|
151
|
-
color: var(--pure-white);
|
160
|
+
> a:not(.button) {
|
161
|
+
display: block;
|
152
162
|
position: absolute;
|
163
|
+
top: 0.5rem;
|
153
164
|
right: 0.5rem;
|
154
165
|
text-decoration: none;
|
155
|
-
top: 0.5rem;
|
156
|
-
border: var(--default-border);
|
157
|
-
border-color: var(--pure-white);
|
158
|
-
border-radius: var(--full-circle);
|
159
|
-
padding: calc(var(--default-padding) / 2);
|
160
166
|
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
167
|
+
[class*="icon-"] {
|
168
|
+
font-size: 0.8rem;
|
169
|
+
font-weight: bold;
|
170
|
+
color: var(--pure-white);
|
171
|
+
border: var(--default-border);
|
172
|
+
border-color: var(--pure-white);
|
173
|
+
border-radius: var(--full-circle);
|
174
|
+
padding: calc(var(--default-padding) / 2);
|
175
|
+
|
176
|
+
&:hover, &:active, &:focus {
|
177
|
+
color: var(--hyperlink-color);
|
178
|
+
border-color: var(--hyperlink-color);
|
179
|
+
background: var(--pure-white);
|
180
|
+
}
|
165
181
|
}
|
166
182
|
}
|
167
183
|
|
168
184
|
&.warning {
|
169
|
-
> a[class*="icon-"]
|
185
|
+
> a:not(.button) [class*="icon-"] {
|
170
186
|
color: var(--text-color);
|
171
187
|
border-color: var(--text-color);
|
172
188
|
|