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

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.8-master.2024-06-11
+* Vuetify v3.6.9-dev.2024-06-20
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3252,6 +3252,7 @@
   // not intended for public use, this is passed in by vuetify-loader
 
   const makeVImgProps = propsFactory({
+    absolute: Boolean,
     alt: String,
     cover: Boolean,
     color: String,
@@ -3508,6 +3509,7 @@
         const responsiveProps = VResponsive.filterProps(props);
         return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
           "class": ['v-img', {
+            'v-img--absolute': props.absolute,
             'v-img--booting': !isBooted.value
           }, backgroundColorClasses.value, roundedClasses.value, props.class],
           "style": [{
@@ -3760,6 +3762,7 @@
       canScroll
     } = args;
     let previousScroll = 0;
+    let previousScrollHeight = 0;
     const target = vue.ref(null);
     const currentScroll = vue.shallowRef(0);
     const savedScroll = vue.shallowRef(0);
@@ -3782,6 +3785,11 @@
       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);
     };
@@ -5508,6 +5516,7 @@
       type: Boolean,
       default: undefined
     },
+    activeColor: String,
     baseColor: String,
     symbol: {
       type: null,
@@ -5599,10 +5608,11 @@
         }
         return group?.isSelected.value;
       });
+      const color = vue.computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
       const variantProps = vue.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
         };
       });
@@ -5943,6 +5953,7 @@
     icon: IconValue,
     image: String,
     text: String,
+    ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -5963,6 +5974,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        borderClasses
+      } = useBorder(props);
       const {
         colorClasses,
         colorStyles,
@@ -5982,7 +5996,7 @@
         "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 ? vue.createVNode(VImg, {
@@ -6682,12 +6696,14 @@
     const validateOn = vue.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 = vue.computed(() => {
@@ -6724,11 +6740,11 @@
     });
     vue.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, () => {
       vue.watch(validationModel, () => {
         if (validationModel.value != null) {
           validate();
@@ -6756,7 +6772,7 @@
     async function resetValidation() {
       isPristine.value = true;
       if (!validateOn.value.lazy) {
-        await validate(true);
+        await validate(!validateOn.value.eager);
       } else {
         internalErrorMessages.value = [];
       }
@@ -9388,6 +9404,7 @@
     nav: Boolean,
     'onClick:open': EventProp(),
     'onClick:select': EventProp(),
+    'onUpdate:opened': EventProp(),
     ...makeNestedProps({
       selectStrategy: 'single-leaf',
       openStrategy: 'list'
@@ -10791,9 +10808,6 @@
           if (!(v && props.disabled)) model.value = v;
         }
       });
-      const {
-        teleportTarget
-      } = useTeleport(vue.computed(() => props.attach || props.contained));
       const {
         themeClasses
       } = provideTheme(props);
@@ -10826,6 +10840,10 @@
         isActive,
         isTop: localTop
       });
+      const potentialShadowDomRoot = vue.computed(() => activatorEl?.value?.getRootNode());
+      const {
+        teleportTarget
+      } = useTeleport(vue.computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false));
       const {
         dimensionStyles
       } = useDimension(props);
@@ -11168,7 +11186,7 @@
       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) {
@@ -20896,6 +20914,7 @@
       default: false
     },
     ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeTagProps()
   }, 'VContainer');
   const VContainer = genericComponent()({
@@ -20908,11 +20927,14 @@
       const {
         rtlClasses
       } = useRtl();
+      const {
+        dimensionStyles
+      } = useDimension(props);
       useRender(() => vue.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 {};
     }
@@ -22322,7 +22344,8 @@
       default: false
     },
     readonly: Boolean,
-    ...makeComponentProps()
+    ...makeComponentProps(),
+    ...makeDimensionProps()
   }, 'VExpansionPanelTitle');
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
@@ -22340,6 +22363,9 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const {
+        dimensionStyles
+      } = useDimension(props);
       const slotProps = vue.computed(() => ({
         collapseIcon: props.collapseIcon,
         disabled: expansionPanel.disabled.value,
@@ -22347,13 +22373,14 @@
         expandIcon: props.expandIcon,
         readonly: props.readonly
       }));
