comand-component-library 3.1.73 → 3.1.74
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 +49 -10
- package/src/assets/data/cookie-disclaimer.json +7 -6
- package/src/assets/styles/global-styles.scss +10 -40
- package/src/components/CmdBox.vue +1 -1
- package/src/components/CmdCookieDisclaimer.vue +76 -8
- package/src/components/CmdFakeSelect.vue +28 -47
- package/src/components/CmdFormElement.vue +25 -45
- package/src/components/CmdInputGroup.vue +146 -12
- package/src/components/CmdListOfRequirements.vue +128 -0
- package/src/components/CmdMainNavigation.vue +2 -2
- package/src/components/CmdToggleDarkMode.vue +0 -3
- package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +5 -0
- package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +1 -1
- package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +37 -1
- package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json +22 -0
- package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js +10 -0
- package/src/mixins/FieldValidation.js +1 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "comand-component-library",
|
3
|
-
"version": "3.1.
|
3
|
+
"version": "3.1.74",
|
4
4
|
"private": false,
|
5
5
|
"scripts": {
|
6
6
|
"serve": "vue-cli-service serve",
|
@@ -18,7 +18,7 @@
|
|
18
18
|
],
|
19
19
|
"dependencies": {
|
20
20
|
"clickout-event": "^1.1.2",
|
21
|
-
"comand-frontend-framework": "^3.2.
|
21
|
+
"comand-frontend-framework": "^3.2.62",
|
22
22
|
"core-js": "^3.20.1",
|
23
23
|
"prismjs": "^1.27.0",
|
24
24
|
"vue": "^3.2.31",
|
package/src/App.vue
CHANGED
@@ -576,7 +576,7 @@
|
|
576
576
|
<!-- begin input-groups -->
|
577
577
|
<h2>Input-Groups</h2>
|
578
578
|
<CmdInputGroup
|
579
|
-
labelText="Group label for radio-group given by slot"
|
579
|
+
labelText="Group label for radio-group given by slot:"
|
580
580
|
:useSlot="true"
|
581
581
|
:status="validationStatus"
|
582
582
|
:disabled="disabledStatus"
|
@@ -609,7 +609,8 @@
|
|
609
609
|
</dd>
|
610
610
|
</dl>
|
611
611
|
<CmdInputGroup
|
612
|
-
labelText="Grouplabel for radio-group given by property"
|
612
|
+
labelText="Grouplabel for radio-group given by property:"
|
613
|
+
:required="true"
|
613
614
|
:inputElements="inputGroupRadiobuttons"
|
614
615
|
inputTypes="radio"
|
615
616
|
v-model="inputGroupValue2"
|
@@ -623,7 +624,7 @@
|
|
623
624
|
</dd>
|
624
625
|
</dl>
|
625
626
|
<CmdInputGroup
|
626
|
-
labelText="Grouplabel for radio-group styled as replaced-input-type"
|
627
|
+
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
627
628
|
:inputElements="inputGroupRadiobuttons"
|
628
629
|
inputTypes="radio"
|
629
630
|
v-model="inputGroupValueReplaceInputTypeRadio"
|
@@ -638,7 +639,7 @@
|
|
638
639
|
</dd>
|
639
640
|
</dl>
|
640
641
|
<CmdInputGroup
|
641
|
-
labelText="Grouplabel for checkbox-group styled as replaced-input-type"
|
642
|
+
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
642
643
|
:inputElements="inputGroupRadiobuttons"
|
643
644
|
inputTypes="checkbox"
|
644
645
|
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
@@ -654,7 +655,39 @@
|
|
654
655
|
</dd>
|
655
656
|
</dl>
|
656
657
|
<CmdInputGroup
|
657
|
-
labelText="Grouplabel for
|
658
|
+
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
659
|
+
:inputElements="inputGroupRadiobuttons"
|
660
|
+
inputTypes="checkbox"
|
661
|
+
v-model="inputGroupValueToggleSwitchCheckbox"
|
662
|
+
:toggleSwitch="true"
|
663
|
+
required="required"
|
664
|
+
:status="validationStatus"
|
665
|
+
:disabled="disabledStatus"
|
666
|
+
/>
|
667
|
+
<dl>
|
668
|
+
<dt>Selected value(s):</dt>
|
669
|
+
<dd>
|
670
|
+
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
671
|
+
</dd>
|
672
|
+
</dl>
|
673
|
+
<CmdInputGroup
|
674
|
+
labelText="Grouplabel for radio-group styled as toggle-switches:"
|
675
|
+
:inputElements="inputGroupRadiobuttons"
|
676
|
+
inputTypes="radio"
|
677
|
+
v-model="inputGroupValueToggleSwitchRadio"
|
678
|
+
:toggleSwitch="true"
|
679
|
+
required="required"
|
680
|
+
:status="validationStatus"
|
681
|
+
:disabled="disabledStatus"
|
682
|
+
/>
|
683
|
+
<dl>
|
684
|
+
<dt>Selected value(s):</dt>
|
685
|
+
<dd>
|
686
|
+
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
687
|
+
</dd>
|
688
|
+
</dl>
|
689
|
+
<CmdInputGroup
|
690
|
+
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
658
691
|
:inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
659
692
|
inputTypes="radio"
|
660
693
|
:multipleSwitch="true"
|
@@ -669,7 +702,7 @@
|
|
669
702
|
</dd>
|
670
703
|
</dl>
|
671
704
|
<CmdInputGroup
|
672
|
-
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
|
705
|
+
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
673
706
|
:inputElements="inputGroupCheckboxes"
|
674
707
|
inputTypes="checkbox"
|
675
708
|
:multipleSwitch="true"
|
@@ -1100,7 +1133,9 @@
|
|
1100
1133
|
<CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
|
1101
1134
|
buttonLabelAcceptAllCookies="Accept all cookies"
|
1102
1135
|
buttonLabelAcceptCurrentSettings="Accept current settings"
|
1103
|
-
@closeCookieDisclaimer="
|
1136
|
+
@closeCookieDisclaimer="closeCookieDisclaimer"
|
1137
|
+
v-model="acceptedCookies"
|
1138
|
+
|
1104
1139
|
>
|
1105
1140
|
<template #privacy-text>
|
1106
1141
|
<p>
|
@@ -1231,6 +1266,7 @@ export default {
|
|
1231
1266
|
|
1232
1267
|
data() {
|
1233
1268
|
return {
|
1269
|
+
acceptedCookies: ["google-maps"],
|
1234
1270
|
showTooltip: false,
|
1235
1271
|
disabledStatus: undefined,
|
1236
1272
|
validationStatus: "",
|
@@ -1241,6 +1277,8 @@ export default {
|
|
1241
1277
|
inputGroupValue2: "website",
|
1242
1278
|
inputGroupValueReplaceInputTypeRadio: "phone",
|
1243
1279
|
inputGroupValueReplaceInputTypeCheckbox: ["phone"],
|
1280
|
+
inputGroupValueToggleSwitchCheckbox: ["phone"],
|
1281
|
+
inputGroupValueToggleSwitchRadio: "phone",
|
1244
1282
|
inputGroupValue3: "email",
|
1245
1283
|
inputGroupValue4: [],
|
1246
1284
|
inputGroupRadiobuttons: [
|
@@ -1375,10 +1413,11 @@ export default {
|
|
1375
1413
|
thumbnailScrollerData
|
1376
1414
|
}
|
1377
1415
|
},
|
1378
|
-
mounted() {
|
1379
|
-
document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
|
1380
|
-
},
|
1381
1416
|
methods: {
|
1417
|
+
closeCookieDisclaimer(event) {
|
1418
|
+
this.fancyBoxCookieDisclaimer = false
|
1419
|
+
alert(event.join(", "))
|
1420
|
+
},
|
1382
1421
|
setStatus(validationStatus, disabledStatus) {
|
1383
1422
|
this.validationStatus = validationStatus
|
1384
1423
|
this.disabledStatus = disabledStatus
|
@@ -4,10 +4,10 @@
|
|
4
4
|
"cookies": [
|
5
5
|
{
|
6
6
|
"id": "cookie-sessionid",
|
7
|
+
"value": "sessionid",
|
7
8
|
"description": "This cookie is required for functionality",
|
8
9
|
"labelText": "SessionID",
|
9
|
-
"
|
10
|
-
"status": "disabled",
|
10
|
+
"disabled": true,
|
11
11
|
"linkDataPrivacy": {
|
12
12
|
"label": "Details for this cookie:",
|
13
13
|
"link": "/content/data-privacy-en.html",
|
@@ -16,10 +16,10 @@
|
|
16
16
|
},
|
17
17
|
{
|
18
18
|
"id": "cookie-google-recaptcha",
|
19
|
+
"value": "google-recaptcha",
|
19
20
|
"description": "This cookie prevents bots from sending forms",
|
20
21
|
"labelText": "Google reCaptcha™",
|
21
|
-
"
|
22
|
-
"status": "disabled",
|
22
|
+
"disabled": true,
|
23
23
|
"linkDataPrivacy": {
|
24
24
|
"label": "Details for this cookie:",
|
25
25
|
"link": "https://policies.google.com/privacy?hl=en-US",
|
@@ -34,9 +34,10 @@
|
|
34
34
|
"cookies": [
|
35
35
|
{
|
36
36
|
"id": "cookie-google-maps",
|
37
|
+
"value": "google-maps",
|
37
38
|
"description": "This cookie enables the Google Map™",
|
38
39
|
"labelText": "Google Maps™",
|
39
|
-
"
|
40
|
+
"disabled": false,
|
40
41
|
"linkDataPrivacy": {
|
41
42
|
"label": "Details for this cookie:",
|
42
43
|
"link": "https://policies.google.com/privacy?hl=en-US",
|
@@ -46,9 +47,9 @@
|
|
46
47
|
},
|
47
48
|
{
|
48
49
|
"id": "cookie-google-analytics",
|
50
|
+
"value": "google-analytics",
|
49
51
|
"description": "This cookie collects anonymous data for statistics and improvements",
|
50
52
|
"labelText": "Google Analytics™",
|
51
|
-
"checked": false,
|
52
53
|
"linkDataPrivacy": {
|
53
54
|
"label": "Details for this cookie:",
|
54
55
|
"link": "https://policies.google.com/privacy?hl=en-US",
|
@@ -173,7 +173,14 @@ body.avoid-scrolling {
|
|
173
173
|
/* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
174
174
|
|
175
175
|
/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
|
176
|
-
.cmd-form-element, .cmd-fake-select {
|
176
|
+
.cmd-form-element, .cmd-fake-select, .cmd-input-group {
|
177
|
+
.cmd-tooltip {
|
178
|
+
position: absolute;
|
179
|
+
right: 0;
|
180
|
+
transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
|
181
|
+
left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
|
182
|
+
top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
|
183
|
+
}
|
177
184
|
|
178
185
|
&.has-state, & + .cmd-tooltip {
|
179
186
|
.label-text {
|
@@ -190,7 +197,6 @@ body.avoid-scrolling {
|
|
190
197
|
--status-color: var(--warning-color);
|
191
198
|
}
|
192
199
|
|
193
|
-
|
194
200
|
&.success {
|
195
201
|
--status-color: var(--success-color);
|
196
202
|
}
|
@@ -202,44 +208,6 @@ body.avoid-scrolling {
|
|
202
208
|
|
203
209
|
& + .cmd-tooltip {
|
204
210
|
border-color: var(--status-color);
|
205
|
-
|
206
|
-
h6:last-of-type {
|
207
|
-
margin-top: 0;
|
208
|
-
}
|
209
|
-
|
210
|
-
.list-of-requirements {
|
211
|
-
.error {
|
212
|
-
color: var(--error-color);
|
213
|
-
}
|
214
|
-
|
215
|
-
.warning {
|
216
|
-
color: var(--warning-color);
|
217
|
-
}
|
218
|
-
|
219
|
-
.success {
|
220
|
-
color: var(--success-color);
|
221
|
-
}
|
222
|
-
|
223
|
-
.info {
|
224
|
-
color: var(--info-color);
|
225
|
-
}
|
226
|
-
|
227
|
-
span[class*="icon"] {
|
228
|
-
font-size: 1.2rem;
|
229
|
-
}
|
230
|
-
|
231
|
-
& ~ a {
|
232
|
-
display: flex;
|
233
|
-
align-items: center;
|
234
|
-
justify-content: center;
|
235
|
-
text-align: center;
|
236
|
-
text-decoration: none;
|
237
|
-
|
238
|
-
span[class*="icon"] {
|
239
|
-
font-size: 1.2rem;
|
240
|
-
}
|
241
|
-
}
|
242
|
-
}
|
243
211
|
}
|
244
212
|
}
|
245
213
|
/* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
|
@@ -300,6 +268,7 @@ html {
|
|
300
268
|
&.light-mode {
|
301
269
|
/* assign default colors for custom light-mode set by class */
|
302
270
|
--color-scheme-text-color: var(--light-mode-text-color);
|
271
|
+
--color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
|
303
272
|
--color-scheme-background-color: var(--light-mode-background-color);
|
304
273
|
--color-scheme-text-color-inverted: var(--dark-mode-text-color);
|
305
274
|
--color-scheme-background-inverted: var(--dark-mode-background-color);
|
@@ -309,6 +278,7 @@ html {
|
|
309
278
|
&.dark-mode {
|
310
279
|
/* assign default colors for custom dark-mode set by class */
|
311
280
|
--color-scheme-text-color: var(--dark-mode-text-color);
|
281
|
+
--color-scheme-text-color-buttons: var(--dark-mode-background-color);
|
312
282
|
--color-scheme-background-color: var(--dark-mode-background-color);
|
313
283
|
--color-scheme-text-color-inverted: var(--light-mode-text-color);
|
314
284
|
--color-scheme-background-inverted: var(--light-mode-background-color);
|
@@ -44,7 +44,7 @@
|
|
44
44
|
</template>
|
45
45
|
|
46
46
|
<!-- begin box-body -->
|
47
|
-
<div v-if="open" class="box-body" aria-expanded="true">
|
47
|
+
<div v-if="open" class="box-body" aria-expanded="true" role="article">
|
48
48
|
<!-- begin slot 'body' -->
|
49
49
|
<slot name="body">
|
50
50
|
<transition :name="toggleTransition">
|
@@ -12,6 +12,7 @@
|
|
12
12
|
|
13
13
|
<!-- begin slot for cookie-options -->
|
14
14
|
<slot name="cookie-options">
|
15
|
+
<!-- begin required cookies -->
|
15
16
|
<div v-if="cookieOptions.required" class="flex-container vertical">
|
16
17
|
<CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
|
17
18
|
<!-- begin CmdBox -->
|
@@ -25,9 +26,13 @@
|
|
25
26
|
<CmdFormElement
|
26
27
|
element="input"
|
27
28
|
type="checkbox"
|
28
|
-
|
29
|
-
|
29
|
+
v-model="acceptedCookies"
|
30
|
+
:inputValue="cookie.value"
|
31
|
+
:labelText="cookie.labelText"
|
32
|
+
:disabled="cookie.disabled"
|
33
|
+
:id="cookie.id"
|
30
34
|
:toggleSwitch="true"
|
35
|
+
:title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
|
31
36
|
/>
|
32
37
|
<!-- end CmdFormElement -->
|
33
38
|
</template>
|
@@ -46,7 +51,11 @@
|
|
46
51
|
</CmdBox>
|
47
52
|
<!-- end CmdBox -->
|
48
53
|
</div>
|
54
|
+
<!-- end required cookies -->
|
55
|
+
|
49
56
|
<hr/>
|
57
|
+
|
58
|
+
<!-- begin optional cookies -->
|
50
59
|
<div v-if="cookieOptions.optional" class="flex-container vertical">
|
51
60
|
<CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
|
52
61
|
<!-- begin CmdBox -->
|
@@ -60,9 +69,13 @@
|
|
60
69
|
<CmdFormElement
|
61
70
|
element="input"
|
62
71
|
type="checkbox"
|
63
|
-
|
64
|
-
|
72
|
+
v-model="acceptedCookies"
|
73
|
+
:inputValue="cookie.value"
|
74
|
+
:labelText="cookie.labelText"
|
75
|
+
:disabled="cookie.disabled"
|
76
|
+
:id="cookie.id"
|
65
77
|
:toggleSwitch="true"
|
78
|
+
:title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
|
66
79
|
/>
|
67
80
|
<!-- end CmdFormElement -->
|
68
81
|
</template>
|
@@ -81,6 +94,7 @@
|
|
81
94
|
</CmdBox>
|
82
95
|
<!-- end CmdBox -->
|
83
96
|
</div>
|
97
|
+
<!-- end optional cookies -->
|
84
98
|
</slot>
|
85
99
|
<!-- end slot for cookie-options -->
|
86
100
|
|
@@ -90,10 +104,10 @@
|
|
90
104
|
|
91
105
|
<!-- begin button-wrapper for 'accept'-buttons -->
|
92
106
|
<div class="button-wrapper align-center">
|
93
|
-
<button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="
|
107
|
+
<button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCurrentCookies">
|
94
108
|
<span>{{ buttonLabelAcceptCurrentSettings }}</span>
|
95
109
|
</button>
|
96
|
-
<button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="
|
110
|
+
<button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptAllCookies">
|
97
111
|
<span>{{ buttonLabelAcceptAllCookies }}</span>
|
98
112
|
</button>
|
99
113
|
</div>
|
@@ -103,6 +117,10 @@
|
|
103
117
|
</template>
|
104
118
|
|
105
119
|
<script>
|
120
|
+
// import mixins
|
121
|
+
import I18n from "../mixins/I18n"
|
122
|
+
import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessageProperties"
|
123
|
+
|
106
124
|
// import components
|
107
125
|
import CmdBox from "./CmdBox"
|
108
126
|
import CmdCustomHeadline from "./CmdCustomHeadline"
|
@@ -110,6 +128,7 @@ import CmdFormElement from "./CmdFormElement"
|
|
110
128
|
|
111
129
|
export default {
|
112
130
|
name: "CmdCookieDisclaimer",
|
131
|
+
mixins: [I18n, DefaultMessageProperties],
|
113
132
|
components: {
|
114
133
|
CmdBox,
|
115
134
|
CmdCustomHeadline,
|
@@ -122,6 +141,13 @@ export default {
|
|
122
141
|
}
|
123
142
|
},
|
124
143
|
props: {
|
144
|
+
/**
|
145
|
+
* set default v-model (must be named modelValue in Vue3)
|
146
|
+
*/
|
147
|
+
modelValue: {
|
148
|
+
type: Array,
|
149
|
+
required: false
|
150
|
+
},
|
125
151
|
/**
|
126
152
|
* properties for CmdCustomHeadline-component at top of cookie disclaimer
|
127
153
|
*/
|
@@ -185,9 +211,43 @@ export default {
|
|
185
211
|
default: "Proceed with current settings!"
|
186
212
|
}
|
187
213
|
},
|
214
|
+
computed: {
|
215
|
+
acceptedCookies: {
|
216
|
+
get() {
|
217
|
+
const cookies = this.modelValue ? [...this.modelValue] : []
|
218
|
+
const requiredCookies = this.cookieOptions?.required?.cookies || []
|
219
|
+
for (let i = 0; i < requiredCookies.length; i++) {
|
220
|
+
if(!cookies.includes(requiredCookies[i].value)) {
|
221
|
+
cookies.push(requiredCookies[i].value)
|
222
|
+
}
|
223
|
+
}
|
224
|
+
return cookies
|
225
|
+
},
|
226
|
+
set(value) {
|
227
|
+
this.$emit("update:modelValue", value)
|
228
|
+
}
|
229
|
+
}
|
230
|
+
},
|
188
231
|
methods: {
|
189
|
-
|
190
|
-
this.$emit("close-cookie-disclaimer",
|
232
|
+
acceptCurrentCookies() {
|
233
|
+
this.$emit("close-cookie-disclaimer", this.acceptedCookies)
|
234
|
+
},
|
235
|
+
acceptAllCookies() {
|
236
|
+
const allCookies = []
|
237
|
+
|
238
|
+
// push all required cookies to array
|
239
|
+
const requiredCookies = this.cookieOptions?.required?.cookies
|
240
|
+
for(let i = 0; i < requiredCookies.length ; i++) {
|
241
|
+
allCookies.push(requiredCookies[i].value)
|
242
|
+
}
|
243
|
+
|
244
|
+
// push all optional cookies to array
|
245
|
+
const optionalCookies = this.cookieOptions?.optional?.cookies
|
246
|
+
for(let i = 0; i < optionalCookies.length ; i++) {
|
247
|
+
allCookies.push(optionalCookies[i].value)
|
248
|
+
}
|
249
|
+
|
250
|
+
this.$emit("close-cookie-disclaimer", allCookies)
|
191
251
|
},
|
192
252
|
openDataPrivacy(event) {
|
193
253
|
/* first 'target' = clicked-element, second 'target' = target-attribute */
|
@@ -215,6 +275,14 @@ export default {
|
|
215
275
|
top: auto;
|
216
276
|
|
217
277
|
.cmd-box {
|
278
|
+
.box-header {
|
279
|
+
label.disabled {
|
280
|
+
.label-text span {
|
281
|
+
color: var(--pure-white) !important;
|
282
|
+
}
|
283
|
+
}
|
284
|
+
}
|
285
|
+
|
218
286
|
.box-body {
|
219
287
|
padding: var(--default-padding);
|
220
288
|
}
|
@@ -17,6 +17,30 @@
|
|
17
17
|
<!-- begin label -->
|
18
18
|
<span class="label-text" :id="labelId">
|
19
19
|
<span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
|
20
|
+
|
21
|
+
<!-- begin CmdTooltip -->
|
22
|
+
<CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
|
23
|
+
<!-- begin CmdSystemMessage -->
|
24
|
+
<CmdSystemMessage
|
25
|
+
v-if="getValidationMessage"
|
26
|
+
:message="getValidationMessage"
|
27
|
+
:validation-status="validationStatus"
|
28
|
+
:iconClose="{show: false}"
|
29
|
+
/>
|
30
|
+
<!-- end CmdSystemMessage -->
|
31
|
+
|
32
|
+
<!-- begin CmdListOfRequirements -->
|
33
|
+
<CmdListOfRequirements
|
34
|
+
v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
|
35
|
+
:inputRequirements="inputRequirements"
|
36
|
+
:inputModelValue="modelValue"
|
37
|
+
:inputAttributes="$attrs"
|
38
|
+
:helplink="helplink"
|
39
|
+
/>
|
40
|
+
<!-- end CmdListOfRequirements -->
|
41
|
+
</CmdTooltip>
|
42
|
+
<!-- end CmdTooltip -->
|
43
|
+
|
20
44
|
<a v-if="$attrs.required || inputRequirements.length"
|
21
45
|
href="#"
|
22
46
|
@click.prevent
|
@@ -102,51 +126,6 @@
|
|
102
126
|
</li>
|
103
127
|
</ul>
|
104
128
|
</div>
|
105
|
-
<!-- begin CmdTooltip -->
|
106
|
-
<CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
|
107
|
-
<!-- begin CmdSystemMessage -->
|
108
|
-
<CmdSystemMessage
|
109
|
-
v-if="getValidationMessage"
|
110
|
-
:message="getValidationMessage"
|
111
|
-
:validationStatus="validationStatus"
|
112
|
-
:iconClose="{show: false}"
|
113
|
-
/>
|
114
|
-
<!-- end CmdSystemMessage -->
|
115
|
-
|
116
|
-
<template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
|
117
|
-
<!-- begin list of requirements -->
|
118
|
-
<h6>{{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"</h6>
|
119
|
-
<dl class="list-of-requirements">
|
120
|
-
<template v-for="(requirement, index) in inputRequirements" :key="index">
|
121
|
-
<dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
|
122
|
-
<dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
|
123
|
-
<span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
|
124
|
-
:title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
|
125
|
-
</dd>
|
126
|
-
</template>
|
127
|
-
</dl>
|
128
|
-
<!-- end list of requirements -->
|
129
|
-
|
130
|
-
<!-- begin helplink -->
|
131
|
-
<template v-if="helplink">
|
132
|
-
<hr v-if="helplink.show"/>
|
133
|
-
<a v-if="helplink.show && helplink.url"
|
134
|
-
:href="helplink.url"
|
135
|
-
:target="helplink.target"
|
136
|
-
@click.prevent>
|
137
|
-
<span v-if="helplink.icon?.iconClass"
|
138
|
-
:class="helplink.icon?.iconClass"
|
139
|
-
:title="helplink.icon?.tooltip">
|
140
|
-
</span>
|
141
|
-
<span v-if="helplink.text">
|
142
|
-
{{ helplink.text }}
|
143
|
-
</span>
|
144
|
-
</a>
|
145
|
-
</template>
|
146
|
-
<!-- end helplink -->
|
147
|
-
</template>
|
148
|
-
</CmdTooltip>
|
149
|
-
<!-- end CmdTooltip -->
|
150
129
|
</template>
|
151
130
|
|
152
131
|
<script>
|
@@ -155,11 +134,12 @@ import {createUuid} from "../utils/common.js"
|
|
155
134
|
|
156
135
|
// import mixins
|
157
136
|
import I18n from "../mixins/I18n"
|
158
|
-
import DefaultMessageProperties from "../mixins/
|
137
|
+
import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
|
159
138
|
import FieldValidation from "../mixins/FieldValidation.js"
|
160
139
|
import Tooltip from "../mixins/Tooltip.js"
|
161
140
|
|
162
141
|
// import components
|
142
|
+
import CmdListOfRequirements from "./CmdListOfRequirements"
|
163
143
|
import CmdSystemMessage from "./CmdSystemMessage"
|
164
144
|
import CmdTooltip from "./CmdTooltip"
|
165
145
|
|
@@ -173,6 +153,7 @@ export default {
|
|
173
153
|
Tooltip
|
174
154
|
],
|
175
155
|
components: {
|
156
|
+
CmdListOfRequirements,
|
176
157
|
CmdSystemMessage,
|
177
158
|
CmdTooltip
|
178
159
|
},
|
@@ -334,7 +315,7 @@ export default {
|
|
334
315
|
},
|
335
316
|
// get ID for accessibility
|
336
317
|
labelId() {
|
337
|
-
if(this.$attrs.id !== undefined) {
|
318
|
+
if (this.$attrs.id !== undefined) {
|
338
319
|
return this.$attrs.id
|
339
320
|
}
|
340
321
|
return "label-" + createUuid()
|