vuetify 3.3.4 → 3.3.6

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.4
+* Vuetify v3.3.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -432,6 +432,9 @@
       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
@@ -1294,6 +1297,7 @@
       // TS doesn't allow symbol as index type
       return provides[key];
     }
+    return undefined;
   }
 
   function isFixedPosition(el) {
@@ -3644,16 +3648,18 @@
         const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
         return height + extensionHeight;
       });
-      vue.watchEffect(() => {
-        if (scrollBehavior.value.hide) {
-          if (scrollBehavior.value.inverted) {
-            isActive.value = currentScroll.value > scrollThreshold.value;
+      useToggleScope(vue.computed(() => !!props.scrollBehavior), () => {
+        vue.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
@@ -6285,12 +6291,12 @@
         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;
@@ -9425,7 +9431,7 @@
     modelValue: Boolean,
     persistent: Boolean,
     scrim: {
-      type: [String, Boolean],
+      type: [Boolean, String],
       default: true
     },
     zIndex: {
@@ -10359,12 +10365,10 @@
                 }]]);
                 return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [props.prefix]), slots.default ? vue.createVNode("div", {
+                }, [props.prefix]), vue.createVNode("div", {
                   "class": fieldClass,
                   "data-no-activator": ""
-                }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
-                  class: fieldClass
-                }), props.suffix && vue.createVNode("span", {
+                }, [slots.default ? vue.createVNode(vue.Fragment, null, [slots.default(), inputNode]) : vue.cloneVNode(inputNode)]), props.suffix && vue.createVNode("span", {
                   "class": "v-text-field__suffix"
                 }, [props.suffix])]);
               }
@@ -11600,20 +11604,21 @@
         textColorStyles
       } = useTextColor(color);
       useRender(() => {
-        const Tag = link.isLink.value ? 'a' : props.tag;
-        return vue.createVNode(Tag, {
+        return vue.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 : vue.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 {};
@@ -11689,7 +11694,7 @@
           "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
           "style": [backgroundColorStyles.value, props.style]
         }, {
-          default: () => [hasPrepend && vue.createVNode("div", {
+          default: () => [hasPrepend && vue.createVNode("li", {
             "key": "prepend",
             "class": "v-breadcrumbs__prepend"
           }, [!slots.prepend ? vue.createVNode(VIcon, {
@@ -13301,6 +13306,9 @@
         emit
       } = _ref;
       const slider = vue.inject(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,
@@ -13368,7 +13376,7 @@
           "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)
@@ -15351,7 +15359,9 @@
       useRender(() => vue.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 {};
     }
@@ -16314,7 +16324,7 @@
       default: 56
     },
     scrim: {
-      type: [String, Boolean],
+      type: [Boolean, String],
       default: true
     },
     image: String,
@@ -19108,12 +19118,14 @@
       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;
@@ -19899,6 +19911,9 @@
         }
         [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);
         }
@@ -21932,7 +21947,7 @@
     },
     range: {
       default: false,
-      type: [String, Boolean],
+      type: [Boolean, String],
       validator: v => v === false || ['start', 'end'].includes(v)
     },
     ...omit(makeDateProps(), ['modelValue', 'inputMode'])
@@ -22019,11 +22034,6 @@
     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: {
@@ -22580,9 +22590,6 @@
     },
     hideActions: Boolean,
     ...makeDateProps(),
-    ...makeTransitionProps({
-      transition: 'fade'
-    }),
     ...makeVDatePickerControlsProps(),
     ...makeVDatePickerMonthProps(),
     ...makeVDatePickerYearsProps(),
@@ -22629,7 +22636,9 @@
         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');
@@ -22665,16 +22674,19 @@
             "onUpdate:displayDate": $event => displayDate.value = $event,
             "viewMode": viewMode.value,
             "onUpdate:viewMode": $event => viewMode.value = $event
-          }), null), vue.createVNode(MaybeTransition, {
-            "transition": props.transition,
-            "mode": "out-in"
+          }), null), vue.createVNode(VFadeTransition, {
+            "hideOnLeave": true
           }, {
-            default: () => [viewMode.value === 'month' ? vue.createVNode(VDatePickerMonth, vue.mergeProps(datePickerMonthProps, {
+            default: () => [viewMode.value === 'month' ? vue.createVNode(VDatePickerMonth, vue.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) : vue.createVNode(VDatePickerYears, vue.mergeProps(datePickerYearsProps, {
+            }), null) : vue.createVNode(VDatePickerYears, vue.mergeProps({
+              "key": "date-picker-years"
+            }, datePickerYearsProps, {
               "displayDate": displayDate.value,
               "onUpdate:displayDate": $event => displayDate.value = $event,
               "viewMode": viewMode.value,
@@ -22747,7 +22759,7 @@
       rootMargin: String
     },
     emits: {
-      intersect: side => true
+      intersect: (side, isIntersecting) => true
     },
     setup(props, _ref) {
       let {
@@ -22761,7 +22773,7 @@
         rootMargin: props.rootMargin
       } : undefined);
       vue.watch(isIntersecting, async val => {
-        if (val) emit('intersect', props.side);
+        emit('intersect', props.side, val);
       });
       useRender(() => vue.createVNode("div", {
         "class": "v-infinite-scroll-intersect",
@@ -22785,6 +22797,7 @@
       const startStatus = vue.ref('ok');
       const endStatus = vue.ref('ok');
       const margin = vue.computed(() => convertToUnit(props.margin));
+      const isIntersecting = vue.ref(false);
       function setScrollAmount(amount) {
         if (!rootEl.value) return;
         const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
@@ -22824,7 +22837,14 @@
         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();
@@ -22832,9 +22852,21 @@
         function done(status) {
           setStatus(side, status);
           vue.nextTick(() => {
+            if (status === 'empty' || status === 'error') return;
             if (status === 'ok' && side === 'start') {
               setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
             }
+            if (props.mode !== 'manual') {
+              vue.nextTick(() => {
+                window.requestAnimationFrame(() => {
+                  window.requestAnimationFrame(() => {
+                    window.requestAnimationFrame(() => {
+                      intersecting(side);
+                    });
+                  });
+                });
+              });
+            }
           });
         }
         emit('load', {
@@ -22847,7 +22879,7 @@
       } = 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: {
@@ -23419,7 +23451,7 @@
       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
@@ -23433,7 +23465,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.4";
+  const version = "3.3.6";
 
   /* eslint-disable local-rules/sort-imports */