@vuetify/nightly 3.9.3-dev.2025-07-31 → 3.9.3-dev.2025-08-01

package/lib/components/VDataTable/VDataTableVirtual.d.ts

@@ -66,11 +66,15 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
     valueComparator?: unknown;
     density?: unknown;
     striped?: unknown;
+    collapseIcon?: unknown;
+    expandIcon?: unknown;
     hideNoData?: unknown;
     hover?: unknown;
     fixedHeader?: unknown;
     sortAscIcon?: unknown;
     sortDescIcon?: unknown;
+    groupCollapseIcon?: unknown;
+    groupExpandIcon?: unknown;
     fixedFooter?: unknown;
     hideDefaultBody?: unknown;
     hideDefaultHeader?: unknown;
@@ -199,6 +203,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
         readonly minWidth?: number | string | undefined;
         readonly maxWidth?: number | string | undefined;
         readonly nowrap?: boolean | undefined;
+        readonly intent?: number | undefined;
         readonly headerProps?: {
             readonly [x: string]: any;
         } | undefined;
@@ -219,6 +224,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -242,6 +248,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -262,6 +269,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -284,6 +292,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -304,6 +313,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -327,6 +337,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -347,6 +358,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -369,6 +381,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -389,6 +402,7 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -583,6 +597,26 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
         type: import("vue").PropType<unknown extends Defaults["striped"] ? import("../VTable/VTable.js").Striped : import("../VTable/VTable.js").Striped | Defaults["striped"]>;
         default: unknown extends Defaults["striped"] ? import("../VTable/VTable.js").Striped : NonNullable<import("../VTable/VTable.js").Striped> | Defaults["striped"];
     };
