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.
Files changed (31) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +85 -13
  5. package/src/assets/data/main-navigation.json +1 -0
  6. package/src/assets/data/tabs.json +1 -0
  7. package/src/components/CmdBox.vue +12 -7
  8. package/src/components/CmdBoxSiteSearch.vue +2 -1
  9. package/src/components/CmdCookieDisclaimer.vue +19 -6
  10. package/src/components/CmdFakeSelect.vue +11 -19
  11. package/src/components/CmdFancyBox.vue +46 -13
  12. package/src/components/CmdFormElement.vue +17 -29
  13. package/src/components/CmdImageGallery.vue +2 -2
  14. package/src/components/CmdInputGroup.vue +9 -16
  15. package/src/components/CmdLoginForm.vue +1 -1
  16. package/src/components/CmdMainNavigation.vue +6 -6
  17. package/src/components/CmdMultipleSwitch.vue +4 -12
  18. package/src/components/CmdNewsletterSubscription.vue +199 -0
  19. package/src/components/CmdShareButtons.vue +100 -27
  20. package/src/components/CmdSystemMessage.vue +6 -0
  21. package/src/components/CmdTabs.vue +5 -5
  22. package/src/components/CmdThumbnailScroller.vue +9 -1
  23. package/src/components/CmdTooltip.vue +1 -1
  24. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +10 -0
  25. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +0 -5
  26. package/src/documentation/generated/CmdNewsletterSubscriptionPropertyDescriptions.json +42 -0
  27. package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +24 -0
  28. package/src/mixins/CmdThumbnailScroller/DefaultMessageProperties.js +9 -0
  29. package/src/mixins/FieldValidation.js +8 -1
  30. package/src/mixins/Identifier.js +28 -0
  31. 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
- <a v-for="shareButton in validShareButtons"
4
- :key="shareButton.path" class="button"
5
- :id="shareButton.id"
6
- :href="getUrl(shareButton)"
7
- target="_blank"
8
- :title="shareButton.tooltip">
9
- <span v-if="shareButton.iconClass" :class="shareButton.iconClass"></span>
10
- <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
11
- </a>
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
- // if path is not given completely by json-data
67
- if(this.appendPage) {
68
- // if page to share is given by property
69
- if (this.page) {
70
- return shareButton.path + encodeURIComponent(this.page)
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 current page should be append to url
74
- return shareButton.path + encodeURIComponent(location.href)
139
+ // if path is given completely by json-data
140
+ return shareButton.path
75
141
  }
76
-
77
- // if path is given completely by json-data
78
- return shareButton.path
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
- justify-content: flex-end;
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">{{ tab.iconClass }}</span>
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: block;
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" aria-role="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
@@ -58,5 +58,15 @@
58
58
  "true"
59
59
  ]
60
60
  }
61
+ },
62
+ "cmdHeadline": {
63
+ "comments": [
64
+ "properties for CmdHeadline-component"
65
+ ],
66
+ "annotations": {
67
+ "requiredForAccessibility": [
68
+ "true"
69
+ ]
70
+ }
61
71
  }
62
72
  }
@@ -95,11 +95,6 @@
95
95
  "may not be named as 'class' because it is a reserved keyword in JavaScript"
96
96
  ]
97
97
  },
98
- "id": {
99
- "comments": [
100
- "if for native form-element"
101
- ]
102
- },
103
98
  "datalist": {
104
99
  "comments": [
105
100
  "set if a native datalist should be used"
@@ -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
  }
@@ -0,0 +1,9 @@
1
+ export default {
2
+ data() {
3
+ return {
4
+ defaultMessageProperties: {
5
+ "cmdthumbnailscroller.tooltip.open_large_image": "Open large image"
6
+ }
7
+ }
8
+ }
9
+ }
@@ -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
+ }
@@ -12,4 +12,8 @@ function createUuid(){
12
12
  })
13
13
  }
14
14
 
15
- export {isFrameMode, createUuid}
15
+ function createHtmlId() {
16
+ return "cmd-" + createUuid()
17
+ }
18
+
19
+ export {isFrameMode, createUuid, createHtmlId}