comand-component-library 4.0.1 → 4.0.3

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,8 +113,8 @@ 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);
 
@@ -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,7 +185,7 @@ export default {
     > div {
         padding: var(--default-padding);
         border: var(--primary-border);
-        border-radius: var(--border-radius);
+        border-radius: var(--default-border-radius);
         background: var(--color-scheme-background-color);
         border-top-left-radius: 0;
 

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,7 +388,7 @@ 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;
@@ -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/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)
                 }
             }
@@ -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>

package/src/components/CmdUploadForm.vue

@@ -491,7 +491,7 @@ export default {
         /**
          * set icon for delete-icons
          */
-        deleteIcon: {
+        iconDelete: {
             type: Object,
             default() {
                 return {
@@ -1063,8 +1063,30 @@ export default {
         justify-content: center;
     }
 
+    /* begin box for simple-mode */
+    &.box {
+        display: inline-flex;
+        flex-direction: column;
+        background: var(--default-background-color);
+
+        text-decoration: none;
+        text-align: center;
+        padding: var(--default-padding);
+
+        span {
+            margin: 0;
+
+            &[class*="icon-"] {
+                font-size: 5rem;
+            }
+        }
+    }
+    /* end box for simple-mode */
+
     .box {
+        box-shadow: none;
         background: var(--color-scheme-background-color);
+        border: var(--default-border);
 
         dl {
             justify-content: center;
@@ -1111,8 +1133,8 @@ export default {
                         background: var(--color-scheme-background-color);
 
                         &::-moz-progress-bar {
-                            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);
                             background: var(--primary-color);
                         }
                     }
@@ -1206,23 +1228,6 @@ export default {
             font-size: 5rem;
         }
     }
-
-    &.box {
-        display: inline-flex;
-        flex-direction: column;
-        background: var(--default-background-color);
-        text-decoration: none;
-        text-align: center;
-        padding: var(--default-padding);
-
-        span {
-            margin: 0;
-
-            &[class*="icon-"] {
-                font-size: 5rem;
-            }
-        }
-    }
 }
 
 /* end cmd-upload-form ---------------------------------------------------------------------------------------------- */

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <!-- begin slot-content in section -->
-        <section v-if="innerWrapper" :class="setInnerClass" :id="{anchorId: anchorId}">
+        <section v-if="innerWrapper" :class="setInnerClass" :id="anchorId">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"

package/src/components/ComponentSettings.vue

@@ -4,6 +4,7 @@
         :collapsible="true"
         :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
         :openCollapsedBox="true"
+        :allowContentToScroll="true"
         boxBodyClass="settings-body"
     >
         <template v-slot:body>
@@ -24,7 +25,6 @@
 </template>
 
 <script>
-
 export default {
     name: "ComponentSettings",
     data() {

package/src/main.js

@@ -36,7 +36,7 @@ import '@/assets/styles/template.css'
 import "prismjs/themes/prism.css"
 
 /* import css for demopage only */
-//import 'comand-frontend-framework/public/demopage-only.css'
+import 'comand-frontend-framework/demopage-only.css'
 /* end imports css from comand-component-library ---------------------------------------------------------------------------------------- */
 
 import router from "./router"

package/src/assets/data/accordion.json

@@ -1,45 +0,0 @@
-{
-  "accordionData1": [
-    {
-      "headlineText": "First",
-      "headlineLevel": 5,
-      "iconClass": "icon-globe",
-      "content": "Content 1",
-      "status": false
-    },
-    {
-      "headlineText": "Second",
-      "headlineLevel": 5,
-      "iconClass": "icon-user-profile",
-      "content": "Content 2",
-      "status": true
-    },
-    {
-      "headlineText": "Third",
-      "headlineLevel": 5,
-      "iconClass": "icon-home",
-      "content": "Content 3",
-      "status": false
-    }
-  ],
-  "accordionData2": [
-    {
-      "headlineText": "First",
-      "headlineLevel": 5,
-      "content": "Content 1",
-      "status": false
-    },
-    {
-      "headlineText": "Second",
-      "headlineLevel": 5,
-      "content": "Content 2",
-      "status": false
-    },
-    {
-      "headlineText": "Third",
-      "headlineLevel": 5,
-      "content": "Content 3",
-      "status": false
-    }
-  ]
-}