comand-component-library 3.1.79 → 3.1.80
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 +1 -1
- package/src/App.vue +5 -1
- package/src/components/CmdBox.vue +20 -2
- package/src/components/CmdCookieDisclaimer.vue +10 -4
- package/src/components/CmdFakeSelect.vue +2 -1
- package/src/components/CmdForm.vue +9 -2
- package/src/components/CmdFormElement.vue +7 -0
- package/src/components/CmdHeadline.vue +11 -5
- package/src/components/CmdListOfRequirements.vue +44 -4
- package/src/components/CmdMainNavigation.vue +1 -1
- package/src/components/CmdSlideButton.vue +1 -0
- package/src/components/CmdTabs.vue +2 -0
- package/src/components/CmdToggleDarkMode.vue +80 -47
- package/src/components/CmdTooltipForInputElements.vue +8 -0
- package/src/documentation/generated/CmdFormPropertyDescriptions.json +5 -0
- package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json +11 -1
- package/src/documentation/generated/CmdToggleDarkModePropertyDescriptions.json +37 -0
- package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json +5 -0
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +1 -1
- package/src/mixins/CmdListOfRequirements/DefaultMessageProperties.js +10 -0
package/package.json
CHANGED
package/src/App.vue
CHANGED
@@ -49,6 +49,7 @@
|
|
49
49
|
<li><a href="#section-tables">Tables</a></li>
|
50
50
|
<li><a href="#section-tabs">Tabs</a></li>
|
51
51
|
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
52
|
+
<li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
|
52
53
|
<li><a href="#section-upload-form">Upload-Form</a></li>
|
53
54
|
</ul>
|
54
55
|
</div>
|
@@ -86,7 +87,6 @@
|
|
86
87
|
<fieldset class="grid-container-create-columns">
|
87
88
|
<legend>Legend</legend>
|
88
89
|
<h2>Form Element-Component</h2>
|
89
|
-
<CmdToggleDarkMode :showLabel="true"/>
|
90
90
|
<div class="flex-container">
|
91
91
|
<CmdFormElement labelText="Input (type text):"
|
92
92
|
element="input"
|
@@ -457,6 +457,10 @@
|
|
457
457
|
checkbox with boolean: {{ checkboxValue }}<br/>
|
458
458
|
checkboxes with values: {{ checkboxValues }}
|
459
459
|
</p>
|
460
|
+
<h3>Toggle Dark-Mode</h3>
|
461
|
+
<a id="section-toggle-darkmode"></a>
|
462
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
463
|
+
<CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
|
460
464
|
<h2>Checkboxes and Radiobuttons</h2>
|
461
465
|
<h3>Checkboxes [native]</h3>
|
462
466
|
<div class="label inline">
|
@@ -87,7 +87,7 @@
|
|
87
87
|
|
88
88
|
<!-- begin boxType 'user' -->
|
89
89
|
<div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
|
90
|
-
<div class="box-header">
|
90
|
+
<div class="box-header flex-container vertical">
|
91
91
|
<img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
|
92
92
|
<div v-else :class="defaultProfileIconClass" :title="user.name"></div>
|
93
93
|
<!-- begin CmdHeadline -->
|
@@ -340,6 +340,14 @@ export default {
|
|
340
340
|
font-size: 1rem;
|
341
341
|
margin-left: auto;
|
342
342
|
}
|
343
|
+
|
344
|
+
&:hover, &:active, &:focus {
|
345
|
+
background: var(--pure-white);
|
346
|
+
|
347
|
+
> * {
|
348
|
+
color: var(--primary-color);
|
349
|
+
}
|
350
|
+
}
|
343
351
|
}
|
344
352
|
|
345
353
|
.box-body {
|
@@ -428,7 +436,6 @@ export default {
|
|
428
436
|
color: var(--pure-white);
|
429
437
|
text-transform: uppercase;
|
430
438
|
text-align: center;
|
431
|
-
box-shadow: var(--box-shadow);
|
432
439
|
}
|
433
440
|
}
|
434
441
|
|
@@ -449,6 +456,10 @@ export default {
|
|
449
456
|
display: table;
|
450
457
|
margin: 0 auto;
|
451
458
|
}
|
459
|
+
|
460
|
+
> img {
|
461
|
+
border: 0;
|
462
|
+
}
|
452
463
|
}
|
453
464
|
|
454
465
|
.box-body {
|
@@ -477,6 +488,13 @@ export default {
|
|
477
488
|
> .box-header {
|
478
489
|
padding: var(--default-padding);
|
479
490
|
|
491
|
+
.cmd-headline {
|
492
|
+
> * {
|
493
|
+
display: block;
|
494
|
+
text-align: center;
|
495
|
+
}
|
496
|
+
}
|
497
|
+
|
480
498
|
> img, > div:first-child {
|
481
499
|
display: table;
|
482
500
|
margin: 0 auto;
|
@@ -237,14 +237,20 @@ export default {
|
|
237
237
|
|
238
238
|
// push all required cookies to array
|
239
239
|
const requiredCookies = this.cookieOptions?.required?.cookies
|
240
|
-
|
241
|
-
|
240
|
+
|
241
|
+
if (requiredCookies) {
|
242
|
+
for (let i = 0; i < requiredCookies.length; i++) {
|
243
|
+
allCookies.push(requiredCookies[i].value)
|
244
|
+
}
|
242
245
|
}
|
243
246
|
|
244
247
|
// push all optional cookies to array
|
245
248
|
const optionalCookies = this.cookieOptions?.optional?.cookies
|
246
|
-
|
247
|
-
|
249
|
+
|
250
|
+
if (optionalCookies) {
|
251
|
+
for (let i = 0; i < optionalCookies.length; i++) {
|
252
|
+
allCookies.push(optionalCookies[i].value)
|
253
|
+
}
|
248
254
|
}
|
249
255
|
|
250
256
|
this.$emit("close-cookie-disclaimer", allCookies)
|
@@ -444,6 +444,7 @@ export default {
|
|
444
444
|
|
445
445
|
.cmd-fake-select {
|
446
446
|
align-self: flex-end;
|
447
|
+
border-radius: var(--border-radius);
|
447
448
|
|
448
449
|
> span:first-child {
|
449
450
|
a {
|
@@ -456,7 +457,6 @@ export default {
|
|
456
457
|
margin: 0;
|
457
458
|
display: block;
|
458
459
|
min-width: 0;
|
459
|
-
background: var(--color-scheme-background-color);
|
460
460
|
box-shadow: none;
|
461
461
|
border-radius: var(--border-radius);
|
462
462
|
|
@@ -467,6 +467,7 @@ export default {
|
|
467
467
|
> a {
|
468
468
|
height: inherit;
|
469
469
|
border: var(--default-border);
|
470
|
+
background: var(--color-scheme-background-color);
|
470
471
|
|
471
472
|
.option-name {
|
472
473
|
text-overflow: ellipsis;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
|
-
<form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}">
|
2
|
+
<form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
|
3
3
|
<template v-if="useFieldset">
|
4
|
-
<fieldset>
|
4
|
+
<fieldset class="flex-container">
|
5
5
|
<legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
|
6
6
|
<!-- begin default-slot-content -->
|
7
7
|
<slot></slot>
|
@@ -29,6 +29,13 @@ export default {
|
|
29
29
|
}
|
30
30
|
},
|
31
31
|
props: {
|
32
|
+
/**
|
33
|
+
* deactivate if browser-validation should be used
|
34
|
+
*/
|
35
|
+
novalidate: {
|
36
|
+
type: Boolean,
|
37
|
+
default: true
|
38
|
+
},
|
32
39
|
/**
|
33
40
|
* if activated the entire form will be validated by pre-coded validation
|
34
41
|
*
|
@@ -37,6 +37,7 @@
|
|
37
37
|
:inputModelValue="modelValue"
|
38
38
|
:helplink="helplink"
|
39
39
|
:relatedId="tooltipId"
|
40
|
+
:labelText="labelText"
|
40
41
|
/>
|
41
42
|
<!-- end CmdTooltipForInputElements -->
|
42
43
|
|
@@ -113,6 +114,7 @@
|
|
113
114
|
/>
|
114
115
|
<span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
|
115
116
|
</template>
|
117
|
+
|
116
118
|
<!-- begin labels for toggle-switch with switch-label -->
|
117
119
|
<template v-else-if="onLabel && offLabel">
|
118
120
|
<span class="switch-label-wrapper">
|
@@ -830,6 +832,11 @@ export default {
|
|
830
832
|
z-index: 100;
|
831
833
|
}
|
832
834
|
|
835
|
+
input:not(:only-child) {
|
836
|
+
border-top-right-radius: 0;
|
837
|
+
border-bottom-right-radius: 0;
|
838
|
+
}
|
839
|
+
|
833
840
|
a.button {
|
834
841
|
& + a[class*="icon"] {
|
835
842
|
right: 5rem;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText}]">
|
2
|
+
<div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
|
3
3
|
<span v-if="iconClass" :class="iconClass"></span>
|
4
4
|
<div v-if="preHeadlineText">
|
5
5
|
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
@@ -62,11 +62,14 @@ export default {
|
|
62
62
|
@import '../assets/styles/variables';
|
63
63
|
|
64
64
|
.cmd-headline {
|
65
|
-
display: flex;
|
66
|
-
align-items: center;
|
67
65
|
margin-bottom: var(--default-margin);
|
68
66
|
gap: calc(var(--default-gap) / 2);
|
69
67
|
|
68
|
+
&.has-icon {
|
69
|
+
display: flex;
|
70
|
+
align-items: center;
|
71
|
+
}
|
72
|
+
|
70
73
|
&.has-pre-headline-text {
|
71
74
|
[class*="icon"] {
|
72
75
|
font-size: 5rem;
|
@@ -79,8 +82,11 @@ export default {
|
|
79
82
|
|
80
83
|
h1, h2, h3, h4, h5, h6 {
|
81
84
|
margin: 0;
|
82
|
-
|
83
|
-
|
85
|
+
|
86
|
+
&:only-child {
|
87
|
+
flex: none;
|
88
|
+
width: 100%;
|
89
|
+
}
|
84
90
|
}
|
85
91
|
|
86
92
|
@media only screen and ($small-max-width) {
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<div class="cmd-list-of-requirements">
|
3
3
|
<!-- begin cmd-custom-headline -->
|
4
4
|
<CmdHeadline :headline-level="cmdHeadline.headlineLevel">
|
5
|
-
|
5
|
+
{{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
|
6
6
|
</CmdHeadline>
|
7
7
|
<!-- end cmd-custom-headline -->
|
8
8
|
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
|
14
14
|
<span
|
15
15
|
aria-live="assertive"
|
16
|
-
:class="requirement.valid(inputModelValue, inputAttributes) ?
|
17
|
-
:title="requirement.valid(inputModelValue, inputAttributes) ?
|
16
|
+
:class="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
|
17
|
+
:title="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.tooltip : iconError.tooltip"
|
18
18
|
>
|
19
19
|
</span>
|
20
20
|
</dd>
|
@@ -48,11 +48,19 @@
|
|
48
48
|
// import components
|
49
49
|
import CmdHeadline from "./CmdHeadline"
|
50
50
|
|
51
|
+
// import mixins
|
52
|
+
import I18n from "../mixins/I18n"
|
53
|
+
import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
|
54
|
+
|
51
55
|
export default {
|
52
56
|
name: "CmdListOfRequirements",
|
53
57
|
components: {
|
54
58
|
CmdHeadline
|
55
59
|
},
|
60
|
+
mixins: [
|
61
|
+
I18n,
|
62
|
+
DefaultMessageProperties
|
63
|
+
],
|
56
64
|
props: {
|
57
65
|
/**
|
58
66
|
* property to check validity of given modelValue
|
@@ -69,7 +77,7 @@ export default {
|
|
69
77
|
required: true
|
70
78
|
},
|
71
79
|
/**
|
72
|
-
* text for label
|
80
|
+
* text for label (used in headline)
|
73
81
|
*/
|
74
82
|
labelText: {
|
75
83
|
type: String,
|
@@ -89,6 +97,30 @@ export default {
|
|
89
97
|
type: String,
|
90
98
|
required: false
|
91
99
|
},
|
100
|
+
/**
|
101
|
+
* icon to show success-status
|
102
|
+
*/
|
103
|
+
iconSuccess: {
|
104
|
+
type: Object,
|
105
|
+
default() {
|
106
|
+
return {
|
107
|
+
iconClass: "icon-check-circle",
|
108
|
+
tooltip: "success"
|
109
|
+
}
|
110
|
+
}
|
111
|
+
},
|
112
|
+
/**
|
113
|
+
* icon to show error-status
|
114
|
+
*/
|
115
|
+
iconError: {
|
116
|
+
type: Object,
|
117
|
+
default() {
|
118
|
+
return {
|
119
|
+
iconClass: "icon-error-circle",
|
120
|
+
tooltip: "error"
|
121
|
+
}
|
122
|
+
}
|
123
|
+
},
|
92
124
|
/**
|
93
125
|
* properties of CmdHeadline-component
|
94
126
|
*/
|
@@ -100,6 +132,14 @@ export default {
|
|
100
132
|
}
|
101
133
|
}
|
102
134
|
}
|
135
|
+
},
|
136
|
+
computed: {
|
137
|
+
headlineRequirements() {
|
138
|
+
if (this.inputRequirements.length > 1) {
|
139
|
+
return this.getMessage("cmdlistofrequirements.headline.requirements_for_input")
|
140
|
+
}
|
141
|
+
return this.getMessage("cmdlistofrequirements.headline.requirement_for_input")
|
142
|
+
}
|
103
143
|
}
|
104
144
|
}
|
105
145
|
</script>
|
@@ -19,7 +19,7 @@
|
|
19
19
|
</a>
|
20
20
|
</li>
|
21
21
|
<li v-for="(navigationEntry, index) in navigationEntries" :key="index"
|
22
|
-
:class="{'open' : navigationEntry.open}">
|
22
|
+
:class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
|
23
23
|
<!-- begin type === href -->
|
24
24
|
<a
|
25
25
|
v-if="navigationEntry.type === 'href'"
|
@@ -122,6 +122,8 @@ export default {
|
|
122
122
|
display: block;
|
123
123
|
padding: var(--default-padding);
|
124
124
|
color: var(--color-scheme-text-color);
|
125
|
+
border-top-left-radius: var(--border-radius);
|
126
|
+
border-top-right-radius: var(--border-radius);
|
125
127
|
|
126
128
|
&:hover, &:active, &:focus {
|
127
129
|
cursor: pointer;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-toggle-dark-mode', {'dark-mode': darkMode}]">
|
2
|
+
<div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
|
3
3
|
<CmdFormElement
|
4
4
|
element="input"
|
5
5
|
type="checkbox"
|
@@ -7,6 +7,7 @@
|
|
7
7
|
:showLabel="showLabel"
|
8
8
|
v-model="darkMode"
|
9
9
|
:toggle-switch="true"
|
10
|
+
:title="!showLabel ? labelText: ''"
|
10
11
|
/>
|
11
12
|
</div>
|
12
13
|
</template>
|
@@ -22,20 +23,46 @@ export default {
|
|
22
23
|
data() {
|
23
24
|
return {
|
24
25
|
darkMode: false,
|
25
|
-
labelText: "
|
26
|
+
labelText: ""
|
26
27
|
}
|
27
28
|
},
|
28
29
|
props: {
|
30
|
+
/**
|
31
|
+
* toggle visibility of label
|
32
|
+
*/
|
29
33
|
showLabel: {
|
30
34
|
type: Boolean,
|
31
35
|
default: false
|
36
|
+
},
|
37
|
+
/**
|
38
|
+
* activate if styled layout should be used
|
39
|
+
*
|
40
|
+
* @affectsStyling: true
|
41
|
+
*/
|
42
|
+
useStyledLayout: {
|
43
|
+
type: Boolean,
|
44
|
+
default: false
|
45
|
+
},
|
46
|
+
/**
|
47
|
+
* label-text to enable dark-mode
|
48
|
+
*
|
49
|
+
* @requiredForAccessibility: true
|
50
|
+
*/
|
51
|
+
labelTextDarkMode: {
|
52
|
+
type: String,
|
53
|
+
default: "Dark-mode enabled"
|
54
|
+
},
|
55
|
+
/**
|
56
|
+
* label-text to enable light-mode
|
57
|
+
*
|
58
|
+
* @requiredForAccessibility: true
|
59
|
+
*/
|
60
|
+
labelTextLightMode: {
|
61
|
+
type: String,
|
62
|
+
default: "Light-mode enabled"
|
32
63
|
}
|
33
64
|
},
|
34
65
|
created() {
|
35
|
-
// get color-scheme (light-/dark-mode) from browser-settings
|
36
|
-
// this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
37
|
-
// document.body.classList.add(this.darkMode ? 'dark-mode' : 'light-mode');
|
38
|
-
|
39
66
|
const mql = window.matchMedia('(prefers-color-scheme: dark)')
|
40
67
|
mql.addEventListener("change", this.onColorSchemeChange)
|
41
68
|
this.onColorSchemeChange(mql)
|
@@ -50,74 +77,80 @@ export default {
|
|
50
77
|
}
|
51
78
|
},
|
52
79
|
watch: {
|
53
|
-
darkMode
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
80
|
+
darkMode: {
|
81
|
+
handler() {
|
82
|
+
// toggle classes to overwrite media-query styles for color-schemes
|
83
|
+
const htmlTag = document.querySelector('html')
|
84
|
+
if (this.darkMode) {
|
85
|
+
htmlTag.classList.replace("light-mode", "dark-mode");
|
86
|
+
this.labelText = this.labelTextDarkMode
|
87
|
+
} else {
|
88
|
+
htmlTag.classList.replace("dark-mode", "light-mode");
|
89
|
+
this.labelText = this.labelTextLightMode
|
90
|
+
}
|
91
|
+
htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', {detail: this.darkMode ? 'dark-mode' : 'light-mode'}))
|
92
|
+
},
|
93
|
+
immediate: true
|
64
94
|
}
|
65
95
|
}
|
66
96
|
}
|
67
97
|
</script>
|
68
98
|
|
69
99
|
<style lang="scss">
|
100
|
+
/* begin cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
|
70
101
|
.cmd-toggle-dark-mode {
|
71
|
-
|
102
|
+
&.styled-layout {
|
72
103
|
input {
|
73
104
|
--dark-blue: hsl(195, 96%, 45%);
|
74
105
|
--medium-blue: hsl(194, 97%, 39%);
|
75
106
|
--light-blue: hsl(195, 97%, 76%);
|
76
|
-
background: linear-gradient(to bottom, var(--dark-blue) 0%,var(--light-blue) 67%);
|
107
|
+
background: linear-gradient(to bottom, var(--dark-blue) 0%, var(--light-blue) 67%);
|
77
108
|
border-color: var(--medium-blue);
|
78
109
|
|
79
|
-
|
110
|
+
&::after {
|
80
111
|
--yellow-hue: 60;
|
81
112
|
--yellow-saturation: 100%;
|
82
113
|
--yellow-lightness: 76.7%;
|
83
|
-
background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness),0) 100%);
|
114
|
+
background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%);
|
84
115
|
border-color: transparent;
|
85
116
|
box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
|
86
117
|
}
|
87
118
|
}
|
88
|
-
}
|
89
119
|
|
90
|
-
|
91
|
-
|
92
|
-
background: var(--color-scheme-background-color);
|
93
|
-
border-color: var(--color-scheme-text-color);
|
94
|
-
|
95
|
-
&:before {
|
96
|
-
--size: 1.2rem;
|
97
|
-
content: "";
|
98
|
-
width: var(--size);
|
99
|
-
aspect-ratio: 1/1;
|
120
|
+
&.dark-mode {
|
121
|
+
input {
|
100
122
|
background: var(--color-scheme-background-color);
|
101
|
-
border-
|
102
|
-
position: absolute;
|
103
|
-
top: 0;
|
104
|
-
right: calc(var(--size) / 2);
|
105
|
-
transform: translateY(calc(50% - 35%));
|
106
|
-
z-index: 100;
|
107
|
-
}
|
123
|
+
border-color: var(--color-scheme-text-color);
|
108
124
|
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
125
|
+
&::before {
|
126
|
+
--size: 1.2rem;
|
127
|
+
content: "";
|
128
|
+
width: var(--size);
|
129
|
+
aspect-ratio: 1/1;
|
130
|
+
background: var(--color-scheme-background-color);
|
131
|
+
border-radius: var(--full-circle);
|
132
|
+
position: absolute;
|
133
|
+
top: 0;
|
134
|
+
right: calc(var(--size) / 2);
|
135
|
+
transform: translateY(calc(50% - 35%));
|
136
|
+
z-index: 100;
|
137
|
+
transition: var(--default-transition);
|
138
|
+
}
|
139
|
+
|
140
|
+
&::after {
|
141
|
+
background: radial-gradient(ellipse at center, var(--pure-white) 50%, var(--medium-gray) 100%);
|
142
|
+
border-color: transparent;
|
143
|
+
box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
|
144
|
+
}
|
113
145
|
}
|
114
|
-
}
|
115
146
|
|
116
|
-
|
117
|
-
|
118
|
-
|
147
|
+
.label-text {
|
148
|
+
span {
|
149
|
+
color: var(--color-scheme-text-color);
|
150
|
+
}
|
119
151
|
}
|
120
152
|
}
|
121
153
|
}
|
122
154
|
}
|
155
|
+
/* end cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
|
123
156
|
</style>
|
@@ -24,6 +24,7 @@
|
|
24
24
|
:inputModelValue="inputModelValue"
|
25
25
|
:inputAttributes="inputAttributes"
|
26
26
|
:validationTooltip="validationTooltip"
|
27
|
+
:labelText="labelText"
|
27
28
|
/>
|
28
29
|
<!-- end CmdListOfRequirements -->
|
29
30
|
</CmdTooltip>
|
@@ -44,6 +45,13 @@ export default {
|
|
44
45
|
CmdTooltip
|
45
46
|
},
|
46
47
|
props: {
|
48
|
+
/**
|
49
|
+
* text for label (used in headline)
|
50
|
+
*/
|
51
|
+
labelText: {
|
52
|
+
type: String,
|
53
|
+
required: false
|
54
|
+
},
|
47
55
|
/**
|
48
56
|
* related-id for CmdTooltip-component
|
49
57
|
*/
|
@@ -11,7 +11,7 @@
|
|
11
11
|
},
|
12
12
|
"labelText": {
|
13
13
|
"comments": [
|
14
|
-
"text for label"
|
14
|
+
"text for label (used in headline)"
|
15
15
|
]
|
16
16
|
},
|
17
17
|
"inputRequirements": {
|
@@ -24,6 +24,16 @@
|
|
24
24
|
"set a helplink to a different page for further support"
|
25
25
|
]
|
26
26
|
},
|
27
|
+
"iconSuccess": {
|
28
|
+
"comments": [
|
29
|
+
"icon to show success-status"
|
30
|
+
]
|
31
|
+
},
|
32
|
+
"iconError": {
|
33
|
+
"comments": [
|
34
|
+
"icon to show error-status"
|
35
|
+
]
|
36
|
+
},
|
27
37
|
"cmdHeadline": {
|
28
38
|
"comments": [
|
29
39
|
"properties of CmdHeadline-component"
|
@@ -0,0 +1,37 @@
|
|
1
|
+
{
|
2
|
+
"showLabel": {
|
3
|
+
"comments": [
|
4
|
+
"toggle visibility of label"
|
5
|
+
]
|
6
|
+
},
|
7
|
+
"useStyledLayout": {
|
8
|
+
"comments": [
|
9
|
+
"activate if styled layout should be used"
|
10
|
+
],
|
11
|
+
"annotations": {
|
12
|
+
"affectsStyling": [
|
13
|
+
"true"
|
14
|
+
]
|
15
|
+
}
|
16
|
+
},
|
17
|
+
"labelTextDarkMode": {
|
18
|
+
"comments": [
|
19
|
+
"label-text to enable dark-mode"
|
20
|
+
],
|
21
|
+
"annotations": {
|
22
|
+
"requiredForAccessibility": [
|
23
|
+
"true"
|
24
|
+
]
|
25
|
+
}
|
26
|
+
},
|
27
|
+
"labelTextLightMode": {
|
28
|
+
"comments": [
|
29
|
+
"label-text to enable light-mode"
|
30
|
+
],
|
31
|
+
"annotations": {
|
32
|
+
"requiredForAccessibility": [
|
33
|
+
"true"
|
34
|
+
]
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
@@ -2,7 +2,7 @@ export default {
|
|
2
2
|
data() {
|
3
3
|
return {
|
4
4
|
defaultMessageProperties: {
|
5
|
-
"cmdfakeselect.headline.
|
5
|
+
"cmdfakeselect.headline.requirements_for_input": "Requirements for input",
|
6
6
|
"cmdfakeselect.linktext.deselect_all_options": "Deselect all options",
|
7
7
|
"cmdfakeselect.linktext.select_all_options": "Select all options",
|
8
8
|
"cmdfakeselect.headline.": "An option is selected",
|