353 lines
7.9 KiB
Vue
353 lines
7.9 KiB
Vue
<template>
|
|
<div :class="'col' + colLength">
|
|
<div
|
|
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
|
:class="[
|
|
isWide ? 'horizontal' : '',
|
|
(errors.length > 0 || hasError) ? 'has-error' : '',
|
|
]"
|
|
@mouseup="handleChange(value)"
|
|
@keyup.space="handleChange(value)"
|
|
>
|
|
<input
|
|
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
|
:id="buttonID"
|
|
:name="groupName"
|
|
:value="value"
|
|
:aria-required="isRequired"
|
|
v-model="checkValue"
|
|
@change="handleCheckChange(value)"
|
|
/>
|
|
<label
|
|
:for="buttonID"
|
|
class="d-flex w-100 align-items-center px-2 h-100"
|
|
:class="getLabelClasses"
|
|
tabindex="-1"
|
|
>
|
|
<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>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useField } from "vee-validate";
|
|
|
|
export default {
|
|
name: "listCard",
|
|
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, //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],
|
|
modelValue: Object,
|
|
hasError: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
checkValue: [Boolean, String],
|
|
}
|
|
},
|
|
created() {
|
|
if (Array.isArray(this.selectedValues)) {
|
|
this.checkValue = this.isMultiSelect
|
|
? this.selectedValues.includes(this.value)
|
|
: this.selectedValues[0];
|
|
}
|
|
},
|
|
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.
|
|
modelValue(newVal) {
|
|
if (newVal !== undefined) {
|
|
this.checkValue = newVal.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: {
|
|
handleCheckChange(newValue, oldValue) {
|
|
const isInitialization = typeof oldValue === "function";
|
|
if (!isInitialization) {
|
|
const emitEvent = {
|
|
checkValue: this.checkValue,
|
|
value: this.value.toString(),
|
|
buttonId: this.buttonID.toString(),
|
|
};
|
|
this.$emit("isCheckedChanged", emitEvent);
|
|
this.$emit("update:modelValue", emitEvent);
|
|
}
|
|
},
|
|
},
|
|
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,
|
|
} = useField(props.groupName, props.validationRules, fieldOptions);
|
|
|
|
return {
|
|
handleChange,
|
|
errors,
|
|
fieldOptions, // only need to expose this for unit test purposes
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list-card {
|
|
border: 1px solid $gray-500;
|
|
|
|
&.invalid {
|
|
//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;
|
|
|
|
+ label {
|
|
outline: none;
|
|
display: block;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
p {
|
|
color: $gray-600;
|
|
text-align: center;
|
|
|
|
&.sub-copy {
|
|
color: $gray-550;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:checked + label {
|
|
background: $blue-100;
|
|
box-shadow: 0 0 0 1px $blue;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&:focus + label {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&:checked {
|
|
&:focus + label {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
}
|
|
|
|
&:checked + label {
|
|
p {
|
|
color: $black;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-copy {
|
|
color: $gray-600;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
+ label::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;
|
|
}
|
|
|
|
+ label.checkboxTop::before {
|
|
margin: -1.25rem 0.5rem 0 0 !important;
|
|
}
|
|
|
|
+ label.checkboxTop::after {
|
|
margin: -1.5rem 0.5rem 0 0 !important;
|
|
}
|
|
|
|
&:checked + label::before {
|
|
background: $blue;
|
|
}
|
|
|
|
&:checked + label::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"] {
|
|
+ label::before {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
+ label::after {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
+ label {
|
|
img {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
img {
|
|
margin-bottom: 0;
|
|
width: 5.5rem;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
+ label::before {
|
|
content: "";
|
|
position: relative;
|
|
margin: 0 0.5rem 0 0;
|
|
order: 1;
|
|
}
|
|
|
|
&:checked + label::after {
|
|
content: "";
|
|
margin: -0.25rem 0 0 0;
|
|
left: 1.15rem;
|
|
}
|
|
|
|
&:checked + label {
|
|
p {
|
|
color: $black;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-copy {
|
|
color: $gray-600;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
+ label {
|
|
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>
|