@vuetify/nightly 3.2.0-next-20230118.0 → 4.0.0-dev-20230211.0

package/lib/index.d.ts

@@ -145,10 +145,10 @@ interface DisplayInstance {
 }
 declare function useDisplay(): DisplayInstance;
 
-interface DefaultsInstance {
+declare type DefaultsInstance = undefined | {
     [key: string]: undefined | Record<string, unknown>;
     global?: Record<string, unknown>;
-}
+};
 declare type DefaultsOptions = Partial<DefaultsInstance>;
 
 declare type IconValue = string | JSXComponent;
@@ -315,21 +315,18 @@ declare module '@vue/runtime-core' {
 
   export interface GlobalComponents {
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
-    VForm: typeof import('vuetify/components')['VForm']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VHover: typeof import('vuetify/components')['VHover']
-    VLayout: typeof import('vuetify/components')['VLayout']
-    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
-    VLazy: typeof import('vuetify/components')['VLazy']
+    VForm: typeof import('vuetify/components')['VForm']
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
-    VParallax: typeof import('vuetify/components')['VParallax']
     VRadio: typeof import('vuetify/components')['VRadio']
     VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VResponsive: typeof import('vuetify/components')['VResponsive']
+    VParallax: typeof import('vuetify/components')['VParallax']
     VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VValidation: typeof import('vuetify/components')['VValidation']
     VFabTransition: typeof import('vuetify/components')['VFabTransition']
@@ -354,35 +351,35 @@ declare module '@vue/runtime-core' {
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
-    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
     VAvatar: typeof import('vuetify/components')['VAvatar']
-    VBadge: typeof import('vuetify/components')['VBadge']
-    VBanner: typeof import('vuetify/components')['VBanner']
-    VBannerActions: typeof import('vuetify/components')['VBannerActions']
-    VBannerText: typeof import('vuetify/components')['VBannerText']
+    VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
     VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
+    VBadge: typeof import('vuetify/components')['VBadge']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
+    VBanner: typeof import('vuetify/components')['VBanner']
+    VBannerActions: typeof import('vuetify/components')['VBannerActions']
+    VBannerText: typeof import('vuetify/components')['VBannerText']
     VBtn: typeof import('vuetify/components')['VBtn']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
-    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
     VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
+    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     VCheckbox: typeof import('vuetify/components')['VCheckbox']
     VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VChip: typeof import('vuetify/components')['VChip']
-    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCode: typeof import('vuetify/components')['VCode']
+    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
-    VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
+    VCombobox: typeof import('vuetify/components')['VCombobox']
     VDialog: typeof import('vuetify/components')['VDialog']
     VDivider: typeof import('vuetify/components')['VDivider']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
@@ -399,20 +396,11 @@ declare module '@vue/runtime-core' {
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
     VImg: typeof import('vuetify/components')['VImg']
-    VInput: typeof import('vuetify/components')['VInput']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
+    VInput: typeof import('vuetify/components')['VInput']
     VKbd: typeof import('vuetify/components')['VKbd']
     VLabel: typeof import('vuetify/components')['VLabel']
-    VList: typeof import('vuetify/components')['VList']
-    VListGroup: typeof import('vuetify/components')['VListGroup']
-    VListImg: typeof import('vuetify/components')['VListImg']
-    VListItem: typeof import('vuetify/components')['VListItem']
-    VListItemAction: typeof import('vuetify/components')['VListItemAction']
-    VListItemMedia: typeof import('vuetify/components')['VListItemMedia']
-    VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
-    VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VListSubheader: typeof import('vuetify/components')['VListSubheader']
     VMain: typeof import('vuetify/components')['VMain']
     VMenu: typeof import('vuetify/components')['VMenu']
     VMessages: typeof import('vuetify/components')['VMessages']
@@ -423,15 +411,15 @@ declare module '@vue/runtime-core' {
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VRating: typeof import('vuetify/components')['VRating']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
+    VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSheet: typeof import('vuetify/components')['VSheet']
     VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
     VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSlider: typeof import('vuetify/components')['VSlider']
-    VSwitch: typeof import('vuetify/components')['VSwitch']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSwitch: typeof import('vuetify/components')['VSwitch']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTab: typeof import('vuetify/components')['VTab']
@@ -440,11 +428,23 @@ declare module '@vue/runtime-core' {
     VTextField: typeof import('vuetify/components')['VTextField']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
+    VTooltip: typeof import('vuetify/components')['VTooltip']
     VToolbar: typeof import('vuetify/components')['VToolbar']
     VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
-    VTooltip: typeof import('vuetify/components')['VTooltip']
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
+    VLazy: typeof import('vuetify/components')['VLazy']
+    VLayout: typeof import('vuetify/components')['VLayout']
+    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
+    VList: typeof import('vuetify/components')['VList']
+    VListGroup: typeof import('vuetify/components')['VListGroup']
+    VListImg: typeof import('vuetify/components')['VListImg']
+    VListItem: typeof import('vuetify/components')['VListItem']
+    VListItemAction: typeof import('vuetify/components')['VListItemAction']
+    VListItemMedia: typeof import('vuetify/components')['VListItemMedia']
+    VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
+    VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
+    VListSubheader: typeof import('vuetify/components')['VListSubheader']
   }
 }

package/lib/labs/VDataTable/VDataTable.mjs

@@ -71,9 +71,12 @@ export const VDataTable = defineComponent({
     const {
       items
     } = useDataTableItems(props, columns);
+    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'));
+    } = useFilter(props, items, toRef(props, 'search'), {
+      filterKeys
+    });
     const {
       sortBy
     } = createSort(props);
@@ -92,8 +95,7 @@ export const VDataTable = defineComponent({
       page,
       itemsPerPage,
       startIndex,
-      stopIndex,
-      pageCount
+      stopIndex
     } = createPagination(props, flatItems);
     const {
       paginatedItems
@@ -105,9 +107,7 @@ export const VDataTable = defineComponent({
       page,
       itemsPerPage,
       sortBy,
-      pageCount,
-      startIndex,
-      stopIndex
+      groupBy
     });
     provideDefaults({
       VDataTableRows: {

package/lib/labs/VDataTable/VDataTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTable.mjs","names":["VTable","VDataTableHeaders","VDataTableRows","VDataTableFooter","useProxiedModel","makeDataTableItemProps","useDataTableItems","createHeaders","makeDataTableHeaderProps","createSort","makeDataTableSortProps","useSortedItems","createGroupBy","makeDataTableGroupProps","useGroupedItems","createPagination","makeDataTablePaginateProps","usePaginatedItems","createSelection","makeDataTableSelectProps","createExpanded","makeDataTableExpandProps","useOptions","provideDefaults","computed","toRef","defineComponent","propsFactory","useRender","makeFilterProps","useFilter","makeVDataTableProps","hideNoData","Boolean","noDataText","type","String","default","height","Number","width","fixedHeader","fixedFooter","VDataTable","name","props","search","emits","value","event","setup","emit","slots","groupBy","columns","showSelect","showExpand","items","filteredItems","sortBy","sortByWithGroups","opened","extractRows","sortedItems","flatItems","page","itemsPerPage","startIndex","stopIndex","pageCount","paginatedItems","paginatedItemsWithoutGroups","top","colgroup","headers","multiSort","thead","body","tbody","tfoot","bottom","prepend"],"sources":["../../../src/labs/VDataTable/VDataTable.tsx"],"sourcesContent":["// Styles\nimport './VDataTable.sass'\n\n// Components\nimport { VTable } from '@/components/VTable'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRows } from './VDataTableRows'\nimport { VDataTableFooter } from './VDataTableFooter'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeDataTableItemProps, useDataTableItems } from './composables/items'\nimport { createHeaders, makeDataTableHeaderProps } from './composables/headers'\nimport { createSort, makeDataTableSortProps, useSortedItems } from './composables/sort'\nimport { createGroupBy, makeDataTableGroupProps, useGroupedItems } from './composables/group'\nimport { createPagination, makeDataTablePaginateProps, usePaginatedItems } from './composables/paginate'\nimport { createSelection, makeDataTableSelectProps } from './composables/select'\nimport { createExpanded, makeDataTableExpandProps } from './composables/expand'\nimport { useOptions } from './composables/options'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, propsFactory, useRender } from '@/util'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\n\n// Types\nimport type { DataTableItem } from './types'\n\nexport const makeVDataTableProps = propsFactory({\n  ...makeDataTableItemProps(),\n  ...makeDataTableHeaderProps(),\n  hideNoData: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  height: [String, Number],\n  width: [String, Number],\n  fixedHeader: Boolean,\n  fixedFooter: Boolean,\n}, 'v-data-table')\n\nexport const VDataTable = defineComponent({\n  name: 'VDataTable',\n\n  props: {\n    search: String,\n\n    ...makeVDataTableProps(),\n    ...makeDataTableExpandProps(),\n    ...makeDataTableGroupProps(),\n    ...makeDataTableSelectProps(),\n    ...makeDataTableSortProps(),\n    ...makeDataTablePaginateProps(),\n    ...makeFilterProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (value: number) => true,\n    'update:itemsPerPage': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n    'update:groupBy': (value: any) => true,\n    'update:expanded': (value: any) => true,\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const groupBy = useProxiedModel(props, 'groupBy')\n\n    const { columns } = createHeaders(props, {\n      groupBy,\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n\n    const { items } = useDataTableItems(props, columns)\n\n    const { filteredItems } = useFilter<DataTableItem>(props, items, toRef(props, 'search'))\n\n    const { sortBy } = createSort(props)\n    const { sortByWithGroups, opened, extractRows } = createGroupBy(props, groupBy, sortBy)\n\n    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const { page, itemsPerPage, startIndex, stopIndex, pageCount } = createPagination(props, flatItems)\n    const { paginatedItems } = usePaginatedItems(flatItems, startIndex, stopIndex, itemsPerPage)\n\n    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))\n\n    createSelection(props, paginatedItemsWithoutGroups)\n\n    createExpanded(props)\n\n    useOptions({\n      page,\n      itemsPerPage,\n      sortBy,\n      pageCount,\n      startIndex,\n      stopIndex,\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n      },\n    })\n\n    useRender(() => (\n      <VTable\n        class={[\n          'v-data-table',\n          {\n            'v-data-table--show-select': props.showSelect,\n          },\n        ]}\n        fixedHeader={ props.fixedHeader }\n        fixedFooter={ props.fixedFooter }\n        height={ props.height }\n      >\n        {{\n          top: slots.top,\n          default: slots.default ?? (() => (\n            <>\n              { slots.colgroup?.({ columns }) }\n              <thead>\n                { slots.headers ? slots.headers() : (\n                  <VDataTableHeaders\n                    sticky={ props.fixedHeader }\n                    multiSort={ props.multiSort }\n                    v-slots={ slots }\n                  />\n                ) }\n              </thead>\n              { slots.thead?.() }\n              <tbody>\n                { slots.body ? slots.body() : (\n                  <VDataTableRows\n                    items={ paginatedItems.value }\n                    onClick:row={ (event, value) => emit('click:row', event, value) }\n                    v-slots={ slots }\n                  />\n                ) }\n              </tbody>\n              { slots.tbody?.() }\n              { slots.tfoot?.() }\n            </>\n          )),\n          bottom: slots.bottom ?? (() => (\n            <VDataTableFooter\n              v-slots={{\n                prepend: slots['footer.prepend'],\n              }}\n            />\n          )),\n        }}\n      </VTable>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataTable = InstanceType<typeof VDataTable>\n"],"mappings":"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"}
+{"version":3,"file":"VDataTable.mjs","names":["VTable","VDataTableHeaders","VDataTableRows","VDataTableFooter","useProxiedModel","makeDataTableItemProps","useDataTableItems","createHeaders","makeDataTableHeaderProps","createSort","makeDataTableSortProps","useSortedItems","createGroupBy","makeDataTableGroupProps","useGroupedItems","createPagination","makeDataTablePaginateProps","usePaginatedItems","createSelection","makeDataTableSelectProps","createExpanded","makeDataTableExpandProps","useOptions","provideDefaults","computed","toRef","defineComponent","propsFactory","useRender","makeFilterProps","useFilter","makeVDataTableProps","hideNoData","Boolean","noDataText","type","String","default","height","Number","width","fixedHeader","fixedFooter","VDataTable","name","props","search","emits","value","event","setup","emit","slots","groupBy","columns","showSelect","showExpand","items","filterKeys","map","c","key","filteredItems","sortBy","sortByWithGroups","opened","extractRows","sortedItems","flatItems","page","itemsPerPage","startIndex","stopIndex","paginatedItems","paginatedItemsWithoutGroups","top","colgroup","headers","multiSort","thead","body","tbody","tfoot","bottom","prepend"],"sources":["../../../src/labs/VDataTable/VDataTable.tsx"],"sourcesContent":["// Styles\nimport './VDataTable.sass'\n\n// Components\nimport { VTable } from '@/components/VTable'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRows } from './VDataTableRows'\nimport { VDataTableFooter } from './VDataTableFooter'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeDataTableItemProps, useDataTableItems } from './composables/items'\nimport { createHeaders, makeDataTableHeaderProps } from './composables/headers'\nimport { createSort, makeDataTableSortProps, useSortedItems } from './composables/sort'\nimport { createGroupBy, makeDataTableGroupProps, useGroupedItems } from './composables/group'\nimport { createPagination, makeDataTablePaginateProps, usePaginatedItems } from './composables/paginate'\nimport { createSelection, makeDataTableSelectProps } from './composables/select'\nimport { createExpanded, makeDataTableExpandProps } from './composables/expand'\nimport { useOptions } from './composables/options'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { defineComponent, propsFactory, useRender } from '@/util'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\n\n// Types\nimport type { DataTableItem } from './types'\n\nexport const makeVDataTableProps = propsFactory({\n  ...makeDataTableItemProps(),\n  ...makeDataTableHeaderProps(),\n  hideNoData: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  height: [String, Number],\n  width: [String, Number],\n  fixedHeader: Boolean,\n  fixedFooter: Boolean,\n}, 'v-data-table')\n\nexport const VDataTable = defineComponent({\n  name: 'VDataTable',\n\n  props: {\n    search: String,\n\n    ...makeVDataTableProps(),\n    ...makeDataTableExpandProps(),\n    ...makeDataTableGroupProps(),\n    ...makeDataTableSelectProps(),\n    ...makeDataTableSortProps(),\n    ...makeDataTablePaginateProps(),\n    ...makeFilterProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (value: number) => true,\n    'update:itemsPerPage': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n    'update:groupBy': (value: any) => true,\n    'update:expanded': (value: any) => true,\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const groupBy = useProxiedModel(props, 'groupBy')\n\n    const { columns } = createHeaders(props, {\n      groupBy,\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n\n    const { items } = useDataTableItems(props, columns)\n\n    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key))\n    const { filteredItems } = useFilter<DataTableItem>(props, items, toRef(props, 'search'), { filterKeys })\n\n    const { sortBy } = createSort(props)\n    const { sortByWithGroups, opened, extractRows } = createGroupBy(props, groupBy, sortBy)\n\n    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const { page, itemsPerPage, startIndex, stopIndex } = createPagination(props, flatItems)\n    const { paginatedItems } = usePaginatedItems(flatItems, startIndex, stopIndex, itemsPerPage)\n\n    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))\n\n    createSelection(props, paginatedItemsWithoutGroups)\n\n    createExpanded(props)\n\n    useOptions({\n      page,\n      itemsPerPage,\n      sortBy,\n      groupBy,\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n      },\n    })\n\n    useRender(() => (\n      <VTable\n        class={[\n          'v-data-table',\n          {\n            'v-data-table--show-select': props.showSelect,\n          },\n        ]}\n        fixedHeader={ props.fixedHeader }\n        fixedFooter={ props.fixedFooter }\n        height={ props.height }\n      >\n        {{\n          top: slots.top,\n          default: slots.default ?? (() => (\n            <>\n              { slots.colgroup?.({ columns }) }\n              <thead>\n                { slots.headers ? slots.headers() : (\n                  <VDataTableHeaders\n                    sticky={ props.fixedHeader }\n                    multiSort={ props.multiSort }\n                    v-slots={ slots }\n                  />\n                ) }\n              </thead>\n              { slots.thead?.() }\n              <tbody>\n                { slots.body ? slots.body() : (\n                  <VDataTableRows\n                    items={ paginatedItems.value }\n                    onClick:row={ (event, value) => emit('click:row', event, value) }\n                    v-slots={ slots }\n                  />\n                ) }\n              </tbody>\n              { slots.tbody?.() }\n              { slots.tfoot?.() }\n            </>\n          )),\n          bottom: slots.bottom ?? (() => (\n            <VDataTableFooter\n              v-slots={{\n                prepend: slots['footer.prepend'],\n              }}\n            />\n          )),\n        }}\n      </VTable>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataTable = InstanceType<typeof VDataTable>\n"],"mappings":"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"}

package/lib/labs/VDataTable/VDataTableFooter.css

@@ -19,4 +19,13 @@
 .v-data-table-footer__info {
   display: flex;
   padding-inline-end: 24px;
+}
+
+.v-data-table-footer__pagination {
+  display: flex;
+  align-items: center;
+}
+
+.v-data-table-footer__page {
+  padding: 0 8px;
 }

package/lib/labs/VDataTable/VDataTableFooter.mjs

@@ -1,11 +1,13 @@
-import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VDataTableFooter.css";
 
 // Components
 import { VBtn } from "../../components/VBtn/index.mjs";
 import { VSelect } from "../../components/VSelect/index.mjs"; // Composables
-import { usePagination } from "./composables/paginate.mjs"; // Utilities
+import { usePagination } from "./composables/paginate.mjs";
+import { useLocale } from "../entry-bundler.mjs"; // Utilities
+import { computed } from 'vue';
 import { defineComponent } from "../../util/index.mjs"; // Types
 export const VDataTableFooter = defineComponent({
   name: 'VDataTableFooter',
@@ -26,6 +28,30 @@ export const VDataTableFooter = defineComponent({
       type: String,
       default: '$last'
     },
+    itemsPerPageText: {
+      type: String,
+      default: '$vuetify.dataFooter.itemsPerPageText'
+    },
+    pageText: {
+      type: String,
+      default: '$vuetify.dataFooter.pageText'
+    },
+    firstPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.firstPage'
+    },
+    prevPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.prevPage'
+    },
+    nextPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.nextPage'
+    },
+    lastPageLabel: {
+      type: String,
+      default: '$vuetify.dataFooter.lastPage'
+    },
     itemsPerPageOptions: {
       type: Array,
       default: () => [{
@@ -42,7 +68,7 @@ export const VDataTableFooter = defineComponent({
         title: '100'
       }, {
         value: -1,
-        title: 'All'
+        title: '$vuetify.dataFooter.itemsPerPageAll'
       }]
     },
     showCurrentPage: Boolean
@@ -51,6 +77,9 @@ export const VDataTableFooter = defineComponent({
     let {
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       page,
       pageCount,
@@ -59,14 +88,18 @@ export const VDataTableFooter = defineComponent({
       itemsLength,
       itemsPerPage
     } = usePagination();
+    const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => ({
+      ...option,
+      title: t(option.title)
+    })));
     return () => {
       var _slots$prepend;
       return _createVNode("div", {
         "class": "v-data-table-footer"
       }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots), _createVNode("div", {
         "class": "v-data-table-footer__items-per-page"
-      }, [_createVNode("span", null, [_createTextVNode("Items per page:")]), _createVNode(VSelect, {
-        "items": props.itemsPerPageOptions,
+      }, [_createVNode("span", null, [t(props.itemsPerPageText)]), _createVNode(VSelect, {
+        "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
         "onUpdate:modelValue": v => itemsPerPage.value = Number(v),
         "density": "compact",
@@ -74,30 +107,35 @@ export const VDataTableFooter = defineComponent({
         "hide-details": true
       }, null)]), _createVNode("div", {
         "class": "v-data-table-footer__info"
-      }, [_createVNode("div", null, [(startIndex.value ?? -1) + 1, _createTextVNode(" - "), stopIndex.value ?? 0, _createTextVNode(" of "), itemsLength.value ?? 0])]), _createVNode("div", {
+      }, [_createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), _createVNode("div", {
         "class": "v-data-table-footer__pagination"
       }, [_createVNode(VBtn, {
         "icon": props.firstIcon,
         "variant": "plain",
         "onClick": () => page.value = 1,
-        "disabled": page.value === 1
+        "disabled": page.value === 1,
+        "aria-label": t(props.firstPageLabel)
       }, null), _createVNode(VBtn, {
         "icon": props.prevIcon,
         "variant": "plain",
         "onClick": () => page.value = Math.max(1, page.value - 1),
-        "disabled": page.value === 1
-      }, null), props.showCurrentPage && _createVNode("div", {
-        "key": "page"
-      }, [_createTextVNode("page.value")]), _createVNode(VBtn, {
+        "disabled": page.value === 1,
+        "aria-label": t(props.prevPageLabel)
+      }, null), props.showCurrentPage && _createVNode("span", {
+        "key": "page",
+        "class": "v-data-table-footer__page"
+      }, [page.value]), _createVNode(VBtn, {
         "icon": props.nextIcon,
         "variant": "plain",
         "onClick": () => page.value = Math.min(pageCount.value, page.value + 1),
-        "disabled": page.value === pageCount.value
+        "disabled": page.value === pageCount.value,
+        "aria-label": t(props.nextPageLabel)
       }, null), _createVNode(VBtn, {
         "icon": props.lastIcon,
         "variant": "plain",
         "onClick": () => page.value = pageCount.value,
-        "disabled": page.value === pageCount.value
+        "disabled": page.value === pageCount.value,
+        "aria-label": t(props.lastPageLabel)
       }, null)])]);
     };
   }

package/lib/labs/VDataTable/VDataTableFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTableFooter.mjs","names":["VBtn","VSelect","usePagination","defineComponent","VDataTableFooter","name","props","prevIcon","type","String","default","nextIcon","firstIcon","lastIcon","itemsPerPageOptions","Array","value","title","showCurrentPage","Boolean","setup","slots","page","pageCount","startIndex","stopIndex","itemsLength","itemsPerPage","prepend","v","Number","Math","max","min"],"sources":["../../../src/labs/VDataTable/VDataTableFooter.tsx"],"sourcesContent":["// Styles\nimport './VDataTableFooter.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { usePagination } from './composables/paginate'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { InternalItem } from '@/composables/items'\n\nexport const VDataTableFooter = defineComponent({\n  name: 'VDataTableFooter',\n\n  props: {\n    prevIcon: {\n      type: String,\n      default: '$prev',\n    },\n    nextIcon: {\n      type: String,\n      default: '$next',\n    },\n    firstIcon: {\n      type: String,\n      default: '$first',\n    },\n    lastIcon: {\n      type: String,\n      default: '$last',\n    },\n    itemsPerPageOptions: {\n      type: Array as PropType<InternalItem[]>,\n      default: () => ([\n        { value: 10, title: '10' },\n        { value: 25, title: '25' },\n        { value: 50, title: '50' },\n        { value: 100, title: '100' },\n        { value: -1, title: 'All' },\n      ]),\n    },\n    showCurrentPage: Boolean,\n  },\n\n  setup (props, { slots }) {\n    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage } = usePagination()\n\n    return () => (\n      <div\n        class=\"v-data-table-footer\"\n      >\n        { slots.prepend?.() }\n        <div class=\"v-data-table-footer__items-per-page\">\n          <span>Items per page:</span>\n          <VSelect\n            items={ props.itemsPerPageOptions }\n            modelValue={ itemsPerPage.value }\n            onUpdate:modelValue={ v => itemsPerPage.value = Number(v) }\n            density=\"compact\"\n            variant=\"outlined\"\n            hide-details\n          />\n        </div>\n        <div class=\"v-data-table-footer__info\">\n          <div>{ (startIndex.value ?? -1) + 1 } - { stopIndex.value ?? 0 } of { itemsLength.value ?? 0 }</div>\n        </div>\n        <div class=\"v-data-table-footer__pagination\">\n          <VBtn\n            icon={ props.firstIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = 1 }\n            disabled={ page.value === 1 }\n          />\n          <VBtn\n            icon={ props.prevIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.max(1, page.value - 1) }\n            disabled={ page.value === 1 }\n          />\n          { props.showCurrentPage && (\n            <div key=\"page\">page.value</div>\n          ) }\n          <VBtn\n            icon={ props.nextIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.min(pageCount.value, page.value + 1) }\n            disabled={ page.value === pageCount.value }\n          />\n          <VBtn\n            icon={ props.lastIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = pageCount.value }\n            disabled={ page.value === pageCount.value }\n          />\n        </div>\n      </div>\n    )\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VDataTableFooter.mjs","names":["VBtn","VSelect","usePagination","useLocale","computed","defineComponent","VDataTableFooter","name","props","prevIcon","type","String","default","nextIcon","firstIcon","lastIcon","itemsPerPageText","pageText","firstPageLabel","prevPageLabel","nextPageLabel","lastPageLabel","itemsPerPageOptions","Array","value","title","showCurrentPage","Boolean","setup","slots","t","page","pageCount","startIndex","stopIndex","itemsLength","itemsPerPage","map","option","prepend","v","Number","Math","max","min"],"sources":["../../../src/labs/VDataTable/VDataTableFooter.tsx"],"sourcesContent":["// Styles\nimport './VDataTableFooter.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { usePagination } from './composables/paginate'\nimport { useLocale } from '../entry-bundler'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { InternalItem } from '@/composables/items'\n\nexport const VDataTableFooter = defineComponent({\n  name: 'VDataTableFooter',\n\n  props: {\n    prevIcon: {\n      type: String,\n      default: '$prev',\n    },\n    nextIcon: {\n      type: String,\n      default: '$next',\n    },\n    firstIcon: {\n      type: String,\n      default: '$first',\n    },\n    lastIcon: {\n      type: String,\n      default: '$last',\n    },\n    itemsPerPageText: {\n      type: String,\n      default: '$vuetify.dataFooter.itemsPerPageText',\n    },\n    pageText: {\n      type: String,\n      default: '$vuetify.dataFooter.pageText',\n    },\n    firstPageLabel: {\n      type: String,\n      default: '$vuetify.dataFooter.firstPage',\n    },\n    prevPageLabel: {\n      type: String,\n      default: '$vuetify.dataFooter.prevPage',\n    },\n    nextPageLabel: {\n      type: String,\n      default: '$vuetify.dataFooter.nextPage',\n    },\n    lastPageLabel: {\n      type: String,\n      default: '$vuetify.dataFooter.lastPage',\n    },\n    itemsPerPageOptions: {\n      type: Array as PropType<InternalItem[]>,\n      default: () => ([\n        { value: 10, title: '10' },\n        { value: 25, title: '25' },\n        { value: 50, title: '50' },\n        { value: 100, title: '100' },\n        { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },\n      ]),\n    },\n    showCurrentPage: Boolean,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage } = usePagination()\n\n    const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => ({\n      ...option,\n      title: t(option.title),\n    })))\n\n    return () => (\n      <div\n        class=\"v-data-table-footer\"\n      >\n        { slots.prepend?.() }\n        <div class=\"v-data-table-footer__items-per-page\">\n          <span>{ t(props.itemsPerPageText) }</span>\n          <VSelect\n            items={ itemsPerPageOptions.value }\n            modelValue={ itemsPerPage.value }\n            onUpdate:modelValue={ v => itemsPerPage.value = Number(v) }\n            density=\"compact\"\n            variant=\"outlined\"\n            hide-details\n          />\n        </div>\n        <div class=\"v-data-table-footer__info\">\n          <div>\n            { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) }\n          </div>\n        </div>\n        <div class=\"v-data-table-footer__pagination\">\n          <VBtn\n            icon={ props.firstIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = 1 }\n            disabled={ page.value === 1 }\n            aria-label={ t(props.firstPageLabel) }\n          />\n          <VBtn\n            icon={ props.prevIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.max(1, page.value - 1) }\n            disabled={ page.value === 1 }\n            aria-label={ t(props.prevPageLabel) }\n          />\n          { props.showCurrentPage && (\n            <span key=\"page\" class=\"v-data-table-footer__page\">{ page.value }</span>\n          ) }\n          <VBtn\n            icon={ props.nextIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = Math.min(pageCount.value, page.value + 1) }\n            disabled={ page.value === pageCount.value }\n            aria-label={ t(props.nextPageLabel) }\n          />\n          <VBtn\n            icon={ props.lastIcon }\n            variant=\"plain\"\n            onClick={ () => page.value = pageCount.value }\n            disabled={ page.value === pageCount.value }\n            aria-label={ t(props.lastPageLabel) }\n          />\n        </div>\n      </div>\n    )\n  },\n})\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,OAAO,8CAEhB;AAAA,SACSC,aAAa;AAAA,SACbC,SAAS,gCAElB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,eAAe,gCAExB;AAIA,OAAO,MAAMC,gBAAgB,GAAGD,eAAe,CAAC;EAC9CE,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACRH,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDE,SAAS,EAAE;MACTJ,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDG,QAAQ,EAAE;MACRL,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDI,gBAAgB,EAAE;MAChBN,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDK,QAAQ,EAAE;MACRP,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDM,cAAc,EAAE;MACdR,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDO,aAAa,EAAE;MACbT,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDQ,aAAa,EAAE;MACbV,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDS,aAAa,EAAE;MACbX,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX,CAAC;IACDU,mBAAmB,EAAE;MACnBZ,IAAI,EAAEa,KAAiC;MACvCX,OAAO,EAAE,MAAO,CACd;QAAEY,KAAK,EAAE,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAC,EAC1B;QAAED,KAAK,EAAE,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAC,EAC1B;QAAED,KAAK,EAAE,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAC,EAC1B;QAAED,KAAK,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAM,CAAC,EAC5B;QAAED,KAAK,EAAE,CAAC,CAAC;QAAEC,KAAK,EAAE;MAAsC,CAAC;IAE/D,CAAC;IACDC,eAAe,EAAEC;EACnB,CAAC;EAEDC,KAAK,CAAEpB,KAAK,QAAa;IAAA,IAAX;MAAEqB;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAE,CAAC,GAAG3B,SAAS,EAAE;IACzB,MAAM;MAAE4B,IAAI;MAAEC,SAAS;MAAEC,UAAU;MAAEC,SAAS;MAAEC,WAAW;MAAEC;IAAa,CAAC,GAAGlC,aAAa,EAAE;IAE7F,MAAMoB,mBAAmB,GAAGlB,QAAQ,CAAC,MAAMI,KAAK,CAACc,mBAAmB,CAACe,GAAG,CAACC,MAAM,KAAK;MAClF,GAAGA,MAAM;MACTb,KAAK,EAAEK,CAAC,CAACQ,MAAM,CAACb,KAAK;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,OAAO;MAAA;MAAA;QAAA,SAEG;MAAqB,sBAEzBI,KAAK,CAACU,OAAO,qBAAb,oBAAAV,KAAK,CAAY;QAAA,SACR;MAAqC,gCACtCC,CAAC,CAACtB,KAAK,CAACQ,gBAAgB,CAAC;QAAA,SAEvBM,mBAAmB,CAACE,KAAK;QAAA,cACpBY,YAAY,CAACZ,KAAK;QAAA,uBACTgB,CAAC,IAAIJ,YAAY,CAACZ,KAAK,GAAGiB,MAAM,CAACD,CAAC,CAAC;QAAA,WACjD,SAAS;QAAA,WACT,UAAU;QAAA;MAAA;QAAA,SAIX;MAA2B,+BAEhCV,CAAC,CAACtB,KAAK,CAACS,QAAQ,EAAE,CAACkB,WAAW,CAACX,KAAK,GAAG,CAAC,GAAGS,UAAU,CAACT,KAAK,GAAG,CAAC,EAAEU,SAAS,CAACV,KAAK,EAAEW,WAAW,CAACX,KAAK,CAAC;QAAA,SAG/F;MAAiC;QAAA,QAEjChB,KAAK,CAACM,SAAS;QAAA,WACd,OAAO;QAAA,WACL,MAAMiB,IAAI,CAACP,KAAK,GAAG,CAAC;QAAA,YACnBO,IAAI,CAACP,KAAK,KAAK,CAAC;QAAA,cACdM,CAAC,CAACtB,KAAK,CAACU,cAAc;MAAC;QAAA,QAG7BV,KAAK,CAACC,QAAQ;QAAA,WACb,OAAO;QAAA,WACL,MAAMsB,IAAI,CAACP,KAAK,GAAGkB,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,IAAI,CAACP,KAAK,GAAG,CAAC,CAAC;QAAA,YAC7CO,IAAI,CAACP,KAAK,KAAK,CAAC;QAAA,cACdM,CAAC,CAACtB,KAAK,CAACW,aAAa;MAAC,UAEnCX,KAAK,CAACkB,eAAe;QAAA,OACX,MAAM;QAAA,SAAO;MAA2B,IAAGK,IAAI,CAACP,KAAK,EAChE;QAAA,QAEQhB,KAAK,CAACK,QAAQ;QAAA,WACb,OAAO;QAAA,WACL,MAAMkB,IAAI,CAACP,KAAK,GAAGkB,IAAI,CAACE,GAAG,CAACZ,SAAS,CAACR,KAAK,EAAEO,IAAI,CAACP,KAAK,GAAG,CAAC,CAAC;QAAA,YAC3DO,IAAI,CAACP,KAAK,KAAKQ,SAAS,CAACR,KAAK;QAAA,cAC5BM,CAAC,CAACtB,KAAK,CAACY,aAAa;MAAC;QAAA,QAG5BZ,KAAK,CAACO,QAAQ;QAAA,WACb,OAAO;QAAA,WACL,MAAMgB,IAAI,CAACP,KAAK,GAAGQ,SAAS,CAACR,KAAK;QAAA,YACjCO,IAAI,CAACP,KAAK,KAAKQ,SAAS,CAACR,KAAK;QAAA,cAC5BM,CAAC,CAACtB,KAAK,CAACa,aAAa;MAAC;IAAA,CAI1C;EACH;AACF,CAAC,CAAC"}

package/lib/labs/VDataTable/VDataTableFooter.sass

@@ -21,3 +21,10 @@
 .v-data-table-footer__info
   display: flex
   padding-inline-end: 24px
+
+.v-data-table-footer__pagination
+  display: flex
+  align-items: center
+
+.v-data-table-footer__page
+  padding: 0 8px

package/lib/labs/VDataTable/VDataTableRows.mjs

@@ -103,7 +103,7 @@ export const VDataTableRows = defineComponent({
             });
           },
           "item": item
-        }, slots), isExpanded(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
+        }, slots), isExpanded(item) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
           item,
           columns: columns.value
         }))]);

package/lib/labs/VDataTable/VDataTableRows.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTableRows.mjs","names":["VDataTableGroupHeaderRow","VDataTableRow","useLocale","useExpanded","useHeaders","useSelection","useGroupBy","defineComponent","useRender","VDataTableRows","name","props","loading","Boolean","String","loadingText","type","default","hideNoData","items","Array","noDataText","rowHeight","Number","emits","event","value","setup","emit","slots","columns","expandOnClick","toggleExpand","isExpanded","isSelected","toggleSelect","toggleGroup","isGroupOpen","t","undefined","length","map","item","index","id"],"sources":["../../../src/labs/VDataTable/VDataTableRows.tsx"],"sourcesContent":["// Components\nimport { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'\nimport { VDataTableRow } from './VDataTableRow'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useGroupBy } from './composables/group'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { DataTableItem, InternalDataTableItem } from './types'\n\nexport const VDataTableRows = defineComponent({\n  name: 'VDataTableRows',\n\n  props: {\n    loading: [Boolean, String],\n    loadingText: {\n      type: String,\n      default: '$vuetify.dataIterator.loadingText',\n    },\n    hideNoData: Boolean,\n    items: {\n      type: Array as PropType<InternalDataTableItem[]>,\n      default: () => ([]),\n    },\n    noDataText: {\n      type: String,\n      default: '$vuetify.noDataText',\n    },\n    rowHeight: Number,\n  },\n\n  emits: {\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { columns } = useHeaders()\n    const { expandOnClick, toggleExpand, isExpanded } = useExpanded()\n    const { isSelected, toggleSelect } = useSelection()\n    const { toggleGroup, isGroupOpen } = useGroupBy()\n    const { t } = useLocale()\n\n    useRender(() => (\n      <>\n        { props.loading ? slots.loading?.() ?? (\n          <VDataTableRow\n            class=\"v-data-table-rows-no-data\"\n            key=\"loading\"\n          >\n            { t(props.loadingText) }\n          </VDataTableRow>\n        ) : undefined }\n\n        { !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? (\n          <VDataTableRow\n            class=\"v-data-table-rows-no-data\"\n            key=\"no-data\"\n          >\n            { t(props.noDataText) }\n          </VDataTableRow>\n        )) }\n\n        { props.items.map((item, index) => {\n          if (item.type === 'group-header') {\n            return slots['group-header'] ? slots['group-header']({\n              index,\n              item,\n              columns: columns.value,\n              isExpanded,\n              toggleExpand,\n              isSelected,\n              toggleSelect,\n              toggleGroup,\n              isGroupOpen,\n            }) : (\n              <VDataTableGroupHeaderRow\n                key={ `group-header_${item.id}` }\n                item={ item }\n                v-slots={ slots }\n              />\n            )\n          }\n\n          return (\n            <>\n              { slots.item ? slots.item({\n                index,\n                item,\n                columns: columns.value,\n                isExpanded,\n                toggleExpand,\n                isSelected,\n                toggleSelect,\n              }) : (\n                <VDataTableRow\n                  key={ `item_${item.value}` }\n                  onClick={ (event: Event) => {\n                    if (expandOnClick.value) {\n                      toggleExpand(item.value)\n                    }\n\n                    emit('click:row', event, { item })\n                  } }\n                  item={ item }\n                  v-slots={ slots }\n                />\n              ) }\n\n              { isExpanded(item.value) && slots['expanded-row']?.({ item, columns: columns.value }) }\n            </>\n          )\n        }) }\n      </>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataTableRows = InstanceType<typeof VDataTableRows>\n"],"mappings":"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"}
+{"version":3,"file":"VDataTableRows.mjs","names":["VDataTableGroupHeaderRow","VDataTableRow","useLocale","useExpanded","useHeaders","useSelection","useGroupBy","defineComponent","useRender","VDataTableRows","name","props","loading","Boolean","String","loadingText","type","default","hideNoData","items","Array","noDataText","rowHeight","Number","emits","event","value","setup","emit","slots","columns","expandOnClick","toggleExpand","isExpanded","isSelected","toggleSelect","toggleGroup","isGroupOpen","t","undefined","length","map","item","index","id"],"sources":["../../../src/labs/VDataTable/VDataTableRows.tsx"],"sourcesContent":["// Components\nimport { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'\nimport { VDataTableRow } from './VDataTableRow'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useGroupBy } from './composables/group'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { DataTableItem, InternalDataTableItem } from './types'\n\nexport const VDataTableRows = defineComponent({\n  name: 'VDataTableRows',\n\n  props: {\n    loading: [Boolean, String],\n    loadingText: {\n      type: String,\n      default: '$vuetify.dataIterator.loadingText',\n    },\n    hideNoData: Boolean,\n    items: {\n      type: Array as PropType<InternalDataTableItem[]>,\n      default: () => ([]),\n    },\n    noDataText: {\n      type: String,\n      default: '$vuetify.noDataText',\n    },\n    rowHeight: Number,\n  },\n\n  emits: {\n    'click:row': (event: Event, value: { item: DataTableItem }) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { columns } = useHeaders()\n    const { expandOnClick, toggleExpand, isExpanded } = useExpanded()\n    const { isSelected, toggleSelect } = useSelection()\n    const { toggleGroup, isGroupOpen } = useGroupBy()\n    const { t } = useLocale()\n\n    useRender(() => (\n      <>\n        { props.loading ? slots.loading?.() ?? (\n          <VDataTableRow\n            class=\"v-data-table-rows-no-data\"\n            key=\"loading\"\n          >\n            { t(props.loadingText) }\n          </VDataTableRow>\n        ) : undefined }\n\n        { !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? (\n          <VDataTableRow\n            class=\"v-data-table-rows-no-data\"\n            key=\"no-data\"\n          >\n            { t(props.noDataText) }\n          </VDataTableRow>\n        )) }\n\n        { props.items.map((item, index) => {\n          if (item.type === 'group-header') {\n            return slots['group-header'] ? slots['group-header']({\n              index,\n              item,\n              columns: columns.value,\n              isExpanded,\n              toggleExpand,\n              isSelected,\n              toggleSelect,\n              toggleGroup,\n              isGroupOpen,\n            }) : (\n              <VDataTableGroupHeaderRow\n                key={ `group-header_${item.id}` }\n                item={ item }\n                v-slots={ slots }\n              />\n            )\n          }\n\n          return (\n            <>\n              { slots.item ? slots.item({\n                index,\n                item,\n                columns: columns.value,\n                isExpanded,\n                toggleExpand,\n                isSelected,\n                toggleSelect,\n              }) : (\n                <VDataTableRow\n                  key={ `item_${item.value}` }\n                  onClick={ (event: Event) => {\n                    if (expandOnClick.value) {\n                      toggleExpand(item.value)\n                    }\n\n                    emit('click:row', event, { item })\n                  } }\n                  item={ item }\n                  v-slots={ slots }\n                />\n              ) }\n\n              { isExpanded(item) && slots['expanded-row']?.({ item, columns: columns.value }) }\n            </>\n          )\n        }) }\n      </>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataTableRows = InstanceType<typeof VDataTableRows>\n"],"mappings":"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"}

package/lib/labs/VDataTable/VDataTableServer.mjs

@@ -4,14 +4,16 @@ import { VTable } from "../../components/VTable/index.mjs";
 import { VDataTableFooter } from "./VDataTableFooter.mjs";
 import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
 import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
+import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
 import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
 import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
-import { createSort, makeDataTableSortProps } from "./composables/sort.mjs";
+import { useOptions } from "./composables/options.mjs";
 import { createPagination, makeDataTablePaginateProps } from "./composables/paginate.mjs";
 import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
-import { useOptions } from "./composables/options.mjs";
-import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
+import { createSort, makeDataTableSortProps } from "./composables/sort.mjs"; // Utilities
 import { provide, toRef } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
 import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
@@ -31,7 +33,8 @@ export const VDataTableServer = defineComponent({
     ...makeDataTableItemProps(),
     ...makeDataTableSelectProps(),
     ...makeDataTableSortProps(),
-    ...makeDataTablePaginateProps()
+    ...makeDataTablePaginateProps(),
+    ...makeDataTableGroupProps()
   },
   emits: {
     'update:modelValue': value => true,
@@ -40,6 +43,7 @@ export const VDataTableServer = defineComponent({
     'update:sortBy': sortBy => true,
     'update:options': options => true,
     'update:expanded': options => true,
+    'update:groupBy': value => true,
     'click:row': (event, value) => true
   },
   setup(props, _ref) {
@@ -47,10 +51,12 @@ export const VDataTableServer = defineComponent({
       emit,
       slots
     } = _ref;
+    const groupBy = useProxiedModel(props, 'groupBy');
     createExpanded(props);
     const {
       columns
     } = createHeaders(props, {
+      groupBy,
       showSelect: toRef(props, 'showSelect'),
       showExpand: toRef(props, 'showExpand')
     });
@@ -61,21 +67,22 @@ export const VDataTableServer = defineComponent({
       sortBy,
       toggleSort
     } = createSort(props);
+    const {
+      opened
+    } = createGroupBy(props, groupBy, sortBy);
     const {
       page,
-      itemsPerPage,
-      startIndex,
-      stopIndex,
-      pageCount
+      itemsPerPage
     } = createPagination(props, items);
+    const {
+      flatItems
+    } = useGroupedItems(items, groupBy, opened);
     createSelection(props, items);
     useOptions({
       page,
       itemsPerPage,
       sortBy,
-      startIndex,
-      stopIndex,
-      pageCount
+      groupBy
     });
     provide('v-data-table', {
       toggleSort,
@@ -111,7 +118,7 @@ export const VDataTableServer = defineComponent({
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots.body ? slots.body() : _createVNode(VDataTableRows, {
-          "items": items.value,
+          "items": flatItems.value,
           "onClick:row": (event, value) => emit('click:row', event, value)
         }, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
       }),