red border update
This commit is contained in:
parent
7053a0ecf8
commit
ad92c94cca
2 changed files with 16 additions and 25 deletions
|
|
@ -17,22 +17,14 @@
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
:placeHolderText="placeHolderText">
|
:placeHolderText="placeHolderText">
|
||||||
<option
|
<option v-if="placeHolderText" value="" selected>
|
||||||
v-if="placeHolderText"
|
{{ placeHolderText }}
|
||||||
value=""
|
|
||||||
selected>
|
|
||||||
{{ placeHolderText }}
|
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option v-for="(value, name, index) in options" :key="index" :value="name">
|
||||||
v-for="(value, name, index) in options"
|
|
||||||
:key="index"
|
|
||||||
:value="name">
|
|
||||||
{{ value }}
|
{{ value }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<div
|
<div v-show="errorMessage" class="row mt-1 form-test-error">
|
||||||
v-show="errorMessage"
|
|
||||||
class="row mt-1 form-test-error">
|
|
||||||
<span role="alert">{{ errorMessage }}</span>
|
<span role="alert">{{ errorMessage }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -65,12 +57,12 @@ export default {
|
||||||
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 = {
|
||||||
|
|
@ -79,9 +71,11 @@ export default {
|
||||||
initialValue
|
initialValue
|
||||||
};
|
};
|
||||||
|
|
||||||
const { errorMessage, handleBlur, handleChange, meta, errors } = useField(props.inputId,
|
const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
|
||||||
|
props.inputId,
|
||||||
props.validationRules,
|
props.validationRules,
|
||||||
fieldOptions);
|
fieldOptions
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
errorMessage,
|
errorMessage,
|
||||||
|
|
@ -147,8 +141,6 @@ export default {
|
||||||
}
|
}
|
||||||
.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");
|
|
||||||
border: 1px solid $gray-500;
|
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
|
||||||
|
|
@ -322,11 +322,10 @@ input[type='date']::-webkit-calendar-picker-indicator {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.form-control {
|
.form-control {
|
||||||
border: 1px solid $gray-500;
|
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
max-height: 48px;
|
max-height: 3rem;
|
||||||
padding: 12px 16px;
|
padding: 0.75rem 1rem;
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $gray-500;
|
color: $gray-500;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue