diff --git a/.changeset/spotty-parrots-run.md b/.changeset/spotty-parrots-run.md new file mode 100644 index 000000000..ecca78a3e --- /dev/null +++ b/.changeset/spotty-parrots-run.md @@ -0,0 +1,5 @@ +--- +'vee-validate': patch +--- + +feat: allow getters for field arrays diff --git a/packages/vee-validate/src/FieldArray.ts b/packages/vee-validate/src/FieldArray.ts index 69c5cd7a0..75eca8bf6 100644 --- a/packages/vee-validate/src/FieldArray.ts +++ b/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 { diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts index 096cad0ad..173946ec9 100644 --- a/packages/vee-validate/src/types/forms.ts +++ b/packages/vee-validate/src/types/forms.ts @@ -125,7 +125,7 @@ export interface FieldArrayContext { export interface PrivateFieldArrayContext extends FieldArrayContext { reset(): void; - path: MaybeRef; + path: MaybeRefOrGetter; } export interface PrivateFieldContext { diff --git a/packages/vee-validate/src/useFieldArray.ts b/packages/vee-validate/src/useFieldArray.ts index d1f210f33..c48e4b4e9 100644 --- a/packages/vee-validate/src/useFieldArray.ts +++ b/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(arrayPath: MaybeRef): FieldArrayContext { +export function useFieldArray(arrayPath: MaybeRefOrGetter): FieldArrayContext { const form = injectWithSelf(FormContextKey, undefined) as PrivateFormContext; const fields: Ref[]> = ref([]); @@ -48,7 +48,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi let entryCounter = 0; function getCurrentValues() { - return getFromPath(form?.values, unref(arrayPath), []) || []; + return getFromPath(form?.values, toValue(arrayPath), []) || []; } function initFields() { @@ -85,7 +85,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi key, value: computedDeep({ get() { - const currentValues = getFromPath(form?.values, unref(arrayPath), []) || []; + const currentValues = getFromPath(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(arrayPath: MaybeRef): Fi } function remove(idx: number) { - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); if (!pathValue || !Array.isArray(pathValue)) { return; @@ -134,7 +134,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi function push(initialValue: TValue) { const value = deepCopy(initialValue); - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue; if (!Array.isArray(normalizedPathValue)) { @@ -150,7 +150,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi } function swap(indexA: number, indexB: number) { - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); if (!Array.isArray(pathValue) || !(indexA in pathValue) || !(indexB in pathValue)) { return; @@ -174,7 +174,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi function insert(idx: number, initialValue: TValue) { const value = deepCopy(initialValue); - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); if (!Array.isArray(pathValue) || pathValue.length < idx) { return; @@ -191,7 +191,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi } function replace(arr: TValue[]) { - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); form.stageInitialValue(pathName, arr); setInPath(form.values, pathName, arr); initFields(); @@ -199,7 +199,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi } function update(idx: number, value: TValue) { - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); if (!Array.isArray(pathValue) || pathValue.length - 1 < idx) { return; @@ -211,7 +211,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi function prepend(initialValue: TValue) { const value = deepCopy(initialValue); - const pathName = unref(arrayPath); + const pathName = toValue(arrayPath); const pathValue = getFromPath(form?.values, pathName); const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue; if (!Array.isArray(normalizedPathValue)) { @@ -219,14 +219,14 @@ export function useFieldArray(arrayPath: MaybeRef): Fi } 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(form?.values, pathName); const newValue = isNullOrUndefined(pathValue) ? [] : [...pathValue]; @@ -267,7 +267,7 @@ export function useFieldArray(arrayPath: MaybeRef): 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); }