refactor(VDataTableRow): update how styles are applied for mobile

vuetifyjs · Apr 27, 2024 · b8a6eb6 · b8a6eb6
1 parent 0a95bfc
commit b8a6eb6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 37 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -127,38 +127,31 @@
   .v-data-table-rows-no-data
     text-align: center
 
-  .v-data-table__mobile
-    &-tr
-      > td
-        align-items: center
-        border-bottom: 0 !important
-        display: grid
-        grid-template-columns: repeat(2, 1fr)
+  .v-data-table__tr--mobile
+    > .v-data-table__td--expanded-row
+      grid-template-columns: 0
+      justify-content: center
 
-        &:last-child
-          border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
+    > .v-data-table__td--select-row
+      grid-template-columns: 0
+      justify-content: start
 
-    &-td
+    > td
+      align-items: center
       column-gap: 4px
-      height: auto !important
+      display: grid
+      grid-template-columns: repeat(2, 1fr)
       min-height: var(--v-table-row-height)
 
-      &-title
-        font-weight: bold
-        text-align: left
-
-      &-value
-        text-align: right
-        text-overflow: unset !important
-        white-space: unset !important
+      &:not(:last-child)
+        border-bottom: 0 !important
 
-      &-expanded-row,
-      &-select-row
-        display: flex !important
-        width: 100% !important
+  .v-data-table__td-title--mobile
+    font-weight: bold
+    text-align: left
 
-      &-expanded-row
-        justify-content: center
+  .v-data-table__td-value--mobile
+    text-align: right
 
     .v-data-table-footer
       justify-content: center

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
@@ -53,7 +53,7 @@ export const VDataTableRow = genericComponent<new <T>(
   props: makeVDataTableRowProps(),
 
   setup (props, { slots }) {
-    const { mobile } = useDisplay(props)
+    const { displayClasses, mobile } = useDisplay(props, 'v-data-table__tr')
     const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection()
     const { isExpanded, toggleExpand } = useExpanded()
     const { toggleSort, sortBy, isSorted } = useSort()
@@ -65,8 +65,8 @@ export const VDataTableRow = genericComponent<new <T>(
           'v-data-table__tr',
           {
             'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick),
-            'v-data-table__mobile-tr': mobile.value,
           },
+          displayClasses.value,
         ]}
         onClick={ props.onClick as any }
         onContextmenu={ props.onContextmenu as any }
@@ -120,19 +120,17 @@ export const VDataTableRow = genericComponent<new <T>(
           return (
             <VDataTableColumn
               align={ column.align }
-              class={
-                {
-                  'v-data-table__mobile-td': mobile.value,
-                  'v-data-table__mobile-td-select-row': mobile.value && column.key === 'data-table-select',
-                  'v-data-table__mobile-td-expanded-row': mobile.value && column.key === 'data-table-expand',
-                }}
+              class={{
+                'v-data-table__td--expanded-row': column.key === 'data-table-expand',
+                'v-data-table__td--select-row': column.key === 'data-table-select',
+              }}
               fixed={ column.fixed }
               fixedOffset={ column.fixedOffset }
               lastFixed={ column.lastFixed }
-              maxWidth={ column.maxWidth }
+              maxWidth={ !mobile.value ? column.maxWidth : undefined }
               noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }
               nowrap={ column.nowrap }
-              width={ column.width }
+              width={ !mobile.value ? column.width : undefined }
               { ...cellProps }
               { ...columnCellProps }
             >
@@ -165,11 +163,11 @@ export const VDataTableRow = genericComponent<new <T>(
 
                   return !mobile.value ? displayValue : (
                     <>
-                      <div class="v-data-table__mobile-td-title">
+                      <div class="v-data-table__td-title--mobile">
                         { slots[headerSlotName]?.(columnSlotProps) ?? column.title }
                       </div>
 
-                      <div class="v-data-table__mobile-td-value">
+                      <div class="v-data-table__td-value--mobile">
                         { slots[slotName]?.(slotProps) ?? displayValue }
                       </div>
                     </>