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

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3-dev.2025-07-31
+* Vuetify v3.9.3-dev.2025-08-01
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4803,6 +4803,8 @@ const aliases = {
   calendar: 'mdi-calendar',
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
+  tableGroupCollapse: 'mdi-chevron-down',
+  tableGroupExpand: 'mdi-chevron-right',
   eyeDropper: 'mdi-eyedropper',
   upload: 'mdi-cloud-upload',
   color: 'mdi-palette',
@@ -20939,6 +20941,8 @@ const VDataTableColumn = defineFunctionalComponent({
   lastFixed: Boolean,
   firstFixedEnd: Boolean,
   noPadding: Boolean,
+  indent: [Number, String],
+  empty: Boolean,
   tag: String,
   width: [Number, String],
   maxWidth: [Number, String],
@@ -20956,14 +20960,16 @@ const VDataTableColumn = defineFunctionalComponent({
       'v-data-table-column--last-fixed': props.lastFixed,
       'v-data-table-column--first-fixed-end': props.firstFixedEnd,
       'v-data-table-column--no-padding': props.noPadding,
-      'v-data-table-column--nowrap': props.nowrap
+      'v-data-table-column--nowrap': props.nowrap,
+      'v-data-table-column--empty': props.empty
     }, `v-data-table-column--align-${props.align}`]),
     "style": {
       height: convertToUnit(props.height),
       width: convertToUnit(props.width),
       maxWidth: convertToUnit(props.maxWidth),
       left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,
-      right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined
+      right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined,
+      paddingInlineStart: props.indent ? convertToUnit(props.indent) : undefined
     }
   }, {
     default: () => [slots.default?.()]
@@ -21378,6 +21384,7 @@ const VDataTableHeaders = genericComponent()({
         y
       } = _ref2;
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
+      const isEmpty = column.key === 'data-table-group' && column.width === 0 && !column.title;
       const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {});
       return createVNode(VDataTableColumn, mergeProps({
         "tag": "th",
@@ -21400,6 +21407,7 @@ const VDataTableHeaders = genericComponent()({
         "lastFixed": column.lastFixed,
         "firstFixedEnd": column.firstFixedEnd,
         "noPadding": noPadding,
+        "empty": isEmpty,
         "tabindex": column.sortable ? 0 : undefined,
         "onClick": column.sortable ? () => toggleSort(column) : undefined,
         "onKeydown": column.sortable ? event => handleEnterKeyPress(event, column) : undefined
@@ -21417,6 +21425,7 @@ const VDataTableHeaders = genericComponent()({
             getSortIcon
           };
           if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
+          if (isEmpty) return '';
           if (column.key === 'data-table-select') {
             return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && createVNode(VCheckboxBtn, {
               "modelValue": allSelected.value,
@@ -21511,6 +21520,14 @@ const makeVDataTableGroupHeaderRowProps = propsFactory({
   item: {
     type: Object,
     required: true
+  },
+  groupCollapseIcon: {
+    type: IconValue,
+    default: '$tableGroupCollapse'
+  },
+  groupExpandIcon: {
+    type: IconValue,
+    default: '$tableGroupExpand'
   }
 }, 'VDataTableGroupHeaderRow');
 const VDataTableGroupHeaderRow = genericComponent()({
@@ -21536,6 +21553,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
     const rows = computed(() => {
       return extractRows([props.item]);
     });
+    const colspan = toRef(() => columns.value.length - (columns.value.some(c => c.key === 'data-table-select') ? 1 : 0));
     return () => createElementVNode("tr", {
       "class": "v-data-table-group-header-row",
       "style": {
@@ -21543,7 +21561,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
       }
     }, [columns.value.map(column => {
       if (column.key === 'data-table-group') {
-        const icon = isGroupOpen(props.item) ? '$expand' : '$next';
+        const icon = isGroupOpen(props.item) ? props.groupCollapseIcon : props.groupExpandIcon;
         const onClick = () => toggleGroup(props.item);
         return slots['data-table-group']?.({
           item: props.item,
@@ -21553,7 +21571,8 @@ const VDataTableGroupHeaderRow = genericComponent()({
             onClick
           }
         }) ?? createVNode(VDataTableColumn, {
-          "class": "v-data-table-group-header-row__column"
+          "class": "v-data-table-group-header-row__column",
+          "colspan": colspan.value
         }, {
           default: () => [createVNode(VBtn, {
             "size": "small",
@@ -21562,8 +21581,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
             "onClick": onClick
           }, null), createElementVNode("span", null, [props.item.value]), createElementVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
         });
-      }
-      if (column.key === 'data-table-select') {
+      } else if (column.key === 'data-table-select') {
         const modelValue = isSelected(rows.value);
         const indeterminate = isSomeSelected(rows.value) && !modelValue;
         const selectGroup = v => select(rows.value, v);
@@ -21573,13 +21591,18 @@ const VDataTableGroupHeaderRow = genericComponent()({
             indeterminate,
             'onUpdate:modelValue': selectGroup
           }
-        }) ?? createElementVNode("td", null, [createVNode(VCheckboxBtn, {
-          "modelValue": modelValue,
-          "indeterminate": indeterminate,
-          "onUpdate:modelValue": selectGroup
-        }, null)]);
+        }) ?? createVNode(VDataTableColumn, {
+          "class": "v-data-table__td--select-row",
+          "noPadding": true
+        }, {
+          default: () => [createVNode(VCheckboxBtn, {
+            "modelValue": modelValue,
+            "indeterminate": indeterminate,
+            "onUpdate:modelValue": selectGroup
+          }, null)]
+        });
       }
-      return createElementVNode("td", null, null);
+      return '';
     })]);
   }
 });
@@ -21590,6 +21613,14 @@ const makeVDataTableRowProps = propsFactory({
   index: Number,
   item: Object,
   cellProps: [Object, Function],
+  collapseIcon: {
+    type: IconValue,
+    default: '$collapse'
+  },
+  expandIcon: {
+    type: IconValue,
+    default: '$expand'
+  },
   onClick: EventProp(),
   onContextmenu: EventProp(),
   onDblclick: EventProp(),
@@ -21670,8 +21701,11 @@ const VDataTableRow = genericComponent()({
         internalItem: slotProps.internalItem,
         value: slotProps.value
       }) : column.cellProps;
+      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
+      const isEmpty = column.key === 'data-table-group' && column.width === 0 && !column.title;
       return createVNode(VDataTableColumn, mergeProps({
         "align": column.align,
+        "indent": column.intent,
         "class": {
           'v-data-table__td--expanded-row': column.key === 'data-table-expand',
           'v-data-table__td--select-row': column.key === 'data-table-select'
@@ -21682,7 +21716,8 @@ const VDataTableRow = genericComponent()({
         "lastFixed": column.lastFixed,
         "firstFixedEnd": column.firstFixedEnd,
         "maxWidth": !mobile.value ? column.maxWidth : undefined,
-        "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
+        "noPadding": noPadding,
+        "empty": isEmpty,
         "nowrap": column.nowrap,
         "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
@@ -21705,13 +21740,13 @@ const VDataTableRow = genericComponent()({
             return slots['item.data-table-expand']?.({
               ...slotProps,
               props: {
-                icon: isExpanded(item) ? '$collapse' : '$expand',
+                icon: isExpanded(item) ? props.collapseIcon : props.expandIcon,
                 size: 'small',
                 variant: 'text',
                 onClick: withModifiers(() => toggleExpand(item), ['stop'])
               }
             }) ?? createVNode(VBtn, {
-              "icon": isExpanded(item) ? '$collapse' : '$expand',
+              "icon": isExpanded(item) ? props.collapseIcon : props.expandIcon,
               "size": "small",
               "variant": "text",
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
@@ -21749,6 +21784,8 @@ const makeVDataTableRowsProps = propsFactory({
   },
   rowProps: [Object, Function],
   cellProps: [Object, Function],
+  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
+  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
   ...makeDisplayProps()
 }, 'VDataTableRows');
 const VDataTableRows = genericComponent()({
@@ -21783,6 +21820,7 @@ const VDataTableRows = genericComponent()({
       mobile
     } = useDisplay(props);
     useRender(() => {
+      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon']);
       if (props.loading && (!props.items.length || slots.loading)) {
         return createElementVNode("tr", {
           "class": "v-data-table-rows-loading",
@@ -21815,7 +21853,7 @@ const VDataTableRows = genericComponent()({
           return slots['group-header'] ? slots['group-header'](slotProps) : createVNode(VDataTableGroupHeaderRow, mergeProps({
             "key": `group-header_${item.id}`,
             "item": item
-          }, getPrefixedEventHandlers(attrs, ':group-header', () => slotProps)), slots);
+          }, getPrefixedEventHandlers(attrs, ':group-header', () => slotProps), groupHeaderRowProps), slots);
         }
         const slotProps = {
           index,
@@ -21837,6 +21875,8 @@ const VDataTableRows = genericComponent()({
             index,
             item,
             cellProps: props.cellProps,
+            collapseIcon: props.collapseIcon,
+            expandIcon: props.expandIcon,
             mobile: mobile.value
           }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
             item: slotProps.item,
@@ -24494,6 +24534,10 @@ const makeVFileInputProps = propsFactory({
       return typeof v === 'boolean' || [1000, 1024].includes(Number(v));
     }
   },
+  truncateLength: {
+    type: [Number, String],
+    default: 22
+  },
   ...makeVInputProps({
     prependIcon: '$file'
   }),
@@ -24551,7 +24595,8 @@ 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;
@@ -24591,6 +24636,11 @@ 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();
@@ -35573,7 +35623,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.3-dev.2025-07-31";
+const version$1 = "3.9.3-dev.2025-08-01";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35871,7 +35921,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.3-dev.2025-07-31";
+const version = "3.9.3-dev.2025-08-01";
 
 /* eslint-disable local-rules/sort-imports */