vuetify 3.2.0 → 3.2.2

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.2.0
+* Vuetify v3.2.2
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, onScopeDispose, effectScope, shallowRef, inject as inject$1, unref, provide, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, onScopeDispose, effectScope, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -1012,7 +1012,7 @@ function provideDefaults(defaults, options) {
 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();
@@ -1056,6 +1056,16 @@ function useDefaults() {
     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
 
@@ -1083,7 +1093,7 @@ function defineComponent(options) {
       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;
@@ -3326,14 +3336,13 @@ const makeScrollProps = propsFactory({
     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;
@@ -3343,8 +3352,16 @@ function useScroll(props) {
   const currentThreshold = ref(0);
   const isScrollActive = ref(false);
   const isScrollingUp = ref(false);
-  const computedScrollThreshold = computed(() => {
-    return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+  const scrollThreshold = computed(() => {
+    return Number(props.scrollThreshold);
+  });
+
+  /**
+   * 1: at top
+   * 0: at threshold
+   */
+  const scrollRatio = computed(() => {
+    return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
   });
   const onScroll = () => {
     const targetEl = target.value;
@@ -3352,7 +3369,7 @@ function useScroll(props) {
     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);
   };
   watch(isScrollingUp, () => {
     savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3380,15 +3397,6 @@ function useScroll(props) {
   onBeforeUnmount(() => {
     target.value?.removeEventListener('scroll', onScroll);
   });
-  thresholdMetCallback && 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
@@ -3396,10 +3404,11 @@ function useScroll(props) {
     immediate: true
   });
   return {
-    computedScrollThreshold,
+    scrollThreshold,
     currentScroll,
     currentThreshold,
     isScrollActive,
+    scrollRatio,
     // required only for testing
     // probably can be removed
     // later (2 chars chlng)
@@ -3482,15 +3491,14 @@ const VAppBar = genericComponent()({
     });
     const {
       currentScroll,
-      currentThreshold,
-      computedScrollThreshold,
-      isScrollingUp
+      scrollThreshold,
+      isScrollingUp,
+      scrollRatio
     } = useScroll(props, {
       canScroll
     });
-    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
-    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
-    const scrollRatio = computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
       if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
@@ -3499,15 +3507,12 @@ const VAppBar = genericComponent()({
       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;
       }
@@ -4083,7 +4088,7 @@ const useIcon = props => {
   const icons = inject$1(IconSymbol);
   if (!icons) throw new Error('Missing Vuetify Icons provide!');
   const iconData = computed(() => {
-    const iconAlias = isRef(props) ? props.value : props.icon;
+    const iconAlias = unref(props);
     if (!iconAlias) return {
       component: VComponentIcon
     };
@@ -4150,8 +4155,6 @@ function useSize(props) {
   });
 }
 
-// Types
-
 const makeVIconProps = propsFactory({
   color: String,
   start: Boolean,
@@ -4172,20 +4175,13 @@ const VIcon = genericComponent()({
       attrs,
       slots
     } = _ref;
-    let slotIcon;
-    if (slots.default) {
-      slotIcon = computed(() => {
-        const slot = slots.default?.();
-        if (!slot) return;
-        return slot.filter(node => node.type === Text && node.children && typeof node.children === 'string')[0]?.children;
-      });
-    }
+    const slotIcon = ref();
     const {
       themeClasses
     } = provideTheme(props);
     const {
       iconData
-    } = useIcon(slotIcon || props);
+    } = useIcon(computed(() => slotIcon.value || props.icon));
     const {
       sizeClasses
     } = useSize(props);
@@ -4193,24 +4189,30 @@ const VIcon = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(toRef(props, 'color'));
-    useRender(() => 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 === Text && node.children && typeof node.children === 'string')[0]?.children;
+      }
+      return 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 {};
   }
 });
@@ -5047,7 +5049,7 @@ const makeVBtnProps = propsFactory({
   ...makeVariantProps({
     variant: 'elevated'
   })
-}, 'VBtn');
+}, 'v-btn');
 const VBtn = genericComponent()({
   name: 'VBtn',
   directives: {
@@ -5117,6 +5119,11 @@ const VBtn = genericComponent()({
       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;
@@ -5139,11 +5146,7 @@ const VBtn = genericComponent()({
         "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 && createVNode("span", {
@@ -5209,22 +5212,17 @@ const VBtn = genericComponent()({
 
 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(() => createVNode(VBtn, {
-      "class": ['v-app-bar-nav-icon', props.class],
-      "icon": props.icon,
-      "style": props.style
-    }, slots));
+    useRender(() => createVNode(VBtn, mergeProps(props, {
+      "class": ['v-app-bar-nav-icon']
+    }), slots));
     return {};
   }
 });
@@ -6427,7 +6425,7 @@ const VTextField = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
-    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -6863,7 +6861,6 @@ const VCheckboxBtn = genericComponent()({
       "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
@@ -10362,11 +10359,13 @@ const VSelect = genericComponent()({
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 }
               });
             }), slots['append-item']?.()]
@@ -10379,6 +10378,10 @@ const VSelect = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -10722,6 +10725,7 @@ const VAutocomplete = genericComponent()({
         isPristine.value = true;
         nextTick(() => isSelecting.value = false);
       } else {
+        if (!props.multiple && !search.value) model.value = [];
         menu.value = false;
         search.value = '';
       }
@@ -10801,11 +10805,13 @@ const VAutocomplete = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10820,6 +10826,10 @@ const VAutocomplete = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -14246,11 +14256,13 @@ const VCombobox = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14265,6 +14277,10 @@ const VCombobox = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -14728,6 +14744,7 @@ const VFileInput = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
+    const isActive = computed(() => isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -14796,7 +14813,7 @@ const VFileInput = genericComponent()({
             "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,
@@ -15962,7 +15979,6 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -15992,12 +16008,6 @@ const VNavigationDrawer = genericComponent()({
         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({
@@ -17961,7 +17971,7 @@ const VTextarea = genericComponent()({
     const vFieldRef = ref();
     const controlHeight = ref('');
     const textareaRef = ref();
-    const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
+    const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus();
@@ -19417,7 +19427,7 @@ function createVuetify$1() {
     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
@@ -19437,7 +19447,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.2.0";
+const version = "3.2.2";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };