comand-component-library 3.1.65 → 3.1.66
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 +1 -1
- package/src/App.vue +10 -9
- package/src/assets/data/cookie-disclaimer.json +3 -3
- package/src/components/CmdBox.vue +18 -5
- package/src/components/CmdCookieDisclaimer.vue +88 -101
- package/src/components/CmdUploadForm.vue +123 -97
- package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +1 -1
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
</CmdSystemMessage>
|
|
24
24
|
<!-- end CmdSystemMessage -->
|
|
25
25
|
|
|
26
|
-
<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">
|
|
27
27
|
<template v-if="!listOfFiles.length">
|
|
28
28
|
<CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
|
|
29
29
|
{{ getMessage("cmduploadform.no_files_to_upload") }}
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<!-- begin total-upload information -->
|
|
37
|
-
<
|
|
38
|
-
<
|
|
37
|
+
<div v-else class="flex-container vertical">
|
|
38
|
+
<div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
|
|
39
39
|
<CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
|
|
40
40
|
{{ getMessage("cmduploadform.headline.summary_of_all_files") }}
|
|
41
41
|
</CmdCustomHeadline>
|
|
42
|
-
<ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files">
|
|
42
|
+
<ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
|
|
43
43
|
<li class="flex-container no-flex">
|
|
44
44
|
<a
|
|
45
45
|
href="#"
|
|
@@ -49,20 +49,21 @@
|
|
|
49
49
|
<span :class="deleteIconClass"></span>
|
|
50
50
|
</a>
|
|
51
51
|
<span>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<span
|
|
60
|
-
:class="[
|
|
61
|
-
'text-align-right',
|
|
62
|
-
{ error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
|
|
63
|
-
]">({{ formatSize(totalSize) }})</span>
|
|
64
|
-
</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>
|
|
65
59
|
</span>
|
|
60
|
+
<small
|
|
61
|
+
:class="[
|
|
62
|
+
'text-align-right',
|
|
63
|
+
{ error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
|
|
64
|
+
]">
|
|
65
|
+
({{ formatSize(totalSize) }})
|
|
66
|
+
</small>
|
|
66
67
|
<span class="progressbar" v-if="uploadInitiated">
|
|
67
68
|
<span>{{ getPercentage(totalUploadProgress) }}</span>
|
|
68
69
|
<progress
|
|
@@ -74,35 +75,35 @@
|
|
|
74
75
|
</li>
|
|
75
76
|
</ul>
|
|
76
77
|
<hr/>
|
|
77
|
-
</
|
|
78
|
+
</div>
|
|
78
79
|
<!-- end total-upload information -->
|
|
79
80
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<a
|
|
91
|
-
href="#"
|
|
92
|
-
:title="getMessage('cmduploadform.labeltext.remove_file_from_list')"
|
|
93
|
-
@click.prevent="removeFile(index)"
|
|
94
|
-
><span :class="deleteIconClass"></span>
|
|
95
|
-
</a>
|
|
96
|
-
<span
|
|
97
|
-
:class="[
|
|
98
|
-
'text-align-right',
|
|
99
|
-
uploadFile.allowedType ? 'allowed' : 'not-allowed',
|
|
100
|
-
{ error: uploadFile.error }
|
|
101
|
-
]"
|
|
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"
|
|
102
91
|
>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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">
|
|
106
107
|
<span class="progressbar">
|
|
107
108
|
<span>{{ getPercentage(uploadFile.progress) }}</span>
|
|
108
109
|
<!-- do not place inside progress-tag (will not be displayed then) -->
|
|
@@ -114,18 +115,19 @@
|
|
|
114
115
|
"
|
|
115
116
|
></progress>
|
|
116
117
|
</span>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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>
|
|
129
131
|
<!-- end list of selected files -->
|
|
130
132
|
|
|
131
133
|
<!-- begin upload conditions -->
|
|
@@ -155,7 +157,7 @@
|
|
|
155
157
|
</dt>
|
|
156
158
|
<dd>
|
|
157
159
|
<a
|
|
158
|
-
:class="showListOfFileExtensions ?
|
|
160
|
+
:class="showListOfFileExtensions ? invisibleIconClass : visibleIconClass"
|
|
159
161
|
href="#"
|
|
160
162
|
@click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
|
|
161
163
|
:title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')"
|
|
@@ -175,31 +177,33 @@
|
|
|
175
177
|
</dl>
|
|
176
178
|
<!-- end upload conditions -->
|
|
177
179
|
|
|
178
|
-
<
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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>
|
|
203
207
|
</div>
|
|
204
208
|
<!-- begin CmdFormElement -->
|
|
205
209
|
<CmdFormElement
|
|
@@ -979,6 +983,7 @@ export default {
|
|
|
979
983
|
|
|
980
984
|
.cmd-custom-headline {
|
|
981
985
|
margin: 0;
|
|
986
|
+
justify-content: center;
|
|
982
987
|
}
|
|
983
988
|
|
|
984
989
|
.box {
|
|
@@ -999,17 +1004,26 @@ export default {
|
|
|
999
1004
|
}
|
|
1000
1005
|
}
|
|
1001
1006
|
|
|
1007
|
+
.total-files {
|
|
1008
|
+
> * {
|
|
1009
|
+
white-space: nowrap;
|
|
1010
|
+
|
|
1011
|
+
&:not(a) {
|
|
1012
|
+
font-weight: bold;
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1002
1017
|
[class*="list-of-file"] {
|
|
1003
1018
|
max-height: 10rem;
|
|
1004
1019
|
overflow-x: hidden;
|
|
1005
1020
|
overflow-y: auto;
|
|
1006
1021
|
border: var(--default-border);
|
|
1007
|
-
padding: calc(var(--default-padding)
|
|
1022
|
+
padding: calc(var(--default-padding) * 2);
|
|
1008
1023
|
margin: 0;
|
|
1009
1024
|
|
|
1010
1025
|
> li {
|
|
1011
1026
|
flex-wrap: nowrap;
|
|
1012
|
-
margin-right: var(--default-margin); /* avoids text to be placed below scrollbar */
|
|
1013
1027
|
|
|
1014
1028
|
.progressbar {
|
|
1015
1029
|
display: table;
|
|
@@ -1043,24 +1057,35 @@ export default {
|
|
|
1043
1057
|
}
|
|
1044
1058
|
}
|
|
1045
1059
|
|
|
1046
|
-
.list-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
gap: calc(var(--default-gap) / 2);
|
|
1050
|
-
|
|
1051
|
-
&:last-of-type {
|
|
1052
|
-
margin-bottom: var(--default-margin);
|
|
1053
|
-
}
|
|
1060
|
+
.list-files-wrapper {
|
|
1061
|
+
justify-content: center;
|
|
1062
|
+
align-items: center;
|
|
1054
1063
|
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1064
|
+
.list-of-files {
|
|
1065
|
+
display: inline-flex;
|
|
1066
|
+
flex-direction: column;
|
|
1058
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
|
+
}
|
|
1059
1085
|
}
|
|
1060
1086
|
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
margin: 0 auto;
|
|
1087
|
+
hr {
|
|
1088
|
+
width: 100%; /* will be 0 instead (because of align-items: center for parent) */
|
|
1064
1089
|
}
|
|
1065
1090
|
}
|
|
1066
1091
|
|
|
@@ -1117,5 +1142,6 @@ a.drop-area {
|
|
|
1117
1142
|
margin: 0;
|
|
1118
1143
|
}
|
|
1119
1144
|
}
|
|
1145
|
+
|
|
1120
1146
|
/* end cmd-upload-form ---------------------------------------------------------------------------------------------- */
|
|
1121
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",
|