comand-component-library 3.1.95 → 3.1.97

package/package.json

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

package/src/App.vue

@@ -792,6 +792,10 @@
             <a id="section-boxes"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Boxes</h2>
+                <h3>Boxes in BoxWrapper with Flexbox</h3>
+                <CmdBoxWrapper :useFlexbox="true">
+                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 5}" />
+                </CmdBoxWrapper>
                 <h3>Content boxes</h3>
                 <div class="grid-container-create-columns">
                     <div class="grid-small-item">
@@ -1329,6 +1333,7 @@ import CmdAddressData from "@/components/CmdAddressData"
 import CmdBackToTopButton from "@/components/CmdBackToTopButton.vue"
 import CmdBankAccountData from "./components/CmdBankAccountData"
 import CmdBox from "@/components/CmdBox.vue"
+import CmdBoxWrapper from "@/components/CmdBoxWrapper.vue"
 import CmdBreadcrumbs from "@/components/CmdBreadcrumbs.vue"
 import CmdCompanyLogo from "@/components/CmdCompanyLogo.vue"
 import CmdCopyrightInformation from "@/components/CmdCopyrightInformation.vue"
@@ -1380,6 +1385,7 @@ export default {
         CmdBackToTopButton,
         CmdBankAccountData,
         CmdBox,
+        CmdBoxWrapper,
         CmdBreadcrumbs,
         CmdCompanyLogo,
         CmdCopyrightInformation,
@@ -1621,4 +1627,9 @@ export default {
         background: none;
     }
 }
+
+main .cmd-width-limitation-wrapper:not(:last-of-type) {
+    border-bottom: var(--default-border);
+    border-style: dashed;
+}
 </style>

package/src/assets/data/box-user.json

