diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index f8b8146e..066b06a2 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -1,13 +1,18 @@ @@ -92,16 +96,16 @@ export default { listCard, ErrorMessage, radio, - providerPrefRadio + providerPrefRadio, }, props: { buttonTypeString: { type: String, - default: 'listButton' + default: 'listButton', }, buttonTypeObject: { type: Object, - default: null + default: null, }, isMultiSelect: Boolean, groupName: String, @@ -109,16 +113,16 @@ export default { answers: Array, textPosition: { type: String, - default: 'text-center' + default: 'text-center', }, selectingInitiatesLoad: Boolean, loaderColor: { type: String, - default: 'blue' + default: 'blue', }, loaderPosition: { type: String, - default: 'right' + default: 'right', }, isRequired: Boolean, isOverflowScrollable: Boolean, @@ -133,7 +137,7 @@ export default { additionalButtonData: Object, additionalButtonStyling: String, isSmallQuestionText: Boolean, - isSmallQuestionLabelText: Boolean + isSmallQuestionLabelText: Boolean, }, emits: ['update:modelValue'], setup(props) { @@ -142,11 +146,18 @@ export default { const fieldOptions = { value: modelValue, - initialValue: null + initialValue: null, }; - const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } = - useField(props.groupName, props.validationRules, fieldOptions); + const { + errorMessage, + handleBlur, + handleChange, + meta, + validate, + errors, + resetField, + } = useField(props.groupName, props.validationRules, fieldOptions); return { errorMessage, @@ -155,12 +166,12 @@ export default { validate, meta, errors, - resetField + resetField, }; }, data() { return { - lastValuePushedToGa: null + lastValuePushedToGa: null, }; }, computed: { @@ -169,8 +180,8 @@ export default { const baseClasses = this.isOverflowScrollable ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0' : this.buttonTypeString === 'listCard' - ? 'w-100' - : ''; + ? 'w-100' + : ''; const SmallQuestionTextClass = this.isSmallQuestionText ? `${baseClasses}small-question-text` @@ -191,7 +202,8 @@ export default { classes = 'd-flex flex-row p-0'; break; case 'listCard': - classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap'; + classes = + 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap'; if (this.isWide) { classes += ' flex-column'; } @@ -228,32 +240,48 @@ export default { } // Determine number of buttons and add class accordingly. // This is to accommodate unique spacing per design specs. - if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) { + if ( + this.buttonTypeString === 'listCard' && + this.buttonsInfo.length > 2 + ) { classes += ' two-list-card-width'; } - if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) { + if ( + this.buttonTypeString === 'listCard' && + this.buttonsInfo.length === 1 + ) { classes += ' one-list-card-width'; } return classes; }, buttonsInfo() { - return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({ - buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, - altText: answer.altText ?? (answer.Name ? answer.Name : answer), - buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText, - buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy, - buttonAuxiliaryCopy: answer.buttonAuxiliaryCopy ?? answer.buttonAuxiliaryCopy, - buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy, - buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, - buttonImageId: answer.buttonImageId ?? answer.ImageId, - groupName: this.formatString(this.groupName), - value: - answer.value - ?? (this.useTextForValue && answer.Text ? answer.Text : answer.Name) - ?? (typeof answer !== 'object' ? answer : null) - })); + return (Array.isArray(this.answers) ? this.answers : [])?.map( + (answer) => ({ + buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, + altText: + answer.altText ?? (answer.Name ? answer.Name : answer), + buttonLabelSubCopy: + answer.buttonLabelSubCopy ?? answer.SubText, + buttonBodyCopy: + answer.buttonBodyCopy ?? answer.buttonBodyCopy, + buttonAuxiliaryCopy: + answer.buttonAuxiliaryCopy ?? + answer.buttonAuxiliaryCopy, + buttonFooterCopy: + answer.buttonFooterCopy ?? answer.buttonFooterCopy, + buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, + buttonImageId: answer.buttonImageId ?? answer.ImageId, + groupName: this.formatString(this.groupName), + value: + answer.value ?? + (this.useTextForValue && answer.Text + ? answer.Text + : answer.Name) ?? + (typeof answer !== 'object' ? answer : null), + }) + ); }, selectedValues: { get() { @@ -261,24 +289,25 @@ export default { }, set(selectedAnswers) { this.$emit('update:modelValue', selectedAnswers); - } - } + }, + }, }, watch: { modelValue(newValue) { this.resetField({ - value: newValue + value: newValue, }); - } + }, }, beforeMount() { if (this.buttonTypeObject) { - this.$options.components[this.buttonTypeString] = this.buttonTypeObject; + this.$options.components[this.buttonTypeString] = + this.buttonTypeObject; } }, beforeUnmount() { this.resetField({ - value: '' + value: '', }); }, methods: { @@ -287,8 +316,8 @@ export default { }, setLastValuePushedToGa(lastValuePushedToGa) { this.lastValuePushedToGa = lastValuePushedToGa; - } - } + }, + }, }; @@ -334,17 +363,17 @@ export default { .small-question-label-text { &.question-text { span { - text-align: left; - margin: 0 0 0.25rem 0; - } - } - &.question-text { - margin: 0; - } - &fieldset { - .ui-radio { - margin: 0; - } - } + text-align: left; + margin: 0 0 0.25rem 0; + } + } + &.question-text { + margin: 0; + } + &fieldset { + .ui-radio { + margin: 0; + } + } } diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index f2a7b8a9..fc42c9fc 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -6,7 +6,10 @@ tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true" - v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"> + v-on="{ + 'hidden.bs.modal': onModalClosed, + 'shown.bs.modal': onModalOpened, + }"> -