comand-component-library 3.1.64 → 3.1.67

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.
@@ -1,6 +1,7 @@
1
1
  <template>
2
2
  <!-- begin advanced mode -->
3
3
  <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
4
+ <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
4
5
  <!-- begin CmdCustomHeadlineFieldset -->
5
6
  <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
6
7
  v-bind="cmdCustomHeadlineFieldset"
@@ -22,21 +23,23 @@
22
23
  </CmdSystemMessage>
23
24
  <!-- end CmdSystemMessage -->
24
25
 
25
- <div :class="['box drop-area', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
26
+ <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
26
27
  <template v-if="!listOfFiles.length">
27
- <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadline">
28
+ <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
28
29
  {{ getMessage("cmduploadform.no_files_to_upload") }}
29
30
  </CmdCustomHeadline>
30
- <CmdCustomHeadline v-else v-bind="cmdCustomHeadline">
31
+ <CmdCustomHeadline v-else v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
31
32
  {{ getMessage("cmduploadform.no_file_to_upload") }}
32
33
  </CmdCustomHeadline>
33
34
  </template>
34
35
 
35
36
  <!-- begin total-upload information -->
36
- <template v-else>
37
- <template v-if="showTotalUpload && listOfFiles.length !== 1">
38
- <h4>{{ getMessage("cmduploadform.headline.summary_of_all_files") }}</h4>
39
- <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files">
37
+ <div v-else class="flex-container vertical">
38
+ <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
39
+ <CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
40
+ {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
41
+ </CmdCustomHeadline>
42
+ <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
40
43
  <li class="flex-container no-flex">
41
44
  <a
42
45
  href="#"
@@ -46,20 +49,21 @@
46
49
  <span :class="deleteIconClass"></span>
47
50
  </a>
48
51
  <span>
49
- <strong>{{ listOfFiles.length }}
50
- <template v-if="!allowMultipleFileUploads">
51
- {{ getMessage("cmduploadform.labeltext.file_uploading") }}
52
- </template>
53
- <template v-else>
54
- {{ getMessage("cmduploadform.labeltext.files_uploading") }}
55
- </template>
56
- <span
57
- :class="[
58
- 'text-align-right',
59
- { error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
60
- ]">({{ formatSize(totalSize) }})</span>
61
- </strong>
52
+ {{ listOfFiles.length }}
53
+ <template v-if="!allowMultipleFileUploads">
54
+ {{ getMessage("cmduploadform.labeltext.file_uploading") }}
55
+ </template>
56
+ <template v-else>
57
+ {{ getMessage("cmduploadform.labeltext.files_uploading") }}
58
+ </template>
62
59
  </span>
60
+ <small
61
+ :class="[
62
+ 'text-align-right',
63
+ { error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
64
+ ]">
65
+ ({{ formatSize(totalSize) }})
66
+ </small>
63
67
  <span class="progressbar" v-if="uploadInitiated">
64
68
  <span>{{ getPercentage(totalUploadProgress) }}</span>
65
69
  <progress
@@ -71,33 +75,35 @@
71
75
  </li>
72
76
  </ul>
73
77
  <hr/>
74
- </template>
78
+ </div>
75
79
  <!-- end total-upload information -->
76
80
 
77
- <!-- begin list of selected files -->
78
- <h4>{{ getMessage("cmduploadform.headline.list_of_selected_files") }}</h4>
79
- <ul class="list-of-files">
80
- <li
81
- v-for="(uploadFile, index) in listOfFiles"
82
- :key="index"
83
- class="flex-container no-flex"
84
- >
85
- <a
86
- href="#"
87
- :title="getMessage('cmduploadform.labeltext.remove_file_from_list')"
88
- @click.prevent="removeFile(index)"
89
- ><span :class="deleteIconClass"></span>
90
- </a>
91
- <span
92
- :class="[
93
- 'text-align-right',
94
- uploadFile.allowedType ? 'allowed' : 'not-allowed',
95
- { error: uploadFile.error }
96
- ]"
81
+ <div class="flex-container vertical list-files-wrapper">
82
+ <!-- begin list of selected files -->
83
+ <CmdCustomHeadline v-bind="cmdCustomHeadlineListOfSelectedFiles" headlineLevel="4">
84
+ {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
85
+ </CmdCustomHeadline>
86
+ <ul class="list-of-files">
87
+ <li
88
+ v-for="(uploadFile, index) in listOfFiles"
89
+ :key="index"
90
+ class="flex-container no-flex"
97
91
  >
98
- {{ uploadFile.file.name }} ({{ formatSize(uploadFile.file.size) }})
99
- </span>
100
- <template v-if="uploadInitiated && !uploadFile.error">
92
+ <a
93
+ href="#"
94
+ :title="getMessage('cmduploadform.labeltext.remove_file_from_list', uploadFile.file.name)"
95
+ @click.prevent="removeFile(index)"
96
+ ><span :class="deleteIconClass"></span>
97
+ </a>
98
+ <span
99
+ :class="[
100
+ 'text-align-right',
101
+ uploadFile.allowedType ? 'allowed' : 'not-allowed',
102
+ { error: uploadFile.error }
103
+ ]">
104
+ {{ uploadFile.file.name }} <small>({{ formatSize(uploadFile.file.size) }})</small>
105
+ </span>
106
+ <template v-if="uploadInitiated && !uploadFile.error">
101
107
  <span class="progressbar">
