43 lines
4.3 KiB
JSON
43 lines
4.3 KiB
JSON
{
|
|
"name": "form",
|
|
"dependencies": [
|
|
"radix-vue",
|
|
"vee-validate",
|
|
"@vee-validate/zod",
|
|
"zod"
|
|
],
|
|
"registryDependencies": [
|
|
"utils"
|
|
],
|
|
"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 { useAttrs } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst { formDescriptionId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-sm text-muted-foreground', className ?? '')\"\n v-bind=\"rest\"\n >\n <slot />\n </p>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormItem.vue",
|
|
"content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide, useAttrs } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', className ?? '')\" v-bind=\"rest\">\n <slot />\n </div>\n</template>\n"
|
|
},
|
|
{
|
|
"name": "FormLabel.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n <Label\n :class=\"cn(\n 'block text-sm tracking-tight font-medium text-foreground text-left',\n error && 'text-destructive',\n className ?? '',\n )\"\n :for=\"formItemId\"\n v-bind=\"rest\"\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'\n"
|
|
},
|
|
{
|
|
"name": "useFormField.ts",
|
|
"content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\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"
|
|
} |