vuetify 3.8.9 → 3.8.11

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.9
+* Vuetify v3.8.11
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -609,6 +609,13 @@ function camelizeProps(props) {
   }
   return out;
 }
+function onlyDefinedProps(props) {
+  const booleanAttributes = ['checked', 'disabled'];
+  return Object.fromEntries(Object.entries(props).filter(_ref => {
+    let [key, v] = _ref;
+    return booleanAttributes.includes(key) ? !!v : v !== undefined;
+  }));
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -933,7 +940,7 @@ function APCAcontrast(text, background) {
     // WoB should always return negative value.
 
     const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
-    outputContrast = SAPC > -1e-3 ? 0.0 : SAPC > -0.078 ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+    outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
   }
   return outputContrast * 100;
 }
@@ -3321,10 +3328,10 @@ const MaybeTransition = (props, _ref) => {
   } = isObject(transition) ? transition : {};
   let transitionProps;
   if (isObject(transition)) {
-    transitionProps = mergeProps(customProps, JSON.parse(JSON.stringify({
+    transitionProps = mergeProps(customProps, onlyDefinedProps({
       disabled,
       group
-    })), rest);
+    }), rest);
   } else {
     transitionProps = mergeProps({
       name: disabled || !transition ? '' : transition
@@ -4393,6 +4400,7 @@ function useGroup(props, injectKey) {
     } else {
       const isSelected = selected.value.includes(id);
       if (props.mandatory && isSelected) return;
+      if (!isSelected && !value) return;
       selected.value = value ?? !isSelected ? [id] : [];
     }
   }
@@ -4827,7 +4835,7 @@ function useIntersectionObserver(callback, options) {
     const observer = new IntersectionObserver(entries => {
       isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
     }, options);
-    onBeforeUnmount(() => {
+    onScopeDispose(() => {
       observer.disconnect();
     });
     watch(intersectionRef, (newValue, oldValue) => {
@@ -5358,9 +5366,9 @@ function useBackButton(router, cb) {
 
 function useSelectLink(link, select) {
   watch(() => link.isActive?.value, isActive => {
-    if (link.isLink.value && isActive && select) {
+    if (link.isLink.value && isActive != null && select) {
       nextTick(() => {
-        select(true);
+        select(isActive);
       });
     }
   }, {
@@ -8974,6 +8982,7 @@ const makeVListGroupProps = propsFactory({
     type: IconValue,
     default: '$expand'
   },
+  rawId: [String, Number],
   prependIcon: IconValue,
   appendIcon: IconValue,
   fluid: Boolean,
@@ -8995,13 +9004,12 @@ const VListGroup = genericComponent()({
       open,
       id: _id
     } = useNestedItem(() => props.value, true);
-    const id = computed(() => `v-list-group--id-${String(_id.value)}`);
+    const id = computed(() => `v-list-group--id-${String(props.rawId ?? _id.value)}`);
     const list = useList();
     const {
       isBooted
     } = useSsrBoot();
     function onClick(e) {
-      e.stopPropagation();
       if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
       open(!isOpen.value, e);
     }
@@ -9519,9 +9527,10 @@ const VListChildren = genericComponent()({
         }) : undefined
       };
       const listGroupProps = VListGroup.filterProps(itemProps);
-      return children ? createVNode(VListGroup, mergeProps({
-        "value": itemProps?.value
-      }, listGroupProps), {
+      return children ? createVNode(VListGroup, mergeProps(listGroupProps, {
+        "value": props.returnObject ? item : itemProps?.value,
+        "rawId": itemProps?.value
+      }), {
         activator: _ref3 => {
           let {
             props: activatorProps
@@ -9700,7 +9709,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 = {
@@ -12049,6 +12058,16 @@ const VField = genericComponent()({
   }
 });
 
+function useAutofocus(props) {
+  function onIntersect(isIntersecting, entries) {
+    if (!props.autofocus || !isIntersecting) return;
+    entries[0].target?.focus?.();
+  }
+  return {
+    onIntersect
+  };
+}
+
 // Types
 
 const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
@@ -12095,6 +12114,9 @@ const VTextField = genericComponent()({
       focus,
       blur
     } = useFocus(props);
+    const {
+      onIntersect
+    } = useAutofocus(props);
     const counterValue = computed(() => {
       return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : (model.value ?? '').toString().length;
     });
@@ -12104,10 +12126,6 @@ const VTextField = genericComponent()({
       return props.counter;
     });
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
-    function onIntersect(isIntersecting, entries) {
-      if (!props.autofocus || !isIntersecting) return;
-      entries[0].target?.focus?.();
-    }
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
@@ -15199,6 +15217,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
@@ -22079,8 +22098,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);
+    return weekDays.value.map(day => labels[day]);
   });
   const weeksInMonth = computed(() => {
     const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
@@ -22161,7 +22183,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,
@@ -22171,6 +22193,7 @@ function useCalendar(props) {
     model,
     weeksInMonth,
     weekDays,
+    weekdayLabels,
     weekNumbers
   };
 }
@@ -22209,7 +22232,9 @@ const VDatePickerMonth = genericComponent()({
     const {
       daysInMonth,
       model,
-      weekNumbers
+      weekNumbers,
+      weekDays,
+      weekdayLabels
     } = useCalendar(props);
     const adapter = useDate();
     const rangeStart = shallowRef();
@@ -22281,7 +22306,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"
@@ -22297,7 +22325,7 @@ const VDatePickerMonth = genericComponent()({
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).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 = {
@@ -22473,9 +22501,7 @@ const VDatePickerYears = genericComponent()({
     const yearRef = templateRef();
     onMounted(async () => {
       await nextTick();
-      yearRef.el?.scrollIntoView({
-        block: 'center'
-      });
+      yearRef.el?.focus();
     });
     function isYearAllowed(year) {
       if (Array.isArray(props.allowedYears) && props.allowedYears.length) {
@@ -22611,8 +22637,16 @@ const VDatePicker = genericComponent()({
       return value && adapter.isValid(value) ? value : today;
     });
     const headerColor = toRef(() => props.headerColor ?? props.color);
-    const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
-    const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
+    const _month = useProxiedModel(props, 'month');
+    const month = computed({
+      get: () => Number(_month.value ?? adapter.getMonth(adapter.startOfMonth(internal.value))),
+      set: v => _month.value = v
+    });
+    const _year = useProxiedModel(props, 'year');
+    const year = computed({
+      get: () => Number(_year.value ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))),
+      set: v => _year.value = v
+    });
     const isReversing = shallowRef(false);
     const header = computed(() => {
       if (props.multiple && model.value.length > 1) {
@@ -22696,9 +22730,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value++;
         month.value = 0;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickPrev() {
       if (month.value > 0) {
@@ -22706,9 +22740,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value--;
         month.value = 11;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickDate() {
       viewMode.value = 'month';
@@ -22719,13 +22753,11 @@ const VDatePicker = genericComponent()({
     function onClickYear() {
       viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
     }
-    function onUpdateMonth(value) {
+    function onUpdateMonth() {
       if (viewMode.value === 'months') onClickMonth();
-      emit('update:month', value);
     }
-    function onUpdateYear(value) {
+    function onUpdateYear() {
       if (viewMode.value === 'year') onClickYear();
-      emit('update:year', value);
     }
     watch(model, (val, oldVal) => {
       const arrBefore = wrapInArray(oldVal);
@@ -22737,11 +22769,11 @@ const VDatePicker = genericComponent()({
       const newYear = adapter.getYear(after);
       if (newMonth !== month.value) {
         month.value = newMonth;
-        onUpdateMonth(month.value);
+        onUpdateMonth();
       }
       if (newYear !== year.value) {
         year.value = newYear;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
       isReversing.value = adapter.isBefore(before, after);
     });
@@ -24895,6 +24927,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);
@@ -24902,6 +24936,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');
@@ -25013,7 +25049,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     const decrementSlotProps = {
@@ -25021,7 +25057,7 @@ const VNumberInput = genericComponent()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown,
-        onPointercancel: onControlPointerCancel
+        onPointercancel: onControlMouseup
       }
     };
     watch(() => props.precision, () => formatInputValue());
@@ -25101,7 +25137,6 @@ const VNumberInput = genericComponent()({
       const el = e.currentTarget;
       el?.releasePointerCapture(e.pointerId);
       e.preventDefault();
-      e.stopPropagation();
       holdStop();
     }
     function onUpControlMousedown(e) {
@@ -25118,11 +25153,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;
@@ -25172,7 +25202,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onUpControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -25202,7 +25232,7 @@ const VNumberInput = genericComponent()({
           "onClick": onControlClick,
           "onPointerdown": onDownControlMousedown,
           "onPointerup": onControlMouseup,
-          "onPointercancel": onControlPointerCancel,
+          "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
           "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
@@ -25349,6 +25379,21 @@ const VOtpInput = genericComponent()({
     const contentRef = ref();
     const inputRef = ref([]);
     const current = computed(() => inputRef.value[focusIndex.value]);
+    const intersectScope = effectScope();
+    intersectScope.run(() => {
+      const {
+        intersectionRef,
+        isIntersecting
+      } = useIntersectionObserver();
+      watch(isIntersecting, v => {
+        if (!v) return;
+        intersectionRef.value?.focus();
+        intersectScope.stop();
+      });
+      watchEffect(() => {
+        intersectionRef.value = inputRef.value[0];
+      });
+    });
     function onInput() {
       // The maxlength attribute doesn't work for the number type input, so the text type is used.
       // The following logic simulates the behavior of a number input.
@@ -28095,6 +28140,9 @@ const VTextarea = genericComponent()({
       focus,
       blur
     } = useFocus(props);
+    const {
+      onIntersect
+    } = useAutofocus(props);
     const counterValue = computed(() => {
       return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value || '').toString().length;
     });
@@ -28103,10 +28151,6 @@ const VTextarea = genericComponent()({
       if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
       return props.counter;
     });
-    function onIntersect(isIntersecting, entries) {
-      if (!props.autofocus || !isIntersecting) return;
-      entries[0].target?.focus?.();
-    }
     const vInputRef = ref();
     const vFieldRef = ref();
     const controlHeight = shallowRef('');
@@ -29823,6 +29867,7 @@ const VFileUploadItem = genericComponent()({
         "class": "v-file-upload-item"
       }), {
         ...slots,
+        title: () => props?.title ?? props.file?.name,
         prepend: slotProps => createElementVNode(Fragment, null, [!slots.prepend ? createVNode(VAvatar, {
           "icon": props.fileIcon,
           "image": preview.value,
@@ -30671,6 +30716,7 @@ const VTimePickerClock = genericComponent()({
     const isDragging = ref(false);
     const valueOnMouseDown = ref(null);
     const valueOnMouseUp = ref(null);
+    const emitChangeDebounced = debounce(value => emit('change', value), 750);
     const {
       textColorClasses,
       textColorStyles
@@ -30716,6 +30762,7 @@ const VTimePickerClock = genericComponent()({
       if (value !== props.displayedValue) {
         update(value);
       }
+      emitChangeDebounced(value);
     }
     function isInner(value) {
       return props.double && value - props.min >= roundCount.value;
@@ -31316,6 +31363,7 @@ const VTreeviewItem = genericComponent()({
     }
     function onClickAction(e) {
       e.preventDefault();
+      e.stopPropagation();
       emit('toggleExpand', e);
     }
     useRender(() => {
@@ -31461,7 +31509,8 @@ const VTreeviewChildren = genericComponent()({
       const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
       const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
       return children ? createVNode(VTreeviewGroup, mergeProps(treeviewGroupProps, {
-        "value": props.returnObject ? item.raw : treeviewGroupProps?.value
+        "value": props.returnObject ? item.raw : treeviewGroupProps?.value,
+        "rawId": treeviewGroupProps?.value
       }), {
         activator: _ref2 => {
           let {
@@ -32149,7 +32198,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.9";
+const version$1 = "3.8.11";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32447,7 +32496,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.9";
+const version = "3.8.11";
 
 /* eslint-disable local-rules/sort-imports */