Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: build registry

Browse Source
This commit is contained in:
zernonia 2023-10-06 13:26:59 +08:00
parent 9b4b0c289e
commit d2aa7534fe
8 changed files with 382 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.cjs
View File

@ -13,5 +13,6 @@ module.exports = {
'no-tabs': 'off',
'no-invalid-character': 'off',
'import/first': 'off',
'@stylistic/js/no-tabs': 'off',
},
}

2
apps/www/.vitepress/theme/config/docs.ts
View File

@ -181,13 +181,11 @@ export const docsConfig: DocsConfig = {
{
title: 'Combobox',
href: '/docs/components/combobox',
label: 'New',
items: [],
},
{
title: 'Command',
href: '/docs/components/command',
label: 'New',
items: [],
},
{

294
apps/www/__registry__/index.ts
View File

@ -100,6 +100,27 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/CheckboxDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/CheckboxDisabled.vue'],
},
CheckboxFormMultiple: {
name: 'CheckboxFormMultiple',
type: 'components:example',
registryDependencies: ['button', 'form', 'checkbox'],
component: () => import('../src/lib/registry/default/example/CheckboxFormMultiple.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/CheckboxFormMultiple.vue'],
},
CheckboxFormSingle: {
name: 'CheckboxFormSingle',
type: 'components:example',
registryDependencies: ['button', 'form', 'checkbox'],
component: () => import('../src/lib/registry/default/example/CheckboxFormSingle.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/CheckboxFormSingle.vue'],
},
CheckboxWithText: {
name: 'CheckboxWithText',
type: 'components:example',
registryDependencies: ['checkbox'],
component: () => import('../src/lib/registry/default/example/CheckboxWithText.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/CheckboxWithText.vue'],
},
CollapsibleDemo: {
name: 'CollapsibleDemo',
type: 'components:example',
@ -114,6 +135,27 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/ComboboxDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/ComboboxDemo.vue'],
},
ComboboxDropdownMenu: {
name: 'ComboboxDropdownMenu',
type: 'components:example',
registryDependencies: ['button', 'command', 'dropdown-menu'],
component: () => import('../src/lib/registry/default/example/ComboboxDropdownMenu.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/ComboboxDropdownMenu.vue'],
},
ComboboxForm: {
name: 'ComboboxForm',
type: 'components:example',
registryDependencies: ['utils', 'button', 'command', 'form', 'popover'],
component: () => import('../src/lib/registry/default/example/ComboboxForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/ComboboxForm.vue'],
},
ComboboxPopover: {
name: 'ComboboxPopover',
type: 'components:example',
registryDependencies: ['utils', 'button', 'command', 'popover'],
component: () => import('../src/lib/registry/default/example/ComboboxPopover.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/ComboboxPopover.vue'],
},
CommandDemo: {
name: 'CommandDemo',
type: 'components:example',
@ -149,6 +191,20 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/DatePickerDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/DatePickerDemo.vue'],
},
DatePickerForm: {
name: 'DatePickerForm',
type: 'components:example',
registryDependencies: ['utils', 'button', 'calendar', 'form', 'popover'],
component: () => import('../src/lib/registry/default/example/DatePickerForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/DatePickerForm.vue'],
},
DatePickerWithPresets: {
name: 'DatePickerWithPresets',
type: 'components:example',
registryDependencies: ['utils', 'button', 'calendar', 'popover', 'select'],
component: () => import('../src/lib/registry/default/example/DatePickerWithPresets.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/DatePickerWithPresets.vue'],
},
DatePickerWithRange: {
name: 'DatePickerWithRange',
type: 'components:example',
@ -184,6 +240,41 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/InputDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputDemo.vue'],
},
InputDisabled: {
name: 'InputDisabled',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/default/example/InputDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputDisabled.vue'],
},
InputFile: {
name: 'InputFile',
type: 'components:example',
registryDependencies: ['input', 'label'],
component: () => import('../src/lib/registry/default/example/InputFile.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputFile.vue'],
},
InputForm: {
name: 'InputForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'input'],
component: () => import('../src/lib/registry/default/example/InputForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputForm.vue'],
},
InputWithButton: {
name: 'InputWithButton',
type: 'components:example',
registryDependencies: ['input', 'button'],
component: () => import('../src/lib/registry/default/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithButton.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',
registryDependencies: ['input', 'label'],
component: () => import('../src/lib/registry/default/example/InputWithLabel.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithLabel.vue'],
},
LabelDemo: {
name: 'LabelDemo',
type: 'components:example',
@ -233,6 +324,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/RadioGroupDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/RadioGroupDemo.vue'],
},
RadioGroupForm: {
name: 'RadioGroupForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'radio-group'],
component: () => import('../src/lib/registry/default/example/RadioGroupForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/RadioGroupForm.vue'],
},
ScrollAreaDemo: {
name: 'ScrollAreaDemo',
type: 'components:example',
@ -247,6 +345,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/SelectDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/SelectDemo.vue'],
},
SelectForm: {
name: 'SelectForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'select'],
component: () => import('../src/lib/registry/default/example/SelectForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/SelectForm.vue'],
},
SeparatorDemo: {
name: 'SeparatorDemo',
type: 'components:example',
@ -282,6 +387,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/SwitchDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/SwitchDemo.vue'],
},
SwitchForm: {
name: 'SwitchForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'switch'],
component: () => import('../src/lib/registry/default/example/SwitchForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/SwitchForm.vue'],
},
TableDemo: {
name: 'TableDemo',
type: 'components:example',
@ -303,6 +415,41 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/TextareaDemo.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaDemo.vue'],
},
TextareaDisabled: {
name: 'TextareaDisabled',
type: 'components:example',
registryDependencies: ['textarea'],
component: () => import('../src/lib/registry/default/example/TextareaDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaDisabled.vue'],
},
TextareaForm: {
name: 'TextareaForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'textarea'],
component: () => import('../src/lib/registry/default/example/TextareaForm.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaForm.vue'],
},
TextareaWithButton: {
name: 'TextareaWithButton',
type: 'components:example',
registryDependencies: ['textarea', 'button'],
component: () => import('../src/lib/registry/default/example/TextareaWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaWithButton.vue'],
},
TextareaWithLabel: {
name: 'TextareaWithLabel',
type: 'components:example',
registryDependencies: ['textarea', 'label'],
component: () => import('../src/lib/registry/default/example/TextareaWithLabel.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaWithLabel.vue'],
},
TextareaWithText: {
name: 'TextareaWithText',
type: 'components:example',
registryDependencies: ['textarea', 'label'],
component: () => import('../src/lib/registry/default/example/TextareaWithText.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/TextareaWithText.vue'],
},
ToggleDemo: {
name: 'ToggleDemo',
type: 'components:example',
@ -536,6 +683,27 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/CheckboxDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/CheckboxDisabled.vue'],
},
CheckboxFormMultiple: {
name: 'CheckboxFormMultiple',
type: 'components:example',
registryDependencies: ['button', 'form', 'checkbox'],
component: () => import('../src/lib/registry/new-york/example/CheckboxFormMultiple.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/CheckboxFormMultiple.vue'],
},
CheckboxFormSingle: {
name: 'CheckboxFormSingle',
type: 'components:example',
registryDependencies: ['button', 'form', 'checkbox'],
component: () => import('../src/lib/registry/new-york/example/CheckboxFormSingle.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/CheckboxFormSingle.vue'],
},
CheckboxWithText: {
name: 'CheckboxWithText',
type: 'components:example',
registryDependencies: ['checkbox'],
component: () => import('../src/lib/registry/new-york/example/CheckboxWithText.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/CheckboxWithText.vue'],
},
CollapsibleDemo: {
name: 'CollapsibleDemo',
type: 'components:example',
@ -550,6 +718,27 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/ComboboxDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/ComboboxDemo.vue'],
},
ComboboxDropdownMenu: {
name: 'ComboboxDropdownMenu',
type: 'components:example',
registryDependencies: ['button', 'command', 'dropdown-menu'],
component: () => import('../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue'],
},
ComboboxForm: {
name: 'ComboboxForm',
type: 'components:example',
registryDependencies: ['utils', 'button', 'command', 'form', 'popover'],
component: () => import('../src/lib/registry/new-york/example/ComboboxForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/ComboboxForm.vue'],
},
ComboboxPopover: {
name: 'ComboboxPopover',
type: 'components:example',
registryDependencies: ['utils', 'button', 'command', 'popover'],
component: () => import('../src/lib/registry/new-york/example/ComboboxPopover.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/ComboboxPopover.vue'],
},
CommandDemo: {
name: 'CommandDemo',
type: 'components:example',
@ -585,6 +774,20 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/DatePickerDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/DatePickerDemo.vue'],
},
DatePickerForm: {
name: 'DatePickerForm',
type: 'components:example',
registryDependencies: ['utils', 'button', 'calendar', 'form', 'popover'],
component: () => import('../src/lib/registry/new-york/example/DatePickerForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/DatePickerForm.vue'],
},
DatePickerWithPresets: {
name: 'DatePickerWithPresets',
type: 'components:example',
registryDependencies: ['utils', 'button', 'calendar', 'popover', 'select'],
component: () => import('../src/lib/registry/new-york/example/DatePickerWithPresets.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/DatePickerWithPresets.vue'],
},
DatePickerWithRange: {
name: 'DatePickerWithRange',
type: 'components:example',
@ -620,6 +823,41 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/InputDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputDemo.vue'],
},
InputDisabled: {
name: 'InputDisabled',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/new-york/example/InputDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputDisabled.vue'],
},
InputFile: {
name: 'InputFile',
type: 'components:example',
registryDependencies: ['input', 'label'],
component: () => import('../src/lib/registry/new-york/example/InputFile.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputFile.vue'],
},
InputForm: {
name: 'InputForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'input'],
component: () => import('../src/lib/registry/new-york/example/InputForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputForm.vue'],
},
InputWithButton: {
name: 'InputWithButton',
type: 'components:example',
registryDependencies: ['input', 'button'],
component: () => import('../src/lib/registry/new-york/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithButton.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',
registryDependencies: ['input', 'label'],
component: () => import('../src/lib/registry/new-york/example/InputWithLabel.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithLabel.vue'],
},
LabelDemo: {
name: 'LabelDemo',
type: 'components:example',
@ -669,6 +907,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/RadioGroupDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/RadioGroupDemo.vue'],
},
RadioGroupForm: {
name: 'RadioGroupForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'radio-group'],
component: () => import('../src/lib/registry/new-york/example/RadioGroupForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/RadioGroupForm.vue'],
},
ScrollAreaDemo: {
name: 'ScrollAreaDemo',
type: 'components:example',
@ -683,6 +928,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/SelectDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/SelectDemo.vue'],
},
SelectForm: {
name: 'SelectForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'select'],
component: () => import('../src/lib/registry/new-york/example/SelectForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/SelectForm.vue'],
},
SeparatorDemo: {
name: 'SeparatorDemo',
type: 'components:example',
@ -718,6 +970,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/SwitchDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/SwitchDemo.vue'],
},
SwitchForm: {
name: 'SwitchForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'switch'],
component: () => import('../src/lib/registry/new-york/example/SwitchForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/SwitchForm.vue'],
},
TableDemo: {
name: 'TableDemo',
type: 'components:example',
@ -739,6 +998,41 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/TextareaDemo.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaDemo.vue'],
},
TextareaDisabled: {
name: 'TextareaDisabled',
type: 'components:example',
registryDependencies: ['textarea'],
component: () => import('../src/lib/registry/new-york/example/TextareaDisabled.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaDisabled.vue'],
},
TextareaForm: {
name: 'TextareaForm',
type: 'components:example',
registryDependencies: ['button', 'form', 'textarea'],
component: () => import('../src/lib/registry/new-york/example/TextareaForm.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaForm.vue'],
},
TextareaWithButton: {
name: 'TextareaWithButton',
type: 'components:example',
registryDependencies: ['textarea', 'button'],
component: () => import('../src/lib/registry/new-york/example/TextareaWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaWithButton.vue'],
},
TextareaWithLabel: {
name: 'TextareaWithLabel',
type: 'components:example',
registryDependencies: ['textarea', 'label'],
component: () => import('../src/lib/registry/new-york/example/TextareaWithLabel.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaWithLabel.vue'],
},
TextareaWithText: {
name: 'TextareaWithText',
type: 'components:example',
registryDependencies: ['textarea', 'label'],
component: () => import('../src/lib/registry/new-york/example/TextareaWithText.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/TextareaWithText.vue'],
},
ToggleDemo: {
name: 'ToggleDemo',
type: 'components:example',

2
apps/www/src/lib/registry/registry.ts
View File

@ -8,7 +8,7 @@ const DEPENDENCIES = new Map<string, string[]>([
['radix-vue', []],
['v-calendar', []],
['@tanstack/vue-table', []],
['formsnap', ['zod']],
['vee-validate', ['@vee-validate/zod', 'zod']],
])
const REGISTRY_DEPENDENCY = '@/'

22
apps/www/src/public/registry/index.json
View File

@ -262,6 +262,28 @@
],
"type": "components:ui"
},
{
"name": "form",
"dependencies": [
"radix-vue",
"vee-validate",
"@vee-validate/zod",
"zod"
],
"registryDependencies": [
"utils"
],
"files": [
"ui/form/FormControl.vue",
"ui/form/FormDescription.vue",
"ui/form/FormItem.vue",
"ui/form/FormLabel.vue",
"ui/form/FormMessage.vue",
"ui/form/index.ts",
"ui/form/useFormField.ts"
],
"type": "components:ui"
},
{
"name": "hover-card",
"dependencies": [

40
apps/www/src/public/registry/styles/default/form.json
View File

@ -1,20 +1,42 @@
{
"name": "form",
"dependencies": [
"@radix-ui/react-label",
"@radix-ui/react-slot",
"@hookform/resolvers",
"zod",
"react-hook-form"
"radix-vue",
"vee-validate",
"@vee-validate/zod",
"zod"
],
"registryDependencies": [
"button",
"label"
"utils"
],
"files": [
{
"name": "form.tsx",
"content": "import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} class={cn(\"space-y-2\", class)} {...props} />\n </FormItemContext.Provider>\n )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ class, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n class={cn(error && \"text-destructive\", class)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n class={cn(\"text-sm text-muted-foreground\", class)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message) : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n class={cn(\"text-sm font-medium text-destructive\", class)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"
"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 FORMI_TEM_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(FORMI_TEM_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 { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n const fieldContext = inject(FieldContextKey)\n const fieldItemContext = inject(FORMI_TEM_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"

4
apps/www/src/public/registry/styles/new-york/alert-dialog.json
View File

@ -14,11 +14,11 @@
},
{
"name": "AlertDialogAction.vue",
"content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n <slot />\n </AlertDialogAction>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n <slot />\n </AlertDialogAction>\n</template>\n"
},
{
"name": "AlertDialogCancel.vue",
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n <slot />\n </AlertDialogCancel>\n</template>\n"
},
{
"name": "AlertDialogContent.vue",

40
apps/www/src/public/registry/styles/new-york/form.json
View File

@ -1,20 +1,42 @@
{
"name": "form",
"dependencies": [
"@radix-ui/react-label",
"@radix-ui/react-slot",
"@hookform/resolvers",
"zod",
"react-hook-form"
"radix-vue",
"vee-validate",
"@vee-validate/zod",
"zod"
],
"registryDependencies": [
"button",
"label"
"utils"
],
"files": [
{
"name": "form.tsx",
"content": "import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ class, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} class={cn(\"space-y-2\", class)} {...props} />\n </FormItemContext.Provider>\n )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ class, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n class={cn(error && \"text-destructive\", class)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n class={cn(\"text-[0.8rem] text-muted-foreground\", class)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ class, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message) : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n class={cn(\"text-[0.8rem] font-medium text-destructive\", class)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n"
"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 { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst { formDescriptionId } = useFormField()\n</script>\n\n<template>\n <p\n :id=\"formDescriptionId\"\n :class=\"cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </p>\n</template>\n"
},
{
"name": "FormItem.vue",
"content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORMI_TEM_INJECTION_KEY\n = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst id = useId()\nprovide(FORMI_TEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', $attrs.class ?? '')\">\n <slot />\n </div>\n</template>\n"
},
{
"name": "FormLabel.vue",
"content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\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 $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-[0.8rem] 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 { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n const fieldContext = inject(FieldContextKey)\n const fieldItemContext = inject(FORMI_TEM_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"