+      const icon = vue.computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
       useRender(() => vue.withDirectives(vue.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,
@@ -22361,11 +22388,17 @@
         "onClick": !props.readonly ? expansionPanel.toggle : undefined
       }, [vue.createVNode("span", {
         "class": "v-expansion-panel-title__overlay"
-      }, null), slots.default?.(slotProps.value), !props.hideActions && vue.createVNode("span", {
-        "class": "v-expansion-panel-title__icon"
-      }, [slots.actions ? slots.actions(slotProps.value) : vue.createVNode(VIcon, {
-        "icon": expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon
-      }, null)])]), [[vue.resolveDirective("ripple"), props.ripple]]));
+      }, null), slots.default?.(slotProps.value), !props.hideActions && vue.createVNode(VDefaultsProvider, {
+        "defaults": {
+          VIcon: {
+            icon: icon.value
+          }
+        }
+      }, {
+        default: () => [vue.createVNode("span", {
+          "class": "v-expansion-panel-title__icon"
+        }, [slots.actions?.(slotProps.value) ?? vue.createVNode(VIcon, null, null)])]
+      })]), [[vue.resolveDirective("ripple"), props.ripple]]));
       return {};
     }
   });
@@ -22432,15 +22465,26 @@
         }, {
           default: () => [vue.createVNode("div", {
             "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
-          }, null), hasTitle && vue.createVNode(VExpansionPanelTitle, vue.mergeProps({
-            "key": "title"
-          }, expansionPanelTitleProps), {
-            default: () => [slots.title ? slots.title() : props.title]
-          }), hasText && vue.createVNode(VExpansionPanelText, vue.mergeProps({
-            "key": "text"
-          }, expansionPanelTextProps), {
-            default: () => [slots.text ? slots.text() : props.text]
-          }), slots.default?.()]
+          }, null), vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VExpansionPanelTitle: {
+                ...expansionPanelTitleProps
+              },
+              VExpansionPanelText: {
+                ...expansionPanelTextProps
+              }
+            }
+          }, {
+            default: () => [hasTitle && vue.createVNode(VExpansionPanelTitle, {
+              "key": "title"
+            }, {
+              default: () => [slots.title ? slots.title() : props.title]
+            }), hasText && vue.createVNode(VExpansionPanelText, {
+              "key": "text"
+            }, {
+              default: () => [slots.text ? slots.text() : props.text]
+            }), slots.default?.()]
+          })]
         });
       });
       return {
@@ -22516,15 +22560,13 @@
     }
   });
 
+  // Types
+
   const makeVFabProps = propsFactory({
     app: Boolean,
     appear: Boolean,
     extended: Boolean,
     layout: Boolean,
-    location: {
-      type: String,
-      default: 'bottom end'
-    },
     offset: Boolean,
     modelValue: {
       type: Boolean,
@@ -22534,6 +22576,7 @@
       active: true
     }), ['location']),
     ...makeLayoutItemProps(),
+    ...makeLocationProps(),
     ...makeTransitionProps({
       transition: 'fab-transition'
     })
