CSR-319: implement full validation on form-test

src/common-components/button-question/button-question.vue

@@ -122,6 +122,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
+      console.log('BQ handleCheckedChanged, val: ', val)
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         if(Array.isArray(this.selectedValues)) {
@@ -132,6 +133,7 @@ export default {
       } else {
         this.selectedValues = [val.value];
       }
+      console.log('BQ handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
     },
   },
   components: {

src/layouts/form-test/form-test.vue

@@ -15,23 +15,31 @@
               groupName="DamageLocationQuestion"
             />
             <windshieldOptions
-              ref="windshieldOptions"
+              ref="windshieldOptions" 
-              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
+              v-model="selectedWindshieldOptions" 
-              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              :selectedDamageLocations="selectedDamageLocations"
             />
             <alert
               class="my-3"
-              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
-              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
               :isDismissible="false"
             />
+            <sideDoorOptions 
+              ref="sideDoorOptions"
+              groupName="SideDoorSideQuestion"
+              v-model="sideDoorOptionsData"
+              :selectedDamageLocations="selectedDamageLocations"
+            />
             <replaceOptionsQuestion
-              ref="driverSideOptions"
+              ref="backGlassOptions"
-              isAvailable
+              :isAvailable="isRearWindowDamageLocation"
-              v-model="driverSideOptionsData"
+              v-model="selectedRearReplaceOptions"
-              groupName="DriverSideReplaceOptionsQuestion"
+              groupName="BackGlassReplaceOptionsQuestion"
+              validationRules="replace-options-required"
             />
             <funnel-footer
               ref="funnelFooter"
@@ -60,19 +68,25 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 import alert from "@/ux-components/alert/alert";
 
-import { Form } from 'vee-validate';
-
-
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
+import { Form, defineRule } from "vee-validate";
 
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 export default {
   name: "form-test",
@@ -110,12 +124,19 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.driverSideOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
-      );
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -124,14 +145,29 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
+        selectedDoorSides: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
+      selectedWindshieldOptions: [],
+      selectedRearReplaceOptions: [],
     }
   },
