comand-component-library 3.1.65 → 3.1.66
Sign up to get free protection for your applications and to get access to all the features.
- 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",
|