comand-component-library 3.1.86 → 3.1.87

package/package.json

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

package/src/App.vue

@@ -499,6 +499,17 @@
                                             :status="validationStatus"
                                             :disabled="disabledStatus"
                             />
+                            <CmdFormElement element="input"
+                                            v-model="checkboxValues"
+                                            inputValue="checkboxValue3"
+                                            type="checkbox"
+                                            id="checkbox-with-value-3"
+                                            :status="validationStatus"
+                                            :disabled="disabledStatus">
+                                            <template v-slot:labeltext>
+                                                Labeltext with <a href="#">link</a> given by slot
+                                            </template>
+                            </CmdFormElement>
                         </div>
                     </div>
                     <h3>Checkboxes (replaced)</h3>
@@ -1137,9 +1148,7 @@
                             :cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
             />
             <CmdOpeningHours :openingHours="openingHoursData"
-                             :closed="true"
                              :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
-                             textOpenClosed="Closed right now!"
                              textHolidaysClosed="Closed on holidays"
                              textMiscInfo="Miscellaneous information"
             />
@@ -1248,6 +1257,8 @@ import {openFancyBox} from "@/components/CmdFancyBox"
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
 
+import {localizedTime} from "./components/CmdOpeningHours"
+
 export default {
     name: "App",
     components: {
@@ -1422,6 +1433,9 @@ export default {
         }
     },
     methods: {
+        localizedTime(language) {
+            return (h, m) => (localizedTime(language))(h, m).toLowerCase()
+        },
         closeCookieDisclaimer(event) {
             this.fancyBoxCookieDisclaimer = false
             alert(event.join(", "))

package/src/assets/data/opening-hours.json

@@ -1,29 +1,29 @@
 [
       {
             "day": "Mo",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Tu",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "We",
-            "fromTime": "08:00h",
-            "tillTime": "17:30h"
+            "fromTime": "08:00",
+            "tillTime": "17:30"
       },
 
       {
             "day": "Th",
-            "fromTime": "08:00h",
-            "tillTime": "17:00h"
+            "fromTime": "08:00",
+            "tillTime": "17:00"
       },
       {
             "day": "Fr",
-            "fromTime": "08:00h",
-            "tillTime": "15:00h"
+            "fromTime": "08:00",
+            "tillTime": "15:00"
       }
 ]
 

package/src/assets/styles/global-styles.scss

@@ -271,7 +271,7 @@ html {
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
 
-    :where(label, .label) .label-text [class*="icon"] {
+    :where(label, .label) .label-text > [class*="icon"] {
       background: var(--dark-gray);
     }
   }

package/src/components/CmdFakeSelect.vue

@@ -23,15 +23,11 @@
                 <CmdTooltipForInputElements
                     v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
                     ref="tooltip"
-                    :showRequirements="showRequirements"
-                    :inputRequirements="inputRequirements"
                     :validationStatus="validationStatus"
                     :validationMessage="getValidationMessage"
                     :validationTooltip="validationTooltip"
-                    :inputAttributes="$attrs"
-                    :inputModelValue="modelValue"
-                    :helplink="helplink"
                     :relatedId="tooltipId"
+                    :cmdListOfRequirements="listOfRequirements"
                 />
                 <!-- end CmdTooltipForInputElements -->
 

package/src/components/CmdFormElement.vue

@@ -22,8 +22,13 @@
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
-            <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
-            <slot name="labeltext" />
+            <span>
+                <template v-if="labelText">{{ labelText }}</template>
+                <!-- begin slot 'labeltext' -->
+                <slot v-else name="labeltext" />
+                <!-- end slot 'labeltext' -->
+                <sup v-if="$attrs.required">*</sup>
+            </span>
 
             <!-- begin CmdTooltipForInputElements -->
             <CmdTooltipForInputElements
@@ -108,7 +113,15 @@
                     :disabled="$attrs.disabled"
                     :aria-invalid="validationStatus === 'error'"
                 />
-                <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
+                <span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
+                    <span>
+                        <template v-if="labelText">{{ labelText }}</template>
+                        <!-- begin slot 'labeltext' -->
+                        <slot v-else name="labeltext" />
+                        <!-- end slot 'labeltext' -->
+                        <sup v-if="$attrs.required">*</sup>
+                    </span>
+                </span>
             </template>
 
             <!-- begin labels for toggle-switch with switch-label -->
@@ -597,33 +610,9 @@ export default {
                     iconClass: "icon-not-visible",
                 }
             }
-        },
-        /**
-         * properties for CmdListOfRequirements-component
-         */
-        cmdListOfRequirements: {
-            type: Object,
-            default() {
-                return {}
-            }
         }
     },
     computed: {
-        listOfRequirements() {
-            if (this.cmdListOfRequirements === undefined) {
-                return {
-                    showRequirements: true,
-                    showHeadline: true,
-                    validationTooltip: this.validationTooltip,
-                    inputRequirements: [],
-                    inputAttributes: this.$attrs,
-                    inputModelValue: this.modelValue,
-                    helplink: {},
-                    labelText: this.labelText
-                }
-            }
-            return this.cmdListOfRequirements
-        },
         elementAttributes() {
             const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
             const attributes = {
@@ -807,7 +796,9 @@ export default {
         },
         closeTooltipOnBlur() {
             // close tooltip by calling function from CmdTooltipForInputElements using $refs
-            this.$refs.tooltip.hideTooltip()
+            if(this.$refs.tooltip) {
+                this.$refs.tooltip.hideTooltip()
+            }
         }
     },
     watch: {

package/src/components/CmdListOfRequirements.vue

@@ -135,7 +135,7 @@ export default {
             type: Object,
             default() {
                 return {
-                    headlineLevel: 4
+                    headlineLevel: 6
                 }
             }
         }

package/src/components/CmdMainNavigation.vue

@@ -19,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
+                    :class="{'active' : navigationEntry.active, 'open' : navigationEntry.open, 'has-subentries': navigationEntry?.subentries?.length}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"
@@ -226,14 +226,16 @@ export default {
     methods: {
         executeLink(event, navigationEntry) {
             if (navigationEntry.target || (navigationEntry.path.length > 1)) {
+                this.showOffcanvas = false
                 return true
             }
             if (navigationEntry.path === '#' || navigationEntry.path === '') {
                 event.preventDefault()
+                this.showOffcanvas = false
                 this.$emit('click', navigationEntry.path)
 
             }
-            if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
+            if (!(navigationEntry?.subentries?.length)) {
                 this.showOffcanvas = false
             } else {
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)

package/src/components/CmdOpeningHours.vue

@@ -6,21 +6,21 @@
 
         <!-- begin opening-status with link to detail-page -->
         <template v-if="link && link?.path && link?.show">
-            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: closed}">{{ textOpenClosed }}</a>
-            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: closed}">{{ textOpenClosed }}</router-link>
-            <button v-if="link.type === 'button'" :class="['button', {closed: closed}]">{{ textOpenClosed }}</button>
+            <a v-if="link.type === 'href'" :href="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</a>
+            <router-link v-if="link.type === 'router'"  :to="link.path" :class="{closed: isClosed}">{{ textOpenClosed }}</router-link>
+            <button v-if="link.type === 'button'" :class="['button', {closed: isClosed}]">{{ textOpenClosed }}</button>
         </template>
         <!-- end opening-status with link to detail-page -->
 
         <!-- begin opening-status (without link) -->
-        <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
+        <span v-else :class="{'closed': isClosed}">{{ textOpenClosed }}</span>
         <!-- end opening-status (without link) -->
 
         <!-- begin opening-days and -hours -->
         <dl>
-            <template v-for="day in openingHours" :key="day.day">
+            <template v-for="day in openingHoursFormatted" :key="day.day">
                 <dt>{{ day.day }}:</dt>
-                <dd>{{ day.fromTime }}&ndash;{{ day.tillTime }}</dd>
+                <dd>{{ getTime(day.fromTime)}}&ndash;{{ getTime(day.tillTime)}}</dd>
             </template>
         </dl>
         <!-- end opening-days and -hours -->
@@ -40,6 +40,36 @@
 // import components
 import CmdHeadline from "./CmdHeadline"
 
+export function localizedTime(language) {
+    return (hour, minute) => {
+        const now = new Date()
+        now.setHours(hour, minute, 0, 0)
+        return new Intl.DateTimeFormat(language, {timeStyle: "short"}).format(now)
+    }
+}
+
+export function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
+    function addLeadingZero(time, addLeadingZero) {
+        if(addLeadingZero && time < 10) {
+            return "0" + time
+        }
+        return time
+    }
+
+    return (hour, minute) => {
+        if(suffix2) {
+            let hour12 = hour
+            let currentSuffix = suffix1
+            if(hour12 > 12) {
+                hour12 -= 12
+                currentSuffix = suffix2
+            }
+            return addLeadingZero(hour12, hoursLeadingZero) + separator + addLeadingZero(minute, true) + currentSuffix
+        }
+        return addLeadingZero(hour, hoursLeadingZero) + separator + addLeadingZero(minute, true) + suffix1
+    }
+}
+
 export default {
     name: "CmdOpeningHours",
     components: {
@@ -63,11 +93,18 @@ export default {
             default: false
         },
         /**
-         * text for open/closed-information
+         * text for 'open'-information
          */
-        textOpenClosed: {
+        textOpen: {
             type: String,
-            required: true
+            default: "Open right now!"
+        },
+        /**
+         * text for 'closed'-information
+         */
+        textClosed: {
+            type: String,
+            default: "Closed right now!"
         },
         /**
          * list of opening-hours
@@ -96,6 +133,77 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
+        },
+        timeFormatter: {
+            type: Function,
+            required: false
+        },
+        componentHandlesClosedStatus: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        textOpenClosed() {
+            return this.isClosed ? this.textClosed : this.textOpen
+        },
+        openingHoursFormatted() {
+            const weekdays = []
+            for(let i = 0; i < this.openingHours.length; i++) {
+                const openingHours = {}
+                const splitFromTime = this.openingHours[i].fromTime.split(/[:.]/)
+                const splitTillTime = this.openingHours[i].tillTime.split(/[:.]/)
+
+                openingHours.day = this.openingHours[i].day
+                openingHours.fromTime = {
+                    hours: parseInt(splitFromTime[0]),
+                    mins: parseInt(splitFromTime[1])
+                }
+                openingHours.tillTime = {
+                    hours: parseInt(splitTillTime[0]),
+                    mins: parseInt(splitTillTime[1])
+                }
+                weekdays.push(openingHours)
+            }
+            return weekdays
+        },
+        isClosed() {
+            if(!this.componentHandlesClosedStatus) {
+                return this.closed
+            }
+
+            const currentDate = new Date()
+            let currentDay = currentDate.getDay()
+
+            // fix order and check if currentDay equals 0 === sunday. Data are expected to start with monday
+            if (currentDay === 0){
+                currentDay = 6
+            } else {
+                currentDay -= 1
+            }
+
+            const openingHours = this.openingHoursFormatted[currentDay]
+
+            if(this.openingHoursFormatted[currentDay]) {
+                const openingHoursFrom = new Date()
+                openingHoursFrom.setHours(openingHours.fromTime.hours, openingHours.fromTime.mins)
+
+                const openingHoursTill = new Date()
+                openingHoursTill.setHours(openingHours.tillTime.hours, openingHours.tillTime.mins)
+
+                if (openingHoursFrom <= currentDate && currentDate <= openingHoursTill) {
+                    return false
+                }
+            }
+            return true
+        }
+    },
+    methods: {
+        getTime(time) {
+            if(this.timeFormatter) {
+                return this.timeFormatter(time.hours, time.mins)
+            }
+           return timeFormatting(":", " hrs", "", false)(time.hours, time.mins)
         }
     }
 }

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

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -262,10 +262,5 @@
             "type-property must be set to 'password'",
             ""
         ]
-    },
-    "cmdListOfRequirements": {
-        "comments": [
-            "properties for CmdListOfRequirements-component"
-        ]
     }
 }

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/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) => {