136 lines
2.9 KiB
Vue
136 lines
2.9 KiB
Vue
<template>
|
|
<div class="dropdown-question">
|
|
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
|
|
<select v-model="selectedOption"
|
|
class="form-select"
|
|
:id="inputId"
|
|
:name="inputId"
|
|
:aria-disabled="isDisabled"
|
|
:disabled="isDisabled"
|
|
:aria-required="isRequired"
|
|
:validationRules="validationRules"
|
|
@input="handleChange"
|
|
@blur="handleBlur" >
|
|
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
<div v-show="errorMessage" class="row mt-2 form-test-error">
|
|
<span role="alert">{{ errorMessage }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useField } from "vee-validate";
|
|
|
|
export default {
|
|
name: "dropdown-question",
|
|
props: {
|
|
modelValue: String,
|
|
inputId: String,
|
|
options: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
isDisabled: Boolean,
|
|
isRequired: Boolean,
|
|
disableAutoFill: Boolean,
|
|
validationRules: String,
|
|
},
|
|
setup(props) {
|
|
const fieldOptions = {
|
|
type: "text",
|
|
value: props.modelValue,
|
|
};
|
|
|
|
const {
|
|
errorMessage,
|
|
handleBlur,
|
|
handleChange,
|
|
meta,
|
|
} = useField(props.inputId, props.validationRules, fieldOptions);
|
|
|
|
return {
|
|
errorMessage,
|
|
handleBlur,
|
|
handleChange,
|
|
meta,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
questionText: "",
|
|
}
|
|
},
|
|
methods: {
|
|
initializeComponent(cmsContent) {
|
|
this.questionText = cmsContent;
|
|
}
|
|
},
|
|
computed: {
|
|
selectedOption: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
}
|
|
},
|
|
labelText: {
|
|
get: function () {
|
|
let labelText = this.questionText;
|
|
if (this.disableAutoFill) {
|
|
const noBreakChar = "⁠";
|
|
const position = 1;
|
|
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
|
|
}
|
|
|
|
return labelText;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
selectedOption(newValue) {
|
|
this.handleChange(newValue);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dropdown-question {
|
|
label {
|
|
color: $black;
|
|
}
|
|
.form-label {
|
|
margin-bottom: .25rem;
|
|
}
|
|
.form-select {
|
|
color: $gray-600;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
|
border: 1px solid $gray-500;
|
|
border-radius: .5rem;
|
|
min-height: 3rem;
|
|
&:focus,
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
&:disabled,
|
|
&.disabled {
|
|
background-color: $gray-100;
|
|
filter: grayscale(100%);
|
|
&:hover {
|
|
box-shadow: 0 0 0 4px transparent;
|
|
border: 1px solid $gray-500;
|
|
}
|
|
}
|
|
&:hover {
|
|
border: 1px solid $gray-500;
|
|
box-shadow: 0 0 0 4px $blue-300;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|