From 67e546504d2eb807c9b707aacc58761b10eb7d37 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 18 Feb 2025 18:04:59 +0100 Subject: [PATCH 1/3] fix(Avatar): render on SSR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Sébastien Chopin --- src/runtime/components/Avatar.vue | 55 +++++++------------ src/theme/avatar.ts | 2 +- .../__snapshots__/Alert-vue.spec.ts.snap | 2 +- .../__snapshots__/Alert.spec.ts.snap | 2 +- .../__snapshots__/Avatar-vue.spec.ts.snap | 38 ++++++------- .../__snapshots__/Avatar.spec.ts.snap | 38 ++++++------- .../AvatarGroup-vue.spec.ts.snap | 28 +++++----- .../__snapshots__/AvatarGroup.spec.ts.snap | 28 +++++----- .../__snapshots__/Badge-vue.spec.ts.snap | 4 +- .../__snapshots__/Badge.spec.ts.snap | 4 +- .../__snapshots__/Breadcrumb-vue.spec.ts.snap | 20 +++---- .../__snapshots__/Breadcrumb.spec.ts.snap | 20 +++---- .../__snapshots__/Button-vue.spec.ts.snap | 6 +- .../__snapshots__/Button.spec.ts.snap | 6 +- .../CommandPalette-vue.spec.ts.snap | 40 +++++++------- .../__snapshots__/CommandPalette.spec.ts.snap | 40 +++++++------- .../DropdownMenu-vue.spec.ts.snap | 34 ++++++------ .../__snapshots__/DropdownMenu.spec.ts.snap | 34 ++++++------ .../__snapshots__/Input-vue.spec.ts.snap | 6 +- .../__snapshots__/Input.spec.ts.snap | 6 +- .../__snapshots__/InputMenu-vue.spec.ts.snap | 6 +- .../__snapshots__/InputMenu.spec.ts.snap | 6 +- .../__snapshots__/Select-vue.spec.ts.snap | 6 +- .../__snapshots__/Select.spec.ts.snap | 6 +- .../__snapshots__/SelectMenu-vue.spec.ts.snap | 6 +- .../__snapshots__/SelectMenu.spec.ts.snap | 6 +- .../__snapshots__/Separator-vue.spec.ts.snap | 2 +- .../__snapshots__/Separator.spec.ts.snap | 2 +- .../__snapshots__/Tabs-vue.spec.ts.snap | 46 ++++++++-------- .../__snapshots__/Tabs.spec.ts.snap | 46 ++++++++-------- .../__snapshots__/Toast-vue.spec.ts.snap | 2 +- .../__snapshots__/Toast.spec.ts.snap | 2 +- 32 files changed, 264 insertions(+), 285 deletions(-) diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue index 46d2e626f5..ed713c9a52 100644 --- a/src/runtime/components/Avatar.vue +++ b/src/runtime/components/Avatar.vue @@ -1,6 +1,5 @@ diff --git a/src/theme/avatar.ts b/src/theme/avatar.ts index 5097f77b35..85b000603a 100644 --- a/src/theme/avatar.ts +++ b/src/theme/avatar.ts @@ -1,7 +1,7 @@ export default { slots: { root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)', - image: 'h-full w-full rounded-[inherit] object-cover data-[error]:hidden', + image: 'h-full w-full rounded-[inherit] object-cover', fallback: 'font-medium leading-none text-(--ui-text-muted) truncate', icon: 'text-(--ui-text-muted) shrink-0' }, diff --git a/test/components/__snapshots__/Alert-vue.spec.ts.snap b/test/components/__snapshots__/Alert-vue.spec.ts.snap index adfd0b515b..eff77498f4 100644 --- a/test/components/__snapshots__/Alert-vue.spec.ts.snap +++ b/test/components/__snapshots__/Alert-vue.spec.ts.snap @@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = ` `; exports[`Alert > renders with avatar correctly 1`] = ` -"
  +"
Alert
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap index 8bafd7e1e6..664a1aaa41 100644 --- a/test/components/__snapshots__/Alert.spec.ts.snap +++ b/test/components/__snapshots__/Alert.spec.ts.snap @@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = ` `; exports[`Alert > renders with avatar correctly 1`] = ` -"
  +"
Alert
diff --git a/test/components/__snapshots__/Avatar-vue.spec.ts.snap b/test/components/__snapshots__/Avatar-vue.spec.ts.snap index 2852ac7e5d..069a9c0bf6 100644 --- a/test/components/__snapshots__/Avatar-vue.spec.ts.snap +++ b/test/components/__snapshots__/Avatar-vue.spec.ts.snap @@ -1,39 +1,35 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Avatar > renders with alt correctly 1`] = `"BC"`; +exports[`Avatar > renders with alt correctly 1`] = `"BC"`; -exports[`Avatar > renders with as correctly 1`] = ` -"
-   -
" -`; +exports[`Avatar > renders with as correctly 1`] = `"
 
"`; -exports[`Avatar > renders with class correctly 1`] = `" "`; +exports[`Avatar > renders with class correctly 1`] = `" "`; -exports[`Avatar > renders with default slot correctly 1`] = `"🇫🇷"`; +exports[`Avatar > renders with default slot correctly 1`] = `"🇫🇷"`; -exports[`Avatar > renders with icon correctly 1`] = `""`; +exports[`Avatar > renders with icon correctly 1`] = `""`; -exports[`Avatar > renders with size 2xl correctly 1`] = `" "`; +exports[`Avatar > renders with size 2xl correctly 1`] = `""`; -exports[`Avatar > renders with size 2xs correctly 1`] = `" "`; +exports[`Avatar > renders with size 2xs correctly 1`] = `""`; -exports[`Avatar > renders with size 3xl correctly 1`] = `" "`; +exports[`Avatar > renders with size 3xl correctly 1`] = `""`; -exports[`Avatar > renders with size 3xs correctly 1`] = `" "`; +exports[`Avatar > renders with size 3xs correctly 1`] = `""`; -exports[`Avatar > renders with size lg correctly 1`] = `" "`; +exports[`Avatar > renders with size lg correctly 1`] = `""`; -exports[`Avatar > renders with size md correctly 1`] = `" "`; +exports[`Avatar > renders with size md correctly 1`] = `""`; -exports[`Avatar > renders with size sm correctly 1`] = `" "`; +exports[`Avatar > renders with size sm correctly 1`] = `""`; -exports[`Avatar > renders with size xl correctly 1`] = `" "`; +exports[`Avatar > renders with size xl correctly 1`] = `""`; -exports[`Avatar > renders with size xs correctly 1`] = `" "`; +exports[`Avatar > renders with size xs correctly 1`] = `""`; -exports[`Avatar > renders with src correctly 1`] = `" "`; +exports[`Avatar > renders with src correctly 1`] = `""`; -exports[`Avatar > renders with text correctly 1`] = `"+1"`; +exports[`Avatar > renders with text correctly 1`] = `"+1"`; -exports[`Avatar > renders with ui correctly 1`] = `" "`; +exports[`Avatar > renders with ui correctly 1`] = `" "`; diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap index fd9b8db77c..c7bf2cebd3 100644 --- a/test/components/__snapshots__/Avatar.spec.ts.snap +++ b/test/components/__snapshots__/Avatar.spec.ts.snap @@ -1,39 +1,35 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Avatar > renders with alt correctly 1`] = `"BC"`; +exports[`Avatar > renders with alt correctly 1`] = `"BC"`; -exports[`Avatar > renders with as correctly 1`] = ` -"
-   -
" -`; +exports[`Avatar > renders with as correctly 1`] = `"
 
