Adjust whitespace
This commit is contained in:
Johan Gunawan
parent
a6320642c8
commit
30c3dd7e0f
1 changed files with 144 additions and 139 deletions
|
|
@ -1,159 +1,164 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
||||||
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
|
<label
|
||||||
<select v-model="selectedOption"
|
:for="inputId"
|
||||||
class="form-select"
|
:aria-label="questionText"
|
||||||
:id="inputId"
|
class="form-label"
|
||||||
:name="inputId"
|
v-html="labelText"></label>
|
||||||
:aria-disabled="isDisabled"
|
<select
|
||||||
:disabled="isDisabled"
|
v-model="selectedOption"
|
||||||
:aria-required="isRequired"
|
class="form-select"
|
||||||
:validationRules="validationRules"
|
:id="inputId"
|
||||||
:placeHolderText="placeHolderText"
|
:name="inputId"
|
||||||
>
|
:aria-disabled="isDisabled"
|
||||||
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
|
:disabled="isDisabled"
|
||||||
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
:aria-required="isRequired"
|
||||||
{{ value }}
|
:validationRules="validationRules"
|
||||||
</option>
|
:placeHolderText="placeHolderText">
|
||||||
</select>
|
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
|
||||||
<div v-show="errorMessage" class="row mt-2 form-test-error">
|
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
||||||
<span role="alert">{{ errorMessage }}</span>
|
{{ value }}
|
||||||
</div>
|
</option>
|
||||||
</div>
|
</select>
|
||||||
|
<div v-show="errorMessage" class="row mt-2 form-test-error">
|
||||||
|
<span role="alert">{{ errorMessage }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useField } from "vee-validate";
|
import { useField } from "vee-validate";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "dropdown-question",
|
name: "dropdown-question",
|
||||||
props: {
|
props: {
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
inputId: String,
|
inputId: String,
|
||||||
options: {
|
options: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true,
|
||||||
},
|
},
|
||||||
isDisabled: Boolean,
|
isDisabled: Boolean,
|
||||||
isRequired: Boolean,
|
isRequired: Boolean,
|
||||||
disableAutoFill: Boolean,
|
disableAutoFill: Boolean,
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
hasError: Boolean,
|
hasError: Boolean,
|
||||||
errors: Array,
|
errors: Array,
|
||||||
placeHolderText: String
|
placeHolderText: String
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const propsClone = Object.assign({}, props);
|
const propsClone = Object.assign({}, props);
|
||||||
const modelValue = propsClone.modelValue;
|
const modelValue = propsClone.modelValue;
|
||||||
let initialValue;
|
let initialValue;
|
||||||
|
|
||||||
switch (typeof modelValue) {
|
switch (typeof modelValue) {
|
||||||
case "number":
|
case "number":
|
||||||
initialValue = modelValue;
|
initialValue = modelValue;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
|
initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
const fieldOptions = {
|
const fieldOptions = {
|
||||||
type: "select",
|
type: "select",
|
||||||
value: props.modelValue,
|
value: props.modelValue,
|
||||||
initialValue: initialValue,
|
initialValue: initialValue,
|
||||||
};
|
};
|
||||||
|
|
||||||
const {
|
const {errorMessage, handleBlur, handleChange, meta, errors } = useField(
|
||||||
errorMessage,
|
props.inputId,
|
||||||
handleBlur,
|
props.validationRules,
|
||||||
handleChange,
|
fieldOptions
|
||||||
meta,
|
);
|
||||||
errors
|
|
||||||
} = useField(props.inputId, props.validationRules, fieldOptions);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
errorMessage,
|
errorMessage,
|
||||||
handleBlur,
|
handleBlur,
|
||||||
handleChange,
|
handleChange,
|
||||||
meta,
|
meta,
|
||||||
errors
|
errors
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
questionText(){
|
questionText() {
|
||||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||||
},
|
},
|
||||||
selectedOption: {
|
selectedOption: {
|
||||||
get: function() {
|
get: function () {
|
||||||
return !this.modelValue ? "" : this.modelValue;
|
return !this.modelValue ? "" : this.modelValue;
|
||||||
},
|
},
|
||||||
set: function(newValue) {
|
set: function (newValue) {
|
||||||
this.$emit("update:modelValue", newValue);
|
this.$emit("update:modelValue", newValue);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
labelText: {
|
labelText: {
|
||||||
get: function () {
|
get: function () {
|
||||||
const noBreakChar = "⁠";
|
const noBreakChar = "⁠";
|
||||||
var questionText = "";
|
var questionText = "";
|
||||||
if (this.disableAutoFill) {
|
if (this.disableAutoFill) {
|
||||||
var words = this.questionText.toString().split(/[ ]+/);
|
var words = this.questionText.toString().split(/[ ]+/);
|
||||||
words.forEach(function (word) {
|
words.forEach(function (word) {
|
||||||
const position = 1;
|
const position = 1;
|
||||||
word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
|
word = [
|
||||||
questionText += `${word} `;
|
word.toString().slice(0, position),
|
||||||
});
|
noBreakChar,
|
||||||
|
word.toString().slice(position),
|
||||||
|
].join("");
|
||||||
|
questionText += `${word} `;
|
||||||
|
});
|
||||||
|
|
||||||
questionText = questionText.trimEnd();
|
questionText = questionText.trimEnd();
|
||||||
} else {
|
} else {
|
||||||
questionText = this.questionText.toString();
|
questionText = this.questionText.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
return questionText;
|
return questionText;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
selectedOption(newValue) {
|
selectedOption(newValue) {
|
||||||
this.handleChange(newValue);
|
this.handleChange(newValue);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.dropdown-question {
|
.dropdown-question {
|
||||||
label {
|
label {
|
||||||
color: $black;
|
color: $black;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.form-label {
|
.form-label {
|
||||||
margin-bottom: .25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.form-select {
|
.form-select {
|
||||||
color: $gray-600;
|
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");
|
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: 1px solid $gray-500;
|
||||||
border-radius: .5rem;
|
border-radius: 0.5rem;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
&:focus,
|
&:focus,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
box-shadow: 0 0 0 2.5px $blue;
|
box-shadow: 0 0 0 2.5px $blue;
|
||||||
}
|
}
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background-color: $gray-100;
|
background-color: $gray-100;
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 0 0 4px transparent;
|
box-shadow: 0 0 0 4px transparent;
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
box-shadow: 0 0 0 4px $blue-300;
|
box-shadow: 0 0 0 4px $blue-300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue