revert maxes changes
This commit is contained in:
FrankRua
parent
213090b863
commit
8e1c5fef34
2 changed files with 130 additions and 125 deletions
|
|
@ -1,153 +1,158 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
||||||
<div v-if="questionText" class="d-flex">
|
<div v-if="questionText" class="d-flex">
|
||||||
<span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
|
<span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 d-flex justify-content-center">
|
<div class="w-100 d-flex justify-content-center">
|
||||||
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||||
<legend class="sr-only">{{groupName}}</legend>
|
<legend class="sr-only">{{groupName}}</legend>
|
||||||
<div :class="getComponentWrapperClasses">
|
<div :class="getComponentWrapperClasses">
|
||||||
<component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer" @isCheckedChanged="handleCheckedChanged" :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer" :value="answer.Name ? answer.Name : answer" :buttonLabel="answer.Text ? answer.Text : answer" :buttonLabelSubCopy="answer.SubText" :textPosition="textPosition" :isMultiSelect="isMultiSelect" :groupName="groupName" :selectingInitiatesLoad="selectingInitiatesLoad" :loaderColor="loaderColor" :loaderPosition="loaderPosition" :isWide=isWide :isRequired=isRequired :buttonImage="answer.AnswerImageUrl" :buttonImageId="answer.ImageId" :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="getColLength" :selectedValues="selectedValues" data-test="button" :validationRules="validationRules" />
|
<component
|
||||||
</div>
|
:is="buttonType"
|
||||||
</fieldset>
|
v-for="answer in answers"
|
||||||
|
:key="answer.Name ? answer.Name : answer"
|
||||||
|
@isCheckedChanged="handleCheckedChanged"
|
||||||
|
:buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
|
||||||
|
:value="answer.Name ? answer.Name : answer"
|
||||||
|
:buttonLabel="answer.Text ? answer.Text : answer"
|
||||||
|
:buttonLabelSubCopy="answer.SubText"
|
||||||
|
:textPosition="textPosition"
|
||||||
|
:isMultiSelect="isMultiSelect"
|
||||||
|
:groupName="groupName"
|
||||||
|
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||||
|
:loaderColor="loaderColor"
|
||||||
|
:loaderPosition="loaderPosition"
|
||||||
|
:isWide=isWide
|
||||||
|
:isRequired=isRequired
|
||||||
|
:buttonImage="answer.AnswerImageUrl"
|
||||||
|
:buttonImageId="answer.ImageId"
|
||||||
|
:altText="answer.Name ? answer.Name : answer"
|
||||||
|
screenReaderOnlyText="(opens new window)"
|
||||||
|
:colLength="getColLength"
|
||||||
|
:selectedValues="selectedValues"
|
||||||
|
data-test="button"
|
||||||
|
:validationRules="validationRules"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 form-test-error" v-if="!suppressError">
|
<div class="row mt-2 form-test-error" v-if="!suppressError">
|
||||||
<error-message :name="groupName"></error-message>
|
<error-message :name="groupName"></error-message>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import listButton from "@/ux-components/list-button/list-button";
|
import listButton from "@/ux-components/list-button/list-button";
|
||||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||||
import listCard from "@/ux-components/list-card/list-card";
|
import listCard from "@/ux-components/list-card/list-card";
|
||||||
import {
|
import { ErrorMessage } from 'vee-validate';
|
||||||
ErrorMessage
|
|
||||||
} from 'vee-validate';
|
|
||||||
import radio from "@/ux-components/radio/radio";
|
import radio from "@/ux-components/radio/radio";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "buttonQuestion",
|
name: "buttonQuestion",
|
||||||
props: {
|
props: {
|
||||||
buttonType: {
|
buttonType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "listButton",
|
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,
|
|
||||||
modelValue: Array,
|
|
||||||
validationRules: String,
|
|
||||||
suppressError: Boolean,
|
|
||||||
},
|
},
|
||||||
computed: {
|
isMultiSelect: Boolean,
|
||||||
getFieldSetClasses() {
|
groupName: String,
|
||||||
return this.isOverflowScrollable ?
|
questionText: String,
|
||||||
"container-fluid overflow-scroll position-absolute px-5 pt-1 py-0" :
|
answers: Array,
|
||||||
"";
|
textPosition: {
|
||||||
},
|
type: String,
|
||||||
getComponentWrapperClasses() {
|
default: "text-center",
|
||||||
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 justify-content-center g-2'
|
|
||||||
break;
|
|
||||||
case 'radio':
|
|
||||||
classes = 'ui-radio d-flex'
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return classes;
|
|
||||||
},
|
|
||||||
getColLength() {
|
|
||||||
if (this.isWide) {
|
|
||||||
return "12"
|
|
||||||
} else {
|
|
||||||
return this.answers.length < 3 ? '' : '-4';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedValues: {
|
|
||||||
get: function () {
|
|
||||||
return this.modelValue;
|
|
||||||
},
|
|
||||||
set: function (newValue) {
|
|
||||||
this.$emit("update:modelValue", newValue);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
selectingInitiatesLoad: Boolean,
|
||||||
handleCheckedChanged(val) {
|
loaderColor: {
|
||||||
const newSelectedValues = this.selectedValues;
|
type: String,
|
||||||
if (this.isMultiSelect && this.selectedValues) {
|
default: "blue",
|
||||||
// Add or remove item to array of data to emit
|
|
||||||
if (Array.isArray(this.selectedValues)) {
|
|
||||||
val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
|
|
||||||
this.selectedValues = newSelectedValues;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
if (Array.isArray(this.selectedValues)) {
|
|
||||||
newSelectedValues.splice(0, newSelectedValues.length);
|
|
||||||
newSelectedValues.push(val.value);
|
|
||||||
this.selectedValues = newSelectedValues;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// handleCheckedChanged(val) {
|
|
||||||
// if(this.isMultiSelect && this.selectedValues) {
|
|
||||||
// // Add or remove item to array of data to emit
|
|
||||||
// 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];
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
components: {
|
loaderPosition: {
|
||||||
listButton,
|
type: String,
|
||||||
listButtonHorizontal,
|
default: "right",
|
||||||
listCard,
|
|
||||||
ErrorMessage,
|
|
||||||
radio,
|
|
||||||
},
|
},
|
||||||
|
isRequired: Boolean,
|
||||||
|
isOverflowScrollable: Boolean,
|
||||||
|
isWide: Boolean,
|
||||||
|
modelValue: Array,
|
||||||
|
validationRules: String,
|
||||||
|
suppressError: Boolean,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getFieldSetClasses() {
|
||||||
|
return this.isOverflowScrollable
|
||||||
|
? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
|
||||||
|
: "";
|
||||||
|
},
|
||||||
|
getComponentWrapperClasses() {
|
||||||
|
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 justify-content-center g-2'
|
||||||
|
break;
|
||||||
|
case 'radio':
|
||||||
|
classes = 'ui-radio d-flex'
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
getColLength(){
|
||||||
|
if(this.isWide) {
|
||||||
|
return "12"
|
||||||
|
} else {
|
||||||
|
return this.answers.length < 3 ? '' : '-4';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedValues: {
|
||||||
|
get: function() {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set: function(newValue) {
|
||||||
|
this.$emit("update:modelValue", newValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCheckedChanged(val) {
|
||||||
|
if(this.isMultiSelect && this.selectedValues) {
|
||||||
|
// Add or remove item to array of data to emit
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
listButton,
|
||||||
|
listButtonHorizontal,
|
||||||
|
listCard,
|
||||||
|
ErrorMessage,
|
||||||
|
radio,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.button_question {
|
.button_question {
|
||||||
color: $black;
|
color: $black;
|
||||||
height: calc(100vh - 280px);
|
height: calc(100vh - 280px);
|
||||||
|
|
||||||
.overflow-scroll {
|
.overflow-scroll {
|
||||||
// Height will be determined by overall height of content above list
|
// Height will be determined by overall height of content above list
|
||||||
height: calc(100% - 320px);
|
height: calc(100% - 320px);
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ export default {
|
||||||
};
|
};
|
||||||
|
|
||||||
this.$emit("isCheckedChanged", emitEvent);
|
this.$emit("isCheckedChanged", emitEvent);
|
||||||
//this.$emit("update:modelValue", emitEvent);
|
this.$emit("update:modelValue", emitEvent);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue