@vuetify/nightly 3.9.0-beta.0-dev.2025-06-20 → 3.9.0-beta.1-dev.2025-06-26

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-beta.0-dev.2025-06-20
+* Vuetify v3.9.0-beta.1-dev.2025-06-26
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -9295,9 +9295,9 @@ const makeNestedProps = propsFactory({
 }, 'nested');
 const useNested = props => {
   let isUnmounted = false;
-  const children = ref(new Map());
-  const parents = ref(new Map());
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+  const children = shallowRef(new Map());
+  const parents = shallowRef(new Map());
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(Array.isArray(v) ? v.map(i => toRaw(i)) : v), v => [...v.values()]);
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy;
     if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -9351,7 +9351,7 @@ const useNested = props => {
   });
   function getPath(id) {
     const path = [];
-    let parent = id;
+    let parent = toRaw(id);
     while (parent != null) {
       path.unshift(parent);
       parent = parents.value.get(parent);
@@ -9494,7 +9494,7 @@ const useNested = props => {
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
   const uidSymbol = Symbol('nested item');
-  const computedId = computed(() => toValue(id) ?? uidSymbol);
+  const computedId = computed(() => toRaw(toValue(id)) ?? uidSymbol);
   const item = {
     ...parent,
     id: computedId,
@@ -9503,10 +9503,10 @@ const useNestedItem = (id, isGroup) => {
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
-    isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
+    isActivated: computed(() => parent.root.activated.value.has(computedId.value)),
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
-    isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
+    isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator
   };
@@ -10219,7 +10219,7 @@ function useItems(props) {
 function transformItem$2(props, item) {
   const type = getPropertyFromItem(item, props.itemType, 'item');
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
-  const value = getPropertyFromItem(item, props.itemValue, undefined);
+  const value = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemValue, undefined);
   const children = getPropertyFromItem(item, props.itemChildren);
   const itemProps = props.itemProps === true ? omit(item, ['children']) : getPropertyFromItem(item, props.itemProps);
   const _props = {
@@ -12371,11 +12371,7 @@ const VField = genericComponent()({
         default: slots.loader
       }), hasPrepend && createElementVNode("div", {
         "key": "prepend",
-        "class": "v-field__prepend-inner",
-        "onMousedown": e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }
+        "class": "v-field__prepend-inner"
       }, [props.prependInnerIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prependInner",
@@ -12444,11 +12440,7 @@ const VField = genericComponent()({
         })]), [[vShow, props.dirty]])]
       }), hasAppend && createElementVNode("div", {
         "key": "append",
-        "class": "v-field__append-inner",
-        "onMousedown": e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }
+        "class": "v-field__append-inner"
       }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "appendInner",
@@ -15694,6 +15686,7 @@ const VCarousel = genericComponent()({
               }) : createVNode(VBtn, mergeProps(item, props), null);
             })]
           })]), props.progress && createVNode(VProgressLinear, {
+            "absolute": true,
             "class": "v-carousel__progress",
             "color": typeof props.progress === 'string' ? props.progress : undefined,
             "modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
@@ -22608,8 +22601,11 @@ function useCalendar(props) {
   }, v => adapter.getMonth(v));
   const weekDays = computed(() => {
     const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
-    // Always generate all days, regardless of props.weekdays
-    return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7);
+    return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
+  });
+  const weekdayLabels = computed(() => {
+    const labels = adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat);
+    return weekDays.value.map(day => labels[day]);
   });
   const weeksInMonth = computed(() => {
     const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
@@ -22690,7 +22686,7 @@ function useCalendar(props) {
     if (typeof props.allowedDates === 'function') {
       return !props.allowedDates(date);
     }
-    return !props.weekdays.includes(adapter.toJsDate(date).getDay());
+    return false;
   }
   return {
     displayValue,
@@ -22700,6 +22696,7 @@ function useCalendar(props) {
     model,
     weeksInMonth,
     weekDays,
+    weekdayLabels,
     weekNumbers
   };
 }
@@ -22738,7 +22735,9 @@ const VDatePickerMonth = genericComponent()({
     const {
       daysInMonth,
       model,
-      weekNumbers
+      weekNumbers,
+      weekDays,
+      weekdayLabels
     } = useCalendar(props);
     const adapter = useDate();
     const rangeStart = shallowRef();
@@ -22810,7 +22809,10 @@ const VDatePickerMonth = genericComponent()({
       }
     }
     useRender(() => createElementVNode("div", {
-      "class": "v-date-picker-month"
+      "class": "v-date-picker-month",
+      "style": {
+        '--v-date-picker-days-in-week': weekDays.value.length
+      }
     }, [props.showWeek && createElementVNode("div", {
       "key": "weeks",
       "class": "v-date-picker-month__weeks"
@@ -22826,7 +22828,7 @@ const VDatePickerMonth = genericComponent()({
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat).map(weekDay => createElementVNode("div", {
+      }, [!props.hideWeekdays && weekdayLabels.value.map(weekDay => createElementVNode("div", {
         "class": normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -25506,6 +25508,8 @@ function useHold(_ref) {
   function holdStart(value) {
     holdStop();
     tick(value);
+    window.addEventListener('pointerup', holdStop);
+    document.addEventListener('blur', holdStop);
     timeout = window.setTimeout(() => {
       interval = window.setInterval(() => tick(value), HOLD_REPEAT);
     }, HOLD_DELAY);
@@ -25513,6 +25517,8 @@ function useHold(_ref) {
   function holdStop() {
     window.clearTimeout(timeout);
     window.clearInterval(interval);
+    window.removeEventListener('pointerup', holdStop);
+    document.removeEventListener('blur', holdStop);
   }
   function tick(value) {
     toggleUpDown(value === 'up');
@@ -25648,7 +25654,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     const decrementSlotProps = {
@@ -25656,7 +25662,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     watch(() => props.precision, () => formatInputValue());
@@ -25737,7 +25743,6 @@ const VNumberInput = genericComponent()({
       const el = e.currentTarget;
       el?.releasePointerCapture(e.pointerId);
       e.preventDefault();
-      e.stopPropagation();
       holdStop();
     }
     function onUpControlMousedown(e) {
@@ -25754,11 +25759,6 @@ const VNumberInput = genericComponent()({
       e.stopPropagation();
       holdStart('down');
     }
-    function onControlPointerCancel(e) {
-      const el = e.currentTarget;
-      el?.releasePointerCapture(e.pointerId);
-      holdStop();
-    }
     function clampModel() {
       if (controlsDisabled.value) return;
       if (!vTextFieldRef.value) return;
@@ -25805,7 +25805,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onUpControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -25835,7 +25835,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onDownControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -30040,7 +30040,7 @@ const VTreeviewItem = genericComponent()({
       emit('toggleExpand', e);
     }
     useRender(() => {
-      const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
+      const listItemProps = VListItem.filterProps(props);
       const hasPrepend = slots.prepend || props.toggleIcon;
       return createVNode(VListItem, mergeProps({
         "ref": vListItemRef
@@ -30051,12 +30051,12 @@ const VTreeviewItem = genericComponent()({
           'v-treeview-item--filtered': isFiltered.value
         }, props.class],
         "ripple": false,
-        "onClick": props.onClick ?? activateGroupActivator
+        "onClick": activateGroupActivator
       }), {
         ...slots,
         prepend: hasPrepend ? slotProps => {
           return createElementVNode(Fragment, null, [createVNode(VListItemAction, {
-            "start": false
+            "start": true
           }, {
             default: () => [props.toggleIcon ? createVNode(VBtn, {
               "density": "compact",
@@ -30065,13 +30065,11 @@ const VTreeviewItem = genericComponent()({
               "variant": "text",
               "onClick": onClickAction
             }, {
-              loader() {
-                return createVNode(VProgressCircular, {
-                  "indeterminate": "disable-shrink",
-                  "size": "20",
-                  "width": "2"
-                }, null);
-              }
+              loader: () => createVNode(VProgressCircular, {
+                "indeterminate": "disable-shrink",
+                "size": "20",
+                "width": "2"
+              }, null)
             }) : createElementVNode("div", {
               "class": "v-treeview-item__level"
             }, null)]
@@ -30079,7 +30077,7 @@ const VTreeviewItem = genericComponent()({
         } : undefined
       });
     });
-    return {};
+    return forwardRefs({}, vListItemRef);
   }
 });
 
@@ -30104,6 +30102,7 @@ const makeVTreeviewChildrenProps = propsFactory({
   falseIcon: IconValue,
   trueIcon: IconValue,
   returnObject: Boolean,
+  activatable: Boolean,
   selectable: Boolean,
   selectedColor: String,
   selectStrategy: [String, Function, Object],
@@ -30122,7 +30121,8 @@ const VTreeviewChildren = genericComponent()({
       slots
     } = _ref;
     const isLoading = reactive(new Set());
-    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable));
+    const activatorItems = ref([]);
+    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable && !props.activatable));
     async function checkChildren(item) {
       try {
         if (!props.items?.length || !props.loadChildren) return;
@@ -30136,7 +30136,7 @@ const VTreeviewChildren = genericComponent()({
     }
     function selectItem(select, isSelected) {
       if (props.selectable) {
-        select(!isSelected);
+        select(isSelected);
       }
     }
     return () => slots.default?.() ?? props.items?.map((item, index) => {
@@ -30164,7 +30164,8 @@ const VTreeviewChildren = genericComponent()({
           "indeterminateIcon": props.indeterminateIcon,
           "falseIcon": props.falseIcon,
           "trueIcon": props.trueIcon,
-          "onClick": withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']),
+          "onUpdate:modelValue": v => selectItem(slotProps.select, v),
+          "onClick": e => e.stopPropagation(),
           "onKeydown": e => {
             if (!['Enter', 'Space'].includes(e.key)) return;
             e.stopPropagation();
@@ -30211,9 +30212,11 @@ const VTreeviewChildren = genericComponent()({
             ...activatorProps,
             value: itemProps?.value,
             onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
-            onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : undefined
+            onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
           };
-          return createVNode(VTreeviewItem, mergeProps(listItemProps, {
+          return createVNode(VTreeviewItem, mergeProps({
+            "ref": el => activatorItems.value[index] = el
+          }, listItemProps, {
             "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
           }), slotsWithItem);
@@ -30890,7 +30893,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-beta.0-dev.2025-06-20";
+const version$1 = "3.9.0-beta.1-dev.2025-06-26";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30915,7 +30918,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-beta.0-dev.2025-06-20";
+const version = "3.9.0-beta.1-dev.2025-06-26";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };