change mobileView prop to mobile

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

Hide file tree

Showing 8 changed files with 45 additions and 31 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[][]
-  mobileView: boolean
+  mobile: boolean
 };
 
 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?.mobileView ? props.mobileView : mobile.value)
+    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
 
     const {
       isSelected,
@@ -210,7 +210,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
       toggleExpand,
       isGroupOpen,
       toggleGroup,
-      mobileView: mobileView.value,
+      mobile: mobileView.value,
       items: paginatedItemsWithoutGroups.value.map(item => item.raw),
       internalItems: paginatedItemsWithoutGroups.value,
       groupedItems: paginatedItems.value,

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx
@@ -16,11 +16,11 @@ export const VDataTableColumn = defineFunctionalComponent({
   noPadding: Boolean,
   tag: String,
   width: [Number, String],
-  mobileView: Boolean,
+  mobile: Boolean,
 }, (props, { slots }) => {
   const Tag = props.tag ?? 'td'
 
-  if (props.mobileView) {
+  if (props.mobile) {
     return (
       <Tag
         class={[

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -38,7 +38,7 @@ export type HeadersSlotProps = {
   isSorted: ReturnType<typeof provideSort>['isSorted']
 }
 
-type VDataTableHeaderCellColumnSlotProps = {
+export type VDataTableHeaderCellColumnSlotProps = {
   column: InternalDataTableHeader
   selectAll: ReturnType<typeof provideSelection>['selectAll']
   isSorted: ReturnType<typeof provideSort>['isSorted']
@@ -71,7 +71,7 @@ export const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object as PropType<Record<string, any>>,
   },
-  mobileView: Boolean,
+  mobile: Boolean,
 
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -88,7 +88,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const { loaderClasses } = useLoader(props)
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value)
+    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
 
     function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {
       if (!props.sticky && !column.fixed) return undefined

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
@@ -6,6 +6,7 @@ import { VCheckboxBtn } from '@/components/VCheckbox'
 import { useExpanded } from './composables/expand'
 import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
+import { useSort } from './composables/sort'
 import { VDataTableColumn } from './VDataTableColumn'
 
 // Utilities
@@ -15,20 +16,21 @@ import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRen
 // Types
 import type { PropType } from 'vue'
 import type { CellProps, DataTableItem, ItemKeySlot } from './types'
+import type { VDataTableHeaderCellColumnSlotProps } from './VDataTableHeaders'
 import type { GenericProps } from '@/util'
 
 export type VDataTableRowSlots<T> = {
   'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>
   'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>
 
-  // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps?
-  'header.data-table-select': Omit<ItemKeySlot<T>, 'value'>
-  'header.data-table-expand': Omit<ItemKeySlot<T>, 'value'>
+  // TODO: Check if this is correct
+  'header.data-table-select': VDataTableHeaderCellColumnSlotProps
+  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps
 } & {
   [key: `item.${string}`]: ItemKeySlot<T>
 
-  // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps?
-  [key: `header.${string}`]: ItemKeySlot<T>
+  // TODO: Check if this is correct
+  [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps
 }
 
 export const makeVDataTableRowProps = propsFactory({
@@ -38,7 +40,7 @@ export const makeVDataTableRowProps = propsFactory({
   onClick: EventProp<[MouseEvent]>(),
   onContextmenu: EventProp<[MouseEvent]>(),
   onDblclick: EventProp<[MouseEvent]>(),
-  mobileView: Boolean,
+  mobile: Boolean,
 }, 'VDataTableRow')
 
 export const VDataTableRow = genericComponent<new <T>(
@@ -53,8 +55,9 @@ export const VDataTableRow = genericComponent<new <T>(
   props: makeVDataTableRowProps(),
 
   setup (props, { slots }) {
-    const { isSelected, toggleSelect } = useSelection()
+    const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection()
     const { isExpanded, toggleExpand } = useExpanded()
+    const { toggleSort, sortBy, isSorted } = useSort()
     const { columns } = useHeaders()
 
     useRender(() => (
@@ -63,7 +66,7 @@ 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': props.mobileView,
+            'v-data-table__mobile-tr': props.mobile,
           },
         ]}
         onClick={ props.onClick as any }
@@ -88,6 +91,18 @@ export const VDataTableRow = genericComponent<new <T>(
               toggleExpand,
             } satisfies ItemKeySlot<any>
 
+            // TODO: Check if this is correct
+            const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {
+              column,
+              selectAll,
+              isSorted,
+              toggleSort,
+              sortBy: sortBy.value,
+              someSelected: someSelected.value,
+              allSelected: allSelected.value,
+              getSortIcon: () => '',
+            }
+
             const cellProps = typeof props.cellProps === 'function'
               ? props.cellProps({
                 index: slotProps.index,
@@ -111,9 +126,9 @@ export const VDataTableRow = genericComponent<new <T>(
                 align={ column.align }
                 class={
                   {
-                    'v-data-table__mobile-td': props.mobileView,
-                    'v-data-table__mobile-td-select-row': props.mobileView && columnKey === 'data-table-select',
-                    'v-data-table__mobile-td-expanded-row': props.mobileView && columnKey === 'data-table-expand',
+                    'v-data-table__mobile-td': props.mobile,
+                    'v-data-table__mobile-td-select-row': props.mobile && columnKey === 'data-table-select',
+                    'v-data-table__mobile-td-expanded-row': props.mobile && columnKey === 'data-table-expand',
                   }}
                 fixed={ column.fixed }
                 fixedOffset={ column.fixedOffset }
@@ -125,7 +140,7 @@ export const VDataTableRow = genericComponent<new <T>(
               >
                 {{
                   default: () => {
-                    if (slots[slotName] && !props.mobileView) return slots[slotName]!(slotProps)
+                    if (slots[slotName] && !props.mobile) return slots[slotName]!(slotProps)
 
                     if (columnKey === 'data-table-select') {
                       return slots['item.data-table-select']?.(slotProps) ?? (
@@ -150,13 +165,13 @@ export const VDataTableRow = genericComponent<new <T>(
 
                     const displayValue = toDisplayString(slotProps.value)
 
-                    if (props.mobileView) {
+                    if (props.mobile) {
                       return (
                         <>
                           <div class="v-data-table__mobile-td-title">
                             {
                             slots[headerSlotName]
-                              ? slots[headerSlotName]!(slotProps)
+                              ? slots[headerSlotName]!(columnSlotProps)
                               : column.title
                             }
                             </div>

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
@@ -41,7 +41,7 @@ export const makeVDataTableRowsProps = propsFactory({
     type: Array as PropType<readonly (DataTableItem | Group)[]>,
     default: () => ([]),
   },
-  mobileView: Boolean,
+  mobile: Boolean,
   noDataText: {
     type: String,
     default: '$vuetify.noDataText',
@@ -71,7 +71,7 @@ export const VDataTableRows = genericComponent<new <T>(
     const { t } = useLocale()
 
     const { mobile } = useDisplay()
-    const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value)
+    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
 
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
@@ -148,8 +148,7 @@ export const VDataTableRows = genericComponent<new <T>(
                   index,
                   item,
                   cellProps: props.cellProps,
-                  // headerProps: props.headerProps,
-                  mobileView: mobileView.value,
+                  mobile: mobileView.value,
                 },
                 getPrefixedEventHandlers(attrs, ':row', () => slotProps),
                 typeof props.rowProps === 'function'

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?.mobileView ? props.mobileView : mobile.value)
+    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
 
     useOptions({
       page,
@@ -138,7 +138,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
       toggleExpand,
       isGroupOpen,
       toggleGroup,
-      mobileView: mobileView.value,
+      mobile: mobileView.value,
       items: itemsWithoutGroups.value.map(item => item.raw),
       internalItems: itemsWithoutGroups.value,
       groupedItems: flatItems.value,

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?.mobileView ? props.mobileView : mobile.value)
+    const mobileView = computed(() => props?.mobile ? props.mobile : mobile.value)
 
     const {
       containerRef,
@@ -166,7 +166,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
       toggleExpand,
       isGroupOpen,
       toggleGroup,
-      mobileView: mobileView.value,
+      mobile: mobileView.value,
       items: allItems.value.map(item => item.raw),
       internalItems: allItems.value,
       groupedItems: flatItems.value,

diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts
@@ -27,7 +27,7 @@ export type DataTableHeader<T = Record<string, any>> = {
   sortRaw?: DataTableCompareFunction
   filter?: FilterFunction
 
-  mobileView?: boolean
+  mobile?: boolean
 
   children?: DataTableHeader<T>[]
 }