@vuetify/nightly 4.0.0-dev-20230419.0 → 4.0.0-dev-20230421.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230419.0
+* Vuetify v4.0.0-dev-20230421.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -207,10 +207,6 @@
     let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     return Math.max(min, Math.min(max, value));
   }
-  function getDecimals(value) {
-    const trimmedStr = value.toString().trim();
-    return trimmedStr.includes('.') ? trimmedStr.length - trimmedStr.indexOf('.') - 1 : 0;
-  }
   function padEnd(str, length) {
     let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
     return str + char.repeat(Math.max(0, length - str.length));
@@ -3257,6 +3253,98 @@
 
   // Utilities
 
+  // Types
+
+  // Composables
+  const makeScrollProps = propsFactory({
+    scrollTarget: {
+      type: String
+    },
+    scrollThreshold: {
+      type: [String, Number]
+    }
+  }, 'scroll');
+  function useScroll(props) {
+    let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      thresholdMetCallback,
+      scrollThreshold,
+      canScroll
+    } = args;
+    let previousScroll = 0;
+    const target = vue.ref(null);
+    const currentScroll = vue.ref(0);
+    const savedScroll = vue.ref(0);
+    const currentThreshold = vue.ref(0);
+    const isScrollActive = vue.ref(false);
+    const isScrollingUp = vue.ref(false);
+    const computedScrollThreshold = vue.computed(() => {
+      return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+    });
+    const onScroll = () => {
+      const targetEl = target.value;
+      if (!targetEl || canScroll && !canScroll.value) return;
+      previousScroll = currentScroll.value;
+      currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+      isScrollingUp.value = currentScroll.value < previousScroll;
+      currentThreshold.value = Math.abs(currentScroll.value - computedScrollThreshold.value);
+    };
+    vue.watch(isScrollingUp, () => {
+      savedScroll.value = savedScroll.value || currentScroll.value;
+    });
+    vue.watch(isScrollActive, () => {
+      savedScroll.value = 0;
+    });
+    vue.onMounted(() => {
+      vue.watch(() => props.scrollTarget, scrollTarget => {
+        const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
+        if (!newTarget) {
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          return;
+        }
+        if (newTarget === target.value) return;
+        target.value?.removeEventListener('scroll', onScroll);
+        target.value = newTarget;
+        target.value.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      }, {
+        immediate: true
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      target.value?.removeEventListener('scroll', onScroll);
+    });
+    thresholdMetCallback && vue.watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
+      thresholdMet && thresholdMetCallback({
+        currentThreshold: currentThreshold.value,
+        isScrollingUp: isScrollingUp.value,
+        savedScroll
+      });
+    }, {
+      immediate: true
+    });
+
+    // Do we need this? If yes - seems that
+    // there's no need to expose onScroll
+    canScroll && vue.watch(canScroll, onScroll, {
+      immediate: true
+    });
+    return {
+      computedScrollThreshold,
+      currentScroll,
+      currentThreshold,
+      isScrollActive,
+      // required only for testing
+      // probably can be removed
+      // later (2 chars chlng)
+      isScrollingUp,
+      savedScroll
+    };
+  }
+
+  // Utilities
+
   // Composables
   function useSsrBoot() {
     const isBooted = vue.ref(false);
@@ -3279,13 +3367,7 @@
   const VAppBar = genericComponent()({
     name: 'VAppBar',
     props: {
-      // TODO: Implement scrolling techniques
-      // hideOnScroll: Boolean
-      // invertedScroll: Boolean
-      // collapseOnScroll: Boolean
-      // elevateOnScroll: Boolean
-      // shrinkOnScroll: Boolean
-      // fadeImageOnScroll: Boolean
+      scrollBehavior: String,
       modelValue: {
         type: Boolean,
         default: true
@@ -3297,6 +3379,7 @@
       },
       ...makeVToolbarProps(),
       ...makeLayoutItemProps(),
+      ...makeScrollProps(),
       height: {
         type: [Number, String],
         default: 64
@@ -3311,11 +3394,63 @@
       } = _ref;
       const vToolbarRef = vue.ref();
       const isActive = useProxiedModel(props, 'modelValue');
+      const scrollBehavior = vue.computed(() => {
+        const behavior = new Set(props.scrollBehavior?.split(' ') ?? []);
+        return {
+          hide: behavior.has('hide'),
+          // fullyHide: behavior.has('fully-hide'),
+          inverted: behavior.has('inverted'),
+          collapse: behavior.has('collapse'),
+          elevate: behavior.has('elevate'),
+          fadeImage: behavior.has('fade-image')
+          // shrink: behavior.has('shrink'),
+        };
+      });
+
+      const canScroll = vue.computed(() => {
+        const behavior = scrollBehavior.value;
+        return behavior.hide ||
+        // behavior.fullyHide ||
+        behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage ||
+        // behavior.shrink ||
+        !isActive.value;
+      });
+      const {
+        currentScroll,
+        currentThreshold,
+        computedScrollThreshold,
+        isScrollingUp
+      } = useScroll(props, {
+        canScroll
+      });
+      const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
+      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
+      const scrollRatio = vue.computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+      const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.computed(() => {
+        if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
         const height = vToolbarRef.value?.contentHeight ?? 0;
         const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
         return height + extensionHeight;
       });
+      function setActive() {
+        const val = currentScroll.value;
+        if (scrollBehavior.value.hide) {
+          if (scrollBehavior.value.inverted) {
+            isActive.value = val > computedScrollThreshold.value;
+          } else {
+            isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+          }
+        } else if (scrollBehavior.value.inverted) {
+          isActive.value = currentScroll.value === 0;
+        } else {
+          isActive.value = true;
+        }
+      }
+      vue.watch(currentScroll, setActive, {
+        immediate: true
+      });
+      vue.watch(scrollBehavior, setActive);
       const {
         ssrBootStyles
       } = useSsrBoot();
@@ -3326,7 +3461,7 @@
         order: vue.computed(() => parseInt(props.order, 10)),
         position: vue.toRef(props, 'location'),
         layoutSize: height,
-        elementSize: height,
+        elementSize: vue.ref(undefined),
         active: isActive,
         absolute: vue.toRef(props, 'absolute')
       });
@@ -3339,10 +3474,14 @@
           }],
           "style": {
             ...layoutItemStyles.value,
+            '--v-toolbar-image-opacity': opacity.value,
             height: undefined,
             ...ssrBootStyles.value
           }
