fix mobile to default to mobile if undefined

vuetifyjs · Mar 19, 2024 · 69273b8 · 69273b8
1 parent dde088f
commit 69273b8
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,