fix(VBtn): remove negative prepend/append margin with slim prop

vuetifyjs · May 20, 2024 · fc6cd16 · fc6cd16
1 parent 8ed8731
commit fc6cd16
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -193,10 +193,16 @@
     grid-area: prepend
     margin-inline: $button-margin-start $button-margin-end
 
+    .v-btn--slim &
+      margin-inline-start: 0
+
   .v-btn__append
     grid-area: append
     margin-inline: $button-margin-end $button-margin-start
 
+    .v-btn--slim &
+      margin-inline-end: 0
+
   .v-btn__content
     grid-area: content
     justify-content: center

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -191,6 +191,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
         noDataText: toRef(props, 'noDataText'),
         loading: toRef(props, 'loading'),
         loadingText: toRef(props, 'loadingText'),
+        mobile: toRef(props, 'mobile'),
       },
     })
 
@@ -258,6 +259,8 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                       { ...attrs }
                       { ...dataTableRowsProps }
                       items={ paginatedItems.value }
+                      mobile={ props.mobile }
+                      mobileBreakpoint={ props.mobileBreakpoint }
                       v-slots={ slots }
                     />
                   )}

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
@@ -64,6 +64,7 @@ export const VDataTableRows = genericComponent<new <T>(
   props: makeVDataTableRowsProps(),
 
   setup (props, { attrs, slots }) {
+    console.log('VDataTableROWSSSSSSSSSS', props)
     const { columns } = useHeaders()
     const { expandOnClick, toggleExpand, isExpanded } = useExpanded()
     const { isSelected, toggleSelect } = useSelection()
@@ -164,6 +165,8 @@ export const VDataTableRows = genericComponent<new <T>(
                 { slots.item ? slots.item(itemSlotProps) : (
                   <VDataTableRow
                     { ...itemSlotProps.props }
+                    mobile={ props.mobile }
+                    mobileBreakpoint={ props.mobileBreakpoint }
                     v-slots={ slots }
                   />
                 )}

diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
@@ -231,14 +231,15 @@ export function useDisplay (
   if (!display) throw new Error('Could not find Vuetify display injection')
 
   const mobile = computed(() => {
-    if (props.mobile != null) return props.mobile
+    if (typeof props.mobile === 'boolean' && !props.mobileBreakpoint) return props.mobile
+
     if (!props.mobileBreakpoint) return display.mobile.value
 
     const breakpointValue = typeof props.mobileBreakpoint === 'number'
       ? props.mobileBreakpoint
       : display.thresholds.value[props.mobileBreakpoint]
 
-    return display.width.value < breakpointValue
+    return props.mobile && display.width.value < breakpointValue
   })
 
   const displayClasses = computed(() => {