CSR-762 Move validation logic to button-wrapper
This commit is contained in:
Katie
parent
94c3ea326f
commit
854300d677
6 changed files with 310 additions and 232 deletions
|
|
@ -14,7 +14,6 @@
|
|||
<span class="fw-bold w-100">{{ questionText }}</span>
|
||||
</div>
|
||||
|
||||
selectedValues: {{ selectedValues }}
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset
|
||||
class="w-100"
|
||||
|
|
@ -46,11 +45,14 @@
|
|||
:is="buttonType"
|
||||
:buttonLabel="answer.buttonLabel"
|
||||
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
||||
:buttonImage="answer.buttonImage"
|
||||
:buttonImageId="answer.buttonImageId"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:value="answer.value"
|
||||
:modelValue="modelValue"
|
||||
selectingInitiatesLoad
|
||||
:isWide="isWide"
|
||||
@change="(e) => handleAnswerChange(e)"
|
||||
/>
|
||||
|
||||
|
|
@ -169,6 +171,9 @@ export default {
|
|||
break;
|
||||
case "listCard":
|
||||
classes = "row g-2 justify-content-center";
|
||||
if (this.isWide) {
|
||||
classes += " flex-column";
|
||||
}
|
||||
break;
|
||||
case "radio":
|
||||
classes = "ui-radio d-flex";
|
||||
|
|
@ -203,7 +208,8 @@ export default {
|
|||
// },
|
||||
// },
|
||||
buttonsInfo() {
|
||||
return this.answers.map(answer => ({
|
||||
// TODO KO temporary. It should always just be an array
|
||||
return (Array.isArray(this.answers) ? this.answers : [])?.map(answer => ({
|
||||
buttonLabel: answer.Text ?? answer,
|
||||
altText: answer.Name ? answer.Name : answer,
|
||||
buttonLabelSubCopy: answer.SubText,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<label :class="classes" :for="buttonId">
|
||||
<label :class="[ buttonWrapperClasses, { 'has-error': errors.length > 0 || hasError }]" :for="buttonId">
|
||||
<!-- classes: {{classes}}<br/>
|
||||
value: {{value}} <br/>
|
||||
modelValue: {{modelValue}} <br/>
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
:type="inputType"
|
||||
:id="buttonId"
|
||||
:name="groupName"
|
||||
:class="inputClasses"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
|
|
@ -19,17 +20,142 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import buttonMixin from "@/mixins/button-mixin";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import { useField } from "vee-validate";
|
||||
import { toRef } from "vue";
|
||||
|
||||
export default {
|
||||
name: "button-wrapper",
|
||||
mixins: [buttonMixin],
|
||||
emits: ["change"],
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "change",
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
required: true,
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
isWide: Boolean,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
buttonLabelSubCopy: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
groupName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
validationRules: String,
|
||||
buttonWrapperClasses: [String, Array, Object],
|
||||
inputClasses: [String, Array, Object],
|
||||
valueToLogType: String,
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(event) {
|
||||
// console.log(event);
|
||||
// console.log(this.value);
|
||||
// console.log(this.modelValue);
|
||||
let isChecked = event.target.checked;
|
||||
// console.log("BM value: ", this.value);
|
||||
let valueToEmit;
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
let newValue = [...this.modelValue];
|
||||
if (isChecked && !this.modelValue.includes(this.value)) {
|
||||
newValue.push(this.value);
|
||||
} else {
|
||||
newValue.splice(newValue.indexOf(this.value), 1);
|
||||
}
|
||||
|
||||
valueToEmit = newValue;
|
||||
} else {
|
||||
valueToEmit = this.value;
|
||||
}
|
||||
|
||||
// console.log("ButtonWrapper is emitting: ", valueToEmit);
|
||||
this.$emit("change", valueToEmit);
|
||||
|
||||
this.pushClickEventToGA();
|
||||
},
|
||||
pushClickEventToGA() {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.value.toString(),
|
||||
true,
|
||||
this.valueToLogType
|
||||
);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isChecked() {
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
this.modelValue.includes(this.value);
|
||||
}
|
||||
return this.modelValue === this.value;
|
||||
},
|
||||
inputType() {
|
||||
return this.isMultiSelect ? "checkbox" : "radio";
|
||||
},
|
||||
buttonId() {
|
||||
return `${this.groupName} ${JSON.stringify(this.value)}`;
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const fieldOptions = {
|
||||
// type: inputType,
|
||||
// checkedValue: props.value,
|
||||
// potentialInitialValue: props.selectedValues,
|
||||
};
|
||||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
// if (
|
||||
// props.selectedValues &&
|
||||
// (props.selectedValues.includes(props.value) ||
|
||||
// props.selectedValues.includes(parseInt(props.value)))
|
||||
// ) {
|
||||
// fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
|
||||
// }
|
||||
|
||||
const { handleChange, errors, value } = useField(
|
||||
toRef(props, "groupName"),
|
||||
toRef(props, "validationRules"),
|
||||
fieldOptions
|
||||
);
|
||||
|
||||
const validateValue = value;
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
input {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
isRequired
|
||||
v-model="selectedValues"
|
||||
v-model="selectedDamageLocations"
|
||||
validationRules="damage-location-required"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -27,7 +27,8 @@ export default ({
|
|||
name: "damageLocationQuestion",
|
||||
data(){
|
||||
return {
|
||||
damageOptions: Object,
|
||||
damageOptions: {},
|
||||
selectedDamageLocations: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -47,14 +48,6 @@ export default ({
|
|||
answersFromCms(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'Answers');
|
||||
},
|
||||
selectedValues: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
damageOptionsMap(){
|
||||
return {
|
||||
Windshield: true,
|
||||
|
|
@ -80,5 +73,11 @@ export default ({
|
|||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
watch: {
|
||||
selectedDamageLocations(selectedDamageLocations) {
|
||||
console.log("DLQ: ", selectedDamageLocations)
|
||||
this.$emit("update:modelValue", selectedDamageLocations)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,78 +1,5 @@
|
|||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
export default {
|
||||
emits: ["change"],
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "change",
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
required: true,
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
isWide: Boolean,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
buttonLabelSubCopy: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
groupName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
validationRules: String,
|
||||
classes: [String, Array, Object],
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(event) {
|
||||
console.log(event);
|
||||
console.log(this.value);
|
||||
console.log(this.modelValue);
|
||||
let isChecked = event.target.checked;
|
||||
console.log("BM value: ", this.value);
|
||||
let valueToEmit;
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
let newValue = [...this.modelValue];
|
||||
if (isChecked && !this.modelValue.includes(this.value)) {
|
||||
newValue.push(this.value);
|
||||
} else {
|
||||
newValue.splice(newValue.indexOf(this.value), 1);
|
||||
}
|
||||
|
||||
valueToEmit = newValue;
|
||||
} else {
|
||||
valueToEmit = this.value;
|
||||
}
|
||||
|
||||
console.log("ButtonWrapper is emitting: ", valueToEmit);
|
||||
this.$emit("change", valueToEmit);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isChecked() {
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
this.modelValue.includes(this.value);
|
||||
}
|
||||
return this.modelValue === this.value;
|
||||
},
|
||||
inputType() {
|
||||
return this.isMultiSelect ? "checkbox" : "radio";
|
||||
},
|
||||
buttonId() {
|
||||
return `${this.groupName} ${JSON.stringify(this.value)}`;
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,16 +28,13 @@
|
|||
:classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
|
||||
@change="(e) => $emit('change', e)"
|
||||
> -->
|
||||
|
||||
|
||||
<buttonWrapper
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:modelValue="modelValue"
|
||||
:value="value"
|
||||
:groupName="groupName"
|
||||
:classes="[
|
||||
'list-group list-button rounded-3 d-flex flex-column w-100 mb-2',
|
||||
{ 'has-error': errors.length > 0 || hasError },
|
||||
]"
|
||||
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||
@change="handleAnswerChange"
|
||||
>
|
||||
<div
|
||||
|
|
@ -65,8 +62,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { toRef } from "vue";
|
||||
// import { useField } from "vee-validate";
|
||||
// import { toRef } from "vue";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import buttonMixin from "@/mixins/button-mixin";
|
||||
|
|
@ -87,10 +84,11 @@ export default {
|
|||
loaderColor: String,
|
||||
loaderPosition: {
|
||||
type: String,
|
||||
default: "right"
|
||||
default: "right",
|
||||
},
|
||||
hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
validationRules: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -125,9 +123,9 @@ export default {
|
|||
if (this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
}
|
||||
console.log("lbTest event: ", e)
|
||||
console.log("lbTest event: ", e);
|
||||
this.$emit("change", e);
|
||||
},
|
||||
},
|
||||
// handleInputChange() {
|
||||
// if(!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
|
|
@ -170,40 +168,40 @@ export default {
|
|||
loader,
|
||||
buttonWrapper,
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
// setup(props) {
|
||||
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const fieldOptions = {
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
potentialInitialValue: props.selectedValues,
|
||||
};
|
||||
// const fieldOptions = {
|
||||
// type: inputType,
|
||||
// checkedValue: props.value,
|
||||
// potentialInitialValue: props.selectedValues,
|
||||
// };
|
||||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (
|
||||
props.selectedValues &&
|
||||
(props.selectedValues.includes(props.value) ||
|
||||
props.selectedValues.includes(parseInt(props.value)))
|
||||
) {
|
||||
fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
// // Set initialValue for validation setup if pre-selected
|
||||
// // NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
// if (
|
||||
// props.selectedValues &&
|
||||
// (props.selectedValues.includes(props.value) ||
|
||||
// props.selectedValues.includes(parseInt(props.value)))
|
||||
// ) {
|
||||
// fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
|
||||
// }
|
||||
|
||||
const { handleChange, errors, value } = useField(
|
||||
toRef(props, "groupName"),
|
||||
toRef(props, "validationRules"),
|
||||
fieldOptions
|
||||
);
|
||||
// const { handleChange, errors, value } = useField(
|
||||
// toRef(props, "groupName"),
|
||||
// toRef(props, "validationRules"),
|
||||
// fieldOptions
|
||||
// );
|
||||
|
||||
const validateValue = value;
|
||||
// const validateValue = value;
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
// return {
|
||||
// handleChange,
|
||||
// errors,
|
||||
// validateValue,
|
||||
// fieldOptions, // only need to expose this for unit test purposes
|
||||
// };
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -214,8 +212,8 @@ export default {
|
|||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
// height: 0;
|
||||
// opacity: 0;
|
||||
|
||||
&:focus-visible + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
|
|
|
|||
|
|
@ -1,73 +1,84 @@
|
|||
<template>
|
||||
<div :class="{'h-100': !isWide}">
|
||||
<buttonWrapper
|
||||
:buttonWrapperClasses="[
|
||||
'list-card w-100 rounded-3 d-flex align-items-center h-100',
|
||||
{ 'horizontal': isWide, 'has-error': errors.length > 0 || hasError }
|
||||
]"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:modelValue="modelValue"
|
||||
:value="value"
|
||||
:groupName="groupName"
|
||||
@change="handleAnswerChange"
|
||||
>
|
||||
|
||||
<!-- <div :class="{ 'h-100': !isWide }">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center"
|
||||
:class="[
|
||||
'h-100',
|
||||
isWide ? 'horizontal' : '',
|
||||
errors.length > 0 || hasError ? 'has-error' : '',
|
||||
]"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow"
|
||||
> -->
|
||||
<!-- <input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="value"
|
||||
:aria-required="isRequired"
|
||||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange"
|
||||
/> -->
|
||||
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center"
|
||||
:class="[
|
||||
'h-100',
|
||||
isWide ? 'horizontal' : '',
|
||||
(errors.length > 0 || hasError) ? 'has-error' : '',
|
||||
]"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow"
|
||||
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
|
||||
:class="getLabelClasses"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="value"
|
||||
:aria-required="isRequired"
|
||||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange"
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-label="buttonLabel"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
:class="getLabelClasses"
|
||||
@mouseup="triggerButton"
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
|
||||
>
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy && !isWide"
|
||||
class="fs-7 m-0 order-4 sub-copy"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
</p>
|
||||
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</buttonWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { toRef } from "vue";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import buttonWrapper from "@/common-components/button-wrapper/button-wrapper";
|
||||
|
||||
export default {
|
||||
name: "listCard",
|
||||
components: {
|
||||
buttonWrapper
|
||||
},
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
|
|
@ -93,18 +104,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
checkValue: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (Array.isArray(this.validateValue)) {
|
||||
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(
|
||||
this.validateValue
|
||||
);
|
||||
|
||||
if (this.checkValue != isSelectedByValidator) {
|
||||
this.handleChange(this.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.checkValue = this.selectedValues == this.value;
|
||||
}
|
||||
},
|
||||
|
|
@ -123,12 +135,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
isValueSelectedByArray(arr) {
|
||||
return this.isMultiSelect
|
||||
? arr.includes(this.value)
|
||||
: arr[0];
|
||||
return this.isMultiSelect ? arr.includes(this.value) : arr[0];
|
||||
},
|
||||
handleInputChange() {
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
if (!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
|
|
@ -137,17 +147,23 @@ export default {
|
|||
return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
}
|
||||
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
if (!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
triggerButton() {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
if (this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
|
||||
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.value.toString(),
|
||||
true,
|
||||
this.valueToLogType
|
||||
);
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
|
|
@ -155,10 +171,13 @@ export default {
|
|||
value: this.value.toString(),
|
||||
buttonId: this.buttonID && this.buttonID.toString(),
|
||||
};
|
||||
|
||||
|
||||
this.handleChange(this.value);
|
||||
this.$emit("isCheckedChanged", emitEvent);
|
||||
},
|
||||
handleAnswerChange(e) {
|
||||
this.$emit("change", e);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// Changing this will impact pre-selection data loads on vehicle-parts.
|
||||
|
|
@ -166,8 +185,7 @@ export default {
|
|||
selectedValues(newVal) {
|
||||
if (typeof newVal === "string") {
|
||||
this.checkValue = newVal == this.value;
|
||||
}
|
||||
else if (newVal !== undefined) {
|
||||
} else if (newVal !== undefined) {
|
||||
this.checkValue = newVal.value;
|
||||
}
|
||||
},
|
||||
|
|
@ -183,15 +201,19 @@ export default {
|
|||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
|
||||
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
|
||||
if (
|
||||
props.selectedValues &&
|
||||
(props.selectedValues.includes(props.value) ||
|
||||
props.selectedValues.includes(parseInt(props.value)))
|
||||
) {
|
||||
fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
errors,
|
||||
value
|
||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||
const { handleChange, errors, value } = useField(
|
||||
toRef(props, "groupName"),
|
||||
toRef(props, "validationRules"),
|
||||
fieldOptions
|
||||
);
|
||||
|
||||
// First land on the blank, unselected page, no handleChange
|
||||
// Land on page with initial values, handleChange
|
||||
|
|
@ -232,12 +254,12 @@ export default {
|
|||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
|
||||
// opacity: 0;
|
||||
// width: 0;
|
||||
// height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
|
||||
position: absolute;
|
||||
|
||||
+ label {
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -256,23 +278,23 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
&:checked + .list-card-content {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus-visible + label {
|
||||
&:focus-visible + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus + label {
|
||||
&:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked:focus + label {
|
||||
&:checked:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
|
|
@ -284,7 +306,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
+ label::before {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
|
@ -300,19 +322,19 @@ export default {
|
|||
color: $gray-600;
|
||||
}
|
||||
|
||||
+ label.checkboxTop::before {
|
||||
+ .list-card-content.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
+ label.checkboxTop::after {
|
||||
+ .list-card-content.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
&:checked + label::before {
|
||||
&:checked + .list-card-content::before {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
|
|
@ -326,17 +348,17 @@ export default {
|
|||
}
|
||||
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
+ .list-card-content::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ label {
|
||||
+ .list-card-content {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -351,20 +373,20 @@ export default {
|
|||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
margin: -0.15rem 0 0 0;
|
||||
left: 1.175rem;
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
|
|
@ -376,7 +398,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
+ label {
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
|
|
|
|||
Loading…
Reference in a new issue