comand-component-library 3.1.67 → 3.1.68

package/package.json

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

package/src/App.vue

@@ -789,6 +789,21 @@
             <p>LoginData: {{loginData}}</p>
         </CmdWidthLimitationWrapper>
 
+        <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <a id="section-list-of-links"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">List Of Links</h2>
+            <h3>Vertical</h3>
+            <CmdListOfLinks :links="listOfLinksData" />
+            <h3>Horizontal (aligned left)</h3>
+            <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
+            <h3>Horizontal (aligned center)</h3>
+            <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
+            <h3>Horizontal (aligned right)</h3>
+            <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
+        </CmdWidthLimitationWrapper>
+        <!-- end list-of-links  ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
         <a id="section-main-navigation"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Main Navigation</h2>
@@ -947,7 +962,7 @@
 
     <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdListOfLinks :links="footerNavigationData"
+        <CmdListOfLinks :links="listOfLinksData"
                         :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
         />
         <CmdOpeningHours :openingHours="openingHoursData"
@@ -997,7 +1012,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
-import footerNavigationData from '@/assets/data/list-of-links.json'
+import listOfLinksData from '@/assets/data/list-of-links.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
 import languagesData from '@/assets/data/switch-language.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
@@ -1170,7 +1185,7 @@ export default {
             fakeSelectFilterOptionsData,
             fakeSelectOptionsData,
             fakeSelectOptionsWithIconsData,
-            footerNavigationData,
+            listOfLinksData,
             imageGalleryData,
             languagesData,
             multistepsData,

package/src/components/CmdListOfLinks.vue

@@ -137,6 +137,7 @@ export default {
     ul {
         flex-direction: column;
         gap: calc(var(--default-gap) / 2);
+        margin: 0;
 
         li {
             list-style: none;
@@ -145,23 +146,24 @@ export default {
     }
 
     &.horizontal {
+        flex-direction: row;
+
         ul {
-            flex-direction: row;
             gap: var(--default-gap);
+            flex-direction: row;
 
             > li {
                 flex: none;
                 display: flex;
-                align-items: center;
             }
         }
 
         &.align-center {
-            align-items: center;
+            justify-content: center;
         }
 
         &.align-right {
-            align-items: flex-end;
+            justify-content: flex-end;
         }
     }
 }

package/src/components/CmdSiteHeader.vue

@@ -72,7 +72,6 @@ export default {
     grid-area: site-header;
     display: flex;
     flex-direction: column;
-    gap: var(--default-gap);
     border-bottom: var(--default-border);
     background: var(--pure-white);
 
@@ -83,6 +82,7 @@ export default {
 
     header, .cmd-main-navigation nav, .cmd-list-of-links > ul {
         max-width: var(--max-width);
+        width: 100%; /* stretch flex-item */
         margin: 0 auto;
         padding: 0 var(--default-padding);
     }