comand-component-library 4.0.0 → 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.
Files changed (31) hide show
  1. package/dist/comand-component-library.js +1670 -1603
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/{App.vue → ComponentLibrary.vue} +875 -413
  6. package/src/assets/data/main-navigation.json +2 -0
  7. package/src/components/CmdAddressData.vue +1 -1
  8. package/src/components/CmdBox.vue +40 -4
  9. package/src/components/CmdBoxWrapper.vue +15 -5
  10. package/src/components/CmdFormElement.vue +37 -33
  11. package/src/components/CmdHeadline.vue +97 -33
  12. package/src/components/CmdInputGroup.vue +6 -5
  13. package/src/components/CmdListOfLinks.vue +24 -24
  14. package/src/components/CmdLoginForm.vue +1 -0
  15. package/src/components/CmdMainNavigation.vue +20 -9
  16. package/src/components/CmdMultistepFormProgressBar.vue +43 -1
  17. package/src/components/CmdNewsletterSubscription.vue +7 -7
  18. package/src/components/CmdOpeningHours.vue +33 -18
  19. package/src/components/CmdOpeningHoursItem.vue +21 -13
  20. package/src/components/CmdPagination.vue +2 -2
  21. package/src/components/CmdSidebar.vue +6 -1
  22. package/src/components/CmdSiteHeader.vue +2 -0
  23. package/src/components/CmdSiteSearch.vue +12 -11
  24. package/src/components/CmdSystemMessage.vue +1 -0
  25. package/src/components/CmdTable.vue +9 -1
  26. package/src/components/CmdTextImageBlock.vue +2 -0
  27. package/src/components/CmdThumbnailScroller.vue +52 -32
  28. package/src/components/CmdTooltip.vue +5 -0
  29. package/src/components/CmdUploadForm.vue +67 -41
  30. package/src/components/ComponentSettings.vue +171 -0
  31. package/src/main.js +3 -3
@@ -181,6 +181,15 @@ export default {
181
181
  type: Boolean,
182
182
  default: false
183
183
  },
184
+ /**
185
+ * toggle if overlay over content should be shown if off-canvas is open
186
+ *
187
+ * @affectsStyling: true
188
+ */
189
+ showContentOverlay: {
190
+ type: Boolean,
191
+ default: true
192
+ },
184
193
  /**
185
194
  * list of all navigation-entries (incl. sub-entries)
186
195
  */
@@ -203,6 +212,11 @@ export default {
203
212
  }
204
213
  }
205
214
  },
215
+ /**
216
+ * position for offcanvas-navigation
217
+ *
218
+ * @allowedValues: "right", "left"
219
+ */
206
220
  offcanvasPosition: {
207
221
  type: String,
208
222
  default: "right"
@@ -210,6 +224,8 @@ export default {
210
224
  /**
211
225
  * button to open off-canvas-navigation
212
226
  *
227
+ * (persistOnMobile-property must be false)
228
+ *
213
229
  * @requiredForAccessibility: partial
214
230
  */
215
231
  buttonOffcanvas: {
@@ -235,15 +251,6 @@ export default {
235
251
  subSubentriesIconClass: {
236
252
  type: String,
237
253
  default: "icon-single-arrow-right"
238
- },
239
- /**
240
- * toggle if overlay over content should be shown if off-canvas is open
241
- *
242
- * @affectsStyling: true
243
- */
244
- showContentOverlay: {
245
- type: Boolean,
246
- default: true
247
254
  }
248
255
  },
249
256
  methods: {
@@ -384,6 +391,7 @@ export default {
384
391
  @media only screen and (max-width: $medium-max-width) {
385
392
  .cmd-main-navigation#main-navigation-wrapper {
386
393
  --nav-transition: all .5s linear;
394
+
387
395
  display: flex;
388
396
  background: none; /* overwrite framework-css */
389
397
  border: 0; /* overwrite framework-css */
@@ -401,11 +409,14 @@ export default {
401
409
 
402
410
  &.open-off-canvas {
403
411
  nav {
412
+ height: 100%;
413
+ background: var(--default-background);
404
414
  left: 0;
405
415
  opacity: 1;
406
416
  padding: 0 !important;
407
417
  transition: var(--nav-transition);
408
418
  border-right: var(--default-border);
419
+ display: block;
409
420
  }
410
421
 
411
422
  &.show-content-overlay {
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <ol class="cmd-multistep-form-progress-bar">
2
+ <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
3
3
  <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
4
4
  <!-- begin type === href -->
5
5
  <a v-if="step.type === 'href'"
@@ -86,6 +86,10 @@ export default {
86
86
  default() {
87
87
  return "icon-single-arrow-right"
88
88
  }
89
+ },
90
+ useGap: {
91
+ type: Boolean,
92
+ default: true
89
93
  }
90
94
  },
91
95
  methods: {
@@ -108,6 +112,34 @@ export default {
108
112
  justify-content: space-around;
109
113
  border: var(--default-border);
110
114
  margin: 0;
115
+ border-radius: var(--default-border-radius);
116
+
117
+ &.use-gap {
118
+ border: 0;
119
+ gap: var(--default-gap);
120
+
121
+ li {
122
+ border: var(--default-border) !important;
123
+ border-radius: var(--default-border-radius);;
124
+
125
+ a, a.active {
126
+ border: 0;
127
+ border-radius: inherit;
128
+
129
+ :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
130
+ border: 0;
131
+ right: -1rem;
132
+ background: none;
133
+ }
134
+ }
135
+
136
+ a {
137
+ :is(span, [class*="icon-"]) + [class*="icon-"]:last-child {
138
+ color: var(--default-text-color) !important;
139
+ }
140
+ }
141
+ }
142
+ }
111
143
 
112
144
  li {
113
145
  display: flex;
@@ -115,6 +147,16 @@ export default {
115
147
  list-style-type: none;
116
148
  margin: 0;
117
149
 
150
+ &:first-child, &:first-child > a {
151
+ border-top-left-radius: inherit;
152
+ border-bottom-left-radius: inherit;
153
+ }
154
+
155
+ &:last-child, &:last-child > a {
156
+ border-top-right-radius: inherit;
157
+ border-bottom-right-radius: inherit;
158
+ }
159
+
118
160
  a {
119
161
  display: flex;
120
162
  text-decoration: none;
@@ -71,6 +71,13 @@ export default {
71
71
  return value === "submit" || value === "button"
72
72
  }
73
73
  },
74
+ /**
75
+ * toggle legend visibility
76
+ */
77
+ showLegend: {
78
+ type: Boolean,
79
+ default: true
80
+ },
74
81
  /**
75
82
  * text used as legend for login-fieldset
76
83
  *
@@ -80,13 +87,6 @@ export default {
80
87
  type: String,
81
88
  default: "Stay up-to-date"
82
89
  },
83
- /**
84
- * toggle legend visibility
85
- */
86
- showLegend: {
87
- type: Boolean,
88
- default: true
89
- },
90
90
  /**
91
91
  * properties for CmdInputGroup-component
92
92
  */
@@ -55,7 +55,8 @@
55
55
  :key="index"
56
56
  :day="day"
57
57
  :separator="separator"
58
- :abbreviationText="abbreviationText"
58
+ :abbreviationTextAm="abbreviationTextAm"
59
+ :abbreviationTextPm="abbreviationTextPm"
59
60
  />
60
61
  </dl>
61
62
  <!-- end default view -->
@@ -82,7 +83,8 @@
82
83
  <CmdOpeningHoursItem
83
84
  :day="day"
84
85
  :separator="separator"
85
- :abbreviationText="abbreviationText"
86
+ :abbreviationTextAm="abbreviationTextAm"
87
+ :abbreviationTextPm="abbreviationTextPm"
86
88
  />
87
89
  </dl>
88
90
  </EditComponentWrapper>
@@ -168,13 +170,6 @@ export default {
168
170
  }
169
171
  },
170
172
  props: {
171
- /**
172
- * set a link to a detail page
173
- */
174
- link: {
175
- type: Object,
176
- required: false
177
- },
178
173
  /**
179
174
  * toggles if "closed"-text will be shown
180
175
  *
@@ -184,6 +179,13 @@ export default {
184
179
  type: Boolean,
185
180
  default: false
186
181
  },
182
+ /**
183
+ * set a link to a detail page
184
+ */
185
+ link: {
186
+ type: Object,
187
+ required: false
188
+ },
187
189
  /**
188
190
  * text for 'open'-information
189
191
  */
@@ -198,13 +200,26 @@ export default {
198
200
  type: String,
199
201
  default: "Closed right now!"
200
202
  },
203
+ /**
204
+ * separator between time-spans
205
+ */
201
206
  separator: {
202
207
  type: String,
203
208
  default: "–"
204
209
  },
205
- abbreviationText: {
210
+ /**
211
+ * abbreviation (behind time) for morning
212
+ */
213
+ abbreviationTextAm: {
214
+ type: String,
215
+ default: "am"
216
+ },
217
+ /**
218
+ * abbreviation (behind time) for afternoon
219
+ */
220
+ abbreviationTextPm: {
206
221
  type: String,
207
- default: "h"
222
+ default: "pm"
208
223
  },
209
224
  /**
210
225
  * list of opening-hours
@@ -227,13 +242,6 @@ export default {
227
242
  type: String,
228
243
  required: false
229
244
  },
230
- /**
231
- * properties for CmdHeadline-component
232
- */
233
- cmdHeadline: {
234
- type: Object,
235
- required: false
236
- },
237
245
  /**
238
246
  * option to set custom time format by function
239
247
  */
@@ -254,6 +262,13 @@ export default {
254
262
  checkInterval: {
255
263
  type: Number,
256
264
  default: 5000
265
+ },
266
+ /**
267
+ * properties for CmdHeadline-component
268
+ */
269
+ cmdHeadline: {
270
+ type: Object,
271
+ required: false
257
272
  }
258
273
  },
259
274
  mounted() {
@@ -5,17 +5,11 @@
5
5
  <dd>
6
6
  <span v-if="day.am" class="am">
7
7
  <template v-if="day.am.displayText">{{ day.am.displayText }}</template>
8
- <template
9
- v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
10
- getTime(day.am.tillTime)
11
- }}</template>
8
+ <template v-else>{{ getTime(day.am.fromTime, abbreviationTextAm) }} {{ separator }} {{getTime(day.am.tillTime)}}</template>
12
9
  </span>
13
10
  <span v-if="day.pm" class="pm">
14
11
  <template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
15
- <template
16
- v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
17
- getTime(day.pm.tillTime)
18
- }}</template>
12
+ <template v-else>{{ getTime(day.pm.fromTime, abbreviationTextPm) }} {{ separator }} {{getTime(day.pm.tillTime)}}</template>
19
13
  </span>
20
14
  </dd>
21
15
  </template>
@@ -178,11 +172,18 @@ export default {
178
172
  default: "–"
179
173
  },
180
174
  /**
181
- * abbreviation text for 'hours' (as a unit after displayed times)
175
+ * abbreviation (behind time) for morning
182
176
  */
183
- abbreviationText: {
177
+ abbreviationTextAm: {
184
178
  type: String,
185
- default: "h"
179
+ default: "am"
180
+ },
181
+ /**
182
+ * abbreviation (behind time) for afternoon
183
+ */
184
+ abbreviationTextPm: {
185
+ type: String,
186
+ default: "pm"
186
187
  },
187
188
  /**
188
189
  * option to set custom time format by function
@@ -196,11 +197,14 @@ export default {
196
197
  toggleClosedStatus(period) {
197
198
  period === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
198
199
  },
199
- getTime(time) {
200
+ getTime(time, suffix) {
200
201
  if (this.timeFormatter) {
201
202
  return this.timeFormatter(time.hours, time.mins)
202
203
  }
203
- return timeFormatting(":", " " + this.abbreviationText, "", false)(time.hours, time.mins)
204
+
205
+ console.log("suffix", suffix)
206
+
207
+ return timeFormatting(":", " " + this.abbreviationTextAm, " " + this.abbreviationTextPm, false)(time.hours, time.mins)
204
208
  },
205
209
  updateHandlerProvider() {
206
210
  const data = this.editableDay
@@ -248,6 +252,10 @@ export default {
248
252
 
249
253
  <style>
250
254
  .edit-mode-opening-hours-item {
255
+ dt {
256
+ min-width: 3ch;
257
+ }
258
+
251
259
  .am-wrapper, .pm-wrapper {
252
260
  align-items: center;
253
261
  gap: calc(var(--default-gap) / 2);
@@ -18,12 +18,12 @@
18
18
  <div class="page-index">
19
19
  <div class="flex-container">
20
20
  <a :href="getHref(page)"
21
- :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button'}"
21
+ :class="{'disabled': currentPage === index + 1, 'button': linkType === 'button', 'hidden': !showPageNumbers}"
22
22
  :title="currentPage !== index + 1 ? getMessage('cmdpager.tooltip.go_to_page', index + 1) : getMessage('cmdpager.tooltip.not_possible')"
23
23
  v-for="(page, index) in pages"
24
24
  :key="index"
25
25
  @click.stop.prevent="showPage(page)" aria-live="polite">
26
- <span :class="{hidden: !showPageNumbers}">{{ index + 1 }}</span>
26
+ <span>{{ index + 1 }}</span>
27
27
  </a>
28
28
  </div>
29
29
  </div>
@@ -136,6 +136,11 @@ export default {
136
136
  grid-template-columns: repeat(1, minmax(0, 1fr));
137
137
  }
138
138
 
139
+ .cmd-box {
140
+ border-left: 0;
141
+ border-right: 0;
142
+ }
143
+
139
144
  .inner-sidebar-wrapper {
140
145
  flex: 1;
141
146
  display: flex;
@@ -162,9 +167,9 @@ export default {
162
167
 
163
168
  &.collapse-to-right {
164
169
  flex-direction: row-reverse;
170
+ border-right: 0;
165
171
 
166
172
  > a {
167
- border-left: 0;
168
173
  border-right: var(--default-border);
169
174
  }
170
175
  }
@@ -35,6 +35,7 @@
35
35
  v-if="cmdMainNavigation?.navigationEntries?.length && navigationInline"
36
36
  :navigationEntries="cmdMainNavigation.navigationEntries"
37
37
  :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
38
+ :stretchMainItems="cmdMainNavigation.stretchMainItems"
38
39
  :closeOffcanvas="closeOffcanvas"
39
40
  @offcanvas="emitOffcanvasStatus"
40
41
  />
@@ -49,6 +50,7 @@
49
50
  :navigationEntries="cmdMainNavigation.navigationEntries"
50
51
  :offcanvasPosition="cmdMainNavigation.offcanvasPosition"
51
52
  :closeOffcanvas="closeOffcanvas"
53
+ :stretchMainItems="cmdMainNavigation.stretchMainItems"
52
54
  @offcanvas="emitOffcanvasStatus"
53
55
  />
54
56
  <!-- end CmdMainNavigation -->
@@ -69,7 +69,7 @@
69
69
  <!-- end form-elements -->
70
70
 
71
71
  <!-- begin filters -->
72
- <template v-if="cmdFakeSelect?.show">
72
+ <template v-if="useFilters">
73
73
  <a href="#" @click.prevent="showFilters = !showFilters">
74
74
  <!-- begin CmdIcon -->
75
75
  <CmdIcon
@@ -97,8 +97,9 @@
97
97
  </template>
98
98
  <!-- end filters -->
99
99
  </fieldset>
100
+
100
101
  <!-- begin CmdFormFilters -->
101
- <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
102
+ <CmdFormFilters v-if="useFilters" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
102
103
  <!-- end CmdFormFilters -->
103
104
  </template>
104
105
 
@@ -158,15 +159,6 @@ export default {
158
159
  type: Boolean,
159
160
  default: true
160
161
  },
161
- /**
162
- * text for legend
163
- *
164
- * @requiredForAccessibility: true
165
- */
166
- textLegend: {
167
- type: String,
168
- required: false
169
- },
170
162
  /**
171
163
  * toggle legend visibility
172
164
  *
@@ -176,6 +168,15 @@ export default {
176
168
  type: Boolean,
177
169
  default: true
178
170
  },
171
+ /**
172
+ * text for legend
173
+ *
174
+ * @requiredForAccessibility: true
175
+ */
176
+ textLegend: {
177
+ type: String,
178
+ required: false
179
+ },
179
180
  /**
180
181
  * send search result from outside to display inside this component
181
182
  */
@@ -133,6 +133,7 @@ export default {
133
133
  <style>
134
134
  /* begin cmd-system-message ---------------------------------------------------------------------------------------- */
135
135
  .cmd-system-message {
136
+ display: inline-flex;
136
137
  margin: var(--default-margin) 0;
137
138
  align-items: center;
138
139
 
@@ -83,7 +83,7 @@ export default {
83
83
  data() {
84
84
  return {
85
85
  showTableData: true,
86
- fullWidth: this.fullWidthOnDefault,
86
+ fullWidth: false,
87
87
  hasOverflow: false
88
88
  }
89
89
  },
@@ -258,6 +258,14 @@ export default {
258
258
  // this.$refs.table.previousElementSibling.style.right = `${newLeft}px`;
259
259
  }
260
260
 
261
+ },
262
+ watch: {
263
+ fullWidthOnDefault: {
264
+ handler() {
265
+ this.fullWidth = this.fullWidthOnDefault
266
+ },
267
+ immediate: true
268
+ }
261
269
  }
262
270
  }
263
271
  </script>
@@ -78,6 +78,8 @@ export default {
78
78
  },
79
79
  /**
80
80
  * text-alignment for paragraph/continuous text
81
+ *
82
+ * @allowedValues: "left", "center", "right"
81
83
  */
82
84
  paragraphTextAlign: {
83
85
  type: String,
@@ -27,10 +27,10 @@
27
27
 
28
28
  <!-- begin list of images to slide -->
29
29
  <transition-group name="slide" tag="ul">
30
- <li v-for="(item, index) in items" :key="index"
31
- :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']">
30
+ <li v-for="(item, index) in items" :key="index">
32
31
  <a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
33
32
  @click="executeLink(index, $event)"
33
+ :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']"
34
34
  :title="tooltip"
35
35
  :target="executeOnClick === 'url' ? '_blank' : null"
36
36
  >
@@ -117,6 +117,11 @@ export default {
117
117
  }
118
118
  },
119
119
  props: {
120
+ /**
121
+ * orientation for scroller
122
+ *
123
+ * @allewedValues: "horizontal", "vertical"
124
+ */
120
125
  orientation: {
121
126
  type: String,
122
127
  default: "horizontal"
@@ -397,22 +402,39 @@ export default {
397
402
  margin-top: 2rem;
398
403
  flex: none; /* avoids items to shrink to small on small screens */
399
404
 
400
- a {
401
- text-align: center;
402
- }
403
-
404
405
  img {
405
406
  border-radius: var(--border-radius);
406
407
  min-width: 15rem;
407
408
  max-height: 10rem;
408
409
  }
409
410
 
410
- &.active {
411
- a {
411
+ a {
412
+ display: block;
413
+ text-align: center;
414
+
415
+ &.active {
416
+ color: var(--pure-white);
417
+
418
+ span, span[class*="icon"] {
419
+ color: inherit
420
+ }
421
+
412
422
  figcaption {
413
423
  opacity: 1;
414
424
  }
415
425
  }
426
+
427
+ &:has(img) {
428
+ padding: 0;
429
+ }
430
+
431
+ &:hover, &:active, &:focus {
432
+ &.active {
433
+ figcaption {
434
+ color: var(--hyperlink-color);
435
+ }
436
+ }
437
+ }
416
438
  }
417
439
 
418
440
  .image-wrapper {
@@ -468,38 +490,36 @@ export default {
468
490
  a {
469
491
  color: var(--color-scheme-text-color);
470
492
  text-decoration: none;
471
- }
472
493
 
473
- &.active {
474
- img {
475
- border-color: var(--primary-color);
476
- }
494
+ &.active {
495
+ img {
496
+ border-color: var(--primary-color);
497
+ }
477
498
 
478
- figcaption {
479
- color: var(--primary-color);
499
+ figcaption {
500
+ color: var(--primary-color);
501
+ }
480
502
  }
481
- }
482
503
 
483
- &:not(.active) {
484
- img {
485
- border: var(--default-border);
486
- opacity: var(--reduced-opacity);
487
- }
504
+ &:not(.active) {
505
+ img {
506
+ border: var(--default-border);
507
+ opacity: var(--reduced-opacity);
508
+ }
488
509
 
489
- figcaption {
490
- text-decoration: none;
510
+ figcaption {
511
+ text-decoration: none;
512
+ }
491
513
  }
492
514
 
493
- a {
494
- &:hover, &:active, &:focus {
495
- figcaption {
496
- color: var(--primary-color);
497
- }
515
+ &:hover, &:active, &:focus {
516
+ figcaption {
517
+ color: var(--primary-color);
518
+ }
498
519
 
499
- img {
500
- border-color: var(--primary-color);
501
- opacity: 1;
502
- }
520
+ img {
521
+ border-color: var(--primary-color);
522
+ opacity: 1;
503
523
  }
504
524
  }
505
525
  }
@@ -101,6 +101,8 @@ export default {
101
101
  }
102
102
  },
103
103
  mounted() {
104
+ window.addEventListener('scroll', this.hideOnScroll);
105
+
104
106
  if(this.relatedId) {
105
107
  const relatedElement = document.getElementById(this.relatedId)
106
108
 
@@ -118,6 +120,9 @@ export default {
118
120
  }
119
121
  },
120
122
  methods: {
123
+ hideOnScroll() {
124
+ this.tooltipVisibility = true
125
+ },
121
126
  toggleTooltipVisibility(event) {
122
127
  this.getPointerPosition(event)
123
128
  this.tooltipVisibility = !this.tooltipVisibility