vuetify 3.8.3 → 3.8.5

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.3
+* Vuetify v3.8.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2923,10 +2923,10 @@ const VDialogTransition = genericComponent()({
       async onLeave(el, done) {
         await new Promise(resolve => requestAnimationFrame(resolve));
         let dimensions;
-        if (!Array.isArray(props.target) && !props.target.offsetParent && saved.has(el)) {
-          dimensions = saved.get(el);
-        } else {
+        if (!saved.has(el) || Array.isArray(props.target) || props.target.offsetParent || props.target.getClientRects().length) {
           dimensions = getDimensions(props.target, el);
+        } else {
+          dimensions = saved.get(el);
         }
         const {
           x,
@@ -3251,7 +3251,7 @@ function useRounded(props) {
 
 const makeTransitionProps = propsFactory({
   transition: {
-    type: [Boolean, String, Object],
+    type: null,
     default: 'fade-transition',
     validator: val => val !== true
   }
@@ -3269,16 +3269,19 @@ const MaybeTransition = (props, _ref) => {
   const {
     component = group ? TransitionGroup : Transition,
     ...customProps
-  } = typeof transition === 'object' ? transition : {};
-  return h(component, mergeProps(typeof transition === 'string' ? {
-    name: disabled ? '' : transition
-  } : customProps, typeof transition === 'string' ? {} : Object.fromEntries(Object.entries({
-    disabled,
-    group
-  }).filter(_ref2 => {
-    let [_, v] = _ref2;
-    return v !== undefined;
-  })), rest), slots);
+  } = isObject(transition) ? transition : {};
+  let transitionProps;
+  if (isObject(transition)) {
+    transitionProps = mergeProps(customProps, JSON.parse(JSON.stringify({
+      disabled,
+      group
+    })), rest);
+  } else {
+    transitionProps = mergeProps({
+      name: disabled || !transition ? '' : transition
+    }, rest);
+  }
+  return h(component, transitionProps, slots);
 };
 
 // Utilities
@@ -4503,7 +4506,8 @@ const aliases = {
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
   eyeDropper: 'mdi-eyedropper',
-  upload: 'mdi-cloud-upload'
+  upload: 'mdi-cloud-upload',
+  color: 'mdi-palette'
 };
 const mdi = {
   // Not using mergeProps here, functional components merge props by default (?)
@@ -10161,7 +10165,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     observe = false;
     requestAnimationFrame(() => observe = true);
     if (!data.target.value || !data.contentEl.value) return;
-    if (Array.isArray(data.target.value) || data.target.value.offsetParent) {
+    if (Array.isArray(data.target.value) || data.target.value.offsetParent || data.target.value.getClientRects().length) {
       targetBox = getTargetBox(data.target.value);
     } // Otherwise target element is hidden, use last known value
 
@@ -12081,11 +12085,12 @@ const VTextField = genericComponent()({
       onFocus();
       emit('click:control', e);
     }
-    function onClear(e) {
+    function onClear(e, reset) {
       e.stopPropagation();
       onFocus();
       nextTick(() => {
         model.value = null;
+        reset();
         callEvent(props['onClick:clear'], e);
       });
     }
@@ -12130,13 +12135,14 @@ const VTextField = genericComponent()({
             isDisabled,
             isDirty,
             isReadonly,
-            isValid
+            isValid,
+            reset
           } = _ref2;
           return createVNode(VField, mergeProps({
             "ref": vFieldRef,
             "onMousedown": onControlMousedown,
             "onClick": onControlClick,
-            "onClick:clear": onClear,
+            "onClick:clear": e => onClear(e, reset),
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner'],
             "role": props.role
@@ -14116,7 +14122,7 @@ const VDialog = genericComponent()({
     }
     function onAfterEnter() {
       emit('afterEnter');
-      if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
+      if ((props.scrim || props.retainFocus) && overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
         overlay.value.contentEl.focus({
           preventScroll: true
         });
@@ -18988,7 +18994,7 @@ function provideSelection(props, _ref9) {
     index = index ?? currentPage.value.findIndex(i => i.value === item.value);
     if (props.selectStrategy !== 'single' && event?.shiftKey && lastSelectedIndex.value !== null) {
       const [start, end] = [lastSelectedIndex.value, index].sort((a, b) => a - b);
-      items.push(...currentPage.value.slice(start, end + 1));
+      items.push(...currentPage.value.slice(start, end + 1).filter(item => item.selectable));
     } else {
       items.push(item);
       lastSelectedIndex.value = index;
@@ -20324,7 +20330,6 @@ const VDataTableHeaders = genericComponent()({
       });
     };
     const VDataTableMobileHeaderCell = () => {
-      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
       const displayItems = computed(() => {
         return columns.value.filter(column => column?.sortable && !props.disableSort);
       });
@@ -20337,7 +20342,7 @@ const VDataTableHeaders = genericComponent()({
         "tag": "th",
         "class": [...headerCellClasses.value],
         "colspan": headers.value.length + 1
-      }, headerProps), {
+      }, props.headerProps), {
         default: () => [createVNode("div", {
           "class": "v-data-table-header__content"
         }, [createVNode(VSelect, {
@@ -23260,6 +23265,7 @@ const VFileInput = genericComponent()({
     const inputRef = ref();
     const isActive = toRef(() => isFocused.value || props.active);
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
+    const isDragging = shallowRef(false);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -23286,11 +23292,26 @@ const VFileInput = genericComponent()({
     }
     function onDragover(e) {
       e.preventDefault();
+      e.stopImmediatePropagation();
+      isDragging.value = true;
+    }
+    function onDragleave(e) {
+      e.preventDefault();
+      isDragging.value = false;
     }
     function onDrop(e) {
       e.preventDefault();
-      if (!e.dataTransfer) return;
-      model.value = [...(e.dataTransfer.files ?? [])];
+      e.stopImmediatePropagation();
+      isDragging.value = false;
+      if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+      const dataTransfer = new DataTransfer();
+      for (const file of e.dataTransfer.files) {
+        dataTransfer.items.add(file);
+      }
+      inputRef.value.files = dataTransfer.files;
+      inputRef.value.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
     }
     watch(model, newValue => {
       const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -23312,6 +23333,7 @@ const VFileInput = genericComponent()({
         "modelValue": props.multiple ? model.value : model.value[0],
         "class": ['v-file-input', {
           'v-file-input--chips': !!props.chips,
+          'v-file-input--dragging': isDragging.value,
           'v-file-input--hide': props.hideInput,
           'v-input--plain-underlined': isPlainOrUnderlined.value
         }, props.class],
@@ -23373,6 +23395,7 @@ const VFileInput = genericComponent()({
                   const target = e.target;
                   model.value = [...(target.files ?? [])];
                 },
+                "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
               }, slotProps, inputAttrs), null), createVNode("div", {
@@ -28360,7 +28383,7 @@ const makeVTooltipProps = propsFactory({
     origin: 'auto',
     scrim: false,
     scrollStrategy: 'reposition',
-    transition: false
+    transition: null
   }), ['absolute', 'persistent'])
 }, 'VTooltip');
 const VTooltip = genericComponent()({
@@ -28387,7 +28410,7 @@ const VTooltip = genericComponent()({
       return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
     });
     const transition = toRef(() => {
-      if (props.transition) return props.transition;
+      if (props.transition != null) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });
     const activatorProps = computed(() => mergeProps({
@@ -29050,6 +29073,236 @@ const VCalendar = genericComponent()({
 
 // Types
 
+const makeVColorInputProps = propsFactory({
+  pip: Boolean,
+  pipIcon: {
+    type: String,
+    default: '$color'
+  },
+  ...makeFocusProps(),
+  ...makeVConfirmEditProps(),
+  ...makeVTextFieldProps(),
+  ...omit(makeVColorPickerProps(), ['width'])
+}, 'VColorInput');
+const VColorInput = genericComponent()({
+  name: 'VColorInput',
+  props: makeVColorInputProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue');
+    const menu = shallowRef(false);
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const display = computed(() => model.value || null);
+    function onKeydown(e) {
+      if (e.key !== 'Enter') return;
+      if (!menu.value || !isFocused.value) {
+        menu.value = true;
+        return;
+      }
+      const target = e.target;
+      model.value = target.value;
+    }
+    function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.value = true;
+    }
+    function onSave() {
+      menu.value = false;
+    }
+    useRender(() => {
+      const confirmEditProps = VConfirmEdit.filterProps(props);
+      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
+      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      return createVNode(VTextField, mergeProps(textFieldProps, {
+        "class": ['v-color-input', props.class],
+        "style": props.style,
+        "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,
+        "onClick:appendInner": isInteractive.value ? onClick : undefined,
+        "onUpdate:modelValue": val => {
+          model.value = val;
+        }
+      }), {
+        ...slots,
+        prepend: props.pipIcon ? arg => createVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
+          "color": props.pip ? model.value : undefined,
+          "icon": props.pipIcon
+        }, null), slots.prepend?.(arg)]) : undefined,
+        default: () => createVNode(Fragment, null, [createVNode(VMenu, {
+          "modelValue": menu.value,
+          "onUpdate:modelValue": $event => menu.value = $event,
+          "activator": "parent",
+          "min-width": "0",
+          "closeOnContentClick": false,
+          "openOnClick": false
+        }, {
+          default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onSave": onSave
+          }), {
+            default: _ref2 => {
+              let {
+                actions,
+                model: proxyModel,
+                save,
+                cancel,
+                isPristine
+              } = _ref2;
+              return createVNode(VColorPicker, mergeProps(colorPickerProps, {
+                "modelValue": proxyModel.value,
+                "onUpdate:modelValue": val => {
+                  proxyModel.value = val;
+                  model.value = val;
+                },
+                "onMousedown": e => e.preventDefault()
+              }), {
+                actions: !props.hideActions ? () => slots.actions?.({
+                  save,
+                  cancel,
+                  isPristine
+                }) ?? actions() : undefined
+              });
+            }
+          })]
+        }), slots.default?.()])
+      });
+    });
+  }
+});
+
+// Composables
+
+// Types
+
+// Types
+
+class DateFormatSpec {
+  constructor(order,
+  // mdy | dmy | ymd
+  separator // / | - | .
+  ) {
+    this.order = order;
+    this.separator = separator;
+  }
+  get format() {
+    return this.order.split('').map(sign => `${sign}${sign}`).join(this.separator).replace('yy', 'yyyy');
+  }
+  static canBeParsed(v) {
+    if (typeof v !== 'string') return false;
+    const lowercase = v.toLowerCase();
+    return ['y', 'm', 'd'].every(sign => lowercase.includes(sign)) && ['/', '-', '.'].some(sign => v.includes(sign));
+  }
+  static parse(v) {
+    if (!DateFormatSpec.canBeParsed(v)) {
+      throw new Error(`[${v}] cannot be parsed into date format specification`);
+    }
+    const order = v.toLowerCase().split('').filter((c, i, all) => 'dmy'.includes(c) && all.indexOf(c) === i).join('');
+    const separator = ['/', '-', '.'].find(sign => v.includes(sign));
+    return new DateFormatSpec(order, separator);
+  }
+}
+const makeDateFormatProps = propsFactory({
+  inputFormat: {
+    type: String,
+    validator: v => !v || DateFormatSpec.canBeParsed(v)
+  }
+}, 'date-format');
+function useDateFormat(props, locale) {
+  const adapter = useDate();
+  function inferFromLocale() {
+    const localeForDateFormat = locale.value ?? 'en-US';
+    const formatFromLocale = Intl.DateTimeFormat(localeForDateFormat, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    }).format(adapter.toJsDate(adapter.parseISO('1999-12-07'))).replace(/(07)|(٠٧)|(٢٩)|(۱۶)|(০৭)/, 'dd').replace(/(12)|(١٢)|(٠٨)|(۰۹)|(১২)/, 'mm').replace(/(1999)|(2542)|(١٩٩٩)|(١٤٢٠)|(۱۳۷۸)|(১৯৯৯)/, 'yyyy').replace(/[^ymd\-/.]/g, '').replace(/\.$/, '');
+    if (!DateFormatSpec.canBeParsed(formatFromLocale)) {
+      consoleWarn(`Date format inferred from locale [${localeForDateFormat}] is invalid: [${formatFromLocale}]`);
+      return 'mm/dd/yyyy';
+    }
+    return formatFromLocale;
+  }
+  const currentFormat = toRef(() => {
+    return DateFormatSpec.canBeParsed(props.inputFormat) ? DateFormatSpec.parse(props.inputFormat) : DateFormatSpec.parse(inferFromLocale());
+  });
+  function parseDate(dateString) {
+    function parseDateParts(text) {
+      const parts = text.trim().split(currentFormat.value.separator);
+      return {
+        y: Number(parts[currentFormat.value.order.indexOf('y')]),
+        m: Number(parts[currentFormat.value.order.indexOf('m')]),
+        d: Number(parts[currentFormat.value.order.indexOf('d')])
+      };
+    }
+    function validateDateParts(dateParts) {
+      const {
+        y: year,
+        m: month,
+        d: day
+      } = dateParts;
+      if (!year || !month || !day) return null;
+      if (month < 1 || month > 12) return null;
+      if (day < 1 || day > 31) return null;
+      return {
+        year: autoFixYear(year),
+        month,
+        day
+      };
+    }
+    function autoFixYear(year) {
+      const currentYear = adapter.getYear(adapter.date());
+      if (year > 100 || currentYear % 100 >= 50) {
+        return year;
+      }
+      const currentCentury = ~~(currentYear / 100) * 100;
+      return year < 50 ? currentCentury + year : currentCentury - 100 + year;
+    }
+    const dateParts = parseDateParts(dateString);
+    const validatedParts = validateDateParts(dateParts);
+    if (!validatedParts) return null;
+    const {
+      year,
+      month,
+      day
+    } = validatedParts;
+    const pad = v => String(v).padStart(2, '0');
+    return adapter.parseISO(`${year}-${pad(month)}-${pad(day)}`);
+  }
+  function isValid(text) {
+    return !!parseDate(text);
+  }
+  function formatDate(value) {
+    const parts = adapter.toISO(value).split('-');
+    return currentFormat.value.order.split('').map(sign => parts['ymd'.indexOf(sign)]).join(currentFormat.value.separator);
+  }
+  return {
+    isValid,
+    parseDate,
+    formatDate,
+    parserFormat: toRef(() => currentFormat.value.format)
+  };
+}
+
+// Types
+
 // Types
 
 const makeVDateInputProps = propsFactory({
@@ -29058,13 +29311,20 @@ const makeVDateInputProps = propsFactory({
     type: String,
     default: 'bottom start'
   },
-  ...makeDisplayProps(),
+  menu: Boolean,
+  updateOn: {
+    type: Array,
+    default: () => ['blur', 'enter']
+  },
+  ...makeDateFormatProps(),
+  ...makeDisplayProps({
+    mobile: null
+  }),
   ...makeFocusProps(),
   ...makeVConfirmEditProps({
     hideActions: true
   }),
   ...makeVTextFieldProps({
-    placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar'
   }),
   ...omit(makeVDatePickerProps({
@@ -29078,7 +29338,8 @@ const VDateInput = genericComponent()({
   emits: {
     save: value => true,
     cancel: () => true,
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:menu': val => true
   },
   setup(props, _ref) {
     let {
@@ -29086,9 +29347,16 @@ const VDateInput = genericComponent()({
       slots
     } = _ref;
     const {
-      t
+      t,
+      current: currentLocale
     } = useLocale();
     const adapter = useDate();
+    const {
+      isValid,
+      parseDate,
+      formatDate,
+      parserFormat
+    } = useDateFormat(props, currentLocale);
     const {
       mobile
     } = useDisplay(props);
@@ -29097,8 +29365,9 @@ const VDateInput = genericComponent()({
       focus,
       blur
     } = useFocus(props);
-    const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null, 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 = shallowRef(false);
+    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 vTextFieldRef = ref();
     const disabledActions = ref(['save']);
@@ -29106,7 +29375,10 @@ const VDateInput = genericComponent()({
       if (typeof props.displayFormat === 'function') {
         return props.displayFormat(date);
       }
-      return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+      if (props.displayFormat) {
+        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+      }
+      return formatDate(date);
     }
     const display = computed(() => {
       const value = wrapInArray(model.value);
@@ -29128,7 +29400,10 @@ const VDateInput = genericComponent()({
       return 'none';
     });
     const isInteractive = computed(() => !props.disabled && !props.readonly);
-    const isReadonly = computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+    const isReadonly = computed(() => {
+      if (!props.updateOn.length) return true;
+      return !(mobile.value && isEditingInput.value) && props.readonly;
+    });
     watch(menu, val => {
       if (val) return;
       isEditingInput.value = false;
@@ -29138,10 +29413,10 @@ const VDateInput = genericComponent()({
       if (e.key !== 'Enter') return;
       if (!menu.value || !isFocused.value) {
         menu.value = true;
-        return;
       }
-      const target = e.target;
-      model.value = adapter.isValid(target.value) ? target.value : null;
+      if (props.updateOn.includes('enter')) {
+        onUserInput(e.target);
+      }
     }
     function onClick(e) {
       e.preventDefault();
@@ -29163,9 +29438,12 @@ const VDateInput = genericComponent()({
     }
     function onUpdateDisplayModel(value) {
       if (value != null) return;
-      model.value = null;
+      model.value = emptyModelValue();
     }
-    function onBlur() {
+    function onBlur(e) {
+      if (props.updateOn.includes('blur')) {
+        onUserInput(e.target);
+      }
       blur();
 
       // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
@@ -29174,10 +29452,36 @@ const VDateInput = genericComponent()({
         isEditingInput.value = false;
       }
     }
+    function onUserInput(_ref2) {
+      let {
+        value
+      } = _ref2;
+      if (!value.trim()) {
+        model.value = emptyModelValue();
+      } else if (!props.multiple) {
+        if (isValid(value)) {
+          model.value = parseDate(value);
+        }
+      } else {
+        const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
+        if (parts.every(isValid)) {
+          if (props.multiple === 'range') {
+            model.value = getRange(parts);
+          } else {
+            model.value = parts.map(parseDate);
+          }
+        }
+      }
+    }
+    function getRange(inputDates) {
+      const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+      const diff = adapter.getDiff(stop ?? start, start, 'days');
+      return [start, ...createRange(diff, 1).map(i => adapter.addDays(start, i))];
+    }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
-      const textFieldProps = VTextField.filterProps(props);
+      const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -29185,11 +29489,13 @@ const VDateInput = genericComponent()({
         "style": props.style,
         "modelValue": display.value,
         "inputmode": inputmode.value,
+        "placeholder": props.placeholder ?? parserFormat.value,
         "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
@@ -29212,14 +29518,14 @@ const VDateInput = genericComponent()({
             "onSave": onSave,
             "onCancel": onCancel
           }), {
-            default: _ref2 => {
+            default: _ref3 => {
               let {
                 actions,
                 model: proxyModel,
                 save,
                 cancel,
                 isPristine
-              } = _ref2;
+              } = _ref3;
               function onUpdateModel(value) {
                 if (!props.hideActions) {
                   proxyModel.value = value;
@@ -29404,43 +29710,31 @@ const VFileUpload = genericComponent()({
       densityClasses
     } = useDensity(props);
     const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
-    const dragOver = shallowRef(false);
+    const isDragging = shallowRef(false);
     const vSheetRef = ref(null);
     const inputRef = ref(null);
-    onMounted(() => {
-      vSheetRef.value?.$el.addEventListener('dragover', onDragOver);
-      vSheetRef.value?.$el.addEventListener('drop', onDrop);
-    });
-    onUnmounted(() => {
-      vSheetRef.value?.$el.removeEventListener('dragover', onDragOver);
-      vSheetRef.value?.$el.removeEventListener('drop', onDrop);
-    });
-    function onDragOver(e) {
+    function onDragover(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
-      dragOver.value = true;
+      isDragging.value = true;
     }
-    function onDragLeave(e) {
+    function onDragleave(e) {
       e.preventDefault();
-      dragOver.value = false;
+      isDragging.value = false;
     }
     function onDrop(e) {
       e.preventDefault();
       e.stopImmediatePropagation();
-      dragOver.value = false;
-      const files = Array.from(e.dataTransfer?.files ?? []);
-      if (!files.length) return;
-      if (!props.multiple) {
-        model.value = [files[0]];
-        return;
-      }
-      const array = model.value.slice();
-      for (const file of files) {
-        if (!array.some(f => f.name === file.name)) {
-          array.push(file);
-        }
-      }
-      model.value = array;
+      isDragging.value = false;
+      if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+      const dataTransfer = new DataTransfer();
+      for (const file of e.dataTransfer.files) {
+        dataTransfer.items.add(file);
+      }
+      inputRef.value.files = dataTransfer.files;
+      inputRef.value.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
     }
     function onClick() {
       inputRef.value?.click();
@@ -29476,11 +29770,11 @@ const VFileUpload = genericComponent()({
         "class": ['v-file-upload', {
           'v-file-upload--clickable': !hasBrowse,
           'v-file-upload--disabled': props.disabled,
-          'v-file-upload--dragging': dragOver.value
+          'v-file-upload--dragging': isDragging.value
         }, densityClasses.value, props.class],
         "style": [props.style],
-        "onDragleave": onDragLeave,
-        "onDragover": onDragOver,
+        "onDragleave": onDragleave,
+        "onDragover": onDragover,
         "onDrop": onDrop,
         "onClick": !hasBrowse ? onClick : undefined
       }, rootAttrs), {
@@ -29531,7 +29825,7 @@ const VFileUpload = genericComponent()({
         })]), props.subtitle && createVNode("div", {
           "class": "v-file-upload-subtitle"
         }, [props.subtitle])]), createVNode(VOverlay, {
-          "model-value": dragOver.value,
+          "model-value": isDragging.value,
           "contained": true,
           "scrim": props.scrim
         }, null), slots.input?.({
@@ -30229,8 +30523,8 @@ const VTimePickerClock = genericComponent()({
         y
       } = getPosition(i);
       return {
-        left: `${50 + x * 50}%`,
-        top: `${50 + y * 50}%`
+        left: `${Math.round(50 + x * 50)}%`,
+        top: `${Math.round(50 + y * 50)}%`
       };
     }
     function euclidean(p0, p1) {
@@ -31168,6 +31462,7 @@ var components = /*#__PURE__*/Object.freeze({
   VClassIcon: VClassIcon,
   VCode: VCode,
   VCol: VCol,
+  VColorInput: VColorInput,
   VColorPicker: VColorPicker,
   VCombobox: VCombobox,
   VComponentIcon: VComponentIcon,
@@ -31634,7 +31929,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.3";
+const version$1 = "3.8.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31932,7 +32227,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.3";
+const version = "3.8.5";
 
 /* eslint-disable local-rules/sort-imports */