comand-component-library 3.1.96 → 3.1.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.96",
+  "version": "3.1.98",
   "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

@@ -20,6 +20,7 @@
     "name": "User name 2",
     "profession": "User profession",
     "position": "User position",
+    "description": "User description",
     "links": [
       {
         "path": "mailto:",
@@ -38,6 +39,7 @@
     "name": "User name 3",
     "profession": "User profession",
     "position": "User position",
+    "description": "User with a long text as description that wraps over multiple lines",
     "links":  [
       {
         "path": "mailto:",
@@ -61,6 +63,7 @@
     "name": "User name 4",
     "profession": "User profession",
     "position": "User position",
+    "description": "User description",
     "links":  [
       {
         "path": "mailto:",
@@ -84,6 +87,7 @@
     "name": "User name 5",
     "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,7 +65,7 @@
     <!-- 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">
             <figure v-if="product.image">
                 <img :src="product.image.src" :alt="product.image.alt"/>
@@ -91,7 +91,7 @@
     <!-- 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">
             <figure v-if="user.image">
                 <img :src="user.image.src" :alt="user.image.alt"/>
@@ -244,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
         */
@@ -294,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);
+                }
+            }
         }
     }
 
@@ -329,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;
 
@@ -347,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;
@@ -464,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 {
@@ -477,7 +492,7 @@ export default {
             }
 
             .price {
-                font-size: 2rem;
+                font-size: 1.8rem;
                 font-weight: bold;
 
                 span:last-child {

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>
@@ -72,9 +70,7 @@
                             <!-- begin type === router -->
                             <router-link v-if="navigationSubEntry.type === 'router'"
                                          :to="getRoute(navigationSubEntry)"
-                                         :title="navigationSubEntry.tooltip"
-                                         :target="navigationSubEntry.target"
-                                         @click="executeLink($event, navigationSubEntry)">
+                                         :title="navigationSubEntry.tooltip">
                                 <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
                                 <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
                                 <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
@@ -103,9 +99,7 @@
                                     <!-- begin type === router -->
                                     <router-link v-if="navigationEntry.type === 'router'"
                                                  :to="getRoute(navigationSubSubEntry)"
-                                                 :target="navigationSubSubEntry.target"
-                                                 :title="navigationSubSubEntry.tooltip"
-                                                 @click="executeLink($event, navigationSubSubEntry)">
+                                                 :target="navigationSubSubEntry.target">
                                         <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
                                         <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
                                         <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"

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"