fix(dimensions): don't apply style key if == null

vuetifyjs · May 21, 2024 · 43683ca · 43683ca
1 parent 31c43cf
commit 43683ca
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -156,9 +156,6 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       scrimEvents,
     } = useActivator(props, { isActive, isTop: localTop })
     const { dimensionStyles } = useDimension(props)
-    const definedDimensionStyles = computed(() => {
-      return Object.fromEntries(Object.entries(dimensionStyles.value).filter(([_, v]) => v != null))
-    })
     const isMounted = useHydration()
     const { scopeId } = useScopeId()
 
@@ -330,8 +327,8 @@ export const VOverlay = genericComponent<OverlaySlots>()({
                     props.contentClass,
                   ]}
                   style={[
+                    dimensionStyles.value,
                     contentStyles.value,
-                    definedDimensionStyles.value,
                   ]}
                   { ...contentEvents.value }
                   { ...props.contentProps }

diff --git a/packages/vuetify/src/composables/dimensions.ts b/packages/vuetify/src/composables/dimensions.ts
@@ -23,14 +23,25 @@ export const makeDimensionProps = propsFactory({
 }, 'dimension')
 
 export function useDimension (props: DimensionProps) {
-  const dimensionStyles = computed(() => ({
-    height: convertToUnit(props.height),
-    maxHeight: convertToUnit(props.maxHeight),
-    maxWidth: convertToUnit(props.maxWidth),
-    minHeight: convertToUnit(props.minHeight),
-    minWidth: convertToUnit(props.minWidth),
-    width: convertToUnit(props.width),
-  }))
+  const dimensionStyles = computed(() => {
+    const styles: Record<string, any> = {}
+
+    const height = convertToUnit(props.height)
+    const maxHeight = convertToUnit(props.maxHeight)
+    const maxWidth = convertToUnit(props.maxWidth)
+    const minHeight = convertToUnit(props.minHeight)
+    const minWidth = convertToUnit(props.minWidth)
+    const width = convertToUnit(props.width)
+
+    if (height != null) styles.height = height
+    if (maxHeight != null) styles.maxHeight = maxHeight
+    if (maxWidth != null) styles.maxWidth = maxWidth
+    if (minHeight != null) styles.minHeight = minHeight
+    if (minWidth != null) styles.minWidth = minWidth
+    if (width != null) styles.width = width
+
+    return styles
+  })
 
   return { dimensionStyles }
 }