From bcbe2e1308959140f090069cdddc1ad9605b06d8 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 15 Mar 2024 12:54:35 -0700 Subject: [PATCH 01/73] add mobile thead holder for sortby select --- .../src/components/VDataTable/VDataTable.tsx | 19 ++++-- .../VDataTable/VDataTableHeaders.tsx | 63 +++++++++++++++++-- 2 files changed, 70 insertions(+), 12 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 9a6d241e0c4..f0f8dff82b5 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -30,6 +30,7 @@ import type { Group } from './composables/group' import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' import type { VDataTableHeadersSlots } from './VDataTableHeaders' import type { VDataTableRowsSlots } from './VDataTableRows' +import type { DisplayInstance } from '@/composables/display' import type { GenericProps, SelectItemKey } from '@/util' export type VDataTableSlotProps = { @@ -75,6 +76,7 @@ export const makeDataTableProps = propsFactory({ width: [String, Number], search: String, + mobileView: [Boolean], ...makeDataTableExpandProps(), ...makeDataTableGroupProps(), @@ -103,6 +105,7 @@ export const VDataTable = genericComponent( cellProps?: CellProps> itemSelectable?: SelectItemKey> headers?: DeepReadonly>[]> + mobileView?: keyof DisplayInstance modelValue?: V 'onUpdate:modelValue'?: (value: V) => void }, @@ -160,6 +163,8 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) + const mobileView = computed(() => props.mobileView || 'mobile') + const { isSelected, select, @@ -205,6 +210,7 @@ export const VDataTable = genericComponent( toggleExpand, isGroupOpen, toggleGroup, + mobileView: mobileView.value, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, groupedItems: paginatedItems.value, @@ -225,6 +231,7 @@ export const VDataTable = genericComponent( { 'v-data-table--show-select': props.showSelect, 'v-data-table--loading': props.loading, + 'v-data-table--mobile': props.mobileView, }, props.class, ]} @@ -236,12 +243,12 @@ export const VDataTable = genericComponent( default: () => slots.default ? slots.default(slotProps.value) : ( <> { slots.colgroup?.(slotProps.value) } - - - + + + { slots.thead?.(slotProps.value) } { slots['body.prepend']?.(slotProps.value) } diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index bef30691df4..ecb1387915b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -67,6 +67,7 @@ export const makeVDataTableHeadersProps = propsFactory({ headerProps: { type: Object as PropType>, }, + mobileView: [Boolean], ...makeLoaderProps(), }, 'VDataTableHeaders') @@ -114,6 +115,15 @@ export const VDataTableHeaders = genericComponent()({ getSortIcon, } satisfies HeadersSlotProps)) + const headerCellClasses = computed(() => [ + 'v-data-table__th', + { + 'v-data-table__th--sticky': props.sticky, + 'v-data-table__th--mobile': props.mobileView, + }, + loaderClasses.value, + ]) + const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => { const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand' const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {}) @@ -123,12 +133,11 @@ export const VDataTableHeaders = genericComponent()({ tag="th" align={ column.align } class={[ - 'v-data-table__th', + ...headerCellClasses.value, { 'v-data-table__th--sortable': column.sortable, 'v-data-table__th--sorted': isSorted(column), 'v-data-table__th--fixed': column.fixed, - 'v-data-table__th--sticky': props.sticky, }, loaderClasses.value, ]} @@ -201,18 +210,60 @@ export const VDataTableHeaders = genericComponent()({ ) } + const VDataTableMobileHeaderCell = ({ y }: + { y: number }) => { + const headerProps = mergeProps(props.headerProps ?? {} ?? {}) + + return ( + + {{ + default: () => { + const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { + isSorted, + toggleSort, + sortBy: sortBy.value, + getSortIcon, + } + + return ( +
+ VSelect SortBy +
+ ) + }, + }} + + ) + } + useRender(() => { return ( <> - { slots.headers - ? slots.headers(slotProps.value) - : headers.value.map((row, y) => ( + { props.mobileView + ? ( + headers.value.map((row, y) => ( + + + + )) + ) + : slots.headers + ? slots.headers(slotProps.value) + : headers.value.map((row, y) => ( { row.map((column, x) => ( ))} - ))} + ))} { props.loading && ( From 3b205a4335f2fbeea44d5e61da955f0e70caf0e6 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 15 Mar 2024 17:17:13 -0700 Subject: [PATCH 02/73] add mobile items --- .../src/components/VDataTable/VDataTable.sass | 30 +++ .../src/components/VDataTable/VDataTable.tsx | 3 +- .../VDataTable/VDataTableColumn.tsx | 25 ++ .../components/VDataTable/VDataTableRow.tsx | 248 ++++++++++++------ .../components/VDataTable/VDataTableRows.tsx | 4 + 5 files changed, 235 insertions(+), 75 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index ca3b69d0222..085c2f71571 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -117,3 +117,33 @@ .v-data-table-rows-loading, .v-data-table-rows-no-data text-align: center + +.v-data-table + &__tr-mobile + > td + border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important + + &__td-mobile + align-items: center + border-bottom: 0 !important + display: grid !important + grid-template-columns: repeat(2, 1fr) + + &:last-child:not(.is-expanded) + border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important + + &-key + font-weight: bold + + &-value + text-align: right + text-overflow: unset !important + white-space: unset !important + + &-expanded-row + display: flex !important + justify-content: center + text-align: center !important + + &-expanded + border-bottom: 0 !important diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index f0f8dff82b5..4a208c13efa 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -76,7 +76,7 @@ export const makeDataTableProps = propsFactory({ width: [String, Number], search: String, - mobileView: [Boolean], + mobileView: Boolean, ...makeDataTableExpandProps(), ...makeDataTableGroupProps(), @@ -256,6 +256,7 @@ export const VDataTable = genericComponent( diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx index 36044eb9ea2..9c98a047d89 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx @@ -16,8 +16,33 @@ export const VDataTableColumn = defineFunctionalComponent({ noPadding: Boolean, tag: String, width: [Number, String], + mobileView: Boolean, }, (props, { slots }) => { const Tag = props.tag ?? 'td' + + if (props.mobileView) { + return ( + + { slots.default?.() } + + ) + } + return ( (), onContextmenu: EventProp<[MouseEvent]>(), onDblclick: EventProp<[MouseEvent]>(), + mobileView: Boolean, }, 'VDataTableRow') export const VDataTableRow = genericComponent( @@ -45,7 +46,7 @@ export const VDataTableRow = genericComponent( setup (props, { slots }) { const { isSelected, toggleSelect } = useSelection() const { isExpanded, toggleExpand } = useExpanded() - const { columns } = useHeaders() + const { columns, headers } = useHeaders() useRender(() => ( ( 'v-data-table__tr', { 'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick), + 'v-data-table__tr--mobile': props.mobileView, }, ]} onClick={ props.onClick as any } onContextmenu={ props.onContextmenu as any } onDblclick={ props.onDblclick as any } > - { props.item && columns.value.map((column, i) => { - const item = props.item! - const slotName = `item.${column.key}` as const - const slotProps = { - index: props.index!, - item: item.raw, - internalItem: item, - value: getObjectValueByPath(item.columns, column.key), - column, - isSelected, - toggleSelect, - isExpanded, - toggleExpand, - } satisfies ItemKeySlot - - const cellProps = typeof props.cellProps === 'function' - ? props.cellProps({ - index: slotProps.index, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, + { + props.item && props.mobileView && headers.value.map((column, i) => { + const item = props.item! + const slotName = `item.${column.key}` as const + const slotProps = { + index: props.index!, + item: item.raw, + internalItem: item, + value: getObjectValueByPath(item.columns, column.key), column, + isSelected, + toggleSelect, + isExpanded, + toggleExpand, + } satisfies ItemKeySlot + + const cellProps = typeof props.cellProps === 'function' + ? props.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + column, + }) + : props.cellProps + const columnCellProps = typeof column.cellProps === 'function' + ? column.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + }) + : column.cellProps + + const cell = [] + + column.forEach((col, v) => { + const columnKey = col.key + const isSelectOrExpand = columnKey === 'data-table-select' || columnKey === 'data-table-expand' + + cell.push( + + {{ + default: () => { + if (slots[slotName]) return slots[slotName]!(slotProps) + + if (columnKey === 'data-table-select') { + return slots['item.data-table-select']?.(slotProps) ?? ( + toggleSelect(item), ['stop']) } + /> + ) + } + + if (columnKey === 'data-table-expand') { + return slots['item.data-table-expand']?.(slotProps) ?? ( + toggleExpand(item), ['stop']) } + /> + ) + } + + return ( + <> +
{ toDisplayString(col.title) }
+
{ toDisplayString(item.columns[columnKey]) }
+ + ) + }, + }} + + ) }) - : props.cellProps - const columnCellProps = typeof column.cellProps === 'function' - ? column.cellProps({ - index: slotProps.index, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, - }) - : column.cellProps - - return ( - - {{ - default: () => { - if (slots[slotName]) return slots[slotName]!(slotProps) - - if (column.key === 'data-table-select') { - return slots['item.data-table-select']?.(slotProps) ?? ( - toggleSelect(item), ['stop']) } - /> - ) - } - - if (column.key === 'data-table-expand') { - return slots['item.data-table-expand']?.(slotProps) ?? ( - toggleExpand(item), ['stop']) } - /> - ) - } - - return toDisplayString(slotProps.value) - }, - }} - - ) - })} + + return cell + }) + } + + { + props.item && !props.mobileView && columns.value.map((column, i) => { + const item = props.item! + const slotName = `item.${column.key}` as const + const slotProps = { + index: props.index!, + item: item.raw, + internalItem: item, + value: getObjectValueByPath(item.columns, column.key), + column, + isSelected, + toggleSelect, + isExpanded, + toggleExpand, + } satisfies ItemKeySlot + + const cellProps = typeof props.cellProps === 'function' + ? props.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + column, + }) + : props.cellProps + const columnCellProps = typeof column.cellProps === 'function' + ? column.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + }) + : column.cellProps + + return ( + + {{ + default: () => { + if (slots[slotName]) return slots[slotName]!(slotProps) + + if (column.key === 'data-table-select') { + return slots['item.data-table-select']?.(slotProps) ?? ( + toggleSelect(item), ['stop']) } + /> + ) + } + + if (column.key === 'data-table-expand') { + return slots['item.data-table-expand']?.(slotProps) ?? ( + toggleExpand(item), ['stop']) } + /> + ) + } + + return toDisplayString(slotProps.value) + }, + }} + + ) + }) + } )) }, diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index 0c2719e33c6..1b888e47515 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -40,12 +40,14 @@ export const makeVDataTableRowsProps = propsFactory({ type: Array as PropType, default: () => ([]), }, + mobileView: Boolean, noDataText: { type: String, default: '$vuetify.noDataText', }, rowProps: [Object, Function] as PropType>, cellProps: [Object, Function] as PropType>, + headersProps: [Object, Function] as PropType>, }, 'VDataTableRows') export const VDataTableRows = genericComponent( @@ -142,6 +144,8 @@ export const VDataTableRows = genericComponent( index, item, cellProps: props.cellProps, + headerProps: props.headerProps, + mobileView: props.mobileView, }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' From aee39eedb26d64a0cf0506c91c192e4f91d40c6b Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 16 Mar 2024 13:46:34 -0700 Subject: [PATCH 03/73] update nesting classes --- .../VDataTable/VDataTableFooter.sass | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass index 1e8ff47a3d0..dd33678d65b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass @@ -3,33 +3,33 @@ @use './variables' as * .v-data-table-footer - display: flex align-items: center + display: flex flex-wrap: wrap - padding: $data-table-footer-padding justify-content: flex-end + padding: $data-table-footer-padding -.v-data-table-footer__items-per-page - display: flex - align-items: center - justify-content: center + &__items-per-page + align-items: center + display: flex + justify-content: center - > span - padding-inline-end: $data-table-footer-items-per-page-padding + > span + padding-inline-end: $data-table-footer-items-per-page-padding - > .v-select - width: $data-table-footer-select-width + > .v-select + width: $data-table-footer-select-width -.v-data-table-footer__info - display: flex - justify-content: flex-end - min-width: $data-table-footer-info-min-width - padding: $data-table-footer-info-padding + &__info + display: flex + justify-content: flex-end + min-width: $data-table-footer-info-min-width + padding: $data-table-footer-info-padding -.v-data-table-footer__pagination - display: flex - align-items: center - margin-inline-start: $data-table-footer-pagination-margin-inline-start + &__pagination + align-items: center + display: flex + margin-inline-start: $data-table-footer-pagination-margin-inline-start -.v-data-table-footer__page - padding: 0 8px + &__page + padding: 0 8px From 699dc6eae963a0c843fcbadb12929a3728de01a9 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 14:19:53 -0700 Subject: [PATCH 04/73] update mobile style and organize some nested elements --- .../src/components/VDataTable/VDataTable.sass | 115 +++++++++--------- 1 file changed, 58 insertions(+), 57 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 085c2f71571..f0f538b01c6 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -6,26 +6,26 @@ .v-data-table width: 100% -.v-data-table__table - width: 100% - border-collapse: separate - border-spacing: 0 + &__table + border-collapse: separate + border-spacing: 0 + width: 100% -.v-data-table__tr - &--focus - border: 1px dotted black + &__tr + &--focus + border: 1px dotted black - &--clickable - cursor: pointer + &--clickable + cursor: pointer .v-data-table .v-table__wrapper > table > thead, - tbody + tbody > tr > td, - th + th &.v-data-table-column--align-end text-align: end @@ -46,15 +46,15 @@ align-items: center > th.v-data-table__th--fixed - position: sticky + position: sticky > th.v-data-table__th--sortable:hover - cursor: pointer - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) + cursor: pointer + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) > th:not(.v-data-table__th--sorted) - .v-data-table-header__sort-icon - opacity: 0 + .v-data-table-header__sort-icon + opacity: 0 &:hover .v-data-table-header__sort-icon @@ -88,22 +88,23 @@ .v-data-table-group-header-row__column padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important -.v-data-table-header__content - display: flex - align-items: center - -.v-data-table-header__sort-badge - display: inline-flex - justify-content: center - align-items: center - font-size: 0.875rem - padding: 4px - border-radius: 50% - background: $data-table-header-sort-badge-color - min-width: $data-table-header-sort-badge-size - min-height: $data-table-header-sort-badge-size - width: $data-table-header-sort-badge-size - height: $data-table-header-sort-badge-size +.v-data-table-header + &__content + align-items: center + display: flex + + &__sort-badge + align-items: center + background: $data-table-header-sort-badge-color + border-radius: 50% + display: inline-flex + font-size: 0.875rem + height: $data-table-header-sort-badge-size + justify-content: center + min-height: $data-table-header-sort-badge-size + min-width: $data-table-header-sort-badge-size + padding: 4px + width: $data-table-header-sort-badge-size .v-data-table-progress > th @@ -111,39 +112,39 @@ height: auto !important padding: 0 !important -.v-data-table-progress__loader - position: relative + &__loader + position: relative .v-data-table-rows-loading, .v-data-table-rows-no-data text-align: center .v-data-table - &__tr-mobile - > td - border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important - - &__td-mobile - align-items: center - border-bottom: 0 !important - display: grid !important - grid-template-columns: repeat(2, 1fr) + &__mobile + &-tr + > td + align-items: center + border-bottom: 0 !important + display: grid + grid-template-columns: repeat(2, 1fr) - &:last-child:not(.is-expanded) - border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important + &:last-child:not(.is-expanded) + border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important - &-key - font-weight: bold + &-td + &-title + font-weight: bold - &-value - text-align: right - text-overflow: unset !important - white-space: unset !important + &-value + text-align: right + text-overflow: unset !important + white-space: unset !important - &-expanded-row - display: flex !important - justify-content: center - text-align: center !important + &-expanded-row + display: flex !important + justify-content: center + text-align: center !important + width: 100% !important - &-expanded - border-bottom: 0 !important + &-expanded + border-bottom: 0 !important From 5dbc552103175b147c628bf08f3f814559ae2380 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 14:20:25 -0700 Subject: [PATCH 05/73] change classname --- .../components/VDataTable/VDataTableHeaders.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index ecb1387915b..48413f07386 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -119,7 +119,7 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__th', { 'v-data-table__th--sticky': props.sticky, - 'v-data-table__th--mobile': props.mobileView, + 'v-data-table__mobile-th': props.mobileView, }, loaderClasses.value, ]) @@ -226,12 +226,12 @@ export const VDataTableHeaders = genericComponent()({ > {{ default: () => { - const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { - isSorted, - toggleSort, - sortBy: sortBy.value, - getSortIcon, - } + // const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { + // isSorted, + // toggleSort, + // sortBy: sortBy.value, + // getSortIcon, + // } return (
From 8ceee42654907d69cb5154f6f262871a82f656dd Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 14:21:02 -0700 Subject: [PATCH 06/73] move mobile view to be more streamline and reduce duplication --- .../components/VDataTable/VDataTableRow.tsx | 129 ++++-------------- 1 file changed, 26 insertions(+), 103 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 1a837925ddd..0840a6364bf 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -46,7 +46,7 @@ export const VDataTableRow = genericComponent( setup (props, { slots }) { const { isSelected, toggleSelect } = useSelection() const { isExpanded, toggleExpand } = useExpanded() - const { columns, headers } = useHeaders() + const { columns } = useHeaders() useRender(() => ( ( 'v-data-table__tr', { 'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick), - 'v-data-table__tr--mobile': props.mobileView, + 'v-data-table__mobile-tr': props.mobileView, }, ]} onClick={ props.onClick as any } @@ -62,105 +62,10 @@ export const VDataTableRow = genericComponent( onDblclick={ props.onDblclick as any } > { - props.item && props.mobileView && headers.value.map((column, i) => { - const item = props.item! - const slotName = `item.${column.key}` as const - const slotProps = { - index: props.index!, - item: item.raw, - internalItem: item, - value: getObjectValueByPath(item.columns, column.key), - column, - isSelected, - toggleSelect, - isExpanded, - toggleExpand, - } satisfies ItemKeySlot - - const cellProps = typeof props.cellProps === 'function' - ? props.cellProps({ - index: slotProps.index, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, - column, - }) - : props.cellProps - const columnCellProps = typeof column.cellProps === 'function' - ? column.cellProps({ - index: slotProps.index, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, - }) - : column.cellProps - - const cell = [] - - column.forEach((col, v) => { - const columnKey = col.key - const isSelectOrExpand = columnKey === 'data-table-select' || columnKey === 'data-table-expand' - - cell.push( - - {{ - default: () => { - if (slots[slotName]) return slots[slotName]!(slotProps) - - if (columnKey === 'data-table-select') { - return slots['item.data-table-select']?.(slotProps) ?? ( - toggleSelect(item), ['stop']) } - /> - ) - } - - if (columnKey === 'data-table-expand') { - return slots['item.data-table-expand']?.(slotProps) ?? ( - toggleExpand(item), ['stop']) } - /> - ) - } - - return ( - <> -
{ toDisplayString(col.title) }
-
{ toDisplayString(item.columns[columnKey]) }
- - ) - }, - }} - - ) - }) - - return cell - }) - } - - { - props.item && !props.mobileView && columns.value.map((column, i) => { + props.item && columns.value.map((column, i) => { const item = props.item! const slotName = `item.${column.key}` as const + const columnKey = column.key const slotProps = { index: props.index!, item: item.raw, @@ -194,10 +99,17 @@ export const VDataTableRow = genericComponent( return ( ( default: () => { if (slots[slotName]) return slots[slotName]!(slotProps) - if (column.key === 'data-table-select') { + if (columnKey === 'data-table-select') { return slots['item.data-table-select']?.(slotProps) ?? ( ( ) } - if (column.key === 'data-table-expand') { + if (columnKey === 'data-table-expand') { return slots['item.data-table-expand']?.(slotProps) ?? ( ( ) } - return toDisplayString(slotProps.value) + const displayValue = toDisplayString(slotProps.value) + + if (props.mobileView) { + return ( + <> +
{ column.title }
+
{ displayValue }
+ + ) + } + + return displayValue }, }} From 76b3a0fb2b9f8a7aac6e03e8c23624dd701ba0be Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 14:22:04 -0700 Subject: [PATCH 07/73] change class and remove unused prop --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 4a208c13efa..d03c533fd63 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -76,7 +76,6 @@ export const makeDataTableProps = propsFactory({ width: [String, Number], search: String, - mobileView: Boolean, ...makeDataTableExpandProps(), ...makeDataTableGroupProps(), @@ -231,7 +230,7 @@ export const VDataTable = genericComponent( { 'v-data-table--show-select': props.showSelect, 'v-data-table--loading': props.loading, - 'v-data-table--mobile': props.mobileView, + 'v-data-table__mobile': props.mobileView, }, props.class, ]} From 34d27a750c722f8b78b672627ee77c5e3576834d Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:34:41 -0700 Subject: [PATCH 08/73] add mobileView type --- packages/vuetify/src/components/VDataTable/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts index e824ce07fbf..c76b7b0661c 100644 --- a/packages/vuetify/src/components/VDataTable/types.ts +++ b/packages/vuetify/src/components/VDataTable/types.ts @@ -27,6 +27,8 @@ export type DataTableHeader> = { sortRaw?: DataTableCompareFunction filter?: FilterFunction + mobileView?: boolean + children?: DataTableHeader[] } From 9fcdb04161fbef620206a3ec1593d1c0bbdb6fba Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:36:05 -0700 Subject: [PATCH 09/73] fix mobileView when no prop is set by user --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 9 +++++---- .../src/components/VDataTable/VDataTableHeaders.tsx | 10 +++++++--- .../src/components/VDataTable/VDataTableRows.tsx | 10 +++++++--- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index d03c533fd63..9bcd0937b75 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -18,6 +18,7 @@ import { createPagination, makeDataTablePaginateProps, providePagination, usePag import { makeDataTableSelectProps, provideSelection } from './composables/select' import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' import { provideDefaults } from '@/composables/defaults' +import { useDisplay } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities @@ -30,7 +31,6 @@ import type { Group } from './composables/group' import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' import type { VDataTableHeadersSlots } from './VDataTableHeaders' import type { VDataTableRowsSlots } from './VDataTableRows' -import type { DisplayInstance } from '@/composables/display' import type { GenericProps, SelectItemKey } from '@/util' export type VDataTableSlotProps = { @@ -55,6 +55,7 @@ export type VDataTableSlotProps = { groupedItems: readonly (DataTableItem | Group>)[] columns: InternalDataTableHeader[] headers: InternalDataTableHeader[][] + mobileView: boolean } export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { @@ -104,7 +105,6 @@ export const VDataTable = genericComponent( cellProps?: CellProps> itemSelectable?: SelectItemKey> headers?: DeepReadonly>[]> - mobileView?: keyof DisplayInstance modelValue?: V 'onUpdate:modelValue'?: (value: V) => void }, @@ -162,7 +162,8 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const mobileView = computed(() => props.mobileView || 'mobile') + const { mobile } = useDisplay() + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) const { isSelected, @@ -230,7 +231,7 @@ export const VDataTable = genericComponent( { 'v-data-table--show-select': props.showSelect, 'v-data-table--loading': props.loading, - 'v-data-table__mobile': props.mobileView, + 'v-data-table__mobile': mobileView.value, }, props.class, ]} diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 48413f07386..30d27613f90 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -8,6 +8,7 @@ import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' import { useSort } from './composables/sort' import { useBackgroundColor } from '@/composables/color' +import { useDisplay } from '@/composables/display' import { IconValue } from '@/composables/icons' import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' @@ -67,7 +68,7 @@ export const makeVDataTableHeadersProps = propsFactory({ headerProps: { type: Object as PropType>, }, - mobileView: [Boolean], + mobileView: Boolean, ...makeLoaderProps(), }, 'VDataTableHeaders') @@ -83,6 +84,9 @@ export const VDataTableHeaders = genericComponent()({ const { columns, headers } = useHeaders() const { loaderClasses } = useLoader(props) + const { mobile } = useDisplay() + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) + function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined { if (!props.sticky && !column.fixed) return undefined @@ -119,7 +123,7 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__th', { 'v-data-table__th--sticky': props.sticky, - 'v-data-table__mobile-th': props.mobileView, + 'v-data-table__mobile-th': mobileView.value, }, loaderClasses.value, ]) @@ -247,7 +251,7 @@ export const VDataTableHeaders = genericComponent()({ useRender(() => { return ( <> - { props.mobileView + { mobileView.value ? ( headers.value.map((row, y) => ( diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index 1b888e47515..54cfb76b33d 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -7,10 +7,11 @@ import { useExpanded } from './composables/expand' import { useGroupBy } from './composables/group' import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' +import { useDisplay } from '@/composables/display' import { useLocale } from '@/composables/locale' // Utilities -import { Fragment, mergeProps } from 'vue' +import { computed, Fragment, mergeProps } from 'vue' import { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util' // Types @@ -69,6 +70,9 @@ export const VDataTableRows = genericComponent( const { toggleGroup, isGroupOpen } = useGroupBy() const { t } = useLocale() + const { mobile } = useDisplay() + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) + useRender(() => { if (props.loading && (!props.items.length || slots.loading)) { return ( @@ -144,8 +148,8 @@ export const VDataTableRows = genericComponent( index, item, cellProps: props.cellProps, - headerProps: props.headerProps, - mobileView: props.mobileView, + // headerProps: props.headerProps, + mobileView: mobileView.value, }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' From ce28ed69b6e9f81cc8bc2aa05a5c723c7431efbf Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:36:32 -0700 Subject: [PATCH 10/73] add mobileView --- .../vuetify/src/components/VDataTable/VDataTableServer.tsx | 6 ++++++ .../vuetify/src/components/VDataTable/VDataTableVirtual.tsx | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx index 5cdec91857a..d845cff0c38 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx @@ -15,6 +15,7 @@ import { createPagination, makeDataTablePaginateProps, providePagination } from import { provideSelection } from './composables/select' import { createSort, provideSort } from './composables/sort' import { provideDefaults } from '@/composables/defaults' +import { useDisplay } from '@/composables/display' // Utilities import { computed, provide, toRef } from 'vue' @@ -95,6 +96,9 @@ export const VDataTableServer = genericComponent extractRows(items.value)) + const { mobile } = useDisplay() + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) + useOptions({ page, itemsPerPage, @@ -134,6 +138,7 @@ export const VDataTableServer = genericComponent item.raw), internalItems: itemsWithoutGroups.value, groupedItems: flatItems.value, @@ -153,6 +158,7 @@ export const VDataTableServer = genericComponent props?.mobileView ? props.mobileView : mobile.value) + const { containerRef, markerRef, @@ -162,6 +166,7 @@ export const VDataTableVirtual = genericComponent item.raw), internalItems: allItems.value, groupedItems: flatItems.value, From 895a4b9654a0a1ca3390b708b05181ae1b7a1ec0 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:41:24 -0700 Subject: [PATCH 11/73] update style of expanded row --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 6 +----- .../vuetify/src/components/VDataTable/VDataTableRow.tsx | 1 - 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index f0f538b01c6..b9d34637ebe 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -128,7 +128,7 @@ display: grid grid-template-columns: repeat(2, 1fr) - &:last-child:not(.is-expanded) + &:last-child border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important &-td @@ -143,8 +143,4 @@ &-expanded-row display: flex !important justify-content: center - text-align: center !important width: 100% !important - - &-expanded - border-bottom: 0 !important diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 0840a6364bf..7a1ef36c6d2 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -104,7 +104,6 @@ export const VDataTableRow = genericComponent( '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', - 'is-expanded': isExpanded(item) && props.mobileView && columnKey === 'data-table-expand', }} fixed={ column.fixed } fixedOffset={ column.fixedOffset } From c586bba914eeecb73db7da79493df15efb6abf8a Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:49:26 -0700 Subject: [PATCH 12/73] add align left to mobile title col --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index b9d34637ebe..892640367a4 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -134,6 +134,7 @@ &-td &-title font-weight: bold + text-align: left &-value text-align: right From 4fc420fd4218f508b47768ca16f978e8d996c055 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 15:52:39 -0700 Subject: [PATCH 13/73] change mobile header to empty for now --- .../VDataTable/VDataTableHeaders.tsx | 58 ++++++++++--------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 30d27613f90..e89432ecdb1 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -216,36 +216,38 @@ export const VDataTableHeaders = genericComponent()({ const VDataTableMobileHeaderCell = ({ y }: { y: number }) => { - const headerProps = mergeProps(props.headerProps ?? {} ?? {}) + // const headerProps = mergeProps(props.headerProps ?? {} ?? {}) - return ( - - {{ - default: () => { - // const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { - // isSorted, - // toggleSort, - // sortBy: sortBy.value, - // getSortIcon, - // } + // return ( + // + // {{ + // default: () => { + // const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { + // isSorted, + // toggleSort, + // sortBy: sortBy.value, + // getSortIcon, + // } - return ( -
- VSelect SortBy -
- ) - }, - }} - - ) + // return ( + //
+ // VSelect SortBy + //
+ // ) + // }, + // }} + // + // ) + + return <> } useRender(() => { From f7cd4780afa3c9d109149b081d1098b4c2d65e40 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sun, 17 Mar 2024 17:13:17 -0700 Subject: [PATCH 14/73] add vselect to header column --- .../src/components/VDataTable/VDataTable.tsx | 248 +++++++++--------- .../VDataTable/VDataTableHeaders.tsx | 71 +++-- 2 files changed, 166 insertions(+), 153 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 9bcd0937b75..b5855d85bf9 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -1,76 +1,76 @@ // Styles -import './VDataTable.sass' +import './VDataTable.sass'; // Components -import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' -import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders' -import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows' -import { VDivider } from '@/components/VDivider' -import { makeVTableProps, VTable } from '@/components/VTable/VTable' +import { makeDataTableExpandProps, provideExpanded } from './composables/expand'; +import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group'; +import { createHeaders, makeDataTableHeaderProps } from './composables/headers'; +import { makeDataTableItemsProps, useDataTableItems } from './composables/items'; +import { useOptions } from './composables/options'; +import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate'; +import { makeDataTableSelectProps, provideSelection } from './composables/select'; +import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort'; +import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter'; +import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders'; +import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows'; +import { VDivider } from '@/components/VDivider'; +import { makeVTableProps, VTable } from '@/components/VTable/VTable'; // Composables -import { makeDataTableExpandProps, provideExpanded } from './composables/expand' -import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group' -import { createHeaders, makeDataTableHeaderProps } from './composables/headers' -import { makeDataTableItemsProps, useDataTableItems } from './composables/items' -import { useOptions } from './composables/options' -import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate' -import { makeDataTableSelectProps, provideSelection } from './composables/select' -import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' -import { provideDefaults } from '@/composables/defaults' -import { useDisplay } from '@/composables/display' -import { makeFilterProps, useFilter } from '@/composables/filter' +import { provideDefaults } from '@/composables/defaults'; +import { useDisplay } from '@/composables/display'; +import { makeFilterProps, useFilter } from '@/composables/filter'; // Utilities -import { computed, toRef } from 'vue' -import { genericComponent, propsFactory, useRender } from '@/util' +import { computed, toRef } from 'vue'; +import { genericComponent, propsFactory, useRender } from '@/util'; // Types -import type { DeepReadonly, UnwrapRef } from 'vue' -import type { Group } from './composables/group' -import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' -import type { VDataTableHeadersSlots } from './VDataTableHeaders' -import type { VDataTableRowsSlots } from './VDataTableRows' -import type { GenericProps, SelectItemKey } from '@/util' +import type { DeepReadonly, UnwrapRef } from 'vue'; +import type { Group } from './composables/group'; +import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types'; +import type { VDataTableHeadersSlots } from './VDataTableHeaders'; +import type { VDataTableRowsSlots } from './VDataTableRows'; +import type { GenericProps, SelectItemKey } from '@/util'; export type VDataTableSlotProps = { - page: number - itemsPerPage: number - sortBy: UnwrapRef['sortBy']> - pageCount: number - toggleSort: ReturnType['toggleSort'] - setItemsPerPage: ReturnType['setItemsPerPage'] - someSelected: boolean - allSelected: boolean - isSelected: ReturnType['isSelected'] - select: ReturnType['select'] - selectAll: ReturnType['selectAll'] - toggleSelect: ReturnType['toggleSelect'] - isExpanded: ReturnType['isExpanded'] - toggleExpand: ReturnType['toggleExpand'] - isGroupOpen: ReturnType['isGroupOpen'] - toggleGroup: ReturnType['toggleGroup'] - items: readonly T[] - internalItems: readonly DataTableItem[] - groupedItems: readonly (DataTableItem | Group>)[] - columns: InternalDataTableHeader[] - headers: InternalDataTableHeader[][] - mobileView: boolean -} + page: number; + itemsPerPage: number; + sortBy: UnwrapRef['sortBy']>; + pageCount: number; + toggleSort: ReturnType['toggleSort']; + setItemsPerPage: ReturnType['setItemsPerPage']; + someSelected: boolean; + allSelected: boolean; + isSelected: ReturnType['isSelected']; + select: ReturnType['select']; + selectAll: ReturnType['selectAll']; + toggleSelect: ReturnType['toggleSelect']; + isExpanded: ReturnType['isExpanded']; + toggleExpand: ReturnType['toggleExpand']; + isGroupOpen: ReturnType['isGroupOpen']; + toggleGroup: ReturnType['toggleGroup']; + items: readonly T[]; + internalItems: readonly DataTableItem[]; + groupedItems: readonly (DataTableItem | Group>)[]; + columns: InternalDataTableHeader[]; + headers: InternalDataTableHeader[][]; + mobileView: boolean; +}; export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { - default: VDataTableSlotProps - colgroup: VDataTableSlotProps - top: VDataTableSlotProps - body: VDataTableSlotProps - tbody: VDataTableSlotProps - thead: VDataTableSlotProps - tfoot: VDataTableSlotProps - bottom: VDataTableSlotProps - 'body.prepend': VDataTableSlotProps - 'body.append': VDataTableSlotProps - 'footer.prepend': never -} + default: VDataTableSlotProps; + colgroup: VDataTableSlotProps; + top: VDataTableSlotProps; + body: VDataTableSlotProps; + tbody: VDataTableSlotProps; + thead: VDataTableSlotProps; + tfoot: VDataTableSlotProps; + bottom: VDataTableSlotProps; + 'body.prepend': VDataTableSlotProps; + 'body.append': VDataTableSlotProps; + 'footer.prepend': never; +}; export const makeDataTableProps = propsFactory({ ...makeVDataTableRowsProps(), @@ -86,27 +86,27 @@ export const makeDataTableProps = propsFactory({ ...makeDataTableSortProps(), ...makeVDataTableHeadersProps(), ...makeVTableProps(), -}, 'DataTable') +}, 'DataTable'); export const makeVDataTableProps = propsFactory({ ...makeDataTablePaginateProps(), ...makeDataTableProps(), ...makeFilterProps(), ...makeVDataTableFooterProps(), -}, 'VDataTable') +}, 'VDataTable'); -type ItemType = T extends readonly (infer U)[] ? U : never +type ItemType = T extends readonly (infer U)[] ? U : never; export const VDataTable = genericComponent( props: { - items?: T - itemValue?: SelectItemKey> - rowProps?: RowProps> - cellProps?: CellProps> - itemSelectable?: SelectItemKey> - headers?: DeepReadonly>[]> - modelValue?: V - 'onUpdate:modelValue'?: (value: V) => void + items?: T; + itemValue?: SelectItemKey>; + rowProps?: RowProps>; + cellProps?: CellProps>; + itemSelectable?: SelectItemKey>; + headers?: DeepReadonly>[]>; + modelValue?: V; + 'onUpdate:modelValue'?: (value: V) => void; }, slots: VDataTableSlots>, ) => GenericProps>()({ @@ -125,10 +125,10 @@ export const VDataTable = genericComponent( 'update:currentItems': (value: any) => true, }, - setup (props, { attrs, slots }) { - const { groupBy } = createGroupBy(props) - const { sortBy, multiSort, mustSort } = createSort(props) - const { page, itemsPerPage } = createPagination(props) + setup(props, { attrs, slots }) { + const { groupBy } = createGroupBy(props); + const { sortBy, multiSort, mustSort } = createSort(props); + const { page, itemsPerPage } = createPagination(props); const { columns, @@ -140,30 +140,30 @@ export const VDataTable = genericComponent( groupBy, showSelect: toRef(props, 'showSelect'), showExpand: toRef(props, 'showExpand'), - }) + }); - const { items } = useDataTableItems(props, columns) + const { items } = useDataTableItems(props, columns); - const search = toRef(props, 'search') + const search = toRef(props, 'search'); const { filteredItems } = useFilter(props, items, search, { transform: item => item.columns, customKeyFilter: filterFunctions, - }) + }); - const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) - const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }) + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }); + const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }); - const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions, sortRawFunctions) - const { flatItems } = useGroupedItems(sortedItems, groupBy, opened) - const itemsLength = computed(() => flatItems.value.length) + const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions, sortRawFunctions); + const { flatItems } = useGroupedItems(sortedItems, groupBy, opened); + const itemsLength = computed(() => flatItems.value.length); - const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }) - const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }) + const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }); + const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }); - const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) + const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)); - const { mobile } = useDisplay() - const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) + const { mobile } = useDisplay(); + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value); const { isSelected, @@ -172,9 +172,9 @@ export const VDataTable = genericComponent( toggleSelect, someSelected, allSelected, - } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }) + } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }); - const { isExpanded, toggleExpand } = provideExpanded(props) + const { isExpanded, toggleExpand } = provideExpanded(props); useOptions({ page, @@ -182,7 +182,7 @@ export const VDataTable = genericComponent( sortBy, groupBy, search, - }) + }); provideDefaults({ VDataTableRows: { @@ -191,7 +191,7 @@ export const VDataTable = genericComponent( loading: toRef(props, 'loading'), loadingText: toRef(props, 'loadingText'), }, - }) + }); const slotProps = computed>(() => ({ page: page.value, @@ -216,13 +216,13 @@ export const VDataTable = genericComponent( groupedItems: paginatedItems.value, columns: columns.value, headers: headers.value, - })) + })); useRender(() => { - const dataTableFooterProps = VDataTableFooter.filterProps(props) - const dataTableHeadersProps = VDataTableHeaders.filterProps(props) - const dataTableRowsProps = VDataTableRows.filterProps(props) - const tableProps = VTable.filterProps(props) + const dataTableFooterProps = VDataTableFooter.filterProps(props); + const dataTableHeadersProps = VDataTableHeaders.filterProps(props); + const dataTableRowsProps = VDataTableRows.filterProps(props); + const tableProps = VTable.filterProps(props); return ( ( }, props.class, ]} - style={ props.style } - { ...tableProps } + style={props.style} + {...tableProps} > {{ top: () => slots.top?.(slotProps.value), default: () => slots.default ? slots.default(slotProps.value) : ( <> - { slots.colgroup?.(slotProps.value) } - - - - { slots.thead?.(slotProps.value) } + {slots.colgroup?.(slotProps.value)} + + + + {slots.thead?.(slotProps.value)} - { slots['body.prepend']?.(slotProps.value) } - { slots.body ? slots.body(slotProps.value) : ( + {slots['body.prepend']?.(slotProps.value)} + {slots.body ? slots.body(slotProps.value) : ( )} - { slots['body.append']?.(slotProps.value) } + {slots['body.append']?.(slotProps.value)} - { slots.tbody?.(slotProps.value) } - { slots.tfoot?.(slotProps.value) } + {slots.tbody?.(slotProps.value)} + {slots.tfoot?.(slotProps.value)} ), bottom: () => slots.bottom ? slots.bottom(slotProps.value) : ( @@ -272,7 +272,7 @@ export const VDataTable = genericComponent( ( ), }} - ) - }) + ); + }); - return {} + return {}; }, -}) +}); -export type VDataTable = InstanceType +export type VDataTable = InstanceType; diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index e89432ecdb1..5ddfcf381b0 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -2,6 +2,7 @@ import { VDataTableColumn } from './VDataTableColumn' import { VCheckboxBtn } from '@/components/VCheckbox' import { VIcon } from '@/components/VIcon' +// import { VSelect } from '@/components/VSelect' // Composables import { useHeaders } from './composables/headers' @@ -21,6 +22,7 @@ import type { CSSProperties, PropType, UnwrapRef } from 'vue' import type { provideSelection } from './composables/select' import type { provideSort } from './composables/sort' import type { InternalDataTableHeader } from './types' +// import type { ItemProps } from '@/composables/list-items' import type { LoaderSlotProps } from '@/composables/loader' export type HeadersSlotProps = { @@ -214,10 +216,22 @@ export const VDataTableHeaders = genericComponent()({ ) } - const VDataTableMobileHeaderCell = ({ y }: - { y: number }) => { + const VDataTableMobileHeaderCell = () => { // const headerProps = mergeProps(props.headerProps ?? {} ?? {}) + // const displayItems = computed(() => { + // let items: ItemProps['items'] = columns.value.filter(column => column.sortable) + + // items = items.map(item => { + // return { + // title: item.title, + // value: item.key, + // } + // }) + + // return items + // }) + // return ( // ()({ // colspan={ headers.value.length + 1 } // { ...headerProps } // > - // {{ - // default: () => { - // const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { - // isSorted, - // toggleSort, - // sortBy: sortBy.value, - // getSortIcon, + //
+ // + // { + // // TODO: Add Chip Slot // } - - // return ( - //
- // VSelect SortBy - //
- // ) - // }, - // }} + // + //
// // ) @@ -251,25 +264,25 @@ export const VDataTableHeaders = genericComponent()({ } useRender(() => { + if (mobileView.value) { + return ( + + + + ) + } + return ( <> - { mobileView.value - ? ( - headers.value.map((row, y) => ( - - - - )) - ) - : slots.headers - ? slots.headers(slotProps.value) - : headers.value.map((row, y) => ( + { slots.headers + ? slots.headers(slotProps.value) + : headers.value.map((row, y) => ( { row.map((column, x) => ( ))} - ))} + ))} { props.loading && ( From 106e40ffab9ab129265a932064d507977967c6d7 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 17:09:05 -0700 Subject: [PATCH 15/73] Add sort by --- .../VDataTable/VDataTableHeaders.tsx | 109 ++++++++++-------- 1 file changed, 63 insertions(+), 46 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 5ddfcf381b0..7a9c914d84a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -1,8 +1,9 @@ // Components import { VDataTableColumn } from './VDataTableColumn' import { VCheckboxBtn } from '@/components/VCheckbox' +import { VChip } from '@/components/VChip' import { VIcon } from '@/components/VIcon' -// import { VSelect } from '@/components/VSelect' +import { VSelect } from '@/components/VSelect' // Composables import { useHeaders } from './composables/headers' @@ -22,7 +23,7 @@ import type { CSSProperties, PropType, UnwrapRef } from 'vue' import type { provideSelection } from './composables/select' import type { provideSort } from './composables/sort' import type { InternalDataTableHeader } from './types' -// import type { ItemProps } from '@/composables/list-items' +import type { ItemProps } from '@/composables/list-items' import type { LoaderSlotProps } from '@/composables/loader' export type HeadersSlotProps = { @@ -217,50 +218,66 @@ export const VDataTableHeaders = genericComponent()({ } const VDataTableMobileHeaderCell = () => { - // const headerProps = mergeProps(props.headerProps ?? {} ?? {}) - - // const displayItems = computed(() => { - // let items: ItemProps['items'] = columns.value.filter(column => column.sortable) - - // items = items.map(item => { - // return { - // title: item.title, - // value: item.key, - // } - // }) - - // return items - // }) - - // return ( - // - //
- // - // { - // // TODO: Add Chip Slot - // } - // - //
- // - // ) - - return <> + const headerProps = mergeProps(props.headerProps ?? {} ?? {}) + + const displayItems = computed(() => { + return columns.value.filter(column => column?.sortable) + }) + + return ( + +
+ sortBy.value = [] } + > + {{ + ...slots, + chip: props => ( + toggleSort(props.item.raw) : undefined } + onMousedown={ (e: MouseEvent) => { + e.preventDefault() + e.stopPropagation() + }} + > + { props.item.title } + + + ), + }} + +
+ + ) } useRender(() => { From 73bdb28f2b16413dc4df4d5cf37d8cead80b0968 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 17:11:01 -0700 Subject: [PATCH 16/73] fix formatting --- .../src/components/VDataTable/VDataTable.tsx | 232 +++++++++--------- 1 file changed, 116 insertions(+), 116 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index b5855d85bf9..bfaf22309dc 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -1,75 +1,75 @@ // Styles -import './VDataTable.sass'; +import './VDataTable.sass' // Components -import { makeDataTableExpandProps, provideExpanded } from './composables/expand'; -import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group'; -import { createHeaders, makeDataTableHeaderProps } from './composables/headers'; -import { makeDataTableItemsProps, useDataTableItems } from './composables/items'; -import { useOptions } from './composables/options'; -import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate'; -import { makeDataTableSelectProps, provideSelection } from './composables/select'; -import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort'; -import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter'; -import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders'; -import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows'; -import { VDivider } from '@/components/VDivider'; -import { makeVTableProps, VTable } from '@/components/VTable/VTable'; +import { makeDataTableExpandProps, provideExpanded } from './composables/expand' +import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group' +import { createHeaders, makeDataTableHeaderProps } from './composables/headers' +import { makeDataTableItemsProps, useDataTableItems } from './composables/items' +import { useOptions } from './composables/options' +import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate' +import { makeDataTableSelectProps, provideSelection } from './composables/select' +import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' +import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' +import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders' +import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows' +import { VDivider } from '@/components/VDivider' +import { makeVTableProps, VTable } from '@/components/VTable/VTable' // Composables -import { provideDefaults } from '@/composables/defaults'; -import { useDisplay } from '@/composables/display'; -import { makeFilterProps, useFilter } from '@/composables/filter'; +import { provideDefaults } from '@/composables/defaults' +import { useDisplay } from '@/composables/display' +import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities -import { computed, toRef } from 'vue'; -import { genericComponent, propsFactory, useRender } from '@/util'; +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' // Types -import type { DeepReadonly, UnwrapRef } from 'vue'; -import type { Group } from './composables/group'; -import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types'; -import type { VDataTableHeadersSlots } from './VDataTableHeaders'; -import type { VDataTableRowsSlots } from './VDataTableRows'; -import type { GenericProps, SelectItemKey } from '@/util'; +import type { DeepReadonly, UnwrapRef } from 'vue' +import type { Group } from './composables/group' +import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' +import type { VDataTableHeadersSlots } from './VDataTableHeaders' +import type { VDataTableRowsSlots } from './VDataTableRows' +import type { GenericProps, SelectItemKey } from '@/util' export type VDataTableSlotProps = { - page: number; - itemsPerPage: number; - sortBy: UnwrapRef['sortBy']>; - pageCount: number; - toggleSort: ReturnType['toggleSort']; - setItemsPerPage: ReturnType['setItemsPerPage']; - someSelected: boolean; - allSelected: boolean; - isSelected: ReturnType['isSelected']; - select: ReturnType['select']; - selectAll: ReturnType['selectAll']; - toggleSelect: ReturnType['toggleSelect']; - isExpanded: ReturnType['isExpanded']; - toggleExpand: ReturnType['toggleExpand']; - isGroupOpen: ReturnType['isGroupOpen']; - toggleGroup: ReturnType['toggleGroup']; - items: readonly T[]; - internalItems: readonly DataTableItem[]; - groupedItems: readonly (DataTableItem | Group>)[]; - columns: InternalDataTableHeader[]; - headers: InternalDataTableHeader[][]; - mobileView: boolean; + page: number + itemsPerPage: number + sortBy: UnwrapRef['sortBy']> + pageCount: number + toggleSort: ReturnType['toggleSort'] + setItemsPerPage: ReturnType['setItemsPerPage'] + someSelected: boolean + allSelected: boolean + isSelected: ReturnType['isSelected'] + select: ReturnType['select'] + selectAll: ReturnType['selectAll'] + toggleSelect: ReturnType['toggleSelect'] + isExpanded: ReturnType['isExpanded'] + toggleExpand: ReturnType['toggleExpand'] + isGroupOpen: ReturnType['isGroupOpen'] + toggleGroup: ReturnType['toggleGroup'] + items: readonly T[] + internalItems: readonly DataTableItem[] + groupedItems: readonly (DataTableItem | Group>)[] + columns: InternalDataTableHeader[] + headers: InternalDataTableHeader[][] + mobileView: boolean }; export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { - default: VDataTableSlotProps; - colgroup: VDataTableSlotProps; - top: VDataTableSlotProps; - body: VDataTableSlotProps; - tbody: VDataTableSlotProps; - thead: VDataTableSlotProps; - tfoot: VDataTableSlotProps; - bottom: VDataTableSlotProps; - 'body.prepend': VDataTableSlotProps; - 'body.append': VDataTableSlotProps; - 'footer.prepend': never; + default: VDataTableSlotProps + colgroup: VDataTableSlotProps + top: VDataTableSlotProps + body: VDataTableSlotProps + tbody: VDataTableSlotProps + thead: VDataTableSlotProps + tfoot: VDataTableSlotProps + bottom: VDataTableSlotProps + 'body.prepend': VDataTableSlotProps + 'body.append': VDataTableSlotProps + 'footer.prepend': never }; export const makeDataTableProps = propsFactory({ @@ -86,27 +86,27 @@ export const makeDataTableProps = propsFactory({ ...makeDataTableSortProps(), ...makeVDataTableHeadersProps(), ...makeVTableProps(), -}, 'DataTable'); +}, 'DataTable') export const makeVDataTableProps = propsFactory({ ...makeDataTablePaginateProps(), ...makeDataTableProps(), ...makeFilterProps(), ...makeVDataTableFooterProps(), -}, 'VDataTable'); +}, 'VDataTable') type ItemType = T extends readonly (infer U)[] ? U : never; export const VDataTable = genericComponent( props: { - items?: T; - itemValue?: SelectItemKey>; - rowProps?: RowProps>; - cellProps?: CellProps>; - itemSelectable?: SelectItemKey>; - headers?: DeepReadonly>[]>; - modelValue?: V; - 'onUpdate:modelValue'?: (value: V) => void; + items?: T + itemValue?: SelectItemKey> + rowProps?: RowProps> + cellProps?: CellProps> + itemSelectable?: SelectItemKey> + headers?: DeepReadonly>[]> + modelValue?: V + 'onUpdate:modelValue'?: (value: V) => void }, slots: VDataTableSlots>, ) => GenericProps>()({ @@ -125,10 +125,10 @@ export const VDataTable = genericComponent( 'update:currentItems': (value: any) => true, }, - setup(props, { attrs, slots }) { - const { groupBy } = createGroupBy(props); - const { sortBy, multiSort, mustSort } = createSort(props); - const { page, itemsPerPage } = createPagination(props); + setup (props, { attrs, slots }) { + const { groupBy } = createGroupBy(props) + const { sortBy, multiSort, mustSort } = createSort(props) + const { page, itemsPerPage } = createPagination(props) const { columns, @@ -140,30 +140,30 @@ export const VDataTable = genericComponent( groupBy, showSelect: toRef(props, 'showSelect'), showExpand: toRef(props, 'showExpand'), - }); + }) - const { items } = useDataTableItems(props, columns); + const { items } = useDataTableItems(props, columns) - const search = toRef(props, 'search'); + const search = toRef(props, 'search') const { filteredItems } = useFilter(props, items, search, { transform: item => item.columns, customKeyFilter: filterFunctions, - }); + }) - const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }); - const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }); + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }) - const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions, sortRawFunctions); - const { flatItems } = useGroupedItems(sortedItems, groupBy, opened); - const itemsLength = computed(() => flatItems.value.length); + const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions, sortRawFunctions) + const { flatItems } = useGroupedItems(sortedItems, groupBy, opened) + const itemsLength = computed(() => flatItems.value.length) - const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }); - const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }); + const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }) + const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }) - const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)); + const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const { mobile } = useDisplay(); - const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value); + const { mobile } = useDisplay() + const mobileView = computed(() => props?.mobileView ? props.mobileView : mobile.value) const { isSelected, @@ -172,9 +172,9 @@ export const VDataTable = genericComponent( toggleSelect, someSelected, allSelected, - } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }); + } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }) - const { isExpanded, toggleExpand } = provideExpanded(props); + const { isExpanded, toggleExpand } = provideExpanded(props) useOptions({ page, @@ -182,7 +182,7 @@ export const VDataTable = genericComponent( sortBy, groupBy, search, - }); + }) provideDefaults({ VDataTableRows: { @@ -191,7 +191,7 @@ export const VDataTable = genericComponent( loading: toRef(props, 'loading'), loadingText: toRef(props, 'loadingText'), }, - }); + }) const slotProps = computed>(() => ({ page: page.value, @@ -216,13 +216,13 @@ export const VDataTable = genericComponent( groupedItems: paginatedItems.value, columns: columns.value, headers: headers.value, - })); + })) useRender(() => { - const dataTableFooterProps = VDataTableFooter.filterProps(props); - const dataTableHeadersProps = VDataTableHeaders.filterProps(props); - const dataTableRowsProps = VDataTableRows.filterProps(props); - const tableProps = VTable.filterProps(props); + const dataTableFooterProps = VDataTableFooter.filterProps(props) + const dataTableHeadersProps = VDataTableHeaders.filterProps(props) + const dataTableRowsProps = VDataTableRows.filterProps(props) + const tableProps = VTable.filterProps(props) return ( ( }, props.class, ]} - style={props.style} - {...tableProps} + style={ props.style } + { ...tableProps } > {{ top: () => slots.top?.(slotProps.value), default: () => slots.default ? slots.default(slotProps.value) : ( <> - {slots.colgroup?.(slotProps.value)} + { slots.colgroup?.(slotProps.value) } - {slots.thead?.(slotProps.value)} + { slots.thead?.(slotProps.value) } - {slots['body.prepend']?.(slotProps.value)} - {slots.body ? slots.body(slotProps.value) : ( + { slots['body.prepend']?.(slotProps.value) } + { slots.body ? slots.body(slotProps.value) : ( )} - {slots['body.append']?.(slotProps.value)} + { slots['body.append']?.(slotProps.value) } - {slots.tbody?.(slotProps.value)} - {slots.tfoot?.(slotProps.value)} + { slots.tbody?.(slotProps.value) } + { slots.tfoot?.(slotProps.value) } ), bottom: () => slots.bottom ? slots.bottom(slotProps.value) : ( @@ -272,7 +272,7 @@ export const VDataTable = genericComponent( ( ), }} - ); - }); + ) + }) - return {}; + return {} }, -}); +}) export type VDataTable = InstanceType; From aefd678a5218e6749e1856c1b4251bf21b2611a2 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 17:30:04 -0700 Subject: [PATCH 17/73] add mobile footer styles --- .../vuetify/src/components/VDataTable/VDataTable.sass | 11 +++++++++++ .../vuetify/src/components/VDataTable/_variables.scss | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 892640367a4..2cfd9aabbd0 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -145,3 +145,14 @@ display: flex !important justify-content: center width: 100% !important + + .v-data-table-footer + justify-content: center + row-gap: 8px + + &__pagination + margin-inline-start: 0 + + &__info + justify-content: flex-start + padding: 0 0 0 16px diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss index 32e464ce6f6..471d550a8f0 100644 --- a/packages/vuetify/src/components/VDataTable/_variables.scss +++ b/packages/vuetify/src/components/VDataTable/_variables.scss @@ -3,7 +3,7 @@ $data-table-footer-info-min-width: 116px !default; $data-table-footer-info-padding: 0 16px !default; -$data-table-footer-padding: 4px !default; +$data-table-footer-padding: 8px 4px !default; $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; From e4ac43c9465935a4a6ee92dd3127fd8ad5c39c69 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 18:10:29 -0700 Subject: [PATCH 18/73] add slots for mobile view --- .../components/VDataTable/VDataTableRow.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 7a1ef36c6d2..7f8e0227af5 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -20,7 +20,16 @@ import type { GenericProps } from '@/util' export type VDataTableRowSlots = { 'item.data-table-select': Omit, 'value'> 'item.data-table-expand': Omit, 'value'> -} & { [key: `item.${string}`]: ItemKeySlot } + + // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps? + 'header.data-table-select': Omit, 'value'> + 'header.data-table-expand': Omit, 'value'> +} & { + [key: `item.${string}`]: ItemKeySlot + + // TODO: I think this is incorrect and needs to be fixed? VDataTableHeaderCellColumnSlotProps? + [key: `header.${string}`]: ItemKeySlot +} export const makeVDataTableRowProps = propsFactory({ index: Number, @@ -65,6 +74,7 @@ export const VDataTableRow = genericComponent( props.item && columns.value.map((column, i) => { const item = props.item! const slotName = `item.${column.key}` as const + const headerSlotName = `header.${column.key}` as const const columnKey = column.key const slotProps = { index: props.index!, @@ -115,7 +125,7 @@ export const VDataTableRow = genericComponent( > {{ default: () => { - if (slots[slotName]) return slots[slotName]!(slotProps) + if (slots[slotName] && !props.mobileView) return slots[slotName]!(slotProps) if (columnKey === 'data-table-select') { return slots['item.data-table-select']?.(slotProps) ?? ( @@ -143,8 +153,19 @@ export const VDataTableRow = genericComponent( if (props.mobileView) { return ( <> -
{ column.title }
-
{ displayValue }
+
+ { + slots[headerSlotName] + ? slots[headerSlotName]!(slotProps) + : column.title + } +
+
+ { + slots[slotName] + ? slots[slotName]!(slotProps) + : displayValue } +
) } From bbc3ebf58882df845c0e304da8ca5d2381688735 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 18:38:37 -0700 Subject: [PATCH 19/73] 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 bfaf22309dc..c256a4d9f50 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 9c98a047d89..a8a2b9134b5 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 7f8e0227af5..df24dd31686 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 54cfb76b33d..900d13beed9 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 d845cff0c38..664ed9f2764 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 435f4a48f0b..ea76b2c1a9e 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 c76b7b0661c..99bd0f50020 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[] } From 248f31415c50cf265a2e1e2f5b8f6e5d64e92d08 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 18 Mar 2024 19:18:14 -0700 Subject: [PATCH 20/73] 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 c256a4d9f50..ef6291cc2ec 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[][] - mobile: boolean + mobile: boolean | undefined }; 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?.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 a8a2b9134b5..c8aba2fe7cf 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 ( - - { slots.default?.() } - - ) - } - return ( >, }, - mobile: Boolean, + mobile: { + type: Boolean, + default: undefined, + }, ...makeLoaderProps(), }, 'VDataTableHeaders') @@ -87,9 +90,6 @@ export const VDataTableHeaders = genericComponent()({ 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()({ 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 900d13beed9..5771a3ac1c9 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, default: () => ([]), }, - mobile: Boolean, + mobile: { + type: Boolean, + default: undefined, + }, noDataText: { type: String, default: '$vuetify.noDataText', @@ -71,7 +74,7 @@ export const VDataTableRows = genericComponent( 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 664ed9f2764..31f61de262d 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?.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 ea76b2c1a9e..c4b3f09ced5 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?.mobile ? props.mobile : mobile.value) + const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) const { containerRef, From 46f383252750989c5158bc8d0129108d8d61306d Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 20 Mar 2024 10:06:00 -0700 Subject: [PATCH 21/73] fix styles * fix cell height when cell has longer content * add missing styles to mobile data-table-select row * add mobile column gap between title/value --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 2cfd9aabbd0..232ef1bcc34 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -132,6 +132,9 @@ border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important &-td + min-height: var(--v-table-row-height) + height: auto !important + &-title font-weight: bold text-align: left From ae33f258ab96d791ca4c022d484d9af718c8a6fc Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 20 Mar 2024 10:06:25 -0700 Subject: [PATCH 22/73] fix styles * fix cell height when cell has longer content * add missing styles to mobile data-table-select row * add mobile column gap between title/value --- .../vuetify/src/components/VDataTable/VDataTable.sass | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 232ef1bcc34..46da874584a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -132,8 +132,9 @@ border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important &-td - min-height: var(--v-table-row-height) + column-gap: 4px height: auto !important + min-height: var(--v-table-row-height) &-title font-weight: bold @@ -144,11 +145,14 @@ text-overflow: unset !important white-space: unset !important - &-expanded-row + &-expanded-row, + &-select-row display: flex !important - justify-content: center width: 100% !important + &-expanded-row + justify-content: center + .v-data-table-footer justify-content: center row-gap: 8px From 0f92d1085c26cc082ad8e64f8a2019fd07bc9dd6 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 24 Apr 2024 13:14:45 -0700 Subject: [PATCH 23/73] fix indentation --- .../src/components/VDataTable/VDataTable.sass | 18 ++++----- .../VDataTable/VDataTableFooter.sass | 38 +++++++++---------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 15f50fd4fc2..3f9dd04fbc4 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -7,17 +7,17 @@ .v-data-table width: 100% - &__table - border-collapse: separate - border-spacing: 0 - width: 100% + &__table + border-collapse: separate + border-spacing: 0 + width: 100% - &__tr - &--focus - border: 1px dotted black + &__tr + &--focus + border: 1px dotted black - &--clickable - cursor: pointer + &--clickable + cursor: pointer .v-data-table .v-table__wrapper diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass index 1e37fc8bdfc..ca3b5cb8474 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass @@ -10,27 +10,27 @@ justify-content: flex-end padding: $data-table-footer-padding - &__items-per-page - align-items: center - display: flex - justify-content: center + &__items-per-page + align-items: center + display: flex + justify-content: center - > span - padding-inline-end: $data-table-footer-items-per-page-padding + > span + padding-inline-end: $data-table-footer-items-per-page-padding - > .v-select - width: $data-table-footer-select-width + > .v-select + width: $data-table-footer-select-width - &__info - display: flex - justify-content: flex-end - min-width: $data-table-footer-info-min-width - padding: $data-table-footer-info-padding + &__info + display: flex + justify-content: flex-end + min-width: $data-table-footer-info-min-width + padding: $data-table-footer-info-padding - &__pagination - align-items: center - display: flex - margin-inline-start: $data-table-footer-pagination-margin-inline-start + &__paginationz + align-items: center + display: flex + margin-inline-start: $data-table-footer-pagination-margin-inline-start - &__page - padding: 0 8px + &__page + padding: 0 8px From ca01dbf1d872dcaece4e31f63fbe82db912c5a7a Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 24 Apr 2024 17:46:34 -0700 Subject: [PATCH 24/73] update viewportWidth to 1280 --- packages/vuetify/cypress.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/cypress.config.ts b/packages/vuetify/cypress.config.ts index 4f026e24f2a..7d17f380bca 100644 --- a/packages/vuetify/cypress.config.ts +++ b/packages/vuetify/cypress.config.ts @@ -11,6 +11,6 @@ export default defineConfig({ supportFile: './cypress/support/index.ts', video: false, }, - viewportWidth: 1075, + viewportWidth: 1280, viewportHeight: 825, }) From a26479ce3c94277c708a011c1bd2b21a9513a63d Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 24 Apr 2024 17:47:10 -0700 Subject: [PATCH 25/73] change default mobile breakpoint to smAndDown --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index c3b2b67b919..2fea4881f32 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -166,8 +166,8 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) + const { smAndDown } = useDisplay() + const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : smAndDown.value) const { isSelected, From e54044620b0ef958a3b5c512654088281a3c1a15 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 25 Apr 2024 09:53:15 -0700 Subject: [PATCH 26/73] add viewport for horizontal scroll --- packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx index 9c5ffc075f0..57a4f5283a8 100644 --- a/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx +++ b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx @@ -72,6 +72,7 @@ describe('goto', () => { }) it('scrolls horizontally', () => { + cy.viewport(1075, 825) cy .mount(() => (
From 8d8cda84fc4de61e013515aa29a473e5eb50b3ba Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 25 Apr 2024 09:57:13 -0700 Subject: [PATCH 27/73] Removed temp markup --- packages/vuetify/src/components/VDataTable/VDataTableRow.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index a57fb897f6b..51aab44538a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -22,14 +22,10 @@ import type { GenericProps } from '@/util' export type VDataTableRowSlots = { 'item.data-table-select': Omit, 'value'> 'item.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: Check if this is correct [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps } From dacb102d3bd87fda7c588e2d1a187ada16c507eb Mon Sep 17 00:00:00 2001 From: Chris Hudson Date: Fri, 26 Apr 2024 09:31:27 -0700 Subject: [PATCH 28/73] Added mobile prop api description for vdatatable --- packages/api-generator/src/locale/en/VDataTable.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 22501b3e7c3..c010665a459 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -23,6 +23,7 @@ "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.", "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", + "mobile": "If `true` mobile friendly view is enabled.", "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", From aacca8b052b30698bbf22e298830558592c555d3 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:00:42 -0700 Subject: [PATCH 29/73] Update packages/vuetify/src/components/VDataTable/VDataTable.tsx Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com> --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 2fea4881f32..f464abc6803 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -70,7 +70,7 @@ export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots 'body.prepend': VDataTableSlotProps 'body.append': VDataTableSlotProps 'footer.prepend': never -}; +} export const makeDataTableProps = propsFactory({ ...makeVDataTableRowsProps(), From 501dbcd3476aa1709ddec0a008432343ad1b97e3 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:01:17 -0700 Subject: [PATCH 30/73] Update packages/vuetify/src/components/VDataTable/VDataTable.tsx Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com> --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index f464abc6803..634410c0b54 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -56,7 +56,7 @@ export type VDataTableSlotProps = { columns: InternalDataTableHeader[] headers: InternalDataTableHeader[][] mobile: boolean | undefined -}; +} export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { default: VDataTableSlotProps From 3bfd3405f7e17390414d04bc00832d19b15cd297 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:01:53 -0700 Subject: [PATCH 31/73] Update packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com> --- packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx index 67b6591a2bd..2640d79084b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx @@ -20,7 +20,6 @@ export const VDataTableColumn = defineFunctionalComponent({ nowrap: Boolean, }, (props, { slots }) => { const Tag = props.tag ?? 'td' - return ( Date: Fri, 26 Apr 2024 10:02:02 -0700 Subject: [PATCH 32/73] Update packages/vuetify/src/components/VDataTable/VDataTable.tsx Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com> --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 634410c0b54..a4c66c72d73 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -292,4 +292,4 @@ export const VDataTable = genericComponent( }, }) -export type VDataTable = InstanceType; +export type VDataTable = InstanceType From 369ba9ae0ff069bed861930925e401962167b80d Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:48:35 -0700 Subject: [PATCH 33/73] change to use sass variables --- .../vuetify/src/components/VDataTable/VDataTable.sass | 4 ++-- .../vuetify/src/components/VDataTable/_variables.scss | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 3f9dd04fbc4..b032ddf1dcf 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -183,5 +183,5 @@ margin-inline-start: 0 &__info - justify-content: flex-start - padding: 0 0 0 16px + justify-content: $data-table-footer-mobile-info-justify + padding: $data-table-footer-mobile-info-padding diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss index e78e959711a..77bb63eb977 100644 --- a/packages/vuetify/src/components/VDataTable/_variables.scss +++ b/packages/vuetify/src/components/VDataTable/_variables.scss @@ -1,12 +1,17 @@ @use '../../styles/settings'; @use '../../styles/tools'; +$data-table-header-sort-badge-size: 20px !default; +$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; + +$data-table-loading-opacity: var(--v-disabled-opacity) !default; + $data-table-footer-info-min-width: 116px !default; $data-table-footer-info-padding: 0 16px !default; $data-table-footer-padding: 8px 4px !default; $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-header-sort-badge-size: 20px !default; -$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; -$data-table-loading-opacity: var(--v-disabled-opacity) !default; + +$data-table-footer-mobile-info-padding: 0 0 0 16px !default; +$data-table-footer-mobile-info-justify: flex-start !default; From 63a824e952afd70518e9fc0351870df9c77fd277 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:51:12 -0700 Subject: [PATCH 34/73] add parens --- .../vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index f3c9171e99d..8a5709956c8 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -125,14 +125,14 @@ export const VDataTableHeaders = genericComponent()({ getSortIcon, } satisfies HeadersSlotProps)) - const headerCellClasses = computed(() => [ + const headerCellClasses = computed(() => ([ 'v-data-table__th', { 'v-data-table__th--sticky': props.sticky, 'v-data-table__mobile-th': mobileView.value, }, loaderClasses.value, - ]) + ])) const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => { const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand' From c5bf078d7a8dd2006369a3287543231854d6e15b Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 10:52:39 -0700 Subject: [PATCH 35/73] remove utility class --- packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 8a5709956c8..b97ecbd8ad4 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -269,7 +269,6 @@ export const VDataTableHeaders = genericComponent()({ { props.item.title } Date: Fri, 26 Apr 2024 11:05:27 -0700 Subject: [PATCH 36/73] change sort icon to use color classes using sass variables --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 6 ++++++ .../vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 2 +- packages/vuetify/src/components/VDataTable/_variables.scss | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index b032ddf1dcf..3f2c773b95f 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -185,3 +185,9 @@ &__info justify-content: $data-table-footer-mobile-info-justify padding: $data-table-footer-mobile-info-padding + + &-sort-icon + color: $data-table-header-mobile-chip-icon-color + + &-active + color: $data-table-header-mobile-chip-icon-color-active diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index b97ecbd8ad4..f78e43a6676 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -270,8 +270,8 @@ export const VDataTableHeaders = genericComponent()({ diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss index 77bb63eb977..61eaf597fe5 100644 --- a/packages/vuetify/src/components/VDataTable/_variables.scss +++ b/packages/vuetify/src/components/VDataTable/_variables.scss @@ -15,3 +15,6 @@ $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; From e87c9fc9661a553388158d2ee7b2423a7eb3c07d Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 11:07:28 -0700 Subject: [PATCH 37/73] remove color prop --- packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index f78e43a6676..ff0085269b7 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -247,7 +247,6 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__mobile-sort-select', ]} clearable - color="primary" density="default" hide-details items={ displayItems.value } From 3194d90ffddf13f17dde37c7ec285540b9beb115 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 11:18:34 -0700 Subject: [PATCH 38/73] changed text to useLocale --- .../vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index ff0085269b7..d97f838d51d 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -13,6 +13,7 @@ import { useBackgroundColor } from '@/composables/color' import { useDisplay } from '@/composables/display' import { IconValue } from '@/composables/icons' import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' +import { useLocale } from '@/composables/locale' // Utilities import { computed, mergeProps } from 'vue' @@ -85,6 +86,7 @@ export const VDataTableHeaders = genericComponent()({ props: makeVDataTableHeadersProps(), setup (props, { slots }) { + const { t } = useLocale() const { toggleSort, sortBy, isSorted } = useSort() const { someSelected, allSelected, selectAll, showSelectAll } = useSelection() const { columns, headers } = useHeaders() @@ -250,7 +252,7 @@ export const VDataTableHeaders = genericComponent()({ density="default" hide-details items={ displayItems.value } - label="Sort By" + label={ t('$vuetify.dataTable.sortBy') } multiple={ props.multiSort } variant="underlined" onClick:clear={ () => sortBy.value = [] } From 1d56e9275384387053dcdbc737831298de08abc0 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 11:32:57 -0700 Subject: [PATCH 39/73] change to use makeDisplayProps --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 5 +++-- .../src/components/VDataTable/VDataTableHeaders.tsx | 11 ++++------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index a4c66c72d73..181b10ef474 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -18,7 +18,7 @@ import { makeVTableProps, VTable } from '@/components/VTable/VTable' // Composables import { provideDefaults } from '@/composables/defaults' -import { useDisplay } from '@/composables/display' +import { makeDisplayProps, useDisplay } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities @@ -78,6 +78,7 @@ export const makeDataTableProps = propsFactory({ width: [String, Number], search: String, + ...makeDisplayProps(), ...makeDataTableExpandProps(), ...makeDataTableGroupProps(), ...makeDataTableHeaderProps(), @@ -167,7 +168,7 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) const { smAndDown } = useDisplay() - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : smAndDown.value) + const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : smAndDown.value) const { isSelected, diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index d97f838d51d..e09fe7e9b69 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -10,7 +10,7 @@ import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' import { useSort } from './composables/sort' import { useBackgroundColor } from '@/composables/color' -import { useDisplay } from '@/composables/display' +import { makeDisplayProps, useDisplay } from '@/composables/display' import { IconValue } from '@/composables/icons' import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' import { useLocale } from '@/composables/locale' @@ -72,11 +72,8 @@ export const makeVDataTableHeadersProps = propsFactory({ headerProps: { type: Object as PropType>, }, - mobile: { - type: Boolean, - default: undefined, - }, + ...makeDisplayProps(), ...makeLoaderProps(), }, 'VDataTableHeaders') @@ -112,8 +109,8 @@ export const VDataTableHeaders = genericComponent()({ const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) + const { smAndDown } = useDisplay() + const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : smAndDown.value) const slotProps = computed(() => ({ headers: headers.value, From 1a366a6e741043ab389f6391adfbf879a6cb9232 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 11:47:15 -0700 Subject: [PATCH 40/73] fix default mobileView --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 9 +++++---- .../src/components/VDataTable/VDataTableHeaders.tsx | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 181b10ef474..1fdf4bd110d 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -31,6 +31,7 @@ import type { Group } from './composables/group' import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' import type { VDataTableHeadersSlots } from './VDataTableHeaders' import type { VDataTableRowsSlots } from './VDataTableRows' +import type { DisplayBreakpoint } from '@/composables/display' import type { GenericProps, SelectItemKey } from '@/util' export type VDataTableSlotProps = { @@ -55,7 +56,7 @@ export type VDataTableSlotProps = { groupedItems: readonly (DataTableItem | Group>)[] columns: InternalDataTableHeader[] headers: InternalDataTableHeader[][] - mobile: boolean | undefined + mobileBreakpoint: number | DisplayBreakpoint } export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { @@ -167,8 +168,8 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const { smAndDown } = useDisplay() - const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : smAndDown.value) + const { mobile } = useDisplay() + const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : mobile.value) const { isSelected, @@ -215,7 +216,7 @@ export const VDataTable = genericComponent( toggleExpand, isGroupOpen, toggleGroup, - mobile: mobileView.value, + mobileBreakpoint: mobileView.value, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, groupedItems: paginatedItems.value, diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index e09fe7e9b69..19381623501 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -109,8 +109,8 @@ export const VDataTableHeaders = genericComponent()({ const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') - const { smAndDown } = useDisplay() - const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : smAndDown.value) + const { mobile } = useDisplay() + const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : mobile.value) const slotProps = computed(() => ({ headers: headers.value, From 1c46636fbb9ceb94b368124fe59810b88bc4b40f Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 12:15:27 -0700 Subject: [PATCH 41/73] add mobile prop --- .../src/components/VDataTable/VDataTable.tsx | 14 +++++++------- .../components/VDataTable/VDataTableHeaders.tsx | 5 ++--- packages/vuetify/src/composables/display.ts | 1 + 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 1fdf4bd110d..07d5c780f77 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -18,7 +18,7 @@ import { makeVTableProps, VTable } from '@/components/VTable/VTable' // Composables import { provideDefaults } from '@/composables/defaults' -import { makeDisplayProps, useDisplay } from '@/composables/display' +import { makeDisplayProps } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities @@ -31,7 +31,6 @@ import type { Group } from './composables/group' import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' import type { VDataTableHeadersSlots } from './VDataTableHeaders' import type { VDataTableRowsSlots } from './VDataTableRows' -import type { DisplayBreakpoint } from '@/composables/display' import type { GenericProps, SelectItemKey } from '@/util' export type VDataTableSlotProps = { @@ -56,7 +55,6 @@ export type VDataTableSlotProps = { groupedItems: readonly (DataTableItem | Group>)[] columns: InternalDataTableHeader[] headers: InternalDataTableHeader[][] - mobileBreakpoint: number | DisplayBreakpoint } export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { @@ -79,7 +77,6 @@ export const makeDataTableProps = propsFactory({ width: [String, Number], search: String, - ...makeDisplayProps(), ...makeDataTableExpandProps(), ...makeDataTableGroupProps(), ...makeDataTableHeaderProps(), @@ -168,8 +165,7 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : mobile.value) + const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : props.mobileBreakpoint) const { isSelected, @@ -216,7 +212,8 @@ export const VDataTable = genericComponent( toggleExpand, isGroupOpen, toggleGroup, - mobileBreakpoint: mobileView.value, + mobile: mobileView.value, + mobileBreakpoint: props.mobileBreakpoint, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, groupedItems: paginatedItems.value, @@ -230,6 +227,9 @@ export const VDataTable = genericComponent( const dataTableRowsProps = VDataTableRows.filterProps(props) const tableProps = VTable.filterProps(props) + console.log('props', props) + console.log('dataTableHeadersProps', dataTableHeadersProps) + return ( ()({ const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobileBreakpoint !== 'undefined' ? props.mobileBreakpoint : mobile.value) + const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : props.mobileBreakpoint) const slotProps = computed(() => ({ headers: headers.value, diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts index e757a31a9de..06f0a7a0b44 100644 --- a/packages/vuetify/src/composables/display.ts +++ b/packages/vuetify/src/composables/display.ts @@ -17,6 +17,7 @@ export type DisplayThresholds = { } export interface DisplayProps { + mobile?: boolean | undefined mobileBreakpoint?: number | DisplayBreakpoint } From 7cda61b12b55a8192c8d7d57b53db314e7992f13 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 12:16:22 -0700 Subject: [PATCH 42/73] remove console logs --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 07d5c780f77..b3650b7c1ca 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -227,9 +227,6 @@ export const VDataTable = genericComponent( const dataTableRowsProps = VDataTableRows.filterProps(props) const tableProps = VTable.filterProps(props) - console.log('props', props) - console.log('dataTableHeadersProps', dataTableHeadersProps) - return ( Date: Fri, 26 Apr 2024 14:23:25 -0500 Subject: [PATCH 43/73] chore(VDataTable): revert import ordering changes --- .../src/components/VDataTable/VDataTable.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index b3650b7c1ca..1bf35d4106b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -2,6 +2,13 @@ import './VDataTable.sass' // Components +import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' +import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders' +import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows' +import { VDivider } from '@/components/VDivider' +import { makeVTableProps, VTable } from '@/components/VTable/VTable' + +// Composables import { makeDataTableExpandProps, provideExpanded } from './composables/expand' import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group' import { createHeaders, makeDataTableHeaderProps } from './composables/headers' @@ -10,15 +17,7 @@ import { useOptions } from './composables/options' import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate' import { makeDataTableSelectProps, provideSelection } from './composables/select' import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' -import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' -import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders' -import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows' -import { VDivider } from '@/components/VDivider' -import { makeVTableProps, VTable } from '@/components/VTable/VTable' - -// Composables import { provideDefaults } from '@/composables/defaults' -import { makeDisplayProps } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities From a4ab6f8ea3a78f41215de40c222146648a66482d Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:35:52 -0500 Subject: [PATCH 44/73] chore(VDataTable): implement display composable --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 9 +++++---- .../src/components/VDataTable/VDataTableHeaders.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 1bf35d4106b..fd6161239e6 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -18,6 +18,7 @@ import { createPagination, makeDataTablePaginateProps, providePagination, usePag import { makeDataTableSelectProps, provideSelection } from './composables/select' import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' import { provideDefaults } from '@/composables/defaults' +import { useDisplay } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities @@ -93,7 +94,7 @@ export const makeVDataTableProps = propsFactory({ ...makeVDataTableFooterProps(), }, 'VDataTable') -type ItemType = T extends readonly (infer U)[] ? U : never; +type ItemType = T extends readonly (infer U)[] ? U : never export const VDataTable = genericComponent( props: { @@ -164,7 +165,7 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : props.mobileBreakpoint) + const { displayClasses, mobile } = useDisplay(props) const { isSelected, @@ -211,7 +212,7 @@ export const VDataTable = genericComponent( toggleExpand, isGroupOpen, toggleGroup, - mobile: mobileView.value, + mobile: mobile.value, mobileBreakpoint: props.mobileBreakpoint, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, @@ -233,8 +234,8 @@ export const VDataTable = genericComponent( { 'v-data-table--show-select': props.showSelect, 'v-data-table--loading': props.loading, - 'v-data-table__mobile': mobileView.value, }, + displayClasses.value, props.class, ]} style={ props.style } diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 15223a614fb..eb8757e00d1 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -10,7 +10,7 @@ import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' import { useSort } from './composables/sort' import { useBackgroundColor } from '@/composables/color' -import { makeDisplayProps } from '@/composables/display' +import { makeDisplayProps, useDisplay } from '@/composables/display' import { IconValue } from '@/composables/icons' import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' import { useLocale } from '@/composables/locale' @@ -109,7 +109,7 @@ export const VDataTableHeaders = genericComponent()({ const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : props.mobileBreakpoint) + const { displayClasses, mobile } = useDisplay(props) const slotProps = computed(() => ({ headers: headers.value, @@ -127,8 +127,8 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__th', { 'v-data-table__th--sticky': props.sticky, - 'v-data-table__mobile-th': mobileView.value, }, + displayClasses.value, loaderClasses.value, ])) @@ -282,7 +282,7 @@ export const VDataTableHeaders = genericComponent()({ } useRender(() => { - if (mobileView.value) { + if (mobile.value) { return ( From 190fa02cf9afff0756dfc458e661e9a7edc3daaf Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:37:38 -0500 Subject: [PATCH 45/73] chore(VDataTable): remove mobile prop language --- packages/api-generator/src/locale/en/VDataTable.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index c010665a459..22501b3e7c3 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -23,7 +23,6 @@ "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.", "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", - "mobile": "If `true` mobile friendly view is enabled.", "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", From b9ef5dd695a1be106c98d49e7b6e2fb3a0beaf36 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:40:19 -0500 Subject: [PATCH 46/73] chore(VDatatTableVirtual): update useDisplay consumption --- .../vuetify/src/components/VDataTable/VDataTableVirtual.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx index 06671b6470b..019907707d9 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx @@ -125,8 +125,7 @@ export const VDataTableVirtual = genericComponent typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) + const { displayClasses, mobile } = useDisplay(props) const { containerRef, @@ -170,7 +169,7 @@ export const VDataTableVirtual = genericComponent item.raw), internalItems: allItems.value, groupedItems: flatItems.value, @@ -190,6 +189,7 @@ export const VDataTableVirtual = genericComponent Date: Fri, 26 Apr 2024 14:42:49 -0500 Subject: [PATCH 47/73] chore(VDataTableServer): change how useDisplay is consumed --- .../vuetify/src/components/VDataTable/VDataTableServer.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx index 4dfc107bf64..5d9dbbd653b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx @@ -97,8 +97,7 @@ export const VDataTableServer = genericComponent extractRows(items.value)) - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) + const { displayClasses, mobile } = useDisplay(props) useOptions({ page, @@ -139,7 +138,7 @@ export const VDataTableServer = genericComponent item.raw), internalItems: itemsWithoutGroups.value, groupedItems: flatItems.value, @@ -159,8 +158,8 @@ export const VDataTableServer = genericComponent Date: Fri, 26 Apr 2024 14:43:26 -0500 Subject: [PATCH 48/73] chore(VDataTable): remove mobileBreakpoint from slot props --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index fd6161239e6..f4acb0c9906 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -213,7 +213,6 @@ export const VDataTable = genericComponent( isGroupOpen, toggleGroup, mobile: mobile.value, - mobileBreakpoint: props.mobileBreakpoint, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, groupedItems: paginatedItems.value, From 2e74db08e0e075c83d2c95999e10ec1d5fb8d314 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:45:39 -0500 Subject: [PATCH 49/73] feat(display): add explicit prop that overrides mobile --- packages/vuetify/src/composables/display.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts index 06f0a7a0b44..eee63db72b6 100644 --- a/packages/vuetify/src/composables/display.ts +++ b/packages/vuetify/src/composables/display.ts @@ -17,7 +17,7 @@ export type DisplayThresholds = { } export interface DisplayProps { - mobile?: boolean | undefined + mobile?: boolean | null mobileBreakpoint?: number | DisplayBreakpoint } @@ -215,6 +215,10 @@ export function createDisplay (options?: DisplayOptions, ssr?: SSROptions): Disp } export const makeDisplayProps = propsFactory({ + mobile: { + type: Boolean, + default: null, + }, mobileBreakpoint: [Number, String] as PropType, }, 'display') @@ -227,6 +231,7 @@ export function useDisplay ( if (!display) throw new Error('Could not find Vuetify display injection') const mobile = computed(() => { + if (props.mobile != null) return props.mobile if (!props.mobileBreakpoint) return display.mobile.value const breakpointValue = typeof props.mobileBreakpoint === 'number' From b38ac2c897636487ff5567a85ea1d1d8942f44f6 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:48:07 -0500 Subject: [PATCH 50/73] chore(VDataTable): revert prop spread change --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index f4acb0c9906..3ee35ac3760 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -258,7 +258,6 @@ export const VDataTable = genericComponent( From 8a0e060ff8f820033071863ff05afde0615c44b4 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 14:57:02 -0500 Subject: [PATCH 51/73] fix(VDataTableRow/Rows/Headers): reimplement display composable --- .../components/VDataTable/VDataTableHeaders.tsx | 1 - .../src/components/VDataTable/VDataTableRow.tsx | 13 ++++++++----- .../src/components/VDataTable/VDataTableRows.tsx | 14 +++++--------- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index eb8757e00d1..0f995cf51a6 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -129,7 +129,6 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__th--sticky': props.sticky, }, displayClasses.value, - loaderClasses.value, ])) const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => { diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 51aab44538a..a187172e363 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -8,6 +8,7 @@ import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' import { useSort } from './composables/sort' import { VDataTableColumn } from './VDataTableColumn' +import { makeDisplayProps, useDisplay } from '@/composables/display' // Utilities import { toDisplayString, withModifiers } from 'vue' @@ -36,7 +37,8 @@ export const makeVDataTableRowProps = propsFactory({ onClick: EventProp<[MouseEvent]>(), onContextmenu: EventProp<[MouseEvent]>(), onDblclick: EventProp<[MouseEvent]>(), - mobile: Boolean, + + ...makeDisplayProps(), }, 'VDataTableRow') export const VDataTableRow = genericComponent( @@ -51,6 +53,7 @@ export const VDataTableRow = genericComponent( props: makeVDataTableRowProps(), setup (props, { slots }) { + const { mobile } = useDisplay(props) const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection() const { isExpanded, toggleExpand } = useExpanded() const { toggleSort, sortBy, isSorted } = useSort() @@ -62,7 +65,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.mobile, + 'v-data-table__mobile-tr': mobile.value, }, ]} onClick={ props.onClick as any } @@ -121,9 +124,9 @@ export const VDataTableRow = genericComponent( align={ column.align } class={ { - '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', + 'v-data-table__mobile-td': mobile.value, + 'v-data-table__mobile-td-select-row': mobile && columnKey === 'data-table-select', + 'v-data-table__mobile-td-expanded-row': mobile && columnKey === 'data-table-expand', }} fixed={ column.fixed } fixedOffset={ column.fixedOffset } diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index 5771a3ac1c9..5b1a82423b2 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -7,7 +7,7 @@ import { useExpanded } from './composables/expand' import { useGroupBy } from './composables/group' import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' -import { useDisplay } from '@/composables/display' +import { makeDisplayProps, useDisplay } from '@/composables/display' import { useLocale } from '@/composables/locale' // Utilities @@ -41,10 +41,6 @@ export const makeVDataTableRowsProps = propsFactory({ type: Array as PropType, default: () => ([]), }, - mobile: { - type: Boolean, - default: undefined, - }, noDataText: { type: String, default: '$vuetify.noDataText', @@ -52,6 +48,8 @@ export const makeVDataTableRowsProps = propsFactory({ rowProps: [Object, Function] as PropType>, cellProps: [Object, Function] as PropType>, headersProps: [Object, Function] as PropType>, + + ...makeDisplayProps(), }, 'VDataTableRows') export const VDataTableRows = genericComponent( @@ -72,9 +70,7 @@ export const VDataTableRows = genericComponent( const { isSelected, toggleSelect } = useSelection() const { toggleGroup, isGroupOpen } = useGroupBy() const { t } = useLocale() - - const { mobile } = useDisplay() - const mobileView = computed(() => typeof props.mobile !== 'undefined' ? props.mobile : mobile.value) + const { mobile } = useDisplay(props) useRender(() => { if (props.loading && (!props.items.length || slots.loading)) { @@ -151,7 +147,7 @@ export const VDataTableRows = genericComponent( index, item, cellProps: props.cellProps, - mobile: mobileView.value, + mobile: mobile.value, }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' From b63f067bf61410c60ce978ddd694c0f22bd4f898 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:04:13 -0500 Subject: [PATCH 52/73] fix(VDataTableHeaders): remove utility class --- .../VDataTable/VDataTableHeaders.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 0f995cf51a6..ed484cc96a2 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -238,19 +238,15 @@ export const VDataTableHeaders = genericComponent()({ >
sortBy.value = [] } + chips + class="v-data-table__mobile-sort-select" + clearable + density="default" + items={ displayItems.value } + label={ t('$vuetify.dataTable.sortBy') } + multiple={ props.multiSort } + variant="underlined" + onClick:clear={ () => sortBy.value = [] } > {{ ...slots, From cf2f3f2d580ebe71c8a352b81c635d8153a60862 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:07:29 -0500 Subject: [PATCH 53/73] fix(VDataTableRow): incorrectly applying mobile class --- packages/vuetify/src/components/VDataTable/VDataTableRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index a187172e363..fe27707bca6 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -125,8 +125,8 @@ export const VDataTableRow = genericComponent( class={ { 'v-data-table__mobile-td': mobile.value, - 'v-data-table__mobile-td-select-row': mobile && columnKey === 'data-table-select', - 'v-data-table__mobile-td-expanded-row': mobile && columnKey === 'data-table-expand', + 'v-data-table__mobile-td-select-row': mobile.value && columnKey === 'data-table-select', + 'v-data-table__mobile-td-expanded-row': mobile.value && columnKey === 'data-table-expand', }} fixed={ column.fixed } fixedOffset={ column.fixedOffset } From cfb97a51baaf6ee33c493ac7c6a3d2c513ff603e Mon Sep 17 00:00:00 2001 From: Chris Hudson Date: Fri, 26 Apr 2024 13:08:07 -0700 Subject: [PATCH 54/73] Updated api desc for mobileBreakpoint prop --- packages/api-generator/src/locale/en/VDataTable.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index c010665a459..99c59b742ac 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -24,7 +24,7 @@ "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", "mobile": "If `true` mobile friendly view is enabled.", - "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.", + "mobileBreakpoint": "Override the system default mobile breakpoint.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", "page": "The current displayed page number (1-indexed).", From a33286864dacc3e3bab36db74b214773f8c086cd Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:12:58 -0500 Subject: [PATCH 55/73] chore(VDataTableRows): remove unused dep --- packages/vuetify/src/components/VDataTable/VDataTableRows.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index 5b1a82423b2..c2d8f5c6b1c 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -11,7 +11,7 @@ import { makeDisplayProps, useDisplay } from '@/composables/display' import { useLocale } from '@/composables/locale' // Utilities -import { computed, Fragment, mergeProps } from 'vue' +import { Fragment, mergeProps } from 'vue' import { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util' // Types From 976dd4a168d2508db8759e7b436b68180eaa6899 Mon Sep 17 00:00:00 2001 From: Chris Hudson Date: Fri, 26 Apr 2024 13:29:53 -0700 Subject: [PATCH 56/73] Update api descriptions for mobile display --- packages/api-generator/src/locale/en/VDataTable.json | 2 +- packages/api-generator/src/locale/en/display.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 99c59b742ac..c8d15692be0 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -24,7 +24,7 @@ "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", "mobile": "If `true` mobile friendly view is enabled.", - "mobileBreakpoint": "Override the system default mobile breakpoint.", + "mobileBreakpoint": "Overrides the display configuration default.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", "page": "The current displayed page number (1-indexed).", diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json index b60f4b1ce3f..6502255ec41 100644 --- a/packages/api-generator/src/locale/en/display.json +++ b/packages/api-generator/src/locale/en/display.json @@ -1,5 +1,6 @@ { "props": { - "mobileBreakpoint": "Sets the designated mobile breakpoint for the component." + "mobile": "If `true` mobile friendly view is enabled.", + "mobileBreakpoint": "Overrides the display configuration default." } } From 08ab749b170a09e2904bc3a2f61ed9bdf9e7a190 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:51:36 -0500 Subject: [PATCH 57/73] chore(VDatatTable/display.json): adjust language --- packages/api-generator/src/locale/en/VDataTable.json | 2 -- packages/api-generator/src/locale/en/display.json | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index c8d15692be0..96c8ef0c5db 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -23,8 +23,6 @@ "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.", "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", - "mobile": "If `true` mobile friendly view is enabled.", - "mobileBreakpoint": "Overrides the display configuration default.", "multiSort": "If `true` then one can sort on multiple properties.", "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", "page": "The current displayed page number (1-indexed).", diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json index 6502255ec41..1fea0af1766 100644 --- a/packages/api-generator/src/locale/en/display.json +++ b/packages/api-generator/src/locale/en/display.json @@ -1,6 +1,6 @@ { "props": { - "mobile": "If `true` mobile friendly view is enabled.", + "mobile": "Explicitly designate as a mobile display configuration.", "mobileBreakpoint": "Overrides the display configuration default." } } From cd9eed1af603341a7318ef5ea88d607ed8306b34 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:55:03 -0500 Subject: [PATCH 58/73] chore(VDataTableRow): revert indentation change --- .../components/VDataTable/VDataTableRow.tsx | 234 +++++++++--------- 1 file changed, 116 insertions(+), 118 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index fe27707bca6..f09b0153f8f 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -72,126 +72,124 @@ export const VDataTableRow = genericComponent( onContextmenu={ props.onContextmenu as any } onDblclick={ props.onDblclick as any } > - { - props.item && columns.value.map((column, i) => { - const item = props.item! - const slotName = `item.${column.key}` as const - const headerSlotName = `header.${column.key}` as const - const columnKey = column.key - const slotProps = { - index: props.index!, - item: item.raw, - internalItem: item, - value: getObjectValueByPath(item.columns, column.key), + { props.item && columns.value.map((column, i) => { + const item = props.item! + const slotName = `item.${column.key}` as const + const headerSlotName = `header.${column.key}` as const + const columnKey = column.key + const slotProps = { + index: props.index!, + item: item.raw, + internalItem: item, + value: getObjectValueByPath(item.columns, column.key), + column, + isSelected, + toggleSelect, + isExpanded, + toggleExpand, + } satisfies ItemKeySlot + + 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, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, column, - isSelected, - toggleSelect, - isExpanded, - toggleExpand, - } satisfies ItemKeySlot - - 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, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, - column, - }) - : props.cellProps - const columnCellProps = typeof column.cellProps === 'function' - ? column.cellProps({ - index: slotProps.index, - item: slotProps.item, - internalItem: slotProps.internalItem, - value: slotProps.value, - }) - : column.cellProps - - return ( - - {{ - default: () => { - if (slots[slotName] && !props.mobile) return slots[slotName]!(slotProps) - - if (columnKey === 'data-table-select') { - return slots['item.data-table-select']?.(slotProps) ?? ( - toggleSelect(item), ['stop']) } - /> - ) - } - - if (columnKey === 'data-table-expand') { - return slots['item.data-table-expand']?.(slotProps) ?? ( - toggleExpand(item), ['stop']) } - /> - ) - } - - const displayValue = toDisplayString(slotProps.value) - - if (props.mobile) { - return ( - <> -
- { - slots[headerSlotName] - ? slots[headerSlotName]!(columnSlotProps) - : column.title - } -
-
- { - slots[slotName] - ? slots[slotName]!(slotProps) - : displayValue } -
- - ) - } - - return displayValue - }, + }) + : props.cellProps + const columnCellProps = typeof column.cellProps === 'function' + ? column.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + }) + : column.cellProps + + return ( + - ) - }) - } + fixed={ column.fixed } + fixedOffset={ column.fixedOffset } + lastFixed={ column.lastFixed } + maxWidth={ column.maxWidth } + noPadding={ columnKey === 'data-table-select' || columnKey === 'data-table-expand' } + nowrap={ column.nowrap } + width={ column.width } + { ...cellProps } + { ...columnCellProps } + > + {{ + default: () => { + if (slots[slotName] && !props.mobile) return slots[slotName]!(slotProps) + + if (columnKey === 'data-table-select') { + return slots['item.data-table-select']?.(slotProps) ?? ( + toggleSelect(item), ['stop']) } + /> + ) + } + + if (columnKey === 'data-table-expand') { + return slots['item.data-table-expand']?.(slotProps) ?? ( + toggleExpand(item), ['stop']) } + /> + ) + } + + const displayValue = toDisplayString(slotProps.value) + + if (props.mobile) { + return ( + <> +
+ { + slots[headerSlotName] + ? slots[headerSlotName]!(columnSlotProps) + : column.title + } +
+
+ { + slots[slotName] + ? slots[slotName]!(slotProps) + : displayValue } +
+ + ) + } + + return displayValue + }, + }} + + ) + })} )) }, From 0332323c00062f7c0bf76fa436372260e15a619b Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:56:26 -0500 Subject: [PATCH 59/73] fix(VDataTableRow): use explicit mobile value in checks --- packages/vuetify/src/components/VDataTable/VDataTableRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index f09b0153f8f..b3814f045b2 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -139,7 +139,7 @@ export const VDataTableRow = genericComponent( > {{ default: () => { - if (slots[slotName] && !props.mobile) return slots[slotName]!(slotProps) + if (slots[slotName] && !mobile.value) return slots[slotName]!(slotProps) if (columnKey === 'data-table-select') { return slots['item.data-table-select']?.(slotProps) ?? ( @@ -164,7 +164,7 @@ export const VDataTableRow = genericComponent( const displayValue = toDisplayString(slotProps.value) - if (props.mobile) { + if (mobile.value) { return ( <>
From 2f6c4832f2e6ddfbbc86b60d27f56426f7e0ac88 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 15:58:07 -0500 Subject: [PATCH 60/73] revert(VDatatTableRows): remove headerProps --- packages/vuetify/src/components/VDataTable/VDataTableRows.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx index c2d8f5c6b1c..cd61f72b968 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -47,7 +47,6 @@ export const makeVDataTableRowsProps = propsFactory({ }, rowProps: [Object, Function] as PropType>, cellProps: [Object, Function] as PropType>, - headersProps: [Object, Function] as PropType>, ...makeDisplayProps(), }, 'VDataTableRows') From ff65eb090affc59b9f2ae341bc13cbf55f8c4536 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 16:03:30 -0500 Subject: [PATCH 61/73] chore(VDataTableRow): clean-up template code --- .../components/VDataTable/VDataTableRow.tsx | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index b3814f045b2..939001bbbcf 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -164,27 +164,17 @@ export const VDataTableRow = genericComponent( const displayValue = toDisplayString(slotProps.value) - if (mobile.value) { - return ( - <> -
- { - slots[headerSlotName] - ? slots[headerSlotName]!(columnSlotProps) - : column.title - } -
-
- { - slots[slotName] - ? slots[slotName]!(slotProps) - : displayValue } -
- - ) - } - - return displayValue + return !mobile.value ? displayValue : ( + <> +
+ { slots[headerSlotName]?.(columnSlotProps) ?? column.title } +
+ +
+ { slots[slotName]?.(slotProps) ?? displayValue } +
+ + ) }, }} From 9ba792744def76e862d425d997440ddb71862229 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 16:04:20 -0500 Subject: [PATCH 62/73] chore(VDataTableRow): move VDataTableColumn import location --- packages/vuetify/src/components/VDataTable/VDataTableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 939001bbbcf..0ed8125c5cb 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -1,4 +1,5 @@ // Components +import { VDataTableColumn } from './VDataTableColumn' import { VBtn } from '@/components/VBtn' import { VCheckboxBtn } from '@/components/VCheckbox' @@ -7,7 +8,6 @@ import { useExpanded } from './composables/expand' import { useHeaders } from './composables/headers' import { useSelection } from './composables/select' import { useSort } from './composables/sort' -import { VDataTableColumn } from './VDataTableColumn' import { makeDisplayProps, useDisplay } from '@/composables/display' // Utilities From bb7d8dcc006f1d6275af14ac27ffb527beaf5b91 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Fri, 26 Apr 2024 14:29:49 -0700 Subject: [PATCH 63/73] chore to remove duplicated styles missed in a merge --- .../src/components/VDataTable/VDataTable.sass | 13 -- .../components/VDataTable/VDataTable_old.sass | 119 ++++++++++++++++++ 2 files changed, 119 insertions(+), 13 deletions(-) create mode 100644 packages/vuetify/src/components/VDataTable/VDataTable_old.sass diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 3f2c773b95f..dbe2dbfe68e 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -115,19 +115,6 @@ padding: 4px width: $data-table-header-sort-badge-size - .v-data-table-header__sort-badge - display: inline-flex - justify-content: center - align-items: center - font-size: 0.875rem - padding: 4px - border-radius: 50% - background: $data-table-header-sort-badge-color - min-width: $data-table-header-sort-badge-size - min-height: $data-table-header-sort-badge-size - width: $data-table-header-sort-badge-size - height: $data-table-header-sort-badge-size - .v-data-table-progress > th border: none !important diff --git a/packages/vuetify/src/components/VDataTable/VDataTable_old.sass b/packages/vuetify/src/components/VDataTable/VDataTable_old.sass new file mode 100644 index 00000000000..ca3b69d0222 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTable_old.sass @@ -0,0 +1,119 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use '../../components/VTable/variables' as * +@use './variables' as * + +.v-data-table + width: 100% + +.v-data-table__table + width: 100% + border-collapse: separate + border-spacing: 0 + +.v-data-table__tr + &--focus + border: 1px dotted black + + &--clickable + cursor: pointer + +.v-data-table + .v-table__wrapper + > table + > thead, + tbody + > tr + > td, + th + + &.v-data-table-column--align-end + text-align: end + + .v-data-table-header__content + flex-direction: row-reverse + + &.v-data-table-column--align-center + text-align: center + + .v-data-table-header__content + justify-content: center + + &.v-data-table-column--no-padding + padding: 0 8px + + > th + align-items: center + + > th.v-data-table__th--fixed + position: sticky + + > th.v-data-table__th--sortable:hover + cursor: pointer + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) + + > th:not(.v-data-table__th--sorted) + .v-data-table-header__sort-icon + opacity: 0 + + &:hover + .v-data-table-header__sort-icon + opacity: 0.5 + +.v-data-table-column--fixed, +.v-data-table__th--sticky + background: $table-background + position: sticky !important + left: 0 + z-index: 1 + +.v-data-table-column--last-fixed + border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) + +.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed + z-index: 2 + +.v-data-table-group-header-row + td + background: rgba(var(--v-theme-surface)) + color: rgba(var(--v-theme-on-surface)) + + > span + padding-left: 5px + +.v-data-table--loading + .v-data-table__td + opacity: 0.3 + +.v-data-table-group-header-row__column + padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important + +.v-data-table-header__content + display: flex + align-items: center + +.v-data-table-header__sort-badge + display: inline-flex + justify-content: center + align-items: center + font-size: 0.875rem + padding: 4px + border-radius: 50% + background: $data-table-header-sort-badge-color + min-width: $data-table-header-sort-badge-size + min-height: $data-table-header-sort-badge-size + width: $data-table-header-sort-badge-size + height: $data-table-header-sort-badge-size + +.v-data-table-progress + > th + border: none !important + height: auto !important + padding: 0 !important + +.v-data-table-progress__loader + position: relative + +.v-data-table-rows-loading, +.v-data-table-rows-no-data + text-align: center From 330eb5d0c77485a41bb7e598127e9d6afeabb253 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 17:27:07 -0500 Subject: [PATCH 64/73] revert(VDataTable): revert unrelated changes to sass --- .../src/components/VDataTable/VDataTable.sass | 55 +++++++++---------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index dbe2dbfe68e..f87c6ec7635 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -7,17 +7,17 @@ .v-data-table width: 100% - &__table - border-collapse: separate - border-spacing: 0 - width: 100% + .v-data-table__table + width: 100% + border-collapse: separate + border-spacing: 0 - &__tr - &--focus - border: 1px dotted black + .v-data-table__tr + &--focus + border: 1px dotted black - &--clickable - cursor: pointer + &--clickable + cursor: pointer .v-data-table .v-table__wrapper @@ -90,30 +90,29 @@ > span padding-left: 5px - &__column - padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important - .v-data-table--loading .v-data-table__td opacity: $data-table-loading-opacity -.v-data-table-header - &__content - align-items: center - display: flex + .v-data-table-group-header-row__column + padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important - &__sort-badge + .v-data-table-header__content + display: flex align-items: center - background: $data-table-header-sort-badge-color - border-radius: 50% + + .v-data-table-header__sort-badge display: inline-flex - font-size: 0.875rem - height: $data-table-header-sort-badge-size justify-content: center - min-height: $data-table-header-sort-badge-size - min-width: $data-table-header-sort-badge-size + align-items: center + font-size: 0.875rem padding: 4px + border-radius: 50% + background: $data-table-header-sort-badge-color + min-width: $data-table-header-sort-badge-size + min-height: $data-table-header-sort-badge-size width: $data-table-header-sort-badge-size + height: $data-table-header-sort-badge-size .v-data-table-progress > th @@ -121,12 +120,12 @@ height: auto !important padding: 0 !important - &__loader - position: relative + .v-data-table-progress__loader + position: relative -.v-data-table-rows-loading, -.v-data-table-rows-no-data - text-align: center + .v-data-table-rows-loading, + .v-data-table-rows-no-data + text-align: center .v-data-table &__mobile From a941d19ed39d0ed5639a0c537c9c5906aff85c04 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 17:30:08 -0500 Subject: [PATCH 65/73] chore: remove dev code --- .../components/VDataTable/VDataTable_old.sass | 119 ------------------ 1 file changed, 119 deletions(-) delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTable_old.sass diff --git a/packages/vuetify/src/components/VDataTable/VDataTable_old.sass b/packages/vuetify/src/components/VDataTable/VDataTable_old.sass deleted file mode 100644 index ca3b69d0222..00000000000 --- a/packages/vuetify/src/components/VDataTable/VDataTable_old.sass +++ /dev/null @@ -1,119 +0,0 @@ -@use '../../styles/settings' -@use '../../styles/tools' -@use '../../components/VTable/variables' as * -@use './variables' as * - -.v-data-table - width: 100% - -.v-data-table__table - width: 100% - border-collapse: separate - border-spacing: 0 - -.v-data-table__tr - &--focus - border: 1px dotted black - - &--clickable - cursor: pointer - -.v-data-table - .v-table__wrapper - > table - > thead, - tbody - > tr - > td, - th - - &.v-data-table-column--align-end - text-align: end - - .v-data-table-header__content - flex-direction: row-reverse - - &.v-data-table-column--align-center - text-align: center - - .v-data-table-header__content - justify-content: center - - &.v-data-table-column--no-padding - padding: 0 8px - - > th - align-items: center - - > th.v-data-table__th--fixed - position: sticky - - > th.v-data-table__th--sortable:hover - cursor: pointer - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) - - > th:not(.v-data-table__th--sorted) - .v-data-table-header__sort-icon - opacity: 0 - - &:hover - .v-data-table-header__sort-icon - opacity: 0.5 - -.v-data-table-column--fixed, -.v-data-table__th--sticky - background: $table-background - position: sticky !important - left: 0 - z-index: 1 - -.v-data-table-column--last-fixed - border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) - -.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed - z-index: 2 - -.v-data-table-group-header-row - td - background: rgba(var(--v-theme-surface)) - color: rgba(var(--v-theme-on-surface)) - - > span - padding-left: 5px - -.v-data-table--loading - .v-data-table__td - opacity: 0.3 - -.v-data-table-group-header-row__column - padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important - -.v-data-table-header__content - display: flex - align-items: center - -.v-data-table-header__sort-badge - display: inline-flex - justify-content: center - align-items: center - font-size: 0.875rem - padding: 4px - border-radius: 50% - background: $data-table-header-sort-badge-color - min-width: $data-table-header-sort-badge-size - min-height: $data-table-header-sort-badge-size - width: $data-table-header-sort-badge-size - height: $data-table-header-sort-badge-size - -.v-data-table-progress - > th - border: none !important - height: auto !important - padding: 0 !important - -.v-data-table-progress__loader - position: relative - -.v-data-table-rows-loading, -.v-data-table-rows-no-data - text-align: center From 4e33cf7d1d07bae9accff045e5b4665b7b714486 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 17:36:16 -0500 Subject: [PATCH 66/73] chore(VDataTable): adjust mobile styles --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index f87c6ec7635..6325d20b804 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -127,8 +127,7 @@ .v-data-table-rows-no-data text-align: center -.v-data-table - &__mobile + .v-data-table__mobile &-tr > td align-items: center From 8d40f04d7f4b18a88a52d305ddd37c6d1cc45db8 Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 19:31:13 -0500 Subject: [PATCH 67/73] revert: remove local usage of useDisplay in all tables --- packages/vuetify/src/components/VDataTable/VDataTable.tsx | 5 ----- .../vuetify/src/components/VDataTable/VDataTableServer.tsx | 5 ----- .../vuetify/src/components/VDataTable/VDataTableVirtual.tsx | 5 ----- 3 files changed, 15 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 3ee35ac3760..b2b4fd0d4f6 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -18,7 +18,6 @@ import { createPagination, makeDataTablePaginateProps, providePagination, usePag import { makeDataTableSelectProps, provideSelection } from './composables/select' import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' import { provideDefaults } from '@/composables/defaults' -import { useDisplay } from '@/composables/display' import { makeFilterProps, useFilter } from '@/composables/filter' // Utilities @@ -165,8 +164,6 @@ export const VDataTable = genericComponent( const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) - const { displayClasses, mobile } = useDisplay(props) - const { isSelected, select, @@ -212,7 +209,6 @@ export const VDataTable = genericComponent( toggleExpand, isGroupOpen, toggleGroup, - mobile: mobile.value, items: paginatedItemsWithoutGroups.value.map(item => item.raw), internalItems: paginatedItemsWithoutGroups.value, groupedItems: paginatedItems.value, @@ -234,7 +230,6 @@ export const VDataTable = genericComponent( 'v-data-table--show-select': props.showSelect, 'v-data-table--loading': props.loading, }, - displayClasses.value, props.class, ]} style={ props.style } diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx index 5d9dbbd653b..752b48c8cab 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx @@ -16,7 +16,6 @@ import { createPagination, makeDataTablePaginateProps, providePagination } from import { provideSelection } from './composables/select' import { createSort, provideSort } from './composables/sort' import { provideDefaults } from '@/composables/defaults' -import { useDisplay } from '@/composables/display' // Utilities import { computed, provide, toRef } from 'vue' @@ -97,8 +96,6 @@ export const VDataTableServer = genericComponent extractRows(items.value)) - const { displayClasses, mobile } = useDisplay(props) - useOptions({ page, itemsPerPage, @@ -138,7 +135,6 @@ export const VDataTableServer = genericComponent item.raw), internalItems: itemsWithoutGroups.value, groupedItems: flatItems.value, @@ -159,7 +155,6 @@ export const VDataTableServer = genericComponent item.raw), internalItems: allItems.value, groupedItems: flatItems.value, @@ -189,7 +185,6 @@ export const VDataTableVirtual = genericComponent Date: Fri, 26 Apr 2024 19:54:29 -0500 Subject: [PATCH 68/73] chore(VDataTableRow): revert columnKey change --- .../src/components/VDataTable/VDataTableRow.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 0ed8125c5cb..4fd3fb786ee 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -76,7 +76,6 @@ export const VDataTableRow = genericComponent( const item = props.item! const slotName = `item.${column.key}` as const const headerSlotName = `header.${column.key}` as const - const columnKey = column.key const slotProps = { index: props.index!, item: item.raw, @@ -124,14 +123,14 @@ export const VDataTableRow = genericComponent( class={ { 'v-data-table__mobile-td': mobile.value, - 'v-data-table__mobile-td-select-row': mobile.value && columnKey === 'data-table-select', - 'v-data-table__mobile-td-expanded-row': mobile.value && columnKey === 'data-table-expand', + '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', }} fixed={ column.fixed } fixedOffset={ column.fixedOffset } lastFixed={ column.lastFixed } maxWidth={ column.maxWidth } - noPadding={ columnKey === 'data-table-select' || columnKey === 'data-table-expand' } + noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' } nowrap={ column.nowrap } width={ column.width } { ...cellProps } @@ -139,9 +138,9 @@ export const VDataTableRow = genericComponent( > {{ default: () => { - if (slots[slotName] && !mobile.value) return slots[slotName]!(slotProps) + if (slots[slotName] && !mobile.value) return slots[slotName](slotProps) - if (columnKey === 'data-table-select') { + if (column.key === 'data-table-select') { return slots['item.data-table-select']?.(slotProps) ?? ( ( ) } - if (columnKey === 'data-table-expand') { + if (column.key === 'data-table-expand') { return slots['item.data-table-expand']?.(slotProps) ?? ( Date: Fri, 26 Apr 2024 20:46:22 -0500 Subject: [PATCH 69/73] refactor(VDataTableRow): update how styles are applied for mobile --- .../src/components/VDataTable/VDataTable.sass | 55 +++++++------------ .../VDataTable/VDataTableHeaders.tsx | 6 +- .../components/VDataTable/VDataTableRow.tsx | 22 ++++---- .../src/components/VDataTable/_variables.scss | 3 - 4 files changed, 32 insertions(+), 54 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 6325d20b804..2d9dab6ffb3 100644 --- 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 index ed484cc96a2..7ac7a09a680 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -239,7 +239,7 @@ export const VDataTableHeaders = genericComponent()({
()({ { props.item.title } ( 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( '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( return ( @@ -165,11 +163,11 @@ export const VDataTableRow = genericComponent( return !mobile.value ? displayValue : ( <> -
+
{ slots[headerSlotName]?.(columnSlotProps) ?? column.title }
-
+
{ slots[slotName]?.(slotProps) ?? displayValue }
diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss index 61eaf597fe5..d3cda1e370c 100644 --- 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; From dd2cb96512c168f3a068fcd04ac1909973f7d09c Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 21:27:18 -0500 Subject: [PATCH 70/73] chore: code clean-up --- .../VDataTable/VDataTableHeaders.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 7ac7a09a680..832401f5465 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -129,6 +129,7 @@ export const VDataTableHeaders = genericComponent()({ 'v-data-table__th--sticky': props.sticky, }, displayClasses.value, + loaderClasses.value, ])) const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => { @@ -140,13 +141,12 @@ export const VDataTableHeaders = genericComponent()({ tag="th" align={ column.align } class={[ - ...headerCellClasses.value, { 'v-data-table__th--sortable': column.sortable, 'v-data-table__th--sorted': isSorted(column), 'v-data-table__th--fixed': column.fixed, }, - loaderClasses.value, + ...headerCellClasses.value, ]} style={{ width: convertToUnit(column.width), @@ -231,7 +231,6 @@ export const VDataTableHeaders = genericComponent()({ tag="th" class={[ ...headerCellClasses.value, - loaderClasses.value, ]} colspan={ headers.value.length + 1 } { ...headerProps } @@ -277,15 +276,11 @@ export const VDataTableHeaders = genericComponent()({ } useRender(() => { - if (mobile.value) { - return ( - - - - ) - } - - return ( + return mobile.value ? ( + + + + ) : ( <> { slots.headers ? slots.headers(slotProps.value) From 7f2906178b650d1711b6ca2c3affd3cfc651697f Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Apr 2024 21:44:55 -0500 Subject: [PATCH 71/73] chore: fix test --- packages/vuetify/src/components/VDataTable/VDataTableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 986e5579f3b..37a53c2d573 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -136,7 +136,7 @@ export const VDataTableRow = genericComponent( > {{ default: () => { - if (slots[slotName] && !mobile.value) return slots[slotName](slotProps) + if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps) if (column.key === 'data-table-select') { return slots['item.data-table-select']?.(slotProps) ?? ( From 9c70f65a8237111bd907e30479f6b68dc92ac49e Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Sat, 27 Apr 2024 19:10:50 -0700 Subject: [PATCH 72/73] changed checkbox to be end aligned --- packages/vuetify/src/components/VDataTable/VDataTable.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index 2d9dab6ffb3..63025c0a5de 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -134,7 +134,7 @@ > .v-data-table__td--select-row grid-template-columns: 0 - justify-content: start + justify-content: end > td align-items: center From 1d206d56a1a8ae8176e853626a4d11b9880f6154 Mon Sep 17 00:00:00 2001 From: John Leider Date: Sat, 27 Apr 2024 21:29:40 -0500 Subject: [PATCH 73/73] feat(VDataTableHeaders): add support for select all --- .../vuetify/src/components/VDataTable/VDataTableHeaders.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 832401f5465..46dd562f844 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -226,6 +226,10 @@ export const VDataTableHeaders = genericComponent()({ return columns.value.filter(column => column?.sortable) }) + const appendIcon = computed(() => { + return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff' + }) + return ( ()({ multiple={ props.multiSort } variant="underlined" onClick:clear={ () => sortBy.value = [] } + appendIcon={ appendIcon.value } + onClick:append={ () => selectAll(!allSelected.value) } > {{ ...slots,