102
108
  <span>{{ getPercentage(uploadFile.progress) }}</span>
103
109
  <!-- do not place inside progress-tag (will not be displayed then) -->
@@ -109,27 +115,28 @@
109
115
  "
110
116
  ></progress>
111
117
  </span>
112
- </template>
113
- </li>
114
- </ul>
115
- <a
116
- v-if="failedUpload"
117
- href="#"
118
- @click.prevent="cancel"
119
- :title="getMessage('cmduploadform.all_files_will_be_removed')">
120
- {{ getMessage("cmduploadform.reset_upload") }}
121
- </a>
122
- <hr/>
123
- </template>
118
+ </template>
119
+ </li>
120
+ </ul>
121
+ <a
122
+ v-if="failedUpload"
123
+ href="#"
124
+ @click.prevent="cancel"
125
+ :title="getMessage('cmduploadform.all_files_will_be_removed')">
126
+ {{ getMessage("cmduploadform.reset_upload") }}
127
+ </a>
128
+ <hr/>
129
+ </div>
130
+ </div>
124
131
  <!-- end list of selected files -->
125
132
 
126
133
  <!-- begin upload conditions -->
127
- <h4 v-if="allowMultipleFileUploads && listOfFiles.length">
134
+ <CmdCustomHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectAdditionalFiles" headlineLevel="4">
128
135
  {{ getMessage("cmduploadform.headline.select_additional_files") }}
129
- </h4>
130
- <h4 v-if="!allowMultipleFileUploads && listOfFiles.length">
136
+ </CmdCustomHeadline>
137
+ <CmdCustomHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectNewFile" headlineLevel="4">
131
138
  {{ getMessage("cmduploadform.headline.select_new_file") }}
132
- </h4>
139
+ </CmdCustomHeadline>
133
140
  <dl class="small">
134
141
  <template v-if="maxTotalUploadSize > 0">
135
142
  <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -150,7 +157,7 @@
150
157
  </dt>
151
158
  <dd>
152
159
  <a
153
- :class="showListOfFileExtensions ? 'invisibleIconClass' : 'visibleIconClass'"
160
+ :class="showListOfFileExtensions ? invisibleIconClass : visibleIconClass"
154
161
  href="#"
155
162
  @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
156
163
  :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')"
@@ -169,31 +176,34 @@
169
176
  </dd>
170
177
  </dl>
171
178
  <!-- end upload conditions -->
