docs: updated test component

packages/docs/introduction/Test.vue

@@ -1,64 +1,137 @@
 <template>
-	<UForm :form="form">
-		<UField>
-			Text
-			<input type="text" name="text" />
-		</UField>
-
-		<UField>
-			Radio 1
-			<input type="radio" name="radio" value="1" />
-		</UField>
-
-		<UField>
-			Radio 2
-			<input type="radio" name="radio" value="2" />
-		</UField>
-
-		<UField>
-			Radio 3
-			<input type="radio" name="radio" value="3" />
-		</UField>
-
-		<UField v-for="(value, index) of checkboxValues">
-			Checkbox {{ index + 1 }}
-			<input type="checkbox" name="checkbox" :value="value" />
-		</UField>
-
-		<UField>
-			Select
-			<select name="select">
-				<option value="1">1</option>
-				<option value="2">2</option>
-				<option value="3">3</option>
-			</select>
-		</UField>
+	<div class="grid grid-cols-2 gap-4">
+		<!-- text -->
+		<label class="v-label">
+			{{ text.value }}
+			<UInput type="text" :field="text" />
+		</label>
+
+		<label class="v-label">
+			{{ textM }}
+			<input class="v-input" type="text" v-model="textM" />
+		</label>
+
+		<!-- textarea -->
+		<label class="v-label">
+			{{ textarea.value }}
+			<UTextarea :field="textarea"></UTextarea>
+		</label>
+
+		<label class="v-label">
+			{{ textareaM }}
+			<textarea class="v-input" v-model="textareaM"></textarea>
+		</label>
+
+		<!-- checkbox -->
+		<label class="v-label">
+			{{ checkbox.value }}
+			<UInput type="checkbox" :field="checkbox" />
+		</label>
+
+		<label class="v-label">
+			{{ checkboxM }}
+			<input class="v-input" type="checkbox" v-model="checkboxM" />
+		</label>
+
+		<!-- checkboxes -->
+		<div>
+			{{ checkboxes.value }}
+			<div class="flex">
+				<label class="v-label">
+					<UInput type="checkbox" name="checkboxes" value="Jack" :field="checkboxes" />
+				</label>
+
+				<label class="v-label">
+					<UInput type="checkbox" name="checkboxes" value="John" :field="checkboxes" />
+				</label>
+
+				<label class="v-label">
+					<UInput type="checkbox" name="checkboxes" value="Mike" :field="checkboxes" />
+				</label>
+			</div>
+		</div>
 
-		<UField>
-			Textarea
-			<textarea name="textarea"></textarea>
-		</UField>
-	</UForm>
+		<div>
+			{{ checkboxesM }}
+			<div class="flex">
+				<label class="v-label">
+					<input class="v-input" type="checkbox" value="Jack" v-model="checkboxesM" />
+				</label>
+				<label class="v-label">
+					<input class="v-input" type="checkbox" value="John" v-model="checkboxesM" />
+				</label>
+				<label class="v-label">
+					<input class="v-input" type="checkbox" value="Mike" v-model="checkboxesM" />
+				</label>
+			</div>
+		</div>
 
-	<pre>
-    {{ form.values }}
-  </pre>
+		<!-- radio -->
+		<div>
+			{{ radio.value }}
+			<div class="flex">
+				<label class="v-label">
+					<UInput type="radio" value="first" name="radio" :field="radio" />
+				</label>
 
-	<pre>
-    {{ form.syncErrors }}
-  </pre>
+				<label class="v-label">
+					<UInput type="radio" value="second" name="radio" :field="radio" />
+				</label>
+			</div>
+		</div>
+
+		<div>
+			{{ radioM }}
+			<div class="flex">
+				<label class="v-label">
+					<input class="v-input" type="radio" value="first" v-model="radioM" />
+				</label>
+				<label class="v-label">
+					<input class="v-input" type="radio" value="second" v-model="radioM" />
+				</label>
+			</div>
+		</div>
+
+		<!-- select -->
+		<label class="v-label">
+			{{ select.value }}
+			<USelect :field="select">
+				<option>A</option>
+				<option>B</option>
+				<option>C</option>
+			</USelect>
+		</label>
+
+		<label class="v-label">
+			{{ selectM }}
+			<select class="v-input" v-model="selectM">
+				<option>A</option>
+				<option>B</option>
+				<option>C</option>
+			</select>
+		</label>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { UField, UForm, useForm } from '@vuetils/form';
+import { UInput, useField, USelect, UTextarea } from '@vuetils/form';
+import { ref } from 'vue';
+
+const text = useField('text');
+const textM = ref('text');
+
+const textarea = useField('textarea');
+const textareaM = ref('textarea');
+
+const checkbox = useField(false);
+const checkboxM = ref(false);
+
+const checkboxes = useField(['John']);
+const checkboxesM = ref(['John']);
 
-const checkboxValues = ['1', '2', '3'] as const;
+const radio = useField('second');
+const radioM = ref('second');
 
-const form = useForm({
-	text: ['Hallo'],
-	radio: ['2'],
-	checkbox: [['2'] as unknown as Test],
-	select: ['2'],
-	textarea: ['Zwallo'],
-});
+const select = useField('B');
+const selectM = ref('B');
 </script>