-        }, toolbarProps), slots);
+        }, toolbarProps, {
+          "collapse": isCollapsed.value,
+          "flat": isFlat.value
+        }), slots);
       });
       return {};
     }
@@ -5300,7 +5439,8 @@
 
   // Composables
   const makeFocusProps = propsFactory({
-    focused: Boolean
+    focused: Boolean,
+    'onUpdate:focused': EventProp()
   }, 'focus');
   function useFocus(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
@@ -5895,6 +6035,8 @@
     appendIcon: IconValue,
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
+    hint: String,
+    persistentHint: Boolean,
     messages: {
       type: [Array, String],
       default: () => []
@@ -5958,10 +6100,19 @@
         resetValidation,
         validate
       }));
+      const messages = vue.computed(() => {
+        if (errorMessages.value.length > 0) {
+          return errorMessages.value;
+        } else if (props.hint && (props.persistentHint || props.focused)) {
+          return props.hint;
+        } else {
+          return props.messages;
+        }
+      });
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.prependIcon);
         const hasAppend = !!(slots.append || props.appendIcon);
-        const hasMessages = !!(props.messages?.length || errorMessages.value.length);
+        const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
         return vue.createVNode("div", {
           "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
@@ -5984,7 +6135,7 @@
         }, [vue.createVNode(VMessages, {
           "id": messagesId.value,
           "active": hasMessages,
-          "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
+          "messages": messages.value
         }, {
           message: slots.message
         }), slots.details?.(slotProps.value)])]);
@@ -5996,10 +6147,6 @@
       };
     }
   });
-  function filterInputProps(props) {
-    const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-    return pick(props, keys);
-  }
 
   const VCounter = genericComponent()({
     name: 'VCounter',
@@ -6125,8 +6272,6 @@
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -6181,9 +6326,6 @@
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
       const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -6226,7 +6368,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -6236,12 +6378,9 @@
             'v-text-field--prefixed': props.prefix,
             'v-text-field--suffixed': props.suffix,
             'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-          }],
-          "onClick:prepend": props['onClick:prepend'],
-          "onClick:append": props['onClick:append']
+          }]
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref2 => {
@@ -6650,7 +6789,7 @@
       const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": "v-checkbox"
@@ -8062,7 +8201,12 @@
   function useItems(props) {
     const items = vue.computed(() => transformItems$1(props, props.items));
     function transformIn(value) {
-      return value.map(item => transformItem$1(props, item));
+      return value.map(v => {
+        const existingItem = items.value.find(item => deepEqual(v, item.value));
+        // Nullish existingItem means value is a custom input value from combobox
+        // In this case, use transformItem to create an InternalItem based on value
+        return existingItem ?? transformItem$1(props, v);
+      });
     }
     function transformOut(value) {
       return value.map(_ref => {
@@ -8740,7 +8884,7 @@
   }
 
   /** Get size of element ignoring max-width/max-height */
-  function getIntrinsicSize(el) {
+  function getIntrinsicSize(el, isRtl) {
     // const scrollables = new Map<Element, [number, number]>()
     // el.querySelectorAll('*').forEach(el => {
     //   const x = el.scrollLeft
@@ -8757,7 +8901,11 @@
 
     /* eslint-disable-next-line sonarjs/prefer-immediate-return */
     const contentBox = nullifyTransforms(el);
-    contentBox.x -= parseFloat(el.style.left || 0);
+    if (isRtl) {
+      contentBox.x += parseFloat(el.style.right || 0);
+    } else {
+      contentBox.x -= parseFloat(el.style.left || 0);
+    }
     contentBox.y -= parseFloat(el.style.top || 0);
 
     // el.style.maxWidth = initialMaxWidth
@@ -8838,7 +8986,7 @@
       });
       if (!data.activatorEl.value || !data.contentEl.value) return;
       const targetBox = data.activatorEl.value.getBoundingClientRect();
-      const contentBox = getIntrinsicSize(data.contentEl.value);
+      const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
       const viewportMargin = 12;
       if (!scrollParents.length) {
@@ -9014,7 +9162,8 @@
         transformOrigin: `${placement.origin.side} ${placement.origin.align}`,
         // transform: `translate(${pixelRound(x)}px, ${pixelRound(y)}px)`,
         top: convertToUnit(pixelRound(y)),
-        left: convertToUnit(pixelRound(x)),
+        left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),
+        right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,
         minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),
         maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
         maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
@@ -9909,6 +10058,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:menu': val => true
     },
@@ -10025,6 +10175,9 @@
           menu.value = false;
         }
       }