172
- <button
173
- type="button"
174
- :class="['button upload primary', { disabled: uploadInitiated }]"
175
- :disabled="uploadInitiated"
176
- @click="selectFiles()"
177
- >
178
- <span :class="fileUploadIconClass"></span>
179
- <span v-if="allowMultipleFileUploads">{{
180
- getMessage("cmduploadform.labeltext.select_files")
181
- }}</span>
182
- <span v-else>{{ getMessage("cmduploadform.labeltext.select_file") }}</span>
183
- </button>
184
- <p v-if="enableDragAndDrop" :class="['text-drag-and-drop', { disabled: uploadInitiated }]">
185
- <span>{{ getMessage("cmduploadform.or") }}</span>
186
- <strong>
187
- {{ getMessage("cmduploadform.drag_and_drop") }}
188
- <template v-if="allowMultipleFileUploads && listOfFiles.length">
189
- {{ getMessage("cmduploadform.additional") }}
190
- </template>
191
- <template v-if="!allowMultipleFileUploads && listOfFiles.length">
192
- {{ getMessage("cmduploadform.new") }}
193
- </template>
194
- {{ getMessage("cmduploadform.files_to_this_area") }}
195
- </strong>
196
- </p>
179
+
180
+ <div>
181
+ <button
182
+ type="button"
183
+ :class="['button upload primary', { disabled: uploadInitiated }]"
184
+ :disabled="uploadInitiated"
185
+ @click="selectFiles()"
186
+ >
187
+ <span :class="fileUploadIconClass"></span>
188
+ <span v-if="allowMultipleFileUploads">{{
189
+ getMessage("cmduploadform.labeltext.select_files")
190
+ }}</span>
191
+ <span v-else>{{ getMessage("cmduploadform.labeltext.select_file") }}</span>
192
+ </button>
193
+ <p v-if="enableDragAndDrop" :class="['text-drag-and-drop', { disabled: uploadInitiated }]">
194
+ <span>{{ getMessage("cmduploadform.or") }}</span>
195
+ <strong>
196
+ {{ getMessage("cmduploadform.drag_and_drop") }}
197
+ <template v-if="allowMultipleFileUploads && listOfFiles.length">
198
+ {{ getMessage("cmduploadform.additional") }}
199
+ </template>
200
+ <template v-if="!allowMultipleFileUploads && listOfFiles.length">
201
+ {{ getMessage("cmduploadform.new") }}
202
+ </template>
203
+ {{ getMessage("cmduploadform.files_to_this_area") }}
204
+ </strong>
205
+ </p>
206
+ </div>
197
207
  </div>
198
208
  <!-- begin CmdFormElement -->
199
209
  <CmdFormElement
@@ -202,7 +212,7 @@
202
212
  :labelText="getMessage('cmduploadform.labeltext.comment')"
203
213
  v-model="comment"
204
214
  :required="commentRequired"
205
- :statusMessage="commentStatusMessage"
215
+ :validationMessage="commentStatusMessage"
206
216
  :placeholder="getMessage('cmduploadform.placeholder.comment')"
207
217
  :status="commentStatusMessage ? 'error' : ''"
208
218
  />
@@ -370,13 +380,6 @@ export default {
370
380
  type: String,
371
381
  default: ""
372
382
  },
373
- /**
374
- * properties for CmdCustomHeadline-component
375
- */
376
- cmdCustomHeadlineFieldset: {
377
- type: Object,
378
- required: false
379
- },
380
383
  /**
381
384
  * enable if files can also be dragged (and dropped) into upload-area
382
385
  */
