comand-component-library 3.1.82 → 3.1.85

package/src/components/CmdThumbnailScroller.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox}]">
+    <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox, 'full-width' : fullWidth}]">
         <!-- begin CmdSlideButton -->
         <CmdSlideButton
             @click.prevent="showPrevItem"
@@ -31,9 +31,12 @@
 </template>
 
 <script>
-import {openFancyBox} from './CmdFancyBox.vue'
+// import components
 import CmdSlideButton from "./CmdSlideButton.vue"
 
+// import functions
+import {openFancyBox} from './CmdFancyBox.vue'
+
 export default {
     name: "CmdThumbnailScroller",
     components: {
@@ -45,6 +48,15 @@ export default {
         }
     },
     props: {
+        /**
+         * activate to stretch component to full width (of parent element)
+         *
+         * @affectsStyling: true
+         */
+        fullWidth: {
+            type: Boolean,
+            default: false
+        },
         /**
          * list of thumbnail-scroller-items
          */
@@ -87,18 +99,18 @@ export default {
             type: Object,
             default() {
                 return {
-                    "next": {
-                        "next": {
+                    next: {
+                        next: {
                             type: "next",
-                            "iconClass": "icon-single-arrow-right",
-                            "tooltip": "Next"
+                            iconClass: "icon-single-arrow-right",
+                            tooltip: "Next"
                         }
                     },
-                    "prev": {
-                        "prev": {
+                    prev: {
+                        prev: {
                             type: "prev",
-                            "iconClass": "icon-single-arrow-left",
-                            "tooltip": "Previous"
+                            iconClass: "icon-single-arrow-left",
+                            tooltip: "Previous"
                         }
                     }
                 }
@@ -112,7 +124,6 @@ export default {
                 this.thumbnails.push(thumbnail);
             }
         },
-
         showPrevItem() {
             const thumbnail = this.thumbnails.pop(); // remove last element of array
             if (thumbnail) {
@@ -123,10 +134,9 @@ export default {
             if (this.allowOpenFancyBox) {
                 openFancyBox({fancyBoxGallery: this.thumbnails, defaultGalleryIndex: index})
             }
-            this.$emit('click', this.thumbnails[index].imgId)
+            this.$emit("click", this.thumbnails[index].imgId)
         }
     },
-
     watch: {
         thumbnailScrollerItems: {
             handler() {
@@ -153,9 +163,9 @@ export default {
     > ul {
         overflow: hidden;
         margin: 0;
-        display: -webkit-flex; /* Safari 6-8 */
         display: flex;
         gap: var(--grid-gap);
+        justify-content: space-between;
 
         > li {
             align-self: center;
@@ -175,7 +185,6 @@ export default {
                 max-height: 10rem;
             }
 
-
             &.active {
                 a {
                     figcaption {

package/src/components/CmdToggleDarkMode.vue

@@ -8,6 +8,7 @@
             v-model="darkMode"
             :toggle-switch="true"
             :title="!showLabel ? labelText: ''"
+            @update:modelValue="setColorScheme"
         />
     </div>
 </template>
@@ -63,31 +64,55 @@ export default {
         }
     },
     created() {
-        const mql = window.matchMedia('(prefers-color-scheme: dark)')
+        const mql = window.matchMedia("(prefers-color-scheme: dark)")
         mql.addEventListener("change", this.onColorSchemeChange)
         this.onColorSchemeChange(mql)
+
+        // load color-scheme from local-storage
+        const savedColorScheme = window.localStorage.getItem("cmd-color-scheme")
+
+        if(savedColorScheme) {
+            this.darkMode = savedColorScheme === "dark-mode"
+        }
+
+        // add eventListener on html-tag (= documentElement) to react on 'toggle-color-scheme'-event
+        document.documentElement.addEventListener("toggle-color-scheme", this.onToggleColorScheme)
     },
     beforeUnmount() {
-        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener("change", this.onColorSchemeChange)
+        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", this.onColorSchemeChange)
+
+        // remove eventListener on html-tag (= documentElement)
+        document.documentElement.removeEventListener("toggle-color-scheme", this.onToggleColorScheme)
     },
     methods: {
         onColorSchemeChange(event) {
+            // assign browser/os-color-scheme to data-property (and toggle class on html-tag)
             this.darkMode = event.matches
-            document.querySelector('html').classList.add(this.darkMode ? 'dark-mode' : 'light-mode')
+            document.documentElement.classList.add(this.darkMode ? "dark-mode" : "light-mode")
+        },
+        setColorScheme() {
+            // save color-scheme in local-storage to avoid toggling on page-reload
+            window.localStorage.setItem("cmd-color-scheme", this.darkMode ? "dark-mode": "light-mode")
+        },
+        onToggleColorScheme(event) {
+            // get current color-scheme from event-listener (if color-scheme is toggled by (another) switch or browser-/os-settings)
+            this.darkMode = event.detail === "dark-mode"
         }
     },
     watch: {
         darkMode: {
             handler() {
                 // toggle classes to overwrite media-query styles for color-schemes
-                const htmlTag = document.querySelector('html')
+                const htmlTag = document.documentElement
                 if (this.darkMode) {
-                    htmlTag.classList.replace("light-mode", "dark-mode");
+                    htmlTag.classList.replace("light-mode", "dark-mode")
                     this.labelText = this.labelTextDarkMode
                 } else {
-                    htmlTag.classList.replace("dark-mode", "light-mode");
+                    htmlTag.classList.replace("dark-mode", "light-mode")
                     this.labelText = this.labelTextLightMode
                 }
+
+                // emits custom events from html-tag
                 htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', {detail: this.darkMode ? 'dark-mode' : 'light-mode'}))
             },
             immediate: true

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

@@ -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
-         */
-        validationTooltip: {
-            type: String,
-            default: ""
-        },
-        /**
-         * list of input-requirements for CmdListOfRequirements-component
-         */
-        inputRequirements: {
-            type: Array,
-            default() {
-                return []
-            }
-        },
-        /**
-         * input-attributes for CmdListOfRequirements-component
+         * properties 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: String,
-            default: ""
         }
     },
     methods: {

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -6,12 +6,7 @@
     },
     "showLabelTexts": {
         "comments": [
-            "show a label-text"
-        ]
-    },
-    "cmdHeadline": {
-        "comments": [
-            "properties for CmdHeadline-component"
+            "show a label-text for each entry"
         ]
     },
     "showLabels": {
@@ -28,5 +23,10 @@
         "comments": [
             "link physical address (street, no, zip and city) with Google Maps"
         ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
     }
 }

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -157,6 +157,14 @@
             "type-property must be set to textarea"
         ]
     },
+    "textCharacters": {
+        "comments": [
+            "text shown in front of character-count below textarea",
+            "",
+            "type-property must be set to textarea",
+            "showCharactersTextarea-property must be activated"
+        ]
+    },
     "showSearchButton": {
         "comments": [
             "toggle visibility of search-button (next to search-field)"
@@ -185,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'",
             ""
         ]
     },
@@ -194,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'",
             ""
         ]
     },
@@ -203,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'",
             ""
         ]
     },
@@ -212,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'",
             ""
         ]
     },
@@ -254,5 +262,10 @@
             "type-property must be set to 'password'",
             ""
         ]
+    },
+    "cmdListOfRequirements": {
+        "comments": [
+            "properties for CmdListOfRequirements-component"
+        ]
     }
 }

package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json

@@ -34,6 +34,11 @@
             "icon to show error-status"
         ]
     },
+    "showHeadline": {
+        "comments": [
+            "toggle headline-visibility"
+        ]
+    },
     "cmdHeadline": {
         "comments": [
             "properties of CmdHeadline-component"

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -1,9 +1,4 @@
 {
-    "cmdHeadline": {
-        "comments": [
-            "properties for CmdHeadline-component"
-        ]
-    },
     "link": {
         "comments": [
             "set a link to a detail page"
@@ -38,5 +33,10 @@
         "comments": [
             "additional/miscellaneous text (shown below holiday-closed-text/opening hours)"
         ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
     }
 }

package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json

@@ -28,7 +28,7 @@
     },
     "appendPage": {
         "comments": [
-            "activate if page to share is not given by json-data)"
+            "activate if page to share is not given by json-data"
         ]
     }
 }

package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json

@@ -1,4 +1,14 @@
 {
+    "fullWidth": {
+        "comments": [
+            "activate to stretch component to full width (of parent element)"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
     "thumbnailScrollerItems": {
         "comments": [
             "list of thumbnail-scroller-items"

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

@@ -200,7 +200,7 @@ export default {
             // check if field has a minimum length
             if(this.$attrs.minlength) {
                 standardRequirements.push({
-                    message: "Input has minimum length (" + this.modelValue.length + "/" + this.$attrs.minlength + ")",
+                    message: this.getMessage("cmdfieldvalidation.input_has_minimum_length") + "(" + this.modelValue.length + "/" + this.$attrs.minlength + ")",
                     valid(value, attributes) {
                         return value.length >= attributes.minlength
                     }
@@ -230,7 +230,7 @@ export default {
     }
 }
 
-function validateSpecialCharacters(message = "Field contains special character") {
+function validateSpecialCharacters(message = "special character - replace with getMessage") {
   return {
       message,
       valid(value) {

package/src/mixins/GlobalDefaultMessageProperties.js

@@ -7,7 +7,8 @@ export default {
                 "cmdfieldvalidation.information_filled_correctly": "This information is filled correctly!",
                 "cmdfieldvalidation.caps_lock_is_activated": "Attention: Caps lock is activated!",
                 "cmdfieldvalidation.required_field_is_filled": "Required field is filled!",
-                "cmdfieldvalidation.field_contains_special_character": "Field contains Special character"
+                "cmdfieldvalidation.field_contains_special_character": "Field contains special character",
+                "cmdfieldvalidation.input_has_minimum_length": "Input has minimum length"
             }
         }
     }

package/src/utilities.js

@@ -2,6 +2,10 @@ function getRoute (entry) {
     if(entry.path) {
         return entry.path
     }
+
+    if(entry.route == null || typeof entry.route !== "object" || (!entry.route.path && !entry.route.name)) {
+        console.error("Error in router configuration. Expected object with 'path' or 'name', got", entry.route)
+    }
     return entry.route
 }