comand-component-library 3.1.92 → 3.1.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.92",
+  "version": "3.1.93",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.65",
+    "comand-frontend-framework": "^3.2.77",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -30,7 +30,6 @@
             <CmdWidthLimitationWrapper>
                 <div class="flex-container">
                     <ul>
-                        <li><a href="#section-accordion">Accordion</a></li>
                         <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
                         <li><a href="#section-bank-account-data">Bank Account Data</a></li>
                         <li><a href="#section-boxes">Boxes</a></li>
@@ -45,18 +44,18 @@
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
-                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                         <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
                         <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
-                        <li><a href="#section-tables">Tables</a></li>
-                        <li><a href="#section-tabs">Tabs</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-tables">Tables</a></li>
+                        <li><a href="#section-tabs">Tabs</a></li>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                         <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
                         <li><a href="#section-tooltip">Tooltip</a></li>

package/src/components/CmdBox.vue

@@ -26,7 +26,10 @@
             <!-- begin header for collapsible -->
             <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
                 <!-- begin CmdHeadline -->
-                <CmdHeadline v-if="cmdHeadline?.headlineText" v-bind="cmdHeadline" />
+                <CmdHeadline
+                    v-if="cmdHeadline?.headlineText"
+                    v-bind="cmdHeadline"
+                />
                 <!-- end CmdHeadline -->
                 <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
             </a>

package/src/components/CmdFormElement.vue

@@ -1,23 +1,24 @@
 <template>
-    <label v-if="(element === 'input' || element === 'select' || element === 'textarea')"
-           :class="[
-            'cmd-form-element',
-             validationStatus,
-             $attrs.class,
-               {
-                disabled: $attrs.disabled,
-                inline : displayLabelInline,
-                checked: isChecked,
-                'toggle-switch': toggleSwitch,
-                colored: colored,
-                on: colored && isChecked,
-                off: colored && !isChecked,
-                'has-state': validationStatus
-               }
-           ]"
-           :for="htmlId"
-           :title="$attrs.title"
-           ref="label">
+    <label
+       v-if="(element === 'input' || element === 'select' || element === 'textarea')"
+       :class="[
+        'cmd-form-element',
+         validationStatus,
+         $attrs.class,
+           {
+            disabled: $attrs.disabled,
+            inline : displayLabelInline,
+            checked: isChecked,
+            'toggle-switch': toggleSwitch,
+            colored: colored,
+            on: colored && isChecked,
+            off: colored && !isChecked,
+            'has-state': validationStatus
+           }
+       ]"
+       :for="htmlId"
+       :title="$attrs.title"
+       ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"

package/src/components/CmdLoginForm.vue

@@ -102,7 +102,7 @@
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineSendLoginForm"
-           v-bind="cmdHeadlineSendLoginForm"
+            v-bind="cmdHeadlineSendLoginForm"
         />
         <!-- end CmdHeadline -->
 

package/src/components/CmdSiteHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
+    <div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
         <!-- begin slot for elements above header -->
         <div class="top-header">
             <slot name="top-header"></slot>
@@ -13,22 +13,34 @@
         </header>
         <!-- end header-wrapper with slots for logo and other header elements -->
 
-        <!-- begin CmdMainNavigation -->
-        <CmdMainNavigation
-            v-if="cmdMainNavigation?.navigationEntries?.length"
-            v-bind="cmdMainNavigation"
-            :closeOffcanvas="closeOffcanvas"/>
-        <!-- end CmdMainNavigation -->
+        <header v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+            <!-- begin CmdCompanyLogo -->
+            <CmdCompanyLogo
+                v-if="cmdCompanyLogo"
+                v-bind="cmdCompanyLogo"
+            />
+            <!-- end CmdCompanyLogo -->
+
+            <!-- begin CmdMainNavigation -->
+            <CmdMainNavigation
+                v-if="cmdMainNavigation?.navigationEntries?.length"
+                v-bind="cmdMainNavigation"
+                :closeOffcanvas="closeOffcanvas"
+            />
+            <!-- end CmdMainNavigation -->
+        </header>
     </div>
 </template>
 
 <script>
 // import components
+import CmdCompanyLogo from "./CmdCompanyLogo"
 import CmdMainNavigation from "./CmdMainNavigation"
 
 export default {
     name: "CmdSiteHeader",
     components: {
+        CmdCompanyLogo,
         CmdMainNavigation
     },
     props: {
@@ -46,6 +58,15 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if navigation should be displayed inline to logo (otherwise it will be displayed below)
+         *
+         * @affectsStyling: true
+         */
+        navigationInline: {
+            type: Boolean,
+            default: false
+        },
         /**
          * use a grid for positioning of inner-elements (else a flex-container will be used)
          *
@@ -55,6 +76,13 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * properties for cmdCompanyLogo-component
+         */
+        cmdCompanyLogo: {
+            type: Object,
+            required: true
+        },
         /**
          * properties for CmdMainNavigation-component
          */

package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json

@@ -9,6 +9,16 @@
             "activated sticky-header (stays on top if page is scrolled)"
         ]
     },
+    "navigationInline": {
+        "comments": [
+            "activate if navigation should be displayed inline to logo (otherwise it will be displayed below)"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
     "useGrid": {
         "comments": [
             "use a grid for positioning of inner-elements (else a flex-container will be used)"
@@ -19,6 +29,11 @@
             ]
         }
     },
+    "cmdCompanyLogo": {
+        "comments": [
+            "properties for cmdCompanyLogo-component"
+        ]
+    },
     "cmdMainNavigation": {
         "comments": [
             "properties for CmdMainNavigation-component"