vuetify 3.1.10 → 3.1.12

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.10
+* Vuetify v3.1.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -13,7 +13,7 @@
   const IN_BROWSER = typeof window !== 'undefined';
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
   const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
-  const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && typeof CSS !== 'undefined' && CSS.supports('selector(:focus-visible)');
+  const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports('selector(:focus-visible)');
 
   // Utilities
   function useResizeObserver(callback) {
@@ -207,6 +207,10 @@
     let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     return Math.max(min, Math.min(max, value));
   }
+  function getDecimals(value) {
+    const trimmedStr = value.toString().trim();
+    return trimmedStr.includes('.') ? trimmedStr.length - trimmedStr.indexOf('.') - 1 : 0;
+  }
   function padEnd(str, length) {
     let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
     return str + char.repeat(Math.max(0, length - str.length));
@@ -489,7 +493,14 @@
     if (typeof el.animate === 'undefined') return {
       finished: Promise.resolve()
     };
-    const animation = el.animate(keyframes, options);
+    let animation;
+    try {
+      animation = el.animate(keyframes, options);
+    } catch (err) {
+      return {
+        finished: Promise.resolve()
+      };
+    }
     if (typeof animation.finished === 'undefined') {
       animation.finished = new Promise(resolve => {
         animation.onfinish = () => {
@@ -1009,15 +1020,22 @@
   function propIsDefined(vnode, prop) {
     return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
   }
-  const defineComponent = function defineComponent(options) {
+
+  // No props
+
+  // Implementation
+  function defineComponent(options) {
     options._setup = options._setup ?? options.setup;
     if (!options.name) {
       consoleWarn('The component is missing an explicit name, unable to generate default prop value');
       return options;
     }
     if (options._setup) {
-      options.props = options.props ?? {};
-      options.props = propsFactory(options.props, toKebabCase(options.name))();
+      options.props = propsFactory(options.props ?? {}, toKebabCase(options.name))();
+      const propKeys = Object.keys(options.props);
+      options.filterProps = function filterProps(props) {
+        return pick(props, propKeys);
+      };
       options.props._as = String;
       options.setup = function setup(props, ctx) {
         const defaults = useDefaults();
@@ -1057,7 +1075,7 @@
       };
     }
     return options;
-  };
+  }
   // Implementation
   function genericComponent() {
     let exposeDefaults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -3225,9 +3243,6 @@
       };
     }
   });
-  function filterToolbarProps(props) {
-    return pick(props, Object.keys(VToolbar?.props ?? {}));
-  }
 
   // Utilities
 
@@ -3305,7 +3320,7 @@
         absolute: vue.toRef(props, 'absolute')
       });
       useRender(() => {
-        const [toolbarProps] = filterToolbarProps(props);
+        const [toolbarProps] = VToolbar.filterProps(props);
         return vue.createVNode(VToolbar, vue.mergeProps({
           "ref": vToolbarRef,
           "class": ['v-app-bar', {
@@ -3396,8 +3411,6 @@
     };
   }
 
-  // Types
-
   const makeVBtnGroupProps = propsFactory({
     divided: Boolean,
     ...makeBorderProps(),
@@ -3448,9 +3461,6 @@
       });
     }
   });
-  function filterVBtnGroupProps(props) {
-    return pick(props, Object.keys(VBtnGroup.props));
-  }
 
   // Composables
 
@@ -3677,7 +3687,7 @@
         selected
       } = useGroup(props, VBtnToggleSymbol);
       useRender(() => {
-        const [btnGroupProps] = filterVBtnGroupProps(props);
+        const [btnGroupProps] = VBtnGroup.filterProps(props);
         return vue.createVNode(VBtnGroup, vue.mergeProps({
           "class": "v-btn-toggle"
         }, btnGroupProps), {
@@ -4765,49 +4775,50 @@
 
   // Types
 
+  const makeVBtnProps = propsFactory({
+    active: {
+      type: Boolean,
+      default: undefined
+    },
+    symbol: {
+      type: null,
+      default: VBtnToggleSymbol
+    },
+    flat: Boolean,
+    icon: [Boolean, String, Function, Object],
+    prependIcon: IconValue,
+    appendIcon: IconValue,
+    block: Boolean,
+    stacked: Boolean,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    ...makeBorderProps(),
+    ...makeRoundedProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeGroupItemProps(),
+    ...makeLoaderProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRouterProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'button'
+    }),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'elevated'
+    })
+  }, 'VBtn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
       Ripple
     },
-    props: {
-      active: {
-        type: Boolean,
-        default: undefined
-      },
-      symbol: {
-        type: null,
-        default: VBtnToggleSymbol
-      },
-      flat: Boolean,
-      icon: [Boolean, String, Function, Object],
-      prependIcon: IconValue,
-      appendIcon: IconValue,
-      block: Boolean,
-      stacked: Boolean,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      ...makeBorderProps(),
-      ...makeRoundedProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeGroupItemProps(),
-      ...makeLoaderProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRouterProps(),
-      ...makeSizeProps(),
-      ...makeTagProps({
-        tag: 'button'
-      }),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'elevated'
-      })
-    },
+    props: makeVBtnProps(),
     emits: {
       'group:selected': val => true
     },
@@ -5502,7 +5513,11 @@
           "key": "clear"
         }, {
           default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": "v-field__clearable"
+            "class": "v-field__clearable",
+            "onMousedown": e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
           }, [slots.clear ? slots.clear() : vue.createVNode(InputIcon, {
             "name": "clear"
           }, null)]), [[vue.vShow, props.dirty]])]
@@ -6008,6 +6023,15 @@
 
   /** Omit properties starting with P */
 
+  function getDescriptor(obj, key) {
+    let currentObj = obj;
+    while (currentObj) {
+      const descriptor = Reflect.getOwnPropertyDescriptor(currentObj, key);
+      if (descriptor) return descriptor;
+      currentObj = Object.getPrototypeOf(currentObj);
+    }
+    return undefined;
+  }
   function forwardRefs(target) {
     for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       refs[_key - 1] = arguments[_key];
@@ -6035,30 +6059,18 @@
         // Check each ref's own properties
         for (const ref of refs) {
           if (!ref.value) continue;
-          const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
+          const descriptor = getDescriptor(ref.value, key) ?? ('_' in ref.value ? getDescriptor(ref.value._?.setupState, key) : undefined);
           if (descriptor) return descriptor;
-          if ('_' in ref.value && 'setupState' in ref.value._) {
-            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value._.setupState, key);
-            if (descriptor) return descriptor;
-          }
         }
+
         // Recursive search up each ref's prototype
-        for (const ref of refs) {
-          let obj = ref.value && Object.getPrototypeOf(ref.value);
-          while (obj) {
-            const descriptor = Reflect.getOwnPropertyDescriptor(obj, key);
-            if (descriptor) return descriptor;
-            obj = Object.getPrototypeOf(obj);
-          }
-        }
-        // Call forwarded refs' proxies
         for (const ref of refs) {
           const childRefs = ref.value && ref.value[Refs];
           if (!childRefs) continue;
           const queue = childRefs.slice();
           while (queue.length) {
             const ref = queue.shift();
-            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
+            const descriptor = getDescriptor(ref.value, key);
             if (descriptor) return descriptor;
             const childRefs = ref.value && ref.value[Refs];
             if (childRefs) queue.push(...childRefs);
@@ -6159,7 +6171,15 @@
         });
       }
       function onInput(e) {
-        model.value = e.target.value;
+        const el = e.target;
+        model.value = el.value;
+        if (['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
+          const caretPosition = [el.selectionStart, el.selectionEnd];
+          vue.nextTick(() => {
+            el.selectionStart = caretPosition[0];
+            el.selectionEnd = caretPosition[1];
+          });
+        }
       }
       useRender(() => {
         const hasCounter = !!(slots.counter || props.counter || props.counterValue);
@@ -6218,6 +6238,9 @@
                     ...slotProps
                   }
                 } = _ref3;
+                const placeholder = vue.computed(() => {
+                  return (props.persistentPlaceholder || isFocused.value) && !isDirty.value ? props.placeholder : '';
+                });
                 const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "value": model.value,
@@ -6226,7 +6249,7 @@
                   "readonly": isReadonly.value,
                   "disabled": isDisabled.value,
                   "name": props.name,
-                  "placeholder": props.placeholder,
+                  "placeholder": placeholder.value,
                   "size": 1,
                   "type": props.type,
                   "onFocus": onFocus,
@@ -6259,9 +6282,6 @@
       return forwardRefs({}, vInputRef, vFieldRef, inputRef);
     }
   });
