@vuetify/nightly 4.0.0-dev-20230515.0 → 4.0.0-dev-20230516.0

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230515.0
+* Vuetify v4.0.0-dev-20230516.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5931,12 +5931,9 @@ function createForm(props) {
   }
   function reset() {
     items.value.forEach(item => item.reset());
-    model.value = null;
   }
   function resetValidation() {
     items.value.forEach(item => item.resetValidation());
-    errors.value = [];
-    model.value = null;
   }
   watch(items, () => {
     let valid = 0;
@@ -5990,6 +5987,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validateOn: toRef(props, 'validateOn')
   });
@@ -5998,6 +5996,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validate,
     reset,
@@ -6049,10 +6048,25 @@ function useValidation(props) {
   const errorMessages = computed(() => {
     return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
   });
+  const validateOn = computed(() => {
+    let value = (props.validateOn ?? form?.validateOn.value) || 'input';
+    if (value === 'lazy') value = 'input lazy';
+    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')
+    };
+  });
   const isValid = computed(() => {
-    if (props.error || errorMessages.value.length) return false;
+    if (props.error || props.errorMessages.length) return false;
     if (!props.rules.length) return true;
-    return isPristine.value ? null : true;
+    if (isPristine.value) {
+      return internalErrorMessages.value.length || validateOn.value.lazy ? null : true;
+    } else {
+      return !internalErrorMessages.value.length;
+    }
   });
   const isValidating = shallowRef(false);
   const validationClasses = computed(() => {
@@ -6075,11 +6089,13 @@ function useValidation(props) {
   onBeforeUnmount(() => {
     form?.unregister(uid.value);
   });
-  const validateOn = computed(() => props.validateOn || form?.validateOn.value || 'input');
-
-  // Set initial valid state, for inputs that might not have rules
-  onMounted(() => form?.update(uid.value, isValid.value, errorMessages.value));
-  useToggleScope(() => validateOn.value === 'input', () => {
+  onMounted(async () => {
+    if (!validateOn.value.lazy) {
+      await validate(true);
+    }
+    form?.update(uid.value, isValid.value, errorMessages.value);
+  });
+  useToggleScope(() => validateOn.value.input, () => {
     watch(validationModel, () => {
       if (validationModel.value != null) {
         validate();
@@ -6091,7 +6107,7 @@ function useValidation(props) {
       }
     });
   });
-  useToggleScope(() => validateOn.value === 'blur', () => {
+  useToggleScope(() => validateOn.value.blur, () => {
     watch(() => props.focused, val => {
       if (!val) validate();
     });
@@ -6100,14 +6116,19 @@ function useValidation(props) {
     form?.update(uid.value, isValid.value, errorMessages.value);
   });
   function reset() {
-    resetValidation();
     model.value = null;
+    nextTick(resetValidation);
   }
   function resetValidation() {
     isPristine.value = true;
-    internalErrorMessages.value = [];
+    if (!validateOn.value.lazy) {
+      validate(true);
+    } else {
+      internalErrorMessages.value = [];
+    }
   }
   async function validate() {
+    let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const results = [];
     isValidating.value = true;
     for (const rule of props.rules) {
@@ -6126,7 +6147,7 @@ function useValidation(props) {
     }
     internalErrorMessages.value = results;
     isValidating.value = false;
-    isPristine.value = false;
+    isPristine.value = silent;
     return internalErrorMessages.value;
   }
   return {
@@ -6216,7 +6237,7 @@ const VInput = genericComponent()({
       validate
     }));
     const messages = computed(() => {
-      if (errorMessages.value.length > 0) {
+      if (!isPristine.value && errorMessages.value.length > 0) {
         return errorMessages.value;
       } else if (props.hint && (props.persistentHint || props.focused)) {
         return props.hint;
@@ -6869,10 +6890,10 @@ const VCheckboxBtn = genericComponent()({
       }
     }
     const falseIcon = computed(() => {
-      return props.indeterminate ? props.indeterminateIcon : props.falseIcon;
+      return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
     });
     const trueIcon = computed(() => {
-      return props.indeterminate ? props.indeterminateIcon : props.trueIcon;
+      return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
     });
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
       "modelValue": model.value,
@@ -6882,7 +6903,7 @@ const VCheckboxBtn = genericComponent()({
       "type": "checkbox",
       "falseIcon": falseIcon.value,
       "trueIcon": trueIcon.value,
-      "aria-checked": props.indeterminate ? 'mixed' : undefined
+      "aria-checked": indeterminate.value ? 'mixed' : undefined
     }), slots));
     return {};
   }
@@ -21711,7 +21732,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "4.0.0-dev-20230515.0";
+const version$1 = "4.0.0-dev-20230516.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -21723,7 +21744,7 @@ function inject(key) {
   }
 }
 
-const version = "4.0.0-dev-20230515.0";
+const version = "4.0.0-dev-20230516.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};