vuetify 3.1.10 → 3.1.11

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.10
+* 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 = () => {
@@ -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;
@@ -3217,9 +3235,6 @@ const VToolbar = genericComponent()({
     };
   }
 });
-function filterToolbarProps(props) {
-  return pick(props, Object.keys(VToolbar?.props ?? {}));
-}
 
 // Utilities
 
@@ -3297,7 +3312,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', {
@@ -3388,8 +3403,6 @@ function useVariant(props) {
   };
 }
 
-// Types
-
 const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
@@ -3440,9 +3453,6 @@ const VBtnGroup = genericComponent()({
     });
   }
 });
-function filterVBtnGroupProps(props) {
-  return pick(props, Object.keys(VBtnGroup.props));
-}
 
 // Composables
 
@@ -3669,7 +3679,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), {
@@ -4757,49 +4767,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
   },
@@ -6151,7 +6162,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);
@@ -6251,9 +6268,6 @@ const VTextField = genericComponent()({
     return forwardRefs({}, vInputRef, vFieldRef, inputRef);
   }
 });
-function filterVTextFieldProps(props) {
-  return pick(props, Object.keys(VTextField.props));
-}
 
 // Types
 
@@ -6511,11 +6525,6 @@ const VSelectionControl = genericComponent()({
     };
   }
 });
-function filterControlProps(props) {
-  return pick(props, Object.keys(VSelectionControl.props));
-}
-
-// Types
 
 const makeVCheckboxBtnProps = propsFactory({
   indeterminate: Boolean,
@@ -6565,9 +6574,6 @@ const VCheckboxBtn = genericComponent()({
     return {};
   }
 });
-function filterCheckboxBtnProps(props) {
-  return pick(props, Object.keys(VCheckboxBtn.props));
-}
 
 // Types
 
@@ -6596,7 +6602,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, {
@@ -7500,8 +7506,6 @@ const useNestedGroupActivator = () => {
   });
 };
 
-// Types
-
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
   setup(_, _ref) {
@@ -7594,9 +7598,6 @@ const VListGroup = genericComponent()({
     return {};
   }
 });
-function filterListGroupProps(props) {
-  return pick(props, Object.keys(VListGroup.props));
-}
 
 const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
@@ -7924,7 +7925,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), {
@@ -9151,6 +9152,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',
@@ -9706,9 +9709,6 @@ const VOverlay = genericComponent()({
     };
   }
 });
-function filterVOverlayProps(props) {
-  return pick(props, Object.keys(VOverlay.props));
-}
 
 // Types
 
@@ -9774,7 +9774,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']
@@ -9950,7 +9950,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, {
@@ -10343,7 +10343,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, {
@@ -12291,10 +12291,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));
@@ -13272,8 +13269,6 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
-// Types
-
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
@@ -13698,7 +13693,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, {
@@ -13906,7 +13901,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', {
@@ -14510,10 +14505,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
@@ -14522,8 +14515,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
     };
@@ -14531,8 +14525,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
     };
@@ -14630,13 +14625,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;
   }, {});
 }
@@ -14966,7 +14960,10 @@ const VLazy = genericComponent()({
       }, {
         default: () => [slots.default?.()]
       })]
-    }), [[resolveDirective("intersect"), onIntersect, props.options]]));
+    }), [[resolveDirective("intersect"), {
+      handler: onIntersect,
+      options: props.options
+    }, null]]));
     return {};
   }
 });
@@ -15943,9 +15940,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);
@@ -16027,10 +16024,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: {
@@ -16065,7 +16059,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
@@ -16935,7 +16930,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', {
@@ -17030,7 +17025,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();
@@ -17163,28 +17158,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 {
@@ -17234,7 +17218,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,
@@ -17246,7 +17230,6 @@ const VTab = genericComponent()({
         "active": false,
         "block": props.fixed,
         "maxWidth": props.fixed ? 300 : undefined,
-        "variant": "text",
         "rounded": 0
       }, btnProps, attrs, {
         "onGroup:selected": updateSlider
@@ -17491,7 +17474,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() {
@@ -17931,7 +17920,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'],
@@ -18324,7 +18313,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.10";
+const version$1 = "3.1.11";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18344,7 +18333,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.1.10";
+const version = "3.1.11";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };