red border update

This commit is contained in:
Bill Richardson 2023-08-14 10:33:32 -04:00
parent 7053a0ecf8
commit ad92c94cca
2 changed files with 16 additions and 25 deletions

View file

@ -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,

View file

@ -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;
} }