fix(VNavigationDrawer): missing image slot and transition

vuetifyjs · Mar 15, 2024 · 1b01835 · 1b01835
1 parent 357f7fa
commit 1b01835
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -70,7 +70,8 @@
   width: 100%
   z-index: -1
 
-  img
+  // TODO: remove in v4
+  img:not(.v-img__img)
     height: $navigation-drawer-img-height
     object-fit: $navigation-drawer-img-object-fit
     width: $navigation-drawer-img-width

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -1,6 +1,10 @@
 // Styles
 import './VNavigationDrawer.sass'
 
+// Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VImg } from '@/components/VImg'
+
 // Composables
 import { useSticky } from './sticky'
 import { useTouch } from './touch'
@@ -249,10 +253,29 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
           >
             { hasImage && (
               <div key="image" class="v-navigation-drawer__img">
-                { slots.image
-                  ? slots.image?.({ image: props.image })
-                  : (<img src={ props.image } alt="" />)
-                }
+                { !slots.image ? (
+                  <VImg
+                    key="image-img"
+                    alt=""
+                    cover
+                    height="inherit"
+                    src={ props.image }
+                  />
+                ) : (
+                  <VDefaultsProvider
+                    key="image-defaults"
+                    disabled={ !props.image }
+                    defaults={{
+                      VImg: {
+                        alt: '',
+                        cover: true,
+                        height: 'inherit',
+                        src: props.image,
+                      },
+                    }}
+                    v-slots:default={ slots.image }
+                  />
+                )}
               </div>
             )}