feat: basic form group impl with aria support

packages/core/src/constants/index.ts

@@ -8,6 +8,7 @@ export const FieldTypePrefixes = {
   RadioButtonGroup: 'rbg',
   Slider: 'sl',
   SearchField: 'sf',
+  FormGroup: 'fg',
 } as const;
 
 export const NOOP = () => {};

packages/core/src/index.ts

@@ -9,5 +9,6 @@ export * from './useSpinButton';
 export * from './types';
 export * from './config';
 export * from './form';
+export * from './useFormGroup';
 export * from './validation';
 export { normalizePath } from './utils/path';

packages/core/src/useFormGroup/index.ts

@@ -0,0 +1 @@
+export * from './useFormGroup';

packages/core/src/useFormGroup/useFormGroup.ts

@@ -0,0 +1,45 @@
+import { computed, Ref, shallowRef } from 'vue';
+import { useLabel } from '../a11y/useLabel';
+import { FieldTypePrefixes } from '../constants';
+import { FormObject, Reactivify, TypedSchema } from '../types';
+import { normalizeProps, useUniqId, withRefCapture } from '../utils/common';
+
+export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput> {
+  label?: string;
+  schema?: TypedSchema<TInput, TOutput>;
+}
+
+export function useFormGroup<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput>(
+  _props: Reactivify<FormGroupProps<TInput, TOutput>>,
+  elementRef?: Ref<HTMLElement>,
+) {
+  const id = useUniqId(FieldTypePrefixes.FormGroup);
+  const props = normalizeProps(_props);
+  const groupRef = elementRef || shallowRef<HTMLInputElement>();
+
+  const { labelProps, labelledByProps } = useLabel({
+    for: id,
+    label: props.label,
+    targetRef: groupRef,
+  });
+
+  const groupProps = computed(() => {
+    const isFieldSet = groupRef.value?.tagName === 'FIELDSET';
+
+    return withRefCapture(
+      {
+        id,
+        ...(isFieldSet ? {} : labelledByProps.value),
+        role: isFieldSet ? undefined : 'group',
+      },
+      groupRef,
+      elementRef,
+    );
+  });
+
+  return {
+    groupRef,
+    labelProps,
+    groupProps,
+  };
+}

packages/playground/src/App.vue

@@ -1,21 +1,20 @@
 <template>
   <div class="flex flex-col">
-    <InputText label="deep" name="some.deep.path" />
-    <InputText label="arr" name="some.array.0.path" />
-
-    <span data-testid="e2">{{ getError('some.array.0.path') }}</span>
-
-    <pre>{{ getErrors() }}</pre>
+    <FormGroup label="Shipping Information">
+      <InputText label="deep" name="some.deep.path" />
+      <InputText label="arr" name="some.array.0.path" />
+    </FormGroup>
   </div>
 </template>
 
 <script lang="ts" setup>
 import InputText from '@/components/InputText.vue';
-import { useForm } from '@formwerk/core';
+import FormGroup from '@/components/FormGroup.vue';
+import { useForm, useFormGroup } from '@formwerk/core';
 import { defineSchema } from '@formwerk/schema-zod';
 import { z } from 'zod';
 
-const { getError, isValid, getErrors } = useForm({
+const form = useForm({
   schema: defineSchema(
     z.object({
       some: z.object({

packages/playground/src/components/FormGroup.vue

@@ -0,0 +1,15 @@
+<template>
+  <fieldset v-bind="groupProps">
+    <legend v-bind="labelProps">Shipping Address</legend>
+
+    <slot />
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { FormGroupProps, useFormGroup } from '@formwerk/core';
+
+const props = defineProps<FormGroupProps>();
+
+const { labelProps, groupProps } = useFormGroup(props);
+</script>