@vuetify/nightly 3.9.0-beta.1-dev.2025-07-02 → 3.9.0-beta.1-dev.2025-07-05

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +15 -3
  2. package/dist/json/attributes.json +3282 -3290
  3. package/dist/json/importMap-labs.json +14 -14
  4. package/dist/json/importMap.json +148 -148
  5. package/dist/json/tags.json +2 -4
  6. package/dist/json/web-types.json +6453 -6474
  7. package/dist/vuetify-labs.cjs +121 -61
  8. package/dist/vuetify-labs.css +4564 -4553
  9. package/dist/vuetify-labs.d.ts +101 -111
  10. package/dist/vuetify-labs.esm.js +121 -61
  11. package/dist/vuetify-labs.esm.js.map +1 -1
  12. package/dist/vuetify-labs.js +121 -61
  13. package/dist/vuetify-labs.min.css +2 -2
  14. package/dist/vuetify.cjs +121 -61
  15. package/dist/vuetify.cjs.map +1 -1
  16. package/dist/vuetify.css +4097 -4086
  17. package/dist/vuetify.d.ts +101 -111
  18. package/dist/vuetify.esm.js +121 -61
  19. package/dist/vuetify.esm.js.map +1 -1
  20. package/dist/vuetify.js +121 -61
  21. package/dist/vuetify.js.map +1 -1
  22. package/dist/vuetify.min.css +2 -2
  23. package/dist/vuetify.min.js +73 -59
  24. package/dist/vuetify.min.js.map +1 -1
  25. package/lib/components/VDataTable/VDataTable.css +12 -1
  26. package/lib/components/VDataTable/VDataTable.d.ts +20 -38
  27. package/lib/components/VDataTable/VDataTable.sass +12 -2
  28. package/lib/components/VDataTable/VDataTableColumn.d.ts +9 -3
  29. package/lib/components/VDataTable/VDataTableColumn.js +12 -3
  30. package/lib/components/VDataTable/VDataTableColumn.js.map +1 -1
  31. package/lib/components/VDataTable/VDataTableHeaders.d.ts +0 -13
  32. package/lib/components/VDataTable/VDataTableHeaders.js +5 -4
  33. package/lib/components/VDataTable/VDataTableHeaders.js.map +1 -1
  34. package/lib/components/VDataTable/VDataTableRow.js +2 -0
  35. package/lib/components/VDataTable/VDataTableRow.js.map +1 -1
  36. package/lib/components/VDataTable/VDataTableServer.d.ts +10 -23
  37. package/lib/components/VDataTable/VDataTableVirtual.d.ts +10 -23
  38. package/lib/components/VDataTable/composables/headers.d.ts +22 -14
  39. package/lib/components/VDataTable/composables/headers.js +51 -22
  40. package/lib/components/VDataTable/composables/headers.js.map +1 -1
  41. package/lib/components/VDataTable/types.d.ts +3 -1
  42. package/lib/components/VDataTable/types.js.map +1 -1
  43. package/lib/components/VList/VListGroup.d.ts +13 -0
  44. package/lib/components/VList/VListGroup.js +2 -1
  45. package/lib/components/VList/VListGroup.js.map +1 -1
  46. package/lib/components/VList/VListItem.d.ts +6 -3
  47. package/lib/components/VList/VListItem.js +1 -1
  48. package/lib/components/VList/VListItem.js.map +1 -1
  49. package/lib/components/VTreeview/VTreeview.d.ts +6 -21
  50. package/lib/components/VTreeview/VTreeview.js +6 -9
  51. package/lib/components/VTreeview/VTreeview.js.map +1 -1
  52. package/lib/components/VTreeview/VTreeviewGroup.d.ts +13 -0
  53. package/lib/components/VTreeview/VTreeviewItem.d.ts +18 -9
  54. package/lib/components/VTreeview/VTreeviewItem.js +1 -1
  55. package/lib/components/VTreeview/VTreeviewItem.js.map +1 -1
  56. package/lib/composables/nested/nested.d.ts +7 -4
  57. package/lib/composables/nested/nested.js +16 -6
  58. package/lib/composables/nested/nested.js.map +1 -1
  59. package/lib/composables/nested/selectStrategies.d.ts +2 -1
  60. package/lib/composables/nested/selectStrategies.js +22 -11
  61. package/lib/composables/nested/selectStrategies.js.map +1 -1
  62. package/lib/entry-bundler.js +1 -1
  63. package/lib/framework.d.ts +56 -53
  64. package/lib/framework.js +1 -1
  65. package/package.json +1 -1
package/lib/components/VDataTable/VDataTable.css CHANGED
@@ -89,6 +89,7 @@
89
89
  }
90
90
 
91
91
  .v-data-table-column--fixed,
92
+ .v-data-table-column--fixed-end,
92
93
  .v-data-table__th--sticky {
93
94
  background: rgb(var(--v-theme-surface));
94
95
  position: sticky !important;
@@ -96,11 +97,21 @@
96
97
  z-index: 1;
97
98
  }
98
99
 
100
+ .v-data-table-column--fixed-end {
101
+ left: unset;
102
+ right: 0;
103
+ }
104
+
99
105
  .v-data-table-column--last-fixed {
100
106
  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
101
107
  }
