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

Merge remote-tracking branch 'upstream/dev' into dev

Browse Source
This commit is contained in:
Sadegh Barati 2024-06-03 12:24:37 +03:30
commit 5d8648cae5
14 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/content/docs/components/data-table.md
View File

@ -202,7 +202,7 @@ const table = useVueTable({
</template>
<template v-else>
<TableRow>
<TableCell :col-span="columns.length" class="h-24 text-center">
<TableCell :colspan="columns.length" class="h-24 text-center">
No results.
</TableCell>
</TableRow>

0
apps/www/src/content/examples/forms/forms.md → apps/www/src/content/examples/forms/index.md
View File

2
apps/www/src/examples/forms/components/SidebarNav.vue
View File

@ -13,7 +13,7 @@ const $route = useRoute()
const sidebarNavItems: Item[] = [
{
title: 'Profile',
href: '/examples/forms/forms',
href: '/examples/forms',
},
{
title: 'Account',

10
apps/www/src/lib/registry/default/ui/form/FormItem.vue
View File

@ -1,13 +1,7 @@
<script lang="ts">
import type { HTMLAttributes, InjectionKey } from 'vue'
export const FORM_ITEM_INJECTION_KEY
= Symbol() as InjectionKey<string>
</script>
<script lang="ts" setup>
import { provide } from 'vue'
import { type HTMLAttributes, provide } from 'vue'
import { useId } from 'radix-vue'
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
import { cn } from '@/lib/utils'
const props = defineProps<{

1
apps/www/src/lib/registry/default/ui/form/index.ts
View File

@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
export { default as FormControl } from './FormControl.vue'
export { default as FormMessage } from './FormMessage.vue'
export { default as FormDescription } from './FormDescription.vue'
export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'

4
apps/www/src/lib/registry/default/ui/form/injectionKeys.ts Normal file
View File

@ -0,0 +1,4 @@
import type { InjectionKey } from 'vue'
export const FORM_ITEM_INJECTION_KEY
= Symbol() as InjectionKey<string>

2
apps/www/src/lib/registry/default/ui/form/useFormField.ts
View File

@ -1,6 +1,6 @@
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
import { inject } from 'vue'
import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
export function useFormField() {
const fieldContext = inject(FieldContextKey)

10
apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
View File

@ -1,13 +1,7 @@
<script lang="ts">
import type { HTMLAttributes, InjectionKey } from 'vue'
export const FORM_ITEM_INJECTION_KEY
= Symbol() as InjectionKey<string>
</script>
<script lang="ts" setup>
import { provide } from 'vue'
import { type HTMLAttributes, provide } from 'vue'
import { useId } from 'radix-vue'
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
import { cn } from '@/lib/utils'
const props = defineProps<{

1
apps/www/src/lib/registry/new-york/ui/form/index.ts
View File

@ -4,3 +4,4 @@ export { default as FormLabel } from './FormLabel.vue'
export { default as FormControl } from './FormControl.vue'
export { default as FormMessage } from './FormMessage.vue'
export { default as FormDescription } from './FormDescription.vue'
export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'

4
apps/www/src/lib/registry/new-york/ui/form/injectionKeys.ts Normal file
View File

@ -0,0 +1,4 @@
import type { InjectionKey } from 'vue'
export const FORM_ITEM_INJECTION_KEY
= Symbol() as InjectionKey<string>

2
apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
View File

@ -1,6 +1,6 @@
import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
import { inject } from 'vue'
import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
export function useFormField() {
const fieldContext = inject(FieldContextKey)

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

@ -464,6 +464,7 @@
"ui/form/FormLabel.vue",
"ui/form/FormMessage.vue",
"ui/form/index.ts",
"ui/form/injectionKeys.ts",
"ui/form/useFormField.ts"
],
"type": "components:ui"

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

@ -20,7 +20,7 @@
},
{
"name": "FormItem.vue",
"content": "<script lang=\"ts\">\nimport type { HTMLAttributes, 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 } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\n"
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\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<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 './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"
"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 <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"

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

@ -20,7 +20,7 @@
},
{
"name": "FormItem.vue",
"content": "<script lang=\"ts\">\nimport type { HTMLAttributes, 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 } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\n"
"content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n <div :class=\"cn('space-y-2', props.class)\">\n <slot />\n </div>\n</template>\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<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 './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 <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"
"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 <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"