comand-component-library 3.1.89 → 3.1.90

package/package.json

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

package/src/App.vue

@@ -631,7 +631,7 @@
                         <dl>
                             <dt>Selected value(s):</dt>
                             <dd>
-                                <output>{{ inputGroupValue1 }}</output>
+                                <output>{{ inputGroupRadio }}</output>
                             </dd>
                         </dl>
                         <CmdInputGroup
@@ -646,7 +646,7 @@
                         <dl>
                             <dt>Selected value:</dt>
                             <dd>
-                                <output>{{ inputGroupValue2 }}</output>
+                                <output>{{ inputGroupCheckbox }}</output>
                             </dd>
                         </dl>
                         <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
@@ -1152,6 +1152,7 @@
                                  :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
                                  textHolidaysClosed="Closed on holidays"
                                  textMiscInfo="Miscellaneous information"
+                                 :checkInterval="0"
                 />
                 <CmdAddressData :addressData="addressData"
                                 :linkGoogleMaps="false"
@@ -1491,8 +1492,6 @@ export default {
 </script>
 
 <style lang="scss">
-
-
 .list-status {
     .active {
         color: var(--text-color);

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

@@ -51,6 +51,12 @@
   }
 }
 
+#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;
 }

package/src/components/CmdMainNavigation.vue

@@ -300,14 +300,13 @@ export default {
     }
 }
 
-
 @media only screen and (max-width: $medium-max-width) {
     .cmd-main-navigation#main-navigation-wrapper {
         --nav-transition: all .5s linear;
         display: flex;
         background: none; /* overwrite framework-css */
         border: 0; /* overwrite framework-css */
-        padding: 0;
+        padding: 0 var(--default-padding);
 
         /* begin offcanvas-navigation */
         &:not(.persist-on-mobile) {

package/src/components/CmdSiteHeader.vue

@@ -100,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/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]
       }