vuetify 3.8.8 → 3.8.10

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.8.8
+* Vuetify v3.8.10
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, camelize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -603,13 +603,19 @@ function extractNumber(text, decimalDigitsLimit) {
   return cleanText;
 }
 function camelizeProps(props) {
-  if (!props) return;
   const out = {};
   for (const prop in props) {
     out[camelize(prop)] = props[prop];
   }
   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'];
@@ -934,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;
 }
@@ -3322,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
@@ -4394,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] : [];
     }
   }
@@ -4828,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) => {
@@ -5359,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);
       });
     }
   }, {
@@ -8975,6 +8982,7 @@ const makeVListGroupProps = propsFactory({
     type: IconValue,
     default: '$expand'
   },
+  rawId: [String, Number],
   prependIcon: IconValue,
   appendIcon: IconValue,
   fluid: Boolean,
@@ -8996,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);
     }
@@ -9520,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
@@ -9586,7 +9594,7 @@ function transformItem$3(props, item) {
   const _props = {
     title,
     value,
-    ...camelizeProps(itemProps)
+    ...itemProps
   };
   return {
     title: String(_props.title ?? ''),
@@ -11946,7 +11954,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",
@@ -12015,7 +12027,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",
@@ -12050,6 +12066,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'];
@@ -12096,6 +12122,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;
     });
@@ -12105,19 +12134,17 @@ 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();
     const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
-      if (inputRef.value !== document.activeElement) {
-        inputRef.value?.focus();
-      }
       if (!isFocused.value) focus();
+      nextTick(() => {
+        if (inputRef.value !== document.activeElement) {
+          inputRef.value?.focus();
+        }
+      });
     }
     function onControlMousedown(e) {
       emit('mousedown:control', e);
@@ -12126,7 +12153,6 @@ const VTextField = genericComponent()({
       e.preventDefault();
     }
     function onControlClick(e) {
-      onFocus();
       emit('click:control', e);
     }
     function onClear(e, reset) {
@@ -13052,6 +13078,7 @@ const VSelect = genericComponent()({
                   index,
                   itemRef
                 } = _ref2;
+                const camelizedProps = camelizeProps(item.props);
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
                   key: item.value,
@@ -13073,10 +13100,10 @@ const VSelect = genericComponent()({
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
-                    }, null) : undefined, item.props.prependAvatar && createVNode(VAvatar, {
-                      "image": item.props.prependAvatar
-                    }, null), item.props.prependIcon && createVNode(VIcon, {
-                      "icon": item.props.prependIcon
+                    }, null) : undefined, camelizedProps.prependAvatar && createVNode(VAvatar, {
+                      "image": camelizedProps.prependAvatar
+                    }, null), camelizedProps.prependIcon && createVNode(VIcon, {
+                      "icon": camelizedProps.prependIcon
                     }, null)]);
                   }
                 });
