comand-component-library 3.3.87 → 4.0.1

package/src/components/CmdThumbnailScroller.vue

@@ -19,18 +19,18 @@
         <div class="inner-thumbnail-wrapper">
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
-                    v-if="showSlidebuttons"
-                    @click.prevent="showPrevItem"
-                    slideButtonType="prev"
+                v-if="showSlidebuttons"
+                @click.prevent="showPrevItem"
+                slideButtonType="prev"
             />
             <!-- end CmdSlideButton -->
 
             <!-- begin list of images to slide -->
             <transition-group name="slide" tag="ul">
-                <li v-for="(item, index) in items" :key="index"
-                    :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']">
+                <li v-for="(item, index) in items" :key="index">
                     <a v-if="!editModeContext" :href="executeOnClick === 'url' ? item.url : '#'"
                        @click="executeLink(index, $event)"
+                       :class="[{'active' : activeItemIndex === index}, item.id ? 'item-' + item.id : '']"
                        :title="tooltip"
                        :target="executeOnClick === 'url' ? '_blank' : null"
                     >
@@ -117,6 +117,11 @@ export default {
         }
     },
     props: {
+        /**
+         * orientation for scroller
+         *
+         * @allewedValues: "horizontal", "vertical"
+         */
         orientation: {
             type: String,
             default: "horizontal"
@@ -357,199 +362,219 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-thumbnail-scroller ------------------------------------------------------------------------------------------ */
-@import '../assets/styles/variables';
-
 .cmd-thumbnail-scroller {
-  display: inline-flex; /* do not set to table to avoid overflow is not hidden on small devices */
+    display: inline-flex; /* do not set to table to avoid overflow is not hidden on small devices */
     flex-direction: column;
     gap: var(--default-gap);
-  width: 100%;
+    width: 100%;
 
     &.full-width:not(.vertical) {
-    display: flex; /* allows flex-items to stretch equally over full space */
+        display: flex; /* allows flex-items to stretch equally over full space */
 
-      > div {
-          width: 100%;
-      }
-  }
+        > div {
+            width: 100%;
+        }
+    }
 
-  > .inner-thumbnail-wrapper {
-      border-radius: var(--border-radius);
+    > .inner-thumbnail-wrapper {
+        border-radius: var(--border-radius);
         padding: calc(var(--default-padding) * 2);
         padding-top: 0;
-      margin: 0 auto;
-      border: var(--default-border);
-      background: var(--color-scheme-background-color);
-      overflow: hidden;
-
-      > ul {
-          overflow: hidden;
-          margin: 0;
-          display: flex;
-          gap: var(--grid-gap);
-          justify-content: space-between;
-          width: 100%; /* stretch flex-container */
-
-          > li {
-              align-self: center;
-              list-style-type: none;
-              margin: 0;
+        margin: 0 auto;
+        border: var(--default-border);
+        background: var(--color-scheme-background-color);
+        overflow: hidden;
+
+        > ul {
+            overflow: hidden;
+            margin: 0;
+            display: flex;
+            gap: var(--grid-gap);
+            justify-content: space-between;
+            width: 100%; /* stretch flex-container */
+
+            > li {
+                align-self: center;
+                list-style-type: none;
+                margin: 0;
                 margin-top: 2rem;
+                flex: none; /* avoids items to shrink to small on small screens */
 
-              a {
-                  text-align: center;
-              }
-
-              img {
-                  border-radius: var(--border-radius);
+                img {
+                    border-radius: var(--border-radius);
                     min-width: 15rem;
-                  max-height: 10rem;
-              }
+                    max-height: 10rem;
+                }
+
+                a {
+                    display: block;
+                    text-align: center;
+
+                    &.active {
+                        color: var(--pure-white);
 
-              &.active {
-                  a {
-                      figcaption {
-                          opacity: 1;
-                      }
-                  }
-              }
+                        span, span[class*="icon"] {
+                            color: inherit
+                        }
+
+                        figcaption {
+                            opacity: 1;
+                        }
+                    }
+
+                    &:has(img) {
+                        padding: 0;
+                    }
+
+                    &:hover, &:active, &:focus {
+                        &.active {
+                            figcaption {
+                                color: var(--hyperlink-color);
+                            }
+                        }
+                    }
+                }
 
                 .image-wrapper {
-                    min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
+                    min-width: 11.1rem; /* assure to be as wide as action-buttons in edit-mode */
                 }
-          }
-      }
-  }
+            }
+        }
+    }
 
-  &.vertical {
+    &.vertical {
         width: auto;
 
         .inner-thumbnail-wrapper {
-    display: inline-flex;
-    left: 50%;
-    height: 75rem; /* remove later !!! */
-    transform: translateX(-50%);
-
-    > ul {
-      width: auto;
-      display: flex;
-      flex-direction: column;
-
-      [class*="switch-button-"] {
-        width: 100%;
-        height: auto;
-
-        &::before {
-          transform: rotate(90deg);
-          display: inline-block;
-          margin: 0 auto;
+            display: inline-flex;
+            left: 50%;
+            height: 75rem; /* remove later !!! */
+            transform: translateX(-50%);
+
+            > ul {
+                width: auto;
+                display: flex;
+                flex-direction: column;
+
+                [class*="switch-button-"] {
+                    width: 100%;
+                    height: auto;
+
+                    &::before {
+                        transform: rotate(90deg);
+                        display: inline-block;
+                        margin: 0 auto;
+                    }
+                }
+            }
+
+            .slide-button-next {
+                top: auto;
+                bottom: 0;
+            }
         }
-      }
     }
 
-    .slide-button-next {
-      top: auto;
-      bottom: 0;
-    }
-  }
-    }
+    &.gallery-scroller {
+        max-width: var(--max-width);
+        left: 0;
+        right: 0;
+        position: fixed;
+        bottom: var(--default-margin);
+        margin: auto;
+        display: table;
+
+        li {
+            a {
+                color: var(--color-scheme-text-color);
+                text-decoration: none;
+
+                &.active {
+                    img {
+                        border-color: var(--primary-color);
+                    }
 
-  &.gallery-scroller {
-    max-width: var(--max-width);
-    left: 0;
-    right: 0;
-    position: fixed;
-    bottom: var(--default-margin);
-    margin: auto;
-    display: table;
-
-    li {
-      a {
-        color: var(--color-scheme-text-color);
-        text-decoration: none;
-      }
-
-      &.active {
-        img {
-          border-color: var(--primary-color);
-        }
+                    figcaption {
+                        color: var(--primary-color);
+                    }
+                }
 
-        figcaption {
-          color: var(--primary-color);
-        }
-      }
+                &:not(.active) {
+                    img {
+                        border: var(--default-border);
+                        opacity: var(--reduced-opacity);
+                    }
 
-      &:not(.active) {
-        img {
-          border: var(--default-border);
-          opacity: var(--reduced-opacity);
-        }
+                    figcaption {
+                        text-decoration: none;
+                    }
+                }
+
+                &:hover, &:active, &:focus {
+                    figcaption {
+                        color: var(--primary-color);
+                    }
 
-        figcaption {
-          text-decoration: none;
+                    img {
+                        border-color: var(--primary-color);
+                        opacity: 1;
+                    }
+                }
+            }
         }
+    }
 
-        a {
-          &:hover, &:active, &:focus {
-            figcaption {
-              color: var(--primary-color);
+    &.large-icons {
+        li a {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--default-gap) / 4);
+            text-decoration: none;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                margin: 0;
             }
 
-            img {
-              border-color: var(--primary-color);
-              opacity: 1;
+            [class*="icon-"] {
+                font-size: 5rem;
             }
-          }
         }
-      }
     }
-  }
-
-  &.large-icons {
-    li a {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--default-gap) / 4);
-      text-decoration: none;
-      align-items: center;
-      justify-content: center;
-
-      span {
-        margin: 0;
-      }
-
-      [class*="icon-"] {
-        font-size: 5rem;
-      }
-    }
-  }
+}
+</style>
 
-  @media only screen and (max-width: $medium-max-width) {
-    & > ul > li {
-      flex: none;
-    }
+<style lang="scss">
+@import '../assets/styles/variables';
 
-    & img {
-      width: auto;
-    }
+@media only screen and (max-width: $medium-max-width) {
+    .cmd-thumbnail-scroller {
+        & > ul > li {
+            flex: none;
 
-    & > ul > li img {
-      max-height: 7rem;
-    }
+            img {
+                max-height: 7rem;
+            }
+        }
 
-    &.gallery-scroller {
-      max-width: calc(100% - calc(var(--default-margin) * 3));
-      display: flex;
+        & img {
+            width: auto;
+        }
+
+        &.gallery-scroller {
+            max-width: calc(100% - calc(var(--default-margin) * 3));
+            display: flex;
+        }
     }
-  }
 }
 
 @container (width <= #{$small-max-width}) {
-  .cmd-thumbnail-scroller {
-    display: block;
-  }
+    .cmd-thumbnail-scroller {
+        display: block;
+    }
 }
 
 /* end cmd-thumbnail-scroller ------------------------------------------------------------------------------------------ */

package/src/components/CmdToggleDarkMode.vue

@@ -242,7 +242,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
 .cmd-toggle-dark-mode {
     &.styled-layout {

package/src/components/CmdTooltip.vue

@@ -101,6 +101,8 @@ export default {
         }
     },
     mounted() {
+        window.addEventListener('scroll', this.hideOnScroll);
+
         if(this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
@@ -118,6 +120,9 @@ export default {
         }
     },
     methods: {
+        hideOnScroll() {
+            this.tooltipVisibility = true
+        },
         toggleTooltipVisibility(event) {
             this.getPointerPosition(event)
             this.tooltipVisibility = !this.tooltipVisibility
@@ -185,7 +190,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-tooltip ------------------------------------------------------------------------------------------ */
 .cmd-tooltip {
     padding: .6rem .7rem .4rem .7rem;

package/src/components/CmdUploadForm.vue

@@ -24,22 +24,24 @@
         </CmdSystemMessage>
         <!-- end CmdSystemMessage -->
 
-        <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
+                <!-- begin CmdHeadline -->
                 <CmdHeadline v-if="allowMultipleFileUploads" v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
-                    {{ getMessage("cmduploadform.no_files_to_upload") }}
-                </CmdHeadline>
-                <CmdHeadline v-else v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
-                    {{ getMessage("cmduploadform.no_file_to_upload") }}
+                    {{ headlineTextNoFilesToUpload }}
                 </CmdHeadline>
+                <!-- end CmdHeadline -->
             </template>
 
             <!-- begin total-upload information -->
             <div v-else class="flex-container vertical">
                 <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
+                    <!-- begin CmdHeadline -->
                     <CmdHeadline v-bind="cmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
                     </CmdHeadline>
+                    <!-- end CmdHeadline -->
+
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
                         <li class="flex-container no-flex">
                             <a
@@ -83,9 +85,12 @@
 
                 <div class="flex-container vertical list-files-wrapper">
                     <!-- begin list of selected files -->
+                    <!-- begin CmdHeadline -->
                     <CmdHeadline v-bind="cmdHeadlineListOfSelectedFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
                     </CmdHeadline>
+                    <!-- end CmdHeadline -->
+
                     <ul class="list-of-files">
                         <li
                             v-for="(uploadFile, index) in listOfFiles"
@@ -108,20 +113,21 @@
                                 { 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) -->
-                            <progress
-                                max="100"
-                                :value="uploadFile.progress"
-                                :title="
-                                formatSize(uploadFile.uploadedBytes) + '/' + formatSize(uploadFile.file.size)
-                              "
-                            ></progress>
-                          </span>
-                            </template>
+                            </span>
+
+                            <!-- begin progressbar -->
+                            <span class="progressbar" v-if="uploadInitiated && !uploadFile.error">
+                                <span>{{ getPercentage(uploadFile.progress) }}</span>
+                                <!-- do not place inside progress-tag (will not be displayed then) -->
+                                <progress
+                                    max="100"
+                                    :value="uploadFile.progress"
+                                    :title="
+                                    formatSize(uploadFile.uploadedBytes) + '/' + formatSize(uploadFile.file.size)
+                                  "
+                                ></progress>
+                            </span>
+                            <!-- end progressbar -->
                         </li>
                     </ul>
                     <a
@@ -137,12 +143,18 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
+            <!-- begin CmdHeadline -->
             <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
             </CmdHeadline>
+            <!-- end CmdHeadline -->
+
+            <!-- begin CmdHeadline -->
             <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
             </CmdHeadline>
+            <!-- end CmdHeadline -->
+
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -188,7 +200,8 @@
             </dl>
             <!-- end upload conditions -->
 
-            <div>
+            <!-- begin upload-button and drag-and-drop-text -->
+            <div class="flex-container vertical no-gap">
                 <button
                     type="button"
                     :class="['button upload primary', { disabled: uploadInitiated }]"
@@ -217,7 +230,9 @@
                     </strong>
                 </p>
             </div>
+            <!-- end upload-button and drag-and-drop-text -->
         </div>
+
         <!-- begin CmdFormElement -->
         <CmdFormElement
             v-if="enableComment"
@@ -268,7 +283,8 @@
     <!-- end advanced mode -->
 
     <!-- begin simple mode -->
-    <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form  drop-area', {'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+    <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <!-- begin progressbar -->
         <span class="progressbar" v-if="uploadInitiated">
             <span>{{ getPercentage(totalUploadProgress) }}</span>
             <progress
@@ -277,10 +293,11 @@
                 :title="totalBytesUploaded">
             </progress>
         </span>
+        <!-- end progressbar -->
 
         <!-- begin slot-content -->
         <slot>
-            <template v-if="enableDragAndDrop">
+            <template v-if="!enableDragAndDrop">
                 <template v-if="fileTypeImage">
                     <span>{{ getMessage("cmduploadform.select_image") }}</span>
                     <!-- begin CmdIcon -->
@@ -455,6 +472,22 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * toggle visibility for legend-text
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
+        },
         /**
          * set icon for delete-icons
          */
@@ -611,25 +644,12 @@ export default {
         cmdHeadlineSelectNewFile: {
             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: {
+        headlineTextNoFilesToUpload() {
+            return this.allowMultipleFileUploads ? this.getMessage("cmduploadform.no_files_to_upload") : this.this.getMessage("cmduploadform.no_file_to_upload")
+        },
         fileTypeImage() {
             return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
         },
@@ -1035,7 +1055,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
 .cmd-upload-form {
     .cmd-custom-headline {
@@ -1076,7 +1096,7 @@ export default {
         overflow-x: hidden;
         overflow-y: auto;
         border: var(--default-border);
-        padding: calc(var(--default-padding) * 2);
+        padding: var(--default-padding);
         margin: 0;
 
         > li {
@@ -1175,7 +1195,7 @@ export default {
         border: var(--default-border);
         border-style: dashed;
         background: var(--color-scheme-background-color);
-        padding: (var(--default-padding));
+        padding: var(--default-padding);
         text-align: center;
 
         &.allow-drop {
@@ -1187,14 +1207,20 @@ export default {
         }
     }
 
-    &.drop-area {
+    &.box {
         display: inline-flex;
         flex-direction: column;
-        text-decoration: none;
         background: var(--default-background-color);
+        text-decoration: none;
+        text-align: center;
+        padding: var(--default-padding);
 
         span {
             margin: 0;
+
+            &[class*="icon-"] {
+                font-size: 5rem;
+            }
         }
     }
 }