15f630552f
* refactor(form): 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.
48 lines
4.3 KiB
JSON
48 lines
4.3 KiB
JSON
{
|
|
"name": "form",
|
|
"dependencies": [
|
|
"vee-validate",
|
|
"@vee-validate/zod",
|
|
"zod"
|
|
],
|
|
"registryDependencies": [
|
|
"utils",
|
|
"label"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "FormControl.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport { Slot } from 'radix-vue'\nimport { useFormField } from './useFormField'\n\nconst { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n</script>\n\n<template>\n <Slot\n :id=\"formItemId\"\n :aria-describedby=\"!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\"\n :aria-invalid=\"!!error\"\n >\n <slot />\n </Slot>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormDescription.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-sm text-muted-foreground', props.class)\"\n >\n <slot />\n </p>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormItem.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormLabel.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/default/ui/label'\n\nconst props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n error && 'text-destructive',\n props.class,\n )\"\n :for=\"formItemId\"\n >\n <slot />\n </Label>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormMessage.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport { ErrorMessage } from 'vee-validate'\nimport { toValue } from 'vue'\nimport { useFormField } from './useFormField'\n\nconst { name, formMessageId } = useFormField()\n</script>\n\n<template>\n <ErrorMessage\n :id=\"formMessageId\"\n as=\"p\"\n :name=\"toValue(name)\"\n class=\"text-sm font-medium text-destructive\"\n />\n</template>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
|
|
},
|
|
{
|
|
"name": "injectionKeys.ts",
|
|
"content": "import type { InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n"
|
|
},
|
|
{
|
|
"name": "useFormField.ts",
|
|
"content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n\nexport function useFormField() {\n const fieldContext = inject(FieldContextKey)\n const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n const fieldState = {\n valid: useIsFieldValid(),\n isDirty: useIsFieldDirty(),\n isTouched: useIsFieldTouched(),\n error: useFieldError(),\n }\n\n if (!fieldContext)\n throw new Error('useFormField should be used within <FormField>')\n\n const { name } = fieldContext\n const id = fieldItemContext\n\n return {\n id,\n name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
}
|