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

package/dist/vuetify-labs.esm.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.
 */
@@ -3248,6 +3248,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,
@@ -3504,6 +3505,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": [{
@@ -5510,6 +5512,7 @@ const makeVBtnProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  activeColor: String,
   baseColor: String,
   symbol: {
     type: null,
@@ -5601,10 +5604,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
       };
     });
@@ -5945,6 +5949,7 @@ const makeVAvatarProps = propsFactory({
   icon: IconValue,
   image: String,
   text: String,
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -5965,6 +5970,9 @@ const VAvatar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
@@ -5984,7 +5992,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, {
@@ -6684,12 +6692,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(() => {
@@ -6726,11 +6736,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();
@@ -6758,7 +6768,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 = [];
     }
@@ -7698,7 +7708,9 @@ const VSlideGroup = genericComponent()({
       selected: group.selected,
       scrollTo,
       scrollOffset,
-      focus
+      focus,
+      hasPrev,
+      hasNext
     };
   }
 });
@@ -10829,7 +10841,7 @@ const VOverlay = genericComponent()({
     const potentialShadowDomRoot = computed(() => activatorEl?.value?.getRootNode());
     const {
       teleportTarget
-    } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false));
+    } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false));
     const {
       dimensionStyles
     } = useDimension(props);
@@ -20900,6 +20912,7 @@ const makeVContainerProps = propsFactory({
     default: false
   },
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeTagProps()
 }, 'VContainer');
 const VContainer = genericComponent()({
@@ -20912,11 +20925,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 {};
   }
@@ -22329,7 +22345,8 @@ const makeVExpansionPanelTitleProps = propsFactory({
     default: false
   },
   readonly: Boolean,
-  ...makeComponentProps()
+  ...makeComponentProps(),
+  ...makeDimensionProps()
 }, 'VExpansionPanelTitle');
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
@@ -22347,6 +22364,9 @@ const VExpansionPanelTitle = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const slotProps = computed(() => ({
       collapseIcon: props.collapseIcon,
       disabled: expansionPanel.disabled.value,
@@ -22361,7 +22381,7 @@ const VExpansionPanelTitle = genericComponent()({
         '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,
@@ -28051,6 +28071,10 @@ const VNumberInput = genericComponent()({
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant;
     });
+    const incrementIcon = computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
+    const decrementIcon = computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
+    const controlNodeSize = computed(() => controlVariant.value === 'split' ? 'default' : 'small');
+    const controlNodeDefaultHeight = computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
     const incrementSlotProps = computed(() => ({
       click: onClickUp
     }));
@@ -28108,18 +28132,42 @@ const VNumberInput = genericComponent()({
         modelValue: _,
         ...textFieldProps
       } = VTextField.filterProps(props);
-      function controlNode() {
-        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
-        return createVNode("div", {
-          "class": "v-number-input__control"
-        }, [!slots.decrement ? createVNode(VBtn, {
+      function incrementControlNode() {
+        return !slots.increment ? 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) : 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 ? 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
@@ -28129,40 +28177,21 @@ const VNumberInput = genericComponent()({
             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)]
-        }), createVNode(VDivider, {
+        });
+      }
+      function controlNode() {
+        return createVNode("div", {
+          "class": "v-number-input__control"
+        }, [decrementControlNode(), createVNode(VDivider, {
           "vertical": controlVariant.value !== 'stacked'
-        }, null), !slots.increment ? 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) : 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 ? createVNode(VDivider, {
@@ -28173,27 +28202,11 @@ const VNumberInput = genericComponent()({
         "class": "v-number-input__control"
       }, [createVNode(VDivider, {
         "vertical": true
-      }, null), createVNode(VBtn, {
-        "flat": true,
-        "height": "100%",
-        "icon": "$plus",
-        "tile": true,
-        "tabindex": "-1",
-        "onClick": onClickUp,
-        "onMousedown": onControlMousedown
-      }, null)]) : !props.reverse ? createVNode(Fragment, null, [dividerNode(), controlNode()]) : undefined;
+      }, null), incrementControlNode()]) : !props.reverse ? createVNode(Fragment, null, [dividerNode(), controlNode()]) : undefined;
       const hasAppendInner = slots['append-inner'] || appendInnerControl;
       const prependInnerControl = controlVariant.value === 'split' ? createVNode("div", {
         "class": "v-number-input__control"
-      }, [createVNode(VBtn, {
-        "flat": true,
-        "height": "100%",
-        "icon": "$minus",
-        "tile": true,
-        "tabindex": "-1",
-        "onClick": onClickDown,
-        "onMousedown": onControlMousedown
-      }, null), createVNode(VDivider, {
+      }, [decrementControlNode(), createVNode(VDivider, {
         "vertical": true
       }, null)]) : props.reverse ? createVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
       const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
@@ -28419,6 +28432,7 @@ const VStepperVertical = genericComponent()({
     const vExpansionPanelsRef = ref();
     const {
       color,
+      eager,
       editable,
       prevText,
       nextText,
@@ -28437,6 +28451,7 @@ const VStepperVertical = genericComponent()({
     provideDefaults({
       VStepperVerticalItem: {
         color,
+        eager,
         editable,
         prevText,
         nextText,
@@ -30262,7 +30277,7 @@ function createVuetify$1() {
     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
@@ -30515,7 +30530,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */