vuetify 3.3.4 → 3.3.6

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4
+* Vuetify v3.3.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -428,6 +428,9 @@ function focusChild(el, location) {
     if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
   }
 }
+function isEmpty(val) {
+  return val === null || val === undefined || typeof val === 'string' && val.trim() === '';
+}
 function noop() {}
 
 // Utilities
@@ -1290,6 +1293,7 @@ function injectSelf(key) {
     // TS doesn't allow symbol as index type
     return provides[key];
   }
+  return undefined;
 }
 
 function isFixedPosition(el) {
@@ -3640,16 +3644,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
@@ -6281,12 +6287,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;
@@ -9421,7 +9427,7 @@ const makeVOverlayProps = propsFactory({
   modelValue: Boolean,
   persistent: Boolean,
   scrim: {
-    type: [String, Boolean],
+    type: [Boolean, String],
     default: true
   },
   zIndex: {
@@ -10355,12 +10361,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])]);
             }
@@ -11596,20 +11600,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 {};
@@ -11685,7 +11690,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, {
@@ -13297,6 +13302,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,
@@ -13364,7 +13372,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)
@@ -15347,7 +15355,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 {};
   }
@@ -16310,7 +16320,7 @@ const makeVNavigationDrawerProps = propsFactory({
     default: 56
   },
   scrim: {
-    type: [String, Boolean],
+    type: [Boolean, String],
     default: true
   },
   image: String,
@@ -19104,12 +19114,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;
@@ -19895,6 +19907,9 @@ function sortItems(items, sortByItems, locale, customSorters) {
       }
       [sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s);
       if (sortA !== sortB) {
+        if (isEmpty(sortA) && isEmpty(sortB)) return 0;
+        if (isEmpty(sortA)) return -1;
+        if (isEmpty(sortB)) return 1;
         if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
         return stringCollator.compare(sortA, sortB);
       }
@@ -21928,7 +21943,7 @@ const makeVDatePickerControlsProps = propsFactory({
   },
   range: {
     default: false,
-    type: [String, Boolean],
+    type: [Boolean, String],
     validator: v => v === false || ['start', 'end'].includes(v)
   },
   ...omit(makeDateProps(), ['modelValue', 'inputMode'])
@@ -22015,11 +22030,6 @@ const makeVDatePickerMonthProps = propsFactory({
   showAdjacentMonths: Boolean,
   hideWeekdays: Boolean,
   showWeek: Boolean,
-  range: {
-    default: false,
-    type: [String, Boolean],
-    validator: v => typeof v === 'boolean' || ['start', 'end'].includes(v)
-  },
   hoverDate: null,
   multiple: Boolean,
   side: {
@@ -22576,9 +22586,6 @@ const makeVDatePickerProps = propsFactory({
   },
   hideActions: Boolean,
   ...makeDateProps(),
-  ...makeTransitionProps({
-    transition: 'fade'
-  }),
   ...makeVDatePickerControlsProps(),
   ...makeVDatePickerMonthProps(),
   ...makeVDatePickerYearsProps(),
@@ -22625,7 +22632,9 @@ const VDatePicker = genericComponent()({
       if (props.hideActions) {
         emit('update:modelValue', val);
       }
-      isReversing.value = adapter.isBefore(val[0], oldVal[0]);
+      if (val[0] && oldVal[0]) {
+        isReversing.value = adapter.isBefore(val[0], oldVal[0]);
+      }
     });
     function onClickCancel() {
       emit('click:cancel');
@@ -22661,16 +22670,19 @@ const VDatePicker = genericComponent()({
           "onUpdate:displayDate": $event => displayDate.value = $event,
           "viewMode": viewMode.value,
           "onUpdate:viewMode": $event => viewMode.value = $event
-        }), null), createVNode(MaybeTransition, {
-          "transition": props.transition,
-          "mode": "out-in"
+        }), null), createVNode(VFadeTransition, {
+          "hideOnLeave": true
         }, {
-          default: () => [viewMode.value === 'month' ? createVNode(VDatePickerMonth, mergeProps(datePickerMonthProps, {
+          default: () => [viewMode.value === 'month' ? createVNode(VDatePickerMonth, mergeProps({
+            "key": "date-picker-month"
+          }, datePickerMonthProps, {
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "displayDate": displayDate.value,
             "onUpdate:displayDate": $event => displayDate.value = $event
-          }), null) : createVNode(VDatePickerYears, mergeProps(datePickerYearsProps, {
+          }), null) : createVNode(VDatePickerYears, mergeProps({
+            "key": "date-picker-years"
+          }, datePickerYearsProps, {
             "displayDate": displayDate.value,
             "onUpdate:displayDate": $event => displayDate.value = $event,
             "viewMode": viewMode.value,
@@ -22743,7 +22755,7 @@ const VInfiniteScrollIntersect = defineComponent({
     rootMargin: String
   },
   emits: {
-    intersect: side => true
+    intersect: (side, isIntersecting) => true
   },
   setup(props, _ref) {
     let {
@@ -22757,7 +22769,7 @@ const VInfiniteScrollIntersect = defineComponent({
       rootMargin: props.rootMargin
     } : undefined);
     watch(isIntersecting, async val => {
-      if (val) emit('intersect', props.side);
+      emit('intersect', props.side, val);
     });
     useRender(() => createVNode("div", {
       "class": "v-infinite-scroll-intersect",
@@ -22781,6 +22793,7 @@ const VInfiniteScroll = genericComponent()({
     const startStatus = ref('ok');
     const endStatus = ref('ok');
     const margin = computed(() => convertToUnit(props.margin));
+    const isIntersecting = ref(false);
     function setScrollAmount(amount) {
       if (!rootEl.value) return;
       const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
@@ -22820,7 +22833,14 @@ const VInfiniteScroll = genericComponent()({
       return side === 'start' ? startStatus.value : endStatus.value;
     }
     let previousScrollSize = 0;
-    function handleIntersect(side) {
+    function handleIntersect(side, _isIntersecting) {
+      isIntersecting.value = _isIntersecting;
+      if (isIntersecting.value) {
+        intersecting(side);
+      }
+    }
+    function intersecting(side) {
+      if (props.mode !== 'manual' && !isIntersecting.value) return;
       const status = getStatus(side);
       if (!rootEl.value || status === 'loading') return;
       previousScrollSize = getScrollSize();
@@ -22828,9 +22848,21 @@ const VInfiniteScroll = genericComponent()({
       function done(status) {
         setStatus(side, status);
         nextTick(() => {
+          if (status === 'empty' || status === 'error') return;
           if (status === 'ok' && side === 'start') {
             setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
           }
+          if (props.mode !== 'manual') {
+            nextTick(() => {
+              window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                  window.requestAnimationFrame(() => {
+                    intersecting(side);
+                  });
+                });
+              });
+            });
+          }
         });
       }
       emit('load', {
@@ -22843,7 +22875,7 @@ const VInfiniteScroll = genericComponent()({
     } = useLocale();
     function renderSide(side, status) {
       if (props.side !== side && props.side !== 'both') return;
-      const onClick = () => handleIntersect(side);
+      const onClick = () => intersecting(side);
       const slotProps = {
         side,
         props: {
@@ -23415,7 +23447,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
@@ -23429,7 +23461,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.4";
+const version = "3.3.6";
 
 /* eslint-disable local-rules/sort-imports */