sigma-ui/__generated/registry-schemes/style-system/tailwind/form.json

CLI for SIGMA-UI components.

{
  "name": "form",
  "dependencies": [
    "vee-validate",
    "@vee-validate/zod",
    "zod"
  ],
  "registryDependencies": [],
  "files": [
    {
      "name": "FormControl.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Slot } from 'reka-ui';\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 { useFormField } from './useFormField';\nimport { cn } from '@ui/utils';\n\nconst { formDescriptionId } = useFormField();\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    :class=\"cn('text-sm text-muted-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </p>\n</template>\n"
    },
    {
      "name": "FormItem.vue",
      "content": "<script lang=\"ts\" setup>\nimport { provide } from 'vue';\nimport { useId } from 'reka-ui';\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys';\nimport { cn } from '@ui/utils';\n\nconst id = useId();\nprovide(FORM_ITEM_INJECTION_KEY, id);\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col gap-2', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "name": "FormLabel.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui';\nimport { useFormField } from './useFormField';\nimport { cn } from '@ui/utils';\nimport { Label } from '@ui/registry/tailwind/ui/label';\n\nconst props = defineProps<LabelProps>();\n\nconst { error, formItemId } = useFormField();\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      error && 'text-destructive',\n      $attrs.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  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { name } = fieldContext;\n  const id = fieldItemContext;\n\n  const fieldState = {\n    valid: useIsFieldValid(name),\n    isDirty: useIsFieldDirty(name),\n    isTouched: useIsFieldTouched(name),\n    error: useFieldError(name),\n  };\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"
}