+  computed: {
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+          return selectedDamages.toUpperCase() === "REARWINDOW";
+        });
+    },
+  },
   components: {
     Form,
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    sideDoorOptions,
     damageLocationQuestion,
     replaceOptionsQuestion,
     funnelFooter,

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -9,7 +9,6 @@
             v-model="selectedValues"
             validationRules="damage-location-required"
         />
-        
     </div>
 </template>
 

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -9,7 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                validationRules="replace-options-required"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -18,15 +18,6 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select window";
-    }
-    return true;
-});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -43,6 +34,7 @@ export default ({
         groupName: String,
         modelValue: Array,
         isMultiSelect: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -50,12 +42,26 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        updateSelectedValues() {
+        // updateSelectedValues() {
-            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+        //     console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+        //     console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        //         console.log('  ROQ  ONLY ONE ANSWER!')
+        //         this.selectedValues = [this.answersToDisplay[0].Name];
+        //     }
+        // },
+    },
+    mounted() {
+        console.log('**** MOUJNTED *****.  ')
+        console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
+
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
-        },
     },
     computed: {
         selectedValues: {
@@ -82,12 +88,13 @@ export default ({
             });
         },
     },
-    watch: {
+    // watch: {
-        isAvailable(val) {
+    //     isAvailable(val) {
-            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+    //         console.log('ROQ ^^^    isAvailable changed.')
-            val && this.updateSelectedValues();
+    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-        }
+    //         val && this.updateSelectedValues();
-    },
+    //     }
+    // },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -9,13 +9,28 @@
                     :groupName="groupName"
                     buttonType="listCard"
                     v-model="selectedDoorSidesValues"
+                    validationRules="damage-side-required"
                 />
             </div>
         </transition>
-        
+        <replaceOptionsQuestion
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+            ref="driverSideOptions"
-
+            :isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+            groupName="driverSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedDriverSideReplacOptionsValues"
+            validationRules="driver-side-options-required"
+        />
+        <replaceOptionsQuestion
+            ref="passengerSideOptions"
+            :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
+            groupName="passengerSideOptions"
+            isMultiSelect
+            filterByVehicleCategory
+            v-model="selectedPassengerSideReplaceOptionsValues"
+            validationRules="passenger-side-options-required"
+        />
     </div>
 </template>
 
@@ -23,6 +38,29 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-side-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select vehicle side";
+    }
+    return true;
+});
+
+defineRule("driver-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
+
+defineRule("passenger-side-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "sideDoorOptions",

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -24,6 +24,7 @@
           :isAvailable="isRearWindowDamageLocation"
           v-model="selectedRearReplaceOptions"
           groupName="BackGlassReplaceOptionsQuestion"
+          validationRules="replace-options-required"
         />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
@@ -46,6 +47,15 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select rear window type";
+    }
+    return true;
+});
 
 
 export default {

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -7,6 +7,7 @@
                 :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 v-model="selectedChipCountValues"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -27,12 +28,23 @@ export default ({
         modelValue: Array,
         groupName: String,
         isAvailable: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            console.log('         updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('         updateSelectedValues, this.selectedValues: ', this.selectedValues);
+
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
+                console.log('    ONLY ONE ANSWER!')
+                this.selectedValues = [this.answersToDisplay[0].Name];
+            }
+        },
     },
     computed: {
         selectedChipCountValues: {
@@ -44,6 +56,13 @@ export default ({
             }
         },
     },
+    watch: {
+        isAvailable(val) {
+            console.log('***    isAvailable changed.')
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        }
+    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -7,6 +7,8 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                :suppressError="suppressError"
+                :validationRules="validationRules"
             />
         </div>
     </transition>
@@ -14,22 +16,30 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-//import { defineRule } from "vee-validate";
+import store from "@/store";
-
+// import { defineRule } from "vee-validate";
-//DEFINE VALIDATION RULES
+// 
-// add these to the button component above:
+// //DEFINE VALIDATION RULES
-// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// // add these to the button component above:
-// :suppressError="suppressError"
+// // validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// // :suppressError="suppressError"
 // defineRule("windshield-damage-required", (value) => {
+//     // console.log('validation rule - windshield-damage-required, value: ', value);
 //     if (!value || value.length < 1) {
+//         // console.log('validation rule - windshield-damage-required, RETURN ERROR');
 //         return "Please select windshield damage";
 //     }
+//     // console.log('validation rule - windshield-damage-required, return true');
 //     return true;
 // });
 // defineRule("checkForRepairAndReplace", (value, [other]) => {
-//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//     // console.log('validation rule - checkForRepairAndReplace, value: ', value);
+//     // console.log('validation rule - checkForRepairAndReplace, other: ', other);
+//     if (value.toUpperCase() === "REPAIR" && other.toString().includes("Windshield") && other.length > 1) {
+//         console.log('validation rule - checkForRepairAndReplace, RETURN ERROR');
 //         return "checkForRepairAndReplace error"
 //     }
+//     // console.log('validation rule - checkForRepairAndReplace, return true');
 //     return true;
 // });
 
@@ -46,12 +56,13 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
+        validationRules: String,
     },
     methods: {
         initializeComponent(cmsContent){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -62,6 +73,21 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
+        answersToDisplay(){
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
+                    }) 
+                : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
+        },
     },
     components: {
         buttonQuestion,

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -4,17 +4,20 @@
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
             groupName="WindshieldDamageTypeQuestion"
-            v-model="selectedWindshieldDamageTypeValues" 
+            v-model="selectedWindshieldDamageTypeValues"
+            validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
         />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
             :isAvailable=isRepairOptionSelected
             groupName="WindshieldChipCountQuestion"
-            v-model="selectedWindshieldChipCountValues" 
+            v-model="selectedWindshieldChipCountValues"
+            validationRules="windshield-chip-count-required"
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion"
             :isAvailable=isReplaceOptionSelected
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
+            validationRules="windshield-replace-options-required"
         />
     </div>
 </template>
@@ -23,6 +26,36 @@
 import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
 import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-type-required", (value) => {
+    console.log('windshield-damage-type-required, value: ', value);
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
+    if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
+defineRule("windshield-chip-count-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select chip(s)";
+    }
+    return true;
+});
+defineRule("windshield-replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield part";
+    }
+    return true;
+});
+
 export default ({
     name: "windshieldOptions",
 

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -1,9 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-    :class="hasError ? 'has-error' : ''"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
@@ -46,7 +45,6 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 
@@ -69,6 +67,7 @@ export default {
       type: String,
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -105,20 +104,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
+    const fieldOptions = {
-      groupName,
+      type: inputType,
-      undefined,
+      checkedValue: props.value,
-      {
+    };
-        type: inputType,
+
-        checkedValue: value,
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
-      }
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
-    );
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };

src/ux-components/list-button/list-button.vue

@@ -1,9 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
-    :class="hasError ? 'has-error' : ''"
+    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,6 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
+      @click="handleChange(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
@@ -49,9 +48,9 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButton",
   props: {
@@ -71,6 +70,7 @@ export default {
       type: [String, Number],
       default: "",
     },
+    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -107,20 +107,26 @@ export default {
     loader,
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(
+    const fieldOptions = {
-      groupName,
+      type: inputType,
-      undefined,
+      checkedValue: props.value,
-      {
+    };
-        type: inputType,
+
-        checkedValue: value,
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
-      }
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
-    );
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+    const { 
+      checked, 
+      handleChange, 
+      errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };

src/ux-components/list-card/list-card.vue

@@ -13,8 +13,10 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange()"
+        @change="handleCheckChange(value)"
       />
+      value: {{ value }}
+      checkValue: {{ checkValue }}
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
@@ -75,12 +77,13 @@ export default {
   },
   data(){
     return {
-      checkValue: Boolean,
+      checkValue: [Boolean, String],
     }
   },
   created(){
     if(Array.isArray(this.selectedValues)){
       this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+      console.log('=================== this.checkValue: ', this.checkValue)
     }
   },
   computed: {
@@ -98,6 +101,9 @@ export default {
   },
   methods: {
     handleCheckChange(newValue, oldValue){
+      // console.log('LC handleCheckChange... oldValue: ', oldValue);
+      // console.log('LC handleCheckChange... newValue: ', newValue);
+
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
@@ -105,22 +111,42 @@ export default {
     }
   },
   setup(props) {
+    console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
+    console.log('RUNNING setup... ... ... props.value: ', props.value)
+    console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
+
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const {
+//     const { selectedValues, value } = toRefs(props);
-        value: inputValue,
+// console.log('XXXXXXX selectedValues: ', selectedValues)
-        handleChange,
+// console.log('XXXXXXX value: ', value)
-        errors,
+
-    } = useField(props.groupName, props.validationRules,
+    const fieldOptions = {
-    {
       type: inputType,
       checkedValue: props.value,
-    });
+    };
+
+    if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
+      console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
+      fieldOptions['initialValue'] = fieldOptions.checkedValue;
+    }
+
+    const {
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules, fieldOptions);
+
     return {
       handleChange,
       errors,
     };
   },
+  // watch: {
+  //   checkValue(val) {
+  //     console.log('LC > CHANGE in checkValue, val: ', val)
+  //     // this.handleChange()
+  //   }
+  // },
 };
 </script>