comand-component-library 3.3.87 → 4.0.0

package/src/components/CmdThumbnailScroller.vue

@@ -19,9 +19,9 @@
         <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 -->
 
@@ -357,199 +357,204 @@ 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;
-              }
+                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;
+                }
 
-              &.active {
-                  a {
-                      figcaption {
-                          opacity: 1;
-                      }
-                  }
-              }
+                &.active {
+                    a {
+                        figcaption {
+                            opacity: 1;
+                        }
+                    }
+                }
 
                 .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;
+            }
 
-  &.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);
-        }
+            &.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;
+                }
 
-        figcaption {
-          text-decoration: none;
+                a {
+                    &:hover, &:active, &:focus {
+                        figcaption {
+                            color: var(--primary-color);
+                        }
+
+                        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

@@ -185,7 +185,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-tooltip ------------------------------------------------------------------------------------------ */
 .cmd-tooltip {
     padding: .6rem .7rem .4rem .7rem;

package/src/components/CmdUploadForm.vue

@@ -1035,7 +1035,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
 .cmd-upload-form {
     .cmd-custom-headline {
@@ -1175,7 +1175,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 {

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
-        <section v-if="innerWrapper" :class="setInnerClass">
-            <a v-if="anchorId" :id="anchorId"></a>
+        <!-- begin slot-content in section -->
+        <section v-if="innerWrapper" :class="setInnerClass" :id="{anchorId: anchorId}">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
@@ -15,12 +15,16 @@
             <slot></slot>
             <!-- end slot-content -->
         </section>
+        <!-- end slot-content in section -->
+
+        <!-- begin slot-content without section -->
         <template v-else>
             <!-- begin slot-content -->
             <a v-if="anchorId" :id="anchorId"></a>
             <slot></slot>
             <!-- end slot-content -->
         </template>
+        <!-- end slot-content without section -->
     </div>
 </template>
 
@@ -113,7 +117,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-width-limitation-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-width-limitation-wrapper {
     > * {

package/src/mixins/FieldValidation.js

@@ -215,23 +215,6 @@ export default {
             }
             return this.helplink.icon.iconClass
         },
-        getStatusIconType() {
-            if (this.validationStatus !== "") {
-                if (!this.capsLockActivated) {
-                    if (this.validationStatus === "error") {
-                        return this.iconHasStateError.iconType
-                    } else if (this.validationStatus === "warning") {
-                        return this.iconHasStateWarning.iconType
-                    } else if (this.validationStatus === "success") {
-                        return this.iconHasStateSuccess.iconType
-                    }
-                    return this.iconHasStateInfo.iconType
-                } else {
-                    return this.iconCapsLock.iconType
-                }
-            }
-            return this.helplink.icon.iconType
-        },
         inputRequirements() {
             const standardRequirements = []
             // check if field is required