@vuetify/nightly 3.9.0-beta.1-dev.2025-07-04 → 3.9.0-dev.2025-07-08

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.1-dev.2025-07-04
+* Vuetify v3.9.0-dev.2025-07-08
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -469,6 +469,10 @@ function ensureValidVNode(vnodes) {
     return child.type !== Fragment || ensureValidVNode(child.children);
   }) ? vnodes : null;
 }
+function renderSlot(slot, props, fallback) {
+  // TODO: check if slot returns elements: #18308
+  return slot?.(props) ?? fallback?.(props);
+}
 function defer(timeout, cb) {
   if (!IN_BROWSER || timeout === 0) {
     cb();
@@ -1614,6 +1618,40 @@ function isPotentiallyScrollable(el) {
   return ['scroll', 'auto'].includes(style.overflowY);
 }
 
+// Types
+
+function getIndentLines(_ref) {
+  let {
+    depth,
+    isLast,
+    isLastGroup,
+    leafLinks,
+    separateRoots,
+    parentIndentLines,
+    variant
+  } = _ref;
+  if (!parentIndentLines || !depth) {
+    return {
+      leaf: undefined,
+      node: undefined,
+      children: parentIndentLines
+    };
+  }
+  if (variant === 'simple') {
+    return {
+      leaf: [...parentIndentLines, 'line'],
+      node: [...parentIndentLines, 'line'],
+      children: [...parentIndentLines, 'line']
+    };
+  }
+  const isLastLeaf = isLast && (!isLastGroup || separateRoots || depth > 1);
+  return {
+    leaf: [...parentIndentLines, isLastLeaf ? 'last-leaf' : 'leaf', ...(leafLinks ? ['leaf-link'] : [])],
+    node: [...parentIndentLines, isLastLeaf ? 'last-leaf' : 'leaf'],
+    children: [...parentIndentLines, isLastLeaf ? 'none' : 'line']
+  };
+}
+
 function isFixedPosition(el) {
   while (el) {
     if (window.getComputedStyle(el).position === 'fixed') {
@@ -10144,6 +10182,10 @@ const makeItemsProps = propsFactory({
     type: [Boolean, String, Array, Function],
     default: 'props'
   },
+  itemType: {
+    type: [Boolean, String, Array, Function],
+    default: 'type'
+  },
   returnObject: Boolean,
   valueComparator: Function
 }, 'list-items');
@@ -10151,6 +10193,7 @@ function transformItem$3(props, item) {
   const title = getPropertyFromItem(item, props.itemTitle, item);
   const value = getPropertyFromItem(item, props.itemValue, title);
   const children = getPropertyFromItem(item, props.itemChildren);
+  const type = getPropertyFromItem(item, props.itemType, 'item');
   const itemProps = props.itemProps === true ? typeof item === 'object' && item != null && !Array.isArray(item) ? 'children' in item ? omit(item, ['children']) : item : undefined : getPropertyFromItem(item, props.itemProps);
   const _props = {
     title,
@@ -10158,15 +10201,16 @@ function transformItem$3(props, item) {
     ...itemProps
   };
   return {
+    type,
     title: String(_props.title ?? ''),
     value: _props.value,
     props: _props,
-    children: Array.isArray(children) ? transformItems$3(props, children) : undefined,
+    children: type === 'item' && Array.isArray(children) ? transformItems$3(props, children) : undefined,
     raw: item
   };
 }
 function transformItems$3(props, items) {
-  const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
+  const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType', 'returnObject', 'valueComparator']);
   const array = [];
   for (const item of items) {
     array.push(transformItem$3(_props, item));
@@ -10208,7 +10252,7 @@ function useItems(props) {
     const _returnObject = props.returnObject;
     const hasValueComparator = !!props.valueComparator;
     const valueComparator = props.valueComparator || deepEqual;
-    const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
+    const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'itemType', 'returnObject', 'valueComparator']);
     const returnValue = [];
     main: for (const v of value) {
       // When the model value is null, return an InternalItem
@@ -10328,10 +10372,6 @@ const makeVListProps = propsFactory({
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
-  itemType: {
-    type: String,
-    default: 'type'
-  },
   ...makeItemsProps(),
   ...makeRoundedProps(),
   ...makeTagProps(),
@@ -13550,7 +13590,7 @@ const VSelect = genericComponent()({
                   key: item.value,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -13558,7 +13598,7 @@ const VSelect = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -13726,7 +13766,7 @@ function filterItems(items, query, options) {
     let match = -1;
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
       if (typeof item === 'object') {
-        if (['divider', 'subheader'].includes(item.raw?.type)) {
+        if (item.type === 'divider' || item.type === 'subheader') {
           continue;
         }
         const filterKeys = keys || Object.keys(transformed);
@@ -14168,7 +14208,7 @@ const VAutocomplete = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -14176,7 +14216,7 @@ const VAutocomplete = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -19259,7 +19299,7 @@ const VCombobox = genericComponent()({
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
-                if (item.raw.type === 'divider') {
+                if (item.type === 'divider') {
                   return slots.divider?.({
                     props: item.raw,
                     index
@@ -19267,7 +19307,7 @@ const VCombobox = genericComponent()({
                     "key": `divider-${index}`
                   }), null);
                 }
-                if (item.raw.type === 'subheader') {
+                if (item.type === 'subheader') {
                   return slots.subheader?.({
                     props: item.raw,
                     index
@@ -23609,7 +23649,8 @@ const VDatePicker = genericComponent()({
     }
     function allowedMonths(month) {
       if (typeof props.allowedDates === 'function') {
-        const startOfMonth = adapter.parseISO(`${year.value}-${month + 1}-01`);
+        const monthTwoDigits = String(month + 1).padStart(2, '0');
+        const startOfMonth = adapter.parseISO(`${year.value}-${monthTwoDigits}-01`);
         return isAllowedInRange(startOfMonth, adapter.endOfMonth(startOfMonth));
       }
       if (Array.isArray(props.allowedDates) && props.allowedDates.length) {
@@ -30405,6 +30446,8 @@ const VTreeviewSymbol = Symbol.for('vuetify:v-treeview');
 
 const makeVTreeviewItemProps = propsFactory({
   loading: Boolean,
+  hideActions: Boolean,
+  indentLines: Array,
   toggleIcon: IconValue,
   ...makeVListItemProps({
     slim: true
@@ -30441,7 +30484,7 @@ const VTreeviewItem = genericComponent()({
     }
     useRender(() => {
       const listItemProps = VListItem.filterProps(props);
-      const hasPrepend = slots.prepend || props.toggleIcon;
+      const hasPrepend = slots.prepend || props.toggleIcon || props.indentLines;
       return createVNode(VListItem, mergeProps({
         "ref": vListItemRef
       }, listItemProps, {
@@ -30455,7 +30498,15 @@ const VTreeviewItem = genericComponent()({
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
-          return createElementVNode(Fragment, null, [createVNode(VListItemAction, {
+          return createElementVNode(Fragment, null, [props.indentLines && props.indentLines.length > 0 ? createElementVNode("div", {
+            "key": "indent-lines",
+            "class": "v-treeview-indent-lines",
+            "style": {
+              '--v-indent-parts': props.indentLines.length
+            }
+          }, [props.indentLines.map(type => createElementVNode("div", {
+            "class": normalizeClass(`v-treeview-indent-line v-treeview-indent-line--${type}`)
+          }, null))]) : '', !props.hideActions && createVNode(VListItemAction, {
             "start": true
           }, {
             default: () => [props.toggleIcon ? createVNode(VBtn, {
@@ -30507,10 +30558,15 @@ const makeVTreeviewChildrenProps = propsFactory({
   selectedColor: String,
   selectStrategy: [String, Function, Object],
   index: Number,
+  isLastGroup: Boolean,
+  separateRoots: Boolean,
+  parentIndentLines: Array,
+  indentLinesVariant: String,
   path: {
     type: Array,
     default: () => []
   },
+  ...pick(makeVTreeviewItemProps(), ['hideActions']),
   ...makeDensityProps()
 }, 'VTreeviewChildren');
 const VTreeviewChildren = genericComponent()({
@@ -30539,19 +30595,32 @@ const VTreeviewChildren = genericComponent()({
         select(isSelected);
       }
     }
-    return () => slots.default?.() ?? props.items?.map((item, index) => {
+    return () => slots.default?.() ?? props.items?.map((item, index, items) => {
       const {
         children,
         props: itemProps
       } = item;
       const loading = isLoading.has(item.value);
+      const nextItemHasChildren = !!items.at(index + 1)?.children;
+      const depth = props.path?.length ?? 0;
+      const isLast = items.length - 1 === index;
       const treeItemProps = {
         index,
-        depth: props.path?.length ?? 0,
+        depth,
         isFirst: index === 0,
-        isLast: props.items ? props.items.length - 1 === index : false,
-        path: [...props.path, index]
+        isLast,
+        path: [...props.path, index],
+        hideAction: props.hideActions
       };
+      const indentLines = getIndentLines({
+        depth,
+        isLast,
+        isLastGroup: props.isLastGroup,
+        leafLinks: !props.hideActions,
+        separateRoots: props.separateRoots,
+        parentIndentLines: props.parentIndentLines,
+        variant: props.indentLinesVariant
+      });
       const slotsWithItem = {
         prepend: slotProps => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
           "key": item.value,
@@ -30617,21 +30686,40 @@ const VTreeviewChildren = genericComponent()({
           return createVNode(VTreeviewItem, mergeProps({
             "ref": el => activatorItems.value[index] = el
           }, listItemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.node,
             "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
           }), slotsWithItem);
         },
         default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "items": children,
+          "indentLinesVariant": props.indentLinesVariant,
+          "parentIndentLines": indentLines.children,
+          "isLastGroup": nextItemHasChildren,
           "returnObject": props.returnObject
         }), slots)
-      }) : slots.item?.({
+      }) : renderSlot(slots.item, {
         props: itemProps,
         item: item.raw,
         internalItem: item
-      }) ?? createVNode(VTreeviewItem, mergeProps(itemProps, {
-        "value": props.returnObject ? toRaw(item.raw) : itemProps.value
-      }), slotsWithItem);
+      }, () => {
+        if (item.type === 'divider') {
+          return renderSlot(slots.divider, {
+            props: item.raw
+          }, () => createVNode(VDivider, item.props, null));
+        }
+        if (item.type === 'subheader') {
+          return renderSlot(slots.subheader, {
+            props: item.raw
+          }, () => createVNode(VListSubheader, item.props, null));
+        }
+        return createVNode(VTreeviewItem, mergeProps(itemProps, {
+          "hideActions": props.hideActions,
+          "indentLines": indentLines.leaf,
+          "value": props.returnObject ? toRaw(item.raw) : itemProps.value
+        }), slotsWithItem);
+      });
     });
   }
 });
@@ -30647,16 +30735,17 @@ function flatten(items) {
 const makeVTreeviewProps = propsFactory({
   fluid: Boolean,
   openAll: Boolean,
+  indentLines: [Boolean, String],
   search: String,
   ...makeFilterProps({
     filterKeys: ['title']
   }),
-  ...omit(makeVTreeviewChildrenProps(), ['index', 'path']),
+  ...omit(makeVTreeviewChildrenProps(), ['index', 'path', 'indentLinesVariant', 'parentIndentLines', 'isLastGroup']),
   ...omit(makeVListProps({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true
-  }), ['itemType', 'nav', 'openStrategy']),
+  }), ['nav', 'openStrategy']),
   modelValue: Array
 }, 'VTreeview');
 const VTreeview = genericComponent()({
@@ -30753,6 +30842,7 @@ const VTreeview = genericComponent()({
     useRender(() => {
       const listProps = VList.filterProps(props);
       const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+      const indentLinesVariant = typeof props.indentLines === 'boolean' ? 'default' : props.indentLines;
       return createVNode(VList, mergeProps({
         "ref": vListRef
       }, listProps, {
@@ -30770,7 +30860,9 @@ const VTreeview = genericComponent()({
         default: () => [createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "density": props.density,
           "returnObject": props.returnObject,
-          "items": items.value
+          "items": items.value,
+          "parentIndentLines": props.indentLines ? [] : undefined,
+          "indentLinesVariant": indentLinesVariant
         }), slots)]
       });
     });
@@ -31290,7 +31382,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-beta.1-dev.2025-07-04";
+const version$1 = "3.9.0-dev.2025-07-08";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31315,7 +31407,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-beta.1-dev.2025-07-04";
+const version = "3.9.0-dev.2025-07-08";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };