425 lines
11 KiB
Vue
425 lines
11 KiB
Vue
<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 }">
|
|
<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="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>
|
|
</template>
|
|
|
|
<script>
|
|
import { useField } from "vee-validate";
|
|
import { toRef } from "vue";
|
|
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: "",
|
|
},
|
|
// 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";
|
|
}
|
|
},
|
|
},
|
|
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
|
|
// }
|
|
|
|
// 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,
|
|
// };
|
|
|
|
// // 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;
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
|
|
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>
|