"`; -exports[`Avatar > renders with class correctly 1`] = `" "`; +exports[`Avatar > renders with class correctly 1`] = `" "`; -exports[`Avatar > renders with default slot correctly 1`] = `"🇫🇷"`; +exports[`Avatar > renders with default slot correctly 1`] = `"🇫🇷"`; -exports[`Avatar > renders with icon correctly 1`] = `""`; +exports[`Avatar > renders with icon correctly 1`] = `""`; -exports[`Avatar > renders with size 2xl correctly 1`] = `" "`; +exports[`Avatar > renders with size 2xl correctly 1`] = `""`; -exports[`Avatar > renders with size 2xs correctly 1`] = `" "`; +exports[`Avatar > renders with size 2xs correctly 1`] = `""`; -exports[`Avatar > renders with size 3xl correctly 1`] = `" "`; +exports[`Avatar > renders with size 3xl correctly 1`] = `""`; -exports[`Avatar > renders with size 3xs correctly 1`] = `" "`; +exports[`Avatar > renders with size 3xs correctly 1`] = `""`; -exports[`Avatar > renders with size lg correctly 1`] = `" "`; +exports[`Avatar > renders with size lg correctly 1`] = `""`; -exports[`Avatar > renders with size md correctly 1`] = `" "`; +exports[`Avatar > renders with size md correctly 1`] = `""`; -exports[`Avatar > renders with size sm correctly 1`] = `" "`; +exports[`Avatar > renders with size sm correctly 1`] = `""`; -exports[`Avatar > renders with size xl correctly 1`] = `" "`; +exports[`Avatar > renders with size xl correctly 1`] = `""`; -exports[`Avatar > renders with size xs correctly 1`] = `" "`; +exports[`Avatar > renders with size xs correctly 1`] = `""`; -exports[`Avatar > renders with src correctly 1`] = `" "`; +exports[`Avatar > renders with src correctly 1`] = `""`; -exports[`Avatar > renders with text correctly 1`] = `"+1"`; +exports[`Avatar > renders with text correctly 1`] = `"+1"`; -exports[`Avatar > renders with ui correctly 1`] = `" "`; +exports[`Avatar > renders with ui correctly 1`] = `" "`; diff --git a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap index 9d3999b56b..b1c2a275ad 100644 --- a/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap +++ b/test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap @@ -1,77 +1,77 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`AvatarGroup > renders with as correctly 1`] = `"NRRHBC"`; +exports[`AvatarGroup > renders with as correctly 1`] = `"Neil RichterRomain HamelBenjamin Canac"`; exports[`AvatarGroup > renders with class correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with default slot correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; -exports[`AvatarGroup > renders with max correctly 1`] = `"
+1RHBC
"`; +exports[`AvatarGroup > renders with max correctly 1`] = `"
+1Romain HamelBenjamin Canac
"`; exports[`AvatarGroup > renders with size 2xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 2xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 3xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 3xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size lg correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size md correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size sm correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with ui correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap index 9d3999b56b..b1c2a275ad 100644 --- a/test/components/__snapshots__/AvatarGroup.spec.ts.snap +++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap @@ -1,77 +1,77 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`AvatarGroup > renders with as correctly 1`] = `"NRRHBC"`; +exports[`AvatarGroup > renders with as correctly 1`] = `"Neil RichterRomain HamelBenjamin Canac"`; exports[`AvatarGroup > renders with class correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with default slot correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; -exports[`AvatarGroup > renders with max correctly 1`] = `"
+1RHBC
"`; +exports[`AvatarGroup > renders with max correctly 1`] = `"
+1Romain HamelBenjamin Canac
"`; exports[`AvatarGroup > renders with size 2xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 2xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 3xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size 3xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size lg correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size md correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size sm correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size xl correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with size xs correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; exports[`AvatarGroup > renders with ui correctly 1`] = ` "
- NRRHBC + Neil RichterRomain HamelBenjamin Canac
" `; diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap index b26229f11b..ba6f47789f 100644 --- a/test/components/__snapshots__/Badge-vue.spec.ts.snap +++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap @@ -10,12 +10,12 @@ exports[`Badge > renders with as correctly 1`] = ` exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `""`; exports[`Badge > renders with avatar and trailingIcon correctly 1`] = ` -"  +" " `; exports[`Badge > renders with avatar correctly 1`] = ` -"  +" " `; diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap index f9601239f3..4b2db91e2f 100644 --- a/test/components/__snapshots__/Badge.spec.ts.snap +++ b/test/components/__snapshots__/Badge.spec.ts.snap @@ -14,12 +14,12 @@ exports[`Badge > renders with avatar and leadingIcon correctly 1`] = ` `; exports[`Badge > renders with avatar and trailingIcon correctly 1`] = ` -"  +" " `; exports[`Badge > renders with avatar correctly 1`] = ` -"  +" " `; diff --git a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap index 9671836b7f..8585a9402a 100644 --- a/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap +++ b/test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap @@ -3,7 +3,7 @@ exports[`Breadcrumb > renders with as correctly 1`] = ` "
    -
  1.  Home
  2. +
  3. Home
  4. Components
  5. @@ -16,7 +16,7 @@ exports[`Breadcrumb > renders with as correctly 1`] = ` exports[`Breadcrumb > renders with class correctly 1`] = ` "
@@ -64,7 +64,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
@@ -98,7 +98,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
@@ -132,7 +132,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = ` @@ -166,7 +166,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = ` @@ -200,7 +200,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = ` @@ -236,7 +236,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = ` @@ -272,7 +272,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = ` @@ -308,7 +308,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = ` @@ -344,7 +344,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = ` @@ -380,7 +380,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = ` @@ -440,7 +440,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = ` @@ -500,7 +500,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = ` @@ -539,7 +539,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = ` @@ -577,7 +577,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = ` @@ -613,7 +613,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = ` @@ -649,7 +649,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = ` @@ -685,7 +685,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = ` @@ -721,7 +721,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = ` @@ -757,7 +757,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = ` diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap index 3b5cfc0ca5..57650ed751 100644 --- a/test/components/__snapshots__/CommandPalette.spec.ts.snap +++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap @@ -28,7 +28,7 @@ exports[`CommandPalette > renders with as correctly 1`] = ` @@ -64,7 +64,7 @@ exports[`CommandPalette > renders with class correctly 1`] = ` @@ -101,7 +101,7 @@ exports[`CommandPalette > renders with close correctly 1`] = ` @@ -135,7 +135,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = ` @@ -172,7 +172,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = ` @@ -206,7 +206,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = ` @@ -242,7 +242,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = ` @@ -278,7 +278,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = ` @@ -314,7 +314,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = ` @@ -350,7 +350,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = ` @@ -386,7 +386,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = ` @@ -446,7 +446,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = ` @@ -506,7 +506,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = ` @@ -545,7 +545,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = ` @@ -583,7 +583,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = ` @@ -619,7 +619,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = ` @@ -655,7 +655,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = ` @@ -691,7 +691,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = ` @@ -727,7 +727,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = ` @@ -763,7 +763,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = ` diff --git a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap index f2dda592c8..d3063eafb3 100644 --- a/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap @@ -9,7 +9,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `