vuetify 3.1.14 → 3.1.16

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.14
+* Vuetify v3.1.16
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -356,6 +356,32 @@ function callEvent(handler) {
     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'];
@@ -5293,7 +5319,8 @@ const VFieldLabel = genericComponent()({
 
 // 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();
@@ -5882,6 +5909,8 @@ const makeVInputProps = propsFactory({
   appendIcon: IconValue,
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
+  hint: String,
+  persistentHint: Boolean,
   messages: {
     type: [Array, String],
     default: () => []
@@ -5945,10 +5974,19 @@ const VInput = genericComponent()({
       resetValidation,
       validate
     }));
+    const messages = 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 createVNode("div", {
         "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
@@ -5971,7 +6009,7 @@ const VInput = genericComponent()({
       }, [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)])]);
@@ -5983,10 +6021,6 @@ const VInput = genericComponent()({
     };
   }
 });
-function filterInputProps(props) {
-  const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-  return pick(props, keys);
-}
 
 const VCounter = genericComponent()({
   name: 'VCounter',
@@ -6112,8 +6146,6 @@ const makeVTextFieldProps = propsFactory({
   autofocus: Boolean,
   counter: [Boolean, Number, String],
   counterValue: Function,
-  hint: String,
-  persistentHint: Boolean,
   prefix: String,
   placeholder: String,
   persistentPlaceholder: Boolean,
@@ -6168,9 +6200,6 @@ const VTextField = genericComponent()({
     const vFieldRef = ref();
     const inputRef = ref();
     const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
-    const messages = computed(() => {
-      return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-    });
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -6213,7 +6242,7 @@ const VTextField = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -6223,12 +6252,9 @@ const VTextField = genericComponent()({
           '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 => {
@@ -6637,7 +6663,7 @@ const VCheckbox = genericComponent()({
     const id = 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 createVNode(VInput, mergeProps({
         "class": "v-checkbox"
@@ -8049,7 +8075,12 @@ function transformItems$1(props, items) {
 function useItems(props) {
   const items = 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 => {
@@ -8222,27 +8253,8 @@ const VList = genericComponent()({
       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(() => {
@@ -8727,7 +8739,7 @@ function staticLocationStrategy() {
 }
 
 /** 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
@@ -8744,7 +8756,11 @@ function getIntrinsicSize(el) {
 
   /* 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
@@ -8825,7 +8841,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     });
     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) {
@@ -9001,7 +9017,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
       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)))
@@ -9896,6 +9913,7 @@ const VSelect = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -10012,6 +10030,9 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onFocusin(e) {
+      isFocused.value = true;
+    }
     function onFocusout(e) {
       if (e.relatedTarget == null) {
         vTextFieldRef.value?.focus();
@@ -10066,6 +10087,7 @@ const VSelect = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
@@ -10144,6 +10166,7 @@ const VSelect = genericComponent()({
       });
     });
     return forwardRefs({
+      isFocused,
       menu,
       select
     }, vTextFieldRef);
@@ -10282,6 +10305,7 @@ const VAutocomplete = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:search': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
@@ -10305,11 +10329,17 @@ const VAutocomplete = genericComponent()({
         _menu.value = v;
       }
     });
+    const selectionIndex = ref(-1);
+    const color = 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);
@@ -10332,6 +10362,7 @@ const VAutocomplete = genericComponent()({
       return filteredItems.value;
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const selection = computed(() => selections.value[selectionIndex.value]);
     const listRef = ref();
     function onClear(e) {
       if (props.openOnClear) {
@@ -10345,7 +10376,9 @@ const VAutocomplete = genericComponent()({
     }
     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)) {
@@ -10362,6 +10395,38 @@ const VAutocomplete = genericComponent()({
       } 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;
@@ -10383,7 +10448,6 @@ const VAutocomplete = genericComponent()({
         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);
@@ -10428,12 +10492,15 @@ const VAutocomplete = genericComponent()({
         "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
         }],
@@ -10442,8 +10509,6 @@ const VAutocomplete = genericComponent()({
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
-        "onFocus": () => isFocused.value = true,
-        "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }), {
         ...slots,
@@ -10508,7 +10573,8 @@ const VAutocomplete = genericComponent()({
           };
           return 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 ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -10999,6 +11065,17 @@ const VBreadcrumbs = genericComponent()({
         disabled: toRef(props, 'disabled')
       }
     });
+    const items = 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 createVNode(props.tag, {
@@ -11021,22 +11098,26 @@ const VBreadcrumbs = genericComponent()({
               start: true
             }
           }
-        }, slots.prepend)]), props.items.map((item, index, array) => createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, 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 && 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 createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
+            "key": item.title,
+            "disabled": index >= array.length - 1
+          }, item), {
+            default: slots.title ? () => slots.title?.({
+              item: raw,
+              index
+            }) : undefined
+          }), index < array.length - 1 && createVNode(VBreadcrumbsDivider, null, {
+            default: slots.divider ? () => slots.divider?.({
+              item: raw,
+              index
+            }) : undefined
+          })]);
+        }), slots.default?.()]
       });
     });
     return {};
@@ -12903,7 +12984,7 @@ const VSlider = genericComponent()({
     } = useFocus(props);
     const trackStop = computed(() => position(model.value));
     useRender(() => {
-      const [inputProps, _] = filterInputProps(props);
+      const [inputProps, _] = VInput.filterProps(props);
       const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', {
@@ -13567,6 +13648,7 @@ const VCombobox = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:search': val => true,
     'update:menu': val => true
@@ -13704,8 +13786,9 @@ const VCombobox = genericComponent()({
           }
           return;
         }
-        select(selection.value);
-        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;
@@ -13790,6 +13873,8 @@ const VCombobox = genericComponent()({
         "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', {
@@ -13803,8 +13888,6 @@ const VCombobox = genericComponent()({
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
-        "onFocus": () => isFocused.value = true,
-        "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }), {
         ...slots,
@@ -13956,7 +14039,7 @@ const VDialog = genericComponent()({
       ![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];
@@ -14256,8 +14339,6 @@ const VFileInput = genericComponent()({
       default: '$vuetify.fileInput.counter'
     },
     multiple: Boolean,
-    hint: String,
-    persistentHint: Boolean,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -14282,6 +14363,7 @@ const VFileInput = genericComponent()({
   emits: {
     'click:control': e => true,
     'mousedown:control': e => true,
+    'update:focused': focused => true,
     'update:modelValue': files => true
   },
   setup(props, _ref) {
@@ -14294,6 +14376,11 @@ const VFileInput = genericComponent()({
       t
     } = useLocale();
     const model = useProxiedModel(props, 'modelValue');
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
     const totalBytes = computed(() => (model.value ?? []).reduce((bytes, _ref2) => {
       let {
@@ -14315,21 +14402,14 @@ const VFileInput = genericComponent()({
     });
     const vInputRef = ref();
     const vFieldRef = ref();
-    const isFocused = ref(false);
     const inputRef = ref();
-    const messages = 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) {
@@ -14360,18 +14440,16 @@ const VFileInput = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, 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 => {
@@ -14423,7 +14501,7 @@ const VFileInput = genericComponent()({
                   model.value = [...(target.files ?? [])];
                 },
                 "onFocus": onFocus,
-                "onBlur": () => isFocused.value = false
+                "onBlur": blur
               }, slotProps, inputAttrs), null), createVNode("div", {
                 "class": fieldClass
               }, [!!model.value?.length && (slots.selection ? slots.selection({
@@ -16118,7 +16196,7 @@ const VRadioGroup = genericComponent()({
     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,
@@ -16246,7 +16324,7 @@ const VRangeSlider = genericComponent()({
     const trackStart = computed(() => position(model.value[0]));
     const trackStop = computed(() => position(model.value[1]));
     useRender(() => {
-      const [inputProps, _] = filterInputProps(props);
+      const [inputProps, _] = VInput.filterProps(props);
       const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', 'v-range-slider', {
@@ -16806,7 +16884,7 @@ const VSlideGroup = genericComponent()({
     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;
@@ -17120,10 +17198,12 @@ const VSwitch = genericComponent()({
     }
     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 = ref();
-      function onClick() {
+      function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         control.value?.input?.click();
       }
       return createVNode(VInput, mergeProps({
@@ -17485,8 +17565,6 @@ const VTextarea = genericComponent()({
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -17541,9 +17619,6 @@ const VTextarea = genericComponent()({
     const controlHeight = ref('');
     const textareaRef = ref();
     const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
-    const messages = computed(() => {
-      return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-    });
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus();
@@ -17615,7 +17690,7 @@ const VTextarea = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -17629,12 +17704,9 @@ const VTextarea = genericComponent()({
           '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 => {
@@ -18488,6 +18560,17 @@ const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const slotProps = 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,
@@ -18515,14 +18598,14 @@ const VDataTableHeaders = genericComponent()({
         "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) ?? createVNode(VCheckboxBtn, {
+            return slots['column.data-table-select']?.(columnSlotProps) ?? createVNode(VCheckboxBtn, {
               "modelValue": allSelected.value,
               "indeterminate": someSelected.value && !allSelected.value,
               "onUpdate:modelValue": selectAll
@@ -18542,22 +18625,24 @@ const VDataTableHeaders = genericComponent()({
         }
       });
     };
-    useRender(() => createVNode(Fragment, null, [headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
-      "column": column,
-      "x": x,
-      "y": y
-    }, null))])), props.loading && createVNode("tr", {
-      "class": "v-data-table__progress"
-    }, [createVNode("th", {
-      "colspan": columns.value.length
-    }, [createVNode(LoaderSlot, {
-      "name": "v-data-table-headers",
-      "active": true,
-      "color": typeof props.loading === 'boolean' ? undefined : props.loading,
-      "indeterminate": true
-    }, {
-      default: slots.loader
-    })])])]));
+    useRender(() => {
+      return createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+        "column": column,
+        "x": x,
+        "y": y
+      }, null))])), props.loading && createVNode("tr", {
+        "class": "v-data-table__progress"
+      }, [createVNode("th", {
+        "colspan": columns.value.length
+      }, [createVNode(LoaderSlot, {
+        "name": "v-data-table-headers",
+        "active": true,
+        "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+        "indeterminate": true
+      }, {
+        default: slots.loader
+      })])])]);
+    });
   }
 });
 
@@ -18856,9 +18941,7 @@ const VDataTableRow = defineComponent({
         'v-data-table__tr--clickable': !!props.onClick
       }],
       "onClick": props.onClick
-    }, [!columns.value.length && createVNode(VDataTableColumn, {
-      "key": "no-data"
-    }, slots), props.item && columns.value.map((column, i) => createVNode(VDataTableColumn, {
+    }, [props.item && columns.value.map((column, i) => createVNode(VDataTableColumn, {
       "align": column.align,
       "fixed": column.fixed,
       "fixedOffset": column.fixedOffset,
@@ -18945,56 +19028,64 @@ const VDataTableRows = genericComponent()({
     const {
       t
     } = useLocale();
-    useRender(() => createVNode(Fragment, null, [props.loading ? slots.loading?.() ?? 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']?.() ?? 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 createVNode("tr", {
+          "class": "v-data-table-rows-loading",
+          "key": "loading"
+        }, [createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots.loading()])]);
+      }
+      if (!props.loading && !props.items.length && !props.hideNoData) {
+        return createVNode("tr", {
+          "class": "v-data-table-rows-no-data",
+          "key": "no-data"
+        }, [createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots['no-data']?.() ?? t(props.noDataText)])]);
+      }
+      return createVNode(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
+          }) : createVNode(VDataTableGroupHeaderRow, {
+            "key": `group-header_${item.id}`,
+            "item": item
+          }, slots);
+        }
+        const slotProps = {
           index,
           item,
           columns: columns.value,
           isExpanded,
           toggleExpand,
           isSelected,
-          toggleSelect,
-          toggleGroup,
-          isGroupOpen
-        }) : createVNode(VDataTableGroupHeaderRow, {
-          "key": `group-header_${item.id}`,
+          toggleSelect
+        };
+        return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : 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 createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : 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 {};
   }
 });
@@ -19269,7 +19360,8 @@ function useOptions(_ref) {
     page: page.value,
     itemsPerPage: itemsPerPage.value,
     sortBy: sortBy.value,
-    groupBy: groupBy.value
+    groupBy: groupBy.value,
+    search: search.value
   }));
 
   // Reset page when searching
@@ -19302,12 +19394,12 @@ const makeVDataTableProps = propsFactory({
   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(),
@@ -19424,7 +19516,7 @@ const VDataTable = genericComponent()({
       top: slots.top,
       default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
         columns
-      }), createVNode("thead", null, [slots.headers ? slots.headers() : createVNode(VDataTableHeaders, {
+      }), createVNode("thead", null, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
         "multiSort": props.multiSort
       }, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, {
@@ -19522,7 +19614,6 @@ function useVirtual(props, items) {
 const VDataTableVirtual = genericComponent()({
   name: 'VDataTableVirtual',
   props: {
-    search: String,
     ...makeVDataTableProps(),
     ...makeVDataTableProps(),
     ...makeDataTableGroupProps(),
@@ -19761,7 +19852,8 @@ const VDataTableServer = genericComponent()({
       page,
       itemsPerPage,
       sortBy,
-      groupBy
+      groupBy,
+      search: toRef(props, 'search')
     });
     provide('v-data-table', {
       toggleSort,
@@ -19790,7 +19882,7 @@ const VDataTableServer = genericComponent()({
       }), createVNode("thead", {
         "class": "v-data-table__thead",
         "role": "rowgroup"
-      }, [slots.headers ? slots.headers() : createVNode(VDataTableHeaders, {
+      }, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
         "loading": props.loading,
         "color": props.color
@@ -19821,6 +19913,7 @@ const rootTypes = {
   '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',
@@ -20462,7 +20555,7 @@ function createVuetify$1() {
     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
@@ -20474,7 +20567,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.14";
+const version = "3.1.16";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};