102
108
 
103
- .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed {
109
+ .v-data-table-column--first-fixed-end {
110
+ border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
111
+ }
112
+
113
+ .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed,
114
+ .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed-end {
104
115
  z-index: 2;
105
116
  }
106
117
 
package/lib/components/VDataTable/VDataTable.d.ts CHANGED
@@ -61,7 +61,6 @@ export declare const makeDataTableProps: <Defaults extends {
61
61
  mobileBreakpoint?: unknown;
62
62
  color?: unknown;
63
63
  disableSort?: unknown;
64
- lastFixed?: unknown;
65
64
  multiSort?: unknown;
66
65
  sortAscIcon?: unknown;
67
66
  sortDescIcon?: unknown;
@@ -188,10 +187,6 @@ export declare const makeDataTableProps: <Defaults extends {
188
187
  type: import("vue").PropType<unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"]>;
189
188
  default: unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"];
190
189
  };
191
- lastFixed: unknown extends Defaults["lastFixed"] ? BooleanConstructor : {
192
- type: import("vue").PropType<unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"]>;
193
- default: unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"];
194
- };
195
190
  multiSort: unknown extends Defaults["multiSort"] ? BooleanConstructor : {
196
191
  type: import("vue").PropType<unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"]>;
197
192
  default: unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"];
@@ -326,7 +321,7 @@ export declare const makeDataTableProps: <Defaults extends {
326
321
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
327
322
  readonly value?: SelectItemKey<Record<string, any>>;
328
323
  readonly title?: string | undefined;
329
- readonly fixed?: boolean | undefined;
324
+ readonly fixed?: boolean | "start" | "end" | undefined;
330
325
  readonly align?: "start" | "end" | "center" | undefined;
331
326
  readonly width?: number | string | undefined;
332
327
  readonly minWidth?: number | string | undefined;
@@ -346,7 +341,7 @@ export declare const makeDataTableProps: <Defaults extends {
346
341
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
347
342
  readonly value?: SelectItemKey<Record<string, any>>;
348
343
  readonly title?: string | undefined;
349
- readonly fixed?: boolean | undefined;
344
+ readonly fixed?: boolean | "start" | "end" | undefined;
350
345
  readonly align?: "start" | "end" | "center" | undefined;
351
346
  readonly width?: number | string | undefined;
352
347
  readonly minWidth?: number | string | undefined;
@@ -369,7 +364,7 @@ export declare const makeDataTableProps: <Defaults extends {
369
364
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
370
365
  readonly value?: SelectItemKey<Record<string, any>>;
371
366
  readonly title?: string | undefined;
372
- readonly fixed?: boolean | undefined;
367
+ readonly fixed?: boolean | "start" | "end" | undefined;
373
368
  readonly align?: "start" | "end" | "center" | undefined;
374
369
  readonly width?: number | string | undefined;
375
370
  readonly minWidth?: number | string | undefined;
@@ -389,7 +384,7 @@ export declare const makeDataTableProps: <Defaults extends {
389
384
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
390
385
  readonly value?: SelectItemKey<Record<string, any>>;
391
386
  readonly title?: string | undefined;
392
- readonly fixed?: boolean | undefined;
387
+ readonly fixed?: boolean | "start" | "end" | undefined;
393
388
  readonly align?: "start" | "end" | "center" | undefined;
394
389
  readonly width?: number | string | undefined;
395
390
  readonly minWidth?: number | string | undefined;
@@ -411,7 +406,7 @@ export declare const makeDataTableProps: <Defaults extends {
411
406
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
412
407
  readonly value?: SelectItemKey<Record<string, any>>;
413
408
  readonly title?: string | undefined;
414
- readonly fixed?: boolean | undefined;
409
+ readonly fixed?: boolean | "start" | "end" | undefined;
415
410
  readonly align?: "start" | "end" | "center" | undefined;
416
411
  readonly width?: number | string | undefined;
417
412
  readonly minWidth?: number | string | undefined;
@@ -431,7 +426,7 @@ export declare const makeDataTableProps: <Defaults extends {
431
426
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
432
427
  readonly value?: SelectItemKey<Record<string, any>>;
433
428
  readonly title?: string | undefined;
434
- readonly fixed?: boolean | undefined;
429
+ readonly fixed?: boolean | "start" | "end" | undefined;
435
430
  readonly align?: "start" | "end" | "center" | undefined;
436
431
  readonly width?: number | string | undefined;
437
432
  readonly minWidth?: number | string | undefined;
@@ -454,7 +449,7 @@ export declare const makeDataTableProps: <Defaults extends {
454
449
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
455
450
  readonly value?: SelectItemKey<Record<string, any>>;
456
451
  readonly title?: string | undefined;
457
- readonly fixed?: boolean | undefined;
452
+ readonly fixed?: boolean | "start" | "end" | undefined;
458
453
  readonly align?: "start" | "end" | "center" | undefined;
459
454
  readonly width?: number | string | undefined;
460
455
  readonly minWidth?: number | string | undefined;
@@ -474,7 +469,7 @@ export declare const makeDataTableProps: <Defaults extends {
474
469
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
475
470
  readonly value?: SelectItemKey<Record<string, any>>;
476
471
  readonly title?: string | undefined;
477
- readonly fixed?: boolean | undefined;
472
+ readonly fixed?: boolean | "start" | "end" | undefined;
478
473
  readonly align?: "start" | "end" | "center" | undefined;
479
474
  readonly width?: number | string | undefined;
480
475
  readonly minWidth?: number | string | undefined;
@@ -496,7 +491,7 @@ export declare const makeDataTableProps: <Defaults extends {
496
491
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
497
492
  readonly value?: SelectItemKey<Record<string, any>>;
498
493
  readonly title?: string | undefined;
499
- readonly fixed?: boolean | undefined;
494
+ readonly fixed?: boolean | "start" | "end" | undefined;
500
495
  readonly align?: "start" | "end" | "center" | undefined;
501
496
  readonly width?: number | string | undefined;
502
497
  readonly minWidth?: number | string | undefined;
@@ -516,7 +511,7 @@ export declare const makeDataTableProps: <Defaults extends {
516
511
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
517
512
  readonly value?: SelectItemKey<Record<string, any>>;
518
513
  readonly title?: string | undefined;
519
- readonly fixed?: boolean | undefined;
514
+ readonly fixed?: boolean | "start" | "end" | undefined;
520
515
  readonly align?: "start" | "end" | "center" | undefined;
521
516
  readonly width?: number | string | undefined;
522
517
  readonly minWidth?: number | string | undefined;
@@ -642,7 +637,6 @@ export declare const makeVDataTableProps: <Defaults extends {
642
637
  mobileBreakpoint?: unknown;
643
638
  color?: unknown;
644
639
  disableSort?: unknown;
645
- lastFixed?: unknown;
646
640
  multiSort?: unknown;
647
641
  sortAscIcon?: unknown;
648
642
  sortDescIcon?: unknown;
@@ -935,10 +929,6 @@ export declare const makeVDataTableProps: <Defaults extends {
935
929
  type: import("vue").PropType<unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"]>;
936
930
  default: unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"];
937
931
  };
938
- lastFixed: unknown extends Defaults["lastFixed"] ? BooleanConstructor : {
939
- type: import("vue").PropType<unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"]>;
940
- default: unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"];
941
- };
942
932
  multiSort: unknown extends Defaults["multiSort"] ? BooleanConstructor : {
943
933
  type: import("vue").PropType<unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"]>;
944
934
  default: unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"];
@@ -1073,7 +1063,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1073
1063
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1074
1064
  readonly value?: SelectItemKey<Record<string, any>>;
1075
1065
  readonly title?: string | undefined;
1076
- readonly fixed?: boolean | undefined;
1066
+ readonly fixed?: boolean | "start" | "end" | undefined;
1077
1067
  readonly align?: "start" | "end" | "center" | undefined;
1078
1068
  readonly width?: number | string | undefined;
1079
1069
  readonly minWidth?: number | string | undefined;
@@ -1093,7 +1083,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1093
1083
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1094
1084
  readonly value?: SelectItemKey<Record<string, any>>;
1095
1085
  readonly title?: string | undefined;
1096
- readonly fixed?: boolean | undefined;
1086
+ readonly fixed?: boolean | "start" | "end" | undefined;
1097
1087
  readonly align?: "start" | "end" | "center" | undefined;
1098
1088
  readonly width?: number | string | undefined;
1099
1089
  readonly minWidth?: number | string | undefined;
@@ -1116,7 +1106,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1116
1106
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1117
1107
  readonly value?: SelectItemKey<Record<string, any>>;
1118
1108
  readonly title?: string | undefined;
1119
- readonly fixed?: boolean | undefined;
1109
+ readonly fixed?: boolean | "start" | "end" | undefined;
1120
1110
  readonly align?: "start" | "end" | "center" | undefined;
1121
1111
  readonly width?: number | string | undefined;
1122
1112
  readonly minWidth?: number | string | undefined;
@@ -1136,7 +1126,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1136
1126
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1137
1127
  readonly value?: SelectItemKey<Record<string, any>>;
1138
1128
  readonly title?: string | undefined;
1139
- readonly fixed?: boolean | undefined;
1129
+ readonly fixed?: boolean | "start" | "end" | undefined;
1140
1130
  readonly align?: "start" | "end" | "center" | undefined;
1141
1131
  readonly width?: number | string | undefined;
1142
1132
  readonly minWidth?: number | string | undefined;
@@ -1158,7 +1148,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1158
1148
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1159
1149
  readonly value?: SelectItemKey<Record<string, any>>;
1160
1150
  readonly title?: string | undefined;
1161
- readonly fixed?: boolean | undefined;
1151
+ readonly fixed?: boolean | "start" | "end" | undefined;
1162
1152
  readonly align?: "start" | "end" | "center" | undefined;
1163
1153
  readonly width?: number | string | undefined;
1164
1154
  readonly minWidth?: number | string | undefined;
@@ -1178,7 +1168,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1178
1168
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1179
1169
  readonly value?: SelectItemKey<Record<string, any>>;
1180
1170
  readonly title?: string | undefined;
1181
- readonly fixed?: boolean | undefined;
1171
+ readonly fixed?: boolean | "start" | "end" | undefined;
1182
1172
  readonly align?: "start" | "end" | "center" | undefined;
1183
1173
  readonly width?: number | string | undefined;
1184
1174
  readonly minWidth?: number | string | undefined;
@@ -1201,7 +1191,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1201
1191
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1202
1192
  readonly value?: SelectItemKey<Record<string, any>>;
1203
1193
  readonly title?: string | undefined;
1204
- readonly fixed?: boolean | undefined;
1194
+ readonly fixed?: boolean | "start" | "end" | undefined;
1205
1195
  readonly align?: "start" | "end" | "center" | undefined;
1206
1196
  readonly width?: number | string | undefined;
1207
1197
  readonly minWidth?: number | string | undefined;
@@ -1221,7 +1211,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1221
1211
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1222
1212
  readonly value?: SelectItemKey<Record<string, any>>;
1223
1213
  readonly title?: string | undefined;
1224
- readonly fixed?: boolean | undefined;
1214
+ readonly fixed?: boolean | "start" | "end" | undefined;
1225
1215
  readonly align?: "start" | "end" | "center" | undefined;
1226
1216
  readonly width?: number | string | undefined;
1227
1217
  readonly minWidth?: number | string | undefined;
@@ -1243,7 +1233,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1243
1233
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1244
1234
  readonly value?: SelectItemKey<Record<string, any>>;
1245
1235
  readonly title?: string | undefined;
1246
- readonly fixed?: boolean | undefined;
1236
+ readonly fixed?: boolean | "start" | "end" | undefined;
1247
1237
  readonly align?: "start" | "end" | "center" | undefined;
1248
1238
  readonly width?: number | string | undefined;
1249
1239
  readonly minWidth?: number | string | undefined;
@@ -1263,7 +1253,7 @@ export declare const makeVDataTableProps: <Defaults extends {
1263
1253
  readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}) | undefined;
1264
1254
  readonly value?: SelectItemKey<Record<string, any>>;
1265
1255
  readonly title?: string | undefined;
1266
- readonly fixed?: boolean | undefined;
1256
+ readonly fixed?: boolean | "start" | "end" | undefined;
1267
1257
  readonly align?: "start" | "end" | "center" | undefined;
1268
1258
  readonly width?: number | string | undefined;
1269
1259
  readonly minWidth?: number | string | undefined;
@@ -1420,7 +1410,6 @@ export declare const VDataTable: {
1420
1410
  value: number;
1421
1411
  })[];
1422
1412
  showCurrentPage: boolean;
1423
- lastFixed: boolean;
1424
1413
  fixedHeader: boolean;
1425
1414
  sortAscIcon: import("../../composables/icons.js").IconValue;
1426
1415
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1501,7 +1490,6 @@ export declare const VDataTable: {
1501
1490
  value: number;
1502
1491
  })[];
1503
1492
  showCurrentPage: boolean;
1504
- lastFixed: boolean;
1505
1493
  fixedHeader: boolean;
1506
1494
  sortAscIcon: import("../../composables/icons.js").IconValue;
1507
1495
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1603,7 +1591,6 @@ export declare const VDataTable: {
1603
1591
  value: number;
1604
1592
  })[];
1605
1593
  showCurrentPage: boolean;
1606
- lastFixed: boolean;
1607
1594
  fixedHeader: boolean;
1608
1595
  sortAscIcon: import("../../composables/icons.js").IconValue;
1609
1596
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1675,7 +1662,6 @@ export declare const VDataTable: {
1675
1662
  value: number;
1676
1663
  })[];
1677
1664
  showCurrentPage: boolean;
1678
- lastFixed: boolean;
1679
1665
  fixedHeader: boolean;
1680
1666
  sortAscIcon: import("../../composables/icons.js").IconValue;
1681
1667
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1729,7 +1715,6 @@ export declare const VDataTable: {
1729
1715
  value: number;
1730
1716
  })[];
1731
1717
  showCurrentPage: boolean;
1732
- lastFixed: boolean;
1733
1718
  fixedHeader: boolean;
1734
1719
  sortAscIcon: import("../../composables/icons.js").IconValue;
1735
1720
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1810,7 +1795,6 @@ export declare const VDataTable: {
1810
1795
  value: number;
1811
1796
  })[];
1812
1797
  showCurrentPage: boolean;
1813
- lastFixed: boolean;
1814
1798
  fixedHeader: boolean;
1815
1799
  sortAscIcon: import("../../composables/icons.js").IconValue;
1816
1800
  sortDescIcon: import("../../composables/icons.js").IconValue;
@@ -1964,7 +1948,6 @@ export declare const VDataTable: {
1964
1948
  mobileBreakpoint: import("vue").PropType<number | import("../../types.js").DisplayBreakpoint>;
1965
1949
  color: StringConstructor;
1966
1950
  disableSort: BooleanConstructor;
1967
- lastFixed: BooleanConstructor;
1968
1951
  multiSort: BooleanConstructor;
1969
1952
  sortAscIcon: {
1970
1953
  type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
@@ -2137,7 +2120,6 @@ export declare const VDataTable: {
2137
2120
  mobileBreakpoint: import("vue").PropType<number | import("../../types.js").DisplayBreakpoint>;
2138
2121
  color: StringConstructor;
2139
2122
  disableSort: BooleanConstructor;
2140
- lastFixed: BooleanConstructor;
2141
2123
  multiSort: BooleanConstructor;
2142
2124
  sortAscIcon: {
2143
2125
  type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
package/lib/components/VDataTable/VDataTable.sass CHANGED
@@ -77,17 +77,27 @@
77
77
  height: fit-content
78
78
 
79
79
  .v-data-table-column--fixed,
80
+ .v-data-table-column--fixed-end,
80
81
  .v-data-table__th--sticky
81
82
  background: $table-background
82
83
  position: sticky !important
83
84
  left: 0
84
85
  z-index: 1
85
86
 
87
+ .v-data-table-column--fixed-end
88
+ left: unset
89
+ right: 0
90
+
86
91
  .v-data-table-column--last-fixed
87
92
  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
88
93
 
89
- .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed
90
- z-index: 2
94
+ .v-data-table-column--first-fixed-end
95
+ border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
96
+
97
+ .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr
98
+ > th.v-data-table-column--fixed,
99
+ > th.v-data-table-column--fixed-end
100
+ z-index: 2
91
101
 
92
102
  .v-data-table-group-header-row
93
103
  td
package/lib/components/VDataTable/VDataTableColumn.d.ts CHANGED
@@ -1,22 +1,28 @@
1
1
  import type { PropType } from 'vue';
2
2
  export declare const VDataTableColumn: import("vue").FunctionalComponent<Partial<{
3
- fixed: boolean;
3
+ fixed: boolean | "end" | "start";
4
4
  nowrap: boolean;
5
5
  align: "center" | "end" | "start";
6
6
  lastFixed: boolean;
7
+ firstFixedEnd: boolean;
7
8
  noPadding: boolean;
8
9
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
9
10
  align: {
10
11
  type: PropType<"start" | "center" | "end">;
11
12
  default: string;
12
13
  };
13
- fixed: BooleanConstructor;
14
+ fixed: {
15
+ type: PropType<boolean | "start" | "end">;
16
+ default: boolean;
17
+ };
14
18
  fixedOffset: (StringConstructor | NumberConstructor)[];
19
+ fixedEndOffset: (StringConstructor | NumberConstructor)[];
15
20
  height: (StringConstructor | NumberConstructor)[];
16
21
  lastFixed: BooleanConstructor;
22
+ firstFixedEnd: BooleanConstructor;
17
23
  noPadding: BooleanConstructor;
18
24
  tag: StringConstructor;
19
25
  width: (StringConstructor | NumberConstructor)[];
20
26
  maxWidth: (StringConstructor | NumberConstructor)[];
21
27
  nowrap: BooleanConstructor;
22
- }>>, "fixed" | "nowrap" | "align" | "lastFixed" | "noPadding">, {}, any, {}>;
28
+ }>>, "fixed" | "nowrap" | "align" | "lastFixed" | "firstFixedEnd" | "noPadding">, {}, any, {}>;
package/lib/components/VDataTable/VDataTableColumn.js CHANGED
@@ -6,10 +6,15 @@ export const VDataTableColumn = defineFunctionalComponent({
6
6
  type: String,
7
7
  default: 'start'
8
8
  },
9
- fixed: Boolean,
9
+ fixed: {
10
+ type: [Boolean, String],
11
+ default: false
12
+ },
10
13
  fixedOffset: [Number, String],
14
+ fixedEndOffset: [Number, String],
11
15
  height: [Number, String],
12
16
  lastFixed: Boolean,
17
+ firstFixedEnd: Boolean,
13
18
  noPadding: Boolean,
14
19
  tag: String,
15
20
  width: [Number, String],
@@ -20,10 +25,13 @@ export const VDataTableColumn = defineFunctionalComponent({
20
25
  slots
21
26
  } = _ref;
22
27
  const Tag = props.tag ?? 'td';
28
+ const fixedSide = typeof props.fixed === 'string' ? props.fixed : props.fixed ? 'start' : 'none';
23
29
  return _createVNode(Tag, {
24
30
  "class": _normalizeClass(['v-data-table__td', {
25
- 'v-data-table-column--fixed': props.fixed,
31
+ 'v-data-table-column--fixed': fixedSide === 'start',
32
+ 'v-data-table-column--fixed-end': fixedSide === 'end',
26
33
  'v-data-table-column--last-fixed': props.lastFixed,
34
+ 'v-data-table-column--first-fixed-end': props.firstFixedEnd,
27
35
  'v-data-table-column--no-padding': props.noPadding,
28
36
  'v-data-table-column--nowrap': props.nowrap
29
37
  }, `v-data-table-column--align-${props.align}`]),
@@ -31,7 +39,8 @@ export const VDataTableColumn = defineFunctionalComponent({
31
39
  height: convertToUnit(props.height),
32
40
  width: convertToUnit(props.width),
33
41
  maxWidth: convertToUnit(props.maxWidth),
34
- left: convertToUnit(props.fixedOffset || null)
42
+ left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,
43
+ right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined
35
44
  }
36
45
  }, {
37
46
  default: () => [slots.default?.()]
package/lib/components/VDataTable/VDataTableColumn.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VDataTableColumn.js","names":["convertToUnit","defineFunctionalComponent","VDataTableColumn","align","type","String","default","fixed","Boolean","fixedOffset","Number","height","lastFixed","noPadding","tag","width","maxWidth","nowrap","props","_ref","slots","Tag","_createVNode","_normalizeClass","left"],"sources":["../../../src/components/VDataTable/VDataTableColumn.tsx"],"sourcesContent":["// Utilities\nimport { convertToUnit, defineFunctionalComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VDataTableColumn = defineFunctionalComponent({\n align: {\n type: String as PropType<'start' | 'center' | 'end'>,\n default: 'start',\n },\n fixed: Boolean,\n fixedOffset: [Number, String],\n height: [Number, String],\n lastFixed: Boolean,\n noPadding: Boolean,\n tag: String,\n width: [Number, String],\n maxWidth: [Number, String],\n nowrap: Boolean,\n}, (props, { slots }) => {\n const Tag = props.tag ?? 'td'\n return (\n <Tag\n class={[\n 'v-data-table__td',\n {\n 'v-data-table-column--fixed': props.fixed,\n 'v-data-table-column--last-fixed': props.lastFixed,\n 'v-data-table-column--no-padding': props.noPadding,\n 'v-data-table-column--nowrap': props.nowrap,\n },\n `v-data-table-column--align-${props.align}`,\n ]}\n style={{\n height: convertToUnit(props.height),\n width: convertToUnit(props.width),\n maxWidth: convertToUnit(props.maxWidth),\n left: convertToUnit(props.fixedOffset || null),\n }}\n >\n { slots.default?.() }\n </Tag>\n )\n})\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,yBAAyB,+BAEjD;AAGA,OAAO,MAAMC,gBAAgB,GAAGD,yBAAyB,CAAC;EACxDE,KAAK,EAAE;IACLC,IAAI,EAAEC,MAA8C;IACpDC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEC,OAAO;EACdC,WAAW,EAAE,CAACC,MAAM,EAAEL,MAAM,CAAC;EAC7BM,MAAM,EAAE,CAACD,MAAM,EAAEL,MAAM,CAAC;EACxBO,SAAS,EAAEJ,OAAO;EAClBK,SAAS,EAAEL,OAAO;EAClBM,GAAG,EAAET,MAAM;EACXU,KAAK,EAAE,CAACL,MAAM,EAAEL,MAAM,CAAC;EACvBW,QAAQ,EAAE,CAACN,MAAM,EAAEL,MAAM,CAAC;EAC1BY,MAAM,EAAET;AACV,CAAC,EAAE,CAACU,KAAK,EAAAC,IAAA,KAAgB;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAClB,MAAME,GAAG,GAAGH,KAAK,CAACJ,GAAG,IAAI,IAAI;EAC7B,OAAAQ,YAAA,CAAAD,GAAA;IAAA,SAAAE,eAAA,CAEW,CACL,kBAAkB,EAClB;MACE,4BAA4B,EAAEL,KAAK,CAACX,KAAK;MACzC,iCAAiC,EAAEW,KAAK,CAACN,SAAS;MAClD,iCAAiC,EAAEM,KAAK,CAACL,SAAS;MAClD,6BAA6B,EAAEK,KAAK,CAACD;IACvC,CAAC,EACD,8BAA8BC,KAAK,CAACf,KAAK,EAAE,CAC5C;IAAA,SACM;MACLQ,MAAM,EAAEX,aAAa,CAACkB,KAAK,CAACP,MAAM,CAAC;MACnCI,KAAK,EAAEf,aAAa,CAACkB,KAAK,CAACH,KAAK,CAAC;MACjCC,QAAQ,EAAEhB,aAAa,CAACkB,KAAK,CAACF,QAAQ,CAAC;MACvCQ,IAAI,EAAExB,aAAa,CAACkB,KAAK,CAACT,WAAW,IAAI,IAAI;IAC/C;EAAC;IAAAH,OAAA,EAAAA,CAAA,MAECc,KAAK,CAACd,OAAO,GAAG,CAAC;EAAA;AAGzB,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"VDataTableColumn.js","names":["convertToUnit","defineFunctionalComponent","VDataTableColumn","align","type","String","default","fixed","Boolean","fixedOffset","Number","fixedEndOffset","height","lastFixed","firstFixedEnd","noPadding","tag","width","maxWidth","nowrap","props","_ref","slots","Tag","fixedSide","_createVNode","_normalizeClass","left","undefined","right"],"sources":["../../../src/components/VDataTable/VDataTableColumn.tsx"],"sourcesContent":["// Utilities\nimport { convertToUnit, defineFunctionalComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VDataTableColumn = defineFunctionalComponent({\n align: {\n type: String as PropType<'start' | 'center' | 'end'>,\n default: 'start',\n },\n fixed: {\n type: [Boolean, String] as PropType<boolean | 'start' | 'end'>,\n default: false,\n },\n fixedOffset: [Number, String],\n fixedEndOffset: [Number, String],\n height: [Number, String],\n lastFixed: Boolean,\n firstFixedEnd: Boolean,\n\n noPadding: Boolean,\n tag: String,\n width: [Number, String],\n maxWidth: [Number, String],\n nowrap: Boolean,\n}, (props, { slots }) => {\n const Tag = props.tag ?? 'td'\n\n const fixedSide = typeof props.fixed === 'string' ? props.fixed\n : props.fixed ? 'start'\n : 'none'\n\n return (\n <Tag\n class={[\n 'v-data-table__td',\n {\n 'v-data-table-column--fixed': fixedSide === 'start',\n 'v-data-table-column--fixed-end': fixedSide === 'end',\n 'v-data-table-column--last-fixed': props.lastFixed,\n 'v-data-table-column--first-fixed-end': props.firstFixedEnd,\n 'v-data-table-column--no-padding': props.noPadding,\n 'v-data-table-column--nowrap': props.nowrap,\n },\n `v-data-table-column--align-${props.align}`,\n ]}\n style={{\n height: convertToUnit(props.height),\n width: convertToUnit(props.width),\n maxWidth: convertToUnit(props.maxWidth),\n left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,\n right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined,\n }}\n >\n { slots.default?.() }\n </Tag>\n )\n})\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,yBAAyB,+BAEjD;AAGA,OAAO,MAAMC,gBAAgB,GAAGD,yBAAyB,CAAC;EACxDE,KAAK,EAAE;IACLC,IAAI,EAAEC,MAA8C;IACpDC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAE;IACLH,IAAI,EAAE,CAACI,OAAO,EAAEH,MAAM,CAAwC;IAC9DC,OAAO,EAAE;EACX,CAAC;EACDG,WAAW,EAAE,CAACC,MAAM,EAAEL,MAAM,CAAC;EAC7BM,cAAc,EAAE,CAACD,MAAM,EAAEL,MAAM,CAAC;EAChCO,MAAM,EAAE,CAACF,MAAM,EAAEL,MAAM,CAAC;EACxBQ,SAAS,EAAEL,OAAO;EAClBM,aAAa,EAAEN,OAAO;EAEtBO,SAAS,EAAEP,OAAO;EAClBQ,GAAG,EAAEX,MAAM;EACXY,KAAK,EAAE,CAACP,MAAM,EAAEL,MAAM,CAAC;EACvBa,QAAQ,EAAE,CAACR,MAAM,EAAEL,MAAM,CAAC;EAC1Bc,MAAM,EAAEX;AACV,CAAC,EAAE,CAACY,KAAK,EAAAC,IAAA,KAAgB;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAClB,MAAME,GAAG,GAAGH,KAAK,CAACJ,GAAG,IAAI,IAAI;EAE7B,MAAMQ,SAAS,GAAG,OAAOJ,KAAK,CAACb,KAAK,KAAK,QAAQ,GAAGa,KAAK,CAACb,KAAK,GAC3Da,KAAK,CAACb,KAAK,GAAG,OAAO,GACrB,MAAM;EAEV,OAAAkB,YAAA,CAAAF,GAAA;IAAA,SAAAG,eAAA,CAEW,CACL,kBAAkB,EAClB;MACE,4BAA4B,EAAEF,SAAS,KAAK,OAAO;MACnD,gCAAgC,EAAEA,SAAS,KAAK,KAAK;MACrD,iCAAiC,EAAEJ,KAAK,CAACP,SAAS;MAClD,sCAAsC,EAAEO,KAAK,CAACN,aAAa;MAC3D,iCAAiC,EAAEM,KAAK,CAACL,SAAS;MAClD,6BAA6B,EAAEK,KAAK,CAACD;IACvC,CAAC,EACD,8BAA8BC,KAAK,CAACjB,KAAK,EAAE,CAC5C;IAAA,SACM;MACLS,MAAM,EAAEZ,aAAa,CAACoB,KAAK,CAACR,MAAM,CAAC;MACnCK,KAAK,EAAEjB,aAAa,CAACoB,KAAK,CAACH,KAAK,CAAC;MACjCC,QAAQ,EAAElB,aAAa,CAACoB,KAAK,CAACF,QAAQ,CAAC;MACvCS,IAAI,EAAEH,SAAS,KAAK,OAAO,GAAGxB,aAAa,CAACoB,KAAK,CAACX,WAAW,IAAI,IAAI,CAAC,GAAGmB,SAAS;MAClFC,KAAK,EAAEL,SAAS,KAAK,KAAK,GAAGxB,aAAa,CAACoB,KAAK,CAACT,cAAc,IAAI,IAAI,CAAC,GAAGiB;IAC7E;EAAC;IAAAtB,OAAA,EAAAA,CAAA,MAECgB,KAAK,CAAChB,OAAO,GAAG,CAAC;EAAA;AAGzB,CAAC,CAAC","ignoreList":[]}
package/lib/components/VDataTable/VDataTableHeaders.d.ts CHANGED
@@ -40,7 +40,6 @@ export declare const makeVDataTableHeadersProps: <Defaults extends {
40
40
  color?: unknown;
41
41
  disableSort?: unknown;
42
42
  fixedHeader?: unknown;
43
- lastFixed?: unknown;
44
43
  multiSort?: unknown;
45
44
  sortAscIcon?: unknown;
46
45
  sortDescIcon?: unknown;
@@ -77,10 +76,6 @@ export declare const makeVDataTableHeadersProps: <Defaults extends {
77
76
  type: PropType<unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"]>;
78
77
  default: unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"];
79
78
  };
80
- lastFixed: unknown extends Defaults["lastFixed"] ? BooleanConstructor : {
81
- type: PropType<unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"]>;
82
- default: unknown extends Defaults["lastFixed"] ? boolean : boolean | Defaults["lastFixed"];
83
- };
84
79
  multiSort: unknown extends Defaults["multiSort"] ? BooleanConstructor : {
85
80
  type: PropType<unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"]>;
86
81
  default: unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"];
@@ -124,7 +119,6 @@ export declare const VDataTableHeaders: {
124
119
  sticky: boolean;
125
120
  multiSort: boolean;
126
121
  disableSort: boolean;
127
- lastFixed: boolean;
128
122
  fixedHeader: boolean;
129
123
  sortAscIcon: IconValue;
130
124
  sortDescIcon: IconValue;
@@ -159,7 +153,6 @@ export declare const VDataTableHeaders: {
159
153
  sticky: boolean;
160
154
  multiSort: boolean;
161
155
  disableSort: boolean;
162
- lastFixed: boolean;
163
156
  fixedHeader: boolean;
164
157
  sortAscIcon: IconValue;
165
158
  sortDescIcon: IconValue;
@@ -181,7 +174,6 @@ export declare const VDataTableHeaders: {
181
174
  sticky: boolean;
182
175
  multiSort: boolean;
183
176
  disableSort: boolean;
184
- lastFixed: boolean;
185
177
  fixedHeader: boolean;
186
178
  sortAscIcon: IconValue;
187
179
  sortDescIcon: IconValue;
@@ -216,7 +208,6 @@ export declare const VDataTableHeaders: {
216
208
  sticky: boolean;
217
209
  multiSort: boolean;
218
210
  disableSort: boolean;
219
- lastFixed: boolean;
220
211
  fixedHeader: boolean;
221
212
  sortAscIcon: IconValue;
222
213
  sortDescIcon: IconValue;
@@ -229,7 +220,6 @@ export declare const VDataTableHeaders: {
229
220
  sticky: boolean;
230
221
  multiSort: boolean;
231
222
  disableSort: boolean;
232
- lastFixed: boolean;
233
223
  fixedHeader: boolean;
234
224
  sortAscIcon: IconValue;
235
225
  sortDescIcon: IconValue;
@@ -264,7 +254,6 @@ export declare const VDataTableHeaders: {
264
254
  sticky: boolean;
265
255
  multiSort: boolean;
266
256
  disableSort: boolean;
267
- lastFixed: boolean;
268
257
  fixedHeader: boolean;
269
258
  sortAscIcon: IconValue;
270
259
  sortDescIcon: IconValue;
@@ -284,7 +273,6 @@ export declare const VDataTableHeaders: {
284
273
  color: StringConstructor;
285
274
  disableSort: BooleanConstructor;
286
275
  fixedHeader: BooleanConstructor;
287
- lastFixed: BooleanConstructor;
288
276
  multiSort: BooleanConstructor;
289
277
  sortAscIcon: {
290
278
  type: PropType<IconValue>;
@@ -308,7 +296,6 @@ export declare const VDataTableHeaders: {
308
296
  color: StringConstructor;
309
297
  disableSort: BooleanConstructor;
310
298
  fixedHeader: BooleanConstructor;
311
- lastFixed: BooleanConstructor;
312
299
  multiSort: BooleanConstructor;
313
300
  sortAscIcon: {
314
301
  type: PropType<IconValue>;
package/lib/components/VDataTable/VDataTableHeaders.js CHANGED
@@ -19,7 +19,6 @@ export const makeVDataTableHeadersProps = propsFactory({
19
19
  color: String,
20
20
  disableSort: Boolean,
21
21
  fixedHeader: Boolean,
22
- lastFixed: Boolean,
23
22
  multiSort: Boolean,
24
23
  sortAscIcon: {
25
24
  type: IconValue,
@@ -66,11 +65,12 @@ export const VDataTableHeaders = genericComponent()({
66
65
  loaderClasses
67
66
  } = useLoader(props);
68
67
  function getFixedStyles(column, y) {
69
- if (!(props.sticky || props.fixedHeader) && !(column.fixed || column.lastFixed)) return undefined;
68
+ if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined;
69
+ const fixedSide = typeof column.fixed === 'string' ? column.fixed : column.fixed ? 'start' : 'none';
70
70
  return {
71
71
  position: 'sticky',
72
- left: column.fixed || column.lastFixed ? convertToUnit(column.fixedOffset) : undefined,
73
- right: column.lastFixed ? convertToUnit(column.fixedOffset ?? 0) : undefined,
72
+ left: fixedSide === 'start' ? convertToUnit(column.fixedOffset) : undefined,
73
+ right: fixedSide === 'end' ? convertToUnit(column.fixedEndOffset) : undefined,
74
74
  top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
75
75
  };
76
76
  }
@@ -133,6 +133,7 @@ export const VDataTableHeaders = genericComponent()({
133
133
  "fixed": column.fixed,
134
134
  "nowrap": column.nowrap,
135
135
  "lastFixed": column.lastFixed,
136
+ "firstFixedEnd": column.firstFixedEnd,
136
137
  "noPadding": noPadding,
137
138
  "tabindex": column.sortable ? 0 : undefined,
138
139
  "onClick": column.sortable ? () => toggleSort(column) : undefined,