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
@@ -16,7 +16,7 @@
|
|
16
16
|
<!-- begin address-data in vCard microformat -->
|
17
17
|
<address class="adr">
|
18
18
|
<!-- begin list with labels -->
|
19
|
-
<template v-if="showLabels && !showIconsOnly">
|
19
|
+
<template v-if="showLabels && (showLabelTexts|| showLabelIcons) && !showIconsOnly">
|
20
20
|
<!-- begin default view -->
|
21
21
|
<dl v-if="!editModeContext">
|
22
22
|
<!-- begin cmd-address-data-item -->
|
@@ -56,8 +56,8 @@
|
|
56
56
|
<!-- end default header with slot -->
|
57
57
|
|
58
58
|
<!-- begin box-body -->
|
59
|
-
<div v-show="open" class="box-body" aria-expanded="true" role="article">
|
60
|
-
<div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding}">
|
59
|
+
<div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
|
60
|
+
<div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}" :style="setMaxBoxBodyHeight">
|
61
61
|
<!-- begin slot 'body' -->
|
62
62
|
<slot name="body">
|
63
63
|
<transition-group :name="toggleTransition">
|
@@ -79,7 +79,7 @@
|
|
79
79
|
<template v-else>
|
80
80
|
<img v-if="image" :src="image.src" :alt="image.altText"/>
|
81
81
|
|
82
|
-
<div :class="{'default-padding': useDefaultPadding}">
|
82
|
+
<div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
|
83
83
|
<!-- begin CmdHeadline -->
|
84
84
|
<CmdHeadline
|
85
85
|
v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
|
@@ -219,6 +219,22 @@ export default {
|
|
219
219
|
type: String,
|
220
220
|
default: "content"
|
221
221
|
},
|
222
|
+
/**
|
223
|
+
* set if content (in box-body) should scroll
|
224
|
+
*
|
225
|
+
* (maxBoxBodyHeight must be set)
|
226
|
+
*/
|
227
|
+
allowContentToScroll: {
|
228
|
+
type: Boolean,
|
229
|
+
default: false
|
230
|
+
},
|
231
|
+
/**
|
232
|
+
* set max-height for body (should only be used it allowContentToScroll-property is active)
|
233
|
+
*/
|
234
|
+
maxBoxBodyHeight: {
|
235
|
+
type: String,
|
236
|
+
default: "10rem"
|
237
|
+
},
|
222
238
|
/**
|
223
239
|
* activate if box should be collapsible
|
224
240
|
*/
|
@@ -261,12 +277,19 @@ export default {
|
|
261
277
|
/**
|
262
278
|
* use transition to expand and collapse box-body
|
263
279
|
*
|
264
|
-
* boyType must be 'content' and 'collapsible' must be activated
|
280
|
+
* 'boyType-property' must be set to 'content' and 'collapsible-property' must be activated
|
265
281
|
*/
|
266
282
|
useTransition: {
|
267
283
|
type: Boolean,
|
268
284
|
default: true
|
269
285
|
},
|
286
|
+
/**
|
287
|
+
* custom class placed on box-body-container
|
288
|
+
*/
|
289
|
+
boxBodyClass: {
|
290
|
+
type: String,
|
291
|
+
required: false
|
292
|
+
},
|
270
293
|
/**
|
271
294
|
* set default profile-icon (will eb shown if no user-image exists)
|
272
295
|
*/
|
@@ -383,6 +406,12 @@ export default {
|
|
383
406
|
}
|
384
407
|
},
|
385
408
|
computed: {
|
409
|
+
setMaxBoxBodyHeight() {
|
410
|
+
if (this.allowContentToScroll && this.maxBoxBodyHeight) {
|
411
|
+
return this.maxBoxBodyHeight
|
412
|
+
}
|
413
|
+
return null
|
414
|
+
},
|
386
415
|
toggleTransition() {
|
387
416
|
if (this.useTransition) {
|
388
417
|
return "fade"
|
@@ -456,6 +485,13 @@ export default {
|
|
456
485
|
}
|
457
486
|
}
|
458
487
|
|
488
|
+
.box-body {
|
489
|
+
.allow-scroll {
|
490
|
+
overflow-y: auto;
|
491
|
+
/*max-height: '${this.maxBoxBodyHeight}'*/
|
492
|
+
}
|
493
|
+
}
|
494
|
+
|
459
495
|
/* boyType === 'content' */
|
460
496
|
&.content {
|
461
497
|
> * {
|
@@ -1,7 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-box-wrapper">
|
3
|
-
<div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes"
|
4
|
-
class="flex-container headline-wrapper">
|
3
|
+
<div v-if="cmdHeadline.headlineText || allowUserToToggleOrientation || allowTogglingCollapsingBoxes" class="flex-container headline-wrapper">
|
5
4
|
<!-- begin CmdHeadline -->
|
6
5
|
<CmdHeadline v-if="cmdHeadline.headlineText" v-bind="cmdHeadline" />
|
7
6
|
<!-- end CmdHeadline -->
|
@@ -12,14 +11,14 @@
|
|
12
11
|
<CmdIcon :iconClass="collapsingBoxesOpen ? expandBoxesIcon.iconClass : collapseBoxesIcon.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
|
13
12
|
<!-- end CmdIcon -->
|
14
13
|
</a>
|
15
|
-
<a v-if="allowUserToToggleOrientation" href="#" @click.prevent="
|
14
|
+
<a v-if="allowUserToToggleOrientation" href="#" @click.prevent="toggleOrientation" :title="rowView ? iconRowView.tooltip : iconGridView.tooltip">
|
16
15
|
<!-- begin CmdIcon -->
|
17
16
|
<CmdIcon :iconClass="rowView ? iconGridView.iconClass : iconRowView.iconClass" :type="rowView ? iconGridView.iconType : iconRowView.iconType" />
|
18
17
|
<!-- end CmdIcon -->
|
19
18
|
</a>
|
20
19
|
</div>
|
21
20
|
</div>
|
22
|
-
<div :class="[
|
21
|
+
<div :class="['inner-box-wrapper',
|
23
22
|
useFlexbox ? 'flex-container' : 'grid-container-create-columns',
|
24
23
|
{
|
25
24
|
'no-gap': !useGap,
|
@@ -46,7 +45,8 @@ export default {
|
|
46
45
|
return {
|
47
46
|
rowView: this.useRowViewAsDefault,
|
48
47
|
collapsingBoxesOpen: true,
|
49
|
-
currentOpenBox: []
|
48
|
+
currentOpenBox: [],
|
49
|
+
oneBoxPerRow: false
|
50
50
|
}
|
51
51
|
},
|
52
52
|
props: {
|
@@ -198,6 +198,10 @@ export default {
|
|
198
198
|
}
|
199
199
|
},
|
200
200
|
methods: {
|
201
|
+
toggleOrientation() {
|
202
|
+
this.rowView = !this.rowView
|
203
|
+
this.oneBoxPerRow = this.rowView
|
204
|
+
},
|
201
205
|
boxIsOpen(index) {
|
202
206
|
return this.currentOpenBox.includes(index)
|
203
207
|
},
|
@@ -296,6 +300,12 @@ export default {
|
|
296
300
|
}
|
297
301
|
}
|
298
302
|
|
303
|
+
.inner-box-wrapper > *{
|
304
|
+
flex: none;
|
305
|
+
flex-grow: 1;
|
306
|
+
flex-basis: min-content;
|
307
|
+
}
|
308
|
+
|
299
309
|
.row-view {
|
300
310
|
flex-direction: column;
|
301
311
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<label
|
3
|
-
|
4
|
-
|
3
|
+
v-if="(element === 'input' || element === 'select' || element === 'textarea')"
|
4
|
+
:class="[
|
5
5
|
'cmd-form-element',
|
6
6
|
validationStatus,
|
7
7
|
$attrs.class,
|
@@ -13,9 +13,9 @@
|
|
13
13
|
'has-state': validationStatus
|
14
14
|
}
|
15
15
|
]"
|
16
|
-
|
17
|
-
|
18
|
-
|
16
|
+
:for="htmlId"
|
17
|
+
:title="$attrs.title"
|
18
|
+
ref="label">
|
19
19
|
|
20
20
|
<!-- begin label-text (+ required asterisk) -->
|
21
21
|
<span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
@@ -23,7 +23,7 @@
|
|
23
23
|
<span>
|
24
24
|
<template v-if="labelText">{{ labelText }}</template>
|
25
25
|
<!-- begin slot 'labeltext' -->
|
26
|
-
<slot v-else name="labeltext"
|
26
|
+
<slot v-else name="labeltext"/>
|
27
27
|
<!-- end slot 'labeltext' -->
|
28
28
|
<sup v-if="$attrs.required" aria-hidden="true">*</sup>
|
29
29
|
</span>
|
@@ -41,14 +41,14 @@
|
|
41
41
|
<!-- end CmdTooltipForInputElements -->
|
42
42
|
|
43
43
|
<a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
44
|
+
href="#"
|
45
|
+
@click.prevent
|
46
|
+
:title="validationTooltip"
|
47
|
+
:aria-errormessage="tooltipId"
|
48
|
+
aria-live="assertive"
|
49
|
+
:id="tooltipId">
|
50
50
|
<!-- begin CmdIcon -->
|
51
|
-
<CmdIcon :iconClass="getStatusIconClass"
|
51
|
+
<CmdIcon :iconClass="getStatusIconClass"/>
|
52
52
|
<!-- end CmdIcon -->
|
53
53
|
</a>
|
54
54
|
</span>
|
@@ -92,8 +92,8 @@
|
|
92
92
|
:title="iconPasswordVisible.tooltip"
|
93
93
|
>
|
94
94
|
<!-- begin CmdIcon -->
|
95
|
-
<CmdIcon :iconClass="iconPasswordVisible.iconClass"
|
96
|
-
|
95
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
96
|
+
<!-- end CmdIcon -->
|
97
97
|
</a>
|
98
98
|
<!-- end show-password-icon -->
|
99
99
|
</span>
|
@@ -124,7 +124,7 @@
|
|
124
124
|
<span>
|
125
125
|
<template v-if="labelText">{{ labelText }}</template>
|
126
126
|
<!-- begin slot 'labeltext' -->
|
127
|
-
<slot v-else name="labeltext"
|
127
|
+
<slot v-else name="labeltext"/>
|
128
128
|
<!-- end slot 'labeltext' -->
|
129
129
|
<sup v-if="$attrs.required">*</sup>
|
130
130
|
</span>
|
@@ -134,15 +134,16 @@
|
|
134
134
|
<!-- begin labels for toggle-switch with switch-label -->
|
135
135
|
<template v-else-if="onLabel && offLabel">
|
136
136
|
<span class="switch-label-wrapper">
|
137
|
-
<input
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
137
|
+
<input
|
138
|
+
v-bind="elementAttributes"
|
139
|
+
@change="onChange"
|
140
|
+
@blur="onBlur"
|
141
|
+
:checked="isChecked"
|
142
|
+
:value="inputValue"
|
143
|
+
:class="{inputClass, validationStatus}"
|
144
|
+
:id="htmlId"
|
145
|
+
:disabled="$attrs.disabled"
|
146
|
+
:aria-invalid="validationStatus === 'error'"
|
146
147
|
/>
|
147
148
|
<span class="label-text">{{ onLabel }}</span>
|
148
149
|
<span class="label-text">{{ offLabel }}</span>
|
@@ -194,14 +195,16 @@
|
|
194
195
|
:maxlength="getMaxLength()"
|
195
196
|
:value="modelValue"
|
196
197
|
/>
|
197
|
-
<a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
|
198
|
+
<a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]"
|
199
|
+
:title="iconSearch.tooltip" @click.prevent="executeSearch">
|
198
200
|
<!-- begin CmdIcon -->
|
199
|
-
<CmdIcon :iconClass="iconSearch.iconClass"
|
201
|
+
<CmdIcon :iconClass="iconSearch.iconClass"/>
|
200
202
|
<!-- end CmdIcon -->
|
201
203
|
</a>
|
202
|
-
<a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
|
204
|
+
<a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')"
|
205
|
+
:title="iconDelete?.tooltip">
|
203
206
|
<!-- begin CmdIcon -->
|
204
|
-
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"
|
207
|
+
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
|
205
208
|
<!-- end CmdIcon -->
|
206
209
|
</a>
|
207
210
|
</span>
|
@@ -707,8 +710,8 @@ export default {
|
|
707
710
|
},
|
708
711
|
// toggle icons for toggle-switch
|
709
712
|
toggleSwitchIconClass() {
|
710
|
-
if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
711
|
-
if(this.isChecked) {
|
713
|
+
if (this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
714
|
+
if (this.isChecked) {
|
712
715
|
return this.toggleSwitchCheckedIconClass
|
713
716
|
}
|
714
717
|
return this.toggleSwitchUncheckedIconClass
|
@@ -720,7 +723,7 @@ export default {
|
|
720
723
|
additionalStandardRequirements() {
|
721
724
|
const requirements = []
|
722
725
|
// check if field is type "email"
|
723
|
-
if(this.$attrs.type === "email") {
|
726
|
+
if (this.$attrs.type === "email") {
|
724
727
|
requirements.push({
|
725
728
|
message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
|
726
729
|
valid: () => this.$refs.input.checkValidity()
|
@@ -823,7 +826,7 @@ export default {
|
|
823
826
|
},
|
824
827
|
closeTooltipOnBlur() {
|
825
828
|
// close tooltip by calling function from CmdTooltipForInputElements using $refs
|
826
|
-
if(this.$refs.tooltip) {
|
829
|
+
if (this.$refs.tooltip) {
|
827
830
|
this.$refs.tooltip.hideTooltip()
|
828
831
|
}
|
829
832
|
},
|
@@ -944,5 +947,6 @@ export default {
|
|
944
947
|
}
|
945
948
|
}
|
946
949
|
}
|
950
|
+
|
947
951
|
/* end cmd-form-element------------------------------------------------------------------------------------------ */
|
948
952
|
</style>
|
@@ -1,22 +1,35 @@
|
|
1
1
|
<template>
|
2
2
|
<div v-if="!editModeContext || settingsContext || mainSidebarContext"
|
3
3
|
:class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
|
4
|
-
<!-- begin CmdIcon -->
|
5
|
-
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
|
6
|
-
<!-- end CmdIcon -->
|
7
4
|
|
8
|
-
<
|
9
|
-
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
5
|
+
<template v-if="preHeadlineText">
|
10
6
|
<component v-if="headlineText" :is="headlineTag">
|
11
|
-
<!--
|
12
|
-
<
|
13
|
-
<!-- end
|
7
|
+
<!-- begin CmdIcon -->
|
8
|
+
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
|
9
|
+
<!-- end CmdIcon -->
|
10
|
+
|
11
|
+
<span class="pre-headline-text-wrapper">
|
12
|
+
<!-- begin pre-headline-text -->
|
13
|
+
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
14
|
+
<!-- end pre-headline-text -->
|
15
|
+
|
16
|
+
<span>
|
17
|
+
<!-- being slot -->
|
18
|
+
<slot>{{ headlineText }}</slot>
|
19
|
+
<!-- end slot -->
|
20
|
+
</span>
|
21
|
+
</span>
|
14
22
|
</component>
|
15
|
-
</
|
23
|
+
</template>
|
16
24
|
<component v-else-if="headlineText" :is="headlineTag">
|
25
|
+
<!-- begin CmdIcon -->
|
26
|
+
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
|
27
|
+
<!-- end CmdIcon -->
|
28
|
+
<span>
|
17
29
|
<!-- being slot -->
|
18
30
|
<slot>{{ headlineText }}</slot>
|
19
|
-
|
31
|
+
<!-- end slot -->
|
32
|
+
</span>
|
20
33
|
</component>
|
21
34
|
</div>
|
22
35
|
<!-- begin edit-mode -->
|
@@ -42,26 +55,33 @@
|
|
42
55
|
placeholder="Headline"
|
43
56
|
v-model="editableHeadlineText"
|
44
57
|
/>
|
45
|
-
<
|
58
|
+
<template v-else-if="headlineText"
|
46
59
|
:class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
|
47
60
|
<!-- begin CmdIcon -->
|
48
61
|
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
|
49
62
|
<!-- end CmdIcon -->
|
50
63
|
|
51
|
-
<
|
52
|
-
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
64
|
+
<template v-if="preHeadlineText">
|
53
65
|
<component v-if="headlineText" :is="headlineTag">
|
66
|
+
<!-- begin CmdIcon -->
|
67
|
+
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType"/>
|
68
|
+
<!-- end CmdIcon -->
|
69
|
+
|
70
|
+
<!-- begin pre-headline-text -->
|
71
|
+
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
72
|
+
<!-- end pre-headline-text -->
|
73
|
+
|
54
74
|
<!-- being slot -->
|
55
75
|
<slot>{{ headlineText }}</slot>
|
56
76
|
<!-- end slot -->
|
57
77
|
</component>
|
58
|
-
</
|
78
|
+
</template>
|
59
79
|
<component v-else-if="headlineText" :is="headlineTag">
|
60
80
|
<!-- being slot -->
|
61
81
|
<slot>{{ headlineText }}</slot>
|
62
82
|
<!-- end slot -->
|
63
83
|
</component>
|
64
|
-
</
|
84
|
+
</template>
|
65
85
|
<!-- begin show placeholder if no image exists (and component is not edited) -->
|
66
86
|
<button v-else-if="componentActive" type="button" class="button confirm" @click="onAddItem">
|
67
87
|
<span class="icon-plus"></span>
|
@@ -116,7 +136,7 @@ export default {
|
|
116
136
|
required: false
|
117
137
|
},
|
118
138
|
/**
|
119
|
-
* text-alignment
|
139
|
+
* text-alignment (has no effect if icon is used)
|
120
140
|
*
|
121
141
|
* @allowedValues: "left", "center", "right"
|
122
142
|
*/
|
@@ -133,13 +153,13 @@ export default {
|
|
133
153
|
return this.componentPath || ["props", "cmdHeadline"]
|
134
154
|
},
|
135
155
|
headlineTag() {
|
136
|
-
if(this.headlineLevel) {
|
156
|
+
if (this.headlineLevel) {
|
137
157
|
return "h" + this.headlineLevel
|
138
158
|
}
|
139
159
|
return ""
|
140
160
|
},
|
141
161
|
getTextAlign() {
|
142
|
-
if(this.textAlign) {
|
162
|
+
if (this.textAlign) {
|
143
163
|
return "text-" + this.textAlign
|
144
164
|
}
|
145
165
|
return ""
|
@@ -162,7 +182,7 @@ export default {
|
|
162
182
|
onAddItem() {
|
163
183
|
// execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
|
164
184
|
this.$refs.editComponentWrapper.editComponent()
|
165
|
-
|
185
|
+
}
|
166
186
|
},
|
167
187
|
watch: {
|
168
188
|
headlineText: {
|
@@ -197,18 +217,32 @@ export default {
|
|
197
217
|
|
198
218
|
&.has-pre-headline-text {
|
199
219
|
text-align: inherit;
|
200
|
-
}
|
201
220
|
|
202
|
-
|
203
|
-
|
204
|
-
|
221
|
+
> *:first-child {
|
222
|
+
display: flex;
|
223
|
+
align-items: flex-start;
|
205
224
|
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
225
|
+
span[class*="icon"] {
|
226
|
+
bottom: .2rem;
|
227
|
+
}
|
228
|
+
}
|
229
|
+
|
230
|
+
&.text-center {
|
231
|
+
> *:first-child {
|
232
|
+
justify-content: center;
|
233
|
+
}
|
234
|
+
}
|
235
|
+
|
236
|
+
&.text-right {
|
237
|
+
> *:first-child {
|
238
|
+
justify-content: flex-end;
|
239
|
+
}
|
240
|
+
}
|
241
|
+
|
242
|
+
&.text-right > * {
|
243
|
+
text-align: right;
|
244
|
+
}
|
210
245
|
|
211
|
-
&.has-pre-headline-text {
|
212
246
|
&:has(h1) span[class*="icon"] {
|
213
247
|
font-size: calc(var(--headline-font-size-h1) * 1.6);
|
214
248
|
}
|
@@ -232,14 +266,43 @@ export default {
|
|
232
266
|
&:has(h6) span[class*="icon"] {
|
233
267
|
font-size: calc(var(--headline-font-size-h6) * 2.2);
|
234
268
|
}
|
235
|
-
}
|
236
269
|
|
237
|
-
|
238
|
-
|
270
|
+
.pre-headline-text-wrapper {
|
271
|
+
display: flex;
|
272
|
+
flex-direction: column;
|
273
|
+
}
|
274
|
+
|
275
|
+
.pre-headline-text {
|
276
|
+
font-size: var(--default-font-size);
|
277
|
+
font-weight: var(--font-weight-normal);
|
278
|
+
line-height: 1;
|
279
|
+
}
|
280
|
+
|
281
|
+
&:has(h4, h5, h6) .pre-headline-text {
|
282
|
+
font-size: var(--font-size-small);
|
283
|
+
}
|
284
|
+
|
285
|
+
&.has-icon {
|
286
|
+
&.text-center {
|
287
|
+
justify-content: center;
|
288
|
+
|
289
|
+
* {
|
290
|
+
text-align: left;
|
291
|
+
}
|
292
|
+
}
|
293
|
+
|
294
|
+
&.text-right {
|
295
|
+
justify-content: flex-end;
|
296
|
+
|
297
|
+
* {
|
298
|
+
text-align: left;
|
299
|
+
}
|
300
|
+
}
|
301
|
+
}
|
239
302
|
}
|
240
303
|
|
241
|
-
|
242
|
-
|
304
|
+
p {
|
305
|
+
margin-bottom: 0;
|
243
306
|
}
|
244
307
|
|
245
308
|
h1, h2, h3, h4, h5, h6 {
|
@@ -284,5 +347,6 @@ export default {
|
|
284
347
|
font-size: var(--headline-font-size-h6);
|
285
348
|
}
|
286
349
|
}
|
350
|
+
|
287
351
|
/* end cmd-headline ------------------------------------------------------------------------------------------ */
|
288
352
|
</style>
|
@@ -37,8 +37,8 @@
|
|
37
37
|
aria-live="assertive"
|
38
38
|
:id="tooltipId">
|
39
39
|
<!-- begin CmdIcon -->
|
40
|
-
<CmdIcon :iconClass="getStatusIconClass"
|
41
|
-
|
40
|
+
<CmdIcon :iconClass="getStatusIconClass"/>
|
41
|
+
<!-- end CmdIcon -->
|
42
42
|
</a>
|
43
43
|
</span>
|
44
44
|
<span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
|
@@ -53,7 +53,8 @@
|
|
53
53
|
:class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
|
54
54
|
/>
|
55
55
|
<!-- begin CmdIcon -->
|
56
|
-
<CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass"
|
56
|
+
<CmdIcon v-if="multipleSwitch && inputElement.iconClass" :iconClass="inputElement.iconClass"
|
57
|
+
:type="inputElement.iconType"/>
|
57
58
|
<!-- end CmdIcon -->
|
58
59
|
<span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
|
59
60
|
</label>
|
@@ -213,11 +214,11 @@ export default {
|
|
213
214
|
methods: {
|
214
215
|
updateStatus() {
|
215
216
|
if (this.required) {
|
216
|
-
if(this.inputValue?.length) {
|
217
|
+
if (this.inputValue?.length) {
|
217
218
|
this.validationStatus = ""
|
218
219
|
return
|
219
220
|
}
|
220
|
-
this.validationStatus =
|
221
|
+
this.validationStatus = "error"
|
221
222
|
return
|
222
223
|
}
|
223
224
|
this.validationStatus = this.status
|
@@ -57,20 +57,20 @@ export default {
|
|
57
57
|
mixins: [EditMode],
|
58
58
|
props: {
|
59
59
|
/**
|
60
|
-
*
|
60
|
+
* toggle gab between links
|
61
61
|
*/
|
62
|
-
|
62
|
+
useGap: {
|
63
63
|
type: Boolean,
|
64
|
-
default:
|
64
|
+
default: true
|
65
65
|
},
|
66
66
|
/**
|
67
|
-
*
|
67
|
+
* style component like a box
|
68
68
|
*
|
69
|
-
*
|
69
|
+
* @affectsStyling: true
|
70
70
|
*/
|
71
|
-
|
72
|
-
type:
|
73
|
-
default:
|
71
|
+
styleAsBox: {
|
72
|
+
type: Boolean,
|
73
|
+
default: false
|
74
74
|
},
|
75
75
|
/**
|
76
76
|
* activate if large icons should be displayed above link text
|
@@ -81,6 +81,22 @@ export default {
|
|
81
81
|
type: Boolean,
|
82
82
|
default: false
|
83
83
|
},
|
84
|
+
/**
|
85
|
+
* activate if component should contain a list of anchors for the section within the page
|
86
|
+
*/
|
87
|
+
sectionAnchors: {
|
88
|
+
type: Boolean,
|
89
|
+
default: false
|
90
|
+
},
|
91
|
+
/**
|
92
|
+
* given active section from outside to set class for styling
|
93
|
+
*
|
94
|
+
* sectionAnchors-property must be activated
|
95
|
+
*/
|
96
|
+
activeSection: {
|
97
|
+
type: Number,
|
98
|
+
default: 0
|
99
|
+
},
|
84
100
|
/**
|
85
101
|
* set horizontal alignment
|
86
102
|
*
|
@@ -114,22 +130,6 @@ export default {
|
|
114
130
|
orientation: {
|
115
131
|
type: String,
|
116
132
|
default: "vertical"
|
117
|
-
},
|
118
|
-
/**
|
119
|
-
* toggle gab between links
|
120
|
-
*/
|
121
|
-
useGap: {
|
122
|
-
type: Boolean,
|
123
|
-
default: true
|
124
|
-
},
|
125
|
-
/**
|
126
|
-
* style component like a box
|
127
|
-
*
|
128
|
-
* @affectsStyling: true
|
129
|
-
*/
|
130
|
-
styleAsBox: {
|
131
|
-
type: Boolean,
|
132
|
-
default: false
|
133
133
|
}
|
134
134
|
},
|
135
135
|
computed: {
|