vuetify 3.8.9 → 3.8.10

package/dist/vuetify.d.ts

@@ -7573,6 +7573,7 @@ declare const VListGroup: {
         activeColor?: string | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        rawId?: string | number | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -7632,6 +7633,7 @@ declare const VListGroup: {
         activeColor?: string | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        rawId?: string | number | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -7682,6 +7684,7 @@ declare const VListGroup: {
     activeColor?: string | undefined;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
+    rawId?: string | number | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -7739,6 +7742,7 @@ declare const VListGroup: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    rawId: (StringConstructor | NumberConstructor)[];
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     fluid: BooleanConstructor;
@@ -7766,6 +7770,7 @@ declare const VListGroup: {
         type: vue.PropType<IconValue>;
         default: string;
     };
+    rawId: (StringConstructor | NumberConstructor)[];
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     fluid: BooleanConstructor;
@@ -85908,48 +85913,41 @@ declare module 'vue' {
     $children?: VNodeChild
   }
   export interface GlobalComponents {
-    VApp: VApp
     VAlert: VAlert
     VAlertTitle: VAlertTitle
-    VAutocomplete: VAutocomplete
-    VAvatar: VAvatar
+    VApp: VApp
     VAppBar: VAppBar
     VAppBarNavIcon: VAppBarNavIcon
     VAppBarTitle: VAppBarTitle
-    VBadge: VBadge
+    VAvatar: VAvatar
+    VAutocomplete: VAutocomplete
     VBanner: VBanner
     VBannerActions: VBannerActions
     VBannerText: VBannerText
     VBottomSheet: VBottomSheet
+    VBadge: VBadge
+    VBottomNavigation: VBottomNavigation
+    VBtnGroup: VBtnGroup
     VBreadcrumbs: VBreadcrumbs
     VBreadcrumbsItem: VBreadcrumbsItem
     VBreadcrumbsDivider: VBreadcrumbsDivider
-    VBtn: VBtn
-    VBottomNavigation: VBottomNavigation
     VBtnToggle: VBtnToggle
-    VCarousel: VCarousel
-    VCarouselItem: VCarouselItem
-    VCheckbox: VCheckbox
-    VCheckboxBtn: VCheckboxBtn
-    VBtnGroup: VBtnGroup
-    VChipGroup: VChipGroup
-    VCode: VCode
     VCard: VCard
     VCardActions: VCardActions
     VCardItem: VCardItem
     VCardSubtitle: VCardSubtitle
     VCardText: VCardText
     VCardTitle: VCardTitle
-    VColorPicker: VColorPicker
-    VCounter: VCounter
-    VDataTable: VDataTable
-    VDataTableHeaders: VDataTableHeaders
-    VDataTableFooter: VDataTableFooter
-    VDataTableRows: VDataTableRows
-    VDataTableRow: VDataTableRow
-    VDataTableVirtual: VDataTableVirtual
-    VDataTableServer: VDataTableServer
+    VCheckbox: VCheckbox
+    VCheckboxBtn: VCheckboxBtn
+    VChipGroup: VChipGroup
+    VCode: VCode
+    VCarousel: VCarousel
+    VCarouselItem: VCarouselItem
+    VChip: VChip
     VCombobox: VCombobox
+    VCounter: VCounter
+    VColorPicker: VColorPicker
     VDatePicker: VDatePicker
     VDatePickerControls: VDatePickerControls
     VDatePickerHeader: VDatePickerHeader
@@ -85957,21 +85955,35 @@ declare module 'vue' {
     VDatePickerMonths: VDatePickerMonths
     VDatePickerYears: VDatePickerYears
     VDialog: VDialog
+    VBtn: VBtn
+    VDataTable: VDataTable
+    VDataTableHeaders: VDataTableHeaders
+    VDataTableFooter: VDataTableFooter
+    VDataTableRows: VDataTableRows
+    VDataTableRow: VDataTableRow
+    VDataTableVirtual: VDataTableVirtual
+    VDataTableServer: VDataTableServer
     VDivider: VDivider
     VEmptyState: VEmptyState
+    VField: VField
+    VFieldLabel: VFieldLabel
+    VFileInput: VFileInput
     VExpansionPanels: VExpansionPanels
     VExpansionPanel: VExpansionPanel
     VExpansionPanelText: VExpansionPanelText
     VExpansionPanelTitle: VExpansionPanelTitle
     VFab: VFab
-    VFileInput: VFileInput
-    VFooter: VFooter
-    VField: VField
-    VFieldLabel: VFieldLabel
     VItemGroup: VItemGroup
     VItem: VItem
     VImg: VImg
     VInput: VInput
+    VIcon: VIcon
+    VComponentIcon: VComponentIcon
+    VSvgIcon: VSvgIcon
+    VLigatureIcon: VLigatureIcon
+    VClassIcon: VClassIcon
+    VInfiniteScroll: VInfiniteScroll
+    VFooter: VFooter
     VLabel: VLabel
     VKbd: VKbd
     VList: VList
@@ -85983,26 +85995,25 @@ declare module 'vue' {
     VListItemSubtitle: VListItemSubtitle
     VListItemTitle: VListItemTitle
     VListSubheader: VListSubheader
-    VMenu: VMenu
-    VMessages: VMessages
-    VNavigationDrawer: VNavigationDrawer
     VMain: VMain
-    VNumberInput: VNumberInput
+    VMessages: VMessages
+    VMenu: VMenu
     VOtpInput: VOtpInput
+    VNavigationDrawer: VNavigationDrawer
     VOverlay: VOverlay
-    VProgressLinear: VProgressLinear
-    VProgressCircular: VProgressCircular
     VPagination: VPagination
+    VProgressCircular: VProgressCircular
+    VNumberInput: VNumberInput
     VRadioGroup: VRadioGroup
+    VProgressLinear: VProgressLinear
+    VRating: VRating
     VSelect: VSelect
+    VSheet: VSheet
     VSelectionControl: VSelectionControl
     VSelectionControlGroup: VSelectionControlGroup
-    VRating: VRating
-    VSheet: VSheet
+    VSkeletonLoader: VSkeletonLoader
     VSlideGroup: VSlideGroup
     VSlideGroupItem: VSlideGroupItem
-    VSnackbar: VSnackbar
-    VSkeletonLoader: VSkeletonLoader
     VSlider: VSlider
     VStepper: VStepper
     VStepperActions: VStepperActions
@@ -86010,38 +86021,33 @@ declare module 'vue' {
     VStepperItem: VStepperItem
     VStepperWindow: VStepperWindow
     VStepperWindowItem: VStepperWindowItem
+    VSnackbar: VSnackbar
     VSwitch: VSwitch
-    VSystemBar: VSystemBar
+    VTable: VTable
+    VTextField: VTextField
     VTab: VTab
     VTabs: VTabs
     VTabsWindow: VTabsWindow
     VTabsWindowItem: VTabsWindowItem
+    VSystemBar: VSystemBar
     VTextarea: VTextarea
-    VTextField: VTextField
     VToolbar: VToolbar
     VToolbarTitle: VToolbarTitle
     VToolbarItems: VToolbarItems
     VTimeline: VTimeline
     VTimelineItem: VTimelineItem
     VTooltip: VTooltip
-    VTable: VTable
     VWindow: VWindow
     VWindowItem: VWindowItem
-    VChip: VChip
     VConfirmEdit: VConfirmEdit
     VDataIterator: VDataIterator
     VDefaultsProvider: VDefaultsProvider
-    VHover: VHover
+    VForm: VForm
     VContainer: VContainer
     VCol: VCol
     VRow: VRow
     VSpacer: VSpacer
-    VIcon: VIcon
-    VComponentIcon: VComponentIcon
-    VSvgIcon: VSvgIcon
-    VLigatureIcon: VLigatureIcon
-    VClassIcon: VClassIcon
-    VForm: VForm
+    VHover: VHover
     VLayout: VLayout
     VLayoutItem: VLayoutItem
     VLazy: VLazy
@@ -86055,8 +86061,8 @@ declare module 'vue' {
     VSnackbarQueue: VSnackbarQueue
     VSpeedDial: VSpeedDial
     VThemeProvider: VThemeProvider
-    VValidation: VValidation
     VVirtualScroll: VVirtualScroll
+    VValidation: VValidation
     VFabTransition: VFabTransition
     VDialogBottomTransition: VDialogBottomTransition
     VDialogTopTransition: VDialogTopTransition
@@ -86073,29 +86079,28 @@ declare module 'vue' {
     VExpandTransition: VExpandTransition
     VExpandXTransition: VExpandXTransition
     VDialogTransition: VDialogTransition
-    VInfiniteScroll: VInfiniteScroll
     VCalendar: VCalendar
     VCalendarDay: VCalendarDay
     VCalendarHeader: VCalendarHeader
     VCalendarInterval: VCalendarInterval
     VCalendarIntervalEvent: VCalendarIntervalEvent
     VCalendarMonthDay: VCalendarMonthDay
-    VFileUpload: VFileUpload
-    VFileUploadItem: VFileUploadItem
-    VIconBtn: VIconBtn
-    VStepperVertical: VStepperVertical
-    VStepperVerticalItem: VStepperVerticalItem
-    VStepperVerticalActions: VStepperVerticalActions
+    VColorInput: VColorInput
     VPicker: VPicker
     VPickerTitle: VPickerTitle
-    VTimePicker: VTimePicker
-    VTimePickerClock: VTimePickerClock
-    VTimePickerControls: VTimePickerControls
+    VIconBtn: VIconBtn
     VTreeview: VTreeview
     VTreeviewItem: VTreeviewItem
     VTreeviewGroup: VTreeviewGroup
+    VFileUpload: VFileUpload
+    VFileUploadItem: VFileUploadItem
+    VTimePicker: VTimePicker
+    VTimePickerClock: VTimePickerClock
+    VTimePickerControls: VTimePickerControls
+    VStepperVertical: VStepperVertical
+    VStepperVerticalItem: VStepperVerticalItem
+    VStepperVerticalActions: VStepperVerticalActions
     VDateInput: VDateInput
-    VColorInput: VColorInput
     VPullToRefresh: VPullToRefresh
   }
 }

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.9
+* Vuetify v3.8.10
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -532,6 +532,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'];
@@ -856,7 +863,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;
 }
@@ -3808,10 +3815,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
@@ -4880,6 +4887,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] : [];
     }
   }
@@ -5105,7 +5113,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) => {
@@ -5636,9 +5644,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);
       });
     }
   }, {
@@ -9252,6 +9260,7 @@ const makeVListGroupProps = propsFactory({
     type: IconValue,
     default: '$expand'
   },
+  rawId: [String, Number],
   prependIcon: IconValue,
   appendIcon: IconValue,
   fluid: Boolean,
@@ -9273,13 +9282,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);
     }
