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,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
|
},
|
@@ -263,10 +267,8 @@ export default {
|
|
263
267
|
}
|
264
268
|
</script>
|
265
269
|
|
266
|
-
<style
|
270
|
+
<style>
|
267
271
|
/* begin cmd-box-wrapper ---------------------------------------------------------------------------------------- */
|
268
|
-
@import '../assets/styles/variables';
|
269
|
-
|
270
272
|
.cmd-box-wrapper {
|
271
273
|
display: flex;
|
272
274
|
flex-direction: column;
|
@@ -298,6 +300,12 @@ export default {
|
|
298
300
|
}
|
299
301
|
}
|
300
302
|
|
303
|
+
.inner-box-wrapper > *{
|
304
|
+
flex: none;
|
305
|
+
flex-grow: 1;
|
306
|
+
flex-basis: min-content;
|
307
|
+
}
|
308
|
+
|
301
309
|
.row-view {
|
302
310
|
flex-direction: column;
|
303
311
|
|
@@ -328,6 +336,13 @@ export default {
|
|
328
336
|
}
|
329
337
|
}
|
330
338
|
|
339
|
+
|
340
|
+
}
|
341
|
+
</style>
|
342
|
+
|
343
|
+
<style lang="scss">
|
344
|
+
@import '../assets/styles/variables';
|
345
|
+
.cmd-box-wrapper {
|
331
346
|
@media only screen and (max-width: $medium-max-width) {
|
332
347
|
> .grid-container-create-columns {
|
333
348
|
grid-template-columns: repeat(v-bind(boxesPerRowMedium), minmax(0, 1fr));
|
@@ -340,6 +355,5 @@ export default {
|
|
340
355
|
}
|
341
356
|
}
|
342
357
|
}
|
343
|
-
|
344
358
|
/* end cmd-box-wrapper ---------------------------------------------------------------------------------------- */
|
345
359
|
</style>
|
@@ -1,17 +1,17 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-company-logo">
|
2
|
+
<div class="cmd-company-logo company-logo">
|
3
3
|
<router-link v-if="link?.type === 'router'" :to="link?.path" :title="link?.tooltip">
|
4
4
|
<!-- begin CmdImage -->
|
5
|
-
<CmdImage :image="image"
|
5
|
+
<CmdImage :image="image"/>
|
6
6
|
<!-- end CmdImage -->
|
7
7
|
</router-link>
|
8
8
|
<a v-else-if="link?.type === 'href'" :href="link?.path" :title="link?.tooltip">
|
9
9
|
<!-- begin CmdImage -->
|
10
|
-
<CmdImage :image="image"
|
10
|
+
<CmdImage :image="image"/>
|
11
11
|
<!-- end CmdImage -->
|
12
12
|
</a>
|
13
13
|
<!-- begin CmdImage -->
|
14
|
-
<CmdImage v-else :image="image"
|
14
|
+
<CmdImage v-else :image="image"/>
|
15
15
|
<!-- end CmdImage -->
|
16
16
|
</div>
|
17
17
|
</template>
|
@@ -92,8 +92,8 @@ export default {
|
|
92
92
|
this.prefersColorScheme = event.matches ? "light" : "dark"
|
93
93
|
},
|
94
94
|
observeDom(mutationList) {
|
95
|
-
for(let i = 0; i < mutationList.length; i++) {
|
96
|
-
if(mutationList[i].type === 'attributes') {
|
95
|
+
for (let i = 0; i < mutationList.length; i++) {
|
96
|
+
if (mutationList[i].type === 'attributes') {
|
97
97
|
this.toggleColorScheme()
|
98
98
|
break
|
99
99
|
}
|
@@ -105,7 +105,7 @@ export default {
|
|
105
105
|
toggleColorScheme() {
|
106
106
|
if (document.querySelector("html").classList.contains("light-mode")) {
|
107
107
|
this.prefersColorScheme = "light"
|
108
|
-
} else if(document.querySelector("html").classList.contains("dark-mode")) {
|
108
|
+
} else if (document.querySelector("html").classList.contains("dark-mode")) {
|
109
109
|
this.prefersColorScheme = "dark"
|
110
110
|
} else if (matchMedia("(prefers-color-scheme: light)").matches) {
|
111
111
|
this.prefersColorScheme = "light"
|
@@ -117,10 +117,8 @@ export default {
|
|
117
117
|
}
|
118
118
|
</script>
|
119
119
|
|
120
|
-
<style
|
120
|
+
<style>
|
121
121
|
/* begin cmd-company-logo ---------------------------------------------------------------------------------------- */
|
122
|
-
@import '../assets/styles/variables';
|
123
|
-
|
124
122
|
.cmd-company-logo {
|
125
123
|
img {
|
126
124
|
display: block;
|
@@ -134,9 +132,14 @@ export default {
|
|
134
132
|
border: 0;
|
135
133
|
}
|
136
134
|
}
|
135
|
+
}
|
136
|
+
</style>
|
137
137
|
|
138
|
+
<style lang="scss">
|
139
|
+
@import '../assets/styles/variables';
|
138
140
|
|
139
|
-
|
141
|
+
@media only screen and (max-width: $medium-max-width) {
|
142
|
+
.cmd-company-logo {
|
140
143
|
img {
|
141
144
|
max-width: 100%;
|
142
145
|
max-height: 7.5rem;
|
@@ -10,7 +10,7 @@ export default {
|
|
10
10
|
}
|
11
11
|
</script>
|
12
12
|
|
13
|
-
<style
|
13
|
+
<style>
|
14
14
|
/* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
|
15
15
|
.cmd-copyright-information {
|
16
16
|
background: var(--text-color);
|
@@ -471,10 +471,8 @@ export {openFancyBox}
|
|
471
471
|
export default FancyBox
|
472
472
|
</script>
|
473
473
|
|
474
|
-
<style
|
474
|
+
<style>
|
475
475
|
/* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
|
476
|
-
@import "../assets/styles/variables";
|
477
|
-
|
478
476
|
.cmd-fancybox {
|
479
477
|
z-index: 500;
|
480
478
|
flex-direction: column;
|
@@ -490,13 +488,13 @@ export default FancyBox
|
|
490
488
|
margin-top: calc(var(--default-margin) * 2)
|
491
489
|
}
|
492
490
|
|
493
|
-
|
491
|
+
/* detect open-attribute (will be added to dom automatically) */
|
494
492
|
&[open] {
|
495
493
|
display: flex;
|
496
494
|
}
|
497
495
|
|
498
496
|
&.show-overlay::backdrop {
|
499
|
-
--reduced-opacity: .75;
|
497
|
+
--reduced-opacity: .75; /* must be declared again, because ::backdrop does not allow the use of global variables */
|
500
498
|
background: rgba(0, 0, 0, var(--reduced-opacity));
|
501
499
|
}
|
502
500
|
|
@@ -619,7 +617,12 @@ export default FancyBox
|
|
619
617
|
}
|
620
618
|
}
|
621
619
|
}
|
620
|
+
}
|
621
|
+
</style>
|
622
622
|
|
623
|
+
<style lang="scss">
|
624
|
+
@import "../assets/styles/variables";
|
625
|
+
.cmd-fancybox {
|
623
626
|
@media only screen and (max-width: $medium-max-width) {
|
624
627
|
.outer-content-wrapper {
|
625
628
|
.content {
|
@@ -185,7 +185,8 @@ export default {
|
|
185
185
|
}
|
186
186
|
</script>
|
187
187
|
|
188
|
-
<style
|
188
|
+
<style>
|
189
|
+
/* begin cmd-form ---------------------------------------------------------------------------------------- */
|
189
190
|
.cmd-form {
|
190
191
|
&:not([data-use-validation="true"]) {
|
191
192
|
label.error :where(::placeholder, select option:first-child),
|
@@ -204,5 +205,10 @@ export default {
|
|
204
205
|
border-color: var(--error-color);
|
205
206
|
}
|
206
207
|
}
|
208
|
+
|
209
|
+
.button, .button:last-child {
|
210
|
+
margin-left: auto;
|
211
|
+
}
|
207
212
|
}
|
213
|
+
/* end cmd-form ---------------------------------------------------------------------------------------- */
|
208
214
|
</style>
|
@@ -1,24 +1,21 @@
|
|
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,
|
8
8
|
{
|
9
9
|
disabled: $attrs.disabled,
|
10
10
|
inline : displayLabelInline,
|
11
|
-
checked: isChecked,
|
12
11
|
'toggle-switch': toggleSwitch,
|
13
12
|
colored: colored,
|
14
|
-
on: colored && isChecked,
|
15
|
-
off: colored && !isChecked,
|
16
13
|
'has-state': validationStatus
|
17
14
|
}
|
18
15
|
]"
|
19
|
-
|
20
|
-
|
21
|
-
|
16
|
+
:for="htmlId"
|
17
|
+
:title="$attrs.title"
|
18
|
+
ref="label">
|
22
19
|
|
23
20
|
<!-- begin label-text (+ required asterisk) -->
|
24
21
|
<span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
@@ -26,7 +23,7 @@
|
|
26
23
|
<span>
|
27
24
|
<template v-if="labelText">{{ labelText }}</template>
|
28
25
|
<!-- begin slot 'labeltext' -->
|
29
|
-
<slot v-else name="labeltext"
|
26
|
+
<slot v-else name="labeltext"/>
|
30
27
|
<!-- end slot 'labeltext' -->
|
31
28
|
<sup v-if="$attrs.required" aria-hidden="true">*</sup>
|
32
29
|
</span>
|
@@ -43,15 +40,15 @@
|
|
43
40
|
/>
|
44
41
|
<!-- end CmdTooltipForInputElements -->
|
45
42
|
|
46
|
-
<a v-if="$attrs.required || inputRequirements.length"
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
43
|
+
<a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
|
44
|
+
href="#"
|
45
|
+
@click.prevent
|
46
|
+
:title="validationTooltip"
|
47
|
+
:aria-errormessage="tooltipId"
|
48
|
+
aria-live="assertive"
|
49
|
+
:id="tooltipId">
|
53
50
|
<!-- begin CmdIcon -->
|
54
|
-
<CmdIcon :iconClass="getStatusIconClass"
|
51
|
+
<CmdIcon :iconClass="getStatusIconClass"/>
|
55
52
|
<!-- end CmdIcon -->
|
56
53
|
</a>
|
57
54
|
</span>
|
@@ -59,10 +56,7 @@
|
|
59
56
|
|
60
57
|
<span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio'" class="flex-container"><!-- container required to place inner icons correctly -->
|
61
58
|
<!-- begin CmdIcon (for icon inside field) -->
|
62
|
-
<CmdIcon
|
63
|
-
v-if="fieldIconClass"
|
64
|
-
class="place-inside"
|
65
|
-
:iconClass="fieldIconClass"
|
59
|
+
<CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass"
|
66
60
|
/>
|
67
61
|
<!-- end CmdIcon (for icon inside field) -->
|
68
62
|
|
@@ -98,8 +92,8 @@
|
|
98
92
|
:title="iconPasswordVisible.tooltip"
|
99
93
|
>
|
100
94
|
<!-- begin CmdIcon -->
|
101
|
-
<CmdIcon :iconClass="iconPasswordVisible.iconClass"
|
102
|
-
|
95
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
96
|
+
<!-- end CmdIcon -->
|
103
97
|
</a>
|
104
98
|
<!-- end show-password-icon -->
|
105
99
|
</span>
|
@@ -121,7 +115,7 @@
|
|
121
115
|
@blur="onBlur"
|
122
116
|
:checked="isChecked"
|
123
117
|
:value="inputValue"
|
124
|
-
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType
|
118
|
+
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
125
119
|
:id="htmlId"
|
126
120
|
:disabled="$attrs.disabled"
|
127
121
|
:aria-invalid="validationStatus === 'error'"
|
@@ -130,7 +124,7 @@
|
|
130
124
|
<span>
|
131
125
|
<template v-if="labelText">{{ labelText }}</template>
|
132
126
|
<!-- begin slot 'labeltext' -->
|
133
|
-
<slot v-else name="labeltext"
|
127
|
+
<slot v-else name="labeltext"/>
|
134
128
|
<!-- end slot 'labeltext' -->
|
135
129
|
<sup v-if="$attrs.required">*</sup>
|
136
130
|
</span>
|
@@ -140,15 +134,16 @@
|
|
140
134
|
<!-- begin labels for toggle-switch with switch-label -->
|
141
135
|
<template v-else-if="onLabel && offLabel">
|
142
136
|
<span class="switch-label-wrapper">
|
143
|
-
<input
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
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'"
|
152
147
|
/>
|
153
148
|
<span class="label-text">{{ onLabel }}</span>
|
154
149
|
<span class="label-text">{{ offLabel }}</span>
|
@@ -200,14 +195,16 @@
|
|
200
195
|
:maxlength="getMaxLength()"
|
201
196
|
:value="modelValue"
|
202
197
|
/>
|
203
|
-
<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">
|
204
200
|
<!-- begin CmdIcon -->
|
205
|
-
<CmdIcon :iconClass="iconSearch.iconClass"
|
201
|
+
<CmdIcon :iconClass="iconSearch.iconClass"/>
|
206
202
|
<!-- end CmdIcon -->
|
207
203
|
</a>
|
208
|
-
<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">
|
209
206
|
<!-- begin CmdIcon -->
|
210
|
-
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"
|
207
|
+
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
|
211
208
|
<!-- end CmdIcon -->
|
212
209
|
</a>
|
213
210
|
</span>
|
@@ -392,6 +389,13 @@ export default {
|
|
392
389
|
type: Array,
|
393
390
|
required: false
|
394
391
|
},
|
392
|
+
/**
|
393
|
+
* activate if interactive status-icon (to show requirements) should be shown above form-element
|
394
|
+
*/
|
395
|
+
showStatusIcon: {
|
396
|
+
type: Boolean,
|
397
|
+
default: true
|
398
|
+
},
|
395
399
|
/**
|
396
400
|
* native button
|
397
401
|
*/
|
@@ -706,8 +710,8 @@ export default {
|
|
706
710
|
},
|
707
711
|
// toggle icons for toggle-switch
|
708
712
|
toggleSwitchIconClass() {
|
709
|
-
if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
710
|
-
if(this.isChecked) {
|
713
|
+
if (this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
|
714
|
+
if (this.isChecked) {
|
711
715
|
return this.toggleSwitchCheckedIconClass
|
712
716
|
}
|
713
717
|
return this.toggleSwitchUncheckedIconClass
|
@@ -719,7 +723,7 @@ export default {
|
|
719
723
|
additionalStandardRequirements() {
|
720
724
|
const requirements = []
|
721
725
|
// check if field is type "email"
|
722
|
-
if(this.$attrs.type === "email") {
|
726
|
+
if (this.$attrs.type === "email") {
|
723
727
|
requirements.push({
|
724
728
|
message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
|
725
729
|
valid: () => this.$refs.input.checkValidity()
|
@@ -822,7 +826,7 @@ export default {
|
|
822
826
|
},
|
823
827
|
closeTooltipOnBlur() {
|
824
828
|
// close tooltip by calling function from CmdTooltipForInputElements using $refs
|
825
|
-
if(this.$refs.tooltip) {
|
829
|
+
if (this.$refs.tooltip) {
|
826
830
|
this.$refs.tooltip.hideTooltip()
|
827
831
|
}
|
828
832
|
},
|
@@ -842,9 +846,10 @@ export default {
|
|
842
846
|
}
|
843
847
|
</script>
|
844
848
|
|
845
|
-
<style
|
849
|
+
<style>
|
846
850
|
/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
|
847
851
|
.cmd-form-element {
|
852
|
+
/* icon right aligned in input */
|
848
853
|
input + .place-inside {
|
849
854
|
left: auto;
|
850
855
|
right: .5rem
|
@@ -859,11 +864,17 @@ export default {
|
|
859
864
|
color: var(--status-color);
|
860
865
|
|
861
866
|
&.place-inside {
|
862
|
-
color: var(--
|
867
|
+
--status-color: var(--error-color);
|
863
868
|
}
|
864
869
|
}
|
865
870
|
}
|
866
871
|
|
872
|
+
:is(input[type="checkbox"], input[type="radio"]):checked {
|
873
|
+
~ .label-text span {
|
874
|
+
color: var(--hyperlink-color);
|
875
|
+
}
|
876
|
+
}
|
877
|
+
|
867
878
|
&.inline {
|
868
879
|
& > span {
|
869
880
|
& > a:not(.button) {
|
@@ -918,85 +929,24 @@ export default {
|
|
918
929
|
}
|
919
930
|
}
|
920
931
|
|
921
|
-
&.colored {
|
922
|
-
input {
|
923
|
-
border-color: var(--error-color);
|
924
|
-
|
925
|
-
&::after {
|
926
|
-
border-color: inherit;
|
927
|
-
}
|
928
|
-
}
|
929
|
-
|
930
|
-
&.on {
|
931
|
-
input {
|
932
|
-
border-color: var(--success-color);
|
933
|
-
|
934
|
-
&::after {
|
935
|
-
border-color: inherit;
|
936
|
-
background: var(--success-color);
|
937
|
-
}
|
938
|
-
}
|
939
|
-
}
|
940
|
-
}
|
941
|
-
|
942
932
|
.characters-left-wrapper {
|
943
933
|
margin-top: calc(var(--default-margin) / 2);
|
944
934
|
display: block;
|
945
935
|
|
946
936
|
span:not(:only-child):first-child {
|
947
937
|
margin-right: calc(var(--default-margin) / 2);
|
948
|
-
color: var(--text-color);
|
938
|
+
color: var(--color-scheme-text-color);
|
949
939
|
}
|
950
940
|
|
951
941
|
.characters-left {
|
952
|
-
color: var(--text-color);
|
942
|
+
color: var(--color-scheme-text-color);
|
953
943
|
|
954
944
|
&.error {
|
955
945
|
color: var(--error-color);
|
956
946
|
}
|
957
947
|
}
|
958
948
|
}
|
959
|
-
|
960
|
-
/* begin toggle-switch */
|
961
|
-
/* no cmd-prefix-styling (class based on frontend-framework) */
|
962
|
-
&.toggle-switch {
|
963
|
-
&.colored {
|
964
|
-
&.off {
|
965
|
-
.switch-label-wrapper {
|
966
|
-
border-color: var(--error-color);
|
967
|
-
|
968
|
-
span {
|
969
|
-
&.label-text {
|
970
|
-
color: var(--error-color);
|
971
|
-
|
972
|
-
&::before {
|
973
|
-
border-color: var(--error-color);
|
974
|
-
background-color: var(--pure-white);
|
975
|
-
}
|
976
|
-
}
|
977
|
-
}
|
978
|
-
}
|
979
|
-
}
|
980
|
-
|
981
|
-
&.on {
|
982
|
-
.switch-label-wrapper {
|
983
|
-
border-color: var(--success-color);
|
984
|
-
|
985
|
-
span {
|
986
|
-
&.label-text {
|
987
|
-
color: var(--success-color);
|
988
|
-
|
989
|
-
&::before {
|
990
|
-
border-color: var(--success-color);
|
991
|
-
background-color: var(--success-color);
|
992
|
-
}
|
993
|
-
}
|
994
|
-
}
|
995
|
-
}
|
996
|
-
}
|
997
|
-
}
|
998
|
-
}
|
999
|
-
/* end toggle-switch */
|
1000
949
|
}
|
950
|
+
|
1001
951
|
/* end cmd-form-element------------------------------------------------------------------------------------------ */
|
1002
952
|
</style>
|
@@ -105,10 +105,11 @@ export default {
|
|
105
105
|
}
|
106
106
|
</script>
|
107
107
|
|
108
|
-
<style
|
108
|
+
<style>
|
109
109
|
/* begin cmd-form-filters ------------------------------------------------------------------------------------------ */
|
110
110
|
.cmd-form-filters {
|
111
111
|
display: flex;
|
112
|
+
margin: 0;
|
112
113
|
|
113
114
|
li {
|
114
115
|
list-style-type: none;
|