comand-component-library 3.1.63 → 3.1.66

package/src/components/CmdUploadForm.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- begin advanced mode -->
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
+        <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdCustomHeadlineFieldset -->
         <CmdCustomHeadline v-if="cmdCustomHeadlineFieldset"
                            v-bind="cmdCustomHeadlineFieldset"
@@ -22,21 +23,23 @@
         </CmdSystemMessage>
         <!-- end CmdSystemMessage -->
 
-        <div :class="['box drop-area', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadline">
+                <CmdCustomHeadline v-if="allowMultipleFileUploads" v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
                 </CmdCustomHeadline>
-                <CmdCustomHeadline v-else v-bind="cmdCustomHeadline">
+                <CmdCustomHeadline v-else v-bind="cmdCustomHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
                 </CmdCustomHeadline>
             </template>
 
             <!-- begin total-upload information -->
-            <template v-else>
-                <template v-if="showTotalUpload && listOfFiles.length !== 1">
-                    <h4>{{ getMessage("cmduploadform.headline.summary_of_all_files") }}</h4>
-                    <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files">
+            <div v-else class="flex-container vertical">
+                <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
+                    <CmdCustomHeadline v-bind="cmdCustomHeadlineSummaryOfAllFiles" headlineLevel="4">
+                        {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
+                    </CmdCustomHeadline>
+                    <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
                         <li class="flex-container no-flex">
                             <a
                                 href="#"
@@ -46,20 +49,21 @@
                                 <span :class="deleteIconClass"></span>
                             </a>
                             <span>
-                                <strong>{{ listOfFiles.length }}
-                                  <template v-if="!allowMultipleFileUploads">
-                                    {{ getMessage("cmduploadform.labeltext.file_uploading") }}
-                                  </template>
-                                  <template v-else>
-                                    {{ getMessage("cmduploadform.labeltext.files_uploading") }}
-                                  </template>
-                                  <span
-                                      :class="[
-                                      'text-align-right',
-                                      { error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
-                                    ]">({{ formatSize(totalSize) }})</span>
-                                </strong>
+                              {{ listOfFiles.length }}
+                              <template v-if="!allowMultipleFileUploads">
+                                {{ getMessage("cmduploadform.labeltext.file_uploading") }}
+                              </template>
+                              <template v-else>
+                                {{ getMessage("cmduploadform.labeltext.files_uploading") }}
+                              </template>
                             </span>
+                            <small
+                                :class="[
+                              'text-align-right',
+                              { error: maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize }
+                            ]">
+                                ({{ formatSize(totalSize) }})
+                            </small>
                             <span class="progressbar" v-if="uploadInitiated">
                                 <span>{{ getPercentage(totalUploadProgress) }}</span>
                                 <progress
@@ -71,33 +75,35 @@
                         </li>
                     </ul>
                     <hr/>
-                </template>
+                </div>
                 <!-- end total-upload information -->
 
-                <!-- begin list of selected files -->
-                <h4>{{ getMessage("cmduploadform.headline.list_of_selected_files") }}</h4>
-                <ul class="list-of-files">
-                    <li
-                        v-for="(uploadFile, index) in listOfFiles"
-                        :key="index"
-                        class="flex-container no-flex"
-                    >
-                        <a
-                            href="#"
-                            :title="getMessage('cmduploadform.labeltext.remove_file_from_list')"
-                            @click.prevent="removeFile(index)"
-                        ><span :class="deleteIconClass"></span>
-                        </a>
-                        <span
-                            :class="[
-                'text-align-right',
-                uploadFile.allowedType ? 'allowed' : 'not-allowed',
-                { error: uploadFile.error }
-              ]"
+                <div class="flex-container vertical list-files-wrapper">
+                    <!-- begin list of selected files -->
+                    <CmdCustomHeadline v-bind="cmdCustomHeadlineListOfSelectedFiles" headlineLevel="4">
+                        {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
+                    </CmdCustomHeadline>
+                    <ul class="list-of-files">
+                        <li
+                            v-for="(uploadFile, index) in listOfFiles"
+                            :key="index"
+                            class="flex-container no-flex"
                         >
-              {{ uploadFile.file.name }} ({{ formatSize(uploadFile.file.size) }})
-            </span>
-                        <template v-if="uploadInitiated && !uploadFile.error">
+                            <a
+                                href="#"
+                                :title="getMessage('cmduploadform.labeltext.remove_file_from_list', uploadFile.file.name)"
+                                @click.prevent="removeFile(index)"
+                            ><span :class="deleteIconClass"></span>
+                            </a>
+                            <span
+                                :class="[
+                                'text-align-right',
+                                uploadFile.allowedType ? 'allowed' : 'not-allowed',
+                                { error: uploadFile.error }
+                              ]">
+                                {{ uploadFile.file.name }} <small>({{ formatSize(uploadFile.file.size) }})</small>
+                        </span>
+                            <template v-if="uploadInitiated && !uploadFile.error">
                         <span class="progressbar">
                             <span>{{ getPercentage(uploadFile.progress) }}</span>
                             <!-- do not place inside progress-tag (will not be displayed then) -->
@@ -109,27 +115,28 @@
                               "
                             ></progress>
                           </span>
-                        </template>
-                    </li>
-                </ul>
-                <a
-                    v-if="failedUpload"
-                    href="#"
-                    @click.prevent="cancel"
-                    :title="getMessage('cmduploadform.all_files_will_be_removed')">
-                    {{ getMessage("cmduploadform.reset_upload") }}
-                </a>
-                <hr/>
-            </template>
+                            </template>
+                        </li>
+                    </ul>
+                    <a
+                        v-if="failedUpload"
+                        href="#"
+                        @click.prevent="cancel"
+                        :title="getMessage('cmduploadform.all_files_will_be_removed')">
+                        {{ getMessage("cmduploadform.reset_upload") }}
+                    </a>
+                    <hr/>
+                </div>
+            </div>
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <h4 v-if="allowMultipleFileUploads && listOfFiles.length">
+            <CmdCustomHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
-            </h4>
-            <h4 v-if="!allowMultipleFileUploads && listOfFiles.length">
+            </CmdCustomHeadline>
+            <CmdCustomHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdCustomHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
-            </h4>
+            </CmdCustomHeadline>
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -150,7 +157,7 @@
                 </dt>
                 <dd>
                     <a
-                        :class="showListOfFileExtensions ? 'invisibleIconClass' : 'visibleIconClass'"
+                        :class="showListOfFileExtensions ? invisibleIconClass : visibleIconClass"
                         href="#"
                         @click.prevent="showListOfFileExtensions = !showListOfFileExtensions"
                         :title="getMessage('cmduploadform.tooltip.toggle_list_of_allowed_file_types')"
@@ -169,31 +176,34 @@
                 </dd>
             </dl>
             <!-- end upload conditions -->
-            <button
-                type="button"
-                :class="['button upload primary', { disabled: uploadInitiated }]"
-                :disabled="uploadInitiated"
-                @click="selectFiles()"
-            >
-                <span :class="fileUploadIconClass"></span>
-                <span v-if="allowMultipleFileUploads">{{
-                        getMessage("cmduploadform.labeltext.select_files")
-                    }}</span>
-                <span v-else>{{ getMessage("cmduploadform.labeltext.select_file") }}</span>
-            </button>
-            <p v-if="enableDragAndDrop" :class="['text-drag-and-drop', { disabled: uploadInitiated }]">
-                <span>{{ getMessage("cmduploadform.or") }}</span>
-                <strong>
-                    {{ getMessage("cmduploadform.drag_and_drop") }}
-                    <template v-if="allowMultipleFileUploads && listOfFiles.length">
-                        {{ getMessage("cmduploadform.additional") }}
-                    </template>
-                    <template v-if="!allowMultipleFileUploads && listOfFiles.length">
-                        {{ getMessage("cmduploadform.new") }}
-                    </template>
-                    {{ getMessage("cmduploadform.files_to_this_area") }}
-                </strong>
-            </p>
+
+            <div>
+                <button
+                    type="button"
+                    :class="['button upload primary', { disabled: uploadInitiated }]"
+                    :disabled="uploadInitiated"
+                    @click="selectFiles()"
+                >
+                    <span :class="fileUploadIconClass"></span>
+                    <span v-if="allowMultipleFileUploads">{{
+                            getMessage("cmduploadform.labeltext.select_files")
+                        }}</span>
+                    <span v-else>{{ getMessage("cmduploadform.labeltext.select_file") }}</span>
+                </button>
+                <p v-if="enableDragAndDrop" :class="['text-drag-and-drop', { disabled: uploadInitiated }]">
+                    <span>{{ getMessage("cmduploadform.or") }}</span>
+                    <strong>
+                        {{ getMessage("cmduploadform.drag_and_drop") }}
+                        <template v-if="allowMultipleFileUploads && listOfFiles.length">
+                            {{ getMessage("cmduploadform.additional") }}
+                        </template>
+                        <template v-if="!allowMultipleFileUploads && listOfFiles.length">
+                            {{ getMessage("cmduploadform.new") }}
+                        </template>
+                        {{ getMessage("cmduploadform.files_to_this_area") }}
+                    </strong>
+                </p>
+            </div>
         </div>
         <!-- begin CmdFormElement -->
         <CmdFormElement
@@ -370,13 +380,6 @@ export default {
             type: String,
             default: ""
         },
-        /**
-         * properties for CmdCustomHeadline-component
-         */
-        cmdCustomHeadlineFieldset: {
-            type: Object,
-            required: false
-        },
         /**
          * enable if files can also be dragged (and dropped) into upload-area
          */
