Merge pull request #8448 from getkirby/v6/perf/validator-fields

perf: Use `k-validator` for more fields

Author: distantnative

panel/src/components/Forms/Field/BlocksField.vue

@@ -29,18 +29,15 @@
 			</k-button-group>
 		</template>
 
-		<k-input-validator
-			v-bind="{ min, max, required }"
-			:value="JSON.stringify(value)"
-		>
+		<k-validator v-bind="{ min, max, required }" :count="value.length">
 			<k-blocks
 				ref="blocks"
 				v-bind="$props"
 				@close="opened = $event"
 				@open="opened = $event"
 				@input="$emit('input', $event)"
 			/>
-		</k-input-validator>
+		</k-validator>
 
 		<footer v-if="!disabled && !isEmpty && !isFull && hasFieldsets">
 			<k-button

panel/src/components/Forms/Field/EntriesField.vue

@@ -30,10 +30,7 @@
 			</k-button-group>
 		</template>
 
-		<k-input-validator
-			v-bind="{ min, max, required }"
-			:value="JSON.stringify(entries)"
-		>
+		<k-validator v-bind="{ min, max, required }" :count="entries.length">
 			<!-- Empty State -->
 			<k-empty
 				v-if="entries.length === 0"
@@ -105,7 +102,7 @@
 					</k-button-group>
 				</div>
 			</k-draggable>
-		</k-input-validator>
+		</k-validator>
 
 		<footer v-if="more" class="k-entries-field-footer">
 			<k-button

panel/src/components/Forms/Field/LayoutField.vue

@@ -26,16 +26,13 @@
 			</k-button-group>
 		</template>
 
-		<k-input-validator
-			v-bind="{ min, max, required }"
-			:value="JSON.stringify(value)"
-		>
+		<k-validator v-bind="{ min, max, required }" :count="value.length">
 			<k-layouts
 				ref="layouts"
 				v-bind="$props"
 				@input="$emit('input', $event)"
 			/>
-		</k-input-validator>
+		</k-validator>
 
 		<footer v-if="!disabled && hasFieldsets">
 			<k-button

panel/src/components/Forms/Field/ModelPickerField.vue

@@ -17,10 +17,7 @@
 		</template>
 
 		<k-dropzone :disabled="!hasDropzone" @drop="drop">
-			<k-input-validator
-				v-bind="{ min, max, required }"
-				:value="JSON.stringify(value)"
-			>
+			<k-validator v-bind="{ min, max, required }" :count="value.length">
 				<k-collection
 					v-bind="collection"
 					v-on="!disabled ? { empty: open } : {}"
@@ -35,7 +32,7 @@
 						/>
 					</template>
 				</k-collection>
-			</k-input-validator>
+			</k-validator>
 		</k-dropzone>
 	</k-field>
 </template>

panel/src/components/Forms/Field/StructureField.vue

@@ -60,10 +60,7 @@
 			</k-button-group>
 		</template>
 
-		<k-input-validator
-			v-bind="{ min, max, required }"
-			:value="JSON.stringify(items)"
-		>
+		<k-validator v-bind="{ min, max, required }" :count="items.length">
 			<template v-if="hasFields">
 				<!-- Empty State -->
 				<k-empty
@@ -110,7 +107,7 @@
 			<template v-else>
 				<k-empty icon="list-bullet">{{ $t("fields.empty") }}</k-empty>
 			</template>
-		</k-input-validator>
+		</k-validator>
 	</k-field>
 </template>