refactor(components): move FORM_ITEM_INJECTION_KEY to a different module
By exporting the from the file, we can remove the need of having multiple script tags inside the component. This change helps with the linters and formatters, expecially with defaults.
This commit is contained in:
parent
6a6968b8ee
commit
f9eb842662
|
|
@ -1,13 +1,7 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { HTMLAttributes, InjectionKey } from 'vue'
|
|
||||||
|
|
||||||
export const FORM_ITEM_INJECTION_KEY
|
|
||||||
= Symbol() as InjectionKey<string>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { provide } from 'vue'
|
import { type HTMLAttributes, provide } from 'vue'
|
||||||
import { useId } from 'radix-vue'
|
import { useId } from 'radix-vue'
|
||||||
|
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
|
||||||
export { default as FormControl } from './FormControl.vue'
|
export { default as FormControl } from './FormControl.vue'
|
||||||
export { default as FormMessage } from './FormMessage.vue'
|
export { default as FormMessage } from './FormMessage.vue'
|
||||||
export { default as FormDescription } from './FormDescription.vue'
|
export { default as FormDescription } from './FormDescription.vue'
|
||||||
|
export * from './injectionKeys'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import type { InjectionKey } from 'vue'
|
||||||
|
|
||||||
|
export const FORM_ITEM_INJECTION_KEY
|
||||||
|
= Symbol() as InjectionKey<string>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
|
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
|
||||||
import { inject } from 'vue'
|
import { inject } from 'vue'
|
||||||
import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
|
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
|
||||||
|
|
||||||
export function useFormField() {
|
export function useFormField() {
|
||||||
const fieldContext = inject(FieldContextKey)
|
const fieldContext = inject(FieldContextKey)
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,7 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { HTMLAttributes, InjectionKey } from 'vue'
|
|
||||||
|
|
||||||
export const FORM_ITEM_INJECTION_KEY
|
|
||||||
= Symbol() as InjectionKey<string>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { provide } from 'vue'
|
import { type HTMLAttributes, provide } from 'vue'
|
||||||
import { useId } from 'radix-vue'
|
import { useId } from 'radix-vue'
|
||||||
|
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
|
||||||
export { default as FormControl } from './FormControl.vue'
|
export { default as FormControl } from './FormControl.vue'
|
||||||
export { default as FormMessage } from './FormMessage.vue'
|
export { default as FormMessage } from './FormMessage.vue'
|
||||||
export { default as FormDescription } from './FormDescription.vue'
|
export { default as FormDescription } from './FormDescription.vue'
|
||||||
|
export * from './injectionKeys'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import type { InjectionKey } from 'vue'
|
||||||
|
|
||||||
|
export const FORM_ITEM_INJECTION_KEY
|
||||||
|
= Symbol() as InjectionKey<string>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
|
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
|
||||||
import { inject } from 'vue'
|
import { inject } from 'vue'
|
||||||
import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
|
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
|
||||||
|
|
||||||
export function useFormField() {
|
export function useFormField() {
|
||||||
const fieldContext = inject(FieldContextKey)
|
const fieldContext = inject(FieldContextKey)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user