comand-component-library 3.1.80 → 3.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.80",
+  "version": "3.1.83",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -137,7 +137,6 @@
                     <h2>Inputfields in Columns</h2>
                     <div class="flex-container">
                         <CmdFormElement element="input"
-                                        labelText="Label for inputfield (with tooltip):"
                                         type="text"
                                         minlength="5"
                                         id="inputfield1"
@@ -145,10 +144,13 @@
                                         v-model="inputField1"
                                         tooltipText="This is a tooltip!"
                                         :status="validationStatus"
-                                        :disabled="disabledStatus"
-                        />
+                                        :disabled="disabledStatus">
+                            <template v-slot:labeltext>
+                                <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
+                            </template>
+                        </CmdFormElement>
                         <CmdFormElement element="input"
-                                        labelText="Label for inputfield (required):"
+                                        labelText="Label for inputfield (required, with tooltip):"
                                         type="text"
                                         required="required"
                                         minlength="5"
@@ -1079,7 +1081,10 @@
         <a id="section-thumbnail-scroller"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Thumbnail-Scroller</h2>
+            <h3>Thumbnail-Scroller as wide as content</h3>
             <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
+            <h3>Thumbnail-Scroller stretched to full width</h3>
+            <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" :fullWidth="true" />
         </CmdWidthLimitationWrapper>
 
         <a id="section-tooltip"></a>
@@ -1134,7 +1139,7 @@
                              textMiscInfo="Miscellaneous information"
             />
             <CmdAddressData :addressData="addressData"
-                            :linkGoogleMaps="true"
+                            :linkGoogleMaps="false"
                             :cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
             />
         </div>
@@ -1226,8 +1231,8 @@ import CmdSiteHeader from "./components/CmdSiteHeader"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
 import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
-import CmdTabs from "@/components/CmdTabs.vue"
 import CmdTable from "@/components/CmdTable.vue"
+import CmdTabs from "@/components/CmdTabs.vue"
 import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
 import CmdToggleDarkMode from "@/components/CmdToggleDarkMode.vue"
 import CmdTooltip from "@/components/CmdTooltip.vue"

package/src/components/CmdAddressData.vue

@@ -26,14 +26,14 @@
                        :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
                         <span v-if="addressData.address.streetNo" class="street-address">{{ addressData.address.streetNo }}</span><br/>
                         <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}&nbsp;</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span>
-                        <span  v-if="addressData.country" class="country-name">{{ addressData.country }}</span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </a>
                     <template v-else>
                         <span v-if="addressData.address.streetNo" class="street-address">{{addressData.address.streetNo }}</span><br/>
-                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }}</span>
-                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span>
-                        <span  v-if="addressData.country" class="country-name">{{ addressData.country }}</span>
+                        <span v-if="addressData.address.zip" class="postal-code">{{ addressData.address.zip }} </span>
+                        <span v-if="addressData.address.city" class="locality">{{ addressData.address.city }}</span><br/>
+                        <span  v-if="addressData.address.country" class="country-name">{{ addressData.address.country }}</span>
                     </template>
                 </dd>
                 <!-- end address -->
@@ -87,15 +87,15 @@
                     <a :href="locateAddress" target="google-maps" v-if="linkGoogleMaps"
                        :title="getMessage('cmdaddressdata.title.open_address_on_google_maps')">
                         <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
-                        <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
+                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
+                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
+                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
                     </a>
                     <template v-else>
                         <span class="street-address" v-if="addressData.address.streetNo">{{ addressData.address.streetNo }}</span><br/>
-                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }}</span>
-                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span>
-                        <span class="country-name" v-if="addressData.country">{{ addressData.country }}</span>
+                        <span class="postal-code" v-if="addressData.address.zip">{{ addressData.address.zip }} </span>
+                        <span class="locality" v-if="addressData.address.city">{{ addressData.address.city }}</span><br/>
+                        <span class="country-name" v-if="addressData.address.country">{{ addressData.address.country }}</span>
                     </template>
                 </li>
                 <li v-if="addressData.telephone?.value">
@@ -137,19 +137,12 @@ export default {
             default: true
         },
         /**
-         * show a label-text
+         * show a label-text for each entry
          */
         showLabelTexts: {
             type: Boolean,
             default: true
         },
-        /**
-         * properties for CmdHeadline-component
-         */
-        cmdHeadline: {
-            type: Object,
-            required: false
-        },
         /**
          * option to toggle labels (i.e. telephone, email etc.) in front/left of data
          */
@@ -170,6 +163,13 @@ export default {
         linkGoogleMaps: {
             type: Boolean,
             default: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -186,13 +186,12 @@ export default {
     dl {
         grid-row-gap: calc(var(--default-gap) / 2);
 
-        dt, dd {
+        dt {
             display: flex;
             align-items: center;
         }
     }
 
-
     ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);

package/src/components/CmdCompanyLogo.vue

@@ -13,7 +13,7 @@
 import {getRoute} from "../utilities.js"
 
 export default {
-    name: "CmdLogo",
+    name: "CmdCompanyLogo",
     data() {
         return {
             prefersColorScheme: ""

package/src/components/CmdFormElement.vue

@@ -20,9 +20,10 @@
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
-        <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
+        <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
-            <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            <slot name="labeltext" />
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
@@ -211,7 +212,7 @@ import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     inheritAttrs: false,
-    name: "FormElement",
+    name: "CmdFormElement",
     components: {
         CmdTooltipForInputElements
     },
@@ -423,6 +424,16 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * text shown in front of character-count below textarea
+         *
+         * type-property must be set to textarea
+         * showCharactersTextarea-property must be activated
+         */
+        textCharacters: {
+            type: String,
+            default: "Characters"
+        },
         /**
          * toggle visibility of search-button (next to search-field)
          */
@@ -591,7 +602,7 @@ export default {
                     iconClass: "icon-not-visible",
                 }
             }
-        },
+        }
     },
     computed: {
         elementAttributes() {
@@ -640,7 +651,7 @@ export default {
             return false
         },
         charactersTextarea() {
-            return "Characters: " + this.modelValue.length + "/" + this.getMaxLength()
+            return this.textCharacters + " " + this.modelValue.length + "/" + this.getMaxLength()
         },
         validationTooltip() {
             if (!this.useCustomTooltip) {

package/src/components/CmdListOfRequirements.vue

@@ -94,7 +94,7 @@ export default {
          * set a helplink to a different page for further support
          */
         helplink: {
-            type: String,
+            type: Object,
             required: false
         },
         /**

package/src/components/CmdShareButtons.vue

@@ -49,7 +49,7 @@ export default {
             required: false
         },
         /**
-         * activate if page to share is not given by json-data)
+         * activate if page to share is not given by json-data
          */
         appendPage: {
             type: Boolean,

package/src/components/CmdSwitchLanguage.vue

@@ -4,18 +4,18 @@
             <li v-for="(language, index) in languages" :key="index">
                 <!-- begin link-type 'href' -->
                 <a v-if="language.link.type === 'href'" :href="language.link.path"
-                   :class="['flag', language.iso2, {'active': language.active}]"
+                   :class="['flag', language.iso2, {'active': activeLanguage(language)}]"
                    :title="language.tooltip"
                    @click="$emit('click', { originalEvent:  $event, language} )">
                     <img :src="getFlagURL(language.iso2)" :alt="language.name" />
                 </a>
-                <!-- end link-type 'href -->
+                <!-- end link-type 'href' -->
 
                 <!-- begin link-type 'router' -->
                 <router-link v-else
-                             :class="['flag', language.iso2]"
-                             :to="getRoute(language)" :title="language.tooltip"
-                             @click="$emit('click', { originalEvent:  $event, language})">
+                     :class="['flag', language.iso2]"
+                     :to="getRoute(language)" :title="language.tooltip"
+                     @click="$emit('click', { originalEvent:  $event, language})">
                     <img :src="getFlagURL(language.iso2)" :alt="language.name" />
                 </router-link>
                 <!-- end link-type 'router' -->
@@ -45,6 +45,11 @@ export default {
         },
         getFlagURL(isoCode) {
             return require("../assets/images/flags/flag-" + isoCode + ".svg")
+        },
+        activeLanguage(language) {
+            if(language.active || language.iso2 === navigator.language) {
+                return true
+            }
         }
     }
 }
@@ -61,6 +66,14 @@ export default {
         li {
             list-style-type: none;
             margin: 0;
+
+            a:not(.active) {
+                filter: contrast(.5);
+
+                &:hover, &:focus, &:active {
+                    filter: none;
+                }
+            }
         }
     }
 }

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/CmdTooltipForInputElements.vue

@@ -116,8 +116,8 @@ export default {
          * helplink for CmdListOfRequirements-component
          */
         helplink: {
-            type: String,
-            default: ""
+            type: Object,
+            required: false
         }
     },
     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)"

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/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
 }