feat: allow getters forfield arrays names

.changeset/spotty-parrots-run.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat: allow getters for field arrays

packages/vee-validate/src/FieldArray.ts

@@ -1,4 +1,4 @@
-import { defineComponent, toRef, UnwrapRef, VNode } from 'vue';
+import { defineComponent, UnwrapRef, VNode } from 'vue';
 import { FieldArrayContext } from './types';
 import { useFieldArray } from './useFieldArray';
 import { normalizeChildren } from './utils';
@@ -13,7 +13,7 @@ const FieldArrayImpl = /** #__PURE__ */ defineComponent({
     },
   },
   setup(props, ctx) {
-    const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(toRef(props, 'name'));
+    const { push, remove, swap, insert, replace, update, prepend, move, fields } = useFieldArray(() => props.name);
 
     function slotProps() {
       return {

packages/vee-validate/src/types/forms.ts

@@ -125,7 +125,7 @@ export interface FieldArrayContext<TValue = unknown> {
 
 export interface PrivateFieldArrayContext<TValue = unknown> extends FieldArrayContext<TValue> {
   reset(): void;
-  path: MaybeRef<string>;
+  path: MaybeRefOrGetter<string>;
 }
 
 export interface PrivateFieldContext<TValue = unknown> {

packages/vee-validate/src/useFieldArray.ts

@@ -1,11 +1,11 @@
-import { Ref, unref, ref, onBeforeUnmount, watch, MaybeRef } from 'vue';
+import { Ref, unref, ref, onBeforeUnmount, watch, MaybeRefOrGetter, toValue } from 'vue';
 import { klona as deepCopy } from 'klona/full';
 import { isNullOrUndefined } from '../../shared';
 import { FormContextKey } from './symbols';
 import { FieldArrayContext, FieldEntry, PrivateFieldArrayContext, PrivateFormContext } from './types';
 import { computedDeep, getFromPath, injectWithSelf, warn, isEqual, setInPath } from './utils';
 
-export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): FieldArrayContext<TValue> {
+export function useFieldArray<TValue = unknown>(arrayPath: MaybeRefOrGetter<string>): FieldArrayContext<TValue> {
   const form = injectWithSelf(FormContextKey, undefined) as PrivateFormContext;
   const fields: Ref<FieldEntry<TValue>[]> = ref([]);
 
@@ -48,7 +48,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
   let entryCounter = 0;
 
   function getCurrentValues() {
-    return getFromPath<TValue[]>(form?.values, unref(arrayPath), []) || [];
+    return getFromPath<TValue[]>(form?.values, toValue(arrayPath), []) || [];
   }
 
   function initFields() {
@@ -85,7 +85,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
       key,
       value: computedDeep<TValue>({
         get() {
-          const currentValues = getFromPath<TValue[]>(form?.values, unref(arrayPath), []) || [];
+          const currentValues = getFromPath<TValue[]>(form?.values, toValue(arrayPath), []) || [];
           const idx = fields.value.findIndex(e => e.key === key);
 
           return idx === -1 ? value : currentValues[idx];
@@ -116,7 +116,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
   }
 
   function remove(idx: number) {
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     if (!pathValue || !Array.isArray(pathValue)) {
       return;
@@ -134,7 +134,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
 
   function push(initialValue: TValue) {
     const value = deepCopy(initialValue);
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
     if (!Array.isArray(normalizedPathValue)) {
@@ -150,7 +150,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
   }
 
   function swap(indexA: number, indexB: number) {
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     if (!Array.isArray(pathValue) || !(indexA in pathValue) || !(indexB in pathValue)) {
       return;
@@ -174,7 +174,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
 
   function insert(idx: number, initialValue: TValue) {
     const value = deepCopy(initialValue);
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     if (!Array.isArray(pathValue) || pathValue.length < idx) {
       return;
@@ -191,15 +191,15 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
   }
 
   function replace(arr: TValue[]) {
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     form.stageInitialValue(pathName, arr);
     setInPath(form.values, pathName, arr);
     initFields();
     afterMutation();
   }
 
   function update(idx: number, value: TValue) {
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) {
       return;
@@ -211,22 +211,22 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
 
   function prepend(initialValue: TValue) {
     const value = deepCopy(initialValue);
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;
     if (!Array.isArray(normalizedPathValue)) {
       return;
     }
 
     const newValue = [value, ...normalizedPathValue];
-    form.stageInitialValue(pathName + `[${newValue.length - 1}]`, value);
     setInPath(form.values, pathName, newValue);
+    form.stageInitialValue(pathName + `[0]`, value);
     fields.value.unshift(createEntry(value));
     afterMutation();
   }
 
   function move(oldIdx: number, newIdx: number) {
-    const pathName = unref(arrayPath);
+    const pathName = toValue(arrayPath);
     const pathValue = getFromPath<TValue[]>(form?.values, pathName);
     const newValue = isNullOrUndefined(pathValue) ? [] : [...pathValue];
 
@@ -267,7 +267,7 @@ export function useFieldArray<TValue = unknown>(arrayPath: MaybeRef<string>): Fi
   });
 
   onBeforeUnmount(() => {
-    const idx = form.fieldArrays.findIndex(i => unref(i.path) === unref(arrayPath));
+    const idx = form.fieldArrays.findIndex(i => toValue(i.path) === toValue(arrayPath));
     if (idx >= 0) {
       form.fieldArrays.splice(idx, 1);
     }