@@ -501,12 +504,76 @@ export default {
         cancelIconClass: {
             type: String,
             default: "icon-cancel"
+        },
+        /**
+         * properties for CmdCustomHeadline-component at of the fieldset
+         */
+        cmdCustomHeadlineFieldset: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component shown if no files for upload exist
+         */
+        cmdCustomHeadlineNoFilesToUpload: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component shown if no file for upload exist
+         */
+        cmdCustomHeadlineNoFileToUpload: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'summary of all files'
+         */
+        cmdCustomHeadlineSummaryOfAllFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'list of selected files'
+         */
+        cmdCustomHeadlineListOfSelectedFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'select additional files'
+         */
+        cmdCustomHeadlineSelectAdditionalFiles: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdCustomHeadline-component for 'select new file'
+         */
+        cmdCustomHeadlineSelectNewFile: {
+            type: Object,
+            required: false
+        },
+        /**
+         * toggle visibility for legend-text
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
         }
     },
     computed: {
         fileTypeImage() {
             return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
-
         },
         failedUpload() {
             return this.listOfFiles.some(file => file.error)
@@ -916,6 +983,7 @@ export default {
 
     .cmd-custom-headline {
         margin: 0;
+        justify-content: center;
     }
 
     .box {
@@ -936,17 +1004,26 @@ export default {
         }
     }
 
+    .total-files {
+        > * {
+            white-space: nowrap;
+
+            &:not(a) {
+                font-weight: bold;
+            }
+        }
+    }
+
     [class*="list-of-file"] {
         max-height: 10rem;
         overflow-x: hidden;
         overflow-y: auto;
         border: var(--default-border);
-        padding: calc(var(--default-padding) / 2);
+        padding: calc(var(--default-padding) * 2);
         margin: 0;
 
         > li {
             flex-wrap: nowrap;
-            margin-right: var(--default-margin); /* avoids text to be placed below scrollbar */
 
             .progressbar {
                 display: table;
@@ -980,24 +1057,35 @@ export default {
         }
     }
 
-    .list-of-files {
-        display: inline-flex;
-        flex-direction: column;
-        gap: calc(var(--default-gap) / 2);
+    .list-files-wrapper {
+        justify-content: center;
+        align-items: center;
 
-        &:last-of-type {
-            margin-bottom: var(--default-margin);
-        }
-
-        li {
-            list-style-type: none;
-            margin-left: 0;
+        .list-of-files {
+            display: inline-flex;
+            flex-direction: column;
             gap: calc(var(--default-gap) / 2);
+
+            li {
+                list-style-type: none;
+                margin-left: 0;
+                gap: calc(var(--default-gap) / 2);
+
+                > a:hover, a:active, a:focus {
+                    ~ * {
+                        color: var(--hyperlink-color-highlighted);
+                    }
+                }
+            }
+
+            & + a {
+                display: table;
+                margin: 0 auto;
+            }
         }
 
-        & + a {
-            display: table;
-            margin: 0 auto;
+        hr {
+            width: 100%; /* will be 0 instead (because of align-items: center for parent) */
         }
     }
 
@@ -1054,5 +1142,6 @@ a.drop-area {
         margin: 0;
     }
 }
+
 /* end cmd-upload-form ---------------------------------------------------------------------------------------------- */
 </style>

package/src/mixins/CmdUploadForm/DefaultMessageProperties.js

@@ -6,7 +6,7 @@ export default {
         "cmduploadform.no_files_to_upload": "No files selected to upload",
         "cmduploadform.labeltext.select_file": "Select file to upload",
         "cmduploadform.labeltext.select_files": "Select files to upload",
-        "cmduploadform.labeltext.remove_file_from_list": "Remove file from list",
+        "cmduploadform.labeltext.remove_file_from_list": "Remove file '{0}' from list",
         "cmduploadform.labeltext.remove_all_files_from_list": "Remove all files from list",
         "cmduploadform.labeltext.file_uploading": "file to upload",
         "cmduploadform.labeltext.files_uploading": "files to upload",

package/src/mixins/FieldValidation.js

@@ -61,7 +61,7 @@ export default {
          * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
          */
         iconHasStateError: {
-            type: String,
+            type: Object,
             default() {
                 return {
                   iconClass: "icon-error-circle",
@@ -74,7 +74,7 @@ export default {
          * icon will be displayed inside the field on the left (in front of the input)
          */
         iconHasStateWarning: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-exclamation-circle",
@@ -88,7 +88,7 @@ export default {
          * icon is also used in 'list-of-requirements' (showRequirements-property must be set to true)
          */
         iconHasStateSuccess: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-check-circle",
@@ -101,7 +101,7 @@ export default {
          * icon will be displayed inside the field on the left (in front of the input)
          */
         iconHasStateInfo: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-info-circle",
@@ -113,7 +113,7 @@ export default {
          * icon to show that caps-lock is activated
          */
         iconCapsLock: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-home"
@@ -124,7 +124,7 @@ export default {
          * icon displayed if password-field is clicked to show password
          */
         iconPasswordVisible: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-visible",
@@ -136,7 +136,7 @@ export default {
          * icon displayed to show password of a password-field
          */
         iconPasswordInvisible: {
-            type: String,
+            type: Object,
             default() {
                 return {
                     iconClass: "icon-not-visible"