vuetify 3.1.9 → 3.1.11

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.9
+* Vuetify v3.1.11
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -203,6 +203,10 @@ function clamp(value) {
   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));
@@ -485,7 +489,14 @@ function animate(el, keyframes, options) {
   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 = () => {
@@ -950,7 +961,7 @@ function provideDefaults(defaults, options) {
   const providedDefaults = ref(defaults);
   const newDefaults = computed(() => {
     const disabled = unref(options?.disabled);
-    if (disabled) return {};
+    if (disabled) return injectedDefaults.value;
     const scoped = unref(options?.scoped);
     const reset = unref(options?.reset);
     const root = unref(options?.root);
@@ -1005,15 +1016,22 @@ function useToggleScope(source, fn) {
 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();
@@ -1053,7 +1071,7 @@ const defineComponent = function defineComponent(options) {
     };
   }
   return options;
-};
+}
 // Implementation
 function genericComponent() {
   let exposeDefaults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -3221,9 +3239,6 @@ const VToolbar = genericComponent()({
     };
   }
 });
-function filterToolbarProps(props) {
-  return pick(props, Object.keys(VToolbar?.props ?? {}));
-}
 
 // Utilities
 
@@ -3301,7 +3316,7 @@ const VAppBar = genericComponent()({
       absolute: toRef(props, 'absolute')
     });
     useRender(() => {
-      const [toolbarProps] = filterToolbarProps(props);
+      const [toolbarProps] = VToolbar.filterProps(props);
       return createVNode(VToolbar, mergeProps({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
@@ -3392,8 +3407,6 @@ function useVariant(props) {
   };
 }
 
-// Types
-
 const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
@@ -3444,9 +3457,6 @@ const VBtnGroup = genericComponent()({
     });
   }
 });
-function filterVBtnGroupProps(props) {
-  return pick(props, Object.keys(VBtnGroup.props));
-}
 
 // Composables
 
@@ -3673,7 +3683,7 @@ const VBtnToggle = genericComponent()({
       selected
     } = useGroup(props, VBtnToggleSymbol);
     useRender(() => {
-      const [btnGroupProps] = filterVBtnGroupProps(props);
+      const [btnGroupProps] = VBtnGroup.filterProps(props);
       return createVNode(VBtnGroup, mergeProps({
         "class": "v-btn-toggle"
       }, btnGroupProps), {
@@ -4761,49 +4771,50 @@ function useSelectLink(link, select) {
 
 // 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
   },
@@ -6155,7 +6166,13 @@ const VTextField = genericComponent()({
       });
     }
     function onInput(e) {
-      model.value = e.target.value;
+      const el = e.target;
+      const caretPosition = [el.selectionStart, el.selectionEnd];
+      model.value = el.value;
+      nextTick(() => {
+        el.selectionStart = caretPosition[0];
+        el.selectionEnd = caretPosition[1];
+      });
     }
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter || props.counterValue);
@@ -6255,9 +6272,6 @@ const VTextField = genericComponent()({
     return forwardRefs({}, vInputRef, vFieldRef, inputRef);
   }
 });
-function filterVTextFieldProps(props) {
-  return pick(props, Object.keys(VTextField.props));
-}
 
 // Types
 
@@ -6515,11 +6529,6 @@ const VSelectionControl = genericComponent()({
     };
   }
 });
-function filterControlProps(props) {
-  return pick(props, Object.keys(VSelectionControl.props));
-}
-
-// Types
 
 const makeVCheckboxBtnProps = propsFactory({
   indeterminate: Boolean,
@@ -6569,9 +6578,6 @@ const VCheckboxBtn = genericComponent()({
     return {};
   }
 });
-function filterCheckboxBtnProps(props) {
-  return pick(props, Object.keys(VCheckboxBtn.props));
-}
 
 // Types
 
@@ -6600,7 +6606,7 @@ const VCheckbox = genericComponent()({
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = filterInputProps(props);
-      const [checkboxProps, _2] = filterCheckboxBtnProps(props);
+      const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
         "class": "v-checkbox"
       }, inputAttrs, inputProps, {
@@ -7504,8 +7510,6 @@ const useNestedGroupActivator = () => {
   });
 };
 
-// Types
-
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
   setup(_, _ref) {
@@ -7598,9 +7602,6 @@ const VListGroup = genericComponent()({
     return {};
   }
 });
-function filterListGroupProps(props) {
-  return pick(props, Object.keys(VListGroup.props));
-}
 
 const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
@@ -7738,7 +7739,7 @@ const VListItem = genericComponent()({
       const hasColor = !list || isSelected.value || isActive.value;
       const hasTitle = slots.title || props.title;
       const hasSubtitle = slots.subtitle || props.subtitle;
-      const hasAppendMedia = !!(props.prependAvatar || props.prependIcon);
+      const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
       const hasAppend = !!(hasAppendMedia || slots.append);
       const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
@@ -7928,7 +7929,7 @@ const VListChildren = genericComponent()({
           item
         }) : undefined
       };
-      const [listGroupProps, _1] = filterListGroupProps(itemProps);
+      const [listGroupProps, _1] = VListGroup.filterProps(itemProps);
       return children ? createVNode(VListGroup, mergeProps({
         "value": itemProps?.value
       }, listGroupProps), {
@@ -9155,6 +9156,8 @@ function bindScroll(el, onScroll) {
 
 // Types
 
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
+
 const DisplaySymbol = Symbol.for('vuetify:display');
 const defaultDisplayOptions = {
   mobileBreakpoint: 'lg',
@@ -9710,9 +9713,6 @@ const VOverlay = genericComponent()({
     };
   }
 });
-function filterVOverlayProps(props) {
-  return pick(props, Object.keys(VOverlay.props));
-}
 
 // Types
 
@@ -9778,7 +9778,7 @@ const VMenu = genericComponent()({
       'aria-owns': id.value
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-menu']
@@ -9954,7 +9954,7 @@ const VSelect = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -10347,7 +10347,7 @@ const VAutocomplete = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -12295,10 +12295,7 @@ const useSlider = _ref => {
   const min = computed(() => parseFloat(props.min));
   const max = computed(() => parseFloat(props.max));
   const step = computed(() => props.step > 0 ? parseFloat(props.step) : 0);
-  const decimals = computed(() => {
-    const trimmedStep = step.value.toString().trim();
-    return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
-  });
+  const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
   const thumbSize = computed(() => parseInt(props.thumbSize, 10));
   const tickSize = computed(() => parseInt(props.tickSize, 10));
   const trackSize = computed(() => parseInt(props.trackSize, 10));
@@ -13276,8 +13273,6 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
-// Types
-
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
@@ -13702,7 +13697,7 @@ const VCombobox = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -13910,7 +13905,7 @@ const VDialog = genericComponent()({
       'aria-expanded': String(isActive.value)
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-dialog', {
@@ -14514,10 +14509,8 @@ const VContainer = genericComponent()({
 
 // 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
@@ -14526,8 +14519,9 @@ const breakpointProps = (() => {
   }, {});
 })();
 const offsetProps = (() => {
-  return breakpoints$1.reduce((props, val) => {
-    props['offset' + capitalize(val)] = {
+  return breakpoints.reduce((props, val) => {
+    const offsetKey = 'offset' + capitalize(val);
+    props[offsetKey] = {
       type: [String, Number],
       default: null
     };
@@ -14535,8 +14529,9 @@ const offsetProps = (() => {
   }, {});
 })();
 const orderProps = (() => {
-  return breakpoints$1.reduce((props, val) => {
-    props['order' + capitalize(val)] = {
+  return breakpoints.reduce((props, val) => {
+    const orderKey = 'order' + capitalize(val);
+    props[orderKey] = {
       type: [String, Number],
       default: null
     };
@@ -14634,13 +14629,12 @@ const VCol = genericComponent()({
 
 // 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 + capitalize(val)] = def();
+    const prefixKey = prefix + capitalize(val);
+    props[prefixKey] = def();
     return props;
   }, {});
 }
@@ -14970,7 +14964,10 @@ const VLazy = genericComponent()({
       }, {
         default: () => [slots.default?.()]
       })]
-    }), [[resolveDirective("intersect"), onIntersect, props.options]]));
+    }), [[resolveDirective("intersect"), {
+      handler: onIntersect,
+      options: props.options
+    }, null]]));
     return {};
   }
 });
@@ -15947,9 +15944,9 @@ const VParallax = genericComponent()({
       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);
@@ -16031,10 +16028,7 @@ const VRadioGroup = genericComponent()({
     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: {
@@ -16069,7 +16063,8 @@ const VRadioGroup = genericComponent()({
             "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
@@ -16939,7 +16934,7 @@ const VSnackbar = genericComponent()({
       window.clearTimeout(activeTimeout);
     }
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-snackbar', {
@@ -17034,7 +17029,7 @@ const VSwitch = genericComponent()({
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = filterInputProps(props);
-      const [controlProps, _2] = filterControlProps(props);
+      const [controlProps, _2] = VSelectionControl.filterProps(props);
       const control = ref();
       function onClick() {
         control.value?.input?.click();
@@ -17167,28 +17162,17 @@ const VTab = genericComponent()({
   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 {
@@ -17238,7 +17222,7 @@ const VTab = genericComponent()({
       }
     }
     useRender(() => {
-      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
+      const [btnProps] = VBtn.filterProps(props);
       return createVNode(VBtn, mergeProps({
         "_as": "VTab",
         "symbol": VTabsSymbol,
@@ -17250,7 +17234,6 @@ const VTab = genericComponent()({
         "active": false,
         "block": props.fixed,
         "maxWidth": props.fixed ? 300 : undefined,
-        "variant": "text",
         "rounded": 0
       }, btnProps, attrs, {
         "onGroup:selected": updateSlider
@@ -17326,6 +17309,16 @@ const VTabs = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'bgColor'));
+    provideDefaults({
+      VTab: {
+        color: toRef(props, 'color'),
+        direction: toRef(props, 'direction'),
+        stacked: toRef(props, 'stacked'),
+        fixed: toRef(props, 'fixedTabs'),
+        sliderColor: toRef(props, 'sliderColor'),
+        hideSlider: toRef(props, 'hideSlider')
+      }
+    });
     useRender(() => createVNode(VSlideGroup, {
       "modelValue": model.value,
       "onUpdate:modelValue": $event => model.value = $event,
@@ -17342,27 +17335,9 @@ const VTabs = genericComponent()({
       "mandatory": props.mandatory,
       "direction": props.direction
     }, {
-      default: () => [!slots.default ? parsedItems.value.map(item => createVNode(VTab, mergeProps({
-        "key": item.title,
-        "color": props.color,
-        "direction": props.direction,
-        "fixed": props.fixedTabs,
-        "hideSlider": props.hideSlider,
-        "sliderColor": props.sliderColor,
-        "stacked": props.stacked
-      }, item), null)) : createVNode(VDefaultsProvider, {
-        "key": "tabs-defaults",
-        "defaults": {
-          VTab: {
-            color: props.color,
-            direction: props.direction,
-            fixed: props.fixedTabs,
-            hideSlider: props.hideSlider,
-            sliderColor: props.sliderColor,
-            stacked: props.stacked
-          }
-        }
-      }, slots.default)]
+      default: () => [slots.default ? slots.default() : parsedItems.value.map(item => createVNode(VTab, mergeProps(item, {
+        "key": item.title
+      }), null))]
     }));
     return {};
   }
@@ -17503,7 +17478,13 @@ const VTextarea = genericComponent()({
       });
     }
     function onInput(e) {
-      model.value = e.target.value;
+      const el = e.target;
+      const caretPosition = [el.selectionStart, el.selectionEnd];
+      model.value = el.value;
+      nextTick(() => {
+        el.selectionStart = caretPosition[0];
+        el.selectionEnd = caretPosition[1];
+      });
     }
     const sizerRef = ref();
     function calculateInputHeight() {
@@ -17943,7 +17924,7 @@ const VTooltip = genericComponent()({
       'aria-describedby': id.value
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-tooltip'],
@@ -18761,6 +18742,7 @@ function useExpanded() {
 const VDataTableRow = defineComponent({
   name: 'VDataTableRow',
   props: {
+    index: Number,
     item: Object,
     onClick: Function
   },
@@ -18798,6 +18780,7 @@ const VDataTableRow = defineComponent({
         const item = props.item;
         const slotName = `item.${column.key}`;
         const slotProps = {
+          index: props.index,
           item: props.item,
           columns: columns.value,
           isSelected,
@@ -18920,6 +18903,7 @@ const VDataTableRows = genericComponent()({
             item
           });
         },
+        "index": index,
         "item": item
       }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
     })]));
@@ -20238,7 +20222,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.9";
+const version$1 = "3.1.11";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20250,7 +20234,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.9";
+const version = "3.1.11";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};