@@ -501,12 +504,76 @@ export default {
501
504
  cancelIconClass: {
502
505
  type: String,
503
506
  default: "icon-cancel"
507
+ },
508
+ /**
509
+ * properties for CmdCustomHeadline-component at of the fieldset
510
+ */
511
+ cmdCustomHeadlineFieldset: {
512
+ type: Object,
513
+ required: false
514
+ },
515
+ /**
516
+ * properties for CmdCustomHeadline-component shown if no files for upload exist
517
+ */
518
+ cmdCustomHeadlineNoFilesToUpload: {
519
+ type: Object,
520
+ required: false
521
+ },
522
+ /**
523
+ * properties for CmdCustomHeadline-component shown if no file for upload exist
524
+ */
525
+ cmdCustomHeadlineNoFileToUpload: {
526
+ type: Object,
527
+ required: false
528
+ },
529
+ /**
530
+ * properties for CmdCustomHeadline-component for 'summary of all files'
531
+ */
532
+ cmdCustomHeadlineSummaryOfAllFiles: {
533
+ type: Object,
534
+ required: false
535
+ },
536
+ /**
537
+ * properties for CmdCustomHeadline-component for 'list of selected files'
538
+ */
539
+ cmdCustomHeadlineListOfSelectedFiles: {
540
+ type: Object,
541
+ required: false
542
+ },
543
+ /**
544
+ * properties for CmdCustomHeadline-component for 'select additional files'
545
+ */
546
+ cmdCustomHeadlineSelectAdditionalFiles: {
547
+ type: Object,
548
+ required: false
549
+ },
550
+ /**
551
+ * properties for CmdCustomHeadline-component for 'select new file'
552
+ */
553
+ cmdCustomHeadlineSelectNewFile: {
554
+ type: Object,
555
+ required: false
556
+ },
557
+ /**
558
+ * toggle visibility for legend-text
559
+ */
560
+ showLegend: {
561
+ type: Boolean,
562
+ default: true
563
+ },
564
+ /**
565
+ * text for legend
566
+ *
567
+ * @requiredForAccessibility: true
568
+ */
569
+ textLegend: {
570
+ type: String,
571
+ required: false
504
572
  }
505
573
  },
