@vuetify/nightly 3.4.10-dev.2024-01-16 → 3.4.10-dev.2024-01-18

package/lib/components/VAlert/VAlert.css

@@ -32,8 +32,8 @@
   display: none;
 }
 .v-alert--variant-elevated, .v-alert--variant-flat {
-  background: rgb(var(--v-theme-on-surface-variant));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  background: rgb(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
 }
 .v-alert--variant-elevated {
   box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));

package/lib/components/VAlert/_variables.scss

@@ -2,14 +2,14 @@
 @use '../../styles/tools';
 
 // VAlert
-$alert-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$alert-background: rgb(var(--v-theme-surface-light)) !default;
 $alert-border-color: currentColor !default;
 $alert-border-opacity: .38 !default;
 $alert-border-radius: settings.$border-radius-root !default;
 $alert-border-style: settings.$border-style-root !default;
 $alert-border-thin-width: 8px !default;
 $alert-border-width: 0 !default;
-$alert-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$alert-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
 $alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $alert-elevation: 1 !default;
 $alert-padding: 16px !default;

package/lib/components/VAutocomplete/VAutocomplete.css

@@ -27,7 +27,7 @@
   border-radius: 4px;
 }
 .v-autocomplete__mask {
-  background: rgb(var(--v-theme-on-surface-variant));
+  background: rgb(var(--v-theme-surface-light));
 }
 .v-autocomplete__selection {
   display: inline-flex;

package/lib/components/VAutocomplete/VAutocomplete.sass

@@ -42,7 +42,7 @@
     @include tools.rounded($autocomplete-content-border-radius)
 
   &__mask
-    background: rgb(var(--v-theme-on-surface-variant))
+    background: rgb(var(--v-theme-surface-light))
 
   &__selection
     display: inline-flex

package/lib/components/VCombobox/VCombobox.css

@@ -27,7 +27,7 @@
   border-radius: 4px;
 }
 .v-combobox__mask {
-  background: rgb(var(--v-theme-on-surface-variant));
+  background: rgb(var(--v-theme-surface-light));
 }
 .v-combobox__selection {
   display: inline-flex;

package/lib/components/VCombobox/VCombobox.sass

@@ -42,7 +42,7 @@
     @include tools.rounded($combobox-content-border-radius)
 
   &__mask
-    background: rgb(var(--v-theme-on-surface-variant))
+    background: rgb(var(--v-theme-surface-light))
 
   &__selection
     display: inline-flex

package/lib/components/VDataTable/VDataTable.css

@@ -67,7 +67,8 @@
   opacity: 0.5;
 }
 
-.v-data-table-column--fixed, .v-data-table__th--sticky {
+.v-data-table-column--fixed,
+.v-data-table__th--sticky {
   background: rgb(var(--v-theme-surface));
   position: sticky !important;
   left: 0;

package/lib/components/VDataTable/VDataTable.sass

@@ -60,7 +60,8 @@
                 .v-data-table-header__sort-icon
                   opacity: 0.5
 
-.v-data-table-column--fixed, .v-data-table__th--sticky
+.v-data-table-column--fixed,
+.v-data-table__th--sticky
   background: $table-background
   position: sticky !important
   left: 0

package/lib/components/VDataTable/VDataTableHeaders.mjs

@@ -9,7 +9,7 @@ import { useSort } from "./composables/sort.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { IconValue } from "../../composables/icons.mjs";
 import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs"; // Utilities
-import { computed } from 'vue';
+import { computed, mergeProps } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDataTableHeadersProps = propsFactory({
   color: String,
@@ -23,6 +23,9 @@ export const makeVDataTableHeadersProps = propsFactory({
     type: IconValue,
     default: '$sortDesc'
   },
+  headerProps: {
+    type: Object
+  },
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
 export const VDataTableHeaders = genericComponent()({
@@ -85,6 +88,7 @@ export const VDataTableHeaders = genericComponent()({
         y
       } = _ref2;
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
+      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {});
       return _createVNode(VDataTableColumn, _mergeProps({
         "tag": "th",
         "align": column.align,
@@ -105,7 +109,7 @@ export const VDataTableHeaders = genericComponent()({
         "fixed": column.fixed,
         "lastFixed": column.lastFixed,
         "noPadding": noPadding
-      }, column.headerProps), {
+      }, headerProps), {
         default: () => {
           const columnSlotName = `header.${column.key}`;
           const columnSlotProps = {

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","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","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","colspan","rowspan","lastFixed","headerProps","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 } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, 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\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\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            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n          { ...column.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"],"mappings":"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"}
+{"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","colspan","rowspan","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            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          fixed={ column.fixed }\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"],"mappings":"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"}

package/lib/components/VDataTable/VDataTableVirtual.mjs

@@ -170,7 +170,7 @@ export const VDataTableVirtual = genericComponent()({
           "style": {
             height: convertToUnit(props.height)
           }
-        }, [_createVNode("table", null, [_createVNode("thead", null, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
+        }, [_createVNode("table", null, [slots.colgroup?.(slotProps.value), _createVNode("thead", null, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
           "sticky": props.fixedHeader
         }), slots)]), _createVNode("tbody", null, [_createVNode("tr", {
           "ref": markerRef,

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

@@ -1 +1 @@
-{"version":3,"file":"VDataTableVirtual.mjs","names":["makeDataTableProps","VDataTableHeaders","VDataTableRow","VDataTableRows","VTable","VVirtualScrollItem","provideExpanded","createGroupBy","makeDataTableGroupProps","provideGroupBy","useGroupedItems","createHeaders","useDataTableItems","useOptions","provideSelection","createSort","provideSort","useSortedItems","provideDefaults","makeFilterProps","useFilter","makeVirtualProps","useVirtual","computed","shallowRef","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableVirtualProps","VDataTableVirtual","name","props","emits","value","setup","_ref","attrs","slots","groupBy","sortBy","multiSort","mustSort","columns","headers","sortFunctions","filterFunctions","showSelect","showExpand","items","search","filteredItems","transform","item","customKeyFilter","toggleSort","sortByWithGroups","opened","extractRows","isGroupOpen","toggleGroup","sortedItems","flatItems","allItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","currentPage","isExpanded","toggleExpand","containerRef","markerRef","paddingTop","paddingBottom","computedItems","handleItemResize","handleScroll","handleScrollend","displayItems","map","raw","page","itemsPerPage","hideNoData","noDataText","loading","loadingText","slotProps","internalItems","groupedItems","dataTableHeadersProps","filterProps","dataTableRowsProps","tableProps","_createVNode","_mergeProps","class","style","top","wrapper","height","fixedHeader","border","length","itemSlotProps","internalItem","index","default","_ref2","itemRef","bottom"],"sources":["../../../src/components/VDataTable/VDataTableVirtual.tsx"],"sourcesContent":["// Components\nimport { makeDataTableProps } from './VDataTable'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRow } from './VDataTableRow'\nimport { VDataTableRows } from './VDataTableRows'\nimport { VTable } from '@/components/VTable'\nimport { VVirtualScrollItem } from '@/components/VVirtualScroll/VVirtualScrollItem'\n\n// Composables\nimport { provideExpanded } from './composables/expand'\nimport { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group'\nimport { createHeaders } from './composables/headers'\nimport { useDataTableItems } from './composables/items'\nimport { useOptions } from './composables/options'\nimport { provideSelection } from './composables/select'\nimport { createSort, provideSort, useSortedItems } from './composables/sort'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { VDataTableSlotProps } from './VDataTable'\nimport type { VDataTableHeadersSlots } from './VDataTableHeaders'\nimport type { VDataTableRowsSlots } from './VDataTableRows'\nimport type { CellProps, RowProps } from '@/components/VDataTable/types'\nimport type { GenericProps, SelectItemKey } from '@/util'\n\ntype VDataTableVirtualSlotProps<T> = Omit<\n  VDataTableSlotProps<T>,\n  | 'setItemsPerPage'\n  | 'page'\n  | 'pageCount'\n  | 'itemsPerPage'\n>\n\nexport type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {\n  top: VDataTableVirtualSlotProps<T>\n  headers: VDataTableHeadersSlots['headers']\n  bottom: VDataTableVirtualSlotProps<T>\n  'body.prepend': VDataTableVirtualSlotProps<T>\n  'body.append': VDataTableVirtualSlotProps<T>\n  item: {\n    itemRef: Ref<HTMLElement | undefined>\n  }\n}\n\nexport const makeVDataTableVirtualProps = propsFactory({\n  ...makeDataTableProps(),\n  ...makeDataTableGroupProps(),\n  ...makeVirtualProps(),\n  ...makeFilterProps(),\n}, 'VDataTableVirtual')\n\ntype ItemType<T> = T extends readonly (infer U)[] ? U : never\n\nexport const VDataTableVirtual = genericComponent<new <T extends readonly any[], V>(\n  props: {\n    items?: T\n    itemValue?: SelectItemKey<ItemType<T>>\n    rowProps?: RowProps<ItemType<T>>\n    cellProps?: CellProps<ItemType<T>>\n    itemSelectable?: SelectItemKey<ItemType<T>>\n    modelValue?: V\n    'onUpdate:modelValue'?: (value: V) => void\n  },\n  slots: VDataTableVirtualSlots<ItemType<T>>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableVirtual',\n\n  props: makeVDataTableVirtualProps(),\n\n  emits: {\n    'update:modelValue': (value: any[]) => 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  },\n\n  setup (props, { attrs, slots }) {\n    const { groupBy } = createGroupBy(props)\n    const { sortBy, multiSort, mustSort } = createSort(props)\n\n    const { columns, headers, sortFunctions, filterFunctions } = createHeaders(props, {\n      groupBy,\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n    const { items } = useDataTableItems(props, columns)\n\n    const search = toRef(props, 'search')\n    const { filteredItems } = useFilter(props, items, search, {\n      transform: item => item.columns,\n      customKeyFilter: filterFunctions,\n    })\n\n    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort })\n    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })\n\n    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions)\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const allItems = computed(() => extractRows(flatItems.value))\n\n    const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, {\n      allItems,\n      currentPage: allItems,\n    })\n    const { isExpanded, toggleExpand } = provideExpanded(props)\n\n    const {\n      containerRef,\n      markerRef,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n      handleItemResize,\n      handleScroll,\n      handleScrollend,\n    } = useVirtual(props, flatItems)\n    const displayItems = computed(() => computedItems.value.map(item => item.raw))\n\n    useOptions({\n      sortBy,\n      page: shallowRef(1),\n      itemsPerPage: shallowRef(-1),\n      groupBy,\n      search,\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n        loading: toRef(props, 'loading'),\n        loadingText: toRef(props, 'loadingText'),\n      },\n    })\n\n    const slotProps = computed<VDataTableVirtualSlotProps<any>>(() => ({\n      sortBy: sortBy.value,\n      toggleSort,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      isExpanded,\n      toggleExpand,\n      isGroupOpen,\n      toggleGroup,\n      items: allItems.value.map(item => item.raw),\n      internalItems: allItems.value,\n      groupedItems: flatItems.value,\n      columns: columns.value,\n      headers: headers.value,\n    }))\n\n    useRender(() => {\n      const dataTableHeadersProps = VDataTableHeaders.filterProps(props)\n      const dataTableRowsProps = VDataTableRows.filterProps(props)\n      const tableProps = VTable.filterProps(props)\n\n      return (\n        <VTable\n          class={[\n            'v-data-table',\n            {\n              'v-data-table--loading': props.loading,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          { ...tableProps }\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            wrapper: () => (\n              <div\n                ref={ containerRef }\n                onScrollPassive={ handleScroll }\n                onScrollend={ handleScrollend }\n                class=\"v-table__wrapper\"\n                style={{\n                  height: convertToUnit(props.height),\n                }}\n              >\n                <table>\n                  <thead>\n                    <VDataTableHeaders\n                      { ...dataTableHeadersProps }\n                      sticky={ props.fixedHeader }\n                      v-slots={ slots }\n                    />\n                  </thead>\n                  <tbody>\n                    <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>\n                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>\n                    </tr>\n\n                    { slots['body.prepend']?.(slotProps.value) }\n\n                    <VDataTableRows\n                      { ...attrs }\n                      { ...dataTableRowsProps }\n                      items={ displayItems.value }\n                    >\n                      {{\n                        ...slots,\n                        item: itemSlotProps => (\n                          <VVirtualScrollItem\n                            key={ itemSlotProps.internalItem.index }\n                            renderless\n                            onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }\n                          >\n                            { ({ itemRef }) => (\n                              slots.item?.({ ...itemSlotProps, itemRef }) ?? (\n                                <VDataTableRow\n                                  { ...itemSlotProps.props }\n                                  ref={ itemRef }\n                                  key={ itemSlotProps.internalItem.index }\n                                  index={ itemSlotProps.internalItem.index }\n                                  v-slots={ slots }\n                                />\n                              )\n                            )}\n                          </VVirtualScrollItem>\n                        ),\n                      }}\n                    </VDataTableRows>\n\n                    { slots['body.append']?.(slotProps.value) }\n\n                    <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>\n                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            ),\n            bottom: () => slots.bottom?.(slotProps.value),\n          }}\n        </VTable>\n      )\n    })\n  },\n})\n\nexport type VDataTableVirtual = InstanceType<typeof VDataTableVirtual>\n"],"mappings":"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"}
+{"version":3,"file":"VDataTableVirtual.mjs","names":["makeDataTableProps","VDataTableHeaders","VDataTableRow","VDataTableRows","VTable","VVirtualScrollItem","provideExpanded","createGroupBy","makeDataTableGroupProps","provideGroupBy","useGroupedItems","createHeaders","useDataTableItems","useOptions","provideSelection","createSort","provideSort","useSortedItems","provideDefaults","makeFilterProps","useFilter","makeVirtualProps","useVirtual","computed","shallowRef","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableVirtualProps","VDataTableVirtual","name","props","emits","value","setup","_ref","attrs","slots","groupBy","sortBy","multiSort","mustSort","columns","headers","sortFunctions","filterFunctions","showSelect","showExpand","items","search","filteredItems","transform","item","customKeyFilter","toggleSort","sortByWithGroups","opened","extractRows","isGroupOpen","toggleGroup","sortedItems","flatItems","allItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","currentPage","isExpanded","toggleExpand","containerRef","markerRef","paddingTop","paddingBottom","computedItems","handleItemResize","handleScroll","handleScrollend","displayItems","map","raw","page","itemsPerPage","hideNoData","noDataText","loading","loadingText","slotProps","internalItems","groupedItems","dataTableHeadersProps","filterProps","dataTableRowsProps","tableProps","_createVNode","_mergeProps","class","style","top","wrapper","height","colgroup","fixedHeader","border","length","itemSlotProps","internalItem","index","default","_ref2","itemRef","bottom"],"sources":["../../../src/components/VDataTable/VDataTableVirtual.tsx"],"sourcesContent":["// Components\nimport { makeDataTableProps } from './VDataTable'\nimport { VDataTableHeaders } from './VDataTableHeaders'\nimport { VDataTableRow } from './VDataTableRow'\nimport { VDataTableRows } from './VDataTableRows'\nimport { VTable } from '@/components/VTable'\nimport { VVirtualScrollItem } from '@/components/VVirtualScroll/VVirtualScrollItem'\n\n// Composables\nimport { provideExpanded } from './composables/expand'\nimport { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group'\nimport { createHeaders } from './composables/headers'\nimport { useDataTableItems } from './composables/items'\nimport { useOptions } from './composables/options'\nimport { provideSelection } from './composables/select'\nimport { createSort, provideSort, useSortedItems } from './composables/sort'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { VDataTableSlotProps } from './VDataTable'\nimport type { VDataTableHeadersSlots } from './VDataTableHeaders'\nimport type { VDataTableRowsSlots } from './VDataTableRows'\nimport type { CellProps, RowProps } from '@/components/VDataTable/types'\nimport type { GenericProps, SelectItemKey } from '@/util'\n\ntype VDataTableVirtualSlotProps<T> = Omit<\n  VDataTableSlotProps<T>,\n  | 'setItemsPerPage'\n  | 'page'\n  | 'pageCount'\n  | 'itemsPerPage'\n>\n\nexport type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {\n  colgroup: VDataTableVirtualSlotProps<T>\n  top: VDataTableVirtualSlotProps<T>\n  headers: VDataTableHeadersSlots['headers']\n  bottom: VDataTableVirtualSlotProps<T>\n  'body.prepend': VDataTableVirtualSlotProps<T>\n  'body.append': VDataTableVirtualSlotProps<T>\n  item: {\n    itemRef: Ref<HTMLElement | undefined>\n  }\n}\n\nexport const makeVDataTableVirtualProps = propsFactory({\n  ...makeDataTableProps(),\n  ...makeDataTableGroupProps(),\n  ...makeVirtualProps(),\n  ...makeFilterProps(),\n}, 'VDataTableVirtual')\n\ntype ItemType<T> = T extends readonly (infer U)[] ? U : never\n\nexport const VDataTableVirtual = genericComponent<new <T extends readonly any[], V>(\n  props: {\n    items?: T\n    itemValue?: SelectItemKey<ItemType<T>>\n    rowProps?: RowProps<ItemType<T>>\n    cellProps?: CellProps<ItemType<T>>\n    itemSelectable?: SelectItemKey<ItemType<T>>\n    modelValue?: V\n    'onUpdate:modelValue'?: (value: V) => void\n  },\n  slots: VDataTableVirtualSlots<ItemType<T>>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataTableVirtual',\n\n  props: makeVDataTableVirtualProps(),\n\n  emits: {\n    'update:modelValue': (value: any[]) => 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  },\n\n  setup (props, { attrs, slots }) {\n    const { groupBy } = createGroupBy(props)\n    const { sortBy, multiSort, mustSort } = createSort(props)\n\n    const { columns, headers, sortFunctions, filterFunctions } = createHeaders(props, {\n      groupBy,\n      showSelect: toRef(props, 'showSelect'),\n      showExpand: toRef(props, 'showExpand'),\n    })\n    const { items } = useDataTableItems(props, columns)\n\n    const search = toRef(props, 'search')\n    const { filteredItems } = useFilter(props, items, search, {\n      transform: item => item.columns,\n      customKeyFilter: filterFunctions,\n    })\n\n    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort })\n    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })\n\n    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, sortFunctions)\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const allItems = computed(() => extractRows(flatItems.value))\n\n    const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, {\n      allItems,\n      currentPage: allItems,\n    })\n    const { isExpanded, toggleExpand } = provideExpanded(props)\n\n    const {\n      containerRef,\n      markerRef,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n      handleItemResize,\n      handleScroll,\n      handleScrollend,\n    } = useVirtual(props, flatItems)\n    const displayItems = computed(() => computedItems.value.map(item => item.raw))\n\n    useOptions({\n      sortBy,\n      page: shallowRef(1),\n      itemsPerPage: shallowRef(-1),\n      groupBy,\n      search,\n    })\n\n    provideDefaults({\n      VDataTableRows: {\n        hideNoData: toRef(props, 'hideNoData'),\n        noDataText: toRef(props, 'noDataText'),\n        loading: toRef(props, 'loading'),\n        loadingText: toRef(props, 'loadingText'),\n      },\n    })\n\n    const slotProps = computed<VDataTableVirtualSlotProps<any>>(() => ({\n      sortBy: sortBy.value,\n      toggleSort,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      isExpanded,\n      toggleExpand,\n      isGroupOpen,\n      toggleGroup,\n      items: allItems.value.map(item => item.raw),\n      internalItems: allItems.value,\n      groupedItems: flatItems.value,\n      columns: columns.value,\n      headers: headers.value,\n    }))\n\n    useRender(() => {\n      const dataTableHeadersProps = VDataTableHeaders.filterProps(props)\n      const dataTableRowsProps = VDataTableRows.filterProps(props)\n      const tableProps = VTable.filterProps(props)\n\n      return (\n        <VTable\n          class={[\n            'v-data-table',\n            {\n              'v-data-table--loading': props.loading,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          { ...tableProps }\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            wrapper: () => (\n              <div\n                ref={ containerRef }\n                onScrollPassive={ handleScroll }\n                onScrollend={ handleScrollend }\n                class=\"v-table__wrapper\"\n                style={{\n                  height: convertToUnit(props.height),\n                }}\n              >\n                <table>\n                  { slots.colgroup?.(slotProps.value) }\n                  <thead>\n                    <VDataTableHeaders\n                      { ...dataTableHeadersProps }\n                      sticky={ props.fixedHeader }\n                      v-slots={ slots }\n                    />\n                  </thead>\n                  <tbody>\n                    <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>\n                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>\n                    </tr>\n\n                    { slots['body.prepend']?.(slotProps.value) }\n\n                    <VDataTableRows\n                      { ...attrs }\n                      { ...dataTableRowsProps }\n                      items={ displayItems.value }\n                    >\n                      {{\n                        ...slots,\n                        item: itemSlotProps => (\n                          <VVirtualScrollItem\n                            key={ itemSlotProps.internalItem.index }\n                            renderless\n                            onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }\n                          >\n                            { ({ itemRef }) => (\n                              slots.item?.({ ...itemSlotProps, itemRef }) ?? (\n                                <VDataTableRow\n                                  { ...itemSlotProps.props }\n                                  ref={ itemRef }\n                                  key={ itemSlotProps.internalItem.index }\n                                  index={ itemSlotProps.internalItem.index }\n                                  v-slots={ slots }\n                                />\n                              )\n                            )}\n                          </VVirtualScrollItem>\n                        ),\n                      }}\n                    </VDataTableRows>\n\n                    { slots['body.append']?.(slotProps.value) }\n\n                    <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>\n                      <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            ),\n            bottom: () => slots.bottom?.(slotProps.value),\n          }}\n        </VTable>\n      )\n    })\n  },\n})\n\nexport type VDataTableVirtual = InstanceType<typeof VDataTableVirtual>\n"],"mappings":"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"}

package/lib/components/VDataTable/index.d.mts

@@ -667,6 +667,7 @@ declare const VDataTable: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -759,6 +760,7 @@ declare const VDataTable: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -1016,6 +1018,7 @@ declare const VDataTable: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -1146,6 +1149,7 @@ declare const VDataTable: {
     customKeyFilter?: FilterKeyFunctions | undefined;
     filterKeys?: FilterKeys | undefined;
     customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+    headerProps?: Record<string, any> | undefined;
 } & {
     "onUpdate:sortBy"?: ((value: any) => any) | undefined;
     "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -1437,6 +1441,9 @@ declare const VDataTable: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];
@@ -1611,6 +1618,9 @@ declare const VDataTable: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];
@@ -1973,6 +1983,7 @@ declare const VDataTableFooter: {
 
 type VDataTableVirtualSlotProps<T> = Omit<VDataTableSlotProps<T>, 'setItemsPerPage' | 'page' | 'pageCount' | 'itemsPerPage'>;
 type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {
+    colgroup: VDataTableVirtualSlotProps<T>;
     top: VDataTableVirtualSlotProps<T>;
     headers: VDataTableHeadersSlots['headers'];
     bottom: VDataTableVirtualSlotProps<T>;
@@ -2043,6 +2054,7 @@ declare const VDataTableVirtual: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -2054,7 +2066,7 @@ declare const VDataTableVirtual: {
         'update:options': (value: any) => boolean;
         'update:groupBy': (value: any) => boolean;
         'update:expanded': (value: any) => boolean;
-    }, "$children" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body.prepend" | "v-slot:body.append">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, "$children" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:colgroup" | "v-slot:body.prepend" | "v-slot:body.append">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
         expanded: readonly string[];
         tag: string;
@@ -2113,6 +2125,7 @@ declare const VDataTableVirtual: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -2238,6 +2251,9 @@ declare const VDataTableVirtual: {
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
+        colgroup: (arg: VDataTableVirtualSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
         top: (arg: VDataTableVirtualSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -2316,6 +2332,7 @@ declare const VDataTableVirtual: {
         customKeyFilter?: FilterKeyFunctions | undefined;
         filterKeys?: FilterKeys | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((value: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -2411,6 +2428,7 @@ declare const VDataTableVirtual: {
     customKeyFilter?: FilterKeyFunctions | undefined;
     filterKeys?: FilterKeys | undefined;
     customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+    headerProps?: Record<string, any> | undefined;
 } & {
     "onUpdate:sortBy"?: ((value: any) => any) | undefined;
     "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -2422,7 +2440,7 @@ declare const VDataTableVirtual: {
     'update:options': (value: any) => boolean;
     'update:groupBy': (value: any) => boolean;
     'update:expanded': (value: any) => boolean;
-}, "$children" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body.prepend" | "v-slot:body.append">, string, {
+}, "$children" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:colgroup" | "v-slot:body.prepend" | "v-slot:body.append">, string, {
     style: vue.StyleValue;
     expanded: readonly string[];
     tag: string;
@@ -2542,6 +2560,9 @@ declare const VDataTableVirtual: {
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    colgroup: (arg: VDataTableVirtualSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
     top: (arg: VDataTableVirtualSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -2618,6 +2639,9 @@ declare const VDataTableVirtual: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];
@@ -2737,6 +2761,9 @@ declare const VDataTableVirtual: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];
@@ -2884,6 +2911,7 @@ declare const VDataTableServer: {
         }[] | undefined;
         theme?: string | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((sortBy: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -2970,6 +2998,7 @@ declare const VDataTableServer: {
         }[] | undefined;
         theme?: string | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((sortBy: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -3220,6 +3249,7 @@ declare const VDataTableServer: {
         }[] | undefined;
         theme?: string | undefined;
         customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+        headerProps?: Record<string, any> | undefined;
     } & {
         "onUpdate:sortBy"?: ((sortBy: any) => any) | undefined;
         "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -3343,6 +3373,7 @@ declare const VDataTableServer: {
     }[] | undefined;
     theme?: string | undefined;
     customKeySort?: Record<string, DataTableCompareFunction> | undefined;
+    headerProps?: Record<string, any> | undefined;
 } & {
     "onUpdate:sortBy"?: ((sortBy: any) => any) | undefined;
     "onUpdate:groupBy"?: ((value: any) => any) | undefined;
@@ -3622,6 +3653,9 @@ declare const VDataTableServer: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];
@@ -3792,6 +3826,9 @@ declare const VDataTableServer: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    headerProps: {
+        type: vue.PropType<Record<string, any>>;
+    };
     sortBy: {
         type: vue.PropType<readonly SortItem[]>;
         default: () => never[];

package/lib/components/VSlider/VSliderTrack.css

@@ -10,7 +10,7 @@
   background-color: rgb(var(--v-theme-surface-variant));
 }
 .v-slider-track__tick--filled {
-  background-color: rgb(var(--v-theme-on-surface-variant));
+  background-color: rgb(var(--v-theme-surface-light));
 }
 
 .v-slider-track {

package/lib/components/VSlider/VSliderTrack.sass

@@ -15,7 +15,7 @@
   background-color: rgb(var(--v-theme-surface-variant))
 
   &--filled
-    background-color: rgb(var(--v-theme-on-surface-variant))
+    background-color: $slider-tick-background
 
 // Elements
 .v-slider-track

package/lib/components/VSlider/_variables.scss

@@ -21,6 +21,7 @@ $slider-thumb-label-offset: calc(var(--v-slider-thumb-size) / 2) !default;
 $slider-thumb-label-transition: .2s settings.$accelerated-easing !default;
 $slider-thumb-label-padding: 6px !default;
 $slider-thumb-touch-size: 42px !default;
+$slider-tick-background: rgb(var(--v-theme-surface-light)) !default;
 $slider-tick-border-radius: 2px !default;
 $slider-tick-label-margin-top: 8px !default;
 $slider-tick-label-margin-start: 12px !default;

package/lib/components/VSystemBar/VSystemBar.css

@@ -10,8 +10,8 @@
   text-align: end;
   width: 100%;
   box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  background: rgba(var(--v-theme-on-surface-variant));
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  background: rgba(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
   font-size: 0.75rem;
   font-weight: 400;
   letter-spacing: 0.0333333333em;

package/lib/components/VSystemBar/_variables.scss

@@ -3,9 +3,9 @@
 @use '../../styles/tools';
 
 // VSystemBar
-$system-bar-background: rgba(var(--v-theme-on-surface-variant)) !default;
+$system-bar-background: rgba(var(--v-theme-surface-light)) !default;
 $system-bar-border-radius: map.get(settings.$rounded, 0) !default;
-$system-bar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$system-bar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
 $system-bar-elevation: 0 !default;
 $system-bar-flex: 1 1 auto !default;
 $system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;

package/lib/components/VTimeline/VTimeline.css

@@ -1,5 +1,5 @@
 .v-timeline .v-timeline-divider__dot {
-  background: rgb(var(--v-theme-on-surface-variant));
+  background: rgb(var(--v-theme-surface-light));
 }
 .v-timeline .v-timeline-divider__inner-dot {
   background: rgb(var(--v-theme-on-surface));

package/lib/components/VTimeline/_variables.scss

@@ -6,7 +6,7 @@ $timeline-density-comfortable-grid-template-start: auto min-content min-content
 $timeline-density-compact-grid-template-end: 0 min-content auto !default;
 $timeline-density-compact-grid-template-start: auto min-content 0 !default;
 $timeline-dot-border-radius: 50% !default;
-$timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$timeline-dot-divider-background: rgb(var(--v-theme-surface-light)) !default;
 $timeline-dot-size: 38px !default;
 $timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
 $timeline-inset-divider-line: var(--v-timeline-line-inset) !default;

package/lib/components/VToolbar/VToolbar.css

@@ -15,8 +15,8 @@
   border-width: 0;
   box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 0;
-  background: rgb(var(--v-theme-on-surface-variant));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  background: rgb(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
 }
 .v-toolbar--border {
   border-width: thin;

package/lib/components/VToolbar/_variables.scss

@@ -4,8 +4,8 @@
 @use "../../styles/tools/functions";
 
 // VToolbar
-$toolbar-background: rgb(var(--v-theme-on-surface-variant)) !default;
-$toolbar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$toolbar-background: rgb(var(--v-theme-surface-light)) !default;
+$toolbar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default;
 $toolbar-border-color: settings.$border-color-root !default;
 $toolbar-border-radius: map.get(settings.$rounded, 0) !default;
 $toolbar-border-style: settings.$border-style-root !default;