vuetify 3.0.5 → 3.0.6

package/dist/vuetify.d.ts

@@ -3466,6 +3466,7 @@ declare const VAvatar: vue.DefineComponent<{
         type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
     };
+    theme: StringConstructor;
     tag: {
         type: StringConstructor;
         default: string;
@@ -3497,6 +3498,7 @@ declare const VAvatar: vue.DefineComponent<{
         type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
     };
+    theme: StringConstructor;
     tag: {
         type: StringConstructor;
         default: string;
@@ -25991,7 +25993,6 @@ declare module '@vue/runtime-core' {
   }
 
   export interface GlobalComponents {
-    VApp: typeof import('vuetify/components')['VApp']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
     VForm: typeof import('vuetify/components')['VForm']
     VContainer: typeof import('vuetify/components')['VContainer']
@@ -25999,22 +26000,16 @@ declare module '@vue/runtime-core' {
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VHover: typeof import('vuetify/components')['VHover']
-    VLazy: typeof import('vuetify/components')['VLazy']
     VLayout: typeof import('vuetify/components')['VLayout']
     VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
+    VLazy: typeof import('vuetify/components')['VLazy']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
     VParallax: typeof import('vuetify/components')['VParallax']
-    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VRadio: typeof import('vuetify/components')['VRadio']
+    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VResponsive: typeof import('vuetify/components')['VResponsive']
-    VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
-    VValidation: typeof import('vuetify/components')['VValidation']
-    VAppBar: typeof import('vuetify/components')['VAppBar']
-    VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
-    VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
-    VAlert: typeof import('vuetify/components')['VAlert']
-    VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
+    VApp: typeof import('vuetify/components')['VApp']
     VFabTransition: typeof import('vuetify/components')['VFabTransition']
     VDialogBottomTransition: typeof import('vuetify/components')['VDialogBottomTransition']
     VDialogTopTransition: typeof import('vuetify/components')['VDialogTopTransition']
@@ -26031,9 +26026,16 @@ declare module '@vue/runtime-core' {
     VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
     VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
     VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
-    VAvatar: typeof import('vuetify/components')['VAvatar']
+    VAppBar: typeof import('vuetify/components')['VAppBar']
+    VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
+    VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
+    VValidation: typeof import('vuetify/components')['VValidation']
+    VAlert: typeof import('vuetify/components')['VAlert']
+    VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
     VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
     VBadge: typeof import('vuetify/components')['VBadge']
+    VAvatar: typeof import('vuetify/components')['VAvatar']
+    VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
@@ -26042,6 +26044,7 @@ declare module '@vue/runtime-core' {
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
     VBtn: typeof import('vuetify/components')['VBtn']
+    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
@@ -26054,28 +26057,27 @@ declare module '@vue/runtime-core' {
     VCheckbox: typeof import('vuetify/components')['VCheckbox']
     VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VChip: typeof import('vuetify/components')['VChip']
-    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCode: typeof import('vuetify/components')['VCode']
+    VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
     VDialog: typeof import('vuetify/components')['VDialog']
-    VDivider: typeof import('vuetify/components')['VDivider']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
+    VDivider: typeof import('vuetify/components')['VDivider']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
-    VFileInput: typeof import('vuetify/components')['VFileInput']
     VFooter: typeof import('vuetify/components')['VFooter']
+    VInput: typeof import('vuetify/components')['VInput']
+    VFileInput: typeof import('vuetify/components')['VFileInput']
     VIcon: typeof import('vuetify/components')['VIcon']
     VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VImg: typeof import('vuetify/components')['VImg']
-    VInput: typeof import('vuetify/components')['VInput']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
     VKbd: typeof import('vuetify/components')['VKbd']
@@ -26092,36 +26094,36 @@ declare module '@vue/runtime-core' {
     VMain: typeof import('vuetify/components')['VMain']
     VMenu: typeof import('vuetify/components')['VMenu']
     VMessages: typeof import('vuetify/components')['VMessages']
-    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VOverlay: typeof import('vuetify/components')['VOverlay']
-    VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VPagination: typeof import('vuetify/components')['VPagination']
-    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
+    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
+    VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
+    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VRating: typeof import('vuetify/components')['VRating']
     VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
+    VSheet: typeof import('vuetify/components')['VSheet']
     VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
     VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
-    VSheet: typeof import('vuetify/components')['VSheet']
     VSlider: typeof import('vuetify/components')['VSlider']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSwitch: typeof import('vuetify/components')['VSwitch']
-    VSystemBar: typeof import('vuetify/components')['VSystemBar']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTab: typeof import('vuetify/components')['VTab']
+    VSystemBar: typeof import('vuetify/components')['VSystemBar']
+    VTextField: typeof import('vuetify/components')['VTextField']
     VTable: typeof import('vuetify/components')['VTable']
     VTextarea: typeof import('vuetify/components')['VTextarea']
-    VTextField: typeof import('vuetify/components')['VTextField']
-    VToolbar: typeof import('vuetify/components')['VToolbar']
-    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
-    VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VTooltip: typeof import('vuetify/components')['VTooltip']
+    VToolbar: typeof import('vuetify/components')['VToolbar']
+    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
+    VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
-    VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
+    VImg: typeof import('vuetify/components')['VImg']
   }
 }

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.5
+* Vuetify v3.0.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2713,7 +2713,7 @@ const VImg = defineComponent({
         src: props.src.src,
         srcset: props.srcset || props.src.srcset,
         lazySrc: props.lazySrc || props.src.lazySrc,
-        aspect: Number(props.aspectRatio || props.src.aspect)
+        aspect: Number(props.aspectRatio || props.src.aspect || 0)
       } : {
         src: props.src,
         srcset: props.srcset,
@@ -2727,6 +2727,12 @@ const VImg = defineComponent({
     watch(() => props.src, () => {
       init(state.value !== 'idle');
     });
+    watch(aspectRatio, (val, oldVal) => {
+      if (!val && oldVal && image.value) {
+        pollForSize(image.value);
+      }
+    });
+
     // TODO: getSrc when window width changes
 
     onBeforeMount(() => init());
@@ -2771,9 +2777,11 @@ const VImg = defineComponent({
       const img = image.value;
       if (img) currentSrc.value = img.currentSrc || img.src;
     }
+    let timer = -1;
     function pollForSize(img) {
       let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
       const poll = () => {
+        clearTimeout(timer);
         const {
           naturalHeight: imgHeight,
           naturalWidth: imgWidth
@@ -2782,7 +2790,7 @@ const VImg = defineComponent({
           naturalWidth.value = imgWidth;
           naturalHeight.value = imgHeight;
         } else if (!img.complete && state.value === 'loading' && timeout != null) {
-          setTimeout(poll, timeout);
+          timer = window.setTimeout(poll, timeout);
         } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {
           naturalWidth.value = 1;
           naturalHeight.value = 1;
@@ -6571,6 +6579,7 @@ const makeVAvatarProps = propsFactory({
   ...makeRoundedProps(),
   ...makeSizeProps(),
   ...makeTagProps(),
+  ...makeThemeProps(),
   ...makeVariantProps({
     variant: 'flat'
   })
@@ -6582,6 +6591,9 @@ const VAvatar = defineComponent({
     let {
       slots
     } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       colorClasses,
       colorStyles,
@@ -6603,7 +6615,7 @@ const VAvatar = defineComponent({
         "class": ['v-avatar', {
           'v-avatar--start': props.start,
           'v-avatar--end': props.end
-        }, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
+        }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
         "style": [colorStyles.value, sizeStyles.value]
       }, {
         default: () => [props.image ? createVNode(VImg, {
@@ -7456,7 +7468,8 @@ const VListGroup = genericComponent()({
         "class": ['v-list-group', {
           'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value,
           'v-list-group--fluid': props.fluid,
-          'v-list-group--subgroup': props.subgroup
+          'v-list-group--subgroup': props.subgroup,
+          'v-list-group--open': isOpen.value
         }]
       }, {
         default: () => [slots.activator && createVNode(VDefaultsProvider, {
@@ -8083,8 +8096,10 @@ const VList = genericComponent()({
       const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
       const idx = focusable.indexOf(document.activeElement);
       if (!location) {
-        var _focusable$;
-        (_focusable$ = focusable[0]) == null ? void 0 : _focusable$.focus();
+        if (!contentRef.value.contains(document.activeElement)) {
+          var _focusable$;
+          (_focusable$ = focusable[0]) == null ? void 0 : _focusable$.focus();
+        }
       } else if (location === 'first') {
         var _focusable$2;
         (_focusable$2 = focusable[0]) == null ? void 0 : _focusable$2.focus();
@@ -12142,7 +12157,7 @@ const useSlider = _ref => {
   const {
     isRtl
   } = useRtl();
-  const isReversed = computed(() => isRtl.value !== props.reverse);
+  const isReversed = toRef(props, 'reverse');
   const horizontalDirection = computed(() => {
     let hd = isRtl.value ? 'rtl' : 'ltr';
     if (props.reverse) {
@@ -12191,7 +12206,7 @@ const useSlider = _ref => {
 
     // It is possible for left to be NaN, force to number
     let clickPos = Math.min(Math.max((clickOffset - trackStart - startOffset.value) / trackLength, 0), 1) || 0;
-    if (vertical || isReversed.value) clickPos = 1 - clickPos;
+    if (vertical || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos;
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
   let thumbMoved = false;
@@ -12398,7 +12413,7 @@ const VSliderThumb = defineComponent({
       const _step = step.value || 0.1;
       const steps = (props.max - props.min) / _step;
       if ([left, right, down, up].includes(e.key)) {
-        const increase = isReversed.value ? [left, up] : [right, up];
+        const increase = horizontalDirection.value === 'rtl' ? [left, up] : [right, up];
         const direction = increase.includes(e.key) ? 1 : -1;
         const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
         value = value + direction * _step * multipliers.value[multiplier];
@@ -12418,8 +12433,7 @@ const VSliderThumb = defineComponent({
     }
     useRender(() => {
       var _slots$thumbLabel;
-      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%');
-      const inset = vertical.value ? 'block' : 'inline';
+      const positionPercentage = convertToUnit(vertical.value || isReversed.value ? 100 - props.position : props.position, '%');
       const {
         elevationClasses
       } = useElevation(computed(() => !disabled.value ? elevation.value : undefined));
@@ -12429,9 +12443,8 @@ const VSliderThumb = defineComponent({
           'v-slider-thumb--pressed': props.focused && mousePressed.value
         }],
         "style": {
-          [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,
-          '--v-slider-thumb-size': convertToUnit(thumbSize.value),
-          direction: !vertical.value ? horizontalDirection.value : undefined
+          '--v-slider-thumb-position': positionPercentage,
+          '--v-slider-thumb-size': convertToUnit(thumbSize.value)
         },
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
@@ -14167,6 +14180,7 @@ const VFileInput = defineComponent({
           }), {
             ...slots,
             default: _ref4 => {
+              var _model$value2;
               let {
                 props: {
                   class: fieldClass,
@@ -14193,7 +14207,7 @@ const VFileInput = defineComponent({
                 "onBlur": () => isFocused.value = false
               }, slotProps, inputAttrs), null), createVNode("div", {
                 "class": fieldClass
-              }, [model.value.length > 0 && (slots.selection ? slots.selection({
+              }, [!!((_model$value2 = model.value) != null && _model$value2.length) && (slots.selection ? slots.selection({
                 fileNames: fileNames.value,
                 totalBytes: totalBytes.value,
                 totalBytesReadable: totalBytesReadable.value
@@ -14208,9 +14222,9 @@ const VFileInput = defineComponent({
           });
         },
         details: hasDetails ? slotProps => {
-          var _slots$details;
+          var _slots$details, _model$value3;
           return createVNode(Fragment, null, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps), hasCounter && createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
-            "active": !!model.value.length,
+            "active": !!((_model$value3 = model.value) != null && _model$value3.length),
             "value": counterValue.value
           }, slots.counter)])]);
         } : undefined
@@ -16786,6 +16800,7 @@ const VSnackbar = genericComponent()({
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeVariantProps(),
+    ...makeThemeProps(),
     ...omit(makeVOverlayProps({
       transition: 'v-snackbar-transition'
     }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy'])
@@ -16807,6 +16822,9 @@ const VSnackbar = genericComponent()({
     const {
       scopeId
     } = useScopeId();
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       colorClasses,
       colorStyles,
@@ -16854,7 +16872,7 @@ const VSnackbar = genericComponent()({
         "scrollStrategy": "none"
       }, scopeId), {
         default: () => [createVNode("div", {
-          "class": ['v-snackbar__wrapper', colorClasses.value, roundedClasses.value, variantClasses.value],
+          "class": ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
           "style": [colorStyles.value],
           "onPointerenter": onPointerenter,
           "onPointerleave": startTimeout
@@ -18226,7 +18244,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.0.5";
+const version$1 = "3.0.6";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18247,7 +18265,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.0.5";
+const version = "3.0.6";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };