vuetify 3.2.1 → 3.2.2

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.1
+* Vuetify v3.2.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3344,14 +3344,13 @@
       type: String
     },
     scrollThreshold: {
-      type: [String, Number]
+      type: [String, Number],
+      default: 300
     }
   }, 'scroll');
   function useScroll(props) {
     let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const {
-      thresholdMetCallback,
-      scrollThreshold,
       canScroll
     } = args;
     let previousScroll = 0;
@@ -3361,8 +3360,16 @@
     const currentThreshold = vue.ref(0);
     const isScrollActive = vue.ref(false);
     const isScrollingUp = vue.ref(false);
-    const computedScrollThreshold = vue.computed(() => {
-      return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+    const scrollThreshold = vue.computed(() => {
+      return Number(props.scrollThreshold);
+    });
+
+    /**
+     * 1: at top
+     * 0: at threshold
+     */
+    const scrollRatio = vue.computed(() => {
+      return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
     });
     const onScroll = () => {
       const targetEl = target.value;
@@ -3370,7 +3377,7 @@
       previousScroll = currentScroll.value;
       currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
       isScrollingUp.value = currentScroll.value < previousScroll;
-      currentThreshold.value = Math.abs(currentScroll.value - computedScrollThreshold.value);
+      currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
     };
     vue.watch(isScrollingUp, () => {
       savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3398,15 +3405,6 @@
     vue.onBeforeUnmount(() => {
       target.value?.removeEventListener('scroll', onScroll);
     });
-    thresholdMetCallback && vue.watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
-      thresholdMet && thresholdMetCallback({
-        currentThreshold: currentThreshold.value,
-        isScrollingUp: isScrollingUp.value,
-        savedScroll
-      });
-    }, {
-      immediate: true
-    });
 
     // Do we need this? If yes - seems that
     // there's no need to expose onScroll
@@ -3414,10 +3412,11 @@
       immediate: true
     });
     return {
-      computedScrollThreshold,
+      scrollThreshold,
       currentScroll,
       currentThreshold,
       isScrollActive,
+      scrollRatio,
       // required only for testing
       // probably can be removed
       // later (2 chars chlng)
@@ -3500,15 +3499,14 @@
       });
       const {
         currentScroll,
-        currentThreshold,
-        computedScrollThreshold,
-        isScrollingUp
+        scrollThreshold,
+        isScrollingUp,
+        scrollRatio
       } = useScroll(props, {
         canScroll
       });
-      const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
-      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
-      const scrollRatio = vue.computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+      const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.computed(() => {
         if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
@@ -3517,15 +3515,12 @@
         return height + extensionHeight;
       });
       function setActive() {
-        const val = currentScroll.value;
         if (scrollBehavior.value.hide) {
           if (scrollBehavior.value.inverted) {
-            isActive.value = val > computedScrollThreshold.value;
+            isActive.value = currentScroll.value > scrollThreshold.value;
           } else {
-            isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
           }
-        } else if (scrollBehavior.value.inverted) {
-          isActive.value = currentScroll.value === 0;
         } else {
           isActive.value = true;
         }
@@ -4101,7 +4096,7 @@
     const icons = vue.inject(IconSymbol);
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
     const iconData = vue.computed(() => {
-      const iconAlias = vue.isRef(props) ? props.value : props.icon;
+      const iconAlias = vue.unref(props);
       if (!iconAlias) return {
         component: VComponentIcon
       };
@@ -4168,8 +4163,6 @@
     });
   }
 
-  // Types
-
   const makeVIconProps = propsFactory({
     color: String,
     start: Boolean,
@@ -4190,20 +4183,13 @@
         attrs,
         slots
       } = _ref;
-      let slotIcon;
-      if (slots.default) {
-        slotIcon = vue.computed(() => {
-          const slot = slots.default?.();
-          if (!slot) return;
-          return slot.filter(node => node.type === vue.Text && node.children && typeof node.children === 'string')[0]?.children;
-        });
-      }
+      const slotIcon = vue.ref();
       const {
         themeClasses
       } = provideTheme(props);
       const {
         iconData
-      } = useIcon(slotIcon || props);
+      } = useIcon(vue.computed(() => slotIcon.value || props.icon));
       const {
         sizeClasses
       } = useSize(props);
@@ -4211,24 +4197,30 @@
         textColorClasses,
         textColorStyles
       } = useTextColor(vue.toRef(props, 'color'));
