gvf3n4ygn-test/__generated/registry-schemes/style-system/css/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';\n\nconst { formDescriptionId } = useFormField();\n</script>\n\n<template>\n  <p\n    :id=\"formDescriptionId\"\n    class=\"sigma-ui-form-description\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </p>\n</template>\n\n<style>\n.sigma-ui-form-description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\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';\n\nconst id = useId();\nprovide(FORM_ITEM_INJECTION_KEY, id);\n</script>\n\n<template>\n  <div :class=\"['form-item', $attrs.class]\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.form-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n</style>\n"
    },
    {
      "name": "FormLabel.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { LabelProps } from 'reka-ui';\nimport { useFormField } from './useFormField';\nimport { Label } from '@ui/registry/css/ui/label';\n\nconst props = defineProps<LabelProps>();\n\nconst { error, formItemId } = useFormField();\n</script>\n\n<template>\n  <Label\n    class=\"sigma-ui-form-label\"\n    :class=\"[$attrs.class ?? '', { 'sigma-ui-form-label--error': error }]\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n\n<style>\n.sigma-ui-form-label {\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-form-label--error {\n  color: hsl(var(--destructive));\n}\n</style>\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=\"sigma-ui-form-message\"\n  />\n</template>\n\n<style>\n.sigma-ui-form-message {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  color: hsl(var(--destructive));\n}\n</style>\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"
}