comand-component-library 3.1.84 → 3.1.87

package/src/components/CmdSiteHeader.vue

@@ -32,13 +32,6 @@ export default {
         CmdMainNavigation
     },
     props: {
-        /**
-         * properties for CmdMainNavigation-component
-         */
-        cmdMainNavigation: {
-            type: Object,
-            required: true
-        },
         /**
          * use only if default-button of inner navigation-component should not be used
          */
@@ -61,6 +54,13 @@ export default {
         useGrid: {
             type: Boolean,
             default: true
+        },
+        /**
+         * properties for CmdMainNavigation-component
+         */
+        cmdMainNavigation: {
+            type: Object,
+            required: true
         }
     }
 }

package/src/components/CmdSlideButton.vue

@@ -1,7 +1,7 @@
 <template>
     <a href="#"
        @click.prevent
-       :class="['cmd-slide-button', 'button', slideButtonType ? slideButtonType : 'next']"
+       :class="['cmd-slide-button', 'button', slideButtonType]"
        :title="getDirection.tooltip">
         <span :class="getDirection.iconClass || 'next'"></span>
     </a>

package/src/components/CmdSwitchLanguage.vue

@@ -47,9 +47,7 @@ export default {
             return require("../assets/images/flags/flag-" + isoCode + ".svg")
         },
         activeLanguage(language) {
-            if(language.active || language.iso2 === navigator.language) {
-                return true
-            }
+            return language.active
         }
     }
 }
@@ -67,7 +65,7 @@ export default {
             list-style-type: none;
             margin: 0;
 
-            a:not(.active) {
+            a:not([class*="active"]) {
                 filter: contrast(.5);
 
                 &:hover, &:focus, &:active {

package/src/components/CmdTable.vue

@@ -194,19 +194,12 @@ export default {
         gap: calc(var(--default-gap) / 2);
 
         .button {
-            background: none;
             padding: 0;
             min-width: 2rem;
             min-height: 2rem;
-            background: var(--pure-white);
 
             span[class*="icon"] {
-                color: var(--primary-color);
                 font-size: 1rem;
-
-                &:hover, &:active, &:focus {
-                    color: var(--hyperlink-color-highlighted);
-                }
             }
         }
     }

package/src/components/CmdToggleDarkMode.vue

@@ -23,8 +23,7 @@ export default {
     },
     data() {
         return {
-            darkMode: false,
-            labelText: ""
+            darkMode: false
         }
     },
     props: {
@@ -99,6 +98,11 @@ export default {
             this.darkMode = event.detail === "dark-mode"
         }
     },
+    computed: {
+        labelText() {
+            return this.darkMode ? this.labelTextDarkMode : this.labelTextLightMode
+        }
+    },
     watch: {
         darkMode: {
             handler() {
@@ -106,10 +110,8 @@ export default {
                 const htmlTag = document.documentElement
                 if (this.darkMode) {
                     htmlTag.classList.replace("light-mode", "dark-mode")
-                    this.labelText = this.labelTextDarkMode
                 } else {
                     htmlTag.classList.replace("dark-mode", "light-mode")
-                    this.labelText = this.labelTextLightMode
                 }
 
                 // emits custom events from html-tag

package/src/components/CmdTooltip.vue

@@ -177,7 +177,7 @@ export default {
     line-height: 100%;
     font-size: 1.1rem;
     position: fixed;
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     z-index: 100;
     border: var(--default-border);
     border-color: hsl(220, 2%, 25%);

package/src/components/CmdTooltipForInputElements.vue

@@ -9,7 +9,7 @@
 
         <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
-            v-if="inputAttributes.required && validationMessage"
+            v-if="cmdListOfRequirements?.inputAttributes?.required && validationMessage"
             :systemMessage="validationMessage"
             :validation-status="validationStatus"
             :iconClose="{show: false}"
@@ -18,13 +18,14 @@
 
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
-            v-if="showRequirements"
-            :inputRequirements="inputRequirements"
-            :helplink="helplink"
-            :inputModelValue="inputModelValue"
-            :inputAttributes="inputAttributes"
-            :validationTooltip="validationTooltip"
-            :labelText="labelText"
+            v-if="cmdListOfRequirements.showRequirements"
+            :showHeadline="cmdListOfRequirements.showHeadline"
+            :inputRequirements="cmdListOfRequirements.inputRequirements"
+            :helplink="cmdListOfRequirements.helplink"
+            :inputModelValue="cmdListOfRequirements.inputModelValue"
+            :inputAttributes="cmdListOfRequirements.inputAttributes"
+            :validationTooltip="cmdListOfRequirements.validationTooltip"
+            :labelText="cmdListOfRequirements.labelText"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
@@ -45,13 +46,6 @@ export default {
         CmdTooltip
     },
     props: {
-        /**
-         * text for label (used in headline)
-         */
-        labelText: {
-            type: String,
-            required: false
-        },
         /**
          * related-id for CmdTooltip-component
          */
@@ -74,50 +68,22 @@ export default {
             default: ""
         },
         /**
-         * toggle visibility for CmdListOfRequirements-component
-         */
-        showRequirements: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * validation-tooltip for CmdListOfRequirements-component
+         * properties for CmdListOfRequirements-component
          */
-        validationTooltip: {
-            type: String,
-            default: ""
-        },
-        /**
-         * list of input-requirements for CmdListOfRequirements-component
-         */
-        inputRequirements: {
-            type: Array,
-            default() {
-                return []
-            }
-        },
-        /**
-         * input-attributes for CmdListOfRequirements-component
-         */
-        inputAttributes: {
+        cmdListOfRequirements: {
             type: Object,
             default() {
-                return {}
+                return {
+                    showRequirements: true,
+                    validationTooltip: "",
+                    inputRequirements: [],
+                    inputAttributes: {},
+                    showHeadline: true,
+                    inputModelValue: "",
+                    helplink: {},
+                    labelText: ""
+                }
             }
-        },
-        /**
-         * input-model-value for CmdListOfRequirements-component
-         */
-        inputModelValue: {
-            type: [String, Boolean, Array, Number],
-            default: ""
-        },
-        /**
-         * helplink for CmdListOfRequirements-component
-         */
-        helplink: {
-            type: Object,
-            required: false
         }
     },
     methods: {

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -193,7 +193,7 @@
             "icon for error-validated items in list-of-requirements",
             "",
             "element-property must me set to 'input'",
-            "showRequirements-property must be set to 'true'",
+            "showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'",
             ""
         ]
     },
@@ -202,7 +202,7 @@
             "icon for warning-validated items in list-of-requirements",
             "",
             "element-property must me set to 'input'",
-            "showRequirements-property must be set to 'true'",
+            "showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'",
             ""
         ]
     },
@@ -211,7 +211,7 @@
             "icon for success-validated items in list-of-requirements",
             "",
             "element-property must me set to 'input'",
-            "showRequirements-property must be set to 'true'",
+            "showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'",
             ""
         ]
     },
@@ -220,7 +220,7 @@
             "icon for info-validated items in list-of-requirements",
             "",
             "element-property must me set to 'input'",
-            "showRequirements-property must be set to 'true'",
+            "showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'",
             ""
         ]
     },

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -14,9 +14,14 @@
             ]
         }
     },
