pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add noMaxWidth, label and description overrides to text input

Browse Source
This commit is contained in:
Andrew Croce 2018-09-13 12:59:30 -04:00 committed by dandds
parent 4eaacce321
commit 19e80cd183
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/components/text_input.js
View File

@ -19,7 +19,8 @@ export default {
default: () => '' default: () => ''
}, },
initialErrors: Array, initialErrors: Array,
paragraph: String paragraph: String,
noMaxWidth: String
}, },
data: function () { data: function () {

19
templates/components/text_input.html
View File

@ -1,24 +1,35 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %} {% from "components/tooltip.html" import Tooltip %}
{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False, initial_value='') -%} {% macro TextInput(
field,
label=field.label | striptags,
description=field.description,
tooltip='',
placeholder='',
validation='anything',
paragraph=False,
initial_value='',
noMaxWidth=False) -%}
<textinput <textinput
name='{{ field.name }}' name='{{ field.name }}'
validation='{{ validation }}' validation='{{ validation }}'
{% if paragraph %}paragraph='true'{% endif %} {% if paragraph %}paragraph='true'{% endif %}
{% if noMaxWidth %}no-max-width='true'{% endif %}
{% if initial_value or field.data %}initial-value='{{ initial_value or field.data }}'{% endif %} {% if initial_value or field.data %}initial-value='{{ initial_value or field.data }}'{% endif %}
{% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %} {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
key='{{ field.name }}' key='{{ field.name }}'
inline-template> inline-template>
<div <div
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]"> v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
<label for={{field.name}}> <label for={{field.name}}>
<div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div> <div class="usa-input__title">{{ label }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
{% if field.description %} {% if field.description %}
<span class='usa-input__help'>{{ field.description | safe }}</span> <span class='usa-input__help'>{{ description | safe }}</span>
{% endif %} {% endif %}
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span> <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>