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

Merge a7f0f7eff2 into 3eaef4a748

Browse Source
This commit is contained in:
Damir 2024-12-18 04:13:27 +00:00 committed by GitHub
commit a2cc70b85d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/www/src/lib/registry/default/ui/form/FormControl.vue
View File

@ -1,16 +1,35 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Slot } from 'radix-vue' import { Slot } from 'radix-vue';
import { useFormField } from './useFormField' import { useFormField } from './useFormField';
const { error, formItemId, formDescriptionId, formMessageId } = useFormField() const props = defineProps<{
label?: string;
description?: string;
}>();
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
</script> </script>
<template> <template>
<FormLabel v-if="props.label">{{ props.label }}</FormLabel>
<Slot <Slot
:id="formItemId" :id="formItemId"
:aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`" :aria-describedby="
!error
? `${formDescriptionId}`
: props.description
? `${formMessageId}`
: `${formDescriptionId} ${formMessageId}`
"
:aria-invalid="!!error" :aria-invalid="!!error"
> >
<slot /> <slot />
</Slot> </Slot>
<FormDescription v-if="props.description && !error">
{{ props.description }}
</FormDescription>
<FormMessage v-if="props.description" />
</template> </template>

27
apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
View File

@ -1,16 +1,35 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Slot } from 'radix-vue' import { Slot } from 'radix-vue';
import { useFormField } from './useFormField' import { useFormField } from './useFormField';
const { error, formItemId, formDescriptionId, formMessageId } = useFormField() const props = defineProps<{
label?: string;
description?: string;
}>();
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
</script> </script>
<template> <template>
<FormLabel v-if="props.label">{{ props.label }}</FormLabel>
<Slot <Slot
:id="formItemId" :id="formItemId"
:aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`" :aria-describedby="
!error
? `${formDescriptionId}`
: props.description
? `${formMessageId}`
: `${formDescriptionId} ${formMessageId}`
"
:aria-invalid="!!error" :aria-invalid="!!error"
> >
<slot /> <slot />
</Slot> </Slot>
<FormDescription v-if="props.description && !error">
{{ props.description }}
</FormDescription>
<FormMessage v-if="props.description" />
</template> </template>