feat(VForm): expose component instances

closes vuetifyjs#19365
VIXI0 · Mar 20, 2024 · 6b9d4db · 6b9d4db
1 parent d9c967b
commit 6b9d4db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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<string[]>
     reset: () => void
     resetValidation: () => void
@@ -32,6 +33,7 @@ export interface FormField {
   validate: () => Promise<string[]>
   reset: () => void
   resetValidation: () => void
+  vm: Raw<ComponentInternalInstance>
   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
@@ -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,