@vuetify/nightly 3.6.8-master.2024-06-07 → 3.6.9-dev.2024-06-20

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.8-master.2024-06-07
+* Vuetify v3.6.9-dev.2024-06-20
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3688,6 +3688,7 @@ const Intersect = {
 // not intended for public use, this is passed in by vuetify-loader
 
 const makeVImgProps = propsFactory({
+  absolute: Boolean,
   alt: String,
   cover: Boolean,
   color: String,
@@ -3944,6 +3945,7 @@ const VImg = genericComponent()({
       const responsiveProps = VResponsive.filterProps(props);
       return withDirectives(createVNode(VResponsive, mergeProps({
         "class": ['v-img', {
+          'v-img--absolute': props.absolute,
           'v-img--booting': !isBooted.value
         }, backgroundColorClasses.value, roundedClasses.value, props.class],
         "style": [{
@@ -4196,6 +4198,7 @@ function useScroll(props) {
     canScroll
   } = args;
   let previousScroll = 0;
+  let previousScrollHeight = 0;
   const target = ref(null);
   const currentScroll = shallowRef(0);
   const savedScroll = shallowRef(0);
@@ -4218,6 +4221,11 @@ function useScroll(props) {
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
     currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight;
+    if (previousScrollHeight !== currentScrollHeight) {
+      previousScrollHeight = currentScrollHeight;
+      return;
+    }
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
   };
@@ -5737,6 +5745,7 @@ const makeVBtnProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  activeColor: String,
   baseColor: String,
   symbol: {
     type: null,
@@ -5828,10 +5837,11 @@ const VBtn = genericComponent()({
       }
       return group?.isSelected.value;
     });
+    const color = computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
     const variantProps = computed(() => {
       const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
       return {
-        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        color: showColor ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       };
     });
@@ -6172,6 +6182,7 @@ const makeVAvatarProps = propsFactory({
   icon: IconValue,
   image: String,
   text: String,
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -6192,6 +6203,9 @@ const VAvatar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
@@ -6211,7 +6225,7 @@ const VAvatar = genericComponent()({
       "class": ['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
       "style": [colorStyles.value, sizeStyles.value, props.style]
     }, {
       default: () => [!slots.default ? props.image ? createVNode(VImg, {
@@ -6911,12 +6925,14 @@ function useValidation(props) {
   const validateOn = computed(() => {
     let value = (props.validateOn ?? form?.validateOn.value) || 'input';
     if (value === 'lazy') value = 'input lazy';
+    if (value === 'eager') value = 'input eager';
     const set = new Set(value?.split(' ') ?? []);
     return {
-      blur: set.has('blur') || set.has('input'),
       input: set.has('input'),
-      submit: set.has('submit'),
-      lazy: set.has('lazy')
+      blur: set.has('blur') || set.has('input') || set.has('invalid-input'),
+      invalidInput: set.has('invalid-input'),
+      lazy: set.has('lazy'),
+      eager: set.has('eager')
     };
   });
   const isValid = computed(() => {
@@ -6953,11 +6969,11 @@ function useValidation(props) {
   });
   onMounted(async () => {
     if (!validateOn.value.lazy) {
-      await validate(true);
+      await validate(!validateOn.value.eager);
     }
     form?.update(uid.value, isValid.value, errorMessages.value);
   });
-  useToggleScope(() => validateOn.value.input, () => {
+  useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
     watch(validationModel, () => {
       if (validationModel.value != null) {
         validate();
@@ -6985,7 +7001,7 @@ function useValidation(props) {
   async function resetValidation() {
     isPristine.value = true;
     if (!validateOn.value.lazy) {
-      await validate(true);
+      await validate(!validateOn.value.eager);
     } else {
       internalErrorMessages.value = [];
     }
@@ -9617,6 +9633,7 @@ const makeVListProps = propsFactory({
   nav: Boolean,
   'onClick:open': EventProp(),
   'onClick:select': EventProp(),
+  'onUpdate:opened': EventProp(),
   ...makeNestedProps({
     selectStrategy: 'single-leaf',
     openStrategy: 'list'
@@ -11020,9 +11037,6 @@ const VOverlay = genericComponent()({
         if (!(v && props.disabled)) model.value = v;
       }
     });
-    const {
-      teleportTarget
-    } = useTeleport(computed(() => props.attach || props.contained));
     const {
       themeClasses
     } = provideTheme(props);
@@ -11055,6 +11069,10 @@ const VOverlay = genericComponent()({
       isActive,
       isTop: localTop
     });
+    const potentialShadowDomRoot = computed(() => activatorEl?.value?.getRootNode());
+    const {
+      teleportTarget
+    } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false));
     const {
       dimensionStyles
     } = useDimension(props);
@@ -11397,7 +11415,7 @@ const VMenu = genericComponent()({
     function onKeydown(e) {
       if (props.disabled) return;
       if (e.key === 'Tab' || e.key === 'Enter' && !props.closeOnContentClick) {
-        if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) return;
+        if (e.key === 'Enter' && (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement && !!e.target.closest('form'))) return;
         if (e.key === 'Enter') e.preventDefault();
         const nextElement = getNextElement(focusableChildren(overlay.value?.contentEl, false), e.shiftKey ? 'prev' : 'next', el => el.tabIndex >= 0);
         if (!nextElement) {
@@ -21125,6 +21143,7 @@ const makeVContainerProps = propsFactory({
     default: false
   },
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeTagProps()
 }, 'VContainer');
 const VContainer = genericComponent()({
@@ -21137,11 +21156,14 @@ const VContainer = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => createVNode(props.tag, {
       "class": ['v-container', {
         'v-container--fluid': props.fluid
       }, rtlClasses.value, props.class],
-      "style": props.style
+      "style": [dimensionStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -22551,7 +22573,8 @@ const makeVExpansionPanelTitleProps = propsFactory({
     default: false
   },
   readonly: Boolean,
-  ...makeComponentProps()
+  ...makeComponentProps(),
+  ...makeDimensionProps()
 }, 'VExpansionPanelTitle');
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
@@ -22569,6 +22592,9 @@ const VExpansionPanelTitle = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const slotProps = computed(() => ({
       collapseIcon: props.collapseIcon,
       disabled: expansionPanel.disabled.value,
@@ -22576,13 +22602,14 @@ const VExpansionPanelTitle = genericComponent()({
       expandIcon: props.expandIcon,
       readonly: props.readonly
     }));
+    const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
     useRender(() => withDirectives(createVNode("button", {
       "class": ['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value,
         'v-expansion-panel-title--focusable': props.focusable,
         'v-expansion-panel-title--static': props.static
       }, backgroundColorClasses.value, props.class],
-      "style": [backgroundColorStyles.value, props.style],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
@@ -22590,11 +22617,17 @@ const VExpansionPanelTitle = genericComponent()({
       "onClick": !props.readonly ? expansionPanel.toggle : undefined
     }, [createVNode("span", {
       "class": "v-expansion-panel-title__overlay"
-    }, null), slots.default?.(slotProps.value), !props.hideActions && createVNode("span", {
-      "class": "v-expansion-panel-title__icon"
-    }, [slots.actions ? slots.actions(slotProps.value) : createVNode(VIcon, {
-      "icon": expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon
-    }, null)])]), [[resolveDirective("ripple"), props.ripple]]));
+    }, null), slots.default?.(slotProps.value), !props.hideActions && createVNode(VDefaultsProvider, {
+      "defaults": {
+        VIcon: {
+          icon: icon.value
+        }
+      }
+    }, {
+      default: () => [createVNode("span", {
+        "class": "v-expansion-panel-title__icon"
+      }, [slots.actions?.(slotProps.value) ?? createVNode(VIcon, null, null)])]
+    })]), [[resolveDirective("ripple"), props.ripple]]));
     return {};
   }
 });
@@ -22661,15 +22694,26 @@ const VExpansionPanel = genericComponent()({
       }, {
         default: () => [createVNode("div", {
           "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
-        }, null), hasTitle && createVNode(VExpansionPanelTitle, mergeProps({
-          "key": "title"
-        }, expansionPanelTitleProps), {
-          default: () => [slots.title ? slots.title() : props.title]
-        }), hasText && createVNode(VExpansionPanelText, mergeProps({
-          "key": "text"
-        }, expansionPanelTextProps), {
-          default: () => [slots.text ? slots.text() : props.text]
-        }), slots.default?.()]
+        }, null), createVNode(VDefaultsProvider, {
+          "defaults": {
+            VExpansionPanelTitle: {
+              ...expansionPanelTitleProps
+            },
+            VExpansionPanelText: {
+              ...expansionPanelTextProps
+            }
+          }
+        }, {
+          default: () => [hasTitle && createVNode(VExpansionPanelTitle, {
+            "key": "title"
+          }, {
+            default: () => [slots.title ? slots.title() : props.title]
+          }), hasText && createVNode(VExpansionPanelText, {
+            "key": "text"
+          }, {
+            default: () => [slots.text ? slots.text() : props.text]
+          }), slots.default?.()]
+        })]
       });
     });
     return {
@@ -22745,15 +22789,13 @@ const VExpansionPanels = genericComponent()({
   }
 });
 
+// Types
+
 const makeVFabProps = propsFactory({
   app: Boolean,
   appear: Boolean,
   extended: Boolean,
   layout: Boolean,
-  location: {
-    type: String,
-    default: 'bottom end'
-  },
   offset: Boolean,
   modelValue: {
     type: Boolean,
@@ -22763,6 +22805,7 @@ const makeVFabProps = propsFactory({
     active: true
   }), ['location']),
   ...makeLayoutItemProps(),
+  ...makeLocationProps(),
   ...makeTransitionProps({
     transition: 'fab-transition'
   })
@@ -22789,11 +22832,11 @@ const VFab = genericComponent()({
     const hasPosition = computed(() => props.app || props.absolute);
     const position = computed(() => {
       if (!hasPosition.value) return false;
-      return props.location.split(' ').shift();
+      return props.location?.split(' ').shift() ?? 'bottom';
     });
     const orientation = computed(() => {
       if (!hasPosition.value) return false;
-      return props.location.split(' ')[1] ?? 'end';
+      return props.location?.split(' ')[1] ?? 'end';
     });
     useToggleScope(() => props.app, () => {
       const layout = useLayoutItem({
@@ -28067,7 +28110,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.8-master.2024-06-07";
+const version$1 = "3.6.9-dev.2024-06-20";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28092,7 +28135,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.8-master.2024-06-07";
+const version = "3.6.9-dev.2024-06-20";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };