comand-component-library 4.0.2 → 4.0.4

package/src/components/CmdSiteFooter.vue

@@ -17,7 +17,11 @@ export default {
          */
         orientation: {
             type: String,
-            default: 'horizontal'
+            default: "horizontal",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
         }
     }
 }
@@ -28,7 +32,9 @@ export default {
 .cmd-site-footer {
     padding: var(--grid-gap) 0;
     border-top: var(--default-border);
-    background: var(--default-background-color);
+    background: var(--default-background);
+    margin-top: auto;
+    flex: none;
 
     footer {
         max-width: var(--max-width);
@@ -46,6 +52,10 @@ export default {
         width: 100%;
         flex: none;
     }
+
+    + .cmd-copyright-information {
+        margin-top: 0;
+    }
 }
 </style>
 

package/src/components/CmdSiteHeader.vue

@@ -123,8 +123,9 @@ export default {
     grid-area: site-header;
     display: flex;
     flex-direction: column;
+    flex: none;
     border-bottom: var(--default-border);
-    background: var(--color-scheme-background-color);
+    background: var(--color-scheme-background);
 
     &.sticky {
         position: sticky;

package/src/components/CmdSlideButton.vue

@@ -21,7 +21,13 @@ export default {
          */
         slideButtonType: {
           type: String,
-          default: "next"
+          default: "next",
+            validator(value) {
+                return value === "next" ||
+                    value === "prev" ||
+                    value === "up" ||
+                    value === "down"
+            }
         },
         /**
          * default slide-buttons

package/src/components/CmdSlideshow.vue

@@ -180,12 +180,15 @@ export default {
         }
     },
     beforeUnmount() {
-        if (this.hnd !== null) {
-            window.clearInterval(this.hnd);
-            this.hnd = null;
-        }
+        this.stopAutoplay()
     },
     methods: {
+        stopAutoplay() {
+            if (this.hnd !== null) {
+                window.clearInterval(this.hnd);
+                this.hnd = null;
+            }
+        },
         itemProvider() {
             return {
                 "image": {
@@ -302,6 +305,19 @@ export default {
             immediate: true,
             deep: true
         },
+        autoplay() {
+            if(this.autoplay) {
+                this.setupSlider()
+            } else {
+                this.stopAutoplay()
+            }
+        },
+        autoplayInterval() {
+            if(this.autoplay) {
+                this.stopAutoplay()
+                this.setupSlider()
+            }
+        },
         currentItem() {
             // wait to nextTick to ensure ref is available
             this.$nextTick(() => {
@@ -334,6 +350,18 @@ export default {
         background: var(--primary-color);
     }
 
+    &:has(figcaption) {
+        img {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        figcaption {
+            border-bottom-left-radius: var(--default-border-radius);
+            border-bottom-right-radius: var(--default-border-radius);
+        }
+    }
+
     .inner-slideshow-wrapper {
         display: flex;
         justify-content: center;
@@ -441,7 +469,7 @@ export default {
             top: .5rem;
             right: 5.5rem;
             padding: 0 0.2rem;
-            border-radius: var(--border-radius);
+            border-radius: var(--default-border-radius);
             background: var(--pure-white-reduced-opacity);
         }
     }

package/src/components/CmdSocialNetworks.vue

@@ -88,7 +88,12 @@ export default {
          */
         align: {
             type: String,
-            default: "left"
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right"
+            }
         },
         /**
          * activate if gap between buttons should appear
@@ -150,7 +155,11 @@ export default {
          */
         buttonTextAlign: {
             type: String,
-            default: "left"
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "right"
+            }
         },
         /**
          * properties for cmdFormElement
@@ -301,15 +310,15 @@ export default {
 
                 &:first-of-type {
                     .button {
-                        border-top-left-radius: var(--border-radius);
-                        border-bottom-left-radius: var(--border-radius);
+                        border-top-left-radius: var(--default-border-radius);
+                        border-bottom-left-radius: var(--default-border-radius);
                     }
                 }
 
                 &:last-of-type {
                     .button {
-                        border-top-right-radius: var(--border-radius);
-                        border-bottom-right-radius: var(--border-radius);
+                        border-top-right-radius: var(--default-border-radius);
+                        border-bottom-right-radius: var(--default-border-radius);
                     }
                 }
             }
@@ -322,23 +331,19 @@ export default {
     }
 
     &.align-right {
-        .share-button-wrapper {
+        .button-wrapper {
             justify-content: flex-end;
         }
     }
 
     &.align-center {
-        .cmd-headline > * {
-            text-align: center;
+        .button-wrapper {
+            justify-content: center;
         }
 
         .toggle-switch {
             margin: auto;
         }
-
-        .share-button-wrapper {
-            justify-content: center;
-        }
     }
 
     &.align-right {

package/src/components/CmdSocialNetworksItem.vue

@@ -51,7 +51,11 @@ export default {
          */
         buttonTextAlign: {
             type: String,
-            default: "left"
+            default: "left",
+            validator(value) {
+                return value === "left" ||
+                    value === "right"
+            }
         },
         /**
          * information if the user has accepted the data privacy (by checking the checkbox)

package/src/components/CmdSystemMessage.vue

@@ -57,7 +57,13 @@ export default {
          */
         validationStatus: {
             type: String,
-            required: true
+            required: true,
+            validator(value) {
+                return value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
         },
         /**
          * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+padding))

package/src/components/CmdTabs.vue

@@ -113,10 +113,10 @@ export default {
         > li {
             z-index: 10;
             margin-left: 0;
-            border-top-left-radius: var(--border-radius);
-            border-top-right-radius: var(--border-radius);
+            border-top-left-radius: var(--default-border-radius);
+            border-top-right-radius: var(--default-border-radius);
             list-style-type: none;
-            background: var(--color-scheme-background-color);
+            background: var(--color-scheme-background);
 
             a {
                 display: flex;
@@ -125,8 +125,8 @@ export default {
                 padding: var(--default-padding);
                 border: var(--default-border);
                 border-bottom: 0;
-                border-top-left-radius: var(--border-radius);
-                border-top-right-radius: var(--border-radius);
+                border-top-left-radius: var(--default-border-radius);
+                border-top-right-radius: var(--default-border-radius);
                 text-decoration: none;
 
                 &:hover, &:active, &:focus {
@@ -185,8 +185,8 @@ export default {
     > div {
         padding: var(--default-padding);
         border: var(--primary-border);
-        border-radius: var(--border-radius);
-        background: var(--color-scheme-background-color);
+        border-radius: var(--default-border-radius);
+        background: var(--color-scheme-background);
         border-top-left-radius: 0;
 
         > div {

package/src/components/CmdTextImageBlock.vue

@@ -83,7 +83,12 @@ export default {
          */
         paragraphTextAlign: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "left" ||
+                value === "center" ||
+                value === "right"
+            }
         },
         /**
          * position for headline
@@ -92,7 +97,11 @@ export default {
          */
         headlinePosition: {
             type: String,
-            default: "aboveImage"
+            default: "aboveImage",
+            validator(value) {
+                return value === "aboveImage" ||
+                    value === "belowImage"
+            }
         },
         /**
          * properties for CmdHeadline-component

package/src/components/CmdThumbnailScroller.vue

@@ -151,7 +151,11 @@ export default {
          */
         contentType: {
             type: String,
-            default: "image"
+            default: "image",
+            validator(value) {
+                return value === "image" ||
+                    value === "text"
+            }
         },
         /**
          * set type to define what will be executed on click on a thumbnail-scroller-item
@@ -160,7 +164,12 @@ export default {
          */
         executeOnClick: {
             type: String,
-            default: "fancybox"
+            default: "fancybox",
+            validator(value) {
+                return value === "fancybox" ||
+                    value === "url" ||
+                    value === "emit"
+            }
         },
         /**
          * list of thumbnail-scroller-items
@@ -379,12 +388,12 @@ export default {
     }
 
     > .inner-thumbnail-wrapper {
-        border-radius: var(--border-radius);
+        border-radius: var(--default-border-radius);
         padding: calc(var(--default-padding) * 2);
         padding-top: 0;
         margin: 0 auto;
         border: var(--default-border);
-        background: var(--color-scheme-background-color);
+        background: var(--color-scheme-background);
         overflow: hidden;
 
         > ul {
@@ -403,7 +412,6 @@ export default {
                 flex: none; /* avoids items to shrink to small on small screens */
 
                 img {
-                    border-radius: var(--border-radius);
                     min-width: 15rem;
                     max-height: 10rem;
                 }
@@ -414,12 +422,21 @@ export default {
 
                     &.active {
                         color: var(--pure-white);
+                        background: none; /* overwrite default behaviour from frontend-framework */
 
                         span, span[class*="icon"] {
                             color: inherit
                         }
 
+                        &:has(figcaption) {
+                            img {
+                                border-bottom-left-radius: 0;
+                                border-bottom-right-radius: 0;
+                            }
+                        }
+
                         figcaption {
+                            background: var(--primary-color);
                             opacity: 1;
                         }
                     }
@@ -432,6 +449,7 @@ export default {
                         &.active {
                             figcaption {
                                 color: var(--hyperlink-color);
+                                background: none;
                             }
                         }
                     }

package/src/components/CmdToggleDarkMode.vue

@@ -265,7 +265,7 @@ export default {
 
         &.dark-mode {
             input {
-                background: var(--color-scheme-background-color);
+                background: var(--color-scheme-background);
                 border-color: var(--color-scheme-text-color);
 
                 &::before {
@@ -273,7 +273,7 @@ export default {
                     content: "";
                     width: var(--size);
                     aspect-ratio: 1/1;
-                    background: var(--color-scheme-background-color);
+                    background: var(--color-scheme-background);
                     border-radius: var(--full-circle);
                     position: absolute;
                     top: 0;

package/src/components/CmdTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip">
+    <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline
@@ -19,6 +19,7 @@
             </a>
             <!-- end icon to close tooltip -->
         </div>
+
         <!-- begin slot-content -->
         <slot>
             {{ tooltipText }}
@@ -69,13 +70,27 @@ export default {
             required: false
         },
         /**
-         * status
+         * validation-status for tooltip
          *
-         * @allowedValues: error, warning, success, info
+         * @allowedValues: "", error, warning, success, info
          */
-        status: {
+        validationStatus: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "" ||
+                    value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
+        },
+        /**
+         * id of container that scrolls the content of the site
+         */
+        idOfScrollContainer: {
+            type: String,
+            default: "page-wrapper"
         },
         /**
          * icon 'close'
@@ -101,28 +116,23 @@ export default {
         }
     },
     mounted() {
-        window.addEventListener('scroll', this.hideOnScroll);
-
         if(this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
             if(relatedElement) {
-                relatedElement.addEventListener("mouseenter", this.showTooltip)
-                document.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
+                document.getElementById(this.idOfScrollContainer).addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
                 document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
 
                 if (this.toggleVisibilityByClick) {
                     relatedElement.addEventListener("click", this.toggleTooltipVisibility)
                 } else {
+                    relatedElement.addEventListener("mouseenter", this.showTooltip)
                     relatedElement.addEventListener("mouseleave", this.hideTooltip)
                 }
             }
         }
     },
     methods: {
-        hideOnScroll() {
-            this.tooltipVisibility = true
-        },
         toggleTooltipVisibility(event) {
             this.getPointerPosition(event)
             this.tooltipVisibility = !this.tooltipVisibility
@@ -160,16 +170,16 @@ export default {
     },
     unmounted() {
         if(this.relatedId) {
-            const relatedElement = document.getElementById(this.npm )
+            const relatedElement = document.getElementById(this.relatedId)
 
             if(relatedElement) {
-                relatedElement.removeEventListener("mouseenter", this.showTooltip)
                 document.removeEventListener("scroll", this.hideTooltip)
                 document.removeEventListener("keyup", this.hideTooltipOnEsc)
 
                 if (this.toggleVisibilityByClick) {
                     relatedElement.removeEventListener("click", this.toggleTooltipVisibility)
                 } else {
+                    relatedElement.removeEventListener("mouseenter", this.showTooltip)
                     relatedElement.removeEventListener("mouseleave", this.showTooltip)
                 }
             }
@@ -197,7 +207,7 @@ export default {
     line-height: 100%;
     font-size: var(--font-size-small);
     position: fixed;
-    background: var(--color-scheme-background-color);
+    background: var(--color-scheme-background);
     z-index: 100;
     border: var(--default-border);
     border-color: hsl(220, 2%, 25%);
@@ -206,6 +216,26 @@ export default {
     display: flex;
     flex-direction: column;
 
+    &.error, &.warning, &.success, &.info {
+        border-color: var(--status-color);
+    }
+
+    &.error {
+        --status-color: var(--error-color);
+    }
+
+    &.warning {
+        --status-color: var(--warning-color);
+    }
+
+    &.success {
+        --status-color: var(--success-color);
+    }
+
+    &.info {
+        --status-color: var(--info-color);
+    }
+
     .headline-wrapper {
         display: flex;
 
@@ -215,6 +245,11 @@ export default {
             [class*="icon-"] {
                 padding-left: 1rem;
                 font-size: var(--font-size-small);
+                color: var(--hyperlink-color);
+
+                &:hover, &:active, &:focus {
+                    color: var(--hyperlink-color-highlighted);
+                }
             }
         }
     }

package/src/components/CmdTooltipForFormElements.vue

@@ -0,0 +1,96 @@
+<template>
+    <!-- begin CmdTooltip -->
+    <CmdTooltip
+        ref="tooltip"
+        class="box cmd-tooltip-for-form-elements"
+        :class="validationStatus"
+        :relatedId="relatedId"
+        :toggle-visibility-by-click="true">
+
+        <!-- begin CmdListOfRequirements -->
+        <CmdListOfRequirements
+            v-if="cmdListOfRequirements.showRequirements"
+            :showHeadline="cmdListOfRequirements.showHeadline"
+            :inputRequirements="cmdListOfRequirements.inputRequirements"
+            :helplink="cmdListOfRequirements.helplink"
+            :inputModelValue="cmdListOfRequirements.inputModelValue"
+            :inputAttributes="cmdListOfRequirements.inputAttributes"
+            :labelText="cmdListOfRequirements.labelText"
+        />
+        <!-- end CmdListOfRequirements -->
+    </CmdTooltip>
+    <!-- end CmdTooltip -->
+</template>
+
+<script>
+export default {
+    name: "CmdTooltipForFormElements",
+    props: {
+        /**
+         * related-id for CmdTooltip-component
+         */
+        relatedId: {
+            type: String,
+            default: ""
+        },
+        /**
+         * validation-status for CmdTooltip-component
+         *
+         * @allowedValues: "", error, warning, success, info
+         *
+         * @affectsStyling: true
+         */
+        validationStatus: {
+            type: String,
+            default: "",
+            validator(value) {
+                return value === "" ||
+                    value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
+        },
+        /**
+         * properties for CmdListOfRequirements-component
+         */
+        cmdListOfRequirements: {
+            type: Object,
+            default() {
+                return {
+                    showRequirements: true,
+                    validationTooltip: "",
+                    inputRequirements: [],
+                    inputAttributes: {},
+                    showHeadline: true,
+                    inputModelValue: "",
+                    helplink: {},
+                    labelText: ""
+                }
+            }
+        }
+    },
+    methods: {
+        hideTooltip() {
+            // close tooltip by calling function from CmdTooltip using $refs
+            this.$refs.tooltip.hideTooltip()
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
+.cmd-tooltip-for-form-elements {
+    .headline-wrapper {
+        a[class*="icon-"], a:has([class*="icon-"]) {
+            margin-left: auto;
+
+            &:hover, &:active, &:focus {
+                background: none;
+            }
+        }
+    }
+}
+/* end cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
+</style>