comand-component-library 3.1.90 → 3.1.91
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 +85 -13
- package/src/assets/data/main-navigation.json +1 -0
- package/src/assets/data/tabs.json +1 -0
- package/src/components/CmdBox.vue +12 -7
- package/src/components/CmdBoxSiteSearch.vue +2 -1
- package/src/components/CmdCookieDisclaimer.vue +19 -6
- package/src/components/CmdFakeSelect.vue +11 -19
- package/src/components/CmdFancyBox.vue +46 -13
- package/src/components/CmdFormElement.vue +17 -29
- package/src/components/CmdImageGallery.vue +2 -2
- package/src/components/CmdInputGroup.vue +9 -16
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +6 -6
- package/src/components/CmdMultipleSwitch.vue +4 -12
- package/src/components/CmdNewsletterSubscription.vue +199 -0
- package/src/components/CmdShareButtons.vue +100 -27
- package/src/components/CmdSystemMessage.vue +6 -0
- package/src/components/CmdTabs.vue +5 -5
- package/src/components/CmdThumbnailScroller.vue +9 -1
- package/src/components/CmdTooltip.vue +1 -1
- package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +10 -0
- package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +0 -5
- package/src/documentation/generated/CmdNewsletterSubscriptionPropertyDescriptions.json +42 -0
- package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +24 -0
- package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js +9 -0
- package/src/mixins/FieldValidation.js +8 -1
- package/src/mixins/Identifier.js +28 -0
- package/src/utils/common.js +5 -1
@@ -1,21 +1,51 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-share-buttons',{'stretch': stretchButtons, 'align-right': align === 'right'}]">
|
3
|
-
<
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
2
|
+
<div :class="['cmd-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
|
3
|
+
<CmdFormElement
|
4
|
+
v-if="userMustAcceptDataPrivacy"
|
5
|
+
element="input"
|
6
|
+
type="checkbox"
|
7
|
+
:toggle-switch="cmdFormElement.toggleSwitch"
|
8
|
+
:labelText="cmdFormElement.labelText"
|
9
|
+
:required="cmdFormElement.required"
|
10
|
+
v-model="dataPrivacyAccepted"
|
11
|
+
/>
|
12
|
+
<div class="share-button-wrapper">
|
13
|
+
<a v-for="shareButton in validShareButtons"
|
14
|
+
:key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
|
15
|
+
:id="shareButton.id"
|
16
|
+
:href="getUrl(shareButton)"
|
17
|
+
target="_blank"
|
18
|
+
:title="tooltip(shareButton.tooltip)">
|
19
|
+
<span v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :class="shareButton.iconClass"></span>
|
20
|
+
<span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
|
21
|
+
<span v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :class="shareButton.iconClass"></span>
|
22
|
+
</a>
|
23
|
+
</div>
|
12
24
|
</div>
|
13
25
|
</template>
|
14
26
|
|
15
27
|
<script>
|
28
|
+
// import components
|
29
|
+
import CmdFormElement from "./CmdFormElement"
|
30
|
+
|
16
31
|
export default {
|
17
32
|
name: "CmdShareButtons",
|
33
|
+
components: {
|
34
|
+
CmdFormElement
|
35
|
+
},
|
36
|
+
data() {
|
37
|
+
return {
|
38
|
+
dataPrivacyAccepted: false
|
39
|
+
}
|
40
|
+
},
|
18
41
|
props: {
|
42
|
+
/**
|
43
|
+
* set default v-model (must be named modelValue in Vue3)
|
44
|
+
*/
|
45
|
+
modelValue: {
|
46
|
+
type: [String, Number, Array],
|
47
|
+
default: ""
|
48
|
+
},
|
19
49
|
/**
|
20
50
|
* set horizontal alignment
|
21
51
|
*
|
@@ -54,6 +84,37 @@ export default {
|
|
54
84
|
appendPage: {
|
55
85
|
type: Boolean,
|
56
86
|
default: true
|
87
|
+
},
|
88
|
+
/**
|
89
|
+
* toggle if user has to accept that anonymous data will be send while sharing
|
90
|
+
*/
|
91
|
+
userMustAcceptDataPrivacy: {
|
92
|
+
type: Boolean,
|
93
|
+
default: true
|
94
|
+
},
|
95
|
+
/**
|
96
|
+
* tooltip shown on hovering disabled buttons
|
97
|
+
*
|
98
|
+
* userMustAcceptDataPrivacy-property must be activated
|
99
|
+
*/
|
100
|
+
tooltipAcceptDataPrivacy: {
|
101
|
+
type: String,
|
102
|
+
default: "You must accept data privacy conditions!"
|
103
|
+
},
|
104
|
+
/**
|
105
|
+
* properties for cmdFormElement
|
106
|
+
*
|
107
|
+
* userMustAcceptDataPrivacy-property must be activated
|
108
|
+
*/
|
109
|
+
cmdFormElement: {
|
110
|
+
type: Object,
|
111
|
+
default() {
|
112
|
+
return {
|
113
|
+
toggleSwitch: true,
|
114
|
+
labelText: "I accept that anonymous data will be send to the platform I share this page on!",
|
115
|
+
required: true
|
116
|
+
}
|
117
|
+
}
|
57
118
|
}
|
58
119
|
},
|
59
120
|
computed: {
|
@@ -63,19 +124,28 @@ export default {
|
|
63
124
|
},
|
64
125
|
methods: {
|
65
126
|
getUrl(shareButton) {
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
127
|
+
if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
|
128
|
+
// if path is not given completely by json-data
|
129
|
+
if (this.appendPage) {
|
130
|
+
// if page to share is given by property
|
131
|
+
if (this.page) {
|
132
|
+
return shareButton.path + encodeURIComponent(this.page)
|
133
|
+
}
|
134
|
+
|
135
|
+
// if current page should be append to url
|
136
|
+
return shareButton.path + encodeURIComponent(location.href)
|
71
137
|
}
|
72
138
|
|
73
|
-
// if
|
74
|
-
return shareButton.path
|
139
|
+
// if path is given completely by json-data
|
140
|
+
return shareButton.path
|
75
141
|
}
|
76
|
-
|
77
|
-
|
78
|
-
|
142
|
+
return null
|
143
|
+
},
|
144
|
+
tooltip(tooltip) {
|
145
|
+
if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
|
146
|
+
return tooltip
|
147
|
+
}
|
148
|
+
return this.tooltipAcceptDataPrivacy
|
79
149
|
}
|
80
150
|
}
|
81
151
|
}
|
@@ -87,10 +157,19 @@ export default {
|
|
87
157
|
|
88
158
|
.cmd-share-buttons {
|
89
159
|
display: flex;
|
160
|
+
flex-direction: column;
|
90
161
|
gap: var(--default-gap);
|
91
162
|
|
92
163
|
&.align-right {
|
93
|
-
|
164
|
+
.share-button-wrapper {
|
165
|
+
justify-content: flex-end;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
|
169
|
+
&.stretch {
|
170
|
+
.button {
|
171
|
+
flex: 1;
|
172
|
+
}
|
94
173
|
}
|
95
174
|
|
96
175
|
.button {
|
@@ -101,12 +180,6 @@ export default {
|
|
101
180
|
}
|
102
181
|
}
|
103
182
|
|
104
|
-
&.stretch {
|
105
|
-
.button {
|
106
|
-
flex: 1;
|
107
|
-
}
|
108
|
-
}
|
109
|
-
|
110
183
|
a:last-of-type {
|
111
184
|
margin-right: 0;
|
112
185
|
}
|
@@ -4,6 +4,7 @@
|
|
4
4
|
v-if="showSystemMessage"
|
5
5
|
:class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
|
6
6
|
:role="validationStatus === 'error' ? 'alert' : 'dialog'"
|
7
|
+
:aria-labelledby="htmlId"
|
7
8
|
>
|
8
9
|
<!-- begin close-icon -->
|
9
10
|
<a
|
@@ -21,6 +22,7 @@
|
|
21
22
|
:iconClass="iconMessage.iconClass"
|
22
23
|
:headlineText="systemMessage"
|
23
24
|
:headlineLevel="messageHeadlineLevel"
|
25
|
+
:id="htmlId"
|
24
26
|
/>
|
25
27
|
<!-- end cmd-headline -->
|
26
28
|
|
@@ -32,11 +34,15 @@
|
|
32
34
|
</template>
|
33
35
|
|
34
36
|
<script>
|
37
|
+
// import mixins
|
38
|
+
import Identifier from "../mixins/Identifier"
|
39
|
+
|
35
40
|
// import components
|
36
41
|
import CmdHeadline from "./CmdHeadline"
|
37
42
|
|
38
43
|
export default {
|
39
44
|
name: "CmdSystemMessage",
|
45
|
+
mixins: [Identifier],
|
40
46
|
components: {
|
41
47
|
CmdHeadline
|
42
48
|
},
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
|
4
4
|
<li :class="{active : showTab === index}" v-for="(tab, index) in tabs" :key="index" role="tab">
|
5
5
|
<a @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false">
|
6
|
-
<span v-if="tab.iconClass"
|
6
|
+
<span v-if="tab.iconClass" :class="tab.iconClass"></span>
|
7
7
|
<span v-if="tab.name">{{ tab.name }}</span>
|
8
8
|
</a>
|
9
9
|
</li>
|
@@ -108,21 +108,21 @@ export default {
|
|
108
108
|
> li {
|
109
109
|
z-index: 10;
|
110
110
|
margin-left: 0;
|
111
|
-
border-bottom: 0;
|
112
111
|
border-top-left-radius: var(--border-radius);
|
113
112
|
border-top-right-radius: var(--border-radius);
|
114
113
|
list-style-type: none;
|
115
114
|
background: var(--color-scheme-background-color);
|
116
115
|
border: var(--default-border);
|
116
|
+
border-bottom: 0;
|
117
117
|
|
118
118
|
&.active {
|
119
|
-
border-bottom: 0;
|
120
119
|
border-color: var(--primary-color);
|
121
|
-
top: .1rem;
|
122
120
|
}
|
123
121
|
|
124
122
|
a {
|
125
|
-
display:
|
123
|
+
display: flex;
|
124
|
+
align-items: center;
|
125
|
+
justify-content: center;
|
126
126
|
padding: var(--default-padding);
|
127
127
|
color: var(--color-scheme-text-color);
|
128
128
|
border-top-left-radius: var(--border-radius);
|
@@ -10,7 +10,7 @@
|
|
10
10
|
<!-- begin list of images to slide -->
|
11
11
|
<transition-group name="slide" tag="ul">
|
12
12
|
<li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
|
13
|
-
<a href="#" @click.prevent="showFancyBox(index)">
|
13
|
+
<a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
|
14
14
|
<figure>
|
15
15
|
<figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
|
16
16
|
<img :src="image.srcImageSmall" :alt="image.alt"/>
|
@@ -31,6 +31,10 @@
|
|
31
31
|
</template>
|
32
32
|
|
33
33
|
<script>
|
34
|
+
// import mixins
|
35
|
+
import I18n from "../mixins/I18n"
|
36
|
+
import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
|
37
|
+
|
34
38
|
// import components
|
35
39
|
import CmdSlideButton from "./CmdSlideButton.vue"
|
36
40
|
|
@@ -42,6 +46,10 @@ export default {
|
|
42
46
|
components: {
|
43
47
|
CmdSlideButton
|
44
48
|
},
|
49
|
+
mixins: [
|
50
|
+
I18n,
|
51
|
+
DefaultMessageProperties
|
52
|
+
],
|
45
53
|
data() {
|
46
54
|
return {
|
47
55
|
thumbnails: []
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip"
|
2
|
+
<div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip">
|
3
3
|
<div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
|
4
4
|
<!-- begin CmdHeadline -->
|
5
5
|
<CmdHeadline
|
@@ -0,0 +1,42 @@
|
|
1
|
+
{
|
2
|
+
"modelValue": {
|
3
|
+
"comments": [
|
4
|
+
"set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
|
5
|
+
]
|
6
|
+
},
|
7
|
+
"buttonType": {
|
8
|
+
"comments": [
|
9
|
+
"set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
|
10
|
+
]
|
11
|
+
},
|
12
|
+
"textLegend": {
|
13
|
+
"comments": [
|
14
|
+
"text used as legend for login-fieldset"
|
15
|
+
],
|
16
|
+
"annotations": {
|
17
|
+
"requiredForAccessibility": [
|
18
|
+
"true"
|
19
|
+
]
|
20
|
+
}
|
21
|
+
},
|
22
|
+
"showLegend": {
|
23
|
+
"comments": [
|
24
|
+
"toggle legend visibility"
|
25
|
+
]
|
26
|
+
},
|
27
|
+
"cmdInputGroup": {
|
28
|
+
"comments": [
|
29
|
+
"properties for CmdInputGroup-component"
|
30
|
+
]
|
31
|
+
},
|
32
|
+
"cmdFormElementEmail": {
|
33
|
+
"comments": [
|
34
|
+
"properties for CmdFormElement-component for email-field"
|
35
|
+
]
|
36
|
+
},
|
37
|
+
"cmdFormElementSubmit": {
|
38
|
+
"comments": [
|
39
|
+
"properties for CmdFormElement-component for submit-button"
|
40
|
+
]
|
41
|
+
}
|
42
|
+
}
|
@@ -1,4 +1,9 @@
|
|
1
1
|
{
|
2
|
+
"modelValue": {
|
3
|
+
"comments": [
|
4
|
+
"set default v-model (must be named modelValue in Vue3)"
|
5
|
+
]
|
6
|
+
},
|
2
7
|
"align": {
|
3
8
|
"comments": [
|
4
9
|
"set horizontal alignment"
|
@@ -30,5 +35,24 @@
|
|
30
35
|
"comments": [
|
31
36
|
"activate if page to share is not given by json-data"
|
32
37
|
]
|
38
|
+
},
|
39
|
+
"userMustAcceptDataPrivacy": {
|
40
|
+
"comments": [
|
41
|
+
"toggle if user has to accept that anonymous data will be send while sharing"
|
42
|
+
]
|
43
|
+
},
|
44
|
+
"tooltipAcceptDataPrivacy": {
|
45
|
+
"comments": [
|
46
|
+
"tooltip shown on hovering disabled buttons",
|
47
|
+
"",
|
48
|
+
"userMustAcceptDataPrivacy-property must be activated"
|
49
|
+
]
|
50
|
+
},
|
51
|
+
"cmdFormElement": {
|
52
|
+
"comments": [
|
53
|
+
"properties for cmdFormElement",
|
54
|
+
"",
|
55
|
+
"userMustAcceptDataPrivacy-property must be activated"
|
56
|
+
]
|
33
57
|
}
|
34
58
|
}
|
@@ -215,7 +215,7 @@ export default {
|
|
215
215
|
standardRequirements.push({
|
216
216
|
message: this.getRequirementMessage(),
|
217
217
|
valid(value, attributes) {
|
218
|
-
return (!attributes.required && !inputRequired) || value.length > 0
|
218
|
+
return (!attributes.required && !inputRequired) || (value != null && String(value).length > 0)
|
219
219
|
}
|
220
220
|
})
|
221
221
|
}
|
@@ -249,6 +249,13 @@ export default {
|
|
249
249
|
getRequirementMessage() {
|
250
250
|
return this.getMessage("cmdfieldvalidation.required_field_is_filled")
|
251
251
|
}
|
252
|
+
},
|
253
|
+
watch: {
|
254
|
+
validationStatus: {
|
255
|
+
handler() {
|
256
|
+
this.$emit("validation-status-change", this.validationStatus)
|
257
|
+
}
|
258
|
+
}
|
252
259
|
}
|
253
260
|
}
|
254
261
|
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// import utils
|
2
|
+
import {createHtmlId} from "@/utils/common";
|
3
|
+
|
4
|
+
export default {
|
5
|
+
props: {
|
6
|
+
/**
|
7
|
+
* use as unique id if generated it should not be used
|
8
|
+
*/
|
9
|
+
id: {
|
10
|
+
type: String,
|
11
|
+
required: false
|
12
|
+
}
|
13
|
+
},
|
14
|
+
computed: {
|
15
|
+
htmlId() {
|
16
|
+
return this.id || createHtmlId()
|
17
|
+
}
|
18
|
+
},
|
19
|
+
methods: {
|
20
|
+
buildHtmlId(...params) {
|
21
|
+
return params
|
22
|
+
.map(param => {
|
23
|
+
return param.replace(/\s/g, "")
|
24
|
+
})
|
25
|
+
.join("")
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|