From 15f630552fc51f015ed9b28092c1dc8d208748a3 Mon Sep 17 00:00:00 2001 From: Simone Colabufalo Date: Fri, 31 May 2024 18:33:40 +0200 Subject: [PATCH 1/4] refactor: FormItem single script setup (#573) * 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. --- apps/www/src/lib/registry/default/ui/form/FormItem.vue | 10 ++-------- apps/www/src/lib/registry/default/ui/form/index.ts | 1 + .../src/lib/registry/default/ui/form/injectionKeys.ts | 4 ++++ .../src/lib/registry/default/ui/form/useFormField.ts | 2 +- .../www/src/lib/registry/new-york/ui/form/FormItem.vue | 10 ++-------- apps/www/src/lib/registry/new-york/ui/form/index.ts | 1 + .../src/lib/registry/new-york/ui/form/injectionKeys.ts | 4 ++++ .../src/lib/registry/new-york/ui/form/useFormField.ts | 2 +- apps/www/src/public/registry/index.json | 1 + apps/www/src/public/registry/styles/default/form.json | 10 +++++++--- apps/www/src/public/registry/styles/new-york/form.json | 10 +++++++--- 11 files changed, 31 insertions(+), 24 deletions(-) create mode 100644 apps/www/src/lib/registry/default/ui/form/injectionKeys.ts create mode 100644 apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts diff --git a/apps/www/src/lib/registry/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue index ad120be9..444d9013 100644 --- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue +++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue @@ -1,13 +1,7 @@ - - - \n\n\n\n\n" + "content": "\n\n\n" }, { "name": "FormLabel.vue", @@ -32,11 +32,15 @@ }, { "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" + "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\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 ')\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" + "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 ')\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" diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json index e8983508..59f5d278 100644 --- a/apps/www/src/public/registry/styles/new-york/form.json +++ b/apps/www/src/public/registry/styles/new-york/form.json @@ -20,7 +20,7 @@ }, { "name": "FormItem.vue", - "content": "\n\n\n\n\n" + "content": "\n\n\n" }, { "name": "FormLabel.vue", @@ -32,11 +32,15 @@ }, { "name": "index.ts", - "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } 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" + "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } 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\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 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 ')\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" + "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 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 ')\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" From e54e06bb989bb2359e4ab2684926a1db52245718 Mon Sep 17 00:00:00 2001 From: zernonia Date: Sun, 2 Jun 2024 00:01:53 +0800 Subject: [PATCH 2/4] docs: fix form page --- apps/www/src/content/examples/forms/{forms.md => index.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/www/src/content/examples/forms/{forms.md => index.md} (100%) diff --git a/apps/www/src/content/examples/forms/forms.md b/apps/www/src/content/examples/forms/index.md similarity index 100% rename from apps/www/src/content/examples/forms/forms.md rename to apps/www/src/content/examples/forms/index.md From 47ff130ffb4483b03634d44ba9be7916e9cf0319 Mon Sep 17 00:00:00 2001 From: zernonia Date: Sun, 2 Jun 2024 00:05:39 +0800 Subject: [PATCH 3/4] docs: fix form profile --- apps/www/src/examples/forms/components/SidebarNav.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/src/examples/forms/components/SidebarNav.vue b/apps/www/src/examples/forms/components/SidebarNav.vue index ba79807a..684cea06 100644 --- a/apps/www/src/examples/forms/components/SidebarNav.vue +++ b/apps/www/src/examples/forms/components/SidebarNav.vue @@ -13,7 +13,7 @@ const $route = useRoute() const sidebarNavItems: Item[] = [ { title: 'Profile', - href: '/examples/forms/forms', + href: '/examples/forms', }, { title: 'Account', From f48d1d4f4c1e0dbe92fb0ba726aff628e94c7f61 Mon Sep 17 00:00:00 2001 From: zernonia Date: Sun, 2 Jun 2024 00:16:12 +0800 Subject: [PATCH 4/4] docs: fix data-table colspan --- apps/www/src/content/docs/components/data-table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md index 37b97ce3..9bd2ad21 100644 --- a/apps/www/src/content/docs/components/data-table.md +++ b/apps/www/src/content/docs/components/data-table.md @@ -202,7 +202,7 @@ const table = useVueTable({