@@ -22560,11 +22603,11 @@
       const hasPosition = vue.computed(() => props.app || props.absolute);
       const position = vue.computed(() => {
         if (!hasPosition.value) return false;
-        return props.location.split(' ').shift();
+        return props.location?.split(' ').shift() ?? 'bottom';
       });
       const orientation = vue.computed(() => {
         if (!hasPosition.value) return false;
-        return props.location.split(' ')[1] ?? 'end';
+        return props.location?.split(' ')[1] ?? 'end';
       });
       useToggleScope(() => props.app, () => {
         const layout = useLayoutItem({
@@ -28764,6 +28807,7 @@
         return !props.allowedValues || props.allowedValues(value);
       }
       function wheel(e) {
+        if (!props.scrollable || props.disabled) return;
         e.preventDefault();
         const delta = Math.sign(-e.deltaY || 1);
         let value = displayedValue.value;
@@ -28858,6 +28902,7 @@
         }
       }
       function onMouseDown(e) {
+        if (props.disabled) return;
         e.preventDefault();
         window.addEventListener('mousemove', onDragMove);
         window.addEventListener('touchmove', onDragMove);
@@ -28888,7 +28933,7 @@
           }],
           "onMousedown": onMouseDown,
           "onTouchstart": onMouseDown,
-          "onWheel": e => props.scrollable && wheel(e),
+          "onWheel": wheel,
           "ref": clockRef
         }, [vue.createVNode("div", {
           "class": "v-time-picker-clock__inner",
@@ -28990,6 +29035,7 @@
         }, [vue.createVNode(VBtn, {
           "active": props.selecting === 1,
           "color": props.selecting === 1 ? props.color : undefined,
+          "disabled": props.disabled,
           "variant": "tonal",
           "class": {
             'v-time-picker-controls__time__btn': true,
@@ -29011,6 +29057,7 @@
             'v-time-picker-controls__time--with-ampm__btn': props.ampm,
             'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
           },
+          "disabled": props.disabled,
           "variant": "tonal",
           "text": props.minute == null ? '--' : pad(props.minute),
           "onClick": () => emit('update:selecting', SelectingTimes.Minute)
@@ -29028,6 +29075,7 @@
             'v-time-picker-controls__time__btn__active': props.selecting === 3,
             'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
           },
+          "disabled": props.disabled,
           "text": props.second == null ? '--' : pad(props.second)
         }, null), props.ampm && vue.createVNode("div", {
           "class": ['v-time-picker-controls__ampm', {
@@ -29041,8 +29089,9 @@
             'v-time-picker-controls__ampm__btn': true,
             'v-time-picker-controls__ampm__btn__active': props.period === 'am'
           },
+          "disabled": props.disabled,
           "text": t('$vuetify.timePicker.am'),
-          "variant": "tonal",
+          "variant": props.disabled && props.period === 'am' ? 'elevated' : 'tonal',
           "onClick": () => props.period !== 'am' ? emit('update:period', 'am') : null
         }, null), vue.createVNode(VBtn, {
           "active": props.period === 'pm',
@@ -29052,8 +29101,9 @@
             'v-time-picker-controls__ampm__btn': true,
             'v-time-picker-controls__ampm__btn__active': props.period === 'pm'
           },
+          "disabled": props.disabled,
           "text": t('$vuetify.timePicker.pm'),
-          "variant": "tonal",
+          "variant": props.disabled && props.period === 'pm' ? 'elevated' : 'tonal',
           "onClick": () => props.period !== 'pm' ? emit('update:period', 'pm') : null
         }, null)])])]);
       });
@@ -29637,6 +29687,7 @@
       let {
         slots
       } = _ref;
+      const vm = getCurrentInstance('VTreeview');
       const {
         items
       } = useListItems(props);
@@ -29719,15 +29770,13 @@
         }
       });
       useRender(() => {
-        const listProps = VList.filterProps(props);
+        const listProps = VList.filterProps(vm.vnode.props);
         const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
         return vue.createVNode(VList, vue.mergeProps({
           "ref": vListRef
         }, listProps, {
           "class": ['v-treeview', props.class],
           "style": props.style,
-          "opened": opened.value,
-          "onUpdate:opened": $event => opened.value = $event,
           "activated": activated.value,
           "onUpdate:activated": $event => activated.value = $event,
           "selected": selected.value,
@@ -30239,7 +30288,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.8-master.2024-06-11";
+  const version$1 = "3.6.9-dev.2024-06-20";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30492,7 +30541,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.8-master.2024-06-11";
+  const version = "3.6.9-dev.2024-06-20";
 
   /* eslint-disable local-rules/sort-imports */