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

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

Hide file tree

Showing 4 changed files with 32 additions and 54 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -127,50 +127,33 @@
   .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
-
-      &-expanded-row,
-      &-select-row
-        display: flex !important
-        width: 100% !important
-
-      &-expanded-row
-        justify-content: center
-
-    .v-data-table-footer
-      justify-content: center
-      row-gap: 8px
+      &:not(:last-child)
+        border-bottom: 0 !important
 
-      &__pagination
-        margin-inline-start: 0
+  .v-data-table__td-title
+    font-weight: bold
+    text-align: left
 
-      &__info
-        justify-content: $data-table-footer-mobile-info-justify
-        padding: $data-table-footer-mobile-info-padding
+  .v-data-table__td-value
+    text-align: right
 
+  .v-data-table__td
     &-sort-icon
       color: $data-table-header-mobile-chip-icon-color
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -239,7 +239,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           <div class="v-data-table-header__content">
             <VSelect
               chips
-              class="v-data-table__mobile-sort-select"
+              class="v-data-table__td-sort-select"
               clearable
               density="default"
               items={ displayItems.value }
@@ -261,8 +261,8 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                     { props.item.title }
                     <VIcon
                       class={[
-                        'v-data-table__mobile-sort-icon',
-                        isSorted(props.item.raw) && 'v-data-table__mobile-sort-icon-active',
+                        'v-data-table__td-sort-icon',
+                        isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',
                       ]}
                       icon={ getSortIcon(props.item.raw) }
                       size="small"

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">
                         { slots[headerSlotName]?.(columnSlotProps) ?? column.title }
                       </div>
 
-                      <div class="v-data-table__mobile-td-value">
+                      <div class="v-data-table__td-value">
                         { slots[slotName]?.(slotProps) ?? displayValue }
                       </div>
                     </>

diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss
@@ -13,8 +13,5 @@ $data-table-footer-pagination-margin-inline-start: 16px !default;
 $data-table-footer-select-width: 90px !default;
 $data-table-footer-items-per-page-padding: 8px !default;
 
-$data-table-footer-mobile-info-padding: 0 0 0 16px !default;
-$data-table-footer-mobile-info-justify: flex-start !default;
-
 $data-table-header-mobile-chip-icon-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $data-table-header-mobile-chip-icon-color-active: rgba(var(--v-theme-on-surface)) !default;