-    "textOpenClosed": {
+    "textOpen": {
         "comments": [
-            "text for open/closed-information"
+            "text for 'open'-information"
+        ]
+    },
+    "textClosed": {
+        "comments": [
+            "text for 'closed'-information"
         ]
     },
     "openingHours": {
@@ -38,5 +43,15 @@
         "comments": [
             "properties for CmdHeadline-component"
         ]
+    },
+    "timeFormatter": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    },
+    "componentHandlesClosedStatus": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
     }
 }

package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json

@@ -1,9 +1,4 @@
 {
-    "cmdMainNavigation": {
-        "comments": [
-            "properties for CmdMainNavigation-component"
-        ]
-    },
     "closeOffcanvas": {
         "comments": [
             "use only if default-button of inner navigation-component should not be used"
@@ -23,5 +18,10 @@
                 "true"
             ]
         }
+    },
+    "cmdMainNavigation": {
+        "comments": [
+            "properties for CmdMainNavigation-component"
+        ]
     }
 }

package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json

@@ -1,9 +1,4 @@
 {
-    "labelText": {
-        "comments": [
-            "text for label (used in headline)"
-        ]
-    },
     "relatedId": {
         "comments": [
             "related-id for CmdTooltip-component"
@@ -19,29 +14,9 @@
             "validation-message for CmdSystemMessage-component"
         ]
     },
-    "showRequirements": {
-        "comments": [
-            "toggle visibility for CmdListOfRequirements-component"
-        ]
-    },
-    "validationTooltip": {
-        "comments": [
-            "validation-tooltip for CmdListOfRequirements-component"
-        ]
-    },
-    "inputRequirements": {
-        "comments": [
-            "list of input-requirements for CmdListOfRequirements-component"
-        ]
-    },
-    "inputAttributes": {
-        "comments": [
-            "helplink for CmdListOfRequirements-component"
-        ]
-    },
-    "methods": {
+    "cmdListOfRequirements": {
         "comments": [
-            "helplink for CmdListOfRequirements-component"
+            "properties for CmdListOfRequirements-component"
         ]
     }
 }

package/src/mixins/FieldValidation.js

@@ -142,9 +142,31 @@ export default {
                     iconClass: "icon-not-visible"
                 }
             }
+        },
+        /**
+         * properties for CmdListOfRequirements-component
+         */
+        cmdListOfRequirements: {
+            type: Object,
+            required: false
         }
     },
     computed: {
+        listOfRequirements() {
+            if (this.cmdListOfRequirements == null) {
+                return {
+                    showRequirements: true,
+                    showHeadline: true,
+                    validationTooltip: this.validationTooltip,
+                    inputRequirements: this.inputRequirements,
+                    inputAttributes: this.$attrs,
+                    inputModelValue: this.modelValue,
+                    helplink: {},
+                    labelText: this.labelText
+                }
+            }
+            return this.cmdListOfRequirements
+        },
         getValidationMessage() {
             // check if all requirements are valid
             // const allRequirementsValid = !this.inputRequirements.some((item) => {