506
574
  computed: {
507
575
  fileTypeImage() {
508
576
  return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
509
-
510
577
  },
511
578
  failedUpload() {
512
579
  return this.listOfFiles.some(file => file.error)
@@ -916,6 +983,7 @@ export default {
916
983
 
917
984
  .cmd-custom-headline {
918
985
  margin: 0;
986
+ justify-content: center;
919
987
  }
920
988
 
921
989
  .box {
@@ -936,17 +1004,26 @@ export default {
936
1004
  }
937
1005
  }
938
1006
 
1007
+ .total-files {
1008
+ > * {
1009
+ white-space: nowrap;
1010
+
1011
+ &:not(a) {
1012
+ font-weight: bold;
1013
+ }
1014
+ }
1015
+ }
1016
+
939
1017
  [class*="list-of-file"] {
940
1018
  max-height: 10rem;
941
1019
  overflow-x: hidden;
942
1020
  overflow-y: auto;
943
1021
  border: var(--default-border);
944
- padding: calc(var(--default-padding) / 2);
1022
+ padding: calc(var(--default-padding) * 2);
945
1023
  margin: 0;
946
1024
 
947
1025
  > li {
948
1026
  flex-wrap: nowrap;
949
- margin-right: var(--default-margin); /* avoids text to be placed below scrollbar */
950
1027
 
951
1028
  .progressbar {
952
1029
  display: table;
@@ -980,24 +1057,35 @@ export default {
980
1057
  }
981
1058
  }
982
1059
 
983
- .list-of-files {
984
- display: inline-flex;
985
- flex-direction: column;
986
- gap: calc(var(--default-gap) / 2);
1060
+ .list-files-wrapper {
1061
+ justify-content: center;
1062
+ align-items: center;
987
1063
 
988
- &:last-of-type {
989
- margin-bottom: var(--default-margin);
990
- }
991
-
992
- li {
993
- list-style-type: none;
994
- margin-left: 0;
1064
+ .list-of-files {
1065
+ display: inline-flex;
1066
+ flex-direction: column;
995
1067
  gap: calc(var(--default-gap) / 2);
1068
+
1069
+ li {
1070
+ list-style-type: none;
1071
+ margin-left: 0;
1072
+ gap: calc(var(--default-gap) / 2);
1073
+
1074
+ > a:hover, a:active, a:focus {
1075
+ ~ * {
1076
+ color: var(--hyperlink-color-highlighted);
1077
+ }
1078
+ }
1079
+ }
1080
+
1081
+ & + a {
1082
+ display: table;
1083
+ margin: 0 auto;
1084
+ }
996
1085
  }
997
1086
 
998
- & + a {
999
- display: table;
1000
- margin: 0 auto;
1087
+ hr {
1088
+ width: 100%; /* will be 0 instead (because of align-items: center for parent) */
1001
1089
  }
1002
1090
  }
1003
1091
 
@@ -1054,5 +1142,6 @@ a.drop-area {
1054
1142
  margin: 0;
1055
1143
  }
1056
1144
  }
1145
+
1057
1146
  /* end cmd-upload-form ---------------------------------------------------------------------------------------------- */
1058
1147
  </style>
@@ -6,7 +6,7 @@ export default {
6
6
  "cmduploadform.no_files_to_upload": "No files selected to upload",
7
7
  "cmduploadform.labeltext.select_file": "Select file to upload",
8
8
  "cmduploadform.labeltext.select_files": "Select files to upload",
9
- "cmduploadform.labeltext.remove_file_from_list": "Remove file from list",
9
+ "cmduploadform.labeltext.remove_file_from_list": "Remove file '{0}' from list",
10
10
  "cmduploadform.labeltext.remove_all_files_from_list": "Remove all files from list",
11
11
  "cmduploadform.labeltext.file_uploading": "file to upload",
12
12
  "cmduploadform.labeltext.files_uploading": "files to upload",
@@ -61,7 +61,7 @@ export default {
61
61
  * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
62
62
  */
63
63
  iconHasStateError: {
64
- type: String,
64
+ type: Object,
65
65
  default() {
66
66
  return {
67
67
  iconClass: "icon-error-circle",
@@ -74,7 +74,7 @@ export default {
74
74
  * icon will be displayed inside the field on the left (in front of the input)
75
75
  */
76
76
  iconHasStateWarning: {
77
- type: String,
77
+ type: Object,
78
78
  default() {
79
79
  return {
80
80
  iconClass: "icon-exclamation-circle",
@@ -88,7 +88,7 @@ export default {
88
88
  * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
89
89
  */
90
90
  iconHasStateSuccess: {
91
- type: String,
91
+ type: Object,
92
92
  default() {
93
93
  return {
94
94
  iconClass: "icon-check-circle",
@@ -101,7 +101,7 @@ export default {
101
101
  * icon will be displayed inside the field on the left (in front of the input)
102
102
  */
103
103
  iconHasStateInfo: {
104
- type: String,
104
+ type: Object,
105
105
  default() {
106
106
  return {
107
107
  iconClass: "icon-info-circle",
@@ -113,7 +113,7 @@ export default {
113
113
  * icon to show that caps-lock is activated
114
114
  */
115
115
  iconCapsLock: {
116
- type: String,
116
+ type: Object,
117
117
  default() {
118
118
  return {
119
119
  iconClass: "icon-home"
@@ -124,7 +124,7 @@ export default {
124
124
  * icon displayed if password-field is clicked to show password
125
125
  */
126
126
  iconPasswordVisible: {
127
- type: String,
127
+ type: Object,
128
128
  default() {
129
129
  return {
130
130
  iconClass: "icon-visible",
@@ -136,7 +136,7 @@ export default {
136
136
  * icon displayed to show password of a password-field
137
137
  */
138
138
  iconPasswordInvisible: {
139
- type: String,
139
+ type: Object,
140
140
  default() {
141
141
  return {
142
142
  iconClass: "icon-not-visible"
@@ -157,7 +157,7 @@ export default {
157
157
  return this.getMessage("cmdfieldvalidation.information_filled_correctly")
158
158
  }
159
159
  }
160
- return ""
160
+ return null
161
161
  },
162
162
  getStatusIconClass() {
163
163
  if (this.validationStatus !== "") {
@@ -3,4 +3,13 @@ function isFrameMode() {
3
3
  return frameUrl.searchParams.has("frameMode")
4
4
  }
5
5
 
6
- export {isFrameMode}
6
+ function createUuid(){
7
+ let dt = new Date().getTime()
8
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
9
+ const r = (dt + Math.random() * 16) % 16 | 0
10
+ dt = Math.floor(dt / 16)
11
+ return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16)
12
+ })
13
+ }
14
+
15
+ export {isFrameMode, createUuid}