-  function filterVTextFieldProps(props) {
-    return pick(props, Object.keys(VTextField.props));
-  }
 
   // Types
 
@@ -6519,11 +6539,6 @@
       };
     }
   });
-  function filterControlProps(props) {
-    return pick(props, Object.keys(VSelectionControl.props));
-  }
-
-  // Types
 
   const makeVCheckboxBtnProps = propsFactory({
     indeterminate: Boolean,
@@ -6573,9 +6588,6 @@
       return {};
     }
   });
-  function filterCheckboxBtnProps(props) {
-    return pick(props, Object.keys(VCheckboxBtn.props));
-  }
 
   // Types
 
@@ -6584,7 +6596,7 @@
     inheritAttrs: false,
     props: {
       ...makeVInputProps(),
-      ...makeVCheckboxBtnProps()
+      ...omit(makeVCheckboxBtnProps(), ['inline'])
     },
     emits: {
       'update:focused': focused => true
@@ -6604,7 +6616,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [checkboxProps, _2] = filterCheckboxBtnProps(props);
+        const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": "v-checkbox"
         }, inputAttrs, inputProps, {
@@ -7508,8 +7520,6 @@
     });
   };
 
-  // Types
-
   const VListGroupActivator = defineComponent({
     name: 'VListGroupActivator',
     setup(_, _ref) {
@@ -7602,9 +7612,6 @@
       return {};
     }
   });
-  function filterListGroupProps(props) {
-    return pick(props, Object.keys(VListGroup.props));
-  }
 
   const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
@@ -7932,7 +7939,7 @@
             item
           }) : undefined
         };
-        const [listGroupProps, _1] = filterListGroupProps(itemProps);
+        const [listGroupProps, _1] = VListGroup.filterProps(itemProps);
         return children ? vue.createVNode(VListGroup, vue.mergeProps({
           "value": itemProps?.value
         }, listGroupProps), {
@@ -9159,6 +9166,8 @@
 
   // Types
 
+  const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
+
   const DisplaySymbol = Symbol.for('vuetify:display');
   const defaultDisplayOptions = {
     mobileBreakpoint: 'lg',
@@ -9714,9 +9723,6 @@
       };
     }
   });
-  function filterVOverlayProps(props) {
-    return pick(props, Object.keys(VOverlay.props));
-  }
 
   // Types
 
@@ -9782,7 +9788,7 @@
         'aria-owns': id.value
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-menu']
@@ -9958,7 +9964,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -10351,7 +10357,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -12299,10 +12305,7 @@
     const min = vue.computed(() => parseFloat(props.min));
     const max = vue.computed(() => parseFloat(props.max));
     const step = vue.computed(() => props.step > 0 ? parseFloat(props.step) : 0);
-    const decimals = vue.computed(() => {
-      const trimmedStep = step.value.toString().trim();
-      return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
-    });
+    const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     const thumbSize = vue.computed(() => parseInt(props.thumbSize, 10));
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
@@ -13280,8 +13283,6 @@
     }
   });
 
-  // Types
-
   const makeVSheetProps = propsFactory({
     color: String,
     ...makeBorderProps(),
@@ -13525,6 +13526,7 @@
         }
       });
       const selectionIndex = vue.ref(-1);
+      let cleared = false;
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
@@ -13561,11 +13563,17 @@
             }
           }
           if (!val) selectionIndex.value = -1;
-          if (isFocused.value) menu.value = true;
           isPristine.value = !val;
         }
       });
       vue.watch(_search, value => {
+        if (cleared) {
+          // wait for clear to finish, VTextField sets _search to null
+          // then search computed triggers and updates _search to ''
+          vue.nextTick(() => cleared = false);
+        } else if (isFocused.value && !menu.value) {
+          menu.value = true;
+        }
         emit('update:search', value);
       });
       vue.watch(model, value => {
@@ -13592,6 +13600,7 @@
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
       const listRef = vue.ref();
       function onClear(e) {
+        cleared = true;
         if (props.openOnClear) {
           menu.value = true;
         }
@@ -13706,7 +13715,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -13914,7 +13923,7 @@
         'aria-expanded': String(isActive.value)
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-dialog', {
@@ -13924,9 +13933,9 @@
         }, overlayProps, {
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
-          "aria-role": "dialog",
           "aria-modal": "true",
-          "activatorProps": activatorProps.value
+          "activatorProps": activatorProps.value,
+          "role": "dialog"
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -14518,10 +14527,8 @@
 
   // Types
 
-  const breakpoints$1 = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
   const breakpointProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
+    return breakpoints.reduce((props, val) => {
       props[val] = {
         type: [Boolean, String, Number],
         default: false
@@ -14530,8 +14537,9 @@
     }, {});
   })();
   const offsetProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
-      props['offset' + vue.capitalize(val)] = {
+    return breakpoints.reduce((props, val) => {
+      const offsetKey = 'offset' + vue.capitalize(val);
+      props[offsetKey] = {
         type: [String, Number],
         default: null
       };
@@ -14539,8 +14547,9 @@
     }, {});
   })();
   const orderProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
-      props['order' + vue.capitalize(val)] = {
+    return breakpoints.reduce((props, val) => {
+      const orderKey = 'order' + vue.capitalize(val);
+      props[orderKey] = {
         type: [String, Number],
         default: null
       };
@@ -14638,13 +14647,12 @@
 
   // Types
 
-  const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
   const ALIGNMENT = ['start', 'end', 'center'];
   const SPACE = ['space-between', 'space-around', 'space-evenly'];
   function makeRowProps(prefix, def) {
     return breakpoints.reduce((props, val) => {
-      props[prefix + vue.capitalize(val)] = def();
+      const prefixKey = prefix + vue.capitalize(val);
+      props[prefixKey] = def();
       return props;
     }, {});
   }
@@ -14974,7 +14982,10 @@
         }, {
           default: () => [slots.default?.()]
         })]
-      }), [[vue.resolveDirective("intersect"), onIntersect, props.options]]));
+      }), [[vue.resolveDirective("intersect"), {
+        handler: onIntersect,
+        options: props.options
+      }, null]]));
       return {};
     }
   });
