update examples and slots section

Author: webdevnerdstuff

src/documentation/components/examples/FieldSlotExample.vue

@@ -4,41 +4,35 @@
 		:pages="pages"
 		@submit="submitForm"
 	>
-		<template #[`field.foo`]="{ errorMessage, field, blur, change, input, FieldLabel }">
+		<template #[`field.foo`]="props">
 			<v-text-field
-				v-model="answers.foo"
-				v-bind="field"
-				:error="errorMessage"
-				:error-messages="errorMessage"
-				@blur="blur"
-				@change="change"
-				@input="input"
+				v-bind="props.field"
+				@blur="props.blur()"
+				@change="props.change()"
+				@input="props.input()"
+				@update:modelValue="props.onUpdate($event)"
 			>
 				<template #label>
 					<component
-						:is="FieldLabel"
-						:label="field.label"
-						:required="!!field.required"
+						:is="props.FieldLabel"
+						:label="props.field.label"
 					/>
 				</template>
 			</v-text-field>
 		</template>
 
 		<template #[`field.bar`]="props">
 			<v-text-field
-				v-model="answers.bar"
 				v-bind="props.field"
-				:error="props.errorMessage"
-				:error-messages="props.errorMessage"
 				@blur="props.blur()"
 				@change="props.change()"
 				@input="props.input()"
+				@update:modelValue="props.onUpdate($event)"
 			>
 				<template #label>
 					<component
 						:is="props.FieldLabel"
 						:label="props.field.label"
-						:required="!!props.field.required"
 					/>
 				</template>
 			</v-text-field>
@@ -91,35 +85,31 @@ const templateCode = `<template>
     title="Field Slots"
     @submit="submitForm"
   >
-    <template #[\`field.foo\`]="{ errorMessage, field, blur, change, input, FieldLabel }">
+    <template #[\`field.foo\`]="props">
       <v-text-field
-        v-model="answers.foo"
-        v-bind="field"
-        :error="errorMessage"
-        :error-messages="errorMessage"
-        @blur="blur"
-        @change="change"
-        @input="input"
+        v-bind="props.field"
+        @blur="props.blur()"
+        @change="props.change()"
+        @input="props.input()"
+        @update:modelValue="props.onUpdate($event)"
       >
         <template #label>
           <component
-            :is="FieldLabel"
-            :label="field.label"
-            :required="!!field.required"
+            :is="props.FieldLabel"
+            :label="props.field.label"
+            :required="!!props.field.required"
           />
         </template>
       </v-text-field>
     </template>
 
     <template #[\`field.bar\`]="props">
       <v-text-field
-        v-model="answers.bar"
         v-bind="props.field"
-        :error="props.errorMessage"
-        :error-messages="props.errorMessage"
         @blur="props.blur()"
         @change="props.change()"
         @input="props.input()"
+        @update:modelValue="props.onUpdate($event)"
       >
         <template #label>
           <component

src/documentation/sections/SlotsSection.vue

@@ -40,8 +40,11 @@
 									>[`field.${string}`]</a>
 								</span>
 							</td>
-							<td>
-								Slot that is used for adding your own fields
+							<td class="compact">
+								Slot for adding custom fields. Ensure to include the <code class="ic">onUpdate($event)</code> event
+								listener so the form can detect and handle updates properly. Refer to the <a
+									href="#examples-field-slots"
+								>Field Slot</a> example for usage.
 							</td>
 						</tr>
 						<tr>
@@ -86,6 +89,9 @@ const displaySlotsCode = `{
   change: () => void,
   input: () => void,
 
+  // Updating the model value
+  onUpdate: (value: any) => void,
+
   // Internal FieldLabel component
   FieldLabel: Component
 }`;
@@ -101,6 +107,10 @@ const displaySlotsCode = `{
 		> div {
 			padding: 0.5rem 0 !important;
 		}
+
+		&.compact {
+			line-height: 1.4 !important;
+		}
 	}
 }
 </style>