@@ -9797,9 +9805,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
@@ -12223,7 +12232,11 @@ const VField = genericComponent()({
         default: slots.loader
       }), hasPrepend && createElementVNode("div", {
         "key": "prepend",
-        "class": "v-field__prepend-inner"
+        "class": "v-field__prepend-inner",
+        "onMousedown": e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
       }, [props.prependInnerIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prependInner",
@@ -12292,7 +12305,11 @@ const VField = genericComponent()({
         })]), [[vShow, props.dirty]])]
       }), hasAppend && createElementVNode("div", {
         "key": "append",
-        "class": "v-field__append-inner"
+        "class": "v-field__append-inner",
+        "onMousedown": e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
       }, [slots['append-inner']?.(slotProps.value), props.appendInnerIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "appendInner",
@@ -12327,6 +12344,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'];
@@ -12373,6 +12400,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;
     });
@@ -12382,10 +12412,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();
@@ -22751,9 +22777,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) {
@@ -22889,8 +22913,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) {
@@ -22974,9 +23006,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value++;
         month.value = 0;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickPrev() {
       if (month.value > 0) {
@@ -22984,9 +23016,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value--;
         month.value = 11;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickDate() {
       viewMode.value = 'month';
@@ -22997,13 +23029,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);
@@ -23015,11 +23045,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);
     });
@@ -25627,6 +25657,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.
@@ -28373,6 +28418,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;
     });
@@ -28381,10 +28429,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('');
@@ -29464,7 +29508,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.9";
+const version$1 = "3.8.10";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29489,7 +29533,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.9";
+const version = "3.8.10";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };