CSR-762 Finish vehicle-damage
This commit is contained in:
Katie
parent
27c2563e2c
commit
04f4a9369b
12 changed files with 964 additions and 938 deletions
4
.prettierrc
Normal file
4
.prettierrc
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"tabWidth": 4,
|
||||
"bracketSameLine": true
|
||||
}
|
||||
|
|
@ -1,66 +1,59 @@
|
|||
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
isOverflowScrollable
|
||||
? 'button-question button-question-overflow'
|
||||
: 'button-question'
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="questionText && answers && answers.length > 0"
|
||||
class="question-text d-flex"
|
||||
>
|
||||
<span class="fw-bold w-100">{{ questionText }}</span>
|
||||
</div>
|
||||
:class="
|
||||
isOverflowScrollable
|
||||
? 'button-question button-question-overflow'
|
||||
: 'button-question'
|
||||
">
|
||||
<div
|
||||
v-if="questionText && answers && answers.length > 0"
|
||||
class="question-text d-flex">
|
||||
<span class="fw-bold w-100">{{ questionText }}</span>
|
||||
</div>
|
||||
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset
|
||||
class="w-100"
|
||||
:aria-required="isRequired"
|
||||
:class="getFieldSetClasses"
|
||||
:role="isMultiSelect ? 'group' : 'radiogroup'"
|
||||
:aria-labelledby="formatString(groupName)"
|
||||
>
|
||||
BQ selectOnKeypress: {{selectOnKeypress}}
|
||||
<legend
|
||||
class="sr-only"
|
||||
:data-focus-target="formatString(groupName)"
|
||||
:id="formatString(groupName)"
|
||||
tabindex="-1"
|
||||
>
|
||||
{{ questionText }}
|
||||
{{
|
||||
isMultiSelect && answers && answers.length > 1
|
||||
? "Select one or more options below."
|
||||
: "Select an option below."
|
||||
}}
|
||||
</legend>
|
||||
<div :class="getComponentLoopWrapperClasses">
|
||||
<div
|
||||
:class="getComponentWrapperClasses"
|
||||
v-for="answer in buttonsInfo"
|
||||
:key="answer.Name ? answer.Name : answer"
|
||||
>
|
||||
<component
|
||||
:is="buttonType"
|
||||
:buttonLabel="answer.buttonLabel"
|
||||
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
||||
:buttonImage="answer.buttonImage"
|
||||
:buttonImageId="answer.buttonImageId"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:value="answer.value"
|
||||
:modelValue="modelValue"
|
||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||
:isWide="isWide"
|
||||
:validationRules="validationRules"
|
||||
:textPosition="textPosition"
|
||||
:selectOnKeypress="selectOnKeypress"
|
||||
@change="handleAnswerChange"
|
||||
/>
|
||||
|
||||
<!-- <component
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset
|
||||
class="w-100"
|
||||
:aria-required="isRequired"
|
||||
:class="getFieldSetClasses"
|
||||
:role="isMultiSelect ? 'group' : 'radiogroup'"
|
||||
:aria-labelledby="formatString(groupName)">
|
||||
<legend
|
||||
class="sr-only"
|
||||
:data-focus-target="formatString(groupName)"
|
||||
:id="formatString(groupName)"
|
||||
tabindex="-1">
|
||||
{{ questionText }}
|
||||
{{
|
||||
isMultiSelect && answers && answers.length > 1
|
||||
? "Select one or more options below."
|
||||
: "Select an option below."
|
||||
}}
|
||||
</legend>
|
||||
<div :class="getComponentLoopWrapperClasses">
|
||||
<div
|
||||
:class="getComponentWrapperClasses"
|
||||
v-for="answer in buttonsInfo"
|
||||
:key="answer.Name ? answer.Name : answer">
|
||||
<component
|
||||
:is="buttonType"
|
||||
:buttonLabel="answer.buttonLabel"
|
||||
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
||||
:buttonImage="answer.buttonImage"
|
||||
:buttonImageId="answer.buttonImageId"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:value="answer.value"
|
||||
:modelValue="modelValue"
|
||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||
:isWide="isWide"
|
||||
:validationRules="validationRules"
|
||||
:textPosition="textPosition"
|
||||
:selectOnKeypress="selectOnKeypress"
|
||||
@change="handleAnswerChange" />
|
||||
|
||||
<!-- <component
|
||||
:is="buttonType"
|
||||
@isCheckedChanged="handleCheckedChanged"
|
||||
:buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
|
||||
|
|
@ -87,28 +80,26 @@
|
|||
:class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
|
||||
:valueToLogType="valueToLogType"
|
||||
/> -->
|
||||
<!-- For nested questions -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="
|
||||
typeof selectedValues == 'string' &&
|
||||
selectedValues == answer.Name
|
||||
"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- For nested questions -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="
|
||||
typeof selectedValues == 'string' &&
|
||||
selectedValues == answer.Name
|
||||
">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="row form-test-error mt-1">
|
||||
<error-message
|
||||
:name="formatString(groupName)"
|
||||
v-if="!suppressError"></error-message>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="row form-test-error mt-1">
|
||||
<error-message
|
||||
:name="formatString(groupName)"
|
||||
v-if="!suppressError"
|
||||
></error-message>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -117,219 +108,221 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
|
|||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import { ErrorMessage } from "vee-validate";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
import { bool } from "yup";
|
||||
// import buttonWrap
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
props: {
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: "listButton",
|
||||
name: "buttonQuestion",
|
||||
props: {
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: "listButton",
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
questionText: String,
|
||||
answers: Array,
|
||||
textPosition: {
|
||||
type: String,
|
||||
default: "text-center",
|
||||
},
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: {
|
||||
type: String,
|
||||
default: "blue",
|
||||
},
|
||||
loaderPosition: {
|
||||
type: String,
|
||||
default: "right",
|
||||
},
|
||||
isRequired: Boolean,
|
||||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
isCashOrInsurance: Boolean,
|
||||
modelValue: [Array, Number, String],
|
||||
value: [Number, String],
|
||||
validationRules: String,
|
||||
suppressError: Boolean,
|
||||
useTextForValue: Boolean,
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
questionText: String,
|
||||
answers: Array,
|
||||
textPosition: {
|
||||
type: String,
|
||||
default: "text-center",
|
||||
},
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: {
|
||||
type: String,
|
||||
default: "blue",
|
||||
},
|
||||
loaderPosition: {
|
||||
type: String,
|
||||
default: "right",
|
||||
},
|
||||
isRequired: Boolean,
|
||||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
isCashOrInsurance: Boolean,
|
||||
modelValue: [Array, Number, String],
|
||||
value: [Number, String],
|
||||
validationRules: String,
|
||||
suppressError: Boolean,
|
||||
useTextForValue: Boolean,
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getFieldSetClasses() {
|
||||
if (this.isOverflowScrollable) {
|
||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||
} else if (this.buttonType == "listCard") {
|
||||
return "w-100";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getComponentLoopWrapperClasses() {
|
||||
let classes;
|
||||
switch (this.buttonType) {
|
||||
case "listButton":
|
||||
classes = "w-100";
|
||||
break;
|
||||
case "listButtonHorizontal":
|
||||
classes = "d-flex flex-row p-0";
|
||||
break;
|
||||
case "listCard":
|
||||
classes = "row g-2 justify-content-center";
|
||||
if (this.isWide) {
|
||||
classes += " flex-column";
|
||||
}
|
||||
break;
|
||||
case "radio":
|
||||
classes = "ui-radio d-flex";
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
getComponentWrapperClasses() {
|
||||
let classes = "";
|
||||
computed: {
|
||||
getFieldSetClasses() {
|
||||
if (this.isOverflowScrollable) {
|
||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||
} else if (this.buttonType == "listCard") {
|
||||
return "w-100";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getComponentLoopWrapperClasses() {
|
||||
let classes;
|
||||
switch (this.buttonType) {
|
||||
case "listButton":
|
||||
classes = "w-100";
|
||||
break;
|
||||
case "listButtonHorizontal":
|
||||
classes = "d-flex flex-row p-0";
|
||||
break;
|
||||
case "listCard":
|
||||
classes = "row g-2 justify-content-center";
|
||||
if (this.isWide) {
|
||||
classes += " flex-column";
|
||||
}
|
||||
break;
|
||||
case "radio":
|
||||
classes = "ui-radio d-flex";
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
getComponentWrapperClasses() {
|
||||
let classes = "";
|
||||
|
||||
classes += this.isWid ? "col-12" : "col";
|
||||
classes += this.isWid ? "col-12" : "col";
|
||||
|
||||
if (this.buttonType == "radio") {
|
||||
classes += " radio-button-container";
|
||||
}
|
||||
if (this.buttonType == "radio") {
|
||||
classes += " radio-button-container";
|
||||
}
|
||||
|
||||
return classes;
|
||||
return classes;
|
||||
},
|
||||
getColLength() {
|
||||
if (this.isWide) {
|
||||
return "12";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
// selectedValues: {
|
||||
// get: function () {
|
||||
// return this.modelValue;
|
||||
// },
|
||||
// set: function (newValue) {
|
||||
// // this.$emit("update:modelValue", newValue);
|
||||
// },
|
||||
// },
|
||||
buttonsInfo() {
|
||||
// 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,
|
||||
buttonImage: answer.AnswerImageUrl,
|
||||
buttonImageId: answer.ImageId,
|
||||
groupName: this.formatString(this.groupName),
|
||||
value: this.useTextForValue
|
||||
? answer.Text
|
||||
: answer.Name ?? answer,
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
getColLength() {
|
||||
if (this.isWide) {
|
||||
return "12";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
methods: {
|
||||
formatString(str) {
|
||||
return str?.replace(" ", "-");
|
||||
},
|
||||
getValue(answer) {
|
||||
if (this.useTextForValue) {
|
||||
return answer.Text;
|
||||
}
|
||||
return answer.Name ? answer.Name : answer;
|
||||
},
|
||||
getAnswerString(answer, prop = "Name") {
|
||||
switch (typeof answer) {
|
||||
case "string":
|
||||
case "number":
|
||||
case "boolean":
|
||||
return this.formatString(answer.toString());
|
||||
default:
|
||||
return answer[prop]
|
||||
? this.formatString(answer[prop])
|
||||
: this.formatString(answer.toString());
|
||||
}
|
||||
},
|
||||
// handleCheckedChanged(val) {
|
||||
// if (this.selectingInitiatesLoad) {
|
||||
// this.selectedValues = val.value;
|
||||
// } else {
|
||||
// if (Array.isArray(this.selectedValues)) {
|
||||
// const newSelectedValues = this.selectedValues;
|
||||
// val.checkValue
|
||||
// ? newSelectedValues.push(val.value)
|
||||
// : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
|
||||
// this.selectedValues = newSelectedValues;
|
||||
// } else {
|
||||
// this.selectedValues = val.value;
|
||||
// }
|
||||
// }
|
||||
// this.$emit("isCheckedChanged", val);
|
||||
// },
|
||||
handleAnswerChange(eventValue) {
|
||||
// console.log({
|
||||
// bqEvent: eventValue
|
||||
// })
|
||||
this.$emit("update:modelValue", eventValue);
|
||||
},
|
||||
},
|
||||
// selectedValues: {
|
||||
// get: function () {
|
||||
// return this.modelValue;
|
||||
// },
|
||||
// set: function (newValue) {
|
||||
// // this.$emit("update:modelValue", newValue);
|
||||
// },
|
||||
// },
|
||||
buttonsInfo() {
|
||||
// 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,
|
||||
buttonImage: answer.AnswerImageUrl,
|
||||
buttonImageId: answer.ImageId,
|
||||
groupName: this.formatString(this.groupName),
|
||||
value: this.useTextForValue ? answer.Text : (answer.Name ?? answer)
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatString(str) {
|
||||
return str?.replace(" ", "-");
|
||||
components: {
|
||||
listButton,
|
||||
listButtonHorizontal,
|
||||
listCard,
|
||||
ErrorMessage,
|
||||
radio,
|
||||
},
|
||||
getValue(answer) {
|
||||
if (this.useTextForValue) {
|
||||
return answer.Text;
|
||||
}
|
||||
return answer.Name ? answer.Name : answer;
|
||||
},
|
||||
getAnswerString(answer, prop = "Name") {
|
||||
switch (typeof answer) {
|
||||
case "string":
|
||||
case "number":
|
||||
case "boolean":
|
||||
return this.formatString(answer.toString());
|
||||
default:
|
||||
return answer[prop]
|
||||
? this.formatString(answer[prop])
|
||||
: this.formatString(answer.toString());
|
||||
}
|
||||
},
|
||||
// handleCheckedChanged(val) {
|
||||
// if (this.selectingInitiatesLoad) {
|
||||
// this.selectedValues = val.value;
|
||||
// } else {
|
||||
// if (Array.isArray(this.selectedValues)) {
|
||||
// const newSelectedValues = this.selectedValues;
|
||||
// val.checkValue
|
||||
// ? newSelectedValues.push(val.value)
|
||||
// : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
|
||||
// this.selectedValues = newSelectedValues;
|
||||
// } else {
|
||||
// this.selectedValues = val.value;
|
||||
// }
|
||||
// }
|
||||
// this.$emit("isCheckedChanged", val);
|
||||
// },
|
||||
handleAnswerChange(eventValue) {
|
||||
// console.log({
|
||||
// bqEvent: eventValue
|
||||
// })
|
||||
this.$emit("update:modelValue", eventValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
listButton,
|
||||
listButtonHorizontal,
|
||||
listCard,
|
||||
ErrorMessage,
|
||||
radio,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button-question-overflow {
|
||||
height: calc(100vh - 274px);
|
||||
height: calc(100vh - 274px);
|
||||
|
||||
.overflow-scroll {
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 314px);
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.overflow-scroll {
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 314px);
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
.button-question {
|
||||
color: $black;
|
||||
color: $black;
|
||||
|
||||
.radio-button-container {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: map-get($spacers, 2);
|
||||
.radio-button-container {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.question-text {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
|
||||
& > span {
|
||||
text-align: center;
|
||||
}
|
||||
& > span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-parts {
|
||||
.question-text {
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
margin: 0 0 0.5rem 0;
|
||||
.question-text {
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.question-text {
|
||||
margin: 0;
|
||||
}
|
||||
fieldset {
|
||||
.ui-radio {
|
||||
margin: 0;
|
||||
.question-text {
|
||||
margin: 0;
|
||||
}
|
||||
fieldset {
|
||||
.ui-radio {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
<template>
|
||||
<label
|
||||
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
|
||||
:for="buttonId"
|
||||
@mousedown.left="handleEventAction('click', $event)"
|
||||
>
|
||||
<!-- IBW modelValue: {{ modelValue }} <br />
|
||||
<label
|
||||
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
|
||||
:for="buttonId"
|
||||
@mousedown.left="handleEventAction('click', $event)">
|
||||
<!-- IBW modelValue: {{ modelValue }} <br />
|
||||
IBW value: {{value}} <br/> -->
|
||||
<!-- classes: {{classes}}<br/>
|
||||
<!-- classes: {{classes}}<br/>
|
||||
value: {{value}} <br/>
|
||||
modelValue: {{modelValue}} <br/>
|
||||
buttonId: {{buttonId}} <br/> -->
|
||||
<input
|
||||
:type="inputType"
|
||||
:id="buttonId"
|
||||
:name="groupName"
|
||||
:class="inputClasses"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@keypress.enter="handleEventAction('keypressSubmit', $event)"
|
||||
@change="handleEventAction('change', $event)"
|
||||
/>
|
||||
<input
|
||||
:type="inputType"
|
||||
:id="buttonId"
|
||||
:key="buttonId"
|
||||
:name="groupName"
|
||||
:class="inputClasses"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@keypress.enter="handleEventAction('keypressSubmit', $event)"
|
||||
@change="handleEventAction('change', $event)" />
|
||||
|
||||
<slot></slot>
|
||||
</label>
|
||||
<slot></slot>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -32,294 +31,315 @@ import { useField } from "vee-validate";
|
|||
import { toRef } from "vue";
|
||||
|
||||
export default {
|
||||
name: "input-button-wrapper",
|
||||
emits: ["change"],
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "change",
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
name: "input-button-wrapper",
|
||||
emits: ["change"],
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "change",
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
required: true,
|
||||
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: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
buttonWrapperClasses: [String, Array, Object],
|
||||
inputClasses: [String, Array, Object],
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
isWide: Boolean,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
data() {
|
||||
return {
|
||||
valueToEmit: null,
|
||||
hasFirstEventFired: false,
|
||||
};
|
||||
},
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
buttonLabelSubCopy: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
groupName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
validationRules: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
buttonWrapperClasses: [String, Array, Object],
|
||||
inputClasses: [String, Array, Object],
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valueToEmit: null,
|
||||
hasFirstEventFired: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// console.log({
|
||||
// isChecked: this.isChecked,
|
||||
// modelValue: this.modelValue,
|
||||
// value: this.value,
|
||||
// });
|
||||
|
||||
this.handleChange(this.modelValue);
|
||||
},
|
||||
methods: {
|
||||
handleEventAction(eventType, e) {
|
||||
const eventTypes = {
|
||||
CHANGE: "change",
|
||||
KEYPRESS_SUBMIT: "keypressSubmit",
|
||||
CLICK: "click",
|
||||
};
|
||||
|
||||
console.log({
|
||||
handleKeypress: eventType,
|
||||
// hasFirstEventFired: this.hasFirstEventFired,
|
||||
});
|
||||
|
||||
|
||||
if (this.isMultiSelect) {
|
||||
// if (true) {
|
||||
switch (eventType) {
|
||||
// case eventTypes.CLICK:
|
||||
case eventTypes.KEYPRESS_SUBMIT:
|
||||
console.log("clicking");
|
||||
// this.hasFirstEventFired = true;
|
||||
this.handleClick(e);
|
||||
break;
|
||||
case eventTypes.CHANGE:
|
||||
console.log("selectOnKeypress: ", this.selectOnKeypress);
|
||||
// this.hasFirstEventFired = false;
|
||||
this.selectOnKeypress
|
||||
? this.handleClick(e)
|
||||
: this.handleSelectionChange(e);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (eventType) {
|
||||
case eventTypes.CLICK:
|
||||
case eventTypes.KEYPRESS_SUBMIT:
|
||||
console.log("clicking");
|
||||
|
||||
// TODO KO may still need this since GA events, wouldn't want to trigger twice
|
||||
// this.hasFirstEventFired = true;
|
||||
this.handleClick(e);
|
||||
break;
|
||||
case eventTypes.CHANGE:
|
||||
console.log("selectOnKeypress: ", this.selectOnKeypress);
|
||||
// this.hasFirstEventFired = false;
|
||||
this.selectOnKeypress
|
||||
? this.handleClick(e)
|
||||
: this.handleSelectionChange(e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// if (!this.hasFirstEventFired) {
|
||||
|
||||
// else {
|
||||
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
|
||||
// }
|
||||
|
||||
// else {
|
||||
// this.hasFirstEventFired = true;
|
||||
// this.selectOnKeypress
|
||||
// ? this.handleClick(e)
|
||||
// : this.handleSelectionChange(e);
|
||||
// }
|
||||
|
||||
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
|
||||
|
||||
// this.handleClick(e);
|
||||
// console.log({
|
||||
// selectOnKeypress: this.selectOnKeypress,
|
||||
// event: e,
|
||||
// eventType: eventType,
|
||||
// isClick: eventType === "click",
|
||||
// isKeypress: eventType === "keypress",
|
||||
// });
|
||||
// console.log(eventType)
|
||||
|
||||
// click => click, keypress
|
||||
// space => keypressSubmit, keypress
|
||||
// arrow left/right => keypress
|
||||
|
||||
// if selectOnKeypress (YMMS)
|
||||
// if click => emit event
|
||||
// if space/enter => emit event
|
||||
// if arrow => emit event
|
||||
// else (!selectOnKeypress)
|
||||
// if click => emit event
|
||||
// if space/enter => emit event
|
||||
// if arrow => handleSelection
|
||||
|
||||
// if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
|
||||
// this.handleClick(e);
|
||||
// }
|
||||
// else {
|
||||
// this.handleSelectionChange(e);
|
||||
// }
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
// console.log("HSC");
|
||||
// console.log(e);
|
||||
// console.log(this.value);
|
||||
// console.log(this.modelValue);
|
||||
// let isChecked = event.target.checked;
|
||||
// console.log("BM value: ", this.value);
|
||||
// let valueToEmit;
|
||||
// console.log("isMultiselect")
|
||||
// console.log(this.isMultiSelect)
|
||||
// console.log({
|
||||
// modelValue: this.modelValue,
|
||||
// isMultiselect: this.isMultiSelect
|
||||
// })
|
||||
if (
|
||||
this.isMultiSelect &&
|
||||
(this.modelValue instanceof Array || this.modelValue == null)
|
||||
) {
|
||||
let newValue = this.modelValue ? [...this.modelValue] : [];
|
||||
// console.log("newValue", newValue)
|
||||
mounted() {
|
||||
// console.log({
|
||||
// newValue: newValue,
|
||||
// // isChecked: isChecked
|
||||
// })
|
||||
if (!newValue.includes(this.value)) {
|
||||
// console.log("isChecked")
|
||||
newValue.push(this.value);
|
||||
} else {
|
||||
// console.log("isn't checked")
|
||||
newValue.splice(newValue.indexOf(this.value), 1);
|
||||
// isChecked: this.isChecked,
|
||||
// modelValue: this.modelValue,
|
||||
// value: this.value,
|
||||
// });
|
||||
|
||||
console.log({
|
||||
meta: this.meta,
|
||||
isMultiSelect: this.isMultiSelect,
|
||||
modelValue: this.modelValue,
|
||||
isChecked: this.isChecked,
|
||||
valid: this.meta.valid,
|
||||
});
|
||||
|
||||
// const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
|
||||
|
||||
if (this.isChecked) {
|
||||
console.log("HI THERE");
|
||||
this.handleChange(this.modelValue);
|
||||
}
|
||||
|
||||
this.valueToEmit = newValue;
|
||||
} else {
|
||||
console.log("not multi");
|
||||
this.valueToEmit = this.value;
|
||||
}
|
||||
|
||||
// console.log("handlingChange", this.valueToEmit);
|
||||
this.handleChange(this.valueToEmit);
|
||||
this.pushClickEventToGA();
|
||||
// if (this.selectOnKeypress) {
|
||||
// this.handleClick(e)
|
||||
// }
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log("handleClick");
|
||||
this.handleSelectionChange(e);
|
||||
// console.log("HC");
|
||||
// console.log({
|
||||
// eventEmitting: e,
|
||||
// valueToEmit: this.valueToEmit,
|
||||
// });
|
||||
this.$emit("change", this.valueToEmit);
|
||||
methods: {
|
||||
handleEventAction(eventType, e) {
|
||||
const eventTypes = {
|
||||
CHANGE: "change",
|
||||
KEYPRESS_SUBMIT: "keypressSubmit",
|
||||
CLICK: "click",
|
||||
};
|
||||
|
||||
console.log({
|
||||
handleKeypress: eventType,
|
||||
// hasFirstEventFired: this.hasFirstEventFired,
|
||||
});
|
||||
|
||||
if (this.isMultiSelect) {
|
||||
// if (true) {
|
||||
switch (eventType) {
|
||||
// case eventTypes.CLICK:
|
||||
case eventTypes.KEYPRESS_SUBMIT:
|
||||
console.log("clicking");
|
||||
// this.hasFirstEventFired = true;
|
||||
this.handleClick(e);
|
||||
break;
|
||||
case eventTypes.CHANGE:
|
||||
console.log(
|
||||
"selectOnKeypress: ",
|
||||
this.selectOnKeypress
|
||||
);
|
||||
// this.hasFirstEventFired = false;
|
||||
this.selectOnKeypress
|
||||
? this.handleClick(e)
|
||||
: this.handleSelectionChange(e);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (eventType) {
|
||||
case eventTypes.CLICK:
|
||||
case eventTypes.KEYPRESS_SUBMIT:
|
||||
console.log("clicking");
|
||||
|
||||
// TODO KO may still need this since GA events, wouldn't want to trigger twice
|
||||
// this.hasFirstEventFired = true;
|
||||
this.handleClick(e);
|
||||
break;
|
||||
case eventTypes.CHANGE:
|
||||
console.log(
|
||||
"selectOnKeypress: ",
|
||||
this.selectOnKeypress
|
||||
);
|
||||
// this.hasFirstEventFired = false;
|
||||
this.selectOnKeypress
|
||||
? this.handleClick(e)
|
||||
: this.handleSelectionChange(e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// if (!this.hasFirstEventFired) {
|
||||
|
||||
// else {
|
||||
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
|
||||
// }
|
||||
|
||||
// else {
|
||||
// this.hasFirstEventFired = true;
|
||||
// this.selectOnKeypress
|
||||
// ? this.handleClick(e)
|
||||
// : this.handleSelectionChange(e);
|
||||
// }
|
||||
|
||||
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
|
||||
|
||||
// this.handleClick(e);
|
||||
// console.log({
|
||||
// selectOnKeypress: this.selectOnKeypress,
|
||||
// event: e,
|
||||
// eventType: eventType,
|
||||
// isClick: eventType === "click",
|
||||
// isKeypress: eventType === "keypress",
|
||||
// });
|
||||
// console.log(eventType)
|
||||
|
||||
// click => click, keypress
|
||||
// space => keypressSubmit, keypress
|
||||
// arrow left/right => keypress
|
||||
|
||||
// if selectOnKeypress (YMMS)
|
||||
// if click => emit event
|
||||
// if space/enter => emit event
|
||||
// if arrow => emit event
|
||||
// else (!selectOnKeypress)
|
||||
// if click => emit event
|
||||
// if space/enter => emit event
|
||||
// if arrow => handleSelection
|
||||
|
||||
// if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
|
||||
// this.handleClick(e);
|
||||
// }
|
||||
// else {
|
||||
// this.handleSelectionChange(e);
|
||||
// }
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
// console.log("HSC");
|
||||
// console.log(e);
|
||||
// console.log(this.value);
|
||||
// console.log(this.modelValue);
|
||||
// let isChecked = event.target.checked;
|
||||
// console.log("BM value: ", this.value);
|
||||
// let valueToEmit;
|
||||
// console.log("isMultiselect")
|
||||
// console.log(this.isMultiSelect)
|
||||
// console.log({
|
||||
// modelValue: this.modelValue,
|
||||
// isMultiselect: this.isMultiSelect
|
||||
// })
|
||||
if (
|
||||
this.isMultiSelect &&
|
||||
(this.modelValue instanceof Array || this.modelValue == null)
|
||||
) {
|
||||
let newValue = this.modelValue ? [...this.modelValue] : [];
|
||||
// console.log("newValue", newValue)
|
||||
// console.log({
|
||||
// newValue: newValue,
|
||||
// // isChecked: isChecked
|
||||
// })
|
||||
if (!newValue.includes(this.value)) {
|
||||
// console.log("isChecked")
|
||||
newValue.push(this.value);
|
||||
} else {
|
||||
// console.log("isn't checked")
|
||||
newValue.splice(newValue.indexOf(this.value), 1);
|
||||
}
|
||||
|
||||
this.valueToEmit = newValue;
|
||||
} else {
|
||||
console.log("not multi");
|
||||
this.valueToEmit = this.value;
|
||||
}
|
||||
|
||||
console.log("handlingChange", this.valueToEmit);
|
||||
this.handleChange(this.valueToEmit);
|
||||
this.pushClickEventToGA();
|
||||
// if (this.selectOnKeypress) {
|
||||
// this.handleClick(e)
|
||||
// }
|
||||
},
|
||||
handleClick(e) {
|
||||
console.log("handleClick");
|
||||
this.handleSelectionChange(e);
|
||||
// console.log("HC");
|
||||
// console.log({
|
||||
// eventEmitting: e,
|
||||
// valueToEmit: this.valueToEmit,
|
||||
// });
|
||||
this.$emit("change", this.valueToEmit);
|
||||
},
|
||||
pushClickEventToGA() {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.value.toString(),
|
||||
true,
|
||||
this.valueToLogType
|
||||
);
|
||||
},
|
||||
},
|
||||
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) {
|
||||
return this.modelValue.includes(this.value);
|
||||
}
|
||||
|
||||
return this.modelValue == this.value;
|
||||
},
|
||||
inputType() {
|
||||
return this.isMultiSelect ? "checkbox" : "radio";
|
||||
},
|
||||
buttonId() {
|
||||
return `${this.groupName} ${JSON.stringify(this.value)}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isChecked() {
|
||||
if (this.isMultiSelect || this.modelValue instanceof Array) {
|
||||
return this.modelValue.includes(this.value);
|
||||
}
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
return this.modelValue == this.value;
|
||||
const fieldOptions = {
|
||||
type: inputType,
|
||||
validateOnValueUpdate: false,
|
||||
validateOnMount: false,
|
||||
// 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
|
||||
// );
|
||||
|
||||
console.log(props.validationRules);
|
||||
|
||||
const { handleChange, meta, errors, value } = useField(
|
||||
toRef(props, "groupName"),
|
||||
toRef(props, "validationRules"),
|
||||
fieldOptions
|
||||
);
|
||||
|
||||
// const validateValue = value;
|
||||
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
meta,
|
||||
// validateValue,
|
||||
fieldOptions, // only need to expose this for unit test purposes
|
||||
};
|
||||
},
|
||||
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
|
||||
// );
|
||||
|
||||
console.log(props.validationRules);
|
||||
|
||||
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>
|
||||
|
||||
<!-- TODO KO Scope this? -->
|
||||
<style lang="scss">
|
||||
input {
|
||||
opacity: 0;
|
||||
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
|
||||
ROQ selectedValue: {{selectedValue}}<br/>
|
||||
ROQ modelValue: {{modelValue}}
|
||||
ROQ selectedValue: {{selectedValue}}
|
||||
<buttonQuestion
|
||||
isWide
|
||||
:questionText="questionText"
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
v-model="selectedValue"
|
||||
:validationRules="validationRules"
|
||||
:suppressError="suppressError"
|
||||
:isRequired=isRequired
|
||||
:isRequired="isRequired"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -44,15 +43,17 @@ export default ({
|
|||
isRequired: Boolean,
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(replaceOptions){
|
||||
initializeComponent(replaceOptions) {
|
||||
this.replaceOptions = replaceOptions;
|
||||
},
|
||||
updateSelectedValues() {
|
||||
console.log("UPDATING FOR ", this.groupName)
|
||||
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
|
||||
// ex: BackGlass stationary
|
||||
// console.log(this.answersToDisplay)
|
||||
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
|
||||
this.selectedValue = [this.answersToDisplay[0].Name];
|
||||
const selectedAnswer = this.answersToDisplay[0].Name;
|
||||
this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
|
||||
console.log("HIIIIII2", this.selectedValue)
|
||||
}
|
||||
},
|
||||
|
|
@ -97,6 +98,10 @@ export default ({
|
|||
val && this.updateSelectedValues();
|
||||
},
|
||||
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
|
||||
console.log({
|
||||
groupName: this.groupName,
|
||||
shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion
|
||||
})
|
||||
if (!shouldDisplayReplaceOptionsQuestion) {
|
||||
this.selectedValue = [];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
alertClass="alert-warning"
|
||||
:isDismissible="false"
|
||||
/>
|
||||
selectedWindshieldOptions: {{selectedWindshieldOptions}} <br/>
|
||||
|
||||
<damageLocationQuestion
|
||||
ref="damageLocation"
|
||||
cmsWidgetName="DamageLocationQuestion"
|
||||
|
|
@ -202,7 +200,11 @@ export default {
|
|||
|
||||
if (store.getters.damage.isRepair === undefined) return windshieldOptions;
|
||||
|
||||
if (!store.getters.damage.isRepair) {
|
||||
if (store.getters.damage.isRepair) {
|
||||
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
|
||||
windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
|
||||
}
|
||||
else {
|
||||
if (store.getters.damage.glassToReplace?.some(glass => { return glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
|
||||
glass.glassName === damageLocationsSelected.SINGLE })) {
|
||||
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
|
||||
|
|
@ -222,11 +224,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
if (store.getters.damage.isRepair) {
|
||||
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
|
||||
windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
|
||||
}
|
||||
|
||||
return windShieldOptions;
|
||||
|
||||
},
|
||||
|
|
@ -381,15 +378,18 @@ export default {
|
|||
hasSplitSingleConflict() {
|
||||
if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
|
||||
|
||||
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
|
||||
console.log({
|
||||
selectedWindshieldOptions: this.selectedWindshieldOptions
|
||||
})
|
||||
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield =>
|
||||
{
|
||||
return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
|
||||
}) &&
|
||||
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield =>
|
||||
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedDriverWindshield =>
|
||||
{
|
||||
return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase();
|
||||
}) ||
|
||||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield =>
|
||||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedPassengerWindshield =>
|
||||
{
|
||||
return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="windshield-options">
|
||||
selectedDamageLocations: {{ selectedDamageLocations }}
|
||||
<windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
|
||||
:isAvailable="isWindshieldDamageLocation"
|
||||
:suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
|
||||
|
|
@ -21,7 +20,6 @@
|
|||
v-model="selectedWindshieldChipCountValues"
|
||||
validationRules="windshield-chip-count-required"
|
||||
/>
|
||||
selectedWindshieldReplaceOptionsValues: {{selectedWindshieldReplaceOptionsValues}}
|
||||
<replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
|
||||
:isAvailable="isReplaceOptionSelected"
|
||||
isMultiSelect
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
groupName="ChooseVehicleMake"
|
||||
textPosition="text-start"
|
||||
v-model="selectedValue"
|
||||
:selectOnKeypress="true"
|
||||
:selectOnKeypress="false"
|
||||
isRequired
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
groupName="ChooseVehicleModel"
|
||||
textPosition="text-start"
|
||||
v-model="selectedValue"
|
||||
:selectOnKeypress="true"
|
||||
:selectOnKeypress="false"
|
||||
isRequired
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
groupName="ChooseVehicleStyle"
|
||||
textPosition="text-start"
|
||||
v-model="selectedValue"
|
||||
:selectOnKeypress="true"
|
||||
:selectOnKeypress="false"
|
||||
isRequired
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
groupName="ChooseVehicleYear"
|
||||
textPosition="text-start"
|
||||
v-model="selectedValue"
|
||||
:selectOnKeypress="true"
|
||||
:selectOnKeypress="false"
|
||||
isRequired
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,6 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
.list-button-horizontal {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
|
|
@ -176,6 +175,10 @@ export default {
|
|||
opacity: 0;
|
||||
width: 0;
|
||||
|
||||
.list-button-horizontal-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus-visible+.list-button-horizontal-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<inputButtonWrapper
|
||||
:buttonWrapperClasses="[
|
||||
'list-card w-100 rounded-3 d-flex align-items-center h-100',
|
||||
{ 'horizontal': isWide }
|
||||
]"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:modelValue="modelValue"
|
||||
:value="value"
|
||||
:groupName="groupName"
|
||||
:validationRules="validationRules"
|
||||
:selectOnKeypress="selectOnKeypress"
|
||||
@change="handleAnswerChange"
|
||||
>
|
||||
<!-- <div :class="{ 'h-100': !isWide }">
|
||||
<inputButtonWrapper
|
||||
:buttonWrapperClasses="[
|
||||
'list-card w-100 rounded-3 d-flex align-items-center h-100',
|
||||
{ horizontal: isWide },
|
||||
]"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:modelValue="modelValue"
|
||||
:value="value"
|
||||
:groupName="groupName"
|
||||
:validationRules="validationRules"
|
||||
:selectOnKeypress="selectOnKeypress"
|
||||
@change="handleAnswerChange"
|
||||
>
|
||||
<!-- <div :class="{ 'h-100': !isWide }">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center"
|
||||
:class="[
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow"
|
||||
> -->
|
||||
<!-- <input
|
||||
<!-- <input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
|
|
@ -37,36 +37,39 @@
|
|||
@change="handleInputChange"
|
||||
/> -->
|
||||
|
||||
<div
|
||||
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
|
||||
:class="getLabelClasses"
|
||||
>
|
||||
<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">
|
||||
{{ 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>
|
||||
</div>
|
||||
<!-- </div>
|
||||
<div
|
||||
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
|
||||
:class="getLabelClasses"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
{{ 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>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</inputButtonWrapper>
|
||||
</inputButtonWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -76,350 +79,350 @@ import { queryStrings } from "@/constants/query-strings";
|
|||
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
|
||||
|
||||
export default {
|
||||
name: "listCard",
|
||||
components: {
|
||||
inputButtonWrapper
|
||||
},
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
buttonImage: String, //Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String, //Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
// buttonID: String, // TODO KO We don't use this //Required: Unique
|
||||
groupName: String, //Rquired: Unique
|
||||
buttonLabelSubCopy: String, //Optional: sub text
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
name: "listCard",
|
||||
components: {
|
||||
inputButtonWrapper,
|
||||
},
|
||||
// colLength: String,
|
||||
validationRules: String,
|
||||
// selectedValues: [Array, String],
|
||||
// hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// checkValue: null,
|
||||
};
|
||||
},
|
||||
// mounted() {
|
||||
// if (Array.isArray(this.validateValue)) {
|
||||
// this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
// const isSelectedByValidator = this.isValueSelectedByArray(
|
||||
// this.validateValue
|
||||
// );
|
||||
|
||||
// if (this.checkValue != isSelectedByValidator) {
|
||||
// this.handleChange(this.value);
|
||||
// }
|
||||
// } else {
|
||||
// this.checkValue = this.selectedValues == this.value;
|
||||
// }
|
||||
// },
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-2 ps-4 pe-4";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return "flex-column pt-4 pb-3";
|
||||
}
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
buttonImage: String, //Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String, //Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
// buttonID: String, // TODO KO We don't use this //Required: Unique
|
||||
groupName: String, //Rquired: Unique
|
||||
buttonLabelSubCopy: String, //Optional: sub text
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// colLength: String,
|
||||
validationRules: String,
|
||||
// selectedValues: [Array, String],
|
||||
// hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
selectOnKeypress: Boolean,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// isValueSelectedByArray(arr) {
|
||||
// return this.isMultiSelect ? arr.includes(this.value) : arr[0];
|
||||
// },
|
||||
// handleInputChange() {
|
||||
// if (!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
// },
|
||||
// handleKeyupArrow() {
|
||||
// if (this.isMultiSelect) {
|
||||
// return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
// }
|
||||
data() {
|
||||
return {
|
||||
// checkValue: null,
|
||||
};
|
||||
},
|
||||
// mounted() {
|
||||
// if (Array.isArray(this.validateValue)) {
|
||||
// this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
// const isSelectedByValidator = this.isValueSelectedByArray(
|
||||
// this.validateValue
|
||||
// );
|
||||
|
||||
// if (!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
// if (this.checkValue != isSelectedByValidator) {
|
||||
// this.handleChange(this.value);
|
||||
// }
|
||||
// } else {
|
||||
// this.checkValue = this.selectedValues == this.value;
|
||||
// }
|
||||
// },
|
||||
// triggerButton() {
|
||||
// if (this.selectingInitiatesLoad) {
|
||||
// this.displayLoader();
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-2 ps-4 pe-4";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return "flex-column pt-4 pb-3";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// isValueSelectedByArray(arr) {
|
||||
// return this.isMultiSelect ? arr.includes(this.value) : arr[0];
|
||||
// },
|
||||
// handleInputChange() {
|
||||
// if (!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
// },
|
||||
// handleKeyupArrow() {
|
||||
// if (this.isMultiSelect) {
|
||||
// return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
// }
|
||||
|
||||
// this.pushEventToGA(
|
||||
// this.$route.query[queryStrings.FMG_PAGE],
|
||||
// this.GaActions.CLICKED,
|
||||
// this.value.toString(),
|
||||
// true,
|
||||
// this.valueToLogType
|
||||
// );
|
||||
// },
|
||||
// handleCheckChange() {
|
||||
// const emitEvent = {
|
||||
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
// value: this.value.toString(),
|
||||
// buttonId: this.buttonID && this.buttonID.toString(),
|
||||
// if (!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
// },
|
||||
// triggerButton() {
|
||||
// if (this.selectingInitiatesLoad) {
|
||||
// this.displayLoader();
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
|
||||
// this.pushEventToGA(
|
||||
// this.$route.query[queryStrings.FMG_PAGE],
|
||||
// this.GaActions.CLICKED,
|
||||
// this.value.toString(),
|
||||
// true,
|
||||
// this.valueToLogType
|
||||
// );
|
||||
// },
|
||||
// handleCheckChange() {
|
||||
// const emitEvent = {
|
||||
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
// value: this.value.toString(),
|
||||
// buttonId: this.buttonID && this.buttonID.toString(),
|
||||
// };
|
||||
|
||||
// this.handleChange(this.value);
|
||||
// this.$emit("isCheckedChanged", emitEvent);
|
||||
// },
|
||||
handleAnswerChange(e) {
|
||||
// console.log(e)
|
||||
this.$emit("change", e);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// Changing this will impact pre-selection data loads on vehicle-parts.
|
||||
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
|
||||
// selectedValues(newVal) {
|
||||
// if (typeof newVal === "string") {
|
||||
// this.checkValue = newVal == this.value;
|
||||
// } else if (newVal !== undefined) {
|
||||
// this.checkValue = newVal.value;
|
||||
// }
|
||||
// },
|
||||
},
|
||||
// setup(props) {
|
||||
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
// const fieldOptions = {
|
||||
// type: inputType,
|
||||
// checkedValue: props.value, // EX: "Single" or "Passenger"
|
||||
// potentialInitialValue: props.selectedValues,
|
||||
// };
|
||||
|
||||
// this.handleChange(this.value);
|
||||
// this.$emit("isCheckedChanged", emitEvent);
|
||||
// },
|
||||
handleAnswerChange(e) {
|
||||
// console.log(e)
|
||||
this.$emit("change", e);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// Changing this will impact pre-selection data loads on vehicle-parts.
|
||||
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
|
||||
// selectedValues(newVal) {
|
||||
// if (typeof newVal === "string") {
|
||||
// this.checkValue = newVal == this.value;
|
||||
// } else if (newVal !== undefined) {
|
||||
// this.checkValue = newVal.value;
|
||||
// // 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
|
||||
// );
|
||||
|
||||
// // First land on the blank, unselected page, no handleChange
|
||||
// // Land on page with initial values, handleChange
|
||||
// const validateValue = value;
|
||||
// return {
|
||||
// handleChange,
|
||||
// errors,
|
||||
// validateValue,
|
||||
// fieldOptions, // only need to expose this for unit test purposes
|
||||
// };
|
||||
// },
|
||||
},
|
||||
// setup(props) {
|
||||
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
// const fieldOptions = {
|
||||
// type: inputType,
|
||||
// checkedValue: props.value, // EX: "Single" or "Passenger"
|
||||
// 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
|
||||
// );
|
||||
|
||||
// // First land on the blank, unselected page, no handleChange
|
||||
// // Land on page with initial values, handleChange
|
||||
// const validateValue = value;
|
||||
// return {
|
||||
// handleChange,
|
||||
// errors,
|
||||
// validateValue,
|
||||
// fieldOptions, // only need to expose this for unit test purposes
|
||||
// };
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
border: 1px solid $gray-500;
|
||||
|
||||
&.has-error {
|
||||
//Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
|
||||
img {
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 2.2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0px 0px 0px 4px $blue-300;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
position: absolute;
|
||||
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
&.has-error {
|
||||
//Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus-visible + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
+ .list-card-content.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
+ .list-card-content.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content::before {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .list-card-content::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .list-card-content {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
width: 5.5rem;
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 2.2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0px 0px 0px 4px $blue-300;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
// opacity: 0;
|
||||
// width: 0;
|
||||
// height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
|
||||
position: absolute;
|
||||
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
margin: -0.15rem 0 0 0;
|
||||
left: 1.175rem;
|
||||
}
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
&:checked + .list-card-content {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
&:focus-visible + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked:focus + .list-card-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: left;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
+ .list-card-content.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
+ .list-card-content.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content::before {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .list-card-content::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .list-card-content {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+ .list-card-content::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content::after {
|
||||
content: "";
|
||||
margin: -0.15rem 0 0 0;
|
||||
left: 1.175rem;
|
||||
}
|
||||
|
||||
&:checked + .list-card-content {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
+ .list-card-content {
|
||||
outline: none;
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: left;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue