diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts index 35f18e6e9..738c16561 100644 --- a/packages/vue3/src/form.ts +++ b/packages/vue3/src/form.ts @@ -12,13 +12,27 @@ import { VisitOptions, } from '@inertiajs/core' import { isEqual } from 'lodash-es' -import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, SlotsType } from 'vue' +import { + computed, + defineComponent, + h, + inject, + InjectionKey, + onBeforeUnmount, + onMounted, + PropType, + provide, + ref, + SlotsType, +} from 'vue' import useForm from './useForm' type FormSubmitOptions = Omit const noop = () => undefined +export const FormContextKey: InjectionKey = Symbol('InertiaForm') + const Form = defineComponent({ name: 'Form', slots: Object as SlotsType<{ @@ -249,6 +263,8 @@ const Form = defineComponent({ expose(exposed) + provide(FormContextKey, exposed) + return () => { return h( 'form', @@ -269,4 +285,8 @@ const Form = defineComponent({ }, }) +export function useFormContext(): FormComponentRef | undefined { + return inject(FormContextKey) +} + export default Form diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts index e44477ffc..e247e9a9d 100755 --- a/packages/vue3/src/index.ts +++ b/packages/vue3/src/index.ts @@ -5,7 +5,7 @@ export { progress, router } from '@inertiajs/core' export { usePage } from './app' export { default as createInertiaApp } from './createInertiaApp' export { default as Deferred } from './deferred' -export { default as Form } from './form' +export { default as Form, FormContextKey, useFormContext } from './form' export { default as Head } from './head' export { default as InfiniteScroll } from './infiniteScroll' export { InertiaLinkProps, default as Link } from './link'