vuetify 3.2.0 → 3.2.2

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0
+* Vuetify v3.2.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1016,7 +1016,7 @@
   function propIsDefined(vnode, prop) {
     return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
   }
-  function useDefaults() {
+  function internalUseDefaults() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let name = arguments.length > 1 ? arguments[1] : undefined;
     let defaults = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : injectDefaults();
@@ -1060,6 +1060,16 @@
       provideSubDefaults
     };
   }
+  function useDefaults() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 ? arguments[1] : undefined;
+    const {
+      props: _props,
+      provideSubDefaults
+    } = internalUseDefaults(props, name);
+    provideSubDefaults();
+    return _props;
+  }
 
   // Utils
 
@@ -1087,7 +1097,7 @@
         const {
           props: _props,
           provideSubDefaults
-        } = useDefaults(props, props._as ?? options.name, defaults);
+        } = internalUseDefaults(props, props._as ?? options.name, defaults);
         const setupBindings = options._setup(_props, ctx);
         provideSubDefaults();
         return setupBindings;
@@ -3330,14 +3340,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;
@@ -3347,8 +3356,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;
@@ -3356,7 +3373,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;
@@ -3384,15 +3401,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
@@ -3400,10 +3408,11 @@
       immediate: true
     });
     return {
-      computedScrollThreshold,
+      scrollThreshold,
       currentScroll,
       currentThreshold,
       isScrollActive,
+      scrollRatio,
       // required only for testing
       // probably can be removed
       // later (2 chars chlng)
@@ -3486,15 +3495,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;
@@ -3503,15 +3511,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;
         }
@@ -4087,7 +4092,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
       };
@@ -4154,8 +4159,6 @@
     });
   }
 
-  // Types
-
   const makeVIconProps = propsFactory({
     color: String,
     start: Boolean,
@@ -4176,20 +4179,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);
@@ -4197,24 +4193,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 {};
     }
   });
@@ -5051,7 +5053,7 @@
     ...makeVariantProps({
       variant: 'elevated'
     })
-  }, 'VBtn');
+  }, 'v-btn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
@@ -5121,6 +5123,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;
@@ -5143,11 +5150,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", {
@@ -5213,22 +5216,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 {};
     }
   });
@@ -6431,7 +6429,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();
@@ -6867,7 +6865,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
@@ -10366,11 +10363,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']?.()]
@@ -10383,6 +10382,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -10726,6 +10729,7 @@
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
+          if (!props.multiple && !search.value) model.value = [];
           menu.value = false;
           search.value = '';
         }
@@ -10805,11 +10809,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);
@@ -10824,6 +10830,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14250,11 +14260,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);
@@ -14269,6 +14281,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14732,6 +14748,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();
@@ -14800,7 +14817,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,
@@ -15966,7 +15983,6 @@
       });
       const {
         layoutItemStyles,
-        layoutRect,
         layoutItemScrimStyles
       } = useLayoutItem({
         id: props.name,
@@ -15996,12 +16012,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({
@@ -17965,7 +17975,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();
@@ -19421,7 +19431,7 @@
       date
     };
   }
-  const version$1 = "3.2.0";
+  const version$1 = "3.2.2";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19441,7 +19451,7 @@
       ...options
     });
   };
-  const version = "3.2.0";
+  const version = "3.2.2";
   createVuetify.version = version;
 
   exports.components = components;