comand-component-library 4.0.6 → 4.0.8

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 (37) hide show
  1. package/dist/comand-component-library.js +2542 -2407
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +106 -32
  6. package/src/assets/data/list-of-links.json +13 -1
  7. package/src/assets/data/pages/list-of-downloads.json +56 -0
  8. package/src/assets/data/pages/list-of-site-links.json +78 -0
  9. package/src/assets/data/social-networks-page-by-json.json +2 -2
  10. package/src/assets/styles/component-library-global-styles.scss +12 -0
  11. package/src/componentSettingsDataAndControls.vue +39 -6
  12. package/src/components/CmdFakeSelect.vue +16 -23
  13. package/src/components/CmdFancyBox.vue +1 -0
  14. package/src/components/CmdForm.vue +7 -2
  15. package/src/components/CmdFormElement.vue +12 -3
  16. package/src/components/CmdInputGroup.vue +6 -4
  17. package/src/components/CmdListOfLinks.vue +72 -12
  18. package/src/components/CmdListOfLinksItem.vue +14 -3
  19. package/src/components/CmdPageFooter.vue +83 -0
  20. package/src/components/CmdPagination.vue +4 -4
  21. package/src/components/CmdSidebar.vue +2 -1
  22. package/src/components/CmdSocialNetworks.vue +34 -22
  23. package/src/components/CmdSocialNetworksItem.vue +1 -1
  24. package/src/components/CmdSwitchLanguage.vue +3 -1
  25. package/src/components/CmdTextImageBlock.vue +44 -15
  26. package/src/components/CmdThumbnailScroller.vue +3 -2
  27. package/src/components/CmdUploadForm.vue +78 -64
  28. package/src/components/CmdWidthLimitationWrapper.vue +27 -6
  29. package/src/components/EditComponentWrapper.vue +77 -17
  30. package/src/index.js +2 -1
  31. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
  32. package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
  33. package/src/pages/BasicForm.vue +341 -0
  34. package/src/pages/PageOverview.vue +53 -0
  35. package/src/pages/PageWrapper.vue +260 -0
  36. package/src/pages/SegmentedListsOfLinks.vue +34 -0
  37. /package/src/mixins/{CmdPager → CmdPagination}/DefaultMessageProperties.js +0 -0
@@ -24,7 +24,8 @@
24
24
  </CmdSystemMessage>
25
25
  <!-- end CmdSystemMessage -->
26
26
 
27
- <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
27
+ <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]"
28
+ v-on="dragAndDropHandler">
28
29
  <template v-if="!listOfFiles.length">
29
30
  <!-- begin CmdHeadline -->
30
31
  <CmdHeadline v-if="allowMultipleFileUploads" v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
@@ -35,7 +36,8 @@
35
36
 
36
37
  <!-- begin total-upload information -->
37
38
  <div v-else class="flex-container vertical">
38
- <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
39
+ <div v-if="showTotalUpload && listOfFiles.length !== 1"
40
+ class="flex-container vertical list-files-wrapper">
39
41
  <!-- begin CmdHeadline -->
40
42
  <CmdHeadline v-bind="cmdHeadlineSummaryOfAllFiles" headlineLevel="4">
