From 56c5c62670ff185d482c284b915aca920e5b56cf Mon Sep 17 00:00:00 2001 From: Kael Date: Wed, 13 Mar 2024 22:08:49 +1100 Subject: [PATCH] feat(VForm): expose component instances closes #19365 --- packages/vuetify/src/composables/form.ts | 9 ++++++--- packages/vuetify/src/composables/validation.ts | 4 +++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/vuetify/src/composables/form.ts b/packages/vuetify/src/composables/form.ts index e90bd0e2d7b..a75f907de69 100644 --- a/packages/vuetify/src/composables/form.ts +++ b/packages/vuetify/src/composables/form.ts @@ -2,17 +2,18 @@ import { useProxiedModel } from '@/composables/proxiedModel' // Utilities -import { computed, inject, provide, ref, shallowRef, toRef, watch } from 'vue' +import { computed, inject, markRaw, provide, ref, shallowRef, toRef, watch } from 'vue' import { consoleWarn, propsFactory } from '@/util' // Types -import type { ComputedRef, InjectionKey, PropType, Ref } from 'vue' +import type { ComponentInternalInstance, ComputedRef, InjectionKey, PropType, Raw, Ref } from 'vue' import type { ValidationProps } from './validation' import type { EventProp } from '@/util' export interface FormProvide { register: (item: { id: number | string + vm: ComponentInternalInstance validate: () => Promise reset: () => void resetValidation: () => void @@ -32,6 +33,7 @@ export interface FormField { validate: () => Promise reset: () => void resetValidation: () => void + vm: Raw isValid: boolean | null errorMessages: string[] } @@ -141,7 +143,7 @@ export function createForm (props: FormProps) { }, { deep: true, flush: 'post' }) provide(FormKey, { - register: ({ id, validate, reset, resetValidation }) => { + register: ({ id, vm, validate, reset, resetValidation }) => { if (items.value.some(item => item.id === id)) { consoleWarn(`Duplicate input name "${id}"`) } @@ -151,6 +153,7 @@ export function createForm (props: FormProps) { validate, reset, resetValidation, + vm: markRaw(vm), isValid: null, errorMessages: [], }) diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts index 347eeec9f08..ca1f5c9926b 100644 --- a/packages/vuetify/src/composables/validation.ts +++ b/packages/vuetify/src/composables/validation.ts @@ -6,7 +6,7 @@ import { useToggleScope } from '@/composables/toggleScope' // Utilities import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue' -import { getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util' +import { getCurrentInstance, getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util' // Types import type { PropType } from 'vue' @@ -120,11 +120,13 @@ export function useValidation ( } }) + const vm = getCurrentInstance('validation') const uid = computed(() => props.name ?? unref(id)) onBeforeMount(() => { form?.register({ id: uid.value, + vm, validate, reset, resetValidation,