From dde088f62011214378746b6fd2cdcfc729f81c91 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 18:38:37 -0700 Subject: [PATCH] change mobileView prop to mobile --- .../src/components/VDataTable/VDataTable.tsx | 6 +-- .../VDataTable/VDataTableColumn.tsx | 4 +- .../VDataTable/VDataTableHeaders.tsx | 6 +-- .../components/VDataTable/VDataTableRow.tsx | 43 +++++++++++++------ .../components/VDataTable/VDataTableRows.tsx | 7 ++- .../VDataTable/VDataTableServer.tsx | 4 +- .../VDataTable/VDataTableVirtual.tsx | 4 +- .../src/components/VDataTable/types.ts | 2 +- 8 files changed, 45 insertions(+), 31 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index bfaf22309dc7..c256a4d9f50b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -55,7 +55,7 @@ export type VDataTableSlotProps = { groupedItems: readonly (DataTableItem | Group>)[] columns: InternalDataTableHeader[] headers: InternalDataTableHeader[][] - mobileView: boolean + mobile: boolean }; export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { @@ -163,7 +163,7 @@ export const VDataTable = genericComponent( 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( 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 index 9c98a047d899..a8a2b9134b50 100644 --- 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 ( ['isSorted'] } -type VDataTableHeaderCellColumnSlotProps = { +export type VDataTableHeaderCellColumnSlotProps = { column: InternalDataTableHeader selectAll: ReturnType['selectAll'] isSorted: ReturnType['isSorted'] @@ -71,7 +71,7 @@ export const makeVDataTableHeadersProps = propsFactory({ headerProps: { type: Object as PropType>, }, - mobileView: Boolean, + mobile: Boolean, ...makeLoaderProps(), }, 'VDataTableHeaders') @@ -88,7 +88,7 @@ export const VDataTableHeaders = genericComponent()({ 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 index 7f8e0227af5e..df24dd316861 100644 --- 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 = { 'item.data-table-select': Omit, 'value'> 'item.data-table-expand': Omit, 'value'> - // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps? - 'header.data-table-select': Omit, 'value'> - 'header.data-table-expand': Omit, 'value'> + // TODO: Check if this is correct + 'header.data-table-select': VDataTableHeaderCellColumnSlotProps + 'header.data-table-expand': VDataTableHeaderCellColumnSlotProps } & { [key: `item.${string}`]: ItemKeySlot - // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps? - [key: `header.${string}`]: ItemKeySlot + // 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( @@ -53,8 +55,9 @@ export const VDataTableRow = genericComponent( 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( '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( toggleExpand, } satisfies ItemKeySlot + // 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( 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( > {{ 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( const displayValue = toDisplayString(slotProps.value) - if (props.mobileView) { + if (props.mobile) { return ( <>
{ slots[headerSlotName] - ? slots[headerSlotName]!(slotProps) + ? slots[headerSlotName]!(columnSlotProps) : column.title }
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index 54cfb76b33d7..900d13beed91 100644 --- 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, default: () => ([]), }, - mobileView: Boolean, + mobile: Boolean, noDataText: { type: String, default: '$vuetify.noDataText', @@ -71,7 +71,7 @@ export const VDataTableRows = genericComponent( 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( 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 index d845cff0c389..664ed9f2764f 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 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 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 index 435f4a48f0ba..ea76b2c1a9e8 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 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 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 index c76b7b0661c7..99bd0f50020e 100644 --- a/packages/vuetify/src/components/VDataTable/types.ts +++ b/packages/vuetify/src/components/VDataTable/types.ts @@ -27,7 +27,7 @@ export type DataTableHeader> = { sortRaw?: DataTableCompareFunction filter?: FilterFunction - mobileView?: boolean + mobile?: boolean children?: DataTableHeader[] }