comand-component-library 3.1.95 → 3.1.96

package/package.json

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

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,7 +18,6 @@
   },
   {
     "name": "User name 2",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links": [
@@ -34,7 +36,6 @@
   },
   {
     "name": "User name 3",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links":  [
@@ -58,7 +59,6 @@
   },
   {
     "name": "User name 4",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links":  [
@@ -82,7 +82,6 @@
   },
   {
     "name": "User name 5",
-    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links":  [

package/src/components/CmdBox.vue

@@ -67,19 +67,18 @@
     <!-- begin boxType 'product' -->
     <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" 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>
@@ -94,15 +93,14 @@
     <!-- begin boxType 'user' -->
     <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
         <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>
@@ -495,6 +493,8 @@ export default {
 
     &.user {
         > .box-header {
+            --icon-size: 6rem;
+
             padding: var(--default-padding);
 
             .cmd-headline  {
@@ -504,14 +504,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);
             }
         }