feat: add move to FieldArray

Author: logaretm

packages/vee-validate/src/FieldArray.ts

@@ -13,7 +13,7 @@ const FieldArrayImpl = defineComponent({
     },
   },
   setup(props, ctx) {
-    const { push, remove, swap, insert, replace, update, prepend, fields } = useFieldArray(toRef(props, 'name'));
+    const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(toRef(props, 'name'));
 
     function slotProps() {
       return {
@@ -25,6 +25,7 @@ const FieldArrayImpl = defineComponent({
         update,
         replace,
         prepend,
+        move,
       };
     }
 
@@ -36,6 +37,7 @@ const FieldArrayImpl = defineComponent({
       update,
       replace,
       prepend,
+      move,
     });
 
     return () => {
@@ -55,6 +57,7 @@ export const FieldArray = FieldArrayImpl as typeof FieldArrayImpl & {
     update: FieldArrayContext['update'];
     replace: FieldArrayContext['replace'];
     prepend: FieldArrayContext['prepend'];
+    move: FieldArrayContext['move'];
     $slots: {
       default: (arg: UnwrapRef<FieldArrayContext>) => VNode[];
     };

packages/vee-validate/src/types.ts

@@ -66,6 +66,7 @@ export interface FieldArrayContext<TValue = unknown> {
   swap(indexA: number, indexB: number): void;
   insert(idx: number, value: TValue): void;
   prepend(value: TValue): void;
+  move(oldIdx: number, newIdx: number): void;
 }
 
 export interface PrivateFieldArrayContext {

packages/vee-validate/src/useFieldArray.ts

@@ -21,6 +21,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
     update: noOp,
     replace: noOp,
     prepend: noOp,
+    move: noOp,
   };
 
   if (!form) {
@@ -175,6 +176,30 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
     updateEntryFlags();
   }
 
+  function move(oldIdx: number, newIdx: number) {
+    const pathName = unref(arrayPath);
+    const pathValue = getFromPath<TValue[]>(form?.values, pathName);
+    const newValue = isNullOrUndefined(pathValue) ? [] : [...pathValue];
+
+    if (!Array.isArray(pathValue) || !(oldIdx in pathValue) || !(newIdx in pathValue)) {
+      return;
+    }
+
+    const newFields = [...fields.value];
+
+    const movedItem = newFields[oldIdx];
+    newFields.splice(oldIdx, 1);
+    newFields.splice(newIdx, 0, movedItem);
+
+    const movedValue = newValue[oldIdx];
+    newValue.splice(oldIdx, 1);
+    newValue.splice(newIdx, 0, movedValue);
+
+    form?.setFieldValue(pathName, newValue);
+    fields.value = newFields;
+    updateEntryFlags();
+  }
+
   form.fieldArraysLookup[id] = {
     reset: initFields,
   };
@@ -192,5 +217,6 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
     update,
     replace,
     prepend,
+    move,
   };
 }

packages/vee-validate/tests/FieldArray.spec.ts

@@ -666,3 +666,59 @@ test('clears old errors path when last item is removed and value update validati
 
   expect(errorList.children).toHaveLength(0);
 });
+
+test('moves items around the array with move()', async () => {
+  const onSubmit = jest.fn();
+  mountWithHoc({
+    setup() {
+      const initialValues = {
+        users: [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }],
+      };
+
+      return {
+        onSubmit,
+        initialValues,
+      };
+    },
+    template: `
+      <VForm @submit="onSubmit" :initial-values="initialValues">
+        <FieldArray name="users" v-slot="{ move, fields }">
+          <fieldset v-for="(field, idx) in fields" :key="field.key">
+            <legend>User #{{ idx }}</legend>
+            <label :for="'name_' + idx">Name</label>
+            <Field :id="'name_' + idx" :name="'users[' + idx + '].name'" />
+            <ErrorMessage :name="'users[' + idx + '].name'" />
+
+            <button class="move" type="button" @click="move(idx, 0)">Move</button>
+          </fieldset>  
+        </FieldArray>
+
+        <button class="submit" type="submit">Submit</button>
+      </VForm>
+    `,
+  });
+
+  await flushPromises();
+  const submitBtn = document.querySelector('.submit') as HTMLButtonElement;
+  const inputAt = (idx: number) => (document.querySelectorAll('input') || [])[idx] as HTMLInputElement;
+  const moveElAt = (idx: number) => (document.querySelectorAll('.move') || [])[idx] as HTMLInputElement;
+
+  expect(getValue(inputAt(0))).toBe('1');
+  expect(getValue(inputAt(1))).toBe('2');
+  expect(getValue(inputAt(2))).toBe('3');
+  expect(getValue(inputAt(3))).toBe('4');
+  dispatchEvent(moveElAt(3), 'click');
+  await flushPromises();
+  expect(getValue(inputAt(0))).toBe('4');
+  expect(getValue(inputAt(1))).toBe('1');
+  expect(getValue(inputAt(2))).toBe('2');
+  expect(getValue(inputAt(3))).toBe('3');
+  (submitBtn as HTMLButtonElement).click();
+  await flushPromises();
+  expect(onSubmit).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      users: [{ name: '4' }, { name: '1' }, { name: '2' }, { name: '3' }],
+    }),
+    expect.anything()
+  );
+});

packages/vee-validate/tests/helpers/index.ts

@@ -59,7 +59,7 @@ export function dispatchEvent(node: ComponentPublicInstance | HTMLElement | stri
     return;
   }
 
-  if (HTML_TAGS.includes((node as any).tagName)) {
+  if ('tagName' in node) {
     const input = node as HTMLElement;
     input.dispatchEvent(new window.Event(eventName));
     return;