Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pass through input helper attributes #170

Merged
merged 5 commits into from
Sep 19, 2015
Merged

Pass through input helper attributes #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
42ce5dd
Added remaining input helper attributes as passthroughs
cah-danmonroe Sep 4, 2015
af8a0bf
Added integration tests for paper-input
cah-danmonroe Sep 7, 2015
3639fd3
Added input helper attributes for textareas as well.
cah-danmonroe Sep 8, 2015
f798644
Add support for custom validations in paper-input component
cah-danmonroe Sep 9, 2015
77b3b60
Revert "Add support for custom validations in paper-input component"
cah-danmonroe Sep 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 44 additions & 2 deletions app/templates/components/paper-input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,51 @@
{{/if}}

{{#if textarea}}
{{textarea class="md-input" id=inputElementId placeholder=placeholder value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{textarea class="md-input" id=inputElementId placeholder=placeholder value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus
name=attr-name
rows=attr-rows
cols=attr-cols
maxlength=attr-maxlength
tabindex=attr-tabindex
selectionEnd=attr-selectionEnd
selectionStart=attr-selectionStart
selectionDirection=attr-selectionDirection
wrap=attr-wrap
readonly=attr-readonly
form=attr-form
spellcheck=attr-spellcheck

enter=event-enter
}}
{{else}}
{{input class="md-input" id=inputElementId placeholder=placeholder type=type value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{input class="md-input" id=inputElementId placeholder=placeholder type=type value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus
accept=attr-accept
autocomplete=attr-autocomplete
autosave=attr-autosave
form=attr-form
formaction=attr-formaction
formenctype=attr-formenctype
formmethod=attr-formmethod
formnovalidate=attr-formnovalidate
formtarget=attr-formtarget
height=attr-height
inputmode=attr-inputmode
min=attr-min
maxlength=attr-maxlength
max=attr-max
multiple=attr-multiple
name=attr-name
pattern=attr-pattern
readonly=attr-readonly
selectionDirection=attr-selectionDirection
size=attr-size
spellcheck=attr-spellcheck
step=attr-step
tabindex=attr-tabindex
width=attr-width

enter=event-enter
}}
{{/if}}

{{#unless hideAllMessages}}
Expand Down
83 changes: 81 additions & 2 deletions tests/dummy/app/templates/input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,88 @@
\{{paper-input placeholder="Phone Number" type="text" value=user.phone icon="phone" md-no-float=''}}
\{{paper-input label="Email (required)" type="email" value=user.email icon="email" icon-class="email" required=true hideAllMessages=true}}
\{{paper-input placeholder="Address" type="text" value=user.address icon="place"}}
</p>
</p>{{/code-block}}

<h3>Input Attributes</h3>
<p>
These additional attributes will be passed through to the input helper inside of paper-input.
See the Ember <a href="http://guides.emberjs.com/v2.0.0/templates/input-helpers/">Input Helpers</a> for more information.
This is an example of using one of the attributes.
</p>
<p>
{{#code-block language="handlebars"}}
\{{paper-input attr-tabindex="2"}}{{/code-block}}
</p>
<h4>Text Fields</h4>
<p>
<table>
<thead>
<tr>
<th>Ember Paper</th>
<th>Matching Ember Input Helper Attribute</th>
</tr>
</thead>
<tbody>
<tr><td>attr-accept</td><td>accept</td></tr>
<tr><td>attr-autocomplete</td><td>autocomplete</td></tr>
<tr><td>attr-autosave</td><td>autosave</td></tr>
<tr><td>attr-form</td><td>form</td></tr>
<tr><td>attr-formaction</td><td>formaction</td></tr>
<tr><td>attr-formenctype</td><td>formenctype</td></tr>
<tr><td>attr-formmethod</td><td>formmethod</td></tr>
<tr><td>attr-formnovalidate</td><td>formnovalidate</td></tr>
<tr><td>attr-formtarget</td><td>formtarget</td></tr>
<tr><td>attr-height</td><td>height</td></tr>
<tr><td>attr-inputmode</td><td>inputmode</td></tr>
<tr><td>attr-min</td><td>min</td></tr>
<tr><td>attr-maxlength</td><td>maxlength</td></tr>
<tr><td>attr-max</td><td>max</td></tr>
<tr><td>attr-multiple</td><td>multiple</td></tr>
<tr><td>attr-name</td><td>name</td></tr>
<tr><td>attr-pattern</td><td>pattern</td></tr>
<tr><td>attr-readonly</td><td>readonly</td></tr>
<tr><td>attr-selectionDirection</td><td>selectionDirection</td></tr>
<tr><td>attr-size</td><td>size</td></tr>
<tr><td>attr-spellcheck</td><td>spellcheck</td></tr>
<tr><td>attr-step</td><td>step</td></tr>
<tr><td>attr-tabindex</td><td>tabindex</td></tr>
<tr><td>attr-width</td><td>width</td></tr>
</tbody>
</table>
</p>
<h4>Text Areas</h4>
<p>
<table>
<thead>
<tr>
<th>Ember Paper</th>
<th>Matching Ember Input Helper Attribute</th>
</tr>
</thead>
<tbody>
<tr><td>attr-cols</td><td>cols</td></tr>
<tr><td>attr-form</td><td>form</td></tr>
<tr><td>attr-maxlength</td><td>maxlength</td></tr>
<tr><td>attr-name</td><td>name</td></tr>
<tr><td>attr-readonly</td><td>readonly</td></tr>
<tr><td>attr-rows</td><td>rows</td></tr>
<tr><td>attr-selectionDirection</td><td>selectionDirection</td></tr>
<tr><td>attr-selectionEnd</td><td>selectionEnd</td></tr>
<tr><td>attr-selectionStart</td><td>selectionStart</td></tr>
<tr><td>attr-spellcheck</td><td>spellcheck</td></tr>
<tr><td>attr-tabindex</td><td>tabindex</td></tr>
<tr><td>attr-wrap</td><td>wrap</td></tr>
</tbody>
</table>
</p>
<h3>Events</h3>
<p>
You may also pass through an action when the user presses the enter key while on the input field or textarea.
</p>
<p>
{{#code-block language="handlebars"}}
\{{paper-input event-enter="myEnterActionFunctionName"}}{{/code-block}}
</p>

{{/code-block}}
</div>
{{/paper-content}}
Loading