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

Allow to pass label and description via props

Browse Source
This commit is contained in:
thewebartisan7 2024-12-17 11:42:37 +01:00
parent 3eaef4a748
commit caa1010bc7
2 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cn } from '@/lib/utils' import { cn } from "@/lib/utils";
import { useId } from 'radix-vue' import { useId } from "radix-vue";
import { type HTMLAttributes, provide } from 'vue' import { type HTMLAttributes, provide } from "vue";
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys' import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
import { useFormField } from "./useFormField";
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes["class"];
}>() label?: string;
description?: string;
}>();
const id = useId() const { error } = useFormField();
provide(FORM_ITEM_INJECTION_KEY, id)
const id = useId();
provide(FORM_ITEM_INJECTION_KEY, id);
</script> </script>
<template> <template>
<div :class="cn('space-y-2', props.class)"> <div :class="cn('space-y-2', props.class)">
<FormLabel v-if="props.label">{{ props.label }}</FormLabel>
<slot /> <slot />
<FormDescription v-if="props.description && !error">
{{ props.description }}
</FormDescription>
<FormMessage v-if="props.description" />
</div> </div>
</template> </template>

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

@ -1,19 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cn } from '@/lib/utils' import { cn } from "@/lib/utils";
import { useId } from 'radix-vue' import { useId } from "radix-vue";
import { type HTMLAttributes, provide } from 'vue' import { type HTMLAttributes, provide } from "vue";
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys' import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
import { useFormField } from "./useFormField";
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes["class"];
}>() label?: string;
description?: string;
}>();
const id = useId() const { error } = useFormField();
provide(FORM_ITEM_INJECTION_KEY, id)
const id = useId();
provide(FORM_ITEM_INJECTION_KEY, id);
</script> </script>
<template> <template>
<div :class="cn('space-y-2', props.class)"> <div :class="cn('space-y-2', props.class)">
<FormLabel v-if="props.label">{{ props.label }}</FormLabel>
<slot /> <slot />
<FormDescription v-if="props.description && !error">
{{ props.description }}
</FormDescription>
<FormMessage v-if="props.description" />
</div> </div>
</template> </template>