vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VDataTable/VDataTableFooter.sass

@@ -2,34 +2,35 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-data-table-footer
-  display: flex
-  align-items: center
-  flex-wrap: wrap
-  padding: $data-table-footer-padding
-  justify-content: flex-end
+@include tools.layer('components')
+  .v-data-table-footer
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+    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
+    &__paginationz
+      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

package/lib/components/VDataTable/VDataTableHeaders.mjs

@@ -2,13 +2,17 @@ import { resolveDirective as _resolveDirective, Fragment as _Fragment, mergeProp
 // Components
 import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs";
-import { VIcon } from "../VIcon/index.mjs"; // Composables
+import { VChip } from "../VChip/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
+import { VSelect } from "../VSelect/index.mjs"; // Composables
 import { useHeaders } from "./composables/headers.mjs";
 import { useSelection } from "./composables/select.mjs";
 import { useSort } from "./composables/sort.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
+import { makeDisplayProps, useDisplay } from "../../composables/display.mjs";
 import { IconValue } from "../../composables/icons.mjs";
-import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs"; // Utilities
+import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
+import { useLocale } from "../../composables/locale.mjs"; // Utilities
 import { computed, mergeProps } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDataTableHeadersProps = propsFactory({
@@ -26,6 +30,7 @@ export const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object
   },
+  ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
 export const VDataTableHeaders = genericComponent()({
@@ -35,6 +40,9 @@ export const VDataTableHeaders = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       toggleSort,
       sortBy,
@@ -70,6 +78,10 @@ export const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
@@ -81,6 +93,9 @@ export const VDataTableHeaders = genericComponent()({
       selectAll,
       getSortIcon
     }));
+    const headerCellClasses = computed(() => ['v-data-table__th', {
+      'v-data-table__th--sticky': props.sticky
+    }, displayClasses.value, loaderClasses.value]);
     const VDataTableHeaderCell = _ref2 => {
       let {
         column,
@@ -92,12 +107,11 @@ export const VDataTableHeaders = genericComponent()({
       return _createVNode(VDataTableColumn, _mergeProps({
         "tag": "th",
         "align": column.align,
-        "class": ['v-data-table__th', {
+        "class": [{
           '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],
+          'v-data-table__th--fixed': column.fixed
+        }, ...headerCellClasses.value],
         "style": {
           width: convertToUnit(column.width),
           minWidth: convertToUnit(column.minWidth),
@@ -146,8 +160,53 @@ export const VDataTableHeaders = genericComponent()({
         }
       });
     };
+    const VDataTableMobileHeaderCell = () => {
+      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
+      const displayItems = computed(() => {
+        return columns.value.filter(column => column?.sortable);
+      });
+      const appendIcon = computed(() => {
+        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
+      });
+      return _createVNode(VDataTableColumn, _mergeProps({
+        "tag": "th",
+        "class": [...headerCellClasses.value],
+        "colspan": headers.value.length + 1
+      }, headerProps), {
+        default: () => [_createVNode("div", {
+          "class": "v-data-table-header__content"
+        }, [_createVNode(VSelect, {
+          "chips": true,
+          "class": "v-data-table__td-sort-select",
+          "clearable": true,
+          "density": "default",
+          "items": displayItems.value,
+          "label": t('$vuetify.dataTable.sortBy'),
+          "multiple": props.multiSort,
+          "variant": "underlined",
+          "onClick:clear": () => sortBy.value = [],
+          "appendIcon": appendIcon.value,
+          "onClick:append": () => selectAll(!allSelected.value)
+        }, {
+          ...slots,
+          chip: props => _createVNode(VChip, {
+            "onClick": props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined,
+            "onMousedown": e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }, {
+            default: () => [props.item.title, _createVNode(VIcon, {
+              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "icon": getSortIcon(props.item.raw),
+              "size": "small"
+            }, null)]
+          })
+        })])]
+      });
+    };
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
+      return mobile.value ? _createVNode("tr", null, [_createVNode(VDataTableMobileHeaderCell, null, null)]) : _createVNode(_Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => _createVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y

package/lib/components/VDataTable/VDataTableHeaders.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VIcon","useHeaders","useSelection","useSort","useBackgroundColor","IconValue","LoaderSlot","makeLoaderProps","useLoader","computed","mergeProps","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","headerProps","Object","VDataTableHeaders","name","props","setup","_ref","slots","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","slotProps","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","_mergeProps","align","sortable","width","minWidth","maxWidth","colspan","rowspan","nowrap","lastFixed","columnSlotName","columnSlotProps","title","findIndex","_Fragment","map","row","loading","length","loader"],"sources":["../../../src/components/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\n\n// Utilities\nimport { computed, mergeProps } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, PropType, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n  headers: InternalDataTableHeader[][]\n  columns: InternalDataTableHeader[]\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n}\n\ntype VDataTableHeaderCellColumnSlotProps = {\n  column: InternalDataTableHeader\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n  headers: HeadersSlotProps\n  loader: LoaderSlotProps\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n  color: String,\n  sticky: Boolean,\n  multiSort: Boolean,\n  sortAscIcon: {\n    type: IconValue,\n    default: '$sortAsc',\n  },\n  sortDescIcon: {\n    type: IconValue,\n    default: '$sortDesc',\n  },\n  headerProps: {\n    type: Object as PropType<Record<string, any>>,\n  },\n\n  ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: makeVDataTableHeadersProps(),\n\n  setup (props, { slots }) {\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { someSelected, allSelected, selectAll, showSelectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {\n      if (!props.sticky && !column.fixed) return undefined\n\n      return {\n        position: 'sticky',\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (column: InternalDataTableHeader) {\n      const item = sortBy.value.find(item => item.key === column.key)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const slotProps = computed(() => ({\n      headers: headers.value,\n      columns: columns.value,\n      toggleSort,\n      isSorted,\n      sortBy: sortBy.value,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      selectAll,\n      getSortIcon,\n    } satisfies HeadersSlotProps))\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            'v-data-table__th',\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted(column),\n              'v-data-table__th--fixed': column.fixed,\n              'v-data-table__th--sticky': props.sticky,\n            },\n            loaderClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.minWidth),\n            maxWidth: convertToUnit(column.maxWidth),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\n          nowrap={ column.nowrap }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n          { ...headerProps }\n        >\n          {{\n            default: () => {\n              const columnSlotName = `header.${column.key}` as const\n              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                getSortIcon,\n              }\n\n              if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                ))\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column) }\n                    />\n                  )}\n                  { props.multiSort && isSorted(column) && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                    >\n                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }\n                    </div>\n                  )}\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => {\n      return (\n        <>\n          { slots.headers\n            ? slots.headers(slotProps.value)\n            : headers.value.map((row, y) => (\n              <tr>\n                { row.map((column, x) => (\n                  <VDataTableHeaderCell column={ column } x={ x } y={ y } />\n                ))}\n              </tr>\n            ))}\n\n          { props.loading && (\n            <tr class=\"v-data-table-progress\">\n              <th colspan={ columns.value.length }>\n                <LoaderSlot\n                  name=\"v-data-table-progress\"\n                  absolute\n                  active\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  v-slots={{ default: slots.loader }}\n                />\n              </th>\n            </tr>\n          )}\n        </>\n      )\n    })\n  },\n})\n\nexport type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VChip","VIcon","VSelect","useHeaders","useSelection","useSort","useBackgroundColor","makeDisplayProps","useDisplay","IconValue","LoaderSlot","makeLoaderProps","useLoader","useLocale","computed","mergeProps","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","headerProps","Object","VDataTableHeaders","name","props","setup","_ref","slots","t","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","displayClasses","mobile","slotProps","headerCellClasses","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","_mergeProps","align","sortable","width","minWidth","maxWidth","colspan","rowspan","nowrap","lastFixed","columnSlotName","columnSlotProps","title","findIndex","VDataTableMobileHeaderCell","displayItems","filter","appendIcon","length","onClick:clear","onClick:append","chip","raw","e","preventDefault","stopPropagation","_Fragment","map","row","loading","loader"],"sources":["../../../src/components/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VChip } from '@/components/VChip'\nimport { VIcon } from '@/components/VIcon'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, mergeProps } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, PropType, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { ItemProps } from '@/composables/list-items'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n  headers: InternalDataTableHeader[][]\n  columns: InternalDataTableHeader[]\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n}\n\nexport type VDataTableHeaderCellColumnSlotProps = {\n  column: InternalDataTableHeader\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n  headers: HeadersSlotProps\n  loader: LoaderSlotProps\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n  color: String,\n  sticky: Boolean,\n  multiSort: Boolean,\n  sortAscIcon: {\n    type: IconValue,\n    default: '$sortAsc',\n  },\n  sortDescIcon: {\n    type: IconValue,\n    default: '$sortDesc',\n  },\n  headerProps: {\n    type: Object as PropType<Record<string, any>>,\n  },\n\n  ...makeDisplayProps(),\n  ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: makeVDataTableHeadersProps(),\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { someSelected, allSelected, selectAll, showSelectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {\n      if (!props.sticky && !column.fixed) return undefined\n\n      return {\n        position: 'sticky',\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (column: InternalDataTableHeader) {\n      const item = sortBy.value.find(item => item.key === column.key)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const { displayClasses, mobile } = useDisplay(props)\n\n    const slotProps = computed(() => ({\n      headers: headers.value,\n      columns: columns.value,\n      toggleSort,\n      isSorted,\n      sortBy: sortBy.value,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      selectAll,\n      getSortIcon,\n    } satisfies HeadersSlotProps))\n\n    const headerCellClasses = computed(() => ([\n      'v-data-table__th',\n      {\n        'v-data-table__th--sticky': props.sticky,\n      },\n      displayClasses.value,\n      loaderClasses.value,\n    ]))\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted(column),\n              'v-data-table__th--fixed': column.fixed,\n            },\n            ...headerCellClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.minWidth),\n            maxWidth: convertToUnit(column.maxWidth),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\n          nowrap={ column.nowrap }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n          { ...headerProps }\n        >\n          {{\n            default: () => {\n              const columnSlotName = `header.${column.key}` as const\n              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                getSortIcon,\n              }\n\n              if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                ))\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column) }\n                    />\n                  )}\n                  { props.multiSort && isSorted(column) && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                    >\n                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }\n                    </div>\n                  )}\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    const VDataTableMobileHeaderCell = () => {\n      const headerProps = mergeProps(props.headerProps ?? {} ?? {})\n\n      const displayItems = computed<ItemProps['items']>(() => {\n        return columns.value.filter(column => column?.sortable)\n      })\n\n      const appendIcon = computed(() => {\n        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff'\n      })\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          class={[\n            ...headerCellClasses.value,\n          ]}\n          colspan={ headers.value.length + 1 }\n          { ...headerProps }\n        >\n          <div class=\"v-data-table-header__content\">\n            <VSelect\n              chips\n              class=\"v-data-table__td-sort-select\"\n              clearable\n              density=\"default\"\n              items={ displayItems.value }\n              label={ t('$vuetify.dataTable.sortBy') }\n              multiple={ props.multiSort }\n              variant=\"underlined\"\n              onClick:clear={ () => sortBy.value = [] }\n              appendIcon={ appendIcon.value }\n              onClick:append={ () => selectAll(!allSelected.value) }\n            >\n              {{\n                ...slots,\n                chip: props => (\n                  <VChip\n                    onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }\n                    onMousedown={ (e: MouseEvent) => {\n                      e.preventDefault()\n                      e.stopPropagation()\n                    }}\n                  >\n                    { props.item.title }\n                    <VIcon\n                      class={[\n                        'v-data-table__td-sort-icon',\n                        isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',\n                      ]}\n                      icon={ getSortIcon(props.item.raw) }\n                      size=\"small\"\n                    />\n                  </VChip>\n                ),\n              }}\n            </VSelect>\n          </div>\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => {\n      return mobile.value ? (\n        <tr>\n          <VDataTableMobileHeaderCell />\n        </tr>\n      ) : (\n        <>\n          { slots.headers\n            ? slots.headers(slotProps.value)\n            : headers.value.map((row, y) => (\n              <tr>\n                { row.map((column, x) => (\n                  <VDataTableHeaderCell column={ column } x={ x } y={ y } />\n                ))}\n              </tr>\n            ))}\n\n          { props.loading && (\n            <tr class=\"v-data-table-progress\">\n              <th colspan={ columns.value.length }>\n                <LoaderSlot\n                  name=\"v-data-table-progress\"\n                  absolute\n                  active\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  v-slots={{ default: slots.loader }}\n                />\n              </th>\n            </tr>\n          )}\n        </>\n      )\n    })\n  },\n})\n\nexport type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/VDataTableRow.mjs

@@ -1,11 +1,13 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Components
+import { VDataTableColumn } from "./VDataTableColumn.mjs";
 import { VBtn } from "../VBtn/index.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs"; // Composables
 import { useExpanded } from "./composables/expand.mjs";
 import { useHeaders } from "./composables/headers.mjs";
 import { useSelection } from "./composables/select.mjs";
-import { VDataTableColumn } from "./VDataTableColumn.mjs"; // Utilities
+import { useSort } from "./composables/sort.mjs";
+import { makeDisplayProps, useDisplay } from "../../composables/display.mjs"; // Utilities
 import { toDisplayString, withModifiers } from 'vue';
 import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDataTableRowProps = propsFactory({
@@ -14,7 +16,8 @@ export const makeVDataTableRowProps = propsFactory({
   cellProps: [Object, Function],
   onClick: EventProp(),
   onContextmenu: EventProp(),
-  onDblclick: EventProp()
+  onDblclick: EventProp(),
+  ...makeDisplayProps()
 }, 'VDataTableRow');
 export const VDataTableRow = genericComponent()({
   name: 'VDataTableRow',
@@ -23,27 +26,40 @@ export const VDataTableRow = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props, 'v-data-table__tr');
     const {
       isSelected,
-      toggleSelect
+      toggleSelect,
+      someSelected,
+      allSelected,
+      selectAll
     } = useSelection();
     const {
       isExpanded,
       toggleExpand
     } = useExpanded();
+    const {
+      toggleSort,
+      sortBy,
+      isSorted
+    } = useSort();
     const {
       columns
     } = useHeaders();
     useRender(() => _createVNode("tr", {
       "class": ['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }],
+      }, displayClasses.value],
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
     }, [props.item && columns.value.map((column, i) => {
       const item = props.item;
       const slotName = `item.${column.key}`;
+      const headerSlotName = `header.${column.key}`;
       const slotProps = {
         index: props.index,
         item: item.raw,
@@ -55,6 +71,16 @@ export const VDataTableRow = genericComponent()({
         isExpanded,
         toggleExpand
       };
+      const columnSlotProps = {
+        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,
@@ -70,16 +96,20 @@ export const VDataTableRow = genericComponent()({
       }) : column.cellProps;
       return _createVNode(VDataTableColumn, _mergeProps({
         "align": column.align,
+        "class": {
+          'v-data-table__td--expanded-row': column.key === 'data-table-expand',
+          'v-data-table__td--select-row': column.key === 'data-table-select'
+        },
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
         "lastFixed": column.lastFixed,
+        "maxWidth": !mobile.value ? column.maxWidth : undefined,
         "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
-        "width": column.width,
-        "maxWidth": column.maxWidth,
-        "nowrap": column.nowrap
+        "nowrap": column.nowrap,
+        "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
         default: () => {
-          if (slots[slotName]) 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) ?? _createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
@@ -95,7 +125,12 @@ export const VDataTableRow = genericComponent()({
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
-          return toDisplayString(slotProps.value);
+          const displayValue = toDisplayString(slotProps.value);
+          return !mobile.value ? displayValue : _createVNode(_Fragment, null, [_createVNode("div", {
+            "class": "v-data-table__td-title"
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), _createVNode("div", {
+            "class": "v-data-table__td-value"
+          }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
       });
     })]));

package/lib/components/VDataTable/VDataTableRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDataTableRow.mjs","names":["VBtn","VCheckboxBtn","useExpanded","useHeaders","useSelection","VDataTableColumn","toDisplayString","withModifiers","EventProp","genericComponent","getObjectValueByPath","propsFactory","useRender","makeVDataTableRowProps","index","Number","item","Object","cellProps","Function","onClick","onContextmenu","onDblclick","VDataTableRow","name","props","setup","_ref","slots","isSelected","toggleSelect","isExpanded","toggleExpand","columns","_createVNode","value","map","column","i","slotName","key","slotProps","raw","internalItem","columnCellProps","_mergeProps","align","fixed","fixedOffset","lastFixed","width","maxWidth","nowrap","default","selectable"],"sources":["../../../src/components/VDataTable/VDataTableRow.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { VDataTableColumn } from './VDataTableColumn'\n\n// Utilities\nimport { toDisplayString, withModifiers } from 'vue'\nimport { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { CellProps, DataTableItem, ItemKeySlot } from './types'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowSlots<T> = {\n  'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>\n  'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>\n} & { [key: `item.${string}`]: ItemKeySlot<T> }\n\nexport const makeVDataTableRowProps = propsFactory({\n  index: Number,\n  item: Object as PropType<DataTableItem>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n  onClick: EventProp<[MouseEvent]>(),\n  onContextmenu: EventProp<[MouseEvent]>(),\n  onDblclick: EventProp<[MouseEvent]>(),\n}, 'VDataTableRow')\n\nexport const VDataTableRow = genericComponent<new <T>(\n  props: {\n    item?: DataTableItem<T>\n    cellProps?: CellProps<T>\n  },\n  slots: VDataTableRowSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRow',\n\n  props: makeVDataTableRowProps(),\n\n  setup (props, { slots }) {\n    const { isSelected, toggleSelect } = useSelection()\n    const { isExpanded, toggleExpand } = useExpanded()\n    const { columns } = useHeaders()\n\n    useRender(() => (\n      <tr\n        class={[\n          'v-data-table__tr',\n          {\n            'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick),\n          },\n        ]}\n        onClick={ props.onClick as any }\n        onContextmenu={ props.onContextmenu as any }\n        onDblclick={ props.onDblclick as any }\n      >\n        { props.item && columns.value.map((column, i) => {\n          const item = props.item!\n          const slotName = `item.${column.key}` as const\n          const slotProps = {\n            index: props.index!,\n            item: item.raw,\n            internalItem: item,\n            value: getObjectValueByPath(item.columns, column.key),\n            column,\n            isSelected,\n            toggleSelect,\n            isExpanded,\n            toggleExpand,\n          } satisfies ItemKeySlot<any>\n\n          const cellProps = typeof props.cellProps === 'function'\n            ? props.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n              column,\n            })\n            : props.cellProps\n          const columnCellProps = typeof column.cellProps === 'function'\n            ? column.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n            })\n            : column.cellProps\n\n          return (\n            <VDataTableColumn\n              align={ column.align }\n              fixed={ column.fixed }\n              fixedOffset={ column.fixedOffset }\n              lastFixed={ column.lastFixed }\n              noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }\n              width={ column.width }\n              maxWidth={ column.maxWidth }\n              nowrap={ column.nowrap }\n              { ...cellProps }\n              { ...columnCellProps }\n            >\n              {{\n                default: () => {\n                  if (slots[slotName]) return slots[slotName]!(slotProps)\n\n                  if (column.key === 'data-table-select') {\n                    return slots['item.data-table-select']?.(slotProps) ?? (\n                      <VCheckboxBtn\n                        disabled={ !item.selectable }\n                        modelValue={ isSelected([item]) }\n                        onClick={ withModifiers(() => toggleSelect(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  if (column.key === 'data-table-expand') {\n                    return slots['item.data-table-expand']?.(slotProps) ?? (\n                      <VBtn\n                        icon={ isExpanded(item) ? '$collapse' : '$expand' }\n                        size=\"small\"\n                        variant=\"text\"\n                        onClick={ withModifiers(() => toggleExpand(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  return toDisplayString(slotProps.value)\n                },\n              }}\n            </VDataTableColumn>\n          )\n        })}\n      </tr>\n    ))\n  },\n})\n\nexport type VDataTableRow = InstanceType<typeof VDataTableRow>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableRow.mjs","names":["VDataTableColumn","VBtn","VCheckboxBtn","useExpanded","useHeaders","useSelection","useSort","makeDisplayProps","useDisplay","toDisplayString","withModifiers","EventProp","genericComponent","getObjectValueByPath","propsFactory","useRender","makeVDataTableRowProps","index","Number","item","Object","cellProps","Function","onClick","onContextmenu","onDblclick","VDataTableRow","name","props","setup","_ref","slots","displayClasses","mobile","isSelected","toggleSelect","someSelected","allSelected","selectAll","isExpanded","toggleExpand","toggleSort","sortBy","isSorted","columns","_createVNode","value","map","column","i","slotName","key","headerSlotName","slotProps","raw","internalItem","columnSlotProps","getSortIcon","columnCellProps","_mergeProps","align","fixed","fixedOffset","lastFixed","maxWidth","undefined","nowrap","width","default","selectable","displayValue","_Fragment","title"],"sources":["../../../src/components/VDataTable/VDataTableRow.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VBtn } from '@/components/VBtn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\n\n// Utilities\nimport { toDisplayString, withModifiers } from 'vue'\nimport { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { CellProps, DataTableItem, ItemKeySlot } from './types'\nimport type { VDataTableHeaderCellColumnSlotProps } from './VDataTableHeaders'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowSlots<T> = {\n  'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>\n  'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>\n  'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & {\n  [key: `item.${string}`]: ItemKeySlot<T>\n  [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps\n}\n\nexport const makeVDataTableRowProps = propsFactory({\n  index: Number,\n  item: Object as PropType<DataTableItem>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n  onClick: EventProp<[MouseEvent]>(),\n  onContextmenu: EventProp<[MouseEvent]>(),\n  onDblclick: EventProp<[MouseEvent]>(),\n\n  ...makeDisplayProps(),\n}, 'VDataTableRow')\n\nexport const VDataTableRow = genericComponent<new <T>(\n  props: {\n    item?: DataTableItem<T>\n    cellProps?: CellProps<T>\n  },\n  slots: VDataTableRowSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRow',\n\n  props: makeVDataTableRowProps(),\n\n  setup (props, { slots }) {\n    const { displayClasses, mobile } = useDisplay(props, 'v-data-table__tr')\n    const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection()\n    const { isExpanded, toggleExpand } = useExpanded()\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { columns } = useHeaders()\n\n    useRender(() => (\n      <tr\n        class={[\n          'v-data-table__tr',\n          {\n            'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick),\n          },\n          displayClasses.value,\n        ]}\n        onClick={ props.onClick as any }\n        onContextmenu={ props.onContextmenu as any }\n        onDblclick={ props.onDblclick as any }\n      >\n        { props.item && columns.value.map((column, i) => {\n          const item = props.item!\n          const slotName = `item.${column.key}` as const\n          const headerSlotName = `header.${column.key}` as const\n          const slotProps = {\n            index: props.index!,\n            item: item.raw,\n            internalItem: item,\n            value: getObjectValueByPath(item.columns, column.key),\n            column,\n            isSelected,\n            toggleSelect,\n            isExpanded,\n            toggleExpand,\n          } satisfies ItemKeySlot<any>\n\n          const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n            column,\n            selectAll,\n            isSorted,\n            toggleSort,\n            sortBy: sortBy.value,\n            someSelected: someSelected.value,\n            allSelected: allSelected.value,\n            getSortIcon: () => '',\n          }\n\n          const cellProps = typeof props.cellProps === 'function'\n            ? props.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n              column,\n            })\n            : props.cellProps\n          const columnCellProps = typeof column.cellProps === 'function'\n            ? column.cellProps({\n              index: slotProps.index,\n              item: slotProps.item,\n              internalItem: slotProps.internalItem,\n              value: slotProps.value,\n            })\n            : column.cellProps\n\n          return (\n            <VDataTableColumn\n              align={ column.align }\n              class={{\n                'v-data-table__td--expanded-row': column.key === 'data-table-expand',\n                'v-data-table__td--select-row': column.key === 'data-table-select',\n              }}\n              fixed={ column.fixed }\n              fixedOffset={ column.fixedOffset }\n              lastFixed={ column.lastFixed }\n              maxWidth={ !mobile.value ? column.maxWidth : undefined }\n              noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }\n              nowrap={ column.nowrap }\n              width={ !mobile.value ? column.width : undefined }\n              { ...cellProps }\n              { ...columnCellProps }\n            >\n              {{\n                default: () => {\n                  if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps)\n\n                  if (column.key === 'data-table-select') {\n                    return slots['item.data-table-select']?.(slotProps) ?? (\n                      <VCheckboxBtn\n                        disabled={ !item.selectable }\n                        modelValue={ isSelected([item]) }\n                        onClick={ withModifiers(() => toggleSelect(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  if (column.key === 'data-table-expand') {\n                    return slots['item.data-table-expand']?.(slotProps) ?? (\n                      <VBtn\n                        icon={ isExpanded(item) ? '$collapse' : '$expand' }\n                        size=\"small\"\n                        variant=\"text\"\n                        onClick={ withModifiers(() => toggleExpand(item), ['stop']) }\n                      />\n                    )\n                  }\n\n                  const displayValue = toDisplayString(slotProps.value)\n\n                  return !mobile.value ? displayValue : (\n                    <>\n                      <div class=\"v-data-table__td-title\">\n                        { slots[headerSlotName]?.(columnSlotProps) ?? column.title }\n                      </div>\n\n                      <div class=\"v-data-table__td-value\">\n                        { slots[slotName]?.(slotProps) ?? displayValue }\n                      </div>\n                    </>\n                  )\n                },\n              }}\n            </VDataTableColumn>\n          )\n        })}\n      </tr>\n    ))\n  },\n})\n\nexport type VDataTableRow = InstanceType<typeof VDataTableRow>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/VDataTableRows.mjs

@@ -6,6 +6,7 @@ import { useExpanded } from "./composables/expand.mjs";
 import { useGroupBy } from "./composables/group.mjs";
 import { useHeaders } from "./composables/headers.mjs";
 import { useSelection } from "./composables/select.mjs";
+import { makeDisplayProps, useDisplay } from "../../composables/display.mjs";
 import { useLocale } from "../../composables/locale.mjs"; // Utilities
 import { Fragment, mergeProps } from 'vue';
 import { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from "../../util/index.mjs"; // Types
@@ -25,7 +26,8 @@ export const makeVDataTableRowsProps = propsFactory({
     default: '$vuetify.noDataText'
   },
   rowProps: [Object, Function],
-  cellProps: [Object, Function]
+  cellProps: [Object, Function],
+  ...makeDisplayProps()
 }, 'VDataTableRows');
 export const VDataTableRows = genericComponent()({
   name: 'VDataTableRows',
@@ -55,6 +57,9 @@ export const VDataTableRows = genericComponent()({
     const {
       t
     } = useLocale();
+    const {
+      mobile
+    } = useDisplay(props);
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
         return _createVNode("tr", {
@@ -109,7 +114,8 @@ export const VDataTableRows = genericComponent()({
             } : undefined,
             index,
             item,
-            cellProps: props.cellProps
+            cellProps: props.cellProps,
+            mobile: mobile.value
           }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
             item: slotProps.item,
             index: slotProps.index,

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

@@ -1 +1 @@
-{"version":3,"file":"VDataTableRows.mjs","names":["VDataTableGroupHeaderRow","VDataTableRow","useExpanded","useGroupBy","useHeaders","useSelection","useLocale","Fragment","mergeProps","genericComponent","getPrefixedEventHandlers","propsFactory","useRender","makeVDataTableRowsProps","loading","Boolean","String","loadingText","type","default","hideNoData","items","Array","noDataText","rowProps","Object","Function","cellProps","VDataTableRows","name","inheritAttrs","props","setup","_ref","attrs","slots","columns","expandOnClick","toggleExpand","isExpanded","isSelected","toggleSelect","toggleGroup","isGroupOpen","t","length","_createVNode","value","_Fragment","map","item","index","slotProps","_mergeProps","id","raw","internalItem","itemSlotProps","key","onClick","undefined"],"sources":["../../../src/components/VDataTable/VDataTableRows.tsx"],"sourcesContent":["// Components\nimport { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'\nimport { VDataTableRow } from './VDataTableRow'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useGroupBy } from './composables/group'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { Fragment, mergeProps } from 'vue'\nimport { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { Group } from './composables/group'\nimport type { CellProps, DataTableItem, GroupHeaderSlot, ItemSlot, RowProps } from './types'\nimport type { VDataTableGroupHeaderRowSlots } from './VDataTableGroupHeaderRow'\nimport type { VDataTableRowSlots } from './VDataTableRow'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableRowSlots<T> & {\n  item: ItemSlot<T> & { props: Record<string, any> }\n  loading: never\n  'group-header': GroupHeaderSlot\n  'no-data': never\n  'expanded-row': ItemSlot<T>\n}\n\nexport const makeVDataTableRowsProps = propsFactory({\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<readonly (DataTableItem | Group)[]>,\n    default: () => ([]),\n  },\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  rowProps: [Object, Function] as PropType<RowProps<any>>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n}, 'VDataTableRows')\n\nexport const VDataTableRows = genericComponent<new <T>(\n  props: {\n    items?: readonly (DataTableItem<T> | Group<T>)[]\n  },\n  slots: VDataTableRowsSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRows',\n\n  inheritAttrs: false,\n\n  props: makeVDataTableRowsProps(),\n\n  setup (props, { attrs, 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      if (props.loading && (!props.items.length || slots.loading)) {\n        return (\n          <tr\n            class=\"v-data-table-rows-loading\"\n            key=\"loading\"\n          >\n            <td colspan={ columns.value.length }>\n              { slots.loading?.() ?? t(props.loadingText) }\n            </td>\n          </tr>\n        )\n      }\n\n      if (!props.loading && !props.items.length && !props.hideNoData) {\n        return (\n          <tr\n            class=\"v-data-table-rows-no-data\"\n            key=\"no-data\"\n          >\n            <td colspan={ columns.value.length }>\n              { slots['no-data']?.() ?? t(props.noDataText) }\n            </td>\n          </tr>\n        )\n      }\n\n      return (\n        <>\n          { props.items.map((item, index) => {\n            if (item.type === 'group') {\n              const slotProps = {\n                index,\n                item,\n                columns: columns.value,\n                isExpanded,\n                toggleExpand,\n                isSelected,\n                toggleSelect,\n                toggleGroup,\n                isGroupOpen,\n              } satisfies GroupHeaderSlot\n\n              return slots['group-header'] ? slots['group-header'](slotProps) : (\n                <VDataTableGroupHeaderRow\n                  key={ `group-header_${item.id}` }\n                  item={ item }\n                  { ...getPrefixedEventHandlers(attrs, ':group-header', () => slotProps) }\n                  v-slots={ slots }\n                />\n              )\n            }\n\n            const slotProps = {\n              index,\n              item: item.raw,\n              internalItem: item,\n              columns: columns.value,\n              isExpanded,\n              toggleExpand,\n              isSelected,\n              toggleSelect,\n            } satisfies ItemSlot<any>\n\n            const itemSlotProps = {\n              ...slotProps,\n              props: mergeProps(\n                {\n                  key: `item_${item.key ?? item.index}`,\n                  onClick: expandOnClick.value ? () => {\n                    toggleExpand(item)\n                  } : undefined,\n                  index,\n                  item,\n                  cellProps: props.cellProps,\n                },\n                getPrefixedEventHandlers(attrs, ':row', () => slotProps),\n                typeof props.rowProps === 'function'\n                  ? props.rowProps({\n                    item: slotProps.item,\n                    index: slotProps.index,\n                    internalItem: slotProps.internalItem,\n                  })\n                  : props.rowProps,\n              ),\n            }\n\n            return (\n              <Fragment key={ itemSlotProps.props.key as string }>\n                { slots.item ? slots.item(itemSlotProps) : (\n                  <VDataTableRow\n                    { ...itemSlotProps.props }\n                    v-slots={ slots }\n                  />\n                )}\n\n                { isExpanded(item) && slots['expanded-row']?.(slotProps) }\n              </Fragment>\n            )\n          })}\n        </>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDataTableRows = InstanceType<typeof VDataTableRows>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataTableRows.mjs","names":["VDataTableGroupHeaderRow","VDataTableRow","useExpanded","useGroupBy","useHeaders","useSelection","makeDisplayProps","useDisplay","useLocale","Fragment","mergeProps","genericComponent","getPrefixedEventHandlers","propsFactory","useRender","makeVDataTableRowsProps","loading","Boolean","String","loadingText","type","default","hideNoData","items","Array","noDataText","rowProps","Object","Function","cellProps","VDataTableRows","name","inheritAttrs","props","setup","_ref","attrs","slots","columns","expandOnClick","toggleExpand","isExpanded","isSelected","toggleSelect","toggleGroup","isGroupOpen","t","mobile","length","_createVNode","value","_Fragment","map","item","index","slotProps","_mergeProps","id","raw","internalItem","itemSlotProps","key","onClick","undefined"],"sources":["../../../src/components/VDataTable/VDataTableRows.tsx"],"sourcesContent":["// Components\nimport { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'\nimport { VDataTableRow } from './VDataTableRow'\n\n// Composables\nimport { useExpanded } from './composables/expand'\nimport { useGroupBy } from './composables/group'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { Fragment, mergeProps } from 'vue'\nimport { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { Group } from './composables/group'\nimport type { CellProps, DataTableItem, GroupHeaderSlot, ItemSlot, RowProps } from './types'\nimport type { VDataTableGroupHeaderRowSlots } from './VDataTableGroupHeaderRow'\nimport type { VDataTableRowSlots } from './VDataTableRow'\nimport type { GenericProps } from '@/util'\n\nexport type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableRowSlots<T> & {\n  item: ItemSlot<T> & { props: Record<string, any> }\n  loading: never\n  'group-header': GroupHeaderSlot\n  'no-data': never\n  'expanded-row': ItemSlot<T>\n}\n\nexport const makeVDataTableRowsProps = propsFactory({\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<readonly (DataTableItem | Group)[]>,\n    default: () => ([]),\n  },\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  rowProps: [Object, Function] as PropType<RowProps<any>>,\n  cellProps: [Object, Function] as PropType<CellProps<any>>,\n\n  ...makeDisplayProps(),\n}, 'VDataTableRows')\n\nexport const VDataTableRows = genericComponent<new <T>(\n  props: {\n    items?: readonly (DataTableItem<T> | Group<T>)[]\n  },\n  slots: VDataTableRowsSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableRows',\n\n  inheritAttrs: false,\n\n  props: makeVDataTableRowsProps(),\n\n  setup (props, { attrs, 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    const { mobile } = useDisplay(props)\n\n    useRender(() => {\n      if (props.loading && (!props.items.length || slots.loading)) {\n        return (\n          <tr\n            class=\"v-data-table-rows-loading\"\n            key=\"loading\"\n          >\n            <td colspan={ columns.value.length }>\n              { slots.loading?.() ?? t(props.loadingText) }\n            </td>\n          </tr>\n        )\n      }\n\n      if (!props.loading && !props.items.length && !props.hideNoData) {\n        return (\n          <tr\n            class=\"v-data-table-rows-no-data\"\n            key=\"no-data\"\n          >\n            <td colspan={ columns.value.length }>\n              { slots['no-data']?.() ?? t(props.noDataText) }\n            </td>\n          </tr>\n        )\n      }\n\n      return (\n        <>\n          { props.items.map((item, index) => {\n            if (item.type === 'group') {\n              const slotProps = {\n                index,\n                item,\n                columns: columns.value,\n                isExpanded,\n                toggleExpand,\n                isSelected,\n                toggleSelect,\n                toggleGroup,\n                isGroupOpen,\n              } satisfies GroupHeaderSlot\n\n              return slots['group-header'] ? slots['group-header'](slotProps) : (\n                <VDataTableGroupHeaderRow\n                  key={ `group-header_${item.id}` }\n                  item={ item }\n                  { ...getPrefixedEventHandlers(attrs, ':group-header', () => slotProps) }\n                  v-slots={ slots }\n                />\n              )\n            }\n\n            const slotProps = {\n              index,\n              item: item.raw,\n              internalItem: item,\n              columns: columns.value,\n              isExpanded,\n              toggleExpand,\n              isSelected,\n              toggleSelect,\n            } satisfies ItemSlot<any>\n\n            const itemSlotProps = {\n              ...slotProps,\n              props: mergeProps(\n                {\n                  key: `item_${item.key ?? item.index}`,\n                  onClick: expandOnClick.value ? () => {\n                    toggleExpand(item)\n                  } : undefined,\n                  index,\n                  item,\n                  cellProps: props.cellProps,\n                  mobile: mobile.value,\n                },\n                getPrefixedEventHandlers(attrs, ':row', () => slotProps),\n                typeof props.rowProps === 'function'\n                  ? props.rowProps({\n                    item: slotProps.item,\n                    index: slotProps.index,\n                    internalItem: slotProps.internalItem,\n                  })\n                  : props.rowProps,\n              ),\n            }\n\n            return (\n              <Fragment key={ itemSlotProps.props.key as string }>\n                { slots.item ? slots.item(itemSlotProps) : (\n                  <VDataTableRow\n                    { ...itemSlotProps.props }\n                    v-slots={ slots }\n                  />\n                )}\n\n                { isExpanded(item) && slots['expanded-row']?.(slotProps) }\n              </Fragment>\n            )\n          })}\n        </>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDataTableRows = InstanceType<typeof VDataTableRows>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/_variables.scss

@@ -1,11 +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: 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;
-$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-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;