vuetify 3.8.3 → 3.8.5

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.3
+* Vuetify v3.8.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2927,10 +2927,10 @@
         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,
@@ -3255,7 +3255,7 @@
 
   const makeTransitionProps = propsFactory({
     transition: {
-      type: [Boolean, String, Object],
+      type: null,
       default: 'fade-transition',
       validator: val => val !== true
     }
@@ -3273,16 +3273,19 @@
     const {
       component = group ? vue.TransitionGroup : vue.Transition,
       ...customProps
-    } = typeof transition === 'object' ? transition : {};
-    return vue.h(component, vue.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 = vue.mergeProps(customProps, JSON.parse(JSON.stringify({
+        disabled,
+        group
+      })), rest);
+    } else {
+      transitionProps = vue.mergeProps({
+        name: disabled || !transition ? '' : transition
+      }, rest);
+    }
+    return vue.h(component, transitionProps, slots);
   };
 
   // Utilities
@@ -4507,7 +4510,8 @@
     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 (?)
@@ -10165,7 +10169,7 @@
       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
 
@@ -12085,11 +12089,12 @@
         onFocus();
         emit('click:control', e);
       }
-      function onClear(e) {
+      function onClear(e, reset) {
         e.stopPropagation();
         onFocus();
         vue.nextTick(() => {
           model.value = null;
+          reset();
           callEvent(props['onClick:clear'], e);
         });
       }
@@ -12134,13 +12139,14 @@
               isDisabled,
               isDirty,
               isReadonly,
-              isValid
+              isValid,
+              reset
             } = _ref2;
             return vue.createVNode(VField, vue.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
@@ -14120,7 +14126,7 @@
       }
       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
           });
@@ -18992,7 +18998,7 @@
       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;