-      useRender(() => vue.createVNode(iconData.value.component, {
-        "tag": props.tag,
-        "icon": iconData.value.icon,
-        "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
-          'v-icon--clickable': !!attrs.onClick,
-          'v-icon--start': props.start,
-          'v-icon--end': props.end
-        }, props.class],
-        "style": [!sizeClasses.value ? {
-          fontSize: convertToUnit(props.size),
-          height: convertToUnit(props.size),
-          width: convertToUnit(props.size)
-        } : undefined, textColorStyles.value, props.style],
-        "role": attrs.onClick ? 'button' : undefined,
-        "aria-hidden": !attrs.onClick
-      }, {
-        default: () => [slots.default?.()]
-      }));
+      useRender(() => {
+        const slotValue = slots.default?.();
+        if (slotValue) {
+          slotIcon.value = slotValue.filter(node => node.type === vue.Text && node.children && typeof node.children === 'string')[0]?.children;
+        }
+        return vue.createVNode(iconData.value.component, {
+          "tag": props.tag,
+          "icon": iconData.value.icon,
+          "class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
+            'v-icon--clickable': !!attrs.onClick,
+            'v-icon--start': props.start,
+            'v-icon--end': props.end
+          }, props.class],
+          "style": [!sizeClasses.value ? {
+            fontSize: convertToUnit(props.size),
+            height: convertToUnit(props.size),
+            width: convertToUnit(props.size)
+          } : undefined, textColorStyles.value, props.style],
+          "role": attrs.onClick ? 'button' : undefined,
+          "aria-hidden": !attrs.onClick
+        }, {
+          default: () => [slotValue]
+        });
+      });
       return {};
     }
   });
@@ -5065,7 +5057,7 @@
     ...makeVariantProps({
       variant: 'elevated'
     })
-  }, 'VBtn');
+  }, 'v-btn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
@@ -5135,6 +5127,11 @@
         if (props.value === undefined) return undefined;
         return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
       });
+      function onClick(e) {
+        if (isDisabled.value) return;
+        link.navigate?.(e);
+        group?.toggle();
+      }
       useSelectLink(link, group?.select);
       useRender(() => {
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -5157,11 +5154,7 @@
           "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
           "disabled": isDisabled.value || undefined,
           "href": link.href.value,
-          "onClick": e => {
-            if (isDisabled.value) return;
-            link.navigate?.(e);
-            group?.toggle();
-          },
+          "onClick": onClick,
           "value": valueAttr.value
         }, {
           default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
@@ -5227,22 +5220,17 @@
 
   const VAppBarNavIcon = genericComponent()({
     name: 'VAppBarNavIcon',
-    props: {
-      icon: {
-        type: IconValue,
-        default: '$menu'
-      },
-      ...makeComponentProps()
-    },
+    props: makeVBtnProps({
+      icon: '$menu',
+      variant: 'text'
+    }),
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VBtn, {
-        "class": ['v-app-bar-nav-icon', props.class],
-        "icon": props.icon,
-        "style": props.style
-      }, slots));
+      useRender(() => vue.createVNode(VBtn, vue.mergeProps(props, {
+        "class": ['v-app-bar-nav-icon']
+      }), slots));
       return {};
     }
   });
@@ -6445,7 +6433,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
-      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -6881,7 +6869,6 @@
         "class": ['v-checkbox-btn', props.class],
         "style": props.style,
         "type": "checkbox",
-        "inline": true,
         "falseIcon": falseIcon.value,
         "trueIcon": trueIcon.value,
         "aria-checked": props.indeterminate ? 'mixed' : undefined
@@ -10380,11 +10367,13 @@
                     let {
                       isSelected
                     } = _ref2;
-                    return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
-                    }, null) : undefined;
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
                   }
                 });
               }), slots['append-item']?.()]
@@ -10397,6 +10386,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -10740,6 +10733,7 @@
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
+          if (!props.multiple && !search.value) model.value = [];
           menu.value = false;
           search.value = '';
         }
@@ -10819,11 +10813,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10838,6 +10834,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14264,11 +14264,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14283,6 +14285,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14746,6 +14752,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
+      const isActive = vue.computed(() => isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -14814,7 +14821,7 @@
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
               "id": id.value,
-              "active": isDirty.value || isFocused.value,
+              "active": isActive.value || isDirty.value,
               "dirty": isDirty.value,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -15980,7 +15987,6 @@
       });
       const {
         layoutItemStyles,
-        layoutRect,
         layoutItemScrimStyles
       } = useLayoutItem({
         id: props.name,
@@ -16010,12 +16016,6 @@
           opacity: dragProgress.value * 0.2,
           transition: 'none'
         } : undefined),
-        ...(layoutRect.value ? {
-          left: convertToUnit(layoutRect.value.left),
-          right: convertToUnit(layoutRect.value.right),
-          top: convertToUnit(layoutRect.value.top),
-          bottom: convertToUnit(layoutRect.value.bottom)
-        } : undefined),
         ...layoutItemScrimStyles.value
       }));
       provideDefaults({
@@ -17979,7 +17979,7 @@
       const vFieldRef = vue.ref();
       const controlHeight = vue.ref('');
       const textareaRef = vue.ref();
-      const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
+      const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (textareaRef.value !== document.activeElement) {
           textareaRef.value?.focus();
@@ -19670,6 +19670,11 @@
       if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
+    vue.watchEffect(() => {
+      if (page.value > pageCount.value) {
+        page.value = pageCount.value;
+      }
+    });
     function setItemsPerPage(value) {
       itemsPerPage.value = value;
       page.value = 1;
@@ -21545,7 +21550,7 @@
       date
     };
   }
-  const version$1 = "3.2.1";
+  const version$1 = "3.2.2";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21557,7 +21562,7 @@
     }
   }
 
-  const version = "3.2.1";
+  const version = "3.2.2";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};