refactor(Form): use formwerk

package.json

@@ -112,6 +112,7 @@
   },
   "dependencies": {
     "@ai-sdk/vue": "^2.0.51",
+    "@formwerk/core": "^0.14.1",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.9.0",
     "@internationalized/number": "^3.6.5",

playgrounds/nuxt/app/pages/components/form.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import * as z from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-import FormExampleElements from '../../../../../docs/app/components/content/examples/form/FormExampleElements.vue'
-import FormExampleNestedList from '../../../../../docs/app/components/content/examples/form/FormExampleNestedList.vue'
-import FormExampleNested from '../../../../../docs/app/components/content/examples/form/FormExampleNested.vue'
+import type { FormSubmitEvent, FormErrorEvent } from '@nuxt/ui'
 
 const schema = z.object({
   email: z.email(),
@@ -16,53 +13,40 @@ type Schema = z.input<typeof schema>
 const state = reactive<Partial<Schema>>({})
 
 function onSubmit(event: FormSubmitEvent<Schema>) {
-  console.log(event.data)
+  console.log('submit', event.data)
 }
 
-const validateOn = ref(['input', 'change', 'blur'])
-const disabled = ref(false)
+function onError(event: FormErrorEvent) {
+  console.log('error', event.errors)
+}
 </script>
 
 <template>
-  <div class="flex flex-col gap-8">
-    <div class="flex gap-4">
-      <UForm
-        :state="state"
-        :schema="schema"
-        class="gap-4 flex flex-col w-60"
-        @submit="onSubmit"
-      >
-        <UFormField label="Email" name="email">
-          <UInput v-model="state.email" placeholder="[email protected]" />
-        </UFormField>
-
-        <UFormField label="Password" name="password">
-          <UInput v-model="state.password" type="password" />
-        </UFormField>
-
-        <UFormField name="tos">
-          <UCheckbox v-model="state.tos" label="I accept the terms and conditions" />
-        </UFormField>
-
-        <div>
-          <UButton type="submit">
-            Submit
-          </UButton>
-        </div>
-      </UForm>
-      <FormExampleNested />
-      <FormExampleNestedList />
-    </div>
-
-    <div class="border border-default rounded-lg">
-      <div class="py-2 px-4 flex gap-4 items-center">
-        <UFormField label="Validate on" class="flex items-center gap-2">
-          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
-        </UFormField>
-        <UCheckbox v-model="disabled" label="Disabled" />
+  <div class="flex gap-4">
+    <UForm
+      :state="state"
+      :schema="schema"
+      class="gap-4 flex flex-col w-60"
+      @submit="onSubmit"
+      @error="onError"
+    >
+      <UFormField label="Email" name="email">
+        <UInput v-model="state.email" placeholder="[email protected]" />
+      </UFormField>
+
+      <UFormField label="Password" name="password">
+        <UInput v-model="state.password" type="password" />
+      </UFormField>
+
+      <UFormField name="tos">
+        <UCheckbox v-model="state.tos" label="I accept the terms and conditions" />
+      </UFormField>
+
+      <div>
+        <UButton type="submit">
+          Submit
+        </UButton>
       </div>
-
-      <FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-default p-4" />
-    </div>
+    </UForm>
   </div>
 </template>

src/runtime/components/Checkbox.vue

@@ -59,9 +59,10 @@ export interface CheckboxSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, useId } from 'vue'
+import { computed } from 'vue'
 import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { useCustomControl } from '@formwerk/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
@@ -79,8 +80,13 @@ const appConfig = useAppConfig() as Checkbox['AppConfig']
 
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
-const id = _id.value ?? useId()
+const { emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const { controlId, controlProps, field: { isDisabled } } = useCustomControl<boolean>({
+  name,
+  disabled,
+  required: props.required,
+  controlType: 'UCheckbox'
+})
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })({
   size: size.value,
@@ -105,11 +111,9 @@ function onUpdate(value: any) {
   <Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
-        :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...$attrs, ...controlProps }"
         v-model="modelValue"
-        :name="name"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
@@ -123,7 +127,7 @@ function onUpdate(value: any) {
     </div>
 
     <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="controlId" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>

src/runtime/components/CheckboxGroup.vue

@@ -77,9 +77,10 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
 </script>
 
 <script setup lang="ts" generic="T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'">
-import { computed, useId } from 'vue'
+import { computed } from 'vue'
 import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { useCustomControl } from '@formwerk/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { get, omit } from '../utils'
@@ -101,8 +102,13 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
 const getProxySlots = () => omit(slots, ['legend'])
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(props, { bind: false })
-const id = _id.value ?? useId()
+const { emitFormChange, emitFormInput, color, name, size, disabled } = useFormField<CheckboxGroupProps<T>>(props, { bind: false })
+const { controlProps, controlId } = useCustomControl({
+  name,
+  disabled,
+  required: props.required,
+  controlType: 'UInputMenu'
+})
 
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
   size: size.value,
@@ -115,15 +121,15 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup ||
 function normalizeItem(item: any) {
   if (item === null) {
     return {
-      id: `${id}:null`,
+      id: `${controlId}:null`,
       value: undefined,
       label: undefined
     }
   }
 
   if (typeof item === 'string' || typeof item === 'number') {
     return {
-      id: `${id}:${item}`,
+      id: `${controlId}:${item}`,
       value: String(item),
       label: String(item)
     }
@@ -138,7 +144,7 @@ function normalizeItem(item: any) {
     value,
     label,
     description,
-    id: `${id}:${value}`
+    id: `${controlId}:${value}`
   }
 }
 
@@ -161,14 +167,14 @@ function onUpdate(value: any) {
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <CheckboxGroupRoot
-    :id="id"
+    :id="controlId"
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="controlProps">
       <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ legend }}

src/runtime/components/Drawer.vue

@@ -91,7 +91,8 @@ const contentEvents = {
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })({
   direction: props.direction,
-  inset: props.inset
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0
 }))
 </script>