feat(MdChips): formatter #1339
feat(MdChips): formatter #1339
Conversation
Formatter before chip insertion. Effects to insertion and duplicated-checking. fix #1288
| type: 'Function', | ||
| description: [ | ||
| 'Formatter before chip insertion. Effects to insertion and duplicated-checking.', | ||
| '@param {<code>String</code>} input value' |
There was a problem hiding this comment.
Maybe we can explicitly say that this function will receive this parameter. There is an example on md-table component
| </md-chips> | ||
| <md-chips class="md-primary" v-model="artists" md-placeholder="Add artist..." :md-format="formatName"> | ||
| <label>Artists</label> | ||
| <div class="md-helper-text">Try insert `Eugène Ysaÿe` twice. The formatter will remove diacritics.</div> |
There was a problem hiding this comment.
Is this message correct? Try insert 'Eugène Ysaÿe' twice. I think a good one could be:
Try inserting a chip with 'Eugène Ysaÿe'
There was a problem hiding this comment.
Yes, I expect developers see this:
| // capitalize | ||
| words = words.map(str => str[0].toUpperCase() + str.slice(1)) | ||
| let result = words.join(' ') | ||
| return result |
There was a problem hiding this comment.
Just return the words.join(' ') instead of creating a new var
| } | ||
| }, | ||
| methods: { | ||
| insertChip ({ target }) { | ||
| if (!this.inputValue || !this.modelRespectLimit) { | ||
| let inputValue = this.formattedInputValue |
There was a problem hiding this comment.
Add a space before if statement
|
Great idea! We can use this on autocomplete as well. Thank you! |
| <div class="page-container-section"> | ||
| <h2>Formatter</h2> | ||
|
|
||
| <p>There could be a rule to be followed by the inserted chips:</p> |
There was a problem hiding this comment.
A better message could be:
Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.
* feat(MdChips): formatter Formatter before chip insertion. Effects to insertion and duplicated-checking. fix #1288 * style(MdChips): always return a value * docs(Chips): fix `md-format` API description vuematerial/vue-material#1339 (comment) * docs(ChipsFormat): fix component name and example message * docs(ChipsFormat): `formatName` return result directly vuematerial/vue-material#1339 (comment) * style(MdChips): add a space before `if` statement vuematerial/vue-material#1339 (comment) * docs(Chips): better message for formatter vuematerial/vue-material#1339 (comment) * fix: code style
New props
:md-formatfor the formatter before chip insertion. Effects to insertion and duplicated-checking.fix #1288