comand-component-library 3.1.87 → 3.1.90

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

@@ -24,6 +24,16 @@
             "day": "Fr",
             "fromTime": "08:00",
             "tillTime": "15:00"
+      },
+      {
+            "day": "Sa",
+            "fromTime": "08:00",
+            "tillTime": "17:28"
+      },
+      {
+            "day": "So",
+            "fromTime": "08:00",
+            "tillTime": "22:22"
       }
 ]
 

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

@@ -4,6 +4,12 @@
 /*
 - IMPORTS ------------------------
 - COMPONENTS AND GLOBAL STYLES ------------------------
+  * ------------------------
+    - main structure
+
+  A ------------------------
+    - avoid-scrolling
+
   E ------------------------
     - error-styles (for form-elements)
 
@@ -33,12 +39,29 @@
 @import 'variables'; /* scss-variables (only used for media-query-breakpoints) */
 /* ---------------------------------------------- END IMPORTS -------------------------------------------------- */
 
+/* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
+/* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
+#page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  .cmd-site-footer {
+    margin-top: auto;
+  }
+}
+
+#component-library {
+  border: 1px solid red;
+  scroll-padding-top: unset !important;
+  scroll-snap-type: unset !important;
+}
+
 body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
   transition: background linear .5s;
 }
+/* end styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
-
-/* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
   overflow: hidden;

package/src/components/CmdBankAccountData.vue

@@ -8,7 +8,7 @@
         <dl>
             <template v-for="(entry, index) in accountData" :key="index">
                 <dt>{{ entry.text }}</dt>
-                <dd v-if="allowCopyByClick && entry.allowCopy" class="flex-container no-flex">
+                <dd v-if="allowCopyByClick && entry.allowCopy">
                     <span>{{ entry.value }}</span>
                     <a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
                         <span :class="iconCopy.iconClass"></span>
@@ -92,7 +92,8 @@ export default {
 <style lang="scss">
 /* begin cmd-bank-account-data ---------------------------------------------------------------------------------------- */
 .cmd-bank-account-data {
-    dd.flex-container {
+    dd {
+        display: flex;
         gap: calc(var(--default-gap) / 2);
 
         > span {

package/src/components/CmdMainNavigation.vue

@@ -1,14 +1,14 @@
 <template>
     <div
         :class="[
-            'cmd-main-navigation main-navigation-wrapper',
+            'cmd-main-navigation',
             {
                 'hide-sub-navigation' : !showSubNavigations,
                 'open-off-canvas': showOffcanvas,
                 'persist-on-mobile': persistOnMobile,
                 'show-content-overlay': showContentOverlay
             }
-        ]">
+        ]" id="main-navigation-wrapper">
         <nav>
             <!-- begin main-level -->
             <ul :class="{'stretch-items' : stretchMainItems}">
@@ -225,22 +225,27 @@ export default {
     },
     methods: {
         executeLink(event, navigationEntry) {
+            // execute default-link
             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?.length)) {
-                this.showOffcanvas = false
-            } else {
+            // toggle subentries (no link execution)
+            if(navigationEntry?.subentries?.length) {
+                event.preventDefault()
                 // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
                 navigationEntry.open = !navigationEntry.open
+                return
+            }
+
+            // emit event to handle navigation from outside
+            if (navigationEntry.path === '#' || navigationEntry.path === '') {
+                event.preventDefault()
+                this.$emit('click', navigationEntry.path)
             }
+
+            this.showOffcanvas = false
         },
         getRoute(navigationEntry) {
             return getRoute(navigationEntry)
@@ -295,9 +300,8 @@ export default {
     }
 }
 
-
 @media only screen and (max-width: $medium-max-width) {
-    .cmd-main-navigation {
+    .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
         display: flex;
         background: none; /* overwrite framework-css */
@@ -388,14 +392,6 @@ export default {
                             }
                         }
 
-                        > a {
-                            span {
-                                & + span[class*="icon"]::before {
-                                    display: inline-block;
-                                }
-                            }
-                        }
-
                         /* sub-level 1 */
                         ul {
                             li {
@@ -406,9 +402,15 @@ export default {
                                 &:last-child {
                                     border-bottom: 0;
                                 }
-
-                                a {
+                                > a {
                                     padding-left: calc(var(--default-margin) * 2);
+
+                                    span {
+                                        & + span[class*="icon"]::before {
+                                            display: inline-block;
+                                            transform: rotate(0);
+                                        }
+                                    }
                                 }
 
                                 /* sub-level 2 */
@@ -435,26 +437,6 @@ export default {
                                 display: block;
                                 opacity: 1;
                                 transition: var(--nav-transition);
-
-                                > li {
-                                    > a {
-                                        span {
-                                            + span[class*="icon"]::before {
-
-                                            }
-                                        }
-                                    }
-
-                                    &.open {
-                                        > a {
-                                            span {
-                                                + span[class*="icon"]::before {
-
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
                             }
                         }
                     }

package/src/components/CmdOpeningHours.vue

@@ -134,13 +134,40 @@ export default {
             type: Object,
             required: false
         },
+        /**
+         * option to set custom time format by function
+         */
         timeFormatter: {
             type: Function,
             required: false
         },
+        /**
+         * activate if component should update open-/closed-status on its own
+         */
         componentHandlesClosedStatus: {
             type: Boolean,
             default: true
+        },
+        /**
+         * set the interval (in milliseconds) when the open-/closed-status should be checked (and updated)
+         */
+        checkInterval: {
+            type: Number,
+            default: 5000
+        }
+    },
+    mounted() {
+        if(this.componentHandlesClosedStatus && this.checkInterval > 0) {
+            // create new property on component by 'this.property-name' and assign value (id) from setInterval (so it can be cleared in unmount)
+            this.$_CmdOpeningHours_intervalId = setInterval(() => {
+                // use arrow-function to assure that 'this' is the component
+                this.currentTime = new Date()
+            }, this.checkInterval)
+        }
+    },
+    data() {
+        return {
+            currentTime: new Date()
         }
     },
     computed: {
@@ -172,8 +199,7 @@ export default {
                 return this.closed
             }
 
-            const currentDate = new Date()
-            let currentDay = currentDate.getDay()
+            let currentDay = this.currentTime.getDay()
 
             // fix order and check if currentDay equals 0 === sunday. Data are expected to start with monday
             if (currentDay === 0){
@@ -191,7 +217,7 @@ export default {
                 const openingHoursTill = new Date()
                 openingHoursTill.setHours(openingHours.tillTime.hours, openingHours.tillTime.mins)
 
-                if (openingHoursFrom <= currentDate && currentDate <= openingHoursTill) {
+                if (openingHoursFrom <= this.currentTime && this.currentTime <= openingHoursTill) {
                     return false
                 }
             }
@@ -205,6 +231,15 @@ export default {
             }
            return timeFormatting(":", " hrs", "", false)(time.hours, time.mins)
         }
+    },
+    beforeUnmount() {
+        if(this.$_CmdOpeningHours_intervalId) {
+            // remove interval
+            clearInterval(this.$_CmdOpeningHours_intervalId)
+
+            // clear interval-id
+            this.$_CmdOpeningHours_intervalId = null
+        }
     }
 }
 </script>

package/src/components/CmdSiteHeader.vue

@@ -89,6 +89,10 @@ export default {
         padding: 0 var(--default-padding);
     }
 
+    .cmd-main-navigation nav {
+        width: auto;
+    }
+
     .top-header {
         .cmd-list-of-links {
             padding-top: calc(var(--default-padding) / 2);
@@ -96,7 +100,8 @@ export default {
         }
     }
 
-    > .cmd-main-navigation:last-child {
+    // use id to ensure high specificity
+    > .cmd-main-navigation#main-navigation-wrapper:last-child {
         border-bottom: 0;
     }
 

package/src/components/CmdTabs.vue

@@ -8,6 +8,7 @@
                 </a>
             </li>
         </ul>
+        <!-- begin slot -->
         <template v-if="useSlot">
             <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
                 <!-- begin slot-content -->
@@ -15,10 +16,12 @@
                 <!-- end slot-content -->
             </div>
         </template>
+        <!-- end slot -->
         <div v-else aria-live="assertive">
             <!-- begin CmdHeadline -->
             <CmdHeadline
-               v-bind="CmdHeadline"
+               v-if="cmdHeadline"
+               v-bind="cmdHeadline"
                :headlineText="tabs[showTab].headlineText"
                :headlineLevel="tabs[showTab].headlineLevel"
             />

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
-        <component v-if="innerWrapper" :is="innerComponent" :class="setInnerClass">
+        <section v-if="innerWrapper" :class="setInnerClass">
             <a v-if="anchorId" :id="anchorId"></a>
             <!-- begin slot-content -->
             <slot></slot>
             <!-- end slot-content -->
-        </component>
+        </section>
         <template v-else>
             <!-- begin slot-content -->
             <a v-if="anchorId" :id="anchorId"></a>

package/src/directives/scrollPadding.js

@@ -0,0 +1,6 @@
+export default {
+    mounted(el) {
+        const heightHeader = el.outerHeight
+        document.documentElement.style.scrollPaddingTop = (heightHeader / 10) + "rem"
+    }
+}

package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json

@@ -46,12 +46,17 @@
     },
     "timeFormatter": {
         "comments": [
-            "properties for CmdHeadline-component"
+            "option to set custom time format by function"
         ]
     },
     "componentHandlesClosedStatus": {
         "comments": [
-            "properties for CmdHeadline-component"
+            "activate if component should update open-/closed-status on its own"
+        ]
+    },
+    "checkInterval": {
+        "comments": [
+            "set the interval (in milliseconds) when the open-/closed-status should be checked (and updated)"
         ]
     }
 }

package/src/main.js

@@ -23,6 +23,8 @@ import "clickout-event"
 import directiveTelephone from "./directives/telephone"
 // directive to set focus on specific form-elements
 import directiveFocus from "./directives/focus"
+// directive to set scroll-padding to place anchors correctly below sticky header
+import directiveScrollPadding from "./directives/scrollPadding"
 
 /* begin imports css from comand-component-library ---------------------------------------------------------------------------------------- */
 /* import additional iconfont containing company-logos */
@@ -58,4 +60,4 @@ import router from "./router"
 // })
 
 // createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
-createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
+createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).directive('scrollPadding', directiveScrollPadding).mount('#app')

package/src/mixins/FieldValidation.js

@@ -210,8 +210,8 @@ export default {
         inputRequirements() {
             const standardRequirements = []
             // check if field is required
-            if(this.$attrs.required || this.required) {
-                const inputRequired = this.required
+            if(this.$attrs.required || (Object.hasOwn(this, "required") && this.required)) {
+                const inputRequired = Object.hasOwn(this, "required") ? this.required : this.$attrs.required
                 standardRequirements.push({
                     message: this.getRequirementMessage(),
                     valid(value, attributes) {

package/src/mixins/I18n.js

@@ -53,10 +53,11 @@ export default {
       return message
     },
     getDefaultMessageProperty(key) {
-      if (this.defaultMessageProperties && this.defaultMessageProperties[key]) {
+      if (Object.hasOwn(this, "defaultMessageProperties") && this.defaultMessageProperties && this.defaultMessageProperties[key]) {
         return this.defaultMessageProperties[key]
       }
-      const propertyKey = Object.keys(this).find(p => p.slice(-24) === "DefaultMessageProperties")
+      //const propertyKey = Object.keys(this).find(p => p.slice(-24) === "DefaultMessageProperties")
+      const propertyKey = Object.hasOwn(this, "fieldValidationDefaultMessageProperties") ? "fieldValidationDefaultMessageProperties" : null
       if (propertyKey && this[propertyKey]?.[key]) {
         return this[propertyKey][key]
       }