feat: add label support to defineField closes #4530

logaretm · Nov 26, 2023 · a9089bd · a9089bd
1 parent 3df690e
commit a9089bd
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git a/.changeset/eight-adults-kiss.md b/.changeset/eight-adults-kiss.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: add label support to defineField closes #4530
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
@@ -283,6 +283,7 @@ export interface BaseFieldProps {
 export interface InputBindsConfig<TValue = unknown, TExtraProps extends GenericObject = GenericObject> {
   props: (state: PublicPathState<TValue>) => TExtraProps;
   validateOnBlur: boolean;
+  label: MaybeRefOrGetter<string>;
   validateOnChange: boolean;
   validateOnInput: boolean;
   validateOnModelUpdate: boolean;

diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -967,7 +967,9 @@ export function useForm<
     path: MaybeRefOrGetter<TPath>,
     config?: Partial<InputBindsConfig<TValue, TExtras>> | LazyInputBindsConfig<TValue, TExtras>,
   ) {
-    const pathState = (findPathState(toValue(path)) || createPathState(path)) as PathState<TValue>;
+    const label = isCallable(config) ? undefined : config?.label;
+    console.log(label);
+    const pathState = (findPathState(toValue(path)) || createPathState(path, { label })) as PathState<TValue>;
     const evalConfig = () => (isCallable(config) ? config(omit(pathState, PRIVATE_PATH_STATE_KEYS)) : config || {});
 
     function onBlur() {

diff --git a/packages/vee-validate/tests/useFieldArray.spec.ts b/packages/vee-validate/tests/useFieldArray.spec.ts
@@ -87,13 +87,11 @@ test('warns when updating a no-longer existing item', async () => {
       });
 
       const { remove, fields } = useFieldArray('users');
-      onMounted(() => {
+      onMounted(async () => {
         const item = fields.value[0];
         remove(0);
-
-        nextTick(() => {
-          item.value = 'test';
-        });
+        await nextTick();
+        item.value = 'test';
       });
     },
     template: `

diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
@@ -1,4 +1,4 @@
-import { FieldMeta, FormContext, FormMeta, useField, useForm } from '@/vee-validate';
+import { FieldMeta, FormContext, FormMeta, useField, useForm, defineRule, configure } from '@/vee-validate';
 import { mountWithHoc, setValue, flushPromises, dispatchEvent } from './helpers';
 import * as yup from 'yup';
 import { onMounted, ref, Ref } from 'vue';
@@ -1066,6 +1066,40 @@ describe('useForm()', () => {
       await flushPromises();
       expect(document.body.innerHTML).toContain('aria-valid="true"');
     });
+
+    test('can specify a label', async () => {
+      defineRule('required', (value: string) => {
+        return !!value;
+      });
+
+      configure({
+        generateMessage: ({ field }) => `${field} is bad`,
+      });
+
+      mountWithHoc({
+        setup() {
+          const { defineField, values, errors } = useForm({
+            validationSchema: {
+              name: 'required',
+            },
+          });
+
+          const [model, props] = defineField('name', { validateOnInput: true, label: 'First Name' });
+
+          return { model, props, values, errors };
+        },
+        template: `
+        <input v-model="model" v-bind="props" />
+        <span id="errors">{{ errors.name }}</span>
+      `,
+      });
+
+      await flushPromises();
+      const errorEl = document.getElementById('errors');
+      setValue(document.querySelector('input') as any, '');
+      await flushPromises();
+      expect(errorEl?.textContent).toBe('First Name is bad');
+    });
   });
 
   // #4341