-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we can explicitly say that this function will receive this parameter. There is an example on md-table component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix ca3ac20
</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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// capitalize | ||
words = words.map(str => str[0].toUpperCase() + str.slice(1)) | ||
let result = words.join(' ') | ||
return result |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just return the words.join(' ')
instead of creating a new var
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix e955e99
} | ||
}, | ||
methods: { | ||
insertChip ({ target }) { | ||
if (!this.inputValue || !this.modelRespectLimit) { | ||
let inputValue = this.formattedInputValue |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a space before if
statement
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix 79f4f41
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix 8a52166
New props
:md-format
for the formatter before chip insertion. Effects to insertion and duplicated-checking.fix #1288