@vuetify/nightly 3.9.0-master.2025-07-11 → 3.9.0-master.2025-07-13

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-master.2025-07-11
+* Vuetify v3.9.0-master.2025-07-13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -7245,7 +7245,6 @@ const VInput = genericComponent()({
     } = useInputIcon(props);
     const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
-    const messagesId = computed(() => `${id.value}-messages`);
     const {
       errorMessages,
       isDirty,
@@ -7259,6 +7258,18 @@ const VInput = genericComponent()({
       validate,
       validationClasses
     } = useValidation(props, 'v-input', id);
+    const messages = computed(() => {
+      if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
+        return errorMessages.value;
+      } else if (props.hint && (props.persistentHint || props.focused)) {
+        return props.hint;
+      } else {
+        return props.messages;
+      }
+    });
+    const hasMessages = toRef(() => messages.value.length > 0);
+    const hasDetails = toRef(() => !props.hideDetails || props.hideDetails === 'auto' && (hasMessages.value || !!slots.details));
+    const messagesId = computed(() => hasDetails.value ? `${id.value}-messages` : undefined);
     const slotProps = computed(() => ({
       id,
       messagesId,
@@ -7268,6 +7279,7 @@ const VInput = genericComponent()({
       isPristine,
       isValid,
       isValidating,
+      hasDetails,
       reset,
       resetValidation,
       validate
@@ -7279,20 +7291,9 @@ const VInput = genericComponent()({
       if (!props.iconColor) return undefined;
       return props.iconColor === true ? color.value : props.iconColor;
     });
-    const messages = computed(() => {
-      if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
-        return errorMessages.value;
-      } else if (props.hint && (props.persistentHint || props.focused)) {
-        return props.hint;
-      } else {
-        return props.messages;
-      }
-    });
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.prependIcon);
       const hasAppend = !!(slots.append || props.appendIcon);
-      const hasMessages = messages.value.length > 0;
-      const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return createElementVNode("div", {
         "class": normalizeClass(['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
@@ -7317,13 +7318,13 @@ const VInput = genericComponent()({
         "key": "append-icon",
         "name": "append",
         "color": iconColor.value
-      }, null), slots.append?.(slotProps.value)]), hasDetails && createElementVNode("div", {
+      }, null), slots.append?.(slotProps.value)]), hasDetails.value && createElementVNode("div", {
         "id": messagesId.value,
         "class": "v-input__details",
         "role": "alert",
         "aria-live": "polite"
       }, [createVNode(VMessages, {
-        "active": hasMessages,
+        "active": hasMessages.value,
         "messages": messages.value
       }, {
         message: slots.message
@@ -12011,6 +12012,7 @@ const makeVFieldProps = propsFactory({
   },
   color: String,
   baseColor: String,
+  details: Boolean,
   dirty: Boolean,
   disabled: {
     type: Boolean,
@@ -12082,7 +12084,7 @@ const VField = genericComponent()({
     const hasFloatingLabel = toRef(() => !props.singleLine && hasLabel.value);
     const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
-    const messagesId = toRef(() => `${id.value}-messages`);
+    const messagesId = toRef(() => !props.details ? undefined : `${id.value}-messages`);
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
@@ -12440,6 +12442,7 @@ const VTextField = genericComponent()({
             isDirty,
             isReadonly,
             isValid,
+            hasDetails,
             reset
           } = _ref2;
           return createVNode(VField, mergeProps({
@@ -12456,6 +12459,7 @@ const VTextField = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -24277,7 +24281,8 @@ const VFileInput = genericComponent()({
             isDisabled,
             isDirty,
             isReadonly,
-            isValid
+            isValid,
+            hasDetails
           } = _ref3;
           return createVNode(VField, mergeProps({
             "ref": vFieldRef,
@@ -24293,6 +24298,7 @@ const VFileInput = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false,
             "onDragover": onDragover,
             "onDrop": onDrop
@@ -29050,7 +29056,8 @@ const VTextarea = genericComponent()({
             isDisabled,
             isDirty,
             isReadonly,
-            isValid
+            isValid,
+            hasDetails
           } = _ref2;
           return createVNode(VField, mergeProps({
             "ref": vFieldRef,
@@ -29069,6 +29076,7 @@ const VTextarea = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "details": hasDetails.value,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -31270,6 +31278,9 @@ const VColorInput = genericComponent()({
     function onSave() {
       menu.value = false;
     }
+    function onCancel() {
+      menu.value = false;
+    }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
@@ -31305,7 +31316,8 @@ const VColorInput = genericComponent()({
           default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
-            "onSave": onSave
+            "onSave": onSave,
+            "onCancel": onCancel
           }), {
             default: _ref2 => {
               let {
@@ -31315,12 +31327,16 @@ const VColorInput = genericComponent()({
                 cancel,
                 isPristine
               } = _ref2;
+              function onUpdateModel(value) {
+                if (!props.hideActions) {
+                  proxyModel.value = value;
+                } else {
+                  model.value = value;
+                }
+              }
               return createVNode(VColorPicker, mergeProps(colorPickerProps, {
-                "modelValue": proxyModel.value,
-                "onUpdate:modelValue": val => {
-                  proxyModel.value = val;
-                  model.value = val;
-                },
+                "modelValue": props.hideActions ? model.value : proxyModel.value,
+                "onUpdate:modelValue": value => onUpdateModel(value),
                 "onMousedown": e => e.preventDefault()
               }), {
                 actions: !props.hideActions ? () => slots.actions?.({
@@ -31455,7 +31471,10 @@ function useDateFormat(props, locale) {
 // Types
 
 const makeVDateInputProps = propsFactory({
-  displayFormat: [Function, String],
+  displayFormat: {
+    type: [Function, String],
+    default: undefined
+  },
   location: {
     type: String,
     default: 'bottom start'
@@ -32394,6 +32413,7 @@ const VMaskInput = genericComponent()({
       }
       return val;
     });
+    const validationValue = toRef(() => returnMaskedValue.value ? maskText(model.value) : unmaskText(model.value));
     onBeforeMount(() => {
       if (props.returnMaskedValue) {
         emit('update:modelValue', model.value);
@@ -32404,7 +32424,8 @@ const VMaskInput = genericComponent()({
       return createVNode(VTextField, mergeProps(textFieldProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "ref": vTextFieldRef
+        "ref": vTextFieldRef,
+        "validationValue": validationValue.value
       }), {
         ...slots
       });
@@ -33684,7 +33705,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-master.2025-07-11";
+const version$1 = "3.9.0-master.2025-07-13";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -33982,7 +34003,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.0-master.2025-07-11";
+const version = "3.9.0-master.2025-07-13";
 
 /* eslint-disable local-rules/sort-imports */