Merge branch 'main' into dev

Author: webdevnerdstuff

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wdns/vuetify-stepper-form",
-	"version": "1.2.1",
+	"version": "1.2.3",
 	"description": "The Vuetify Stepper Form plugin provides a structured way to create multi-step forms using Vue 3, TypeScript, and Vuetify. It features a stepper layout that allows users to navigate between steps with form validation. The plugin is customizable and streamlines building dynamic, interactive forms that guide users through sequential steps.",
 	"private": false,
 	"publishConfig": {

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,14 +110,14 @@ 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;
 });
 const fieldValidateOn = computed(() => field.value?.validateOn ?? settings.value.validateOn);
 const originalValue = modelValue.value;
 
-
 const { errorMessage, setValue, validate, value } = useField(
 	field.value.name,
 	undefined,

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"
 						>

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