feat: added composition setter functions (#4397)

logaretm · web-flow · commit 2d8143f93401 · 2023-07-31T00:38:53.000+03:00
diff --git a/.changeset/spicy-balloons-dream.md b/.changeset/spicy-balloons-dream.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': minor
+---
+
+feat: added composition setter functions
diff --git a/packages/vee-validate/src/index.ts b/packages/vee-validate/src/index.ts
@@ -54,4 +54,10 @@ export { useFormValues } from './useFormValues';
 export { useFormErrors } from './useFormErrors';
 export { useFieldError } from './useFieldError';
 export { useSubmitForm } from './useSubmitForm';
+export { useSetFieldError } from './useSetFieldError';
+export { useSetFieldTouched } from './useSetFieldTouched';
+export { useSetFieldValue } from './useSetFieldValue';
+export { useSetFormErrors } from './useSetFormErrors';
+export { useSetFormTouched } from './useSetFormTouched';
+export { useSetFormValues } from './useSetFormValues';
 export { FormContextKey, FieldContextKey, IS_ABSENT } from './symbols';
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
@@ -143,7 +143,7 @@ export interface PrivateFieldContext<TValue = unknown> {
   setState(state: Partial<FieldState<TValue>>): void;
   setTouched(isTouched: boolean): void;
   setErrors(message: string | string[]): void;
-  setValue(value: TValue): void;
+  setValue(value: TValue, shouldValidate?: boolean): void;
 }
 
 export type FieldContext<TValue = unknown> = Omit<PrivateFieldContext<TValue>, 'id' | 'instances'>;
@@ -170,7 +170,7 @@ export interface FormActions<TValues extends GenericObject, TOutput = TValues> {
   setErrors(fields: Partial<FlattenAndSetPathsType<TValues, string | string[] | undefined>>): void;
   setValues(fields: PartialDeep<TValues>, shouldValidate?: boolean): void;
   setFieldTouched(field: Path<TValues>, isTouched: boolean): void;
-  setTouched(fields: Partial<Record<Path<TValues>, boolean>>): void;
+  setTouched(fields: Partial<Record<Path<TValues>, boolean>> | boolean): void;
   resetForm(state?: Partial<FormState<TValues>>): void;
   resetField(field: Path<TValues>, state?: Partial<FieldState>): void;
 }
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -685,7 +685,15 @@ export function useForm<
   /**
    * Sets the touched meta state on multiple fields
    */
-  function setTouched(fields: Partial<FlattenAndSetPathsType<TValues, boolean>>) {
+  function setTouched(fields: Partial<FlattenAndSetPathsType<TValues, boolean>> | boolean) {
+    if (typeof fields === 'boolean') {
+      mutateAllPathState(state => {
+        state.touched = fields;
+      });
+
+      return;
+    }
+
     keysOf(fields).forEach(field => {
       setFieldTouched(field, !!fields[field]);
     });
diff --git a/packages/vee-validate/src/useSetFieldError.ts b/packages/vee-validate/src/useSetFieldError.ts
@@ -0,0 +1,26 @@
+import { inject, MaybeRefOrGetter, toValue } from 'vue';
+import { FieldContextKey, FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets a field's error message
+ */
+export function useSetFieldError(path?: MaybeRefOrGetter<string>) {
+  const form = injectWithSelf(FormContextKey);
+  // We don't want to use self injected context as it doesn't make sense
+  const field = path ? undefined : inject(FieldContextKey);
+
+  return function setFieldError(message: string | string[] | undefined) {
+    if (path && form) {
+      form.setFieldError(toValue(path), message);
+    }
+
+    if (field) {
+      field.setErrors(message || []);
+    }
+
+    if (__DEV__) {
+      warn(`Could not set error for unknown field with path "${toValue(path)}"`);
+    }
+  };
+}
diff --git a/packages/vee-validate/src/useSetFieldTouched.ts b/packages/vee-validate/src/useSetFieldTouched.ts
@@ -0,0 +1,26 @@
+import { inject, MaybeRefOrGetter, toValue } from 'vue';
+import { FieldContextKey, FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets a field's touched meta state
+ */
+export function useSetFieldTouched(path?: MaybeRefOrGetter<string>) {
+  const form = injectWithSelf(FormContextKey);
+  // We don't want to use self injected context as it doesn't make sense
+  const field = path ? undefined : inject(FieldContextKey);
+
+  return function setFieldTouched(touched: boolean) {
+    if (path && form) {
+      form.setFieldTouched(toValue(path), touched);
+    }
+
+    if (field) {
+      field.setTouched(touched);
+    }
+
+    if (__DEV__) {
+      warn(`Could not set touched meta for unknown field with path "${toValue(path)}"`);
+    }
+  };
+}
diff --git a/packages/vee-validate/src/useSetFieldValue.ts b/packages/vee-validate/src/useSetFieldValue.ts
@@ -0,0 +1,26 @@
+import { inject, MaybeRefOrGetter, toValue } from 'vue';
+import { FieldContextKey, FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets a field's value
+ */
+export function useSetFieldValue<TValue = unknown>(path?: MaybeRefOrGetter<string>) {
+  const form = injectWithSelf(FormContextKey);
+  // We don't want to use self injected context as it doesn't make sense
+  const field = path ? undefined : inject(FieldContextKey);
+
+  return function setFieldValue(value: TValue, shouldValidate = true) {
+    if (path && form) {
+      form.setFieldValue(toValue(path), value, shouldValidate);
+    }
+
+    if (field) {
+      field.setValue(value, shouldValidate);
+    }
+
+    if (__DEV__) {
+      warn(`Could not set value for unknown field with path "${toValue(path)}"`);
+    }
+  };
+}
diff --git a/packages/vee-validate/src/useSetFormErrors.ts b/packages/vee-validate/src/useSetFormErrors.ts
@@ -0,0 +1,23 @@
+import { FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets multiple fields errors
+ */
+export function useSetFormErrors() {
+  const form = injectWithSelf(FormContextKey);
+
+  function setFormErrors(fields: Record<string, string | string[] | undefined>) {
+    if (form) {
+      form.setErrors(fields);
+    }
+
+    if (__DEV__) {
+      warn(
+        `Could not set errors because a form was not detected, did you forget to use "useForm" in a parent component?`,
+      );
+    }
+  }
+
+  return setFormErrors;
+}
diff --git a/packages/vee-validate/src/useSetFormTouched.ts b/packages/vee-validate/src/useSetFormTouched.ts
@@ -0,0 +1,23 @@
+import { FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets multiple fields touched or all fields in the form
+ */
+export function useSetFormTouched() {
+  const form = injectWithSelf(FormContextKey);
+
+  function setFormTouched(fields: Record<string, boolean> | boolean) {
+    if (form) {
+      form.setTouched(fields);
+    }
+
+    if (__DEV__) {
+      warn(
+        `Could not set touched state because a form was not detected, did you forget to use "useForm" in a parent component?`,
+      );
+    }
+  }
+
+  return setFormTouched;
+}
diff --git a/packages/vee-validate/src/useSetFormValues.ts b/packages/vee-validate/src/useSetFormValues.ts
@@ -0,0 +1,23 @@
+import { FormContextKey } from './symbols';
+import { injectWithSelf, warn } from './utils';
+
+/**
+ * Sets multiple fields values
+ */
+export function useSetFormValues() {
+  const form = injectWithSelf(FormContextKey);
+
+  function setFormValues(fields: Record<string, unknown>) {
+    if (form) {
+      form.setValues(fields);
+    }
+
+    if (__DEV__) {
+      warn(
+        `Could not set form values because a form was not detected, did you forget to use "useForm" in a parent component?`,
+      );
+    }
+  }
+
+  return setFormValues;
+}
diff --git a/packages/vee-validate/tests/useSetFieldError.spec.ts b/packages/vee-validate/tests/useSetFieldError.spec.ts
@@ -0,0 +1,92 @@
+import { useField, useSetFieldError, useForm } from '@/vee-validate';
+import { mountWithHoc, flushPromises } from './helpers';
+import { defineComponent } from 'vue';
+
+describe('useSetFieldError()', () => {
+  test('sets a single field error message', async () => {
+    let setError!: ReturnType<typeof useSetFieldError>;
+
+    mountWithHoc({
+      setup() {
+        useForm();
+        const { value, errorMessage } = useField('test');
+        setError = useSetFieldError('test');
+
+        return {
+          value,
+          errorMessage,
+        };
+      },
+      template: `
+      <input name="field" v-model="value" />
+      <span>{{ errorMessage }}</span>
+    `,
+    });
+    await flushPromises();
+    const msg = 'Field is required';
+
+    const error = document.querySelector('span');
+    setError(msg);
+    await flushPromises();
+    expect(error?.textContent).toBe(msg);
+  });
+
+  test('sets a single field error message in a child component without specifying a path', async () => {
+    let setError!: ReturnType<typeof useSetFieldError>;
+    const CustomSetErrorComponent = defineComponent({
+      template: '<button></button>',
+      setup() {
+        setError = useSetFieldError();
+
+        return {};
+      },
+    });
+    mountWithHoc({
+      components: {
+        CustomSetErrorComponent,
+      },
+      setup() {
+        useForm();
+        const { errorMessage } = useField('test');
+
+        return {
+          errorMessage,
+        };
+      },
+      template: `
+      <span>{{ errorMessage }}</span>
+      <CustomSetErrorComponent />
+    `,
+    });
+
+    await flushPromises();
+    const msg = 'Field is required';
+    const error = document.querySelector('span');
+    setError(msg);
+    await flushPromises();
+    expect(error?.textContent).toBe(msg);
+  });
+
+  test('warns if field not found', async () => {
+    let setError!: ReturnType<typeof useSetFieldError>;
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {
+      // NOOP
+    });
+
+    mountWithHoc({
+      setup() {
+        useForm();
+        setError = useSetFieldError('something');
+
+        return {};
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    setError('ERROR');
+    await flushPromises();
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
diff --git a/packages/vee-validate/tests/useSetFieldTouched.spec.ts b/packages/vee-validate/tests/useSetFieldTouched.spec.ts
@@ -0,0 +1,90 @@
+import { useField, useForm, useSetFieldTouched } from '@/vee-validate';
+import { mountWithHoc, flushPromises } from './helpers';
+import { defineComponent } from 'vue';
+
+describe('useSetFieldTouched()', () => {
+  test('sets a single field touched status', async () => {
+    let setTouched!: ReturnType<typeof useSetFieldTouched>;
+    mountWithHoc({
+      setup() {
+        useForm();
+        const { meta } = useField('test');
+        setTouched = useSetFieldTouched('test');
+
+        return {
+          meta,
+        };
+      },
+      template: `
+      <span>{{ meta.touched.toString() }}</span>
+    `,
+    });
+    await flushPromises();
+
+    const touched = document.querySelector('span');
+    expect(touched?.textContent).toBe('false');
+    setTouched(true);
+    await flushPromises();
+    expect(touched?.textContent).toBe('true');
+  });
+
+  test('sets a single field isTouched status in child components without path prop', async () => {
+    let setTouched!: ReturnType<typeof useSetFieldTouched>;
+    const TouchedButton = defineComponent({
+      template: '<button></button>',
+      setup() {
+        setTouched = useSetFieldTouched();
+
+        return {};
+      },
+    });
+    mountWithHoc({
+      components: {
+        TouchedButton,
+      },
+      setup() {
+        useForm();
+        const { meta } = useField('test');
+
+        return {
+          meta,
+        };
+      },
+      template: `
+      <span>{{ meta.touched.toString() }}</span>
+      <TouchedButton />
+    `,
+    });
+
+    await flushPromises();
+
+    const touched = document.querySelector('span');
+    expect(touched?.textContent).toBe('false');
+    setTouched(true);
+    await flushPromises();
+    expect(touched?.textContent).toBe('true');
+  });
+
+  test('warns if field not found', async () => {
+    let setTouched!: ReturnType<typeof useSetFieldTouched>;
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {
+      // NOOP
+    });
+
+    mountWithHoc({
+      setup() {
+        useForm();
+        setTouched = useSetFieldTouched('something');
+
+        return {};
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    setTouched(true);
+    await flushPromises();
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
diff --git a/packages/vee-validate/tests/useSetFieldValue.spec.ts b/packages/vee-validate/tests/useSetFieldValue.spec.ts
diff --git a/packages/vee-validate/tests/useSetFormErrors.spec.ts b/packages/vee-validate/tests/useSetFormErrors.spec.ts
diff --git a/packages/vee-validate/tests/useSetFormTouched.spec.ts b/packages/vee-validate/tests/useSetFormTouched.spec.ts
diff --git a/packages/vee-validate/tests/useSetFormValues.spec.ts b/packages/vee-validate/tests/useSetFormValues.spec.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'vee-validate': minor
 +---
++
 +feat: added composition setter functions