@burh/nuxt-core 1.0.449 → 1.0.450

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.
Files changed (5) hide show
  1. package/components/burh-ds/Cards/BaseCard.vue +6 -1
  2. package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue +1 -1
  3. package/components/burh-ds/Headings/AppHeader.vue +4 -4
  4. package/components/burh-ds/Img/ImageWithFallback.vue +59 -75
  5. package/package.json +1 -1
package/components/burh-ds/Cards/BaseCard.vue CHANGED
@@ -28,7 +28,8 @@
28
28
  :src="avatar"
29
29
  :alt="name"
30
30
  :fallbackText="name"
31
- fallbackSize="240x240"
31
+ :fallbackBackground="fallbackColor"
32
+ fallbackSize="240"
32
33
  />
33
34
 
34
35
  <slot name="card-content" />
@@ -63,6 +64,10 @@ export default {
63
64
  glass: {
64
65
  type: Boolean,
65
66
  default: false
67
+ },
68
+ fallbackColor: {
69
+ type: String,
70
+ default: '5865F2'
66
71
  }
67
72
  },
68
73
  data() {
package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  :src="userData.urlAvatar"
8
8
  :alt="userData.name"
9
9
  :fallbackText="userData.name"
10
- fallbackSize="1024x1024"
10
+ fallbackSize="1024"
11
11
  />
12
12
  <div v-else class=".">
13
13
  {{ userData.name }}
package/components/burh-ds/Headings/AppHeader.vue CHANGED
@@ -37,9 +37,9 @@
37
37
  :src="user.avatar"
38
38
  :alt="user.name"
39
39
  :fallbackText="user.name"
40
+ fallbackSize="200"
40
41
  :fallbackBackground="avatarColor"
41
- fallbackSize="200x200"
42
- :style=" `--avatar-color: #${avatarColor}` "
42
+ :style=" `--avatar-color: #${avatarColor}`"
43
43
  />
44
44
  </el-tooltip>
45
45
 
@@ -59,9 +59,9 @@
59
59
  :src="user.avatar"
60
60
  :alt="user.name"
61
61
  :fallbackText="user.name"
62
+ fallbackSize="200"
62
63
  :fallbackBackground="avatarColor"
63
- fallbackSize="200x200"
64
- :style=" `--avatar-color: #${avatarColor}` "
64
+ :style=" `--avatar-color: #${avatarColor}`"
65
65
  />
66
66
  <span>{{ user.name }} {{ user.last_name }}</span>
67
67
  </div>
package/components/burh-ds/Img/ImageWithFallback.vue CHANGED
@@ -1,75 +1,59 @@
1
- <template>
2
- <img
3
- :src="(this.src) ? this.src : getNameInitials()"
4
- :alt="this.alt"
5
- @error="img => getImageFallback(img)"
6
- >
7
- </template>
8
-
9
- <script>
10
- export default {
11
- name: 'image-with-fallback',
12
- props: {
13
- src: {
14
- type: String,
15
- required: true
16
- },
17
- alt: {
18
- type: String,
19
- required: true
20
- },
21
- randomColor: {
22
- type: Boolean,
23
- default: false
24
- },
25
- fallbackBackground: {
26
- type: String,
27
- default: '5865f2'
28
- },
29
- fallbackColor: {
30
- type: String,
31
- default: 'ffffff'
32
- },
33
- fallbackSize: {
34
- type: String,
35
- default: '512x512'
36
- },
37
- fallbackText: {
38
- type: String,
39
- required: true
40
- }
41
- },
42
- methods: {
43
- getAvatarUrl() {
44
- let size = this.fallbackSize;
45
- let background = this.fallbackBackground;
46
- let color = this.fallbackColor;
47
- let text = this.getNameInitials();
48
-
49
- const colors = ['5865F2', '9D35FC', 'FF539D', 'FF7D7E', 'FFCF02', '00b388'];
50
-
51
- this.randomColor && (background = colors[Math.floor(Math.random() * (colors.length - 1))]);
52
-
53
- return `https://via.placeholder.com/${size}/${background}/${color}?text=${text}`;
54
- },
55
- getImageFallback(img) {
56
- img.target.src = this.getAvatarUrl();
57
- },
58
- getNameInitials() {
59
- let userAvatarName;
60
-
61
- if (this.fallbackText) {
62
- userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
63
- } else {
64
- userAvatarName = 'BURH';
65
- }
66
-
67
- return userAvatarName;
68
- },
69
- }
70
- };
71
- </script>
72
-
73
- <style lang="scss" scoped>
74
-
75
- </style>
1
+ <template>
2
+ <img
3
+ :src="(this.src) ? this.src : getNameInitials()"
4
+ :alt="this.alt"
5
+ @error="img => getImageFallback(img)"
6
+ >
7
+ </template>
8
+
9
+ <script>
10
+ export default {
11
+ name: 'image-with-fallback',
12
+ props: {
13
+ src: {
14
+ type: [String, Boolean],
15
+ default: null
16
+ },
17
+ alt: {
18
+ type: String,
19
+ required: true
20
+ },
21
+ fallbackSize: {
22
+ type: String,
23
+ default: '512'
24
+ },
25
+ fallbackBackground: {
26
+ type: [String, Boolean],
27
+ default: null
28
+ },
29
+ fallbackText: {
30
+ type: String,
31
+ required: true
32
+ }
33
+ },
34
+ methods: {
35
+ getAvatarUrl() {
36
+ let size = this.fallbackSize;
37
+ let text = this.getNameInitials();
38
+ // let background = this.fallbackBackground;
39
+
40
+ // return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40${background ? `&b=%23${background}` : ''}`;
41
+ return `https://avatars.dicebear.com/api/initials/${text}.svg?backgroundColorLevel=900&size=${size}&fontSize=40&b=%238DA2B5`;
42
+ },
43
+ getImageFallback(img) {
44
+ img.target.src = this.getAvatarUrl();
45
+ },
46
+ getNameInitials() {
47
+ let userAvatarName;
48
+
49
+ if (this.fallbackText) {
50
+ userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
51
+ } else {
52
+ userAvatarName = 'BURH';
53
+ }
54
+
55
+ return userAvatarName;
56
+ },
57
+ }
58
+ };
59
+ </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.449",
3
+ "version": "1.0.450",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {