vuetify 3.1.14 → 3.1.16

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.14
+* Vuetify v3.1.16
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -360,6 +360,32 @@
       handler(...args);
     }
   }
+  function focusableChildren(el) {
+    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"]):not([disabled])`).join(', ');
+    return [...el.querySelectorAll(targets)];
+  }
+  function focusChild(el, location) {
+    const focusable = focusableChildren(el);
+    const idx = focusable.indexOf(document.activeElement);
+    if (!location) {
+      if (!el.contains(document.activeElement)) {
+        focusable[0]?.focus();
+      }
+    } else if (location === 'first') {
+      focusable[0]?.focus();
+    } else if (location === 'last') {
+      focusable.at(-1)?.focus();
+    } else {
+      let _el;
+      let idxx = idx;
+      const inc = location === 'next' ? 1 : -1;
+      do {
+        idxx += inc;
+        _el = focusable[idxx];
+      } while ((!_el || _el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+      if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
+    }
+  }
 
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -5297,7 +5323,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();
@@ -5886,6 +5913,8 @@
     appendIcon: IconValue,
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
+    hint: String,
+    persistentHint: Boolean,
     messages: {
       type: [Array, String],
       default: () => []
@@ -5949,10 +5978,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]
@@ -5975,7 +6013,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)])]);
@@ -5987,10 +6025,6 @@
       };
     }
   });
-  function filterInputProps(props) {
-    const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-    return pick(props, keys);
-  }
 
   const VCounter = genericComponent()({
     name: 'VCounter',
@@ -6116,8 +6150,6 @@
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -6172,9 +6204,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();
@@ -6217,7 +6246,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -6227,12 +6256,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 => {
@@ -6641,7 +6667,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"
@@ -8053,7 +8079,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 => {
@@ -8226,27 +8257,8 @@
         e.preventDefault();
       }
       function focus(location) {
-        if (!contentRef.value) return;
-        const targets = ['button', '[href]', 'input', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
-        const focusable = [...contentRef.value.querySelectorAll(targets)].filter(el => !el.hasAttribute('disabled'));
-        const idx = focusable.indexOf(document.activeElement);
-        if (!location) {
-          if (!contentRef.value.contains(document.activeElement)) {
-            focusable[0]?.focus();
-          }
-        } else if (location === 'first') {
-          focusable[0]?.focus();
-        } else if (location === 'last') {
-          focusable.at(-1)?.focus();
-        } else {
-          let el;
-          let idxx = idx;
-          const inc = location === 'next' ? 1 : -1;
-          do {
-            idxx += inc;
-            el = focusable[idxx];
-          } while ((!el || el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
-          if (el) el.focus();else focus(location === 'next' ? 'first' : 'last');
+        if (contentRef.value) {
+          return focusChild(contentRef.value, location);
         }
       }
       useRender(() => {
@@ -8731,7 +8743,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
@@ -8748,7 +8760,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
@@ -8829,7 +8845,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) {
@@ -9005,7 +9021,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)))
@@ -9900,6 +9917,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:menu': val => true
     },
@@ -10016,6 +10034,9 @@
           menu.value = false;
         }
       }
+      function onFocusin(e) {
+        isFocused.value = true;
+      }
       function onFocusout(e) {
         if (e.relatedTarget == null) {
           vTextFieldRef.value?.focus();
@@ -10070,6 +10091,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, {
@@ -10148,6 +10170,7 @@
         });
       });
       return forwardRefs({
+        isFocused,
         menu,
         select
       }, vTextFieldRef);
@@ -10286,6 +10309,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:search': val => true,
       'update:modelValue': val => true,
       'update:menu': val => true
@@ -10309,11 +10333,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);
@@ -10336,6 +10366,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) {
@@ -10349,7 +10380,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)) {
@@ -10366,6 +10399,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;
@@ -10387,7 +10452,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);
@@ -10432,12 +10496,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
           }],
@@ -10446,8 +10513,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -10512,7 +10577,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,
@@ -11003,6 +11069,17 @@
           disabled: vue.toRef(props, 'disabled')
         }
       });
+      const items = vue.computed(() => props.items.map(item => {
+        return typeof item === 'string' ? {
+          item: {
+            title: item
+          },
+          raw: item
+        } : {
+          item,
+          raw: item
+        };
+      }));
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.icon);
         return vue.createVNode(props.tag, {
@@ -11025,22 +11102,26 @@
                 start: true
               }
             }
-          }, slots.prepend)]), props.items.map((item, index, array) => vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-            "key": index,
-            "disabled": index >= array.length - 1
-          }, typeof item === 'string' ? {
-            title: item
-          } : item), {
-            default: slots.title ? () => slots.title?.({
-              item,
-              index
-            }) : undefined
-          }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
-            default: slots.divider ? () => slots.divider?.({
+          }, slots.prepend)]), items.value.map((_ref2, index, array) => {
+            let {
               item,
-              index
-            }) : undefined
-          })])), slots.default?.()]
+              raw
+            } = _ref2;
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
+              "key": item.title,
+              "disabled": index >= array.length - 1
+            }, item), {
+              default: slots.title ? () => slots.title?.({
+                item: raw,
+                index
+              }) : undefined
+            }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
+              default: slots.divider ? () => slots.divider?.({
+                item: raw,
+                index
+              }) : undefined
+            })]);
+          }), slots.default?.()]
         });
       });
       return {};
@@ -12907,7 +12988,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', {
@@ -13571,6 +13652,7 @@
       })
     },
     emits: {
+      'update:focused': focused => true,
       'update:modelValue': val => true,
       'update:search': val => true,
       'update:menu': val => true
@@ -13708,8 +13790,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;
@@ -13794,6 +13877,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', {
@@ -13807,8 +13892,6 @@
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
-          "onFocus": () => isFocused.value = true,
-          "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }), {
           ...slots,
@@ -13960,7 +14043,7 @@
         ![document, overlay.value.contentEl].includes(after) &&
         // It isn't inside the dialog body
         !overlay.value.contentEl.contains(after)) {
-          const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+          const focusable = focusableChildren(overlay.value.contentEl);
           if (!focusable.length) return;
           const firstElement = focusable[0];
           const lastElement = focusable[focusable.length - 1];
@@ -14260,8 +14343,6 @@
         default: '$vuetify.fileInput.counter'
       },
       multiple: Boolean,
-      hint: String,
-      persistentHint: Boolean,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -14286,6 +14367,7 @@
     emits: {
       'click:control': e => true,
       'mousedown:control': e => true,
+      'update:focused': focused => true,
       'update:modelValue': files => true
     },
     setup(props, _ref) {
@@ -14298,6 +14380,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 {
@@ -14319,21 +14406,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) {
@@ -14364,18 +14444,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 => {
@@ -14427,7 +14505,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({
@@ -16122,7 +16200,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,
@@ -16250,7 +16328,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', {
@@ -16810,7 +16888,7 @@
       function focus(location) {
         if (!contentRef.value) return;
         if (!location) {
-          const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+          const focusable = focusableChildren(contentRef.value);
           focusable[0]?.focus();
         } else if (location === 'next') {
           const el = contentRef.value.querySelector(':focus')?.nextElementSibling;
@@ -17124,10 +17202,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({
@@ -17489,8 +17569,6 @@
       autofocus: Boolean,
       counter: [Boolean, Number, String],
       counterValue: Function,
-      hint: String,
-      persistentHint: Boolean,
       prefix: String,
       placeholder: String,
       persistentPlaceholder: Boolean,
@@ -17545,9 +17623,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();
@@ -17619,7 +17694,7 @@
         const [{
           modelValue: _,
           ...inputProps
-        }] = filterInputProps(props);
+        }] = VInput.filterProps(props);
         const [fieldProps] = filterFieldProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
@@ -17633,12 +17708,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 => {
@@ -18492,6 +18564,17 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const slotProps = vue.computed(() => ({
+        headers: headers.value,
+        columns: columns.value,
+        toggleSort,
+        sortBy: sortBy.value,
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        selectAll,
+        getSortIcon,
+        getFixedStyles
+      }));
       const VDataTableHeaderCell = _ref2 => {
         let {
           column,
@@ -18519,14 +18602,14 @@
           "noPadding": noPadding
         }, {
           default: () => {
-            const slotName = `column.${column.key}`;
-            const slotProps = {
+            const columnSlotName = `column.${column.key}`;
+            const columnSlotProps = {
               column,
               selectAll
             };
-            if (slots[slotName]) return slots[slotName](slotProps);
+            if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
             if (column.key === 'data-table-select') {
-              return slots['column.data-table-select']?.(slotProps) ?? vue.createVNode(VCheckboxBtn, {
+              return slots['column.data-table-select']?.(columnSlotProps) ?? vue.createVNode(VCheckboxBtn, {
                 "modelValue": allSelected.value,
                 "indeterminate": someSelected.value && !allSelected.value,
                 "onUpdate:modelValue": selectAll
@@ -18546,22 +18629,24 @@
           }
         });
       };
-      useRender(() => vue.createVNode(vue.Fragment, null, [headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
-        "column": column,
-        "x": x,
-        "y": y
-      }, null))])), props.loading && vue.createVNode("tr", {
-        "class": "v-data-table__progress"
-      }, [vue.createVNode("th", {
-        "colspan": columns.value.length
-      }, [vue.createVNode(LoaderSlot, {
-        "name": "v-data-table-headers",
-        "active": true,
-        "color": typeof props.loading === 'boolean' ? undefined : props.loading,
-        "indeterminate": true
-      }, {
-        default: slots.loader
-      })])])]));
+      useRender(() => {
+        return vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
+          "column": column,
+          "x": x,
+          "y": y
+        }, null))])), props.loading && vue.createVNode("tr", {
+          "class": "v-data-table__progress"
+        }, [vue.createVNode("th", {
+          "colspan": columns.value.length
+        }, [vue.createVNode(LoaderSlot, {
+          "name": "v-data-table-headers",
+          "active": true,
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": true
+        }, {
+          default: slots.loader
+        })])])]);
+      });
     }
   });
 
@@ -18860,9 +18945,7 @@
           'v-data-table__tr--clickable': !!props.onClick
         }],
         "onClick": props.onClick
-      }, [!columns.value.length && vue.createVNode(VDataTableColumn, {
-        "key": "no-data"
-      }, slots), props.item && columns.value.map((column, i) => vue.createVNode(VDataTableColumn, {
+      }, [props.item && columns.value.map((column, i) => vue.createVNode(VDataTableColumn, {
         "align": column.align,
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
@@ -18949,56 +19032,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-loading",
+            "key": "loading"
+          }, [vue.createVNode("td", {
+            "colspan": columns.value.length
+          }, [slots.loading()])]);
+        }
+        if (!props.loading && !props.items.length && !props.hideNoData) {
+          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 {};
     }
   });
@@ -19273,7 +19364,8 @@
       page: page.value,
       itemsPerPage: itemsPerPage.value,
       sortBy: sortBy.value,
-      groupBy: groupBy.value
+      groupBy: groupBy.value,
+      search: search.value
     }));
 
     // Reset page when searching
@@ -19306,12 +19398,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(),
@@ -19428,7 +19520,7 @@
         top: slots.top,
         default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
           columns
-        }), vue.createVNode("thead", null, [slots.headers ? slots.headers() : vue.createVNode(VDataTableHeaders, {
+        }), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
           "multiSort": props.multiSort
         }, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
@@ -19526,7 +19618,6 @@
   const VDataTableVirtual = genericComponent()({
     name: 'VDataTableVirtual',
     props: {
-      search: String,
       ...makeVDataTableProps(),
       ...makeVDataTableProps(),
       ...makeDataTableGroupProps(),
@@ -19765,7 +19856,8 @@
         page,
         itemsPerPage,
         sortBy,
-        groupBy
+        groupBy,
+        search: vue.toRef(props, 'search')
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -19794,7 +19886,7 @@
         }), vue.createVNode("thead", {
           "class": "v-data-table__thead",
           "role": "rowgroup"
-        }, [slots.headers ? slots.headers() : vue.createVNode(VDataTableHeaders, {
+        }, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
           "loading": props.loading,
           "color": props.color
@@ -19825,6 +19917,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',
@@ -20466,7 +20559,7 @@
       locale
     };
   }
-  const version$1 = "3.1.14";
+  const version$1 = "3.1.16";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20478,7 +20571,7 @@
     }
   }
 
-  const version = "3.1.14";
+  const version = "3.1.16";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};