vuetify 3.7.5 → 3.7.7

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.5
+* Vuetify v3.7.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2031,6 +2031,11 @@ var en = {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)'
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files'
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
@@ -4441,7 +4446,8 @@ const aliases = {
   calendar: 'mdi-calendar',
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
-  eyeDropper: 'mdi-eyedropper'
+  eyeDropper: 'mdi-eyedropper',
+  upload: 'mdi-cloud-upload'
 };
 const mdi = {
   // Not using mergeProps here, functional components merge props by default (?)
@@ -5030,7 +5036,7 @@ const VProgressLinear = genericComponent()({
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
       "aria-valuemax": props.max,
-      "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value,
+      "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
       "onClick": props.clickable && handleClick
     }, {
       default: () => [props.stream && createVNode("div", {
@@ -7609,6 +7615,14 @@ const VSlideGroup = genericComponent()({
         toFocus('last');
       }
     }
+    function getSiblingElement(el, location) {
+      if (!el) return undefined;
+      let sibling = el;
+      do {
+        sibling = sibling?.[location === 'next' ? 'nextElementSibling' : 'previousElementSibling'];
+      } while (sibling?.hasAttribute('disabled'));
+      return sibling;
+    }
     function focus(location) {
       if (!contentRef.el) return;
       let el;
@@ -7616,15 +7630,17 @@ const VSlideGroup = genericComponent()({
         const focusable = focusableChildren(contentRef.el);
         el = focusable[0];
       } else if (location === 'next') {
-        el = contentRef.el.querySelector(':focus')?.nextElementSibling;
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location);
         if (!el) return focus('first');
       } else if (location === 'prev') {
-        el = contentRef.el.querySelector(':focus')?.previousElementSibling;
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location);
         if (!el) return focus('last');
       } else if (location === 'first') {
         el = contentRef.el.firstElementChild;
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'next');
       } else if (location === 'last') {
         el = contentRef.el.lastElementChild;
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'prev');
       }
       if (el) {
         el.focus({
@@ -8704,11 +8720,13 @@ const useNestedItem = (id, isGroup) => {
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator
   };
-  !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
+  onBeforeMount(() => {
+    !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
+  });
   onBeforeUnmount(() => {
     !parent.isGroupActivator && parent.root.unregister(computedId.value);
   });
@@ -8942,16 +8960,22 @@ const VListItem = genericComponent()({
       color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
       variant: props.variant
     }));
+
+    // useNestedItem doesn't call register until beforeMount,
+    // so this can't be an immediate watcher as we don't know parent yet
     watch(() => link.isActive?.value, val => {
-      if (val && parent.value != null) {
+      if (!val) return;
+      handleActiveLink();
+    });
+    onBeforeMount(() => {
+      if (link.isActive?.value) handleActiveLink();
+    });
+    function handleActiveLink() {
+      if (parent.value != null) {
         root.open(parent.value, true);
       }
-      if (val) {
-        openOnSelect(val);
-      }
-    }, {
-      immediate: true
-    });
+      openOnSelect(true);
+    }
     const {
       themeClasses
     } = provideTheme(props);
@@ -11564,7 +11588,7 @@ const VField = genericComponent()({
     useRender(() => {
       const isOutlined = props.variant === 'outlined';
       const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon);
-      const hasClear = !!(props.clearable || slots.clear);
+      const hasClear = !!(props.clearable || slots.clear) && !props.disabled;
       const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
       const label = () => slots.label ? slots.label({
         ...slotProps.value,
@@ -12064,6 +12088,7 @@ function useVirtual(props, items) {
       }
     }
   });
+  let scrollTimeout = -1;
   function handleScroll() {
     if (!containerRef.value || !markerRef.value) return;
     const scrollTop = containerRef.value.scrollTop;
@@ -12080,12 +12105,15 @@ function useVirtual(props, items) {
     }
     lastScrollTop = scrollTop;
     lastScrollTime = scrollTime;
+    window.clearTimeout(scrollTimeout);
+    scrollTimeout = window.setTimeout(handleScrollend, 500);
     calculateVisibleItems();
   }
   function handleScrollend() {
     if (!containerRef.value || !markerRef.value) return;
     scrollVelocity = 0;
     lastScrollTime = 0;
+    window.clearTimeout(scrollTimeout);
     calculateVisibleItems();
   }
   let raf = -1;
@@ -12131,7 +12159,8 @@ function useVirtual(props, items) {
   const computedItems = computed(() => {
     return items.value.slice(first.value, last.value).map((item, index) => ({
       raw: item,
-      index: index + first.value
+      index: index + first.value,
+      key: isObject(item) && 'value' in item ? item.value : index + first.value
     }));
   });
   watch(items, () => {
@@ -12246,7 +12275,7 @@ const VVirtualScroll = genericComponent()({
     });
     useRender(() => {
       const children = computedItems.value.map(item => createVNode(VVirtualScrollItem, {
-        "key": item.index,
+        "key": item.key,
         "renderless": props.renderless,
         "onUpdate:height": height => handleItemResize(item.index, height)
       }, {
@@ -12645,6 +12674,7 @@ const VSelect = genericComponent()({
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
+              "key": "no-data",
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
@@ -12659,7 +12689,7 @@ const VSelect = genericComponent()({
                 } = _ref2;
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
-                  key: index,
+                  key: item.value,
                   onClick: () => select(item, null)
                 });
                 return slots.item?.({
@@ -12840,8 +12870,8 @@ function filterItems(items, query, options) {
   return array;
 }
 function useFilter(props, items, query, options) {
-  const filteredItems = ref([]);
-  const filteredMatches = ref(new Map());
+  const filteredItems = shallowRef([]);
+  const filteredMatches = shallowRef(new Map());
   const transformedItems = computed(() => options?.transform ? unref(items).map(item => [item, options.transform(item)]) : unref(items));
   watchEffect(() => {
     const _query = typeof query === 'function' ? query() : unref(query);
@@ -13002,7 +13032,7 @@ const VAutocomplete = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (checkPrintable(e)) {
+      if (e.key !== ' ' && checkPrintable(e)) {
         vTextFieldRef.value?.focus();
       }
     }
@@ -13010,7 +13040,7 @@ const VAutocomplete = genericComponent()({
       if (form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = model.value.length;
-      if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
       }
       if (['Enter', 'ArrowDown'].includes(e.key)) {
@@ -13033,12 +13063,14 @@ const VAutocomplete = genericComponent()({
       if (['Backspace', 'Delete'].includes(e.key)) {
         if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
         if (~selectionIndex.value) {
+          e.preventDefault();
           const originalSelectionIndex = selectionIndex.value;
           select(model.value[selectionIndex.value], false);
           selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1;
         }
+        return;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -13050,8 +13082,7 @@ const VAutocomplete = genericComponent()({
           selectionIndex.value = -1;
           vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length);
         }
-      }
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return;
         const next = selectionIndex.value + 1;
         if (model.value[next]) {
@@ -13060,6 +13091,8 @@ const VAutocomplete = genericComponent()({
           selectionIndex.value = -1;
           vTextFieldRef.value.setSelectionRange(0, 0);
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1;
       }
     }
     function onChange(e) {
@@ -13219,6 +13252,7 @@ const VAutocomplete = genericComponent()({
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
+              "key": "no-data",
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
@@ -13233,7 +13267,7 @@ const VAutocomplete = genericComponent()({
                 } = _ref4;
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
-                  key: index,
+                  key: item.value,
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
@@ -16074,7 +16108,7 @@ const VColorPickerPreview = defineComponent({
         const result = await eyeDropper.open({
           signal: abortController.signal
         });
-        const colorHexValue = HexToHSV(result.sRGBHex);
+        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex));
         emit('update:color', {
           ...(props.color ?? nullColor),
           ...colorHexValue
@@ -16885,7 +16919,7 @@ const VCombobox = genericComponent()({
       menu.value = !menu.value;
     }
     function onListKeydown(e) {
-      if (checkPrintable(e)) {
+      if (e.key !== ' ' && checkPrintable(e)) {
         vTextFieldRef.value?.focus();
       }
     }
@@ -16894,7 +16928,7 @@ const VCombobox = genericComponent()({
       if (isComposingIgnoreKey(e) || form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = model.value.length;
-      if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
       }
       if (['Enter', 'ArrowDown'].includes(e.key)) {
@@ -16924,12 +16958,14 @@ const VCombobox = genericComponent()({
       if (['Backspace', 'Delete'].includes(e.key)) {
         if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
         if (~selectionIndex.value) {
+          e.preventDefault();
           const originalSelectionIndex = selectionIndex.value;
           select(model.value[selectionIndex.value], false);
           selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1;
         }
+        return;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -16941,8 +16977,7 @@ const VCombobox = genericComponent()({
           selectionIndex.value = -1;
           vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length);
         }
-      }
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return;
         const next = selectionIndex.value + 1;
         if (model.value[next]) {
@@ -16951,6 +16986,8 @@ const VCombobox = genericComponent()({
           selectionIndex.value = -1;
           vTextFieldRef.value.setSelectionRange(0, 0);
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1;
       }
     }
     function onAfterEnter() {
@@ -17098,6 +17135,7 @@ const VCombobox = genericComponent()({
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
+              "key": "no-data",
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
               "ref": vVirtualScrollRef,
@@ -17112,7 +17150,7 @@ const VCombobox = genericComponent()({
                 } = _ref4;
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
-                  key: index,
+                  key: item.value,
                   active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item, null)
                 });
@@ -24856,7 +24894,7 @@ const VRangeSlider = genericComponent()({
               // the thumbs are on top of each other
               // and they are both at minimum value
               // but only if focused from outside.
-              if (model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== stopThumbRef.value?.$el) {
+              if (max.value !== min.value && model.value[0] === model.value[1] && model.value[1] === min.value && e.relatedTarget !== stopThumbRef.value?.$el) {
                 startThumbRef.value?.$el.blur();
                 stopThumbRef.value?.$el.focus();
               }
@@ -24885,7 +24923,7 @@ const VRangeSlider = genericComponent()({
               // the thumbs are on top of each other
               // and they are both at maximum value
               // but only if focused from outside.
-              if (model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== startThumbRef.value?.$el) {
+              if (max.value !== min.value && model.value[0] === model.value[1] && model.value[0] === max.value && e.relatedTarget !== startThumbRef.value?.$el) {
                 stopThumbRef.value?.$el.blur();
                 startThumbRef.value?.$el.focus();
               }
@@ -25522,7 +25560,7 @@ const makeLineProps = propsFactory({
     default: 8
   },
   showLabels: Boolean,
-  smooth: Boolean,
+  smooth: [Boolean, String, Number],
   width: {
     type: [Number, String],
     default: 300
@@ -25603,6 +25641,7 @@ const VBarline = genericComponent()({
     });
     const bars = computed(() => genBars(items.value, boundary.value));
     const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+    const smooth = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
       return createVNode("svg", {
@@ -25624,8 +25663,8 @@ const VBarline = genericComponent()({
         "y": item.y,
         "width": lineWidth.value,
         "height": item.height,
-        "rx": typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0,
-        "ry": typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0
+        "rx": smooth.value,
+        "ry": smooth.value
       }, [props.autoDraw && createVNode(Fragment, null, [createVNode("animate", {
         "attributeName": "y",
         "from": item.y + item.height,
@@ -25827,7 +25866,8 @@ const VTrendline = genericComponent()({
       immediate: true
     });
     function genPath$1(fill) {
-      return genPath(genPoints(items.value, boundary.value), props.smooth ? 8 : Number(props.smooth), fill, parseInt(props.height, 10));
+      const smoothValue = typeof props.smooth === 'boolean' ? props.smooth ? 8 : 0 : Number(props.smooth);
+      return genPath(genPoints(items.value, boundary.value), smoothValue, fill, parseInt(props.height, 10));
     }
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
@@ -26151,6 +26191,7 @@ const VStepperItem = genericComponent()({
           'v-stepper-item--error': hasError.value
         }, group?.selectedClass.value],
         "disabled": !props.editable,
+        "type": "button",
         "onClick": onClick
       }, [isClickable.value && genOverlays(true, 'v-stepper-item'), createVNode(VAvatar, {
         "key": "stepper-avatar",
@@ -28040,8 +28081,14 @@ const VCalendar = genericComponent()({
 
 // Types
 
+// Types
+
 const makeVDateInputProps = propsFactory({
   hideActions: Boolean,
+  location: {
+    type: String,
+    default: 'bottom start'
+  },
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps({
@@ -28051,7 +28098,7 @@ const makeVDateInputProps = propsFactory({
   ...omit(makeVDatePickerProps({
     weeksInMonth: 'dynamic',
     hideHeader: true
-  }), ['active'])
+  }), ['active', 'location'])
 }, 'VDateInput');
 const VDateInput = genericComponent()({
   name: 'VDateInput',
@@ -28107,7 +28154,7 @@ const VDateInput = genericComponent()({
     }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
-      const datePickerProps = VDatePicker.filterProps(omit(props, ['active']));
+      const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location']));
       const textFieldProps = VTextField.filterProps(props);
       return createVNode(VTextField, mergeProps(textFieldProps, {
         "class": props.class,
@@ -28125,18 +28172,23 @@ const VDateInput = genericComponent()({
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
           "min-width": "0",
+          "location": props.location,
           "closeOnContentClick": false,
           "openOnClick": false
         }, {
           default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
-            "onSave": onSave
+            "onSave": onSave,
+            "onCancel": () => menu.value = false
           }), {
             default: _ref2 => {
               let {
                 actions,
-                model: proxyModel
+                model: proxyModel,
+                save,
+                cancel,
+                isPristine
               } = _ref2;
               return createVNode(VDatePicker, mergeProps(datePickerProps, {
                 "modelValue": props.hideActions ? model.value : proxyModel.value,
@@ -28150,7 +28202,11 @@ const VDateInput = genericComponent()({
                 },
                 "onMousedown": e => e.preventDefault()
               }), {
-                actions: !props.hideActions ? actions : undefined
+                actions: !props.hideActions ? () => slots.actions?.({
+                  save,
+                  cancel,
+                  isPristine
+                }) ?? actions() : undefined
               });
             }
           })]
@@ -28162,6 +28218,319 @@ const VDateInput = genericComponent()({
 
 // Types
 
+const makeVFileUploadItemProps = propsFactory({
+  clearable: Boolean,
+  file: {
+    type: Object,
+    default: null
+  },
+  fileIcon: {
+    type: String,
+    // TODO: setup up a proper aliased icon
+    default: 'mdi-file-document'
+  },
+  showSize: Boolean,
+  ...makeVListItemProps({
+    border: true,
+    rounded: true,
+    lines: 'two'
+  })
+}, 'VFileUploadItem');
+const VFileUploadItem = genericComponent()({
+  name: 'VFileUploadItem',
+  props: makeVFileUploadItemProps(),
+  emits: {
+    'click:remove': () => true,
+    click: e => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const preview = ref();
+    const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
+    function onClickRemove() {
+      emit('click:remove');
+    }
+    watchEffect(() => {
+      preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined;
+    });
+    useRender(() => {
+      const listItemProps = VListItem.filterProps(props);
+      return createVNode(VListItem, mergeProps(listItemProps, {
+        "title": props.title ?? props.file?.name,
+        "subtitle": props.showSize ? humanReadableFileSize(props.file?.size, base.value) : props.file?.type,
+        "class": "v-file-upload-item"
+      }), {
+        ...slots,
+        prepend: slotProps => createVNode(Fragment, null, [!slots.prepend ? createVNode(VAvatar, {
+          "icon": props.fileIcon,
+          "image": preview.value,
+          "rounded": true
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VAvatar: {
+              image: preview.value,
+              icon: !preview.value ? props.fileIcon : undefined,
+              rounded: true
+            }
+          }
+        }, {
+          default: () => [slots.prepend?.(slotProps) ?? createVNode(VAvatar, null, null)]
+        })]),
+        append: slotProps => createVNode(Fragment, null, [props.clearable && createVNode(Fragment, null, [!slots.clear ? createVNode(VBtn, {
+          "icon": "$clear",
+          "density": "comfortable",
+          "variant": "text",
+          "onClick": onClickRemove
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              icon: '$clear',
+              density: 'comfortable',
+              variant: 'text'
+            }
+          }
+        }, {
+          default: () => [slots.clear?.({
+            ...slotProps,
+            props: {
+              onClick: onClickRemove
+            }
+          }) ?? createVNode(VBtn, null, null)]
+        })]), slots.append?.(slotProps)])
+      });
+    });
+  }
+});
+
+// Types
+
+const makeVFileUploadProps = propsFactory({
+  browseText: {
+    type: String,
+    default: '$vuetify.fileUpload.browse'
+  },
+  dividerText: {
+    type: String,
+    default: '$vuetify.fileUpload.divider'
+  },
+  title: {
+    type: String,
+    default: '$vuetify.fileUpload.title'
+  },
+  subtitle: String,
+  icon: {
+    type: IconValue,
+    default: '$upload'
+  },
+  modelValue: {
+    type: [Array, Object],
+    default: null,
+    validator: val => {
+      return wrapInArray(val).every(v => v != null && typeof v === 'object');
+    }
+  },
+  clearable: Boolean,
+  disabled: Boolean,
+  hideBrowse: Boolean,
+  multiple: Boolean,
+  scrim: {
+    type: [Boolean, String],
+    default: true
+  },
+  showSize: Boolean,
+  name: String,
+  ...makeDelayProps(),
+  ...makeDensityProps(),
+  ...only(makeVDividerProps({
+    length: 150
+  }), ['length', 'thickness', 'opacity']),
+  ...makeVSheetProps()
+}, 'VFileUpload');
+const VFileUpload = genericComponent()({
+  name: 'VFileUpload',
+  inheritAttrs: false,
+  props: makeVFileUploadProps(),
+  emits: {
+    'update:modelValue': files => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const {
+      t
+    } = useLocale();
+    const {
+      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 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) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      dragOver.value = true;
+    }
+    function onDragLeave(e) {
+      e.preventDefault();
+      dragOver.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;
+    }
+    function onClick() {
+      inputRef.value?.click();
+    }
+    function onClickRemove(index) {
+      model.value = model.value.filter((_, i) => i !== index);
+      if (model.value.length > 0 || !inputRef.value) return;
+      inputRef.value.value = '';
+    }
+    useRender(() => {
+      const hasTitle = !!(slots.title || props.title);
+      const hasIcon = !!(slots.icon || props.icon);
+      const hasBrowse = !!(!props.hideBrowse && (slots.browse || props.density === 'default'));
+      const cardProps = VSheet.filterProps(props);
+      const dividerProps = VDivider.filterProps(props);
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const inputNode = createVNode("input", mergeProps({
+        "ref": inputRef,
+        "type": "file",
+        "disabled": props.disabled,
+        "multiple": props.multiple,
+        "name": props.name,
+        "onChange": e => {
+          if (!e.target) return;
+          const target = e.target;
+          model.value = [...(target.files ?? [])];
+        }
+      }, inputAttrs), null);
+      return createVNode(Fragment, null, [createVNode(VSheet, mergeProps({
+        "ref": vSheetRef
+      }, cardProps, {
+        "class": ['v-file-upload', {
+          'v-file-upload--clickable': !hasBrowse,
+          'v-file-upload--disabled': props.disabled,
+          'v-file-upload--dragging': dragOver.value
+        }, densityClasses.value],
+        "onDragleave": onDragLeave,
+        "onDragover": onDragOver,
+        "onDrop": onDrop,
+        "onClick": !hasBrowse ? onClick : undefined
+      }, rootAttrs), {
+        default: () => [hasIcon && createVNode("div", {
+          "key": "icon",
+          "class": "v-file-upload-icon"
+        }, [!slots.icon ? createVNode(VIcon, {
+          "key": "icon-icon",
+          "icon": props.icon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "icon-defaults",
+          "defaults": {
+            VIcon: {
+              icon: props.icon
+            }
+          }
+        }, {
+          default: () => [slots.icon()]
+        })]), hasTitle && createVNode("div", {
+          "key": "title",
+          "class": "v-file-upload-title"
+        }, [slots.title?.() ?? t(props.title)]), props.density === 'default' && createVNode(Fragment, null, [createVNode("div", {
+          "key": "upload-divider",
+          "class": "v-file-upload-divider"
+        }, [slots.divider?.() ?? createVNode(VDivider, dividerProps, {
+          default: () => [t(props.dividerText)]
+        })]), hasBrowse && createVNode(Fragment, null, [!slots.browse ? createVNode(VBtn, {
+          "readonly": props.disabled,
+          "size": "large",
+          "text": t(props.browseText),
+          "variant": "tonal",
+          "onClick": onClick
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              readonly: props.disabled,
+              size: 'large',
+              text: t(props.browseText),
+              variant: 'tonal'
+            }
+          }
+        }, {
+          default: () => [slots.browse({
+            props: {
+              onClick
+            }
+          })]
+        })]), props.subtitle && createVNode("div", {
+          "class": "v-file-upload-subtitle"
+        }, [props.subtitle])]), createVNode(VOverlay, {
+          "model-value": dragOver.value,
+          "contained": true,
+          "scrim": props.scrim
+        }, null), slots.input?.({
+          inputNode
+        }) ?? inputNode]
+      }), model.value.length > 0 && createVNode("div", {
+        "class": "v-file-upload-items"
+      }, [model.value.map((file, i) => {
+        const slotProps = {
+          file,
+          props: {
+            'onClick:remove': () => onClickRemove(i)
+          }
+        };
+        return createVNode(VDefaultsProvider, {
+          "key": i,
+          "defaults": {
+            VFileUploadItem: {
+              file,
+              clearable: props.clearable,
+              disabled: props.disabled,
+              showSize: props.showSize
+            }
+          }
+        }, {
+          default: () => [slots.item?.(slotProps) ?? createVNode(VFileUploadItem, {
+            "key": i,
+            "onClick:remove": () => onClickRemove(i)
+          }, slots)]
+        });
+      })])]);
+    });
+  }
+});
+
+// Types
+
 const makeVNumberInputProps = propsFactory({
   controlVariant: {
     type: String,
@@ -28202,13 +28571,16 @@ const VNumberInput = genericComponent()({
     const _model = useProxiedModel(props, 'modelValue');
     const model = computed({
       get: () => _model.value,
+      // model.value could be empty string from VTextField
+      // but _model.value should be eventually kept in type Number | null
       set(val) {
-        if (val === null) {
+        if (val === null || val === '') {
           _model.value = null;
           return;
         }
-        if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
-          _model.value = +val;
+        const value = Number(val);
+        if (!isNaN(value) && value <= props.max && value >= props.min) {
+          _model.value = value;
         }
       }
     });
@@ -28381,7 +28753,7 @@ const VNumberInput = genericComponent()({
         "class": "v-number-input__control"
       }, [createVNode(VDivider, {
         "vertical": true
-      }, null), incrementControlNode()]) : !props.reverse ? createVNode(Fragment, null, [dividerNode(), controlNode()]) : undefined;
+      }, null), incrementControlNode()]) : props.reverse ? undefined : createVNode(Fragment, null, [dividerNode(), controlNode()]);
       const hasAppendInner = slots['append-inner'] || appendInnerControl;
       const prependInnerControl = controlVariant.value === 'split' ? createVNode("div", {
         "class": "v-number-input__control"
@@ -29613,7 +29985,7 @@ const VTreeviewItem = genericComponent()({
         "active": vListItemRef.value?.isActivated,
         "class": ['v-treeview-item', {
           'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
-          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)
+          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id))
         }, props.class],
         "ripple": false,
         "onClick": props.onClick ?? activateGroupActivator
@@ -29750,7 +30122,7 @@ const VTreeviewChildren = genericComponent()({
             onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : undefined
           };
           return createVNode(VTreeviewItem, mergeProps(listItemProps, {
-            "value": props.returnObject ? toRaw(item.raw) : itemProps.value,
+            "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
           }), slotsWithItem);
         },
@@ -29993,6 +30365,8 @@ var components = /*#__PURE__*/Object.freeze({
   VField: VField,
   VFieldLabel: VFieldLabel,
   VFileInput: VFileInput,
+  VFileUpload: VFileUpload,
+  VFileUploadItem: VFileUploadItem,
   VFooter: VFooter,
   VForm: VForm,
   VHover: VHover,
@@ -30406,7 +30780,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.5";
+const version$1 = "3.7.7";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30659,7 +31033,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.5";
+const version = "3.7.7";
 
 /* eslint-disable local-rules/sort-imports */