@@ -16255,7 +16282,7 @@ const VSliderThumb = genericComponent()({
         default: () => [withDirectives(createElementVNode("div", {
           "class": "v-slider-thumb__label-container"
         }, [createElementVNode("div", {
-          "class": normalizeClass(['v-slider-thumb__label'])
+          "class": normalizeClass(['v-slider-thumb__label', textColorClasses.value])
         }, [createElementVNode("div", null, [slots['thumb-label']?.({
           modelValue: props.modelValue
         }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
@@ -17524,7 +17551,7 @@ function getWeek(date, locale, firstDayOfWeek, firstWeekMinSize) {
   const yearStart = new Date(year, 0, 1);
   const size = firstWeekSize(year);
   const d1w1 = size >= minWeekSize ? addDays(yearStart, size - 7) : addDays(yearStart, size);
-  return 1 + getDiff(date, d1w1, 'weeks');
+  return 1 + getDiff(endOfDay(date), startOfDay(d1w1), 'weeks');
 }
 function getDate(date) {
   return date.getDate();
@@ -17827,6 +17854,18 @@ function createDate(options, locale) {
     instance: createInstance(_options, locale)
   };
 }
+function createDateRange(adapter, start, stop) {
+  const diff = adapter.getDiff(adapter.endOfDay(stop ?? start), adapter.startOfDay(start), 'days');
+  const datesInRange = [start];
+  for (let i = 1; i < diff; i++) {
+    const nextDate = adapter.addDays(start, i);
+    datesInRange.push(nextDate);
+  }
+  if (stop) {
+    datesInRange.push(adapter.endOfDay(stop));
+  }
+  return datesInRange;
+}
 function createInstance(options, locale) {
   const instance = reactive(typeof options.adapter === 'function'
   // eslint-disable-next-line new-cap
@@ -17837,20 +17876,7 @@ function createInstance(options, locale) {
   watch(locale.current, value => {
     instance.locale = options.locale[value] ?? value ?? instance.locale;
   });
-  return Object.assign(instance, {
-    createDateRange(start, stop) {
-      const diff = instance.getDiff(stop ?? start, start, 'days');
-      const datesInRange = [start];
-      for (let i = 1; i < diff; i++) {
-        const nextDate = instance.addDays(start, i);
-        datesInRange.push(nextDate);
-      }
-      if (stop) {
-        datesInRange.push(instance.endOfDay(stop));
-      }
-      return datesInRange;
-    }
-  });
+  return instance;
 }
 function useDate() {
   const options = inject$1(DateOptionsSymbol);
@@ -19939,7 +19965,9 @@ const VDataTableFooter = genericComponent()({
         "class": "v-data-table-footer"
       }, [slots.prepend?.(), createElementVNode("div", {
         "class": "v-data-table-footer__items-per-page"
-      }, [createElementVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
+      }, [createElementVNode("span", {
+        "aria-label": t(props.itemsPerPageText)
+      }, [t(props.itemsPerPageText)]), createVNode(VSelect, {
         "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
         "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
@@ -19991,6 +20019,7 @@ const VDataTableColumn = defineFunctionalComponent({
   } = _ref;
   const Tag = props.tag ?? 'td';
   return createVNode(Tag, {
+    "tabindex": "0",
     "class": normalizeClass(['v-data-table__td', {
       'v-data-table-column--fixed': props.fixed,
       'v-data-table-column--last-fixed': props.lastFixed,
@@ -20335,6 +20364,11 @@ const VDataTableHeaders = genericComponent()({
         top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
       };
     }
+    function handleEnterKeyPress(event, column) {
+      if (event.key === 'Enter' && !props.disableSort) {
+        toggleSort(column);
+      }
+    }
     function getSortIcon(column) {
       const item = sortBy.value.find(item => item.key === column.key);
       if (!item) return props.sortAscIcon;
@@ -20391,7 +20425,9 @@ const VDataTableHeaders = genericComponent()({
         "nowrap": column.nowrap,
         "lastFixed": column.lastFixed,
         "noPadding": noPadding
-      }, headerProps), {
+      }, headerProps, {
+        "onKeydown": event => column.sortable && handleEnterKeyPress(event, column)
+      }), {
         default: () => {
           const columnSlotName = `header.${column.key}`;
           const columnSlotProps = {
@@ -22244,7 +22280,7 @@ const VDatePickerMonth = genericComponent()({
         } else {
           rangeStop.value = adapter.endOfDay(_value);
         }
-        model.value = adapter.createDateRange(rangeStart.value, rangeStop.value);
+        model.value = createDateRange(adapter, rangeStart.value, rangeStop.value);
       } else {
         rangeStart.value = value;
         rangeStop.value = undefined;
@@ -22463,9 +22499,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) {
@@ -22601,8 +22635,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) {
@@ -22686,9 +22728,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value++;
         month.value = 0;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickPrev() {
       if (month.value > 0) {
@@ -22696,9 +22738,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value--;
         month.value = 11;
-        onUpdateYear(year.value);
+        onUpdateYear();
       }
-      onUpdateMonth(month.value);
+      onUpdateMonth();
     }
     function onClickDate() {
       viewMode.value = 'month';
@@ -22709,13 +22751,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);
@@ -22727,11 +22767,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);
     });
@@ -23331,6 +23371,56 @@ const VFab = genericComponent()({
 
 // Types
 
+function useFileDrop() {
+  function hasFilesOrFolders(e) {
+    const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+    return entries.length > 0 || [...(e.dataTransfer?.files ?? [])].length > 0;
+  }
+  async function handleDrop(e) {
+    const result = [];
+    const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+    if (entries.length) {
+      for (const entry of entries) {
+        const files = await traverseFileTree(entry, appendIfDirectory('.', entry));
+        result.push(...files.map(x => x.file));
+      }
+    } else {
+      result.push(...[...(e.dataTransfer?.files ?? [])]);
+    }
+    return result;
+  }
+  return {
+    handleDrop,
+    hasFilesOrFolders
+  };
+}
+function traverseFileTree(item) {
+  let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return new Promise((resolve, reject) => {
+    if (item.isFile) {
+      const fileEntry = item;
+      fileEntry.file(file => resolve([{
+        file,
+        path
+      }]), reject);
+    } else if (item.isDirectory) {
+      const directoryReader = item.createReader();
+      directoryReader.readEntries(async entries => {
+        const files = [];
+        for (const entry of entries) {
+          files.push(...(await traverseFileTree(entry, appendIfDirectory(path, entry))));
+        }
+        resolve(files);
+      });
+    }
+  });
+}
+function appendIfDirectory(path, item) {
+  return item.isDirectory ? `${path}/${item.name}` : path;
+}
+
+// Types
+
 const makeVFileInputProps = propsFactory({
   chips: Boolean,
   counter: Boolean,
@@ -23415,6 +23505,10 @@ const VFileInput = genericComponent()({
     const isActive = toRef(() => isFocused.value || props.active);
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     const isDragging = shallowRef(false);
+    const {
+      handleDrop,
+      hasFilesOrFolders
+    } = useFileDrop();
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -23448,13 +23542,13 @@ const VFileInput = genericComponent()({
       e.preventDefault();
       isDragging.value = false;
     }
-    function onDrop(e) {
+    async function onDrop(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
       isDragging.value = false;
-      if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+      if (!inputRef.value || !hasFilesOrFolders(e)) return;
       const dataTransfer = new DataTransfer();
-      for (const file of e.dataTransfer.files) {
+      for (const file of await handleDrop(e)) {
         dataTransfer.items.add(file);
       }
       inputRef.value.files = dataTransfer.files;
@@ -24885,6 +24979,7 @@ const VNumberInput = genericComponent()({
     ...makeVNumberInputProps()
   },
   emits: {
+    'update:focused': val => true,
     'update:modelValue': val => true
   },
   setup(props, _ref) {
@@ -24900,11 +24995,7 @@ const VNumberInput = genericComponent()({
     });
     const form = useForm(props);
     const controlsDisabled = computed(() => form.isDisabled.value || form.isReadonly.value);
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
+    const isFocused = shallowRef(props.focused);
     function correctPrecision(val) {
       let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
       const fixed = precision == null ? String(val) : val.toFixed(precision);
@@ -25089,11 +25180,9 @@ const VNumberInput = genericComponent()({
       inputText.value = model.value.toString();
     }
     function onFocus() {
-      focus();
       trimDecimalZeros();
     }
     function onBlur() {
-      blur();
       clampModel();
     }
     useRender(() => {
@@ -25186,9 +25275,12 @@ const VNumberInput = genericComponent()({
       }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? createElementVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
       return createVNode(VTextField, mergeProps({
-        "ref": vTextFieldRef,
+        "ref": vTextFieldRef
+      }, textFieldProps, {
         "modelValue": inputText.value,
         "onUpdate:modelValue": $event => inputText.value = $event,
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.value,
         "onBeforeinput": onBeforeinput,
         "onFocus": onFocus,
@@ -25201,8 +25293,7 @@ const VNumberInput = genericComponent()({
           'v-number-input--reverse': props.reverse,
           'v-number-input--split': controlVariant.value === 'split',
           'v-number-input--stacked': controlVariant.value === 'stacked'
-        }, props.class]
-      }, textFieldProps, {
+        }, props.class],
         "style": props.style,
         "inputmode": "decimal"
       }), {
@@ -25288,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.
@@ -25337,7 +25443,7 @@ const VOtpInput = genericComponent()({
     function onPaste(index, e) {
       e.preventDefault();
       e.stopPropagation();
-      const clipboardText = e?.clipboardData?.getData('Text').slice(0, length.value) ?? '';
+      const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
       if (isValidNumber(clipboardText)) return;
       model.value = clipboardText.split('');
       inputRef.value?.[index].blur();
@@ -25369,7 +25475,10 @@ const VOtpInput = genericComponent()({
       scoped: true
     });
     watch(model, val => {
-      if (val.length === length.value) emit('finish', val.join(''));
+      if (val.length === length.value) {
+        focusIndex.value = length.value - 1;
+        emit('finish', val.join(''));
+      }
     }, {
       deep: true
     });
@@ -28031,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;
     });
@@ -28039,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('');
@@ -29260,13 +29368,9 @@ const VColorInput = genericComponent()({
     let {
       slots
     } = _ref;
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
     const model = useProxiedModel(props, 'modelValue');
     const menu = shallowRef(false);
+    const isFocused = shallowRef(props.focused);
     const isInteractive = computed(() => !props.disabled && !props.readonly);
     const display = computed(() => model.value || null);
     function onKeydown(e) {
@@ -29297,10 +29401,9 @@ const VColorInput = genericComponent()({
         "modelValue": display.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
-        "onFocus": focus,
-        "onBlur": blur,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prependInner": isInteractive.value ? onClick : undefined,
+        "onUpdate:focused": event => isFocused.value = event,
         "onClick:appendInner": isInteractive.value ? onClick : undefined,
         "onUpdate:modelValue": val => {
           model.value = val;
@@ -29504,6 +29607,7 @@ const VDateInput = genericComponent()({
   emits: {
     save: value => true,
     cancel: () => true,
+    'update:focused': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -29526,15 +29630,11 @@ const VDateInput = genericComponent()({
     const {
       mobile
     } = useDisplay(props);
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
     const emptyModelValue = () => props.multiple ? [] : null;
     const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
     const menu = useProxiedModel(props, 'menu');
     const isEditingInput = shallowRef(false);
+    const isFocused = shallowRef(props.focused);
     const vTextFieldRef = ref();
     const disabledActions = ref(['save']);
     function format(date) {
@@ -29610,7 +29710,6 @@ const VDateInput = genericComponent()({
       if (props.updateOn.includes('blur')) {
         onUserInput(e.target);
       }
-      blur();
 
       // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
       if (mobile.value && isEditingInput.value && !isFocused.value) {
@@ -29633,7 +29732,7 @@ const VDateInput = genericComponent()({
         if (parts.every(isValid)) {
           if (props.multiple === 'range') {
             const [start, stop] = parts.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
-            model.value = adapter.createDateRange(start, stop);
+            model.value = createDateRange(adapter, start, stop);
           } else {
             model.value = parts.map(parseDate);
           }
@@ -29655,12 +29754,12 @@ const VDateInput = genericComponent()({
         "readonly": isReadonly.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
-        "onFocus": focus,
         "onBlur": onBlur,
         "validationValue": model.value,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prepend": isInteractive.value ? onClick : undefined,
-        "onUpdate:modelValue": onUpdateDisplayModel
+        "onUpdate:modelValue": onUpdateDisplayModel,
+        "onUpdate:focused": event => isFocused.value = event
       }), {
         ...slots,
         default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
@@ -29768,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,
@@ -29875,6 +29975,9 @@ const VFileUpload = genericComponent()({
     const isDragging = shallowRef(false);
     const vSheetRef = ref(null);
     const inputRef = ref(null);
+    const {
+      handleDrop
+    } = useFileDrop();
     function onDragover(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -29884,13 +29987,13 @@ const VFileUpload = genericComponent()({
       e.preventDefault();
       isDragging.value = false;
     }
-    function onDrop(e) {
+    async function onDrop(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
       isDragging.value = false;
-      if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+      if (!inputRef.value) return;
       const dataTransfer = new DataTransfer();
-      for (const file of e.dataTransfer.files) {
+      for (const file of await handleDrop(e)) {
         dataTransfer.items.add(file);
       }
       inputRef.value.files = dataTransfer.files;
@@ -30613,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
@@ -30658,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;
@@ -31258,6 +31363,7 @@ const VTreeviewItem = genericComponent()({
     }
     function onClickAction(e) {
       e.preventDefault();
+      e.stopPropagation();
       emit('toggleExpand', e);
     }
     useRender(() => {
@@ -31403,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 {
@@ -32091,7 +32198,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.8";
+const version$1 = "3.8.10";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32389,7 +32496,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.8";
+const version = "3.8.10";
 
 /* eslint-disable local-rules/sort-imports */