@vuetify/nightly 3.6.10-master.2024-06-21 → 3.6.11-dev.2024-07-03

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.10-master.2024-06-21
+* Vuetify v3.6.11-dev.2024-07-03
 * 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": [{
@@ -5514,6 +5516,7 @@
       type: Boolean,
       default: undefined
     },
+    activeColor: String,
     baseColor: String,
     symbol: {
       type: null,
@@ -5605,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
         };
       });
@@ -5949,6 +5953,7 @@
     icon: IconValue,
     image: String,
     text: String,
+    ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -5969,6 +5974,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        borderClasses
+      } = useBorder(props);
       const {
         colorClasses,
         colorStyles,
@@ -5988,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, {
@@ -6688,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(() => {
@@ -6730,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();
@@ -6762,7 +6772,7 @@
     async function resetValidation() {
       isPristine.value = true;
       if (!validateOn.value.lazy) {
-        await validate(true);
+        await validate(!validateOn.value.eager);
       } else {
         internalErrorMessages.value = [];
       }
@@ -7702,7 +7712,9 @@
         selected: group.selected,
         scrollTo,
         scrollOffset,
-        focus
+        focus,
+        hasPrev,
+        hasNext
       };
     }
   });
@@ -10833,7 +10845,7 @@
       const potentialShadowDomRoot = vue.computed(() => activatorEl?.value?.getRootNode());
       const {
         teleportTarget
-      } = useTeleport(vue.computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false));
+      } = useTeleport(vue.computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false));
       const {
         dimensionStyles
       } = useDimension(props);
@@ -20904,6 +20916,7 @@
       default: false
     },
     ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeTagProps()
   }, 'VContainer');
   const VContainer = genericComponent()({
@@ -20916,11 +20929,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 {};
     }
@@ -22333,7 +22349,8 @@
       default: false
     },
     readonly: Boolean,
-    ...makeComponentProps()
+    ...makeComponentProps(),
+    ...makeDimensionProps()
   }, 'VExpansionPanelTitle');
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
@@ -22351,6 +22368,9 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const {
+        dimensionStyles
+      } = useDimension(props);
       const slotProps = vue.computed(() => ({
         collapseIcon: props.collapseIcon,
         disabled: expansionPanel.disabled.value,
@@ -22365,7 +22385,7 @@
           '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,
@@ -28055,6 +28075,10 @@
       const controlVariant = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
       });
+      const incrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
+      const decrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
+      const controlNodeSize = vue.computed(() => controlVariant.value === 'split' ? 'default' : 'small');
+      const controlNodeDefaultHeight = vue.computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
       const incrementSlotProps = vue.computed(() => ({
         click: onClickUp
       }));
@@ -28112,18 +28136,42 @@
           modelValue: _,
           ...textFieldProps
         } = VTextField.filterProps(props);
