refactor(vue/Field): expose v-model at form element

packages/vue/CHANGELOG.md

@@ -6,6 +6,12 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- **Field**: Expose `v-model` through `FieldInput`, `FieldSelect`, and `FieldTextarea`. Use
+  `v-model` at these components instead of `FieldRoot` to maintain value type for each form element,
+  as the type is variable. This is consistent with the React version.
+
 ### Added
 
 - **Frame (Preview)**: Added `Frame` component for rendering components inside an iframe.

packages/vue/src/components/field/examples/input.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { Field } from '../'
+
+const model = defineModel()
 </script>
 
 <template>
   <Field.Root>
     <Field.Label>Label</Field.Label>
-    <Field.Input />
+    <Field.Input v-model="model" />
     <Field.HelperText>Some additional Info</Field.HelperText>
     <Field.ErrorText>Error Info</Field.ErrorText>
   </Field.Root>

packages/vue/src/components/field/examples/select.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { Field } from '../'
+
+const model = defineModel()
 </script>
 
 <template>
   <Field.Root>
     <Field.Label>Label</Field.Label>
-    <Field.Select>
+    <Field.Select v-model="model">
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>

packages/vue/src/components/field/examples/textarea.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { TextareaHTMLAttributes } from 'vue'
 import { Field } from '../'
+const model = defineModel<TextareaHTMLAttributes['value']>()
 </script>
 
 <template>
   <Field.Root>
     <Field.Label>Label</Field.Label>
-    <Field.Textarea />
+    <Field.Textarea v-model="model" />
     <Field.HelperText>Some additional Info</Field.HelperText>
     <Field.ErrorText>Error Info</Field.ErrorText>
   </Field.Root>

packages/vue/src/components/field/field-input.vue

@@ -8,17 +8,28 @@ export interface FieldInputProps
     /**
      * @vue-ignore
      */
-    InputHTMLAttributes {}
+    Omit<InputHTMLAttributes, 'value'> {
+  modelValue?: InputHTMLAttributes['value']
+}
 </script>
 
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useFieldContext } from './use-field-context'
 
-defineProps<FieldInputProps>()
+const props = defineProps<FieldInputProps>()
 const field = useFieldContext()
+
+const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
-  <ark.input v-bind="field.getInputProps()" :as-child="asChild"><slot /></ark.input>
+  <ark.input
+    v-bind="field.getInputProps()"
+    :as-child="asChild"
+    :value="props.modelValue"
+    @input="(event) => emit('update:modelValue', (event.target as HTMLInputElement).value)"
+  >
+    <slot />
+  </ark.input>
 </template>

packages/vue/src/components/field/field-select.vue

@@ -8,17 +8,28 @@ export interface FieldSelectProps
     /**
      * @vue-ignore
      */
-    SelectHTMLAttributes {}
+    Omit<SelectHTMLAttributes, 'value'> {
+  modelValue?: SelectHTMLAttributes['value']
+}
 </script>
 
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useFieldContext } from './use-field-context'
 
-defineProps<FieldSelectProps>()
+const props = defineProps<FieldSelectProps & { modelValue?: string }>()
 const field = useFieldContext()
+
+const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
-  <ark.select v-bind="field.getSelectProps()" :as-child="asChild"><slot /></ark.select>
+  <ark.select
+    v-bind="field.getSelectProps()"
+    :value="props.modelValue"
+    @change="(event) => emit('update:modelValue', (event.target as HTMLSelectElement).value)"
+    :as-child="asChild"
+  >
+    <slot />
+  </ark.select>
 </template>

packages/vue/src/components/field/field-textarea.vue

@@ -8,17 +8,27 @@ export interface FieldTextareaProps
     /**
      * @vue-ignore
      */
-    TextareaHTMLAttributes {}
+    Omit<TextareaHTMLAttributes, 'value'> {
+  modelValue?: TextareaHTMLAttributes['value']
+}
 </script>
 
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useFieldContext } from './use-field-context'
 
-defineProps<FieldTextareaProps>()
+const props = defineProps<FieldTextareaProps>()
 const field = useFieldContext()
+const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
-  <ark.textarea v-bind="field.getTextareaProps()" :as-child="asChild"><slot /></ark.textarea>
+  <ark.textarea
+    v-bind="field.getTextareaProps()"
+    :value="props.modelValue"
+    @input="(event) => emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
+    :as-child="asChild"
+  >
+    <slot />
+  </ark.textarea>
 </template>

packages/vue/src/components/field/field.stories.vue

@@ -1,18 +1,34 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import Input from './examples/input.vue'
 import Select from './examples/select.vue'
 import Textarea from './examples/textarea.vue'
+const inputModel = ref('This input is controlled')
+const selectModel = ref(3)
+const textareaModel = ref(['This is some text', 'then more text'])
 </script>
 <template>
   <Story title="Field">
     <Variant title="Input">
       <Input />
     </Variant>
+    <Variant title="Input Controlled">
+      <span>Input value: {{ inputModel }}</span>
+      <Input v-model="inputModel" />
+    </Variant>
     <Variant title="Select">
       <Select />
     </Variant>
+    <Variant title="Select Controlled">
+      <span>Selected: Option {{ selectModel }}</span>
+      <Select v-model="selectModel" />
+    </Variant>
     <Variant title="Textarea">
       <Textarea />
     </Variant>
+    <Variant title="Textarea Controlled">
+      <span>Textarea value: {{ textareaModel }}</span>
+      <Textarea v-model="textareaModel" />
+    </Variant>
   </Story>
 </template>

packages/vue/src/components/field/tests/field.test.tsx

@@ -52,4 +52,10 @@ describe('Field', () => {
     render(ComponentUnderTest, { props: { invalid: false } })
     expect(screen.queryByText('Error Info')).not.toBeInTheDocument()
   })
+
+  it('should allow input to be controlled', async () => {
+    render(ComponentUnderTest, { props: { modelValue: 'Input is controlled' } })
+
+    expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('Input is controlled')
+  })
 })

packages/vue/src/components/field/tests/field.test.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { Field } from '../..'
+const model = defineModel()
 </script>
 
 <template>
   <Field.Root invalid>
     <Field.Label>Label</Field.Label>
-    <Field.Input />
+    <Field.Input v-model="model" />
     <Field.HelperText>Some additional Info</Field.HelperText>
     <Field.ErrorText>Error Info</Field.ErrorText>
   </Field.Root>