@@ -15951,9 +15962,9 @@
         frame = requestAnimationFrame(() => {
           const el = (root.value?.$el).querySelector('.v-img__img');
           if (!el) return;
-          const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight;
-          const scrollPos = scrollParent.scrollTop ?? window.scrollY;
-          const top = intersectionRef.value.offsetTop;
+          const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight;
+          const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop;
+          const top = intersectionRef.value.getBoundingClientRect().top + scrollPos;
           const height = contentRect.value.height;
           const center = top + (height - scrollHeight) / 2;
           const translate = floor((scrollPos - center) * scale.value);
@@ -16035,10 +16046,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [controlProps, _2] = filterControlProps({
-          ...props,
-          multiple: false
-        });
+        const [controlProps, _2] = VSelectionControl.filterProps(props);
         const label = slots.label ? slots.label({
           label: props.label,
           props: {
@@ -16073,7 +16081,8 @@
               "type": props.type,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value,
-              "aria-labelledby": label ? id.value : undefined
+              "aria-labelledby": label ? id.value : undefined,
+              "multiple": false
             }, controlAttrs, {
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event
@@ -16943,7 +16952,7 @@
         window.clearTimeout(activeTimeout);
       }
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-snackbar', {
@@ -17038,7 +17047,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [controlProps, _2] = filterControlProps(props);
+        const [controlProps, _2] = VSelectionControl.filterProps(props);
         const control = vue.ref();
         function onClick() {
           control.value?.input?.click();
@@ -17171,28 +17180,17 @@
     name: 'VTab',
     props: {
       fixed: Boolean,
-      icon: [Boolean, String, Function, Object],
-      prependIcon: IconValue,
-      appendIcon: IconValue,
-      stacked: Boolean,
       title: String,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      color: String,
       sliderColor: String,
       hideSlider: Boolean,
       direction: {
         type: String,
         default: 'horizontal'
       },
-      ...makeTagProps(),
-      ...makeRouterProps(),
-      ...makeGroupItemProps({
-        selectedClass: 'v-tab--selected'
-      }),
-      ...makeThemeProps()
+      ...omit(makeVBtnProps({
+        selectedClass: 'v-tab--selected',
+        variant: 'text'
+      }), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
     },
     setup(props, _ref) {
       let {
@@ -17242,7 +17240,7 @@
         }
       }
       useRender(() => {
-        const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
+        const [btnProps] = VBtn.filterProps(props);
         return vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VTab",
           "symbol": VTabsSymbol,
@@ -17254,7 +17252,6 @@
           "active": false,
           "block": props.fixed,
           "maxWidth": props.fixed ? 300 : undefined,
-          "variant": "text",
           "rounded": 0
         }, btnProps, attrs, {
           "onGroup:selected": updateSlider
@@ -17499,7 +17496,13 @@
         });
       }
       function onInput(e) {
-        model.value = e.target.value;
+        const el = e.target;
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        model.value = el.value;
+        vue.nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
       }
       const sizerRef = vue.ref();
       function calculateInputHeight() {
@@ -17939,7 +17942,7 @@
         'aria-describedby': id.value
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-tooltip'],
@@ -18757,6 +18760,7 @@
   const VDataTableRow = defineComponent({
     name: 'VDataTableRow',
     props: {
+      index: Number,
       item: Object,
       onClick: Function
     },
@@ -18794,6 +18798,7 @@
           const item = props.item;
           const slotName = `item.${column.key}`;
           const slotProps = {
+            index: props.index,
             item: props.item,
             columns: columns.value,
             isSelected,
@@ -18805,7 +18810,7 @@
           if (column.key === 'data-table-select') {
             return slots['item.data-table-select']?.(slotProps) ?? vue.createVNode(VCheckboxBtn, {
               "modelValue": isSelected([item]),
-              "onClick": () => toggleSelect(item)
+              "onClick": vue.withModifiers(() => toggleSelect(item), ['stop'])
             }, null);
           }
           if (column.key === 'data-table-expand') {
@@ -18813,10 +18818,10 @@
               "icon": isExpanded(item) ? '$collapse' : '$expand',
               "size": "small",
               "variant": "text",
-              "onClick": () => toggleExpand(item)
+              "onClick": vue.withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
-          return item.columns[column.key];
+          return getPropertyFromItem(item.columns, column.key);
         }
       }))]));
     }
@@ -18916,6 +18921,7 @@
               item
             });
           },
+          "index": index,
           "item": item
         }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
       })]));
@@ -19144,6 +19150,19 @@
       itemValue: 'id'
     })
   }, 'v-data-table-item');
+  function add(obj, key, value) {
+    const path = key.split('.');
+    while (path.length > 1) {
+      const part = path.shift();
+      if (obj[part] == null) {
+        obj[part] = {};
+      }
+      if (typeof obj[part] === 'object') {
+        obj = obj[part];
+      }
+    }
+    obj[path[0]] = value;
+  }
   function useDataTableItems(props, columns) {
     const {
       items
@@ -19153,7 +19172,7 @@
         ...item,
         type: 'item',
         columns: columns.value.reduce((obj, column) => {
-          obj[column.key] = getPropertyFromItem(item.raw, column.value ?? column.key);
+          add(obj, column.key, getPropertyFromItem(item.raw, column.value ?? column.key));
           return obj;
         }, {})
       };
@@ -19691,7 +19710,9 @@
         "height": props.height
       }, {
         top: slots.top,
-        default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [vue.createVNode("thead", {
+        default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
+          columns
+        }), vue.createVNode("thead", {
           "class": "v-data-table__thead",
           "role": "rowgroup"
         }, [slots.headers ? slots.headers() : vue.createVNode(VDataTableHeaders, {
@@ -20234,7 +20255,7 @@
       locale
     };
   }
-  const version$1 = "3.1.10";
+  const version$1 = "3.1.12";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20246,7 +20267,7 @@
     }
   }
 
-  const version = "3.1.10";
+  const version = "3.1.12";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};