-        function controlNode() {
-          const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
-          return vue.createVNode("div", {
-            "class": "v-number-input__control"
-          }, [!slots.decrement ? vue.createVNode(VBtn, {
+        function incrementControlNode() {
+          return !slots.increment ? vue.createVNode(VBtn, {
+            "disabled": !canIncrease.value,
+            "flat": true,
+            "key": "increment-btn",
+            "height": controlNodeDefaultHeight.value,
+            "name": "increment-btn",
+            "icon": incrementIcon.value,
+            "onClick": onClickUp,
+            "onMousedown": onControlMousedown,
+            "size": controlNodeSize.value,
+            "tabindex": "-1"
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "increment-defaults",
+            "defaults": {
+              VBtn: {
+                disabled: !canIncrease.value,
+                flat: true,
+                height: controlNodeDefaultHeight.value,
+                size: controlNodeSize.value,
+                icon: incrementIcon.value
+              }
+            }
+          }, {
+            default: () => [slots.increment(incrementSlotProps.value)]
+          });
+        }
+        function decrementControlNode() {
+          return !slots.decrement ? vue.createVNode(VBtn, {
             "disabled": !canDecrease.value,
             "flat": true,
             "key": "decrement-btn",
-            "height": defaultHeight,
+            "height": controlNodeDefaultHeight.value,
             "name": "decrement-btn",
-            "icon": "$expand",
-            "size": "small",
+            "icon": decrementIcon.value,
+            "size": controlNodeSize.value,
             "tabindex": "-1",
             "onClick": onClickDown,
             "onMousedown": onControlMousedown
@@ -28133,40 +28181,21 @@
               VBtn: {
                 disabled: !canDecrease.value,
                 flat: true,
-                height: defaultHeight,
-                size: 'small',
-                icon: '$expand'
+                height: controlNodeDefaultHeight.value,
+                size: controlNodeSize.value,
+                icon: decrementIcon.value
               }
             }
           }, {
             default: () => [slots.decrement(decrementSlotProps.value)]
-          }), vue.createVNode(VDivider, {
+          });
+        }
+        function controlNode() {
+          return vue.createVNode("div", {
+            "class": "v-number-input__control"
+          }, [decrementControlNode(), vue.createVNode(VDivider, {
             "vertical": controlVariant.value !== 'stacked'
-          }, null), !slots.increment ? vue.createVNode(VBtn, {
-            "disabled": !canIncrease.value,
-            "flat": true,
-            "key": "increment-btn",
-            "height": defaultHeight,
-            "name": "increment-btn",
-            "icon": "$collapse",
-            "onClick": onClickUp,
-            "onMousedown": onControlMousedown,
-            "size": "small",
-            "tabindex": "-1"
-          }, null) : vue.createVNode(VDefaultsProvider, {
-            "key": "increment-defaults",
-            "defaults": {
-              VBtn: {
-                disabled: !canIncrease.value,
-                flat: true,
-                height: defaultHeight,
-                size: 'small',
-                icon: '$collapse'
-              }
-            }
-          }, {
-            default: () => [slots.increment(incrementSlotProps.value)]
-          })]);
+          }, null), incrementControlNode()]);
         }
         function dividerNode() {
           return !props.hideInput && !props.inset ? vue.createVNode(VDivider, {
@@ -28177,27 +28206,11 @@
           "class": "v-number-input__control"
         }, [vue.createVNode(VDivider, {
           "vertical": true
-        }, null), vue.createVNode(VBtn, {
-          "flat": true,
-          "height": "100%",
-          "icon": "$plus",
-          "tile": true,
-          "tabindex": "-1",
-          "onClick": onClickUp,
-          "onMousedown": onControlMousedown
-        }, null)]) : !props.reverse ? vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]) : undefined;
+        }, null), incrementControlNode()]) : !props.reverse ? vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]) : undefined;
         const hasAppendInner = slots['append-inner'] || appendInnerControl;
         const prependInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
           "class": "v-number-input__control"
-        }, [vue.createVNode(VBtn, {
-          "flat": true,
-          "height": "100%",
-          "icon": "$minus",
-          "tile": true,
-          "tabindex": "-1",
-          "onClick": onClickDown,
-          "onMousedown": onControlMousedown
-        }, null), vue.createVNode(VDivider, {
+        }, [decrementControlNode(), vue.createVNode(VDivider, {
           "vertical": true
         }, null)]) : props.reverse ? vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
@@ -28423,6 +28436,7 @@
       const vExpansionPanelsRef = vue.ref();
       const {
         color,
+        eager,
         editable,
         prevText,
         nextText,
@@ -28441,6 +28455,7 @@
       provideDefaults({
         VStepperVerticalItem: {
           color,
+          eager,
           editable,
           prevText,
           nextText,
@@ -30266,7 +30281,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.10-master.2024-06-21";
+  const version$1 = "3.6.11-dev.2024-07-03";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30519,7 +30534,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.10-master.2024-06-21";
+  const version = "3.6.11-dev.2024-07-03";
 
   /* eslint-disable local-rules/sort-imports */