From 69273b8abe704f43fb505dbec5cc5a3e9813ec8e Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 18 Mar 2024 19:18:14 -0700
Subject: [PATCH] fix mobile to default to mobile if undefined

---
 .../src/components/VDataTable/VDataTable.tsx  |  4 ++--
 .../VDataTable/VDataTableColumn.tsx           | 24 -------------------
 .../VDataTable/VDataTableHeaders.tsx          | 11 +++++----
 .../components/VDataTable/VDataTableRows.tsx  |  7 ++++--
 .../VDataTable/VDataTableServer.tsx           |  2 +-
 .../VDataTable/VDataTableVirtual.tsx          |  2 +-
 6 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
index c256a4d9f50b..ef6291cc2eca 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -55,7 +55,7 @@ export type VDataTableSlotProps<T> = {
   groupedItems: readonly (DataTableItem<T> | Group<DataTableItem<T>>)[]
   columns: InternalDataTableHeader[]
   headers: InternalDataTableHeader[][]
-  mobile: boolean
+  mobile: boolean | undefined
 };
 
 export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {
@@ -163,7 +163,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
     const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
+    const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value)
 
     const {
       isSelected,
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx
index a8a2b9134b50..c8aba2fe7cf5 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx
@@ -16,33 +16,9 @@ export const VDataTableColumn = defineFunctionalComponent({
   noPadding: Boolean,
   tag: String,
   width: [Number, String],
-  mobile: Boolean,
 }, (props, { slots }) => {
   const Tag = props.tag ?? 'td'
 
-  if (props.mobile) {
-    return (
-      <Tag
-        class={[
-          'v-data-table__td',
-          {
-            'v-data-table-column--fixed': props.fixed,
-            'v-data-table-column--last-fixed': props.lastFixed,
-            'v-data-table-column--no-padding': props.noPadding,
-          },
-          `v-data-table-column--align-${props.align}`,
-        ]}
-        style={{
-          height: convertToUnit(props.height),
-          width: convertToUnit(props.width),
-          left: convertToUnit(props.fixedOffset || null),
-        }}
-      >
-        { slots.default?.() }
-      </Tag>
-    )
-  }
-
   return (
     <Tag
       class={[
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index 7b5de1b63174..c77673a664c7 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -71,7 +71,10 @@ export const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object as PropType<Record<string, any>>,
   },
-  mobile: Boolean,
+  mobile: {
+    type: Boolean,
+    default: undefined,
+  },
 
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -87,9 +90,6 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const { columns, headers } = useHeaders()
     const { loaderClasses } = useLoader(props)
 
-    const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
-
     function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {
       if (!props.sticky && !column.fixed) return undefined
 
@@ -110,6 +110,9 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
 
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')
 
+    const { mobile } = useDisplay()
+    const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value)
+
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
index 900d13beed91..5771a3ac1c90 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
@@ -41,7 +41,10 @@ export const makeVDataTableRowsProps = propsFactory({
     type: Array as PropType<readonly (DataTableItem | Group)[]>,
     default: () => ([]),
   },
-  mobile: Boolean,
+  mobile: {
+    type: Boolean,
+    default: undefined,
+  },
   noDataText: {
     type: String,
     default: '$vuetify.noDataText',
@@ -71,7 +74,7 @@ export const VDataTableRows = genericComponent<new <T>(
     const { t } = useLocale()
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
+    const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value)
 
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
index 664ed9f2764f..31f61de262d9 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -97,7 +97,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
     const itemsWithoutGroups = computed(() => extractRows(items.value))
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
+    const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value)
 
     useOptions({
       page,
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index ea76b2c1a9e8..c4b3f09ced5f 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -122,7 +122,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
     const { isExpanded, toggleExpand } = provideExpanded(props)
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
+    const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value)
 
     const {
       containerRef,