comand-component-library 3.1.95 → 3.1.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.95",
3
+ "version": "3.1.96",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -1,10 +1,13 @@
1
1
  [
2
2
  {
3
3
  "name": "User name 1",
4
- "image": "",
4
+ "image": {
5
+ "src": "/media/images/user-images/fake-user-1.jpg",
6
+ "alt": "Alternative text"
7
+ },
5
8
  "profession": "User profession",
6
9
  "position": "User position",
7
- "description": "Some short description text for further information about the user",
10
+ "description": "User profile with image",
8
11
  "links": [
9
12
  {
10
13
  "path": "mailto:",
@@ -15,7 +18,6 @@
15
18
  },
16
19
  {
17
20
  "name": "User name 2",
18
- "image": "",
19
21
  "profession": "User profession",
20
22
  "position": "User position",
21
23
  "links": [
@@ -34,7 +36,6 @@
34
36
  },
35
37
  {
36
38
  "name": "User name 3",
37
- "image": "",
38
39
  "profession": "User profession",
39
40
  "position": "User position",
40
41
  "links": [
@@ -58,7 +59,6 @@
58
59
  },
59
60
  {
60
61
  "name": "User name 4",
61
- "image": "",
62
62
  "profession": "User profession",
63
63
  "position": "User position",
64
64
  "links": [
@@ -82,7 +82,6 @@
82
82
  },
83
83
  {
84
84
  "name": "User name 5",
85
- "image": "",
86
85
  "profession": "User profession",
87
86
  "position": "User position",
88
87
  "links": [
@@ -67,19 +67,18 @@
67
67
  <!-- begin boxType 'product' -->
68
68
  <a v-else-if="boxType === 'product' && product" :class="['cmd-box box product', {'stretch-vertically': stretchVertically}]" href="#" @click.prevent="clickOnProduct(product)">
69
69
  <div class="box-header flex-container vertical">
70
- <img v-if="product.image" :src="product.image.src" :alt="product.image.alt"/>
70
+ <figure v-if="product.image">
71
+ <img :src="product.image.src" :alt="product.image.alt"/>
72
+ <figcaption>{{ product.name }}</figcaption>
73
+ </figure>
74
+ <p v-else>{{ product.name }}</p>
75
+
71
76
  <div class="ribbon-new" v-if="product.new">
72
77
  <span>{{ getMessage("cmdbox.productbox.new") }}</span>
73
78
  </div>
74
79
  <div v-if="product.discount" class="ribbon-discount">
75
80
  <span>{{ product.discount }}</span>
76
81
  </div>
77
- <!-- begin CmdHeadline -->
78
- <CmdHeadline
79
- v-if="cmdHeadline?.headlineText || product.name"
80
- v-bind="cmdHeadline || {}"
81
- :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : product.name"/>
82
- <!-- end CmdHeadline -->
83
82
  </div>
84
83
  <div class="box-body">
85
84
  <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
@@ -94,15 +93,14 @@
94
93
  <!-- begin boxType 'user' -->
95
94
  <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
96
95
  <div class="box-header flex-container vertical">
97
- <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
98
- <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
99
- <!-- begin CmdHeadline -->
100
- <CmdHeadline
101
- v-if="cmdHeadline?.headlineText || user.name"
102
- v-bind="cmdHeadline || {}"
103
- :headlineText="cmdHeadline?.headlineText ? cmdHeadline?.headlineText : user.name"
104
- />
105
- <!-- end CmdHeadline -->
96
+ <figure v-if="user.image">
97
+ <img :src="user.image.src" :alt="user.image.alt"/>
98
+ <figcaption>{{ user.name }}</figcaption>
99
+ </figure>
100
+ <div v-else>
101
+ <span :class="defaultProfileIconClass" :title="user.name"></span>
102
+ <p>{{ user.name }}</p>
103
+ </div>
106
104
  </div>
107
105
  <div class="box-body">
108
106
  <p v-if="user.profession">{{ user.profession }}</p>
@@ -495,6 +493,8 @@ export default {
495
493
 
496
494
  &.user {
497
495
  > .box-header {
496
+ --icon-size: 6rem;
497
+
498
498
  padding: var(--default-padding);
499
499
 
500
500
  .cmd-headline {
@@ -504,14 +504,30 @@ export default {
504
504
  }
505
505
  }
506
506
 
507
- > img, > div:first-child {
507
+ img, > div:first-child > [class*="icon"] {
508
508
  display: table;
509
- margin: 0 auto;
509
+ margin: 0 auto var(--default-margin) auto;
510
510
  padding: calc(var(--default-padding) * 3);
511
511
  border-radius: var(--full-circle);
512
512
  background: var(--primary-color);
513
- font-size: 6rem;
514
513
  color: var(--pure-white);
514
+
515
+ & + p, & + figcaption {
516
+ margin: 0 auto;
517
+ text-align: center;
518
+ font-weight: bold;
519
+ font-size: 2rem;
520
+ }
521
+ }
522
+
523
+ img {
524
+ padding: 0;
525
+ width: calc(var(--icon-size) * 2);
526
+ aspect-ratio: 1/1;
527
+ }
528
+
529
+ > div:first-child > [class*="icon"] {
530
+ font-size: var(--icon-size);
515
531
  }
516
532
  }
517
533