From a39d6d0ce464c0f06cd8995a21f7ae5e44bb2721 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 13 Sep 2024 13:39:09 -0400
Subject: [PATCH] refactor(vue/Field): expose v-model at form element

---
 packages/vue/CHANGELOG.md                       |  6 ++++++
 .../vue/src/components/field/examples/input.vue |  4 +++-
 .../src/components/field/examples/select.vue    |  4 +++-
 .../src/components/field/examples/textarea.vue  |  4 +++-
 .../vue/src/components/field/field-input.vue    | 17 ++++++++++++++---
 .../vue/src/components/field/field-select.vue   | 17 ++++++++++++++---
 .../vue/src/components/field/field-textarea.vue | 16 +++++++++++++---
 .../vue/src/components/field/field.stories.vue  | 16 ++++++++++++++++
 .../src/components/field/tests/field.test.tsx   |  6 ++++++
 .../src/components/field/tests/field.test.vue   |  3 ++-
 10 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 1ec40a5306..86c71dab00 100644
--- a/packages/vue/CHANGELOG.md
+++ b/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.
+
 ### Added
 
 - **Frame (Preview)**: Added `Frame` component for rendering components inside an iframe.
diff --git a/packages/vue/src/components/field/examples/input.vue b/packages/vue/src/components/field/examples/input.vue
index 6d26b1e6aa..a0a65603ab 100644
--- a/packages/vue/src/components/field/examples/input.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/examples/select.vue b/packages/vue/src/components/field/examples/select.vue
index c25c2790df..ffd600acfc 100644
--- a/packages/vue/src/components/field/examples/select.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/examples/textarea.vue b/packages/vue/src/components/field/examples/textarea.vue
index 09cac7b580..4fead93dfa 100644
--- a/packages/vue/src/components/field/examples/textarea.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/field-input.vue b/packages/vue/src/components/field/field-input.vue
index 1d5378e27b..ddd757e2a0 100644
--- a/packages/vue/src/components/field/field-input.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/field-select.vue b/packages/vue/src/components/field/field-select.vue
index bb1c444da6..9b1562fff4 100644
--- a/packages/vue/src/components/field/field-select.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/field-textarea.vue b/packages/vue/src/components/field/field-textarea.vue
index fb1347cfed..dd1206582f 100644
--- a/packages/vue/src/components/field/field-textarea.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/field.stories.vue b/packages/vue/src/components/field/field.stories.vue
index 760409af64..88f1144caa 100644
--- a/packages/vue/src/components/field/field.stories.vue
+++ b/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>
diff --git a/packages/vue/src/components/field/tests/field.test.tsx b/packages/vue/src/components/field/tests/field.test.tsx
index 95756eab02..f3549176fc 100644
--- a/packages/vue/src/components/field/tests/field.test.tsx
+++ b/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')
+  })
 })
diff --git a/packages/vue/src/components/field/tests/field.test.vue b/packages/vue/src/components/field/tests/field.test.vue
index bb9f6681cb..fe075b7d6a 100644
--- a/packages/vue/src/components/field/tests/field.test.vue
+++ b/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>