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

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.1-dev.2025-07-05
+* Vuetify v3.9.0-dev.2025-07-15
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -550,6 +550,10 @@
       return child.type !== vue.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();
@@ -1624,6 +1628,40 @@
     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') {
@@ -9524,6 +9562,11 @@
       const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
+      const role = vue.computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
+      const ariaSelected = vue.computed(() => {
+        if (!isSelectable.value) return undefined;
+        return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
+      });
       const roundedProps = vue.toRef(() => props.rounded || props.nav);
       const color = vue.toRef(() => props.color ?? props.activeColor);
       const variantProps = vue.toRef(() => ({
@@ -9627,7 +9670,8 @@
           }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
           "style": [colorStyles.value, dimensionStyles.value, props.style],
           "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-          "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
+          "aria-selected": ariaSelected.value,
+          "role": role.value,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, link.linkProps), {
@@ -9870,6 +9914,10 @@
       type: [Boolean, String, Array, Function],
       default: 'props'
     },
+    itemType: {
+      type: [Boolean, String, Array, Function],
+      default: 'type'
+    },
     returnObject: Boolean,
     valueComparator: Function
   }, 'list-items');
@@ -9877,6 +9925,7 @@
     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,
@@ -9884,15 +9933,16 @@
       ...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));
@@ -9934,7 +9984,7 @@
       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
@@ -10054,10 +10104,6 @@
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
-    itemType: {
-      type: String,
-      default: 'type'
-    },
     ...makeItemsProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
@@ -10117,6 +10163,7 @@
       const activeColor = vue.toRef(() => props.activeColor);
       const baseColor = vue.toRef(() => props.baseColor);
       const color = vue.toRef(() => props.color);
+      const isSelectable = vue.toRef(() => props.selectable || props.activatable);
       createList({
         filterable: props.filterable
       });
@@ -10186,7 +10233,7 @@
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
           "style": vue.normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
           "tabindex": props.disabled ? -1 : 0,
-          "role": "listbox",
+          "role": isSelectable.value ? 'listbox' : 'list',
           "aria-activedescendant": undefined,
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
@@ -13251,6 +13298,7 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -13276,7 +13324,7 @@
                     key: item.value,
                     onClick: () => select(item, null)
                   });
-                  if (item.raw.type === 'divider') {
+                  if (item.type === 'divider') {
                     return slots.divider?.({
                       props: item.raw,
                       index
@@ -13284,7 +13332,7 @@
                       "key": `divider-${index}`
                     }), null);
                   }
-                  if (item.raw.type === 'subheader') {
+                  if (item.type === 'subheader') {
                     return slots.subheader?.({
                       props: item.raw,
                       index
@@ -13452,7 +13500,7 @@
       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);
@@ -13870,6 +13918,7 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -13894,7 +13943,7 @@
                     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
@@ -13902,7 +13951,7 @@
                       "key": `divider-${index}`
                     }), null);
                   }
-                  if (item.raw.type === 'subheader') {
+                  if (item.type === 'subheader') {
                     return slots.subheader?.({
                       props: item.raw,
                       index
@@ -18957,6 +19006,7 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -18985,7 +19035,7 @@
                     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
@@ -18993,7 +19043,7 @@
                       "key": `divider-${index}`
                     }), null);
                   }
-                  if (item.raw.type === 'subheader') {
+                  if (item.type === 'subheader') {
                     return slots.subheader?.({
                       props: item.raw,
                       index
@@ -23335,7 +23385,8 @@
       }
       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) {
@@ -30131,6 +30182,8 @@
 
   const makeVTreeviewItemProps = propsFactory({
     loading: Boolean,
+    hideActions: Boolean,
+    indentLines: Array,
     toggleIcon: IconValue,
     ...makeVListItemProps({
       slim: true
@@ -30167,7 +30220,7 @@
       }
       useRender(() => {
         const listItemProps = VListItem.filterProps(props);
-        const hasPrepend = slots.prepend || props.toggleIcon;
+        const hasPrepend = slots.prepend || props.toggleIcon || props.indentLines;
         return vue.createVNode(VListItem, vue.mergeProps({
           "ref": vListItemRef
         }, listItemProps, {
@@ -30181,7 +30234,15 @@
         }), {
           ...slots,
           prepend: hasPrepend ? slotProps => {
-            return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VListItemAction, {
+            return vue.createElementVNode(vue.Fragment, null, [props.indentLines && props.indentLines.length > 0 ? vue.createElementVNode("div", {
+              "key": "indent-lines",
+              "class": "v-treeview-indent-lines",
+              "style": {
+                '--v-indent-parts': props.indentLines.length
+              }
+            }, [props.indentLines.map(type => vue.createElementVNode("div", {
+              "class": vue.normalizeClass(`v-treeview-indent-line v-treeview-indent-line--${type}`)
+            }, null))]) : '', !props.hideActions && vue.createVNode(VListItemAction, {
               "start": true
             }, {
               default: () => [props.toggleIcon ? vue.createVNode(VBtn, {
@@ -30233,10 +30294,15 @@
     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()({
@@ -30265,19 +30331,32 @@
           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 => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.createVNode(VCheckboxBtn, {
             "key": item.value,
@@ -30343,21 +30422,40 @@
             return vue.createVNode(VTreeviewItem, vue.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: () => vue.createVNode(VTreeviewChildren, vue.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
-        }) ?? vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, {
-          "value": props.returnObject ? vue.toRaw(item.raw) : itemProps.value
-        }), slotsWithItem);
+        }, () => {
+          if (item.type === 'divider') {
+            return renderSlot(slots.divider, {
+              props: item.raw
+            }, () => vue.createVNode(VDivider, item.props, null));
+          }
+          if (item.type === 'subheader') {
+            return renderSlot(slots.subheader, {
+              props: item.raw
+            }, () => vue.createVNode(VListSubheader, item.props, null));
+          }
+          return vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.leaf,
+            "value": props.returnObject ? vue.toRaw(item.raw) : itemProps.value
+          }), slotsWithItem);
+        });
       });
     }
   });
@@ -30373,16 +30471,17 @@
   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()({
@@ -30479,6 +30578,7 @@
       useRender(() => {
         const listProps = VList.filterProps(props);
         const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+        const indentLinesVariant = typeof props.indentLines === 'boolean' ? 'default' : props.indentLines;
         return vue.createVNode(VList, vue.mergeProps({
           "ref": vListRef
         }, listProps, {
@@ -30496,7 +30596,9 @@
           default: () => [vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "density": props.density,
             "returnObject": props.returnObject,
-            "items": items.value
+            "items": items.value,
+            "parentIndentLines": props.indentLines ? [] : undefined,
+            "indentLinesVariant": indentLinesVariant
           }), slots)]
         });
       });
@@ -31089,7 +31191,7 @@
           weekNumber: weekNumbers.value[wi],
           week
         }))), [weekNumbers.value[wi]]) : '', week.map(day => vue.createVNode(VCalendarMonthDay, vue.mergeProps({
-          "key": day.date.getTime()
+          "key": adapter.toJsDate(day.date).getTime()
         }, calendarDayProps, {
           "day": day,
           "title": adapter.format(day.date, 'dayOfMonth'),
@@ -33584,7 +33686,7 @@
       };
     });
   }
-  const version$1 = "3.9.0-beta.1-dev.2025-07-05";
+  const version$1 = "3.9.0-dev.2025-07-15";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -33882,7 +33984,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.0-beta.1-dev.2025-07-05";
+  const version = "3.9.0-dev.2025-07-15";
 
   /* eslint-disable local-rules/sort-imports */