41
43
  {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
@@ -50,7 +52,7 @@
50
52
  @click.prevent="cancelUpload"
51
53
  >
52
54
  <!-- begin CmdIcon -->
53
- <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass" />
55
+ <CmdIcon :iconClass="deleteIcon.iconClass" :type="deleteIcon.iconClass"/>
54
56
  <!-- end CmdIcon -->
55
57
  </a>
56
58
  <span>
@@ -103,7 +105,7 @@
103
105
  @click.prevent="removeFile(index)"
104
106
  >
105
107
  <!-- begin CmdIcon -->
106
- <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
108
+ <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType"/>
107
109
  <!-- end CmdIcon -->
108
110
  </a>
109
111
  <span
@@ -143,61 +145,65 @@
143
145
  <!-- end list of selected files -->
144
146
 
145
147
  <!-- begin upload conditions -->
146
- <!-- begin CmdHeadline -->
147
- <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
148
- {{ getMessage("cmduploadform.headline.select_additional_files") }}
149
- </CmdHeadline>
150
- <!-- end CmdHeadline -->
151
-
152
- <!-- begin CmdHeadline -->
153
- <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile" headlineLevel="4">
154
- {{ getMessage("cmduploadform.headline.select_new_file") }}
155
- </CmdHeadline>
156
- <!-- end CmdHeadline -->
157
-
158
- <dl class="small">
159
- <template v-if="maxTotalUploadSize > 0">
160
- <dt :class="{ error: totalSize > maxTotalUploadSize }">
161
- {{ getMessage("cmduploadform.max_total_upload_size") }}
148
+ <div class="upload-conditions">
149
+ <!-- begin CmdHeadline -->
150
+ <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length"
151
+ v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
152
+ {{ getMessage("cmduploadform.headline.select_additional_files") }}
153
+ </CmdHeadline>
154
+ <!-- end CmdHeadline -->
155
+
156
+ <!-- begin CmdHeadline -->
157
+ <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile"
158
+ headlineLevel="4">
159
+ {{ getMessage("cmduploadform.headline.select_new_file") }}
160
+ </CmdHeadline>
161
+ <!-- end CmdHeadline -->
162
+
163
+ <dl class="small">
164
+ <template v-if="maxTotalUploadSize > 0">
165
+ <dt :class="{ error: totalSize > maxTotalUploadSize }">
166
+ {{ getMessage("cmduploadform.max_total_upload_size") }}
167
+ </dt>
168
+ <dd :class="['text-align-right', { error: totalSize > maxTotalUploadSize }]">
169
+ {{ formatSize(maxTotalUploadSize) }}
170
+ </dd>
171
+ </template>
172
+ <dt :class="{ error: errors.fileSize }">
173
+ {{ getMessage("cmduploadform.max_file_upload_size") }}
162
174
  </dt>
163
- <dd :class="['text-align-right', { error: totalSize > maxTotalUploadSize }]">
164
- {{ formatSize(maxTotalUploadSize) }}
175
+ <dd :class="['text-align-right', { error: errors.fileSize }]">
176
+ {{ formatSize(maxFileUploadSize) }}
165
177
  </dd>
166
- </template>
167
- <dt :class="{ error: errors.fileSize }">
168
- {{ getMessage("cmduploadform.max_file_upload_size") }}
169
- </dt>
170
- <dd :class="['text-align-right', { error: errors.fileSize }]">
171
- {{ formatSize(maxFileUploadSize) }}
172
- </dd>
173
- <dt :class="{ error: errors.fileType }">
174
- {{ getMessage("cmduploadform.allowed_file_types") }}
175
- </dt>
176
- <dd>
177
- <a
178
- href="#"
179
- @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
180
- :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')">
181
- <!-- begin CmdIcon -->
182
- <CmdIcon
183
- :iconClass="showListOfFileExtensions ? iconInvisible.iconClass : iconVisible.iconClass"
184
- :type="showListOfFileExtensions ? iconInvisible.iconType : iconVisible.iconType"
185
- />
186
- <!-- end CmdIcon -->
187
- </a>
188
- <transition name="fade">
189
- <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
190
- <li
191
- v-for="(fileExtension, index) in allowedFileExtensions"
192
- :key="index"
193
- :class="{ error: errors.fileType }"
194
- >
195
- {{ fileExtension }}
196
- </li>
197
- </ul>
198
- </transition>
199
- </dd>
200
- </dl>
178
+ <dt :class="{ error: errors.fileType }">
179
+ {{ getMessage("cmduploadform.allowed_file_types") }}
180
+ </dt>
181
+ <dd>
182
+ <a
183
+ href="#"
184
+ @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
185
+ :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')">
186
+ <!-- begin CmdIcon -->
187
+ <CmdIcon
188
+ :iconClass="showListOfFileExtensions ? iconInvisible.iconClass : iconVisible.iconClass"
189
+ :type="showListOfFileExtensions ? iconInvisible.iconType : iconVisible.iconType"
190
+ />
191
+ <!-- end CmdIcon -->
192
+ </a>
193
+ <transition name="fade">
194
+ <ul v-if="showListOfFileExtensions" class="list-of-file-extensions">
195
+ <li
196
+ v-for="(fileExtension, index) in allowedFileExtensions"
197
+ :key="index"
198
+ :class="{ error: errors.fileType }"
199
+ >
200
+ {{ fileExtension }}
201
+ </li>
202
+ </ul>
203
+ </transition>
204
+ </dd>
205
+ </dl>
206
+ </div>
201
207
  <!-- end upload conditions -->
202
208
 
203
209
  <!-- begin upload-button and drag-and-drop-text -->
@@ -209,7 +215,7 @@
209
215
  @click="selectFiles()"
210
216
  >
211
217
  <!-- begin CmdIcon -->
212
- <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
218
+ <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType"/>
213
219
  <!-- end CmdIcon -->
214
220
  <span v-if="allowMultipleFileUploads">{{
215
221
  getMessage("cmduploadform.labeltext.select_files")
@@ -265,7 +271,7 @@
265
271
  @click="uploadFiles"
266
272
  >
267
273
  <!-- begin CmdIcon -->
268
- <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType" />
274
+ <CmdIcon :iconClass="iconUpload.iconClass" :type="iconUpload.iconType"/>
269
275
  <!-- end CmdIcon -->
270
276
  <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
271
277
  {{ getMessage("cmduploadform.buttontext.upload_file") }}
@@ -274,7 +280,7 @@
274
280
  </button>
275
281
  <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
276
282
  <!-- begin CmdIcon -->
277
- <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType" />
283
+ <CmdIcon :iconClass="iconCancel.iconClass" :type="iconCancel.iconType"/>
278
284
  <!-- end CmdIcon -->
279
285
  <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
280
286
  </button>
@@ -283,7 +289,9 @@
283
289
  <!-- end advanced mode -->
284
290
 
285
291
  <!-- begin simple mode -->
286
- <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
292
+ <a v-else href="#" @click.prevent="selectFiles"
293
+ :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]"
294
+ v-on="dragAndDropHandler">
287
295
  <!-- begin progressbar -->
288
296
  <span class="progressbar" v-if="uploadInitiated">
289
297
  <span>{{ getPercentage(totalUploadProgress) }}</span>
@@ -301,20 +309,20 @@
301
309
  <template v-if="fileTypeImage">
302
310
  <span>{{ getMessage("cmduploadform.select_image") }}</span>
303
311
  <!-- begin CmdIcon -->
304
- <CmdIcon :iconClass="iconImage.iconClass" :type="iconImage.iconType" />
312
+ <CmdIcon :iconClass="iconImage.iconClass" :type="iconImage.iconType"/>
305
313
  <!-- end CmdIcon -->
306
314
  </template>
307
315
  <template v-else>
308
316
  <span>{{ getMessage("cmduploadform.select_file") }}</span>
309
317
  <!-- begin CmdIcon -->
310
- <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType" />
318
+ <CmdIcon :iconClass="iconFileUpload.iconClass" :type="iconFileUpload.iconType"/>
311
319
  <!-- end CmdIcon -->
312
320
  </template>
313
321
  </template>
314
322
  <template v-else>
315
323
  <span>{{ getMessage("cmduploadform.drag_and_drop_file_here") }}</span>
316
324
  <!-- begin CmdIcon -->
317
- <CmdIcon :iconClass="iconDragAndDrop.iconClass" :type="iconDragAndDrop.iconType" />
325
+ <CmdIcon :iconClass="iconDragAndDrop.iconClass" :type="iconDragAndDrop.iconType"/>
318
326
  <!-- end CmdIcon -->
319
327
  </template>
320
328
  <small>{{ getMessage("cmduploadform.max_upload_size") }} {{ formatSize(maxFileUploadSize) }}</small>
@@ -1187,6 +1195,12 @@ export default {
1187
1195
  }
1188
1196
  }
1189
1197
 
1198
+ .upload-conditions {
1199
+ .cmd-headline > * {
1200
+ text-align: center;
1201
+ }
1202
+ }
1203
+
1190
1204
  p {
1191
1205
  &.text-drag-and-drop {
1192
1206
  &.disabled {
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
3
3
  <!-- begin slot-content in section -->
4
- <section v-if="innerWrapper" :class="setInnerClass" :id="anchorId">
4
+ <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
5
5
  <!-- begin cmd-headline -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadline"
@@ -11,9 +11,19 @@
11
11
  />
12
12
  <!-- end cmd-headline -->
13
13
 
14
- <!-- begin slot-content -->
15
- <slot></slot>
16
- <!-- end slot-content -->
14
+ <!-- begin slot-content (one column only) -->
15
+ <slot v-if="numberOfColumns === 1" ></slot>
16
+ <!-- end slot-content (one column only) -->
17
+
18
+ <!-- begin grid-/flex-container to wrap multiple columns/items -->
19
+ <div v-else :class="useGrid ? 'grid-container-create-columns' : 'flex-container'">
20
+ <div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
21
+ <!-- begin slot-content (multiple columns only) -->
22
+ <slot></slot>
23
+ <!-- end slot-content (multiple columns only) -->
24
+ </div>
25
+ </div>
26
+ <!-- end grid-/flex-container to wrap multiple columns/items -->
17
27
  </section>
18
28
  <!-- end slot-content in section -->
19
29
 
@@ -32,6 +42,17 @@
32
42
  export default {
33
43
  name: "CmdWidthLimitationWrapper",
34
44
  props: {
45
+ numberOfColumns: {
46
+ type: Number,
47
+ default: 1,
48
+ validator(value) {
49
+ return value >= 0
50
+ }
51
+ },
52
+ useGrid: {
53
+ type: Boolean,
54
+ default: false
55
+ },
35
56
  /**
36
57
  * set a html-tag as inner tag
37
58
  *
@@ -41,7 +62,7 @@ export default {
41
62
  type: String,
42
63
  default: "section",
43
64
  validator(value) {
44
- return value;
65
+ return value
45
66
  }
46
67
  },
47
68
  /**
@@ -50,7 +71,7 @@ export default {
50
71
  * (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
51
72
  *
52
73
  */
53
- innerWrapper: {
74
+ useInnerSection: {
54
75
  type: Boolean,
55
76
  default: true
56
77
  },
@@ -376,21 +376,34 @@ function buildComponentPath(component) {
376
376
 
377
377
  display: block;
378
378
 
379
+ label {
380
+ &.text-center input {
381
+ text-align: center;
382
+ }
383
+
384
+ &.edit-mode input, select, .cmd-fake-select {
385
+ padding: 0;
386
+ height: auto;
387
+ min-height: calc(var(--input-height) / 2);
388
+ }
389
+ }
390
+
391
+ [data-component="CmdSlideshow"] {
392
+ top: 1.8rem;
393
+ right: 5.3rem;
394
+ }
395
+
379
396
  &.highlight {
380
397
  border-color: var(--hyperlink-color-highlighted);
381
398
  border-style: dotted;
382
399
  }
383
400
 
384
- .cmd-headline {
385
- margin: 0;
386
- }
387
-
388
401
  .component-name {
389
402
  display: none;
390
403
  position: absolute;
391
404
  left: auto;
392
405
  right: 8rem;
393
- font-size: 1rem;
406
+ font-size: 1.1rem;
394
407
  font-style: italic;
395
408
  z-index: 1;
396
409
  padding: .2rem 2rem .2rem .5rem;
@@ -398,15 +411,6 @@ function buildComponentPath(component) {
398
411
  margin: 0;
399
412
  }
400
413
 
401
- &.active {
402
- border-color: var(--pure-white);
403
- min-height: 2.5rem;
404
-
405
- .component-name {
406
- display: block;
407
- }
408
- }
409
-
410
414
  .action-buttons {
411
415
  --action-buttons-size: 3.6rem;
412
416
 
@@ -456,8 +460,10 @@ function buildComponentPath(component) {
456
460
  left: 0;
457
461
  right: auto; /* avoids container to be stretched */
458
462
  flex-wrap: nowrap;
463
+ border: var(--default-border);
464
+ border-color: var(--pure-white);
459
465
  border-bottom: 0;
460
- backdrop-filter: var(--primary-color);
466
+ background: var(--pure-white);
461
467
  border-radius: var(--default-border-radius);
462
468
 
463
469
  li {
@@ -504,20 +510,74 @@ function buildComponentPath(component) {
504
510
  top: 0;
505
511
  left: 0;
506
512
  transform: none;
513
+
514
+ &::before {
515
+ color: var(--hyperlink-color)
516
+ }
507
517
  }
508
518
 
509
519
  &.primary {
510
520
  background: var(--primary-color);
511
521
  }
522
+
523
+ &:hover, &:active, &:focus {
524
+ span[class*="icon-"] {
525
+ &::before {
526
+ color: var(--hyperlink-color-highlighted)
527
+ }
528
+ }
529
+ }
512
530
  }
513
531
  }
514
532
  }
515
533
 
516
534
  &.active {
517
- //width: 100%; /* stretch inside flex-container */
518
- background: var(--pure-white);
535
+ background: hsla(0, 0%, 100%, .2);
536
+ }
537
+ }
538
+
539
+ &.active {
540
+ //width: 100%; /* stretch inside flex-container */
541
+ background: var(--pure-white);
542
+ border-color: var(--pure-white);
543
+ min-height: 2.5rem;
544
+
545
+ .component-name {
546
+ display: block;
547
+ }
548
+
549
+ label {
550
+ &.cmd-form-element {
551
+ :is(input[type="checkbox"], input[type="radio"]):checked {
552
+ & ~ .label-text span {
553
+ color: var(--pure-white);
554
+ }
555
+ }
556
+ }
557
+ }
558
+ }
559
+
560
+ /* begin edit-mode-styles for specific components */
561
+ .cmd-headline {
562
+ margin: 0;
563
+ }
564
+
565
+ .cmd-thumbnail-scroller {
566
+ .inner-thumbnail-wrapper > ul > li {
567
+ align-self: flex-start;
568
+ }
569
+
570
+ .cmd-image .drop-area span[class*="icon"] {
571
+ font-size: 5rem;
572
+ }
573
+ }
574
+
575
+ .cmd-image {
576
+ input {
577
+ width: 5rem;
519
578
  }
520
579
  }
580
+ /* end edit-mode-styles for specific components */
521
581
 
522
582
  // begin component-level only
523
583
  &:not(.edit-items) {
package/src/index.js CHANGED
@@ -26,7 +26,8 @@ export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
26
26
  export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
27
27
  export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'
28
28
  export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
29
- export { default as CmdPager } from '@/components/CmdPagination.vue'
29
+ export { default as CmdPagination } from '@/components/CmdPagination.vue'
30
+ export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
30
31
  export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
31
32
  export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
32
33
  export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
@@ -7,7 +7,6 @@ export default {
7
7
  "cmdfakeselect.linktext.select_all_options": "Select all options",
8
8
  "cmdfakeselect.headline.an_option_is_selected": "An option is selected",
9
9
  "cmdfakeselect.option.options_selected": "{0} options selected"
10
-
11
10
  }
12
11
  }
13
12
  }
@@ -0,0 +1,28 @@
1
+ export default {
2
+ data() {
3
+ return {
4
+ defaultMessageProperties: {
5
+ "basic_form.legend": "Basic Form",
6
+ "basic_form.labeltext.salutation_male": "Mr.",
7
+ "basic_form.labeltext.salutation_female": "Mrs.",
8
+ "basic_form.labeltext.last_name": "Last name:",
9
+ "basic_form.placeholder.last_name": "Last name:",
10
+ "basic_form.labeltext.first_name": "First name:",
11
+ "basic_form.placeholder.first_name": "First name:",
12
+ "basic_form.labeltext.email": "Email:",
13
+ "basic_form.placeholder.email": "Email:",
14
+ "basic_form.labeltext.phone": "Phone:",
15
+ "basic_form.placeholder.phone": "Phone:",
16
+ "basic_form.labeltext.street_no": "Street/No.:",
17
+ "basic_form.placeholder.street_no": "Street/No.:",
18
+ "basic_form.labeltext.zip": "Zip:",
19
+ "basic_form.placeholder.zip": "Zip:",
20
+ "basic_form.labeltext.city": "City:",
21
+ "basic_form.placeholder.city": "City:",
22
+ "basic_form.labeltext.additional_address_info": "Additional address information",
23
+ "basic_form.placeholder.additional_address_info": "Additional address information",
24
+ "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
25
+ }
26
+ }
27
+ }
28
+ }