@@ -20328,7 +20334,6 @@
         });
       };
       const VDataTableMobileHeaderCell = () => {
-        const headerProps = vue.mergeProps(props.headerProps ?? {} ?? {});
         const displayItems = vue.computed(() => {
           return columns.value.filter(column => column?.sortable && !props.disableSort);
         });
@@ -20341,7 +20346,7 @@
           "tag": "th",
           "class": [...headerCellClasses.value],
           "colspan": headers.value.length + 1
-        }, headerProps), {
+        }, props.headerProps), {
           default: () => [vue.createVNode("div", {
             "class": "v-data-table-header__content"
           }, [vue.createVNode(VSelect, {
@@ -23264,6 +23269,7 @@
       const inputRef = vue.ref();
       const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
+      const isDragging = vue.shallowRef(false);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -23290,11 +23296,26 @@
       }
       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
+        }));
       }
       vue.watch(model, newValue => {
         const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -23316,6 +23337,7 @@
           "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],
@@ -23377,6 +23399,7 @@
                     const target = e.target;
                     model.value = [...(target.files ?? [])];
                   },
+                  "onDragleave": onDragleave,
                   "onFocus": onFocus,
                   "onBlur": blur
                 }, slotProps, inputAttrs), null), vue.createVNode("div", {
@@ -28364,7 +28387,7 @@
       origin: 'auto',
       scrim: false,
       scrollStrategy: 'reposition',
-      transition: false
+      transition: null
     }), ['absolute', 'persistent'])
   }, 'VTooltip');
   const VTooltip = genericComponent()({
@@ -28391,7 +28414,7 @@
         return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
       });
       const transition = vue.toRef(() => {
-        if (props.transition) return props.transition;
+        if (props.transition != null) return props.transition;
         return isActive.value ? 'scale-transition' : 'fade-transition';
       });
       const activatorProps = vue.computed(() => vue.mergeProps({
@@ -29054,6 +29077,236 @@
 
   // 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 = vue.shallowRef(false);
+      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const display = vue.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 vue.createVNode(VTextField, vue.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 => vue.createVNode(vue.Fragment, null, [hasPrepend && vue.createVNode(VIcon, {
+            "color": props.pip ? model.value : undefined,
+            "icon": props.pipIcon
+          }, null), slots.prepend?.(arg)]) : undefined,
+          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "min-width": "0",
+            "closeOnContentClick": false,
+            "openOnClick": false
+          }, {
+            default: () => [vue.createVNode(VConfirmEdit, vue.mergeProps(confirmEditProps, {
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
+              "onSave": onSave
+            }), {
+              default: _ref2 => {
+                let {
+                  actions,
+                  model: proxyModel,
+                  save,
+                  cancel,
+                  isPristine
+                } = _ref2;
+                return vue.createVNode(VColorPicker, vue.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 = vue.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: vue.toRef(() => currentFormat.value.format)
+    };
+  }
+
+  // Types
+
   // Types
 
   const makeVDateInputProps = propsFactory({
@@ -29062,13 +29315,20 @@
       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({
@@ -29082,7 +29342,8 @@
     emits: {
       save: value => true,
       cancel: () => true,
-      'update:modelValue': val => true
+      'update:modelValue': val => true,
+      'update:menu': val => true
     },
     setup(props, _ref) {
       let {
@@ -29090,9 +29351,16 @@
         slots
       } = _ref;
       const {
-        t
+        t,
+        current: currentLocale
       } = useLocale();
       const adapter = useDate();
+      const {
+        isValid,
+        parseDate,
+        formatDate,
+        parserFormat
+      } = useDateFormat(props, currentLocale);
       const {
         mobile
       } = useDisplay(props);
@@ -29101,8 +29369,9 @@
         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 = vue.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 = vue.shallowRef(false);
       const vTextFieldRef = vue.ref();
       const disabledActions = vue.ref(['save']);
@@ -29110,7 +29379,10 @@
         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 = vue.computed(() => {
         const value = wrapInArray(model.value);
@@ -29132,7 +29404,10 @@
         return 'none';
       });
       const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
-      const isReadonly = vue.computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+      const isReadonly = vue.computed(() => {
+        if (!props.updateOn.length) return true;
+        return !(mobile.value && isEditingInput.value) && props.readonly;
+      });
       vue.watch(menu, val => {
         if (val) return;
         isEditingInput.value = false;
@@ -29142,10 +29417,10 @@
         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();
@@ -29167,9 +29442,12 @@
       }
       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
@@ -29178,10 +29456,36 @@
           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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -29189,11 +29493,13 @@
           "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
@@ -29216,14 +29522,14 @@
               "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;
@@ -29408,43 +29714,31 @@
         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 = vue.shallowRef(false);
+      const isDragging = vue.shallowRef(false);
       const vSheetRef = vue.ref(null);
       const inputRef = vue.ref(null);
-      vue.onMounted(() => {
-        vSheetRef.value?.$el.addEventListener('dragover', onDragOver);
-        vSheetRef.value?.$el.addEventListener('drop', onDrop);
-      });
-      vue.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();
@@ -29480,11 +29774,11 @@
           "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), {
@@ -29535,7 +29829,7 @@
           })]), props.subtitle && vue.createVNode("div", {
             "class": "v-file-upload-subtitle"
           }, [props.subtitle])]), vue.createVNode(VOverlay, {
-            "model-value": dragOver.value,
+            "model-value": isDragging.value,
             "contained": true,
             "scrim": props.scrim
           }, null), slots.input?.({
@@ -30233,8 +30527,8 @@
           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) {
@@ -31172,6 +31466,7 @@
     VClassIcon: VClassIcon,
     VCode: VCode,
     VCol: VCol,
+    VColorInput: VColorInput,
     VColorPicker: VColorPicker,
     VCombobox: VCombobox,
     VComponentIcon: VComponentIcon,
@@ -31638,7 +31933,7 @@
       };
     });
   }
-  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
@@ -31936,7 +32231,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.3";
+  const version = "3.8.5";
 
   /* eslint-disable local-rules/sort-imports */