From 5de56e538263c1f58820ad5f573ab27ecb1b1246 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Tue, 13 May 2025 11:51:45 -0700
Subject: [PATCH] fixing some quirks with validation and boolean type inputs

---
 src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue | 8 +++-----
 src/plugin/components/fields/VSFRadio/VSFRadio.vue       | 2 --
 src/plugin/components/fields/VSFSwitch/VSFSwitch.vue     | 4 +---
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue b/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue
index 61203e7..8cec295 100644
--- a/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue
+++ b/src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue
@@ -8,10 +8,8 @@
 		:disabled="isValidating"
 		:error="errorMessage ? errorMessage?.length > 0 : false"
 		:error-messages="errorMessage"
-		@blur="fieldValidateOn === 'blur' ? onActions('blur') : undefined"
-		@change="fieldValidateOn === 'change' ? onActions('change') : undefined"
-		@click="fieldValidateOn === 'blur' || fieldValidateOn === 'change' ? onActions('click') : undefined"
 		@input="fieldValidateOn === 'input' ? onActions('input') : undefined"
+		@update:model-value="fieldValidateOn === 'blur' || fieldValidateOn === 'change' ? onActions('click') : undefined"
 	>
 		<template #label>
 			<FieldLabel
@@ -45,7 +43,7 @@
 			</v-label>
 
 			<div
-				:id="field?.id"
+				:id="fieldId"
 				:class="controlGroupClasses"
 				:style="checkboxContainerStyle"
 			>
@@ -112,6 +110,7 @@ const props = defineProps<VSFCheckboxProps>();
 const { field } = toRefs(props);
 const settings = inject<Ref<Settings>>('settings')!;
 
+const fieldId = computed<string>(() => (field.value?.id ?? useId()) as string);
 const fieldDensity = computed<VCheckbox['density']>(() => (field.value?.density ?? settings.value?.density) as VCheckbox['density']);
 const fieldRequired = computed<FieldLabelProps['required']>(() => {
 	return field.value.required || false;
@@ -119,7 +118,6 @@ const fieldRequired = computed<FieldLabelProps['required']>(() => {
 const fieldValidateOn = computed(() => field.value?.validateOn ?? settings.value.validateOn);
 const originalValue = modelValue.value;
 
-
 const { errorMessage, setValue, validate, value } = useField(
 	field.value.name,
 	undefined,
diff --git a/src/plugin/components/fields/VSFRadio/VSFRadio.vue b/src/plugin/components/fields/VSFRadio/VSFRadio.vue
index 6f76933..f4c1a9c 100644
--- a/src/plugin/components/fields/VSFRadio/VSFRadio.vue
+++ b/src/plugin/components/fields/VSFRadio/VSFRadio.vue
@@ -62,8 +62,6 @@
 							:style="radioStyle"
 							:true-value="option.value || field.trueValue"
 							:value="option.value"
-							@blur="fieldValidateOn === 'blur' ? onActions('blur', option.value) : undefined"
-							@change="fieldValidateOn === 'change' ? onActions('change', option.value) : undefined"
 							@click="fieldValidateOn === 'blur' || fieldValidateOn === 'change' ? onActions('click', option.value) : undefined"
 							@input="fieldValidateOn === 'input' ? onActions('input', option.value) : undefined"
 						>
diff --git a/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue b/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue
index c65bd3e..dff1630 100644
--- a/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue
+++ b/src/plugin/components/fields/VSFSwitch/VSFSwitch.vue
@@ -19,10 +19,8 @@
 			:disabled="isValidating"
 			:error="props.errorMessage ? props.errorMessage?.length > 0 : false"
 			:error-messages="props.errorMessage"
-			@blur="fieldValidateOn === 'blur' ? onActions((props.validate as ValidateFieldResult), 'blur') : undefined"
-			@change="fieldValidateOn === 'change' ? onActions((props.validate as ValidateFieldResult), 'change') : undefined"
-			@click="fieldValidateOn === 'blur' || fieldValidateOn === 'change' ? onActions(props.validate, 'click') : undefined"
 			@input="fieldValidateOn === 'input' ? onActions((props.validate as ValidateFieldResult), 'input') : undefined"
+			@update:model-value="fieldValidateOn === 'blur' || fieldValidateOn === 'change' ? onActions(props.validate, 'click') : undefined"
 		>
 			<template #label>
 				<FieldLabel