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

package/dist/vuetify-labs.cjs

@@ -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.
 */
@@ -4807,6 +4807,8 @@
     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',
@@ -15628,7 +15630,7 @@
           'v-window--vertical-arrows': !!props.verticalArrows,
           'v-window--crossfade': !!props.crossfade
         }, themeClasses.value, props.class]),
-        "style": vue.normalizeStyle([props.style, props.transitionDuration ? {
+        "style": vue.normalizeStyle([props.style, props.transitionDuration && !PREFERS_REDUCED_MOTION ? {
           '--v-window-transition-duration': convertToUnit(props.transitionDuration, 'ms')
         } : undefined])
       }, {
@@ -20433,6 +20435,7 @@
         isGroupOpen,
         toggleGroup,
         items: paginatedItemsWithoutGroups.value,
+        itemsCount: filteredItems.value.length,
         groupedItems: paginatedItems.value
       }));
       useRender(() => vue.createVNode(props.tag, {
@@ -20943,6 +20946,8 @@
     lastFixed: Boolean,
     firstFixedEnd: Boolean,
     noPadding: Boolean,
+    indent: [Number, String],
+    empty: Boolean,
     tag: String,
     width: [Number, String],
     maxWidth: [Number, String],
@@ -20960,14 +20965,16 @@
         '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?.()]
@@ -21382,6 +21389,7 @@
           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 = vue.mergeProps(props.headerProps ?? {}, column.headerProps ?? {});
         return vue.createVNode(VDataTableColumn, vue.mergeProps({
           "tag": "th",
@@ -21404,6 +21412,7 @@
           "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
@@ -21421,6 +21430,7 @@
               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 && vue.createVNode(VCheckboxBtn, {
                 "modelValue": allSelected.value,
@@ -21515,6 +21525,14 @@
     item: {
       type: Object,
       required: true
+    },
+    groupCollapseIcon: {
+      type: IconValue,
+      default: '$tableGroupCollapse'
+    },
+    groupExpandIcon: {
+      type: IconValue,
+      default: '$tableGroupExpand'
     }
   }, 'VDataTableGroupHeaderRow');
   const VDataTableGroupHeaderRow = genericComponent()({
@@ -21540,6 +21558,7 @@
       const rows = vue.computed(() => {
         return extractRows([props.item]);
       });
+      const colspan = vue.toRef(() => columns.value.length - (columns.value.some(c => c.key === 'data-table-select') ? 1 : 0));
       return () => vue.createElementVNode("tr", {
         "class": "v-data-table-group-header-row",
         "style": {
@@ -21547,7 +21566,7 @@
         }
       }, [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,
@@ -21557,7 +21576,8 @@
               onClick
             }
           }) ?? vue.createVNode(VDataTableColumn, {
-            "class": "v-data-table-group-header-row__column"
+            "class": "v-data-table-group-header-row__column",
+            "colspan": colspan.value
           }, {
             default: () => [vue.createVNode(VBtn, {
               "size": "small",
@@ -21566,8 +21586,7 @@
               "onClick": onClick
             }, null), vue.createElementVNode("span", null, [props.item.value]), vue.createElementVNode("span", null, [vue.createTextVNode("("), rows.value.length, vue.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);
@@ -21577,13 +21596,18 @@
               indeterminate,
               'onUpdate:modelValue': selectGroup
             }
-          }) ?? vue.createElementVNode("td", null, [vue.createVNode(VCheckboxBtn, {
-            "modelValue": modelValue,
-            "indeterminate": indeterminate,
-            "onUpdate:modelValue": selectGroup
-          }, null)]);
+          }) ?? vue.createVNode(VDataTableColumn, {
+            "class": "v-data-table__td--select-row",
+            "noPadding": true
+          }, {
+            default: () => [vue.createVNode(VCheckboxBtn, {
+              "modelValue": modelValue,
+              "indeterminate": indeterminate,
+              "onUpdate:modelValue": selectGroup
+            }, null)]
+          });
         }
-        return vue.createElementVNode("td", null, null);
+        return '';
       })]);
     }
   });
@@ -21594,6 +21618,14 @@
     index: Number,
     item: Object,
     cellProps: [Object, Function],
+    collapseIcon: {
+      type: IconValue,
+      default: '$collapse'
+    },
+    expandIcon: {
+      type: IconValue,
+      default: '$expand'
+    },
     onClick: EventProp(),
     onContextmenu: EventProp(),
     onDblclick: EventProp(),
@@ -21674,8 +21706,11 @@
           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 vue.createVNode(VDataTableColumn, vue.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'
@@ -21686,7 +21721,8 @@
           "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), {
@@ -21709,13 +21745,13 @@
               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: vue.withModifiers(() => toggleExpand(item), ['stop'])
                 }
               }) ?? vue.createVNode(VBtn, {
-                "icon": isExpanded(item) ? '$collapse' : '$expand',
+                "icon": isExpanded(item) ? props.collapseIcon : props.expandIcon,
                 "size": "small",
                 "variant": "text",
                 "onClick": vue.withModifiers(() => toggleExpand(item), ['stop'])
@@ -21753,6 +21789,8 @@
     },
     rowProps: [Object, Function],
     cellProps: [Object, Function],
+    ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
+    ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
     ...makeDisplayProps()
   }, 'VDataTableRows');
   const VDataTableRows = genericComponent()({
@@ -21787,6 +21825,7 @@
         mobile
       } = useDisplay(props);
       useRender(() => {
+        const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon']);
         if (props.loading && (!props.items.length || slots.loading)) {
           return vue.createElementVNode("tr", {
             "class": "v-data-table-rows-loading",
@@ -21819,7 +21858,7 @@
             return slots['group-header'] ? slots['group-header'](slotProps) : vue.createVNode(VDataTableGroupHeaderRow, vue.mergeProps({
               "key": `group-header_${item.id}`,
               "item": item
-            }, getPrefixedEventHandlers(attrs, ':group-header', () => slotProps)), slots);
+            }, getPrefixedEventHandlers(attrs, ':group-header', () => slotProps), groupHeaderRowProps), slots);
           }
           const slotProps = {
             index,
@@ -21841,6 +21880,8 @@
               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,
@@ -24498,6 +24539,10 @@
         return typeof v === 'boolean' || [1000, 1024].includes(Number(v));
       }
     },
+    truncateLength: {
+      type: [Number, String],
+      default: 22
+    },
     ...makeVInputProps({
       prependIcon: '$file'
     }),
@@ -24555,7 +24600,8 @@
           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 = vue.computed(() => {
         const fileCount = model.value?.length ?? 0;
@@ -24595,6 +24641,11 @@
           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();
@@ -27454,9 +27505,11 @@
   }, 'VSkeletonLoader');
   const VSkeletonLoader = genericComponent()({
     name: 'VSkeletonLoader',
+    inheritAttrs: false,
     props: makeVSkeletonLoaderProps(),
     setup(props, _ref) {
       let {
+        attrs,
         slots
       } = _ref;
       const {
@@ -27483,12 +27536,12 @@
           ariaLabel: t(props.loadingText),
           role: 'alert'
         };
-        return vue.createElementVNode("div", vue.mergeProps({
+        return vue.createElementVNode(vue.Fragment, null, [isLoading ? vue.createElementVNode("div", vue.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 {};
     }
@@ -35577,7 +35630,7 @@
       };
     });
   }
-  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
@@ -35875,7 +35928,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.3-dev.2025-07-31";
+  const version = "3.9.3-dev.2025-08-02";
 
   /* eslint-disable local-rules/sort-imports */