Skip to content

Commit b172ae7

Browse files
teleskop150750teleskop150750
committed
fix: [Avatar] loadingStatus
1 parent f6f95c2 commit b172ae7

File tree

5 files changed

+88
-71
lines changed

5 files changed

+88
-71
lines changed

‎packages/vue-primitives/src/avatar/stories/Avatar.stories.tsx‎

Lines changed: 4 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,13 @@
1-
import { Avatar, AvatarFallback, AvatarImage } from '../index.ts'
2-
import './styles.css'
1+
import CStyled from './Styled.vue'
2+
import CChromatic from './Chromatic.vue'
33

44
export default { title: 'Components/Avatar' }
55

6-
const src = 'https://avatars.githubusercontent.com/u/62594983?v=4'
7-
const srcBroken = 'https://broken.link.com/broken-pic.jpg'
8-
96
export function Styled() {
10-
return (
11-
<>
12-
<h1>Without image & with fallback</h1>
13-
<Avatar class="avatar_rootClass">
14-
<AvatarFallback class="avatar_fallbackClass">JS</AvatarFallback>
15-
</Avatar>
16-
17-
<h1>With image & with fallback</h1>
18-
<Avatar class="avatar_rootClass">
19-
<AvatarImage class="avatar_imageClass" alt="John Smith" src={src} />
20-
<AvatarFallback delayMs={300} class="avatar_fallbackClass">
21-
JS
22-
</AvatarFallback>
23-
</Avatar>
24-
25-
<h1>With image & with fallback (but broken src)</h1>
26-
<Avatar class="avatar_rootClass">
27-
<AvatarImage
28-
class="avatar_imageClass"
29-
alt="John Smith"
30-
src={srcBroken}
31-
onLoadingStatusChange={console.log}
32-
/>
33-
<AvatarFallback class="avatar_fallbackClass">
34-
<AvatarIcon />
35-
</AvatarFallback>
36-
</Avatar>
37-
</>
38-
)
7+
return CStyled
398
}
409

4110
export function Chromatic() {
42-
return (
43-
<>
44-
<h1>Without image & with fallback</h1>
45-
<Avatar class="avatar_rootClass">
46-
<AvatarFallback class="avatar_fallbackClass">JS</AvatarFallback>
47-
</Avatar>
48-
49-
<h1>With image & with fallback</h1>
50-
<Avatar class="avatar_rootClass">
51-
<AvatarImage class="avatar_imageClass" alt="John Smith" src={src} />
52-
<AvatarFallback delayMs={300} class="avatar_fallbackClass">
53-
JS
54-
</AvatarFallback>
55-
</Avatar>
56-
57-
<h1>With image & with fallback (but broken src)</h1>
58-
<Avatar class="avatar_rootClass">
59-
<AvatarImage class="avatar_imageClass" alt="John Smith" src={srcBroken} />
60-
<AvatarFallback class="avatar_fallbackClass">
61-
<AvatarIcon />
62-
</AvatarFallback>
63-
</Avatar>
64-
</>
65-
)
11+
return CChromatic
6612
}
6713
Chromatic.parameters = { chromatic: { disable: false, delay: 1000 } }
68-
69-
function AvatarIcon() {
70-
return (
71-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="42" height="42">
72-
<path
73-
d="M50 51.7a22.1 22.1 0 100-44.2 22.1 22.1 0 000 44.2zM87.9 69.3a27.8 27.8 0 00-21.2-16.1 4 4 0 00-2.8.7 23.5 23.5 0 01-27.6 0 4 4 0 00-2.8-.7 27.5 27.5 0 00-21.2 16.1c-.3.6-.2 1.3.1 1.8a52.8 52.8 0 007 8.9 43.4 43.4 0 0056.9 3.8 56.3 56.3 0 008.9-8.8c.9-1.2 1.8-2.5 2.6-3.9.3-.6.3-1.2.1-1.8z"
74-
fill="currentColor"
75-
/>
76-
</svg>
77-
)
78-
}

‎packages/vue-primitives/src/avatar/stories/AvatarIcon.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="42" height="42">
3+
<path
4+
d="M50 51.7a22.1 22.1 0 100-44.2 22.1 22.1 0 000 44.2zM87.9 69.3a27.8 27.8 0 00-21.2-16.1 4 4 0 00-2.8.7 23.5 23.5 0 01-27.6 0 4 4 0 00-2.8-.7 27.5 27.5 0 00-21.2 16.1c-.3.6-.2 1.3.1 1.8a52.8 52.8 0 007 8.9 43.4 43.4 0 0056.9 3.8 56.3 56.3 0 008.9-8.8c.9-1.2 1.8-2.5 2.6-3.9.3-.6.3-1.2.1-1.8z"
5+
fill="currentColor"
6+
/>
7+
</svg>
8+
</template>

‎packages/vue-primitives/src/avatar/stories/Chromatic.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import { Avatar, AvatarFallback, AvatarImage } from '../index.ts'
3+
import AvatarIcon from './AvatarIcon.vue'
4+
import './styles.css'
5+
6+
const src = 'https://avatars.githubusercontent.com/u/62594983?v=4'
7+
const srcBroken = 'https://broken.link.com/broken-pic.jpg'
8+
</script>
9+
10+
<template>
11+
<div>
12+
<h1>Without image & with fallback</h1>
13+
<Avatar class="avatar_rootClass">
14+
<AvatarFallback class="avatar_fallbackClass">
15+
JS
16+
</AvatarFallback>
17+
</Avatar>
18+
19+
<h1>With image & with fallback</h1>
20+
<Avatar class="avatar_rootClass">
21+
<AvatarImage class="avatar_imageClass" alt="John Smith" :src="src" />
22+
<AvatarFallback :delay-ms="300" class="avatar_fallbackClass">
23+
JS
24+
</AvatarFallback>
25+
</Avatar>
26+
27+
<h1>With image & with fallback (but broken src)</h1>
28+
<Avatar class="avatar_rootClass">
29+
<AvatarImage class="avatar_imageClass" alt="John Smith" :src="srcBroken" />
30+
<AvatarFallback class="avatar_fallbackClass">
31+
<AvatarIcon />
32+
</AvatarFallback>
33+
</Avatar>
34+
</div>
35+
</template>

‎packages/vue-primitives/src/avatar/stories/Styled.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
import { Avatar, AvatarFallback, AvatarImage } from '../index.ts'
3+
import AvatarIcon from './AvatarIcon.vue'
4+
import './styles.css'
5+
6+
const src = 'https://avatars.githubusercontent.com/u/62594983?v=4'
7+
const srcBroken = 'https://broken.link.com/broken-pic.jpg'
8+
</script>
9+
10+
<template>
11+
<div>
12+
<h1>Without image & with fallback</h1>
13+
<Avatar class="avatar_rootClass">
14+
<AvatarFallback class="avatar_fallbackClass">
15+
JS
16+
</AvatarFallback>
17+
</Avatar>
18+
19+
<h1>With image & with fallback</h1>
20+
<Avatar class="avatar_rootClass">
21+
<AvatarImage class="avatar_imageClass" alt="John Smith" :src="src" />
22+
<AvatarFallback :delay-ms="300" class="avatar_fallbackClass">
23+
JS
24+
</AvatarFallback>
25+
</Avatar>
26+
27+
<h1>With image & with fallback (but broken src)</h1>
28+
<Avatar class="avatar_rootClass">
29+
<AvatarImage
30+
class="avatar_imageClass"
31+
alt="John Smith"
32+
:src="srcBroken"
33+
@loading-status-change="console.log"
34+
/>
35+
<AvatarFallback class="avatar_fallbackClass">
36+
<AvatarIcon />
37+
</AvatarFallback>
38+
</Avatar>
39+
</div>
40+
</template>

‎packages/vue-primitives/src/avatar/utils.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ export function useImageLoadingStatus(src: Ref<AvatarImageProps['src']> | (() =>
2424
loadingStatus.value = status
2525
}
2626

27-
loadingStatus.value = 'loaded'
28-
// TODO: fix onload
27+
loadingStatus.value = 'loading'
2928
image.onload = updateStatus('loaded')
3029
image.onerror = updateStatus('error')
3130
image.src = value

0 commit comments

Comments
 (0)