vuetify 3.1.14 → 3.1.15

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.14
+* Vuetify v3.1.15
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5293,7 +5293,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 +5883,8 @@ const makeVInputProps = propsFactory({
   appendIcon: IconValue,
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
+  hint: String,
+  persistentHint: Boolean,
   messages: {
     type: [Array, String],
     default: () => []
@@ -5945,10 +5948,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 +5983,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 +5995,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 +6120,6 @@ const makeVTextFieldProps = propsFactory({
   autofocus: Boolean,
   counter: [Boolean, Number, String],
   counterValue: Function,
-  hint: String,
-  persistentHint: Boolean,
   prefix: String,
   placeholder: String,
   persistentPlaceholder: Boolean,
@@ -6168,9 +6174,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 +6216,7 @@ const VTextField = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -6223,12 +6226,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 +6637,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 +8049,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 => {
@@ -8727,7 +8732,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 +8749,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 +8834,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 +9010,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 +9906,7 @@ const VSelect = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -10012,6 +10023,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 +10080,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 +10159,7 @@ const VSelect = genericComponent()({
       });
     });
     return forwardRefs({
+      isFocused,
       menu,
       select
     }, vTextFieldRef);
@@ -10282,6 +10298,7 @@ const VAutocomplete = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:search': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
@@ -10305,11 +10322,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 +10355,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 +10369,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 +10388,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 +10441,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 +10485,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 +10502,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 +10566,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,
@@ -12903,7 +12962,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 +13626,7 @@ const VCombobox = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:search': val => true,
     'update:menu': val => true
@@ -13704,8 +13764,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 +13851,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 +13866,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,
@@ -14256,8 +14317,6 @@ const VFileInput = genericComponent()({
       default: '$vuetify.fileInput.counter'
     },
     multiple: Boolean,
-    hint: String,
-    persistentHint: Boolean,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -14282,6 +14341,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 +14354,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 +14380,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 +14418,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 +14479,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 +16174,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 +16302,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', {
@@ -17120,10 +17176,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 +17543,6 @@ const VTextarea = genericComponent()({
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -17541,9 +17597,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 +17668,7 @@ const VTextarea = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -17629,12 +17682,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 => {
@@ -18945,56 +18995,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-no-data",
+          "key": "loading"
+        }, [createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots.loading()])]);
+      }
+      if (!props.loading && !props.items.length && !props.hideNoData && slots['no-data']) {
+        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 +19327,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 +19361,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(),
@@ -19522,7 +19581,6 @@ function useVirtual(props, items) {
 const VDataTableVirtual = genericComponent()({
   name: 'VDataTableVirtual',
   props: {
-    search: String,
     ...makeVDataTableProps(),
     ...makeVDataTableProps(),
     ...makeDataTableGroupProps(),
@@ -19761,7 +19819,8 @@ const VDataTableServer = genericComponent()({
       page,
       itemsPerPage,
       sortBy,
-      groupBy
+      groupBy,
+      search: toRef(props, 'search')
     });
     provide('v-data-table', {
       toggleSort,
@@ -19821,6 +19880,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 +20522,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.14";
+const version$1 = "3.1.15";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20474,7 +20534,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.14";
+const version = "3.1.15";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};