feat: allow keep values config to be reactive

logaretm · Jul 11, 2022 · 5009bd8 · 5009bd8
1 parent 0ef7582
commit 5009bd8
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -111,6 +111,7 @@ const FieldImpl = defineComponent({
     const name = toRef(props, 'name');
     const label = toRef(props, 'label');
     const uncheckedValue = toRef(props, 'uncheckedValue');
+    const keepValue = toRef(props, 'keepValue');
 
     const {
       errors,
@@ -136,7 +137,7 @@ const FieldImpl = defineComponent({
       uncheckedValue,
       label,
       validateOnValueUpdate: false,
-      keepValueOnUnmount: props.keepValue,
+      keepValueOnUnmount: keepValue,
     });
 
     // If there is a v-model applied on the component we need to emit the `update:modelValue` whenever the value binding changes

diff --git a/packages/vee-validate/src/Form.ts b/packages/vee-validate/src/Form.ts
@@ -72,6 +72,7 @@ const FormImpl = defineComponent({
   setup(props, ctx) {
     const initialValues = toRef(props, 'initialValues');
     const validationSchema = toRef(props, 'validationSchema');
+    const keepValues = toRef(props, 'keepValues');
 
     const {
       errors,
@@ -97,7 +98,7 @@ const FormImpl = defineComponent({
       initialErrors: props.initialErrors,
       initialTouched: props.initialTouched,
       validateOnMount: props.validateOnMount,
-      keepValuesOnUnmount: props.keepValues,
+      keepValuesOnUnmount: keepValues,
     });
 
     const onSubmit = props.onSubmit ? handleSubmit(props.onSubmit, props.onInvalidSubmit) : submitForm;

diff --git a/packages/vee-validate/src/types.ts b/packages/vee-validate/src/types.ts
@@ -92,7 +92,7 @@ export interface PrivateFieldContext<TValue = unknown> {
   label?: MaybeRef<string | undefined>;
   type?: string;
   bails?: boolean;
-  keepValueOnUnmount?: boolean;
+  keepValueOnUnmount?: MaybeRef<boolean | undefined>;
   checkedValue?: MaybeRef<TValue>;
   uncheckedValue?: MaybeRef<TValue>;
   checked?: Ref<boolean>;
@@ -189,7 +189,7 @@ export interface PrivateFormContext<TValues extends Record<string, any> = Record
   errors: ComputedRef<FormErrors<TValues>>;
   meta: ComputedRef<FormMeta<TValues>>;
   isSubmitting: Ref<boolean>;
-  keepValuesOnUnmount: boolean;
+  keepValuesOnUnmount: MaybeRef<boolean>;
   validateSchema?: (mode: SchemaValidationMode) => Promise<FormValidationResult<TValues>>;
   validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues>>;
   validateField(field: keyof TValues): Promise<ValidationResult>;

diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -25,7 +25,6 @@ import {
   PrivateFieldContext,
   SchemaValidationMode,
   ValidationOptions,
-  FieldMeta,
 } from './types';
 import {
   normalizeRules,
@@ -37,7 +36,6 @@ import {
   resolveNextCheckboxValue,
   isYupValidator,
   applyModelModifiers,
-  isPropPresent,
 } from './utils';
 import { isCallable } from '../../shared';
 import { FieldContextKey, FormContextKey, IS_ABSENT } from './symbols';
@@ -55,7 +53,7 @@ interface FieldOptions<TValue = unknown> {
   uncheckedValue?: MaybeRef<TValue>;
   label?: MaybeRef<string | undefined>;
   standalone?: boolean;
-  keepValueOnUnmount?: boolean;
+  keepValueOnUnmount?: MaybeRef<boolean | undefined>;
   modelPropName?: string;
   syncVModel?: boolean;
 }
@@ -456,7 +454,7 @@ function useCheckboxField<TValue = unknown>(
     }
 
     onBeforeUnmount(() => {
-      const shouldKeepValue = field.keepValueOnUnmount ?? form?.keepValuesOnUnmount ?? false;
+      const shouldKeepValue = unref(field.keepValueOnUnmount) ?? unref(form?.keepValuesOnUnmount) ?? false;
       // toggles the checkbox value if it was checked and the unset behavior is set
       if (checked.value && !shouldKeepValue) {
         handleCheckboxChange(unref(checkedValue), false);

diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -60,7 +60,7 @@ interface FormOptions<TValues extends Record<string, any>> {
   initialErrors?: Record<keyof TValues, string | undefined>;
   initialTouched?: Record<keyof TValues, boolean>;
   validateOnMount?: boolean;
-  keepValuesOnUnmount?: boolean;
+  keepValuesOnUnmount?: MaybeRef<boolean>;
 }
 
 let FORM_COUNTER = 0;
@@ -468,7 +468,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
         // Checks if the field was configured to be unset during unmount or not
         // Checks both the form-level config and field-level one
         // Field has the priority if it is set, otherwise it goes to the form settings
-        const shouldKeepValue = field.keepValueOnUnmount ?? keepValuesOnUnmount;
+        const shouldKeepValue = unref(field.keepValueOnUnmount) ?? unref(keepValuesOnUnmount);
         if (shouldKeepValue) {
           return;
         }