vuetify 3.3.4 → 3.3.6

package/dist/vuetify.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4
+* Vuetify v3.3.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -16201,13 +16201,16 @@ html.overflow-y-hidden {
   align-self: flex-start;
   flex: 1 1;
 }
+.v-autocomplete .v-field input {
+  min-width: 64px;
+}
 .v-autocomplete .v-field:not(.v-field--focused) input {
   min-width: 0;
 }
 .v-autocomplete .v-field--dirty .v-autocomplete__selection {
   margin-inline-end: 2px;
 }
-.v-autocomplete .v-field--single-line .v-autocomplete__selection-text {
+.v-autocomplete .v-autocomplete__selection-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -16223,15 +16226,16 @@ html.overflow-y-hidden {
 }
 .v-autocomplete__selection {
   display: inline-flex;
+  align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
-  max-width: 100%;
+  max-width: 90%;
 }
-.v-autocomplete input, .v-autocomplete__selection {
+.v-autocomplete__selection {
   margin-top: var(--v-input-chips-margin-top);
   margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-autocomplete input:first-child, .v-autocomplete__selection:first-child {
+.v-autocomplete__selection:first-child {
   margin-inline-start: 0;
 }
 .v-autocomplete--selecting-index .v-autocomplete__selection {
@@ -16252,6 +16256,10 @@ html.overflow-y-hidden {
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }
+.v-autocomplete--single .v-field--variant-outlined input {
+  top: calc(50% - var(--v-input-chips-margin-top));
+  transform: translateY(-50%);
+}
 .v-autocomplete--single .v-field--active input {
   transition: none;
 }
@@ -16677,6 +16685,10 @@ html.overflow-y-hidden {
   opacity: var(--v-disabled-opacity);
   pointer-events: none;
 }
+.v-breadcrumbs-item--link {
+  color: inherit;
+  text-decoration: none;
+}
 .v-breadcrumbs-item--link:hover {
   text-decoration: underline;
 }
@@ -17078,7 +17090,7 @@ html.overflow-y-hidden {
 .v-card-actions .v-btn {
   padding: 0 8px;
 }
-.v-card-actions .v-btn ~ .v-btn {
+.v-card-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {
   margin-inline-start: 0.5rem;
 }
 
@@ -18847,13 +18859,16 @@ html.overflow-y-hidden {
   align-self: flex-start;
   flex: 1 1;
 }
+.v-combobox .v-field input {
+  min-width: 64px;
+}
 .v-combobox .v-field:not(.v-field--focused) input {
   min-width: 0;
 }
 .v-combobox .v-field--dirty .v-combobox__selection {
   margin-inline-end: 2px;
 }
-.v-combobox .v-field--single-line .v-combobox__selection-text {
+.v-combobox .v-combobox__selection-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -18869,15 +18884,16 @@ html.overflow-y-hidden {
 }
 .v-combobox__selection {
   display: inline-flex;
+  align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
-  max-width: 100%;
+  max-width: 90%;
 }
-.v-combobox input, .v-combobox__selection {
+.v-combobox__selection {
   margin-top: var(--v-input-chips-margin-top);
   margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-combobox input:first-child, .v-combobox__selection:first-child {
+.v-combobox__selection:first-child {
   margin-inline-start: 0;
 }
 .v-combobox--selecting-index .v-combobox__selection {
@@ -18898,6 +18914,10 @@ html.overflow-y-hidden {
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }
+.v-combobox--single .v-field--variant-outlined input {
+  top: calc(50% - var(--v-input-chips-margin-top));
+  transform: translateY(-50%);
+}
 .v-combobox--single .v-field--active input {
   transition: none;
 }
@@ -21304,7 +21324,7 @@ html.v-overlay-scroll-blocked {
 .v-select .v-field--dirty .v-select__selection {
   margin-inline-end: 2px;
 }
-.v-select .v-field--single-line .v-select__selection-text {
+.v-select .v-select__selection-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -21316,15 +21336,16 @@ html.v-overlay-scroll-blocked {
 }
 .v-select__selection {
   display: inline-flex;
+  align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
   max-width: 100%;
 }
-.v-select--chips .v-select__selection, .v-select--selection-slot .v-select__selection {
+.v-select .v-select__selection {
   margin-top: var(--v-input-chips-margin-top);
   margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-select--chips .v-select__selection:first-child, .v-select--selection-slot .v-select__selection:first-child {
+.v-select .v-select__selection:first-child {
   margin-inline-start: 0;
 }
 .v-select--selected .v-field .v-field__input > input {
@@ -22014,6 +22035,8 @@ html.v-overlay-scroll-blocked {
   flex: 1;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
   min-width: 0;
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
 }
 .v-text-field input:focus, .v-text-field input:active {
   outline: none;
@@ -22786,6 +22809,36 @@ html.v-overlay-scroll-blocked {
 }
 .v-color-picker-canvas:hover .v-color-picker-canvas__dot {
   will-change: transform;
+}.v-color-picker-edit {
+  display: flex;
+}
+
+.v-color-picker-edit__input {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+}
+.v-color-picker-edit__input:not(:last-child).v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
+  margin-right: 8px;
+}
+.v-color-picker-edit__input:not(:last-child).v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
+  margin-left: 8px;
+}
+.v-color-picker-edit__input input {
+  border-radius: 4px;
+  margin-bottom: 8px;
+  min-width: 0;
+  outline: none;
+  text-align: center;
+  width: 100%;
+  height: 32px;
+  background: rgba(var(--v-theme-surface-variant), 0.2);
+  color: rgba(var(--v-theme-on-surface));
+}
+.v-color-picker-edit__input span {
+  font-size: 0.75rem;
 }.v-color-picker-preview__alpha .v-slider-track__background {
   background-color: transparent !important;
 }
@@ -22852,36 +22905,6 @@ html.v-overlay-scroll-blocked {
   align-items: center;
   display: flex;
   margin-bottom: 24px;
-}.v-color-picker-edit {
-  display: flex;
-}
-
-.v-color-picker-edit__input {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  text-align: center;
-}
-.v-color-picker-edit__input:not(:last-child).v-locale--is-ltr, .v-locale--is-ltr .v-color-picker-edit__input:not(:last-child) {
-  margin-right: 8px;
-}
-.v-color-picker-edit__input:not(:last-child).v-locale--is-rtl, .v-locale--is-rtl .v-color-picker-edit__input:not(:last-child) {
-  margin-left: 8px;
-}
-.v-color-picker-edit__input input {
-  border-radius: 4px;
-  margin-bottom: 8px;
-  min-width: 0;
-  outline: none;
-  text-align: center;
-  width: 100%;
-  height: 32px;
-  background: rgba(var(--v-theme-surface-variant), 0.2);
-  color: rgba(var(--v-theme-on-surface));
-}
-.v-color-picker-edit__input span {
-  font-size: 0.75rem;
 }.v-color-picker-swatches {
   overflow-y: auto;
 }

package/dist/vuetify.d.ts

@@ -60012,13 +60012,13 @@ declare module '@vue/runtime-core' {
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
+    VCarousel: typeof import('vuetify/components')['VCarousel']
+    VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     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']
-    VCarousel: typeof import('vuetify/components')['VCarousel']
-    VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
@@ -60069,12 +60069,13 @@ declare module '@vue/runtime-core' {
     VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
     VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSlider: typeof import('vuetify/components')['VSlider']
-    VSwitch: typeof import('vuetify/components')['VSwitch']
     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']
     VTable: typeof import('vuetify/components')['VTable']
+    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
@@ -60086,11 +60087,11 @@ declare module '@vue/runtime-core' {
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
     VForm: typeof import('vuetify/components')['VForm']
-    VHover: typeof import('vuetify/components')['VHover']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
+    VHover: typeof import('vuetify/components')['VHover']
     VLayout: typeof import('vuetify/components')['VLayout']
     VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
     VLazy: typeof import('vuetify/components')['VLazy']
@@ -60119,7 +60120,6 @@ declare module '@vue/runtime-core' {
     VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
     VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
     VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VBottomSheet: typeof import('vuetify/labs/components')['VBottomSheet']
     VDataTable: typeof import('vuetify/labs/components')['VDataTable']
     VDataTableFooter: typeof import('vuetify/labs/components')['VDataTableFooter']

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4
+* Vuetify v3.3.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1286,6 +1286,7 @@ function injectSelf(key) {
     // TS doesn't allow symbol as index type
     return provides[key];
   }
+  return undefined;
 }
 
 function isFixedPosition(el) {
@@ -3636,16 +3637,18 @@ const VAppBar = genericComponent()({
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
-    watchEffect(() => {
-      if (scrollBehavior.value.hide) {
-        if (scrollBehavior.value.inverted) {
-          isActive.value = currentScroll.value > scrollThreshold.value;
+    useToggleScope(computed(() => !!props.scrollBehavior), () => {
+      watchEffect(() => {
+        if (scrollBehavior.value.hide) {
+          if (scrollBehavior.value.inverted) {
+            isActive.value = currentScroll.value > scrollThreshold.value;
+          } else {
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+          }
         } else {
-          isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+          isActive.value = true;
         }
-      } else {
-        isActive.value = true;
-      }
+      });
     });
     const {
       ssrBootStyles
@@ -6277,12 +6280,12 @@ function useValidation(props) {
       const handler = typeof rule === 'function' ? rule : () => rule;
       const result = await handler(validationModel.value);
       if (result === true) continue;
-      if (typeof result !== 'string') {
+      if (result !== false && typeof result !== 'string') {
         // eslint-disable-next-line no-console
         console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
         continue;
       }
-      results.push(result);
+      results.push(result || '');
     }
     internalErrorMessages.value = results;
     isValidating.value = false;
@@ -9417,7 +9420,7 @@ const makeVOverlayProps = propsFactory({
   modelValue: Boolean,
   persistent: Boolean,
   scrim: {
-    type: [String, Boolean],
+    type: [Boolean, String],
     default: true
   },
   zIndex: {
@@ -10351,12 +10354,10 @@ const VTextField = genericComponent()({
               }]]);
               return createVNode(Fragment, null, [props.prefix && createVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [props.prefix]), slots.default ? createVNode("div", {
+              }, [props.prefix]), createVNode("div", {
                 "class": fieldClass,
                 "data-no-activator": ""
-              }, [slots.default(), inputNode]) : cloneVNode(inputNode, {
-                class: fieldClass
-              }), props.suffix && createVNode("span", {
+              }, [slots.default ? createVNode(Fragment, null, [slots.default(), inputNode]) : cloneVNode(inputNode)]), props.suffix && createVNode("span", {
                 "class": "v-text-field__suffix"
               }, [props.suffix])]);
             }
@@ -11592,20 +11593,21 @@ const VBreadcrumbsItem = genericComponent()({
       textColorStyles
     } = useTextColor(color);
     useRender(() => {
-      const Tag = link.isLink.value ? 'a' : props.tag;
-      return createVNode(Tag, {
+      return createVNode(props.tag, {
         "class": ['v-breadcrumbs-item', {
           'v-breadcrumbs-item--active': isActive.value,
           'v-breadcrumbs-item--disabled': props.disabled,
-          'v-breadcrumbs-item--link': link.isLink.value,
           [`${props.activeClass}`]: isActive.value && props.activeClass
         }, textColorClasses.value, props.class],
         "style": [textColorStyles.value, props.style],
-        "href": link.href.value,
-        "aria-current": isActive.value ? 'page' : undefined,
-        "onClick": link.navigate
+        "aria-current": isActive.value ? 'page' : undefined
       }, {
-        default: () => [slots.default?.() ?? props.title]
+        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createVNode("a", {
+          "class": "v-breadcrumbs-item--link",
+          "href": link.href.value,
+          "aria-current": isActive.value ? 'page' : undefined,
+          "onClick": link.navigate
+        }, [slots.default?.() ?? props.title])]
       });
     });
     return {};
@@ -11681,7 +11683,7 @@ const VBreadcrumbs = genericComponent()({
         "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, props.style]
       }, {
-        default: () => [hasPrepend && createVNode("div", {
+        default: () => [hasPrepend && createVNode("li", {
           "key": "prepend",
           "class": "v-breadcrumbs__prepend"
         }, [!slots.prepend ? createVNode(VIcon, {
@@ -13293,6 +13295,9 @@ const VSliderThumb = genericComponent()({
       emit
     } = _ref;
     const slider = inject$1(VSliderSymbol);
+    const {
+      rtlClasses
+    } = useRtl();
     if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider');
     const {
       thumbColor,
@@ -13360,7 +13365,7 @@ const VSliderThumb = genericComponent()({
         "class": ['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }, props.class],
+        }, props.class, rtlClasses.value],
         "style": [{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
@@ -15343,7 +15348,9 @@ const VFooter = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
       "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined, props.style]
+      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
+        height: convertToUnit(props.height)
+      }, props.style]
     }, slots));
     return {};
   }
@@ -16306,7 +16313,7 @@ const makeVNavigationDrawerProps = propsFactory({
     default: 56
   },
   scrim: {
-    type: [String, Boolean],
+    type: [Boolean, String],
     default: true
   },
   image: String,
@@ -19100,12 +19107,14 @@ function useVirtual(props, items, offset) {
     const direction = scrollTop < lastScrollTop ? UP : DOWN;
     const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
     const buffer = Math.round(visibleItems.value / 3);
-    if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-      first.value = clamp(midPointIndex - buffer, 0, items.value.length);
-    } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-      first.value = clamp(midPointIndex - buffer, 0, items.value.length - visibleItems.value);
+    const firstIndex = midPointIndex - buffer;
+    const lastIndex = first.value + buffer * 2 - 1;
+    if (direction === UP && midPointIndex <= lastIndex) {
+      first.value = clamp(firstIndex, 0, items.value.length);
+    } else if (direction === DOWN && midPointIndex >= lastIndex) {
+      first.value = clamp(firstIndex, 0, items.value.length - visibleItems.value);
     }
-    lastScrollTop = containerRef.value.scrollTop;
+    lastScrollTop = scrollTop;
   }
   function scrollToIndex(index) {
     if (!containerRef.value) return;
@@ -20004,7 +20013,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.4";
+const version$1 = "3.3.6";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20029,7 +20038,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.4";
+const version = "3.3.6";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };