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

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3-dev.2025-07-31
+* Vuetify v3.9.3-dev.2025-08-02
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1869,6 +1869,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',
@@ -15864,7 +15866,7 @@ const VWindow = genericComponent()({
         'v-window--vertical-arrows': !!props.verticalArrows,
         'v-window--crossfade': !!props.crossfade
       }, themeClasses.value, props.class]),
-      "style": normalizeStyle([props.style, props.transitionDuration ? {
+      "style": normalizeStyle([props.style, props.transitionDuration && !PREFERS_REDUCED_MOTION ? {
         '--v-window-transition-duration': convertToUnit(props.transitionDuration, 'ms')
       } : undefined])
     }, {
@@ -20669,6 +20671,7 @@ const VDataIterator = genericComponent()({
       isGroupOpen,
       toggleGroup,
       items: paginatedItemsWithoutGroups.value,
+      itemsCount: filteredItems.value.length,
       groupedItems: paginatedItems.value
     }));
     useRender(() => createVNode(props.tag, {
@@ -21179,6 +21182,8 @@ const VDataTableColumn = defineFunctionalComponent({
   lastFixed: Boolean,
   firstFixedEnd: Boolean,
   noPadding: Boolean,
+  indent: [Number, String],
+  empty: Boolean,
   tag: String,
   width: [Number, String],
   maxWidth: [Number, String],
@@ -21196,14 +21201,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?.()]
@@ -21618,6 +21625,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",
@@ -21640,6 +21648,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
@@ -21657,6 +21666,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,
@@ -21751,6 +21761,14 @@ const makeVDataTableGroupHeaderRowProps = propsFactory({
   item: {
     type: Object,
     required: true
+  },
+  groupCollapseIcon: {
+    type: IconValue,
+    default: '$tableGroupCollapse'
+  },
+  groupExpandIcon: {
+    type: IconValue,
+    default: '$tableGroupExpand'
   }
 }, 'VDataTableGroupHeaderRow');
 const VDataTableGroupHeaderRow = genericComponent()({
@@ -21776,6 +21794,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": {
@@ -21783,7 +21802,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,
@@ -21793,7 +21812,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",
@@ -21802,8 +21822,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);
@@ -21813,13 +21832,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 '';
     })]);
   }
 });
@@ -21830,6 +21854,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(),
@@ -21910,8 +21942,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'
@@ -21922,7 +21957,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), {
@@ -21945,13 +21981,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'])
@@ -21989,6 +22025,8 @@ const makeVDataTableRowsProps = propsFactory({
   },
   rowProps: [Object, Function],
   cellProps: [Object, Function],
+  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
+  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
   ...makeDisplayProps()
 }, 'VDataTableRows');
 const VDataTableRows = genericComponent()({
@@ -22023,6 +22061,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",
@@ -22055,7 +22094,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,
@@ -22077,6 +22116,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,
@@ -24734,6 +24775,10 @@ const makeVFileInputProps = propsFactory({
       return typeof v === 'boolean' || [1000, 1024].includes(Number(v));
     }
   },
+  truncateLength: {
+    type: [Number, String],
+    default: 22
+  },
   ...makeVInputProps({
     prependIcon: '$file'
   }),
@@ -24791,7 +24836,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;
@@ -24831,6 +24877,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();
@@ -27690,9 +27741,11 @@ const makeVSkeletonLoaderProps = propsFactory({
 }, 'VSkeletonLoader');
 const VSkeletonLoader = genericComponent()({
   name: 'VSkeletonLoader',
+  inheritAttrs: false,
   props: makeVSkeletonLoaderProps(),
   setup(props, _ref) {
     let {
+      attrs,
       slots
     } = _ref;
     const {
@@ -27719,12 +27772,12 @@ const VSkeletonLoader = genericComponent()({
         ariaLabel: t(props.loadingText),
         role: 'alert'
       };
-      return createElementVNode("div", mergeProps({
+      return createElementVNode(Fragment, null, [isLoading ? createElementVNode("div", mergeProps({
         "class": ['v-skeleton-loader', {
           'v-skeleton-loader--boilerplate': props.boilerplate
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
-        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}]
-      }, loadingProps), [isLoading ? items.value : slots.default?.()]);
+        "style": [backgroundColorStyles.value, dimensionStyles.value]
+      }, loadingProps, attrs), [items.value]) : slots.default?.()]);
     });
     return {};
   }
@@ -31844,7 +31897,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.3-dev.2025-07-31";
+const version$1 = "3.9.3-dev.2025-08-02";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31869,7 +31922,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.3-dev.2025-07-31";
+const version = "3.9.3-dev.2025-08-02";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };