@vuetify/nightly 3.2.2-master-20230501.0 → 3.2.2-master-20230502.0

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.2-master-20230501.0
+* Vuetify v3.2.2-master-20230502.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3340,14 +3340,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;
@@ -3357,8 +3356,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;
@@ -3366,7 +3373,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;
@@ -3394,15 +3401,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
@@ -3410,10 +3408,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)
@@ -3496,15 +3495,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;
@@ -3513,15 +3511,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;
       }
@@ -5061,7 +5056,7 @@ const makeVBtnProps = propsFactory({
   ...makeVariantProps({
     variant: 'elevated'
   })
-}, 'VBtn');
+}, 'v-btn');
 const VBtn = genericComponent()({
   name: 'VBtn',
   directives: {
@@ -5131,6 +5126,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;
@@ -5153,11 +5153,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", {
@@ -5223,22 +5219,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 {};
   }
 });
@@ -6441,7 +6432,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();
@@ -10375,11 +10366,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']?.()]
@@ -10818,11 +10811,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);
@@ -14267,11 +14262,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);
@@ -14753,6 +14750,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();
@@ -14821,7 +14819,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,
@@ -15987,7 +15985,6 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -16017,12 +16014,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({
@@ -17986,7 +17977,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();
@@ -21557,7 +21548,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.2.2-master-20230501.0";
+const version$1 = "3.2.2-master-20230502.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -21569,7 +21560,7 @@ function inject(key) {
   }
 }
 
-const version = "3.2.2-master-20230501.0";
+const version = "3.2.2-master-20230502.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};