+    collapseIcon: unknown extends Defaults["collapseIcon"] ? {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    } : Omit<{
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : import("../../composables/icons.js").IconValue | Defaults["collapseIcon"]>;
+        default: unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : NonNullable<import("../../composables/icons.js").IconValue> | Defaults["collapseIcon"];
+    };
+    expandIcon: unknown extends Defaults["expandIcon"] ? {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    } : Omit<{
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : import("../../composables/icons.js").IconValue | Defaults["expandIcon"]>;
+        default: unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : NonNullable<import("../../composables/icons.js").IconValue> | Defaults["expandIcon"];
+    };
     hideNoData: unknown extends Defaults["hideNoData"] ? BooleanConstructor : {
         type: import("vue").PropType<unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"]>;
         default: unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"];
@@ -615,6 +649,26 @@ export declare const makeVDataTableVirtualProps: <Defaults extends {
         type: import("vue").PropType<unknown extends Defaults["sortDescIcon"] ? import("../../composables/icons.js").IconValue : import("../../composables/icons.js").IconValue | Defaults["sortDescIcon"]>;
         default: unknown extends Defaults["sortDescIcon"] ? import("../../composables/icons.js").IconValue : NonNullable<import("../../composables/icons.js").IconValue> | Defaults["sortDescIcon"];
     };
+    groupCollapseIcon: unknown extends Defaults["groupCollapseIcon"] ? {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    } : Omit<{
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["groupCollapseIcon"] ? import("../../composables/icons.js").IconValue : import("../../composables/icons.js").IconValue | Defaults["groupCollapseIcon"]>;
+        default: unknown extends Defaults["groupCollapseIcon"] ? import("../../composables/icons.js").IconValue : NonNullable<import("../../composables/icons.js").IconValue> | Defaults["groupCollapseIcon"];
+    };
+    groupExpandIcon: unknown extends Defaults["groupExpandIcon"] ? {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    } : Omit<{
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    }, "type" | "default"> & {
+        type: import("vue").PropType<unknown extends Defaults["groupExpandIcon"] ? import("../../composables/icons.js").IconValue : import("../../composables/icons.js").IconValue | Defaults["groupExpandIcon"]>;
+        default: unknown extends Defaults["groupExpandIcon"] ? import("../../composables/icons.js").IconValue : NonNullable<import("../../composables/icons.js").IconValue> | Defaults["groupExpandIcon"];
+    };
     fixedFooter: unknown extends Defaults["fixedFooter"] ? BooleanConstructor : {
         type: import("vue").PropType<unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"]>;
         default: unknown extends Defaults["fixedFooter"] ? boolean : boolean | Defaults["fixedFooter"];
@@ -653,6 +707,8 @@ export declare const VDataTableVirtual: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         striped: import("../VTable/VTable.js").Striped;
+        collapseIcon: import("../../composables/icons.js").IconValue;
+        expandIcon: import("../../composables/icons.js").IconValue;
         itemHeight: string | number;
         itemKey: SelectItemKey;
         hideNoData: boolean;
@@ -660,6 +716,8 @@ export declare const VDataTableVirtual: {
         fixedHeader: boolean;
         sortAscIcon: import("../../composables/icons.js").IconValue;
         sortDescIcon: import("../../composables/icons.js").IconValue;
+        groupCollapseIcon: import("../../composables/icons.js").IconValue;
+        groupExpandIcon: import("../../composables/icons.js").IconValue;
         fixedFooter: boolean;
         hideDefaultBody: boolean;
         hideDefaultHeader: boolean;
@@ -714,6 +772,8 @@ export declare const VDataTableVirtual: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         striped: import("../VTable/VTable.js").Striped;
+        collapseIcon: import("../../composables/icons.js").IconValue;
+        expandIcon: import("../../composables/icons.js").IconValue;
         itemHeight: string | number;
         itemKey: SelectItemKey;
         hideNoData: boolean;
@@ -721,6 +781,8 @@ export declare const VDataTableVirtual: {
         fixedHeader: boolean;
         sortAscIcon: import("../../composables/icons.js").IconValue;
         sortDescIcon: import("../../composables/icons.js").IconValue;
+        groupCollapseIcon: import("../../composables/icons.js").IconValue;
+        groupExpandIcon: import("../../composables/icons.js").IconValue;
         fixedFooter: boolean;
         hideDefaultBody: boolean;
         hideDefaultHeader: boolean;
@@ -798,6 +860,8 @@ export declare const VDataTableVirtual: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         striped: import("../VTable/VTable.js").Striped;
+        collapseIcon: import("../../composables/icons.js").IconValue;
+        expandIcon: import("../../composables/icons.js").IconValue;
         itemHeight: string | number;
         itemKey: SelectItemKey;
         hideNoData: boolean;
@@ -805,6 +869,8 @@ export declare const VDataTableVirtual: {
         fixedHeader: boolean;
         sortAscIcon: import("../../composables/icons.js").IconValue;
         sortDescIcon: import("../../composables/icons.js").IconValue;
+        groupCollapseIcon: import("../../composables/icons.js").IconValue;
+        groupExpandIcon: import("../../composables/icons.js").IconValue;
         fixedFooter: boolean;
         hideDefaultBody: boolean;
         hideDefaultHeader: boolean;
@@ -853,6 +919,8 @@ export declare const VDataTableVirtual: {
         valueComparator: typeof import("../../util/index.js").deepEqual;
         density: import("../../composables/density.js").Density;
         striped: import("../VTable/VTable.js").Striped;
+        collapseIcon: import("../../composables/icons.js").IconValue;
+        expandIcon: import("../../composables/icons.js").IconValue;
         itemHeight: string | number;
         itemKey: SelectItemKey;
         hideNoData: boolean;
@@ -860,6 +928,8 @@ export declare const VDataTableVirtual: {
         fixedHeader: boolean;
         sortAscIcon: import("../../composables/icons.js").IconValue;
         sortDescIcon: import("../../composables/icons.js").IconValue;
+        groupCollapseIcon: import("../../composables/icons.js").IconValue;
+        groupExpandIcon: import("../../composables/icons.js").IconValue;
         fixedFooter: boolean;
         hideDefaultBody: boolean;
         hideDefaultHeader: boolean;
@@ -890,6 +960,8 @@ export declare const VDataTableVirtual: {
     valueComparator: typeof import("../../util/index.js").deepEqual;
     density: import("../../composables/density.js").Density;
     striped: import("../VTable/VTable.js").Striped;
+    collapseIcon: import("../../composables/icons.js").IconValue;
+    expandIcon: import("../../composables/icons.js").IconValue;
     itemHeight: string | number;
     itemKey: SelectItemKey;
     hideNoData: boolean;
@@ -897,6 +969,8 @@ export declare const VDataTableVirtual: {
     fixedHeader: boolean;
     sortAscIcon: import("../../composables/icons.js").IconValue;
     sortDescIcon: import("../../composables/icons.js").IconValue;
+    groupCollapseIcon: import("../../composables/icons.js").IconValue;
+    groupExpandIcon: import("../../composables/icons.js").IconValue;
     fixedFooter: boolean;
     hideDefaultBody: boolean;
     hideDefaultHeader: boolean;
@@ -951,6 +1025,8 @@ export declare const VDataTableVirtual: {
     valueComparator: typeof import("../../util/index.js").deepEqual;
     density: import("../../composables/density.js").Density;
     striped: import("../VTable/VTable.js").Striped;
+    collapseIcon: import("../../composables/icons.js").IconValue;
+    expandIcon: import("../../composables/icons.js").IconValue;
     itemHeight: string | number;
     itemKey: SelectItemKey;
     hideNoData: boolean;
@@ -958,6 +1034,8 @@ export declare const VDataTableVirtual: {
     fixedHeader: boolean;
     sortAscIcon: import("../../composables/icons.js").IconValue;
     sortDescIcon: import("../../composables/icons.js").IconValue;
+    groupCollapseIcon: import("../../composables/icons.js").IconValue;
+    groupExpandIcon: import("../../composables/icons.js").IconValue;
     fixedFooter: boolean;
     hideDefaultBody: boolean;
     hideDefaultHeader: boolean;
@@ -1120,6 +1198,14 @@ export declare const VDataTableVirtual: {
         default: null;
         validator: (v: any) => boolean;
     };
+    collapseIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
+    expandIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
     hideNoData: BooleanConstructor;
     hover: BooleanConstructor;
     fixedHeader: BooleanConstructor;
@@ -1131,6 +1217,14 @@ export declare const VDataTableVirtual: {
         type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
         default: string;
     };
+    groupCollapseIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
+    groupExpandIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
     fixedFooter: BooleanConstructor;
     hideDefaultBody: BooleanConstructor;
     hideDefaultHeader: BooleanConstructor;
@@ -1240,6 +1334,14 @@ export declare const VDataTableVirtual: {
         default: null;
         validator: (v: any) => boolean;
     };
+    collapseIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
+    expandIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
     hideNoData: BooleanConstructor;
     hover: BooleanConstructor;
     fixedHeader: BooleanConstructor;
@@ -1251,6 +1353,14 @@ export declare const VDataTableVirtual: {
         type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
         default: string;
     };
+    groupCollapseIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
+    groupExpandIcon: {
+        type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
+        default: string;
+    };
     fixedFooter: BooleanConstructor;
     hideDefaultBody: BooleanConstructor;
     hideDefaultHeader: BooleanConstructor;

package/lib/components/VDataTable/composables/headers.d.ts

@@ -15,6 +15,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
         readonly minWidth?: number | string | undefined;
         readonly maxWidth?: number | string | undefined;
         readonly nowrap?: boolean | undefined;
+        readonly intent?: number | undefined;
         readonly headerProps?: {
             readonly [x: string]: any;
         } | undefined;
@@ -35,6 +36,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -58,6 +60,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -78,6 +81,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -100,6 +104,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -120,6 +125,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -143,6 +149,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -163,6 +170,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -185,6 +193,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
             readonly minWidth?: number | string | undefined;
             readonly maxWidth?: number | string | undefined;
             readonly nowrap?: boolean | undefined;
+            readonly intent?: number | undefined;
             readonly headerProps?: {
                 readonly [x: string]: any;
             } | undefined;
@@ -205,6 +214,7 @@ export declare const makeDataTableHeaderProps: <Defaults extends {
                 readonly minWidth?: number | string | undefined;
                 readonly maxWidth?: number | string | undefined;
                 readonly nowrap?: boolean | undefined;
+                readonly intent?: number | undefined;
                 readonly headerProps?: {
                     readonly [x: string]: any;
                 } | undefined;
@@ -243,6 +253,7 @@ export declare function createHeaders(props: HeaderProps, options?: {
         title?: string | undefined;
         nowrap?: boolean | undefined;
         align?: "start" | "end" | "center" | undefined;
+        intent?: number | undefined;
         headerProps?: Record<string, any> | undefined;
         cellProps?: import("../types.js").HeaderCellProps | undefined;
         sortable: boolean;
@@ -266,6 +277,7 @@ export declare function createHeaders(props: HeaderProps, options?: {
         title?: string | undefined;
         nowrap?: boolean | undefined;
         align?: "start" | "end" | "center" | undefined;
+        intent?: number | undefined;
         headerProps?: Record<string, any> | undefined;
         cellProps?: import("../types.js").HeaderCellProps | undefined;
         sortable: boolean;
@@ -290,6 +302,7 @@ export declare function createHeaders(props: HeaderProps, options?: {
         title?: string | undefined;
         nowrap?: boolean | undefined;
         align?: "start" | "end" | "center" | undefined;
+        intent?: number | undefined;
         headerProps?: Record<string, any> | undefined;
         cellProps?: import("../types.js").HeaderCellProps | undefined;
         sortable: boolean;
@@ -313,6 +326,7 @@ export declare function createHeaders(props: HeaderProps, options?: {
         title?: string | undefined;
         nowrap?: boolean | undefined;
         align?: "start" | "end" | "center" | undefined;
+        intent?: number | undefined;
         headerProps?: Record<string, any> | undefined;
         cellProps?: import("../types.js").HeaderCellProps | undefined;
         sortable: boolean;

package/lib/components/VDataTable/types.d.ts

@@ -14,6 +14,7 @@ export type DataTableHeader<T = Record<string, any>> = {
     minWidth?: number | string;
     maxWidth?: number | string;
     nowrap?: boolean;
+    intent?: number;
     headerProps?: Record<string, any>;
     cellProps?: HeaderCellProps;
     sortable?: boolean;

package/lib/components/VDataTable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/VDataTable/types.ts"],"sourcesContent":["// Types\nimport type { provideExpanded } from './composables/expand'\nimport type { Group, GroupableItem, provideGroupBy } from './composables/group'\nimport type { provideSelection, SelectableItem } from './composables/select'\nimport type { FilterFunction, InternalItem } from '@/composables/filter'\nimport type { SelectItemKey } from '@/util'\n\nexport type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null\n\nexport type DataTableHeader<T = Record<string, any>> = {\n  key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})\n  value?: SelectItemKey<T>\n  title?: string\n\n  fixed?: boolean | 'start' | 'end'\n  align?: 'start' | 'end' | 'center'\n\n  width?: number | string\n  minWidth?: number | string\n  maxWidth?: number | string\n  nowrap?: boolean\n\n  headerProps?: Record<string, any>\n  cellProps?: HeaderCellProps\n\n  sortable?: boolean\n  sort?: DataTableCompareFunction\n  sortRaw?: DataTableCompareFunction\n  filter?: FilterFunction\n\n  children?: DataTableHeader<T>[]\n}\n\nexport type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {\n  key: string | null\n  value: SelectItemKey | null\n  sortable: boolean\n  fixedOffset?: number\n  fixedEndOffset?: number\n  lastFixed?: boolean\n  firstFixedEnd?: boolean\n  nowrap?: boolean\n  colspan?: number\n  rowspan?: number\n  children?: InternalDataTableHeader[]\n}\n\nexport interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {\n  key: any\n  index: number\n  columns: {\n    [key: string]: any\n  }\n}\n\nexport type GroupHeaderSlot = {\n  index: number\n  item: Group\n  columns: InternalDataTableHeader[]\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n}\n\ntype ItemSlotBase<T> = {\n  index: number\n  item: T\n  internalItem: DataTableItem<T>\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n}\n\nexport type ItemSlot<T> = ItemSlotBase<T> & {\n  columns: InternalDataTableHeader[]\n}\n\nexport type ItemKeySlot<T> = ItemSlotBase<T> & {\n  value: any\n  column: InternalDataTableHeader\n}\n\nexport type RowProps<T> = Record<string, any> | RowPropsFunction<T>\nexport type RowPropsFunction<T> = (\n  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>\n) => Record<string, any>\n\nexport type CellProps<T> = Record<string, any> | CellPropsFunction<T>\nexport type CellPropsFunction<T> = (\n  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>\n) => Record<string, any>\n\nexport type HeaderCellProps = Record<string, any> | HeaderCellPropsFunction\nexport type HeaderCellPropsFunction = (\n  data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>\n) => Record<string, any>\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/VDataTable/types.ts"],"sourcesContent":["// Types\nimport type { provideExpanded } from './composables/expand'\nimport type { Group, GroupableItem, provideGroupBy } from './composables/group'\nimport type { provideSelection, SelectableItem } from './composables/select'\nimport type { FilterFunction, InternalItem } from '@/composables/filter'\nimport type { SelectItemKey } from '@/util'\n\nexport type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null\n\nexport type DataTableHeader<T = Record<string, any>> = {\n  key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})\n  value?: SelectItemKey<T>\n  title?: string\n\n  fixed?: boolean | 'start' | 'end'\n  align?: 'start' | 'end' | 'center'\n\n  width?: number | string\n  minWidth?: number | string\n  maxWidth?: number | string\n  nowrap?: boolean\n  intent?: number\n\n  headerProps?: Record<string, any>\n  cellProps?: HeaderCellProps\n\n  sortable?: boolean\n  sort?: DataTableCompareFunction\n  sortRaw?: DataTableCompareFunction\n  filter?: FilterFunction\n\n  children?: DataTableHeader<T>[]\n}\n\nexport type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {\n  key: string | null\n  value: SelectItemKey | null\n  sortable: boolean\n  fixedOffset?: number\n  fixedEndOffset?: number\n  lastFixed?: boolean\n  firstFixedEnd?: boolean\n  nowrap?: boolean\n  colspan?: number\n  rowspan?: number\n  children?: InternalDataTableHeader[]\n}\n\nexport interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {\n  key: any\n  index: number\n  columns: {\n    [key: string]: any\n  }\n}\n\nexport type GroupHeaderSlot = {\n  index: number\n  item: Group\n  columns: InternalDataTableHeader[]\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n}\n\ntype ItemSlotBase<T> = {\n  index: number\n  item: T\n  internalItem: DataTableItem<T>\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n}\n\nexport type ItemSlot<T> = ItemSlotBase<T> & {\n  columns: InternalDataTableHeader[]\n}\n\nexport type ItemKeySlot<T> = ItemSlotBase<T> & {\n  value: any\n  column: InternalDataTableHeader\n}\n\nexport type RowProps<T> = Record<string, any> | RowPropsFunction<T>\nexport type RowPropsFunction<T> = (\n  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>\n) => Record<string, any>\n\nexport type CellProps<T> = Record<string, any> | CellPropsFunction<T>\nexport type CellPropsFunction<T> = (\n  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>\n) => Record<string, any>\n\nexport type HeaderCellProps = Record<string, any> | HeaderCellPropsFunction\nexport type HeaderCellPropsFunction = (\n  data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>\n) => Record<string, any>\n"],"mappings":"","ignoreList":[]}

package/lib/components/VFileInput/VFileInput.d.ts

@@ -74,6 +74,7 @@ export declare const makeVFileInputProps: <Defaults extends {
     hideInput?: unknown;
     multiple?: unknown;
     showSize?: unknown;
+    truncateLength?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     theme: unknown extends Defaults["theme"] ? StringConstructor : {
         type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
@@ -451,6 +452,16 @@ export declare const makeVFileInputProps: <Defaults extends {
         type: PropType<unknown extends Defaults["showSize"] ? boolean | 1024 | 1000 : boolean | 1024 | 1000 | Defaults["showSize"]>;
         default: unknown extends Defaults["showSize"] ? boolean | 1024 | 1000 : Defaults["showSize"] | NonNullable<boolean | 1024 | 1000>;
     };
+    truncateLength: unknown extends Defaults["truncateLength"] ? {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    } : Omit<{
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["truncateLength"] ? string | number : string | number | Defaults["truncateLength"]>;
+        default: unknown extends Defaults["truncateLength"] ? string | number : NonNullable<string | number> | Defaults["truncateLength"];
+    };
 };
 export declare const VFileInput: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
@@ -488,6 +499,7 @@ export declare const VFileInput: {
         counterString: string;
         hideInput: boolean;
         showSize: boolean | 1024 | 1000;
+        truncateLength: string | number;
     } & {
         name?: string | undefined;
         id?: string | undefined;
@@ -869,6 +881,7 @@ export declare const VFileInput: {
         counterString: string;
         hideInput: boolean;
         showSize: boolean | 1024 | 1000;
+        truncateLength: string | number;
     }, true, {}, import("vue").SlotsType<Partial<{
         default: (arg: import("../VInput/VInput.js").VInputSlot & import("../VField/VField.js").VFieldSlot) => import("vue").VNode[];
         prepend: (arg: import("../VInput/VInput.js").VInputSlot) => import("vue").VNode[];
@@ -933,6 +946,7 @@ export declare const VFileInput: {
         counterString: string;
         hideInput: boolean;
         showSize: boolean | 1024 | 1000;
+        truncateLength: string | number;
     } & {
         name?: string | undefined;
         id?: string | undefined;
@@ -1308,6 +1322,7 @@ export declare const VFileInput: {
         counterString: string;
         hideInput: boolean;
         showSize: boolean | 1024 | 1000;
+        truncateLength: string | number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -1347,6 +1362,7 @@ export declare const VFileInput: {
     counterString: string;
     hideInput: boolean;
     showSize: boolean | 1024 | 1000;
+    truncateLength: string | number;
 } & {
     name?: string | undefined;
     id?: string | undefined;
@@ -1728,6 +1744,7 @@ export declare const VFileInput: {
     counterString: string;
     hideInput: boolean;
     showSize: boolean | 1024 | 1000;
+    truncateLength: string | number;
 }, {}, string, import("vue").SlotsType<Partial<{
     default: (arg: import("../VInput/VInput.js").VInputSlot & import("../VField/VField.js").VFieldSlot) => import("vue").VNode[];
     prepend: (arg: import("../VInput/VInput.js").VInputSlot) => import("vue").VNode[];
@@ -1876,6 +1893,10 @@ export declare const VFileInput: {
         default: boolean;
         validator: (v: boolean | number) => boolean;
     };
+    truncateLength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
 }, import("vue").ExtractPropTypes<{
     theme: StringConstructor;
     rounded: {
@@ -2002,5 +2023,9 @@ export declare const VFileInput: {
         default: boolean;
         validator: (v: boolean | number) => boolean;
     };
+    truncateLength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
 }>>;
 export type VFileInput = InstanceType<typeof VFileInput>;

package/lib/components/VFileInput/VFileInput.js

@@ -36,6 +36,10 @@ export const makeVFileInputProps = propsFactory({
       return typeof v === 'boolean' || [1000, 1024].includes(Number(v));
     }
   },
+  truncateLength: {
+    type: [Number, String],
+    default: 22
+  },
   ...makeVInputProps({
     prependIcon: '$file'
   }),
@@ -93,7 +97,8 @@ export const VFileInput = genericComponent()({
         name = '',
         size = 0
       } = file;
-      return !props.showSize ? name : `${name} (${humanReadableFileSize(size, base.value)})`;
+      const truncatedText = truncateText(name);
+      return !props.showSize ? truncatedText : `${truncatedText} (${humanReadableFileSize(size, base.value)})`;
     }));
     const counterValue = computed(() => {
       const fileCount = model.value?.length ?? 0;
@@ -133,6 +138,11 @@ export const VFileInput = genericComponent()({
         callEvent(props['onClick:clear'], e);
       });
     }
+    function truncateText(str) {
+      if (str.length < Number(props.truncateLength)) return str;
+      const charsKeepOneSide = Math.floor((Number(props.truncateLength) - 1) / 2);
+      return `${str.slice(0, charsKeepOneSide)}…${str.slice(str.length - charsKeepOneSide)}`;
+    }
     function onDragover(e) {
       e.preventDefault();
       e.stopImmediatePropagation();