338 lines
8.5 KiB
Vue
338 lines
8.5 KiB
Vue
<template>
|
|
<inputButtonWrapper
|
|
:buttonWrapperClasses="[
|
|
'list-group list-button-horizontal d-flex flex-column w-100',
|
|
{ 'radio-fancy': isCashOrInsurance, 'has-error': errors.length > 0 }
|
|
]"
|
|
:isMultiSelect="isMultiSelect"
|
|
:modelValue="modelValue"
|
|
:value="value"
|
|
:groupName="groupName"
|
|
:validationRules="validationRules"
|
|
:selectOnKeypress="selectOnKeypress"
|
|
@change="handleAnswerChange"
|
|
>
|
|
<!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
|
|
:class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
|
|
@keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
|
|
@keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
|
|
<div :aria-labelledby="buttonID" class="list-button-horizontal-content d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
|
|
<span class="m-0" :class="textPosition">
|
|
{{ buttonLabel }}
|
|
</span>
|
|
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
|
{{ buttonLabelSubCopy }}
|
|
</span>
|
|
<span v-if="screenReaderOnlyText" class="sr-only">
|
|
{{ screenReaderOnlyText }}
|
|
</span>
|
|
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
|
|
</div>
|
|
<!-- </div> -->
|
|
</inputButtonWrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { useField } from "vee-validate";
|
|
import loader from "@/ux-components/loader/loader";
|
|
import { toRef } from "vue";
|
|
import { queryStrings } from "@/constants/query-strings";
|
|
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
|
|
|
|
export default {
|
|
name: "listButtonHorizontal",
|
|
props: {
|
|
isMultiSelect: Boolean,
|
|
groupName: String,
|
|
buttonID: String,
|
|
buttonLabel: String,
|
|
buttonLabelSubCopy: String,
|
|
screenReaderOnlyText: String,
|
|
textPosition: String,
|
|
selectingInitiatesLoad: Boolean,
|
|
loaderColor: String,
|
|
loaderPosition: String,
|
|
isRequired: Boolean,
|
|
isCashOrInsurance: Boolean,
|
|
value: {
|
|
// Field initial value
|
|
type: String,
|
|
default: "",
|
|
},
|
|
validationRules: String,
|
|
selectedValues: [Array, String],
|
|
hasError: Boolean,
|
|
valueToLogType: String,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoaderDisplayed: false,
|
|
checkValue: Boolean,
|
|
};
|
|
},
|
|
created() {
|
|
if (Array.isArray(this.selectedValues)) {
|
|
this.checkValue = this.isMultiSelect
|
|
? this.selectedValues.includes(this.value)
|
|
: this.selectedValues[0] == this.value;
|
|
}
|
|
else {
|
|
this.checkValue = this.selectedValues;
|
|
}
|
|
},
|
|
methods: {
|
|
isValueSelectedByArray(arr) {
|
|
return this.isMultiSelect
|
|
? arr.includes(this.value)
|
|
: arr[0];
|
|
},
|
|
displayLoader() {
|
|
this.isLoaderDisplayed = true;
|
|
},
|
|
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,
|
|
buttonId: this.buttonID && this.buttonID.toString(),
|
|
};
|
|
|
|
this.handleChange(this.value);
|
|
this.$emit("isCheckedChanged", emitEvent);
|
|
this.$emit("update:modelValue", emitEvent);
|
|
}
|
|
},
|
|
components: {
|
|
loader,
|
|
inputButtonWrapper
|
|
},
|
|
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 lang="scss">
|
|
.list-button-horizontal {
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
position: absolute;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
|
|
&:focus-visible+.list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus+.list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
z-index: 3;
|
|
}
|
|
|
|
&:checked+.list-button-horizontal-content {
|
|
background: $blue-100;
|
|
box-shadow: 0 0 0 1px $blue;
|
|
outline: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:checked:focus+.list-button-horizontal-content {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
|
|
&:checked+.list-button-horizontal-content p:first-child {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.list-button-horizontal-content {
|
|
outline: none;
|
|
position: relative;
|
|
background: $white;
|
|
transition: all 150ms linear;
|
|
border: 1px solid $gray-500;
|
|
border-radius: 0;
|
|
width: 100%;
|
|
color: $gray-600;
|
|
|
|
&:hover {
|
|
@include media-breakpoint-up(sm) {
|
|
box-shadow: 0 0 0 4px $blue-300;
|
|
cursor: pointer;
|
|
z-index: 4 !important;
|
|
}
|
|
}
|
|
|
|
+p {
|
|
display: none;
|
|
}
|
|
|
|
span {
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
|
|
// Cash/Insurance option radio button styling
|
|
&.radio-fancy {
|
|
.list-button-horizontal-content {
|
|
border: 1px solid $blue-700;
|
|
z-index: 2;
|
|
color: $blue;
|
|
|
|
span {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.list-button-horizontal-content:hover {
|
|
background-color: $blue-700;
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
position: absolute;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
|
|
&:focus-visible+.list-button-horizontal-content {
|
|
border-radius: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus+.list-button-horizontal-content {
|
|
z-index: 3;
|
|
}
|
|
|
|
&:checked+.list-button-horizontal-content {
|
|
outline: none;
|
|
box-shadow: none;
|
|
color: $white;
|
|
background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
|
|
border-radius: 0.5rem;
|
|
z-index: 5;
|
|
}
|
|
|
|
&:checked:focus+.list-button-horizontal-content {
|
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
|
}
|
|
|
|
&:checked+.list-button-horizontal-content p:first-child {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
&.list-button-horizontal {
|
|
height: 100%;
|
|
label {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.col {
|
|
&:first-of-type {
|
|
.list-button-horizontal {
|
|
.list-button-horizontal-content {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
.list-button-horizontal {
|
|
.list-button-horizontal-content {
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Cash/insurance styling
|
|
&:first-of-type {
|
|
.list-button-horizontal.radio-fancy {
|
|
input[type="radio"] {
|
|
&:checked+.list-button-horizontal-content {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&:checked:focus+.list-button-horizontal-content {
|
|
border-bottom-right-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
.list-button-horizontal.radio-fancy {
|
|
input[type="radio"] {
|
|
&:checked+.list-button-horizontal-content {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
&:checked:focus+.list-button-horizontal-content {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-top-left-radius: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|