diff --git a/packages/core/src/types/common.ts b/packages/core/src/types/common.ts index 52af0a20..3cff3715 100644 --- a/packages/core/src/types/common.ts +++ b/packages/core/src/types/common.ts @@ -4,7 +4,7 @@ export type Numberish = number | `${number}`; export type AriaLabelProps = { id: string; - for: string; + for?: string; }; export type AriaDescriptionProps = { diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts index 02a3267e..e6e28551 100644 --- a/packages/core/src/useFormGroup/useFormGroup.ts +++ b/packages/core/src/useFormGroup/useFormGroup.ts @@ -1,7 +1,7 @@ -import { computed, Ref, shallowRef } from 'vue'; +import { computed, createBlock, defineComponent, Fragment, openBlock, Ref, shallowRef, toValue, VNode } from 'vue'; import { useLabel } from '../a11y/useLabel'; import { FieldTypePrefixes } from '../constants'; -import { FormObject, Reactivify, TypedSchema } from '../types'; +import { AriaLabelableProps, AriaLabelProps, FormObject, Reactivify, TypedSchema } from '../types'; import { normalizeProps, useUniqId, withRefCapture } from '../utils/common'; export interface FormGroupProps { @@ -9,6 +9,11 @@ export interface FormGroupProps; } +interface GroupProps extends AriaLabelableProps { + id: string; + role?: 'group'; +} + export function useFormGroup( _props: Reactivify>, elementRef?: Ref, @@ -23,7 +28,7 @@ export function useFormGroup { + const groupProps = computed(() => { const isFieldSet = groupRef.value?.tagName === 'FIELDSET'; return withRefCapture( @@ -37,9 +42,37 @@ export function useFormGroup) { + const impl = defineComponent({ + setup(_, { slots }) { + return () => ( + openBlock(), + createBlock(Fragment), + slots.default?.({ groupProps: toValue(groupProps), labelProps: toValue(labelProps) }) + ); + }, + }); + + return impl as typeof impl & { + new (): { + $slots: { + default: (arg: InlineComponentProps) => VNode[]; + }; + }; }; } diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index 5a805f0a..74222348 100644 --- a/packages/playground/src/App.vue +++ b/packages/playground/src/App.vue @@ -1,19 +1,25 @@