@@ -1,10 +1,13 @@
 [
   {
     "name": "User name 1",
-    "image": "",
+    "image": {
+      "src": "/media/images/user-images/fake-user-1.jpg",
+      "alt": "Alternative text"
+    },
     "profession": "User profession",
     "position": "User position",
-    "description": "Some short description text for further information about the user",
+    "description": "User profile with image",
     "links": [
         {
         "path": "mailto:",
@@ -15,9 +18,9 @@
   },
   {
     "name": "User name 2",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
+    "description": "User description",
     "links": [
       {
         "path": "mailto:",
@@ -34,9 +37,9 @@
   },
   {
     "name": "User name 3",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
+    "description": "User with a long text as description that wraps over multiple lines",
     "links":  [
       {
         "path": "mailto:",
@@ -58,9 +61,9 @@
   },
   {
     "name": "User name 4",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
+    "description": "User description",
     "links":  [
       {
         "path": "mailto:",
@@ -82,9 +85,9 @@
   },
   {
     "name": "User name 5",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
+    "description": "User description",
     "links":  [
       {
         "path": "mailto:",

package/src/components/CmdBox.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin boxType 'content' -->
-    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
+    <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
             <div v-if="collapsible" class="box-header">
@@ -65,21 +65,20 @@
     <!-- end boxType 'content' -->
 
     <!-- begin boxType 'product' -->
-    <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" href="#" @click.prevent="clickOnProduct(product)">
+    <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically, 'stretch-horizontally': stretchHorizontally}]" href="#" @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <img v-if="product.image" :src="product.image.src" :alt="product.image.alt"/>
+            <figure v-if="product.image">
+                <img :src="product.image.src" :alt="product.image.alt"/>
+                <figcaption>{{ product.name }}</figcaption>
+            </figure>
+            <p v-else>{{ product.name }}</p>
+
             <div class="ribbon-new" v-if="product.new">
                 <span>{{ getMessage("cmdbox.productbox.new") }}</span>
             </div>
             <div v-if="product.discount" class="ribbon-discount">
                 <span>{{ product.discount }}</span>
             </div>
-            <!-- begin CmdHeadline -->
-            <CmdHeadline
-                v-if="cmdHeadline?.headlineText || product.name"
-                v-bind="cmdHeadline || {}"
-                :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : product.name"/>
-            <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
@@ -92,17 +91,16 @@
     <!-- end boxType 'product' -->
 
     <!-- begin boxType 'user' -->
-    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
+    <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically,'stretch-horizontally': stretchHorizontally}]">
         <div class="box-header flex-container vertical">
-            <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
-            <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
-            <!-- begin CmdHeadline -->
-            <CmdHeadline
-                v-if="cmdHeadline?.headlineText || user.name"
-                v-bind="cmdHeadline || {}"
-                :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : user.name"
-            />
-            <!-- end CmdHeadline -->
+            <figure v-if="user.image">
+                <img :src="user.image.src" :alt="user.image.alt"/>
+                <figcaption>{{ user.name }}</figcaption>
+            </figure>
+            <div v-else>
+                <span :class="defaultProfileIconClass" :title="user.name"></span>
+                <p>{{ user.name }}</p>
+            </div>
         </div>
         <div class="box-body">
             <p v-if="user.profession">{{ user.profession }}</p>
@@ -246,6 +244,13 @@ export default {
                 }
             }
         },
+        /**
+         * allow box to be stretched as wide as parent-element
+         */
+        stretchHorizontally: {
+            type: Boolean,
+            default: true
+        },
         /**
         * allow box to be stretched as high as parent-element
         */
@@ -296,17 +301,29 @@ export default {
 <style lang="scss">
 /* begin cmd-box ---------------------------------------------------------------------------------------- */
 .cmd-box {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     padding: 0;
 
-    > .cmd-custom-headline {
+    &.stretch-horizontally {
+        display: flex;
+    }
+
+    > .cmd-headline {
         margin-bottom: 0;
     }
 
     &.collapsible {
         .box-header {
             justify-content: space-between;
+
+            &:hover, &:active, &:focus {
+                background: var(--pure-white);
+
+                * {
+                    color: var(--text-color);
+                }
+            }
         }
     }
 
@@ -331,7 +348,7 @@ export default {
             border-top-left-radius: var(--border-radius);
             border-top-right-radius: var(--border-radius);
             padding: calc(var(--default-padding) / 2) var(--default-padding);
-            background: var(--primary-color);
+            background: var(--medium-gray);
             color: var(--pure-white);
             text-decoration: none;
 
@@ -349,16 +366,6 @@ export default {
             }
         }
 
-        .box-header {
-            &:hover, &:active, &:focus {
-                background: var(--pure-white);
-
-                * {
-                    color: var(--primary-color);
-                }
-            }
-        }
-
         .box-body {
             flex-grow: 1;
             padding: 0;
@@ -466,9 +473,15 @@ export default {
                 margin: 0 auto;
             }
 
-            > img {
+            img {
                 border: 0;
             }
+
+            figcaption {
+                font-size: 2rem;
+                font-weight: bold;
+                padding-top: var(--default-padding)
+            }
         }
 
         .box-body {
@@ -479,7 +492,7 @@ export default {
             }
 
             .price {
-                font-size: 2rem;
+                font-size: 1.8rem;
                 font-weight: bold;
 
                 span:last-child {
@@ -495,6 +508,8 @@ export default {
 
     &.user {
         > .box-header {
+            --icon-size: 6rem;
+
             padding: var(--default-padding);
 
             .cmd-headline  {
@@ -504,14 +519,30 @@ export default {
                 }
             }
 
-            > img, > div:first-child {
+            img, > div:first-child > [class*="icon"] {
                 display: table;
-                margin: 0 auto;
+                margin: 0 auto var(--default-margin) auto;
                 padding: calc(var(--default-padding) * 3);
                 border-radius: var(--full-circle);
                 background: var(--primary-color);
-                font-size: 6rem;
                 color: var(--pure-white);
+
+                & + p, & + figcaption {
+                    margin: 0 auto;
+                    text-align: center;
+                    font-weight: bold;
+                    font-size: 2rem;
+                }
+            }
+
+            img {
+                padding: 0;
+                width: calc(var(--icon-size) * 2);
+                aspect-ratio: 1/1;
+            }
+
+            > div:first-child > [class*="icon"] {
+                font-size: var(--icon-size);
             }
         }
 

package/src/components/CmdBoxWrapper.vue

@@ -172,6 +172,12 @@ export default {
     }
 
     > .flex-container {
+        .cmd-headline {
+            > * {
+                white-space: nowrap;
+            }
+        }
+
         &.one-box-per-row {
             flex-direction: column;
         }

package/src/components/CmdMainNavigation.vue

@@ -41,8 +41,6 @@
                         v-if="navigationEntry.type === 'router'"
                         :to="getRoute(navigationEntry)"
                         :title="navigationEntry.tooltip"
-                        :target="navigationEntry.target"
-                        @click="executeLink($event, navigationEntry)"
                     >
                         <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -83,6 +83,11 @@
             ]
         }
     },
+    "stretchHorizontally": {
+        "comments": [
+            "allow box to be stretched as wide as parent-element"
+        ]
+    },
     "stretchVertically": {
         "comments": [
             "allow box to be stretched as high as parent-element"