DigitalConsumer.FixMyGlass/src/mixins/button-mixin.js
2022-09-16 09:12:59 -04:00

81 lines
1.9 KiB
JavaScript

export default {
emits: ["change"],
model: {
prop: "modelValue",
event: "change",
},
props: {
value: {
type: [String, Number],
required: true,
},
modelValue: {
type: [Array, String, Number],
required: true,
},
isMultiSelect: Boolean,
isWide: Boolean,
buttonImage: String,
buttonImageId: String,
buttonLabel: {
type: String,
required: true,
},
isRequired: {
type: Boolean,
required: true,
},
buttonLabelSubCopy: {
type: String,
required: true,
},
groupName: {
type: String,
required: true,
},
validationRules: {
type: String,
required: true,
},
classes: [String, Array, Object],
},
methods: {
handleSelectionChange(event) {
console.log(event);
console.log(this.value);
console.log(this.modelValue);
let isChecked = event.target.checked;
console.log("BM value: ", this.value);
let valueToEmit;
if (this.isMultiSelect && this.modelValue instanceof Array) {
let newValue = [...this.modelValue];
if (isChecked && !this.modelValue.includes(this.value)) {
newValue.push(this.value);
} else {
newValue.splice(newValue.indexOf(this.value), 1);
}
valueToEmit = newValue;
} else {
valueToEmit = this.value;
}
console.log("ButtonWrapper is emitting: ", valueToEmit);
this.$emit("change", valueToEmit);
},
},
computed: {
isChecked() {
if (this.isMultiSelect && this.modelValue instanceof Array) {
this.modelValue.includes(this.value);
}
return this.modelValue === this.value;
},
inputType() {
return this.isMultiSelect ? "checkbox" : "radio";
},
buttonId() {
return `${this.groupName} ${JSON.stringify(this.value)}`;
},
},
};