+      function onFocusin(e) {
+        isFocused.value = true;
+      }
       function onFocusout(e) {
         if (e.relatedTarget == null) {
           vTextFieldRef.value?.focus();
@@ -10079,6 +10232,7 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "onFocusin": onFocusin,
               "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -10157,6 +10311,7 @@
         });
       });
       return forwardRefs({
+        isFocused,
         menu,
         select
       }, vTextFieldRef);
@@ -10295,6 +10450,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:search': val => true,
       'update:modelValue': val => true,
       'update:menu': val => true
@@ -10318,11 +10474,17 @@
           _menu.value = v;
         }
       });
+      const selectionIndex = vue.ref(-1);
+      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
         transformOut
       } = useItems(props);
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(color);
       const search = useProxiedModel(props, 'search', '');
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
         const transformed = transformOut(v);
@@ -10345,6 +10507,7 @@
         return filteredItems.value;
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const selection = vue.computed(() => selections.value[selectionIndex.value]);
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10358,7 +10521,9 @@
       }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
-        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        const selectionStart = vTextFieldRef.value.selectionStart;
+        const length = selected.value.length;
+        if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
           e.preventDefault();
         }
         if (['Enter', 'ArrowDown'].includes(e.key)) {
@@ -10375,6 +10540,38 @@
         } else if (e.key === 'ArrowUp') {
           listRef.value?.focus('prev');
         }
+        if (!props.multiple) return;
+        if (['Backspace', 'Delete'].includes(e.key)) {
+          if (selectionIndex.value < 0) {
+            if (e.key === 'Backspace' && !search.value) {
+              selectionIndex.value = length - 1;
+            }
+            return;
+          }
+          const originalSelectionIndex = selectionIndex.value;
+          if (selection.value) select(selection.value);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        }
+        if (e.key === 'ArrowLeft') {
+          if (selectionIndex.value < 0 && selectionStart > 0) return;
+          const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
+          if (selections.value[prev]) {
+            selectionIndex.value = prev;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length);
+          }
+        }
+        if (e.key === 'ArrowRight') {
+          if (selectionIndex.value < 0) return;
+          const next = selectionIndex.value + 1;
+          if (selections.value[next]) {
+            selectionIndex.value = next;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(0, 0);
+          }
+        }
       }
       function onInput(e) {
         search.value = e.target.value;
@@ -10396,7 +10593,6 @@
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
-            search.value = '';
           } else {
             const value = [...model.value];
             value.splice(index, 1);
@@ -10441,12 +10637,15 @@
           "onUpdate:modelValue": v => {
             if (v == null) model.value = [];
           },
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "onInput": onInput,
           "class": ['v-autocomplete', {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
+            'v-autocomplete--selecting-index': selectionIndex.value > -1,
             [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
             'v-autocomplete--selection-slot': !!slots.selection
           }],
@@ -10455,8 +10654,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -10521,7 +10718,8 @@
             };
             return vue.createVNode("div", {
               "key": item.value,
-              "class": "v-autocomplete__selection"
+              "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
+              "style": index === selectionIndex.value ? textColorStyles.value : {}
             }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
@@ -12416,11 +12614,36 @@
       elevation: 2
     })
   }, 'slider');
+  const useSteps = props => {
+    const min = vue.computed(() => parseFloat(props.min));
+    const max = vue.computed(() => parseFloat(props.max));
+    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+    const decimals = vue.computed(() => {
+      const trimmedStep = step.value.toString().trim();
+      return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
+    });
+    function roundValue(value) {
+      if (step.value <= 0) return value;
+      const clamped = clamp(value, min.value, max.value);
+      const offset = min.value % step.value;
+      const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
+      return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
+    }
+    return {
+      min,
+      max,
+      step,
+      decimals,
+      roundValue
+    };
+  };
   const useSlider = _ref => {
     let {
       props,
-      handleSliderMouseUp,
-      handleMouseMove,
+      steps,
+      onSliderStart,
+      onSliderMove,
+      onSliderEnd,
       getActiveThumb
     } = _ref;
     const {
@@ -12434,10 +12657,13 @@
       }
       return hd;
     });
-    const min = vue.computed(() => parseFloat(props.min));
-    const max = vue.computed(() => parseFloat(props.max));
-    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
-    const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
+    const {
+      min,
+      max,
+      step,
+      decimals,
+      roundValue
+    } = steps;
     const thumbSize = vue.computed(() => parseInt(props.thumbSize, 10));
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
@@ -12451,13 +12677,6 @@
     const startOffset = vue.ref(0);
     const trackContainerRef = vue.ref();
     const activeThumbRef = vue.ref();
-    function roundValue(value) {
-      if (step.value <= 0) return value;
-      const clamped = clamp(value, min.value, max.value);
-      const offset = min.value % step.value;
-      const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
-      return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
-    }
     function parseMouseMove(e) {
       const vertical = props.direction === 'vertical';
       const start = vertical ? 'top' : 'left';
@@ -12474,14 +12693,11 @@
       if (vertical || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos;
       return roundValue(min.value + clickPos * (max.value - min.value));
     }
-    let thumbMoved = false;
     const handleStop = e => {
-      if (!thumbMoved) {
-        startOffset.value = 0;
-        handleSliderMouseUp(parseMouseMove(e));
-      }
+      onSliderEnd({
+        value: parseMouseMove(e)
+      });
       mousePressed.value = false;
-      thumbMoved = false;
       startOffset.value = 0;
     };
     const handleStart = e => {
@@ -12490,20 +12706,25 @@
       activeThumbRef.value.focus();
       mousePressed.value = true;
       if (activeThumbRef.value.contains(e.target)) {
-        thumbMoved = true;
         startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
       } else {
         startOffset.value = 0;
-        handleMouseMove(parseMouseMove(e));
+        onSliderMove({
+          value: parseMouseMove(e)
+        });
       }
+      onSliderStart({
+        value: parseMouseMove(e)
+      });
     };
     const moveListenerOptions = {
       passive: true,
       capture: true
     };
     function onMouseMove(e) {
-      thumbMoved = true;
-      handleMouseMove(parseMouseMove(e));
+      onSliderMove({
+        value: parseMouseMove(e)
+      });
     }
     function onSliderMouseUp(e) {
       e.stopPropagation();
@@ -12879,13 +13100,21 @@
     },
     emits: {
       'update:focused': value => true,
-      'update:modelValue': v => true
+      'update:modelValue': v => true,
+      start: value => true,
+      end: value => true
     },
     setup(props, _ref) {
       let {
-        slots
+        slots,
+        emit
       } = _ref;
       const thumbContainerRef = vue.ref();
+      const steps = useSteps(props);
+      const model = useProxiedModel(props, 'modelValue', undefined, v => {
+        const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
+        return steps.roundValue(value);
+      });
       const {
         min,
         max,
@@ -12899,16 +13128,26 @@
         readonly
       } = useSlider({
         props,
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        handleSliderMouseUp: newValue => model.value = roundValue(newValue),
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        handleMouseMove: newValue => model.value = roundValue(newValue),
+        steps,
+        onSliderStart: () => {
+          emit('start', model.value);
+        },
+        onSliderEnd: _ref2 => {
+          let {
+            value
+          } = _ref2;
+          const roundedValue = roundValue(value);
+          model.value = roundedValue;
+          emit('end', roundedValue);
+        },
+        onSliderMove: _ref3 => {
+          let {
+            value
+          } = _ref3;
+          return model.value = roundValue(value);
+        },
         getActiveThumb: () => thumbContainerRef.value?.$el
       });
-      const model = useProxiedModel(props, 'modelValue', undefined, v => {
-        const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v;
-        return roundValue(value);
-      });
       const {
         isFocused,
         focus,
@@ -12916,7 +13155,7 @@
       } = useFocus(props);
       const trackStop = vue.computed(() => position(model.value));
       useRender(() => {
-        const [inputProps, _] = filterInputProps(props);
+        const [inputProps, _] = VInput.filterProps(props);
         const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', {
@@ -12934,11 +13173,11 @@
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-          default: _ref2 => {
+          default: _ref4 => {
             let {
               id,
               messagesId
-            } = _ref2;
+            } = _ref4;
             return vue.createVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
@@ -13580,6 +13819,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:search': val => true,
       'update:menu': val => true
@@ -13717,8 +13957,9 @@
             }
             return;
           }
-          select(selection.value);
-          vue.nextTick(() => !selection.value && (selectionIndex.value = length - 2));
+          const originalSelectionIndex = selectionIndex.value;
+          if (selection.value) select(selection.value);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         }
         if (e.key === 'ArrowLeft') {
           if (selectionIndex.value < 0 && selectionStart > 0) return;
@@ -13803,6 +14044,8 @@
           "onUpdate:modelValue": [$event => search.value = $event, v => {
             if (v == null) model.value = [];
           }],
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "class": ['v-combobox', {
@@ -13816,8 +14059,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -14269,8 +14510,6 @@
         default: '$vuetify.fileInput.counter'
       },
       multiple: Boolean,
-      hint: String,
-      persistentHint: Boolean,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -14295,6 +14534,7 @@
     emits: {
       'click:control': e => true,
       'mousedown:control': e => true,
+      'update:focused': focused => true,
       'update:modelValue': files => true
     },
     setup(props, _ref) {
@@ -14307,6 +14547,11 @@
         t
       } = useLocale();
       const model = useProxiedModel(props, 'modelValue');
+      const {
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
       const base = vue.computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
       const totalBytes = vue.computed(() => (model.value ?? []).reduce((bytes, _ref2) => {
         let {
@@ -14328,21 +14573,14 @@
       });
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
       const inputRef = vue.ref();
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
         }
-        if (!isFocused.value) {
-          isFocused.value = true;
-        }
+        if (!isFocused.value) focus();
       }
       function onClickPrepend(e) {
-        callEvent(props['onClick:prepend'], e);
         onControlClick(e);
       }
       function onControlMousedown(e) {
@@ -14373,18 +14611,16 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "class": "v-file-input",
-          "onClick:prepend": onClickPrepend,
-          "onClick:append": props['onClick:append']
+          "onClick:prepend": onClickPrepend
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref3 => {
@@ -14436,7 +14672,7 @@
                     model.value = [...(target.files ?? [])];
                   },
                   "onFocus": onFocus,
-                  "onBlur": () => isFocused.value = false
+                  "onBlur": blur
                 }, slotProps, inputAttrs), null), vue.createVNode("div", {
                   "class": fieldClass
                 }, [!!model.value?.length && (slots.selection ? slots.selection({
@@ -15127,6 +15363,432 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
+  function getWeekArray(date) {
+    let currentWeek = [];
+    const weeks = [];
+    const firstDayOfMonth = startOfMonth(date);
+    const lastDayOfMonth = endOfMonth(date);
+    for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
+      currentWeek.push(null);
+    }
+    for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
+
+      // Add the day to the current week
+      currentWeek.push(day);
+
+      // If the current week has 7 days, add it to the weeks array and start a new week
+      if (currentWeek.length === 7) {
+        weeks.push(currentWeek);
+        currentWeek = [];
+      }
+    }
+    for (let i = currentWeek.length; i < 7; i++) {
+      currentWeek.push(null);
+    }
+    weeks.push(currentWeek);
+    return weeks;
+  }
+  function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  }
+  function endOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  }
+  function date(value) {
+    if (value == null) return null;
+    if (value instanceof Date) return value;
+    if (typeof value === 'string') {
+      const parsed = Date.parse(value);
+      if (!isNaN(parsed)) return new Date(parsed);
+    }
+    return null;
+  }
+  const firstDay = {
+    '001': 1,
+    AD: 1,
+    AE: 6,
+    AF: 6,
+    AG: 0,
+    AI: 1,
+    AL: 1,
+    AM: 1,
+    AN: 1,
+    AR: 1,
+    AS: 0,
+    AT: 1,
+    AU: 0,
+    AX: 1,
+    AZ: 1,
+    BA: 1,
+    BD: 0,
+    BE: 1,
+    BG: 1,
+    BH: 6,
+    BM: 1,
+    BN: 1,
+    BR: 0,
+    BS: 0,
+    BT: 0,
+    BW: 0,
+    BY: 1,
+    BZ: 0,
+    CA: 0,
+    CH: 1,
+    CL: 1,
+    CM: 1,
+    CN: 0,
+    CO: 0,
+    CR: 1,
+    CY: 1,
+    CZ: 1,
+    DE: 1,
+    DJ: 6,
+    DK: 1,
+    DM: 0,
+    DO: 0,
+    DZ: 6,
+    EC: 1,
+    EE: 1,
+    EG: 6,
+    ES: 1,
+    ET: 0,
+    FI: 1,
+    FJ: 1,
+    FO: 1,
+    FR: 1,
+    GB: 1,
+    'GB-alt-variant': 0,
+    GE: 1,
+    GF: 1,
+    GP: 1,
+    GR: 1,
+    GT: 0,
+    GU: 0,
+    HK: 0,
+    HN: 0,
+    HR: 1,
+    HU: 1,
+    ID: 0,
+    IE: 1,
+    IL: 0,
+    IN: 0,
+    IQ: 6,
+    IR: 6,
+    IS: 1,
+    IT: 1,
+    JM: 0,
+    JO: 6,
+    JP: 0,
+    KE: 0,
+    KG: 1,
+    KH: 0,
+    KR: 0,
+    KW: 6,
+    KZ: 1,
+    LA: 0,
+    LB: 1,
+    LI: 1,
+    LK: 1,
+    LT: 1,
+    LU: 1,
+    LV: 1,
+    LY: 6,
+    MC: 1,
+    MD: 1,
+    ME: 1,
+    MH: 0,
+    MK: 1,
+    MM: 0,
+    MN: 1,
+    MO: 0,
+    MQ: 1,
+    MT: 0,
+    MV: 5,
+    MX: 0,
+    MY: 1,
+    MZ: 0,
+    NI: 0,
+    NL: 1,
+    NO: 1,
+    NP: 0,
+    NZ: 1,
+    OM: 6,
+    PA: 0,
+    PE: 0,
+    PH: 0,
+    PK: 0,
+    PL: 1,
+    PR: 0,
+    PT: 0,
+    PY: 0,
+    QA: 6,
+    RE: 1,
+    RO: 1,
+    RS: 1,
+    RU: 1,
+    SA: 0,
+    SD: 6,
+    SE: 1,
+    SG: 0,
+    SI: 1,
+    SK: 1,
+    SM: 1,
+    SV: 0,
+    SY: 6,
+    TH: 0,
+    TJ: 1,
+    TM: 1,
+    TR: 1,
+    TT: 0,
+    TW: 0,
+    UA: 1,
+    UM: 0,
+    US: 0,
+    UY: 1,
+    UZ: 1,
+    VA: 1,
+    VE: 0,
+    VI: 0,
+    VN: 1,
+    WS: 0,
+    XK: 1,
+    YE: 0,
+    ZA: 0,
+    ZW: 0
+  };
+  const sundayJanuarySecond2000 = new Date(2000, 0, 2);
+  function getWeekdays(locale) {
+    const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()];
+    return createRange(7).map(i => {
+      const weekday = new Date(sundayJanuarySecond2000);
+      weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
+      return new Intl.DateTimeFormat(locale, {
+        weekday: 'long'
+      }).format(weekday);
+    });
+  }
+  function format(value, formatString, locale) {
+    const date = new Date(value);
+    let options = {};
+    switch (formatString) {
+      case 'fullDateWithWeekday':
+        options = {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric'
+        };
+        break;
+      case 'normalDateWithWeekday':
+        options = {
+          weekday: 'short',
+          day: 'numeric',
+          month: 'short',
+          year: 'numeric'
+        };
+        break;
+      case 'keyboardDate':
+        options = {};
+        break;
+      case 'monthAndDate':
+        options = {
+          month: 'long',
+          day: 'numeric'
+        };
+        break;
+      case 'monthAndYear':
+        options = {
+          month: 'long',
+          year: 'numeric'
+        };
+        break;
+      default:
+        options = {
+          timeZone: 'UTC',
+          timeZoneName: 'short'
+        };
+    }
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  }
+  function addDays(date, amount) {
+    const d = new Date(date);
+    d.setDate(d.getDate() + amount);
+    return d;
+  }
+  function addMonths(date, amount) {
+    const d = new Date(date);
+    d.setMonth(d.getMonth() + amount);
+    return d;
+  }
+  function getYear(date) {
+    return date.getFullYear();
+  }
+  function getMonth(date) {
+    return date.getMonth();
+  }
+  function startOfYear(date) {
+    return new Date(date.getFullYear(), 0, 1);
+  }
+  function endOfYear(date) {
+    return new Date(date.getFullYear(), 11, 31);
+  }
+  function getMondayOfFirstWeekOfYear(year) {
+    return new Date(year, 0, 1);
+  }
+
+  // https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
+  function getWeek(date) {
+    let year = date.getFullYear();
+    let d1w1 = getMondayOfFirstWeekOfYear(year);
+    if (date < d1w1) {
+      year = year - 1;
+      d1w1 = getMondayOfFirstWeekOfYear(year);
+    } else {
+      const tv = getMondayOfFirstWeekOfYear(year + 1);
+      if (date >= tv) {
+        year = year + 1;
+        d1w1 = tv;
+      }
+    }
+    const diffTime = Math.abs(date.getTime() - d1w1.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return Math.floor(diffDays / 7) + 1;
+  }
+  function isWithinRange(date, range) {
+    return isAfter(date, range[0]) && isBefore(date, range[1]);
+  }
+  function isValid(date) {
+    const d = new Date(date);
+    return d instanceof Date && !isNaN(d.getTime());
+  }
+  function isAfter(date, comparing) {
+    return date.getTime() > comparing.getTime();
+  }
+  function isBefore(date, comparing) {
+    return date.getTime() < comparing.getTime();
+  }
+  function isEqual(date, comparing) {
+    return date.getTime() === comparing.getTime();
+  }
+  function isSameDay(date, comparing) {
+    return date.getDate() === comparing.getDate() && date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+  }
+  function isSameMonth(date, comparing) {
+    return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+  }
+  function getDiff(date, comparing, unit) {
+    const d = new Date(date);
+    const c = new Date(comparing);
+    if (unit === 'month') {
+      return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12;
+    }
+    return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
+  }
+  function setYear(date, year) {
+    const d = new Date(date);
+    d.setFullYear(year);
+    return d;
+  }
+  class VuetifyDateAdapter {
+    constructor() {
+      let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'en';
+      this.locale = locale;
+    }
+    date(value) {
+      return date(value);
+    }
+    addDays(date, amount) {
+      return addDays(date, amount);
+    }
+    addMonths(date, amount) {
+      return addMonths(date, amount);
+    }
+    getWeekArray(date) {
+      return getWeekArray(date);
+    }
+    startOfMonth(date) {
+      return startOfMonth(date);
+    }
+    endOfMonth(date) {
+      return endOfMonth(date);
+    }
+    format(date, formatString) {
+      return format(date, formatString, this.locale);
+    }
+    isEqual(date, comparing) {
+      return isEqual(date, comparing);
+    }
+    isValid(date) {
+      return isValid(date);
+    }
+    isWithinRange(date, range) {
+      return isWithinRange(date, range);
+    }
+    isAfter(date, comparing) {
+      return isAfter(date, comparing);
+    }
+    isSameDay(date, comparing) {
+      return isSameDay(date, comparing);
+    }
+    isSameMonth(date, comparing) {
+      return isSameMonth(date, comparing);
+    }
+    setYear(date, year) {
+      return setYear(date, year);
+    }
+    getDiff(date, comparing, unit) {
+      return getDiff(date, comparing, unit);
+    }
+    getWeek(date) {
+      return getWeek(date);
+    }
+    getWeekdays() {
+      return getWeekdays(this.locale);
+    }
+    getYear(date) {
+      return getYear(date);
+    }
+    getMonth(date) {
+      return getMonth(date);
+    }
+    startOfYear(date) {
+      return startOfYear(date);
+    }
+    endOfYear(date) {
+      return endOfYear(date);
+    }
+  }
+
+  // Composables
+
+  // Types
+
+  const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
+  function createDate(options) {
+    return options ?? {
+      adapter: VuetifyDateAdapter
+    };
+  }
+  function useDate(props) {
+    const date = vue.inject(DateAdapterSymbol);
+    const locale = useLocale();
+    if (!date) throw new Error('[Vuetify] Could not find injected date');
+
+    // eslint-disable-next-line new-cap
+    const instance = new date.adapter(locale.current.value);
+    vue.watch(locale.current, val => {
+      instance.locale = val;
+    }, {
+      immediate: true
+    });
+    return instance;
+  }
+
   function useSticky(_ref) {
     let {
       rootEl,
@@ -16131,7 +16793,7 @@
       const model = useProxiedModel(props, 'modelValue');
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
         const label = slots.label ? slots.label({
           label: props.label,
@@ -16196,11 +16858,14 @@
     },
     emits: {
       'update:focused': value => true,
-      'update:modelValue': value => true
+      'update:modelValue': value => true,
+      end: value => true,
+      start: value => true
     },
     setup(props, _ref) {
       let {
-        slots
+        slots,
+        emit
       } = _ref;
       const startThumbRef = vue.ref();
       const stopThumbRef = vue.ref();
@@ -16213,6 +16878,11 @@
         const b = Math.abs(stopOffset);
         return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
       }
+      const steps = useSteps(props);
+      const model = useProxiedModel(props, 'modelValue', undefined, arr => {
+        if (!arr?.length) return [0, 0];
+        return arr.map(value => steps.roundValue(value));
+      });
       const {
         activeThumbRef,
         hasLabels,
@@ -16222,34 +16892,37 @@
         onSliderMousedown,
         onSliderTouchstart,
         position,
-        roundValue,
         trackContainerRef
       } = useSlider({
-        /* eslint-disable @typescript-eslint/no-use-before-define */
         props,
-        handleSliderMouseUp: newValue => {
-          model.value = activeThumbRef.value === startThumbRef.value?.$el ? [newValue, model.value[1]] : [model.value[0], newValue];
+        steps,
+        onSliderStart: () => {
+          emit('start', model.value);
+        },
+        onSliderEnd: _ref2 => {
+          let {
+            value
+          } = _ref2;
+          const newValue = activeThumbRef.value === startThumbRef.value?.$el ? [value, model.value[1]] : [model.value[0], value];
+          model.value = newValue;
+          emit('end', newValue);
         },
-        handleMouseMove: newValue => {
+        onSliderMove: _ref3 => {
+          let {
+            value
+          } = _ref3;
           const [start, stop] = model.value;
           if (!props.strict && start === stop && start !== min.value) {
-            activeThumbRef.value = newValue > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
+            activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
             activeThumbRef.value?.focus();
           }
           if (activeThumbRef.value === startThumbRef.value?.$el) {
-            model.value = [Math.min(newValue, stop), stop];
+            model.value = [Math.min(value, stop), stop];
           } else {
-            model.value = [start, Math.max(start, newValue)];
+            model.value = [start, Math.max(start, value)];
           }
         },
         getActiveThumb
-        /* eslint-enable @typescript-eslint/no-use-before-define */
-      });
-
-      const model = useProxiedModel(props, 'modelValue', undefined, arr => {
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-        if (!arr || !arr.length) return [0, 0];
-        return arr.map(value => roundValue(value));
       });
       const {
         isFocused,
@@ -16259,7 +16932,7 @@
       const trackStart = vue.computed(() => position(model.value[0]));
       const trackStop = vue.computed(() => position(model.value[1]));
       useRender(() => {
-        const [inputProps, _] = filterInputProps(props);
+        const [inputProps, _] = VInput.filterProps(props);
         const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', 'v-range-slider', {
@@ -16277,11 +16950,11 @@
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-          default: _ref2 => {
+          default: _ref4 => {
             let {
               id,
               messagesId
-            } = _ref2;
+            } = _ref4;
             return vue.createVNode("div", {
               "class": "v-slider__container",
               "onMousedown": onSliderMousedown,
@@ -17104,10 +17777,12 @@
       }
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-        const [inputProps, _1] = filterInputProps(props);
+        const [inputProps, _1] = VInput.filterProps(props);
         const [controlProps, _2] = VSelectionControl.filterProps(props);
         const control = vue.ref();
-        function onClick() {
+        function onClick(e) {
+          e.stopPropagation();
+          e.preventDefault();
           control.value?.input?.click();
         }
         return vue.createVNode(VInput, vue.mergeProps({
@@ -17468,8 +18143,6 @@
       autofocus: Boolean,
       counter: [Boolean, Number, String],
       counterValue: Function,
-      hint: String,
-      persistentHint: Boolean,
       prefix: String,
       placeholder: String,
       persistentPlaceholder: Boolean,
@@ -17524,9 +18197,6 @@
       const controlHeight = vue.ref('');
       const textareaRef = vue.ref();
       const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-      });
       function onFocus() {
         if (textareaRef.value !== document.activeElement) {
           textareaRef.value?.focus();
@@ -17598,7 +18268,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -17612,12 +18282,9 @@
             'v-textarea--auto-grow': props.autoGrow,
             'v-textarea--no-resize': props.noResize || props.autoGrow,
             'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-          }],
-          "onClick:prepend": props['onClick:prepend'],
-          "onClick:append": props['onClick:append']
+          }]
         }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
+          "focused": isFocused.value
         }), {
           ...slots,
           default: _ref2 => {
@@ -19099,56 +19766,64 @@
       const {
         t
       } = useLocale();
-      useRender(() => vue.createVNode(vue.Fragment, null, [props.loading ? slots.loading?.() ?? vue.createVNode(VDataTableRow, {
-        "class": "v-data-table-rows-no-data",
-        "key": "loading"
-      }, {
-        default: () => [t(props.loadingText)]
-      }) : undefined, !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VDataTableRow, {
-        "class": "v-data-table-rows-no-data",
-        "key": "no-data"
-      }, {
-        default: () => [t(props.noDataText)]
-      })), props.items.map((item, index) => {
-        if (item.type === 'group-header') {
-          return slots['group-header'] ? slots['group-header']({
+      useRender(() => {
+        if (props.loading && slots.loading) {
+          return vue.createVNode("tr", {
+            "class": "v-data-table-rows-no-data",
+            "key": "loading"
+          }, [vue.createVNode("td", {
+            "colspan": columns.value.length
+          }, [slots.loading()])]);
+        }
+        if (!props.loading && !props.items.length && !props.hideNoData && slots['no-data']) {
+          return vue.createVNode("tr", {
+            "class": "v-data-table-rows-no-data",
+            "key": "no-data"
+          }, [vue.createVNode("td", {
+            "colspan": columns.value.length
+          }, [slots['no-data']?.() ?? t(props.noDataText)])]);
+        }
+        return vue.createVNode(vue.Fragment, null, [props.items.map((item, index) => {
+          if (item.type === 'group-header') {
+            return slots['group-header'] ? slots['group-header']({
+              index,
+              item,
+              columns: columns.value,
+              isExpanded,
+              toggleExpand,
+              isSelected,
+              toggleSelect,
+              toggleGroup,
+              isGroupOpen
+            }) : vue.createVNode(VDataTableGroupHeaderRow, {
+              "key": `group-header_${item.id}`,
+              "item": item
+            }, slots);
+          }
+          const slotProps = {
             index,
             item,
             columns: columns.value,
             isExpanded,
             toggleExpand,
             isSelected,
-            toggleSelect,
-            toggleGroup,
-            isGroupOpen
-          }) : vue.createVNode(VDataTableGroupHeaderRow, {
-            "key": `group-header_${item.id}`,
+            toggleSelect
+          };
+          return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.createVNode(VDataTableRow, {
+            "key": `item_${item.value}`,
+            "onClick": expandOnClick.value || props['onClick:row'] ? event => {
+              if (expandOnClick.value) {
+                toggleExpand(item);
+              }
+              props['onClick:row']?.(event, {
+                item
+              });
+            } : undefined,
+            "index": index,
             "item": item
-          }, slots);
-        }
-        const slotProps = {
-          index,
-          item,
-          columns: columns.value,
-          isExpanded,
-          toggleExpand,
-          isSelected,
-          toggleSelect
-        };
-        return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.createVNode(VDataTableRow, {
-          "key": `item_${item.value}`,
-          "onClick": expandOnClick.value || props['onClick:row'] ? event => {
-            if (expandOnClick.value) {
-              toggleExpand(item);
-            }
-            props['onClick:row']?.(event, {
-              item
-            });
-          } : undefined,
-          "index": index,
-          "item": item
-        }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
-      })]));
+          }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
+        })]);
+      });
       return {};
     }
   });
@@ -19423,7 +20098,8 @@
       page: page.value,
       itemsPerPage: itemsPerPage.value,
       sortBy: sortBy.value,
-      groupBy: groupBy.value
+      groupBy: groupBy.value,
+      search: search.value
     }));
 
     // Reset page when searching
@@ -19456,12 +20132,12 @@
     width: [String, Number],
     fixedHeader: Boolean,
     fixedFooter: Boolean,
-    'onClick:row': Function
+    'onClick:row': Function,
+    search: String
   }, 'v-data-table');
   const VDataTable = genericComponent()({
     name: 'VDataTable',
     props: {
-      search: String,
       ...makeVDataTableProps(),
       ...makeDataTableExpandProps(),
       ...makeDataTableGroupProps(),
@@ -19676,7 +20352,6 @@
   const VDataTableVirtual = genericComponent()({
     name: 'VDataTableVirtual',
     props: {
-      search: String,
       ...makeVDataTableProps(),
       ...makeVDataTableProps(),
       ...makeDataTableGroupProps(),
@@ -19915,7 +20590,8 @@
         page,
         itemsPerPage,
         sortBy,
-        groupBy
+        groupBy,
+        search: vue.toRef(props, 'search')
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -19975,6 +20651,7 @@
     'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',
     'date-picker-options': 'text, avatar@2',
     'date-picker-days': 'avatar@28',
+    divider: 'divider',
     heading: 'heading',
     image: 'image',
     'list-item': 'text',
@@ -20382,6 +21059,7 @@
     const theme = createTheme(options.theme);
     const icons = createIcons(options.icons);
     const locale = createLocale(options.locale);
+    const date = createDate(options.date);
     const install = app => {
       for (const key in directives) {
         app.directive(key, directives[key]);
@@ -20402,6 +21080,7 @@
       app.provide(ThemeSymbol, theme);
       app.provide(IconSymbol, icons);
       app.provide(LocaleSymbol, locale);
+      app.provide(DateAdapterSymbol, date);
       if (IN_BROWSER && options.ssr) {
         if (app.$nuxt) {
           app.$nuxt.hook('app:suspense:resolve', () => {
@@ -20429,7 +21108,8 @@
                 display: inject.call(this, DisplaySymbol),
                 theme: inject.call(this, ThemeSymbol),
                 icons: inject.call(this, IconSymbol),
-                locale: inject.call(this, LocaleSymbol)
+                locale: inject.call(this, LocaleSymbol),
+                date: inject.call(this, DateAdapterSymbol)
               });
             }
           }
@@ -20442,10 +21122,11 @@
       display,
       theme,
       icons,
-      locale
+      locale,
+      date
     };
   }
-  const version$1 = "4.0.0-dev-20230419.0";
+  const version$1 = "4.0.0-dev-20230421.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20457,7 +21138,7 @@
     }
   }
 
-  const version = "4.0.0-dev-20230419.0";
+  const version = "4.0.0-dev-20230421.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20471,6 +21152,7 @@
   exports.components = components;
   exports.createVuetify = createVuetify;
   exports.directives = directives;
+  exports.useDate = useDate;
   exports.useDisplay = useDisplay;
   exports.useLayout = useLayout;
   exports.useLocale = useLocale;