jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add icon prop to text input.

Browse source
This commit is contained in:
bmauger 2022-02-25 11:52:43 -05:00
parent a1e269dd0a
commit 2102e007ed
3 changed files with 55 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/assets/img/icons/location-pin.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
<path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 650 B

28
src/common-components/textbox-question/textbox-question.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="textbox-question">
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
<label :for="inputId" class="form-label">{{labelText}}</label>
<input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
<p class="mt-1 mb-0">There has been an error!</p>
<input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']">
<p class="mt-2 form-test-error" v-if="!suppressError">
There has been an error!
</p>
</div>
</template>
@ -16,12 +18,29 @@ export default {
placeholderText: String,
inputId: String,
isRequired: Boolean,
hasIcon: Boolean,// If input has an icon
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
iconURL: String,
hasError: Boolean,
}
};
</script>
<style lang="scss">
.textbox-question {
input {
&.has-icon {
background-image: url(~@/assets/img/icons/location-pin.svg);
background-repeat: no-repeat;
background-position: .75rem 50%;
background-size: 1rem auto;
padding: 0 0.75rem 0 2.5rem;
&.icon-right {
background-position: calc(100% - .75rem) 50%;
padding: 0 2.5rem 0 0.75rem
}
}
}
.form-label {
margin-bottom: .25rem;
}
@ -48,5 +67,8 @@ export default {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
display: none;
}
}
</style>

29
src/layouts/component-test/component-test.vue
View file

@ -27,12 +27,37 @@
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With Error (class="has-error"):</h6>
<h6 class="my-4">With icon aligned left</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Disabled"
inputID="test-text-input"
hasIcon
imgUrl="~@/assets/img/icons/spinner.svg"
/>
</div>
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With icon aligned right</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Disabled"
inputID="test-text-input"
hasIcon
iconRight
imgUrl="~@/assets/img/icons/spinner.svg"
/>
</div>
</div>
<div class="row">
<div class="col">
<h6 class="my-4">With Error</h6>
<textboxQuestion
labelText="Text Input Label"
placeholderText="Placeholder"
inputID="test-text-input"
class="has-error"
hasError
/>
</div>
</div>