fix(vue/Field): create specific stories for controlled components

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Field } from '../'
+
+const model = ref('Input is controlled')
+</script>
+
+<template>
+  <span>Input text: {{ model }}</span>
+  <Field.Root>
+    <Field.Label>Label</Field.Label>
+    <Field.Input v-model="model" />
+    <Field.HelperText>Some additional Info</Field.HelperText>
+    <Field.ErrorText>Error Info</Field.ErrorText>
+  </Field.Root>
+</template>

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

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

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Field } from '../'
+
+const model = ref('3')
+</script>
+
+<template>
+  <span>Selected: Option {{ model }}</span>
+  <Field.Root>
+    <Field.Label>Label</Field.Label>
+    <Field.Select v-model="model">
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+    </Field.Select>
+    <Field.HelperText>Some additional Info</Field.HelperText>
+    <Field.ErrorText>Error Info</Field.ErrorText>
+  </Field.Root>
+</template>

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

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { Field } from '../'
-
-const model = defineModel()
 </script>
 
 <template>
   <Field.Root>
     <Field.Label>Label</Field.Label>
-    <Field.Select v-model="model">
+    <Field.Select>
       <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-controlled.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Field } from '../'
+
+const model = ref(['This is some text', 'then more text'])
+</script>
+
+<template>
+  <span>Textarea value: {{ model }}</span>
+  <Field.Root>
+    <Field.Label>Label</Field.Label>
+    <Field.Textarea v-model="model" />
+    <Field.HelperText>Some additional Info</Field.HelperText>
+    <Field.ErrorText>Error Info</Field.ErrorText>
+  </Field.Root>
+</template>

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

@@ -1,34 +1,30 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import InputControlled from './examples/input-controlled.vue'
 import Input from './examples/input.vue'
+import SelectControlled from './examples/select-controlled.vue'
 import Select from './examples/select.vue'
+import TextareaControlled from './examples/textarea-controlled.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" />
+      <InputControlled />
     </Variant>
     <Variant title="Select">
       <Select />
     </Variant>
     <Variant title="Select Controlled">
-      <span>Selected: Option {{ selectModel }}</span>
-      <Select v-model="selectModel" />
+      <SelectControlled />
     </Variant>
     <Variant title="Textarea">
       <Textarea />
     </Variant>
     <Variant title="Textarea Controlled">
-      <span>Textarea value: {{ textareaModel }}</span>
-      <Textarea v-model="textareaModel" />
+      <TextareaControlled />
     </Variant>
   </Story>
 </template>