Skip to content
Permalink
Browse files

feat(MdChips): add formatter for individual chips (#1339)

* 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

#1339 (comment)

* docs(ChipsFormat): fix component name and example message

* docs(ChipsFormat): `formatName` return result directly

#1339 (comment)

* style(MdChips): add a space before `if` statement

#1339 (comment)

* docs(Chips): better message for formatter

#1339 (comment)

* fix: code style
  • Loading branch information...
VdustR authored and marcosmoura committed Jan 12, 2018
1 parent d3953f7 commit 247a840643e0316e10025a87c12446f4d3ffdaed
@@ -3,6 +3,7 @@
<example src="./examples/Editable.vue" />
<example src="./examples/ChipCustomTemplate.vue" />
<example src="./examples/DuplicatedFeedback.vue" />
<example src="./examples/Format.vue" />
<example src="./examples/Themed.vue" />

<template>
@@ -53,6 +54,13 @@
<code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
</div>

<div class="page-container-section">
<h2>Formatter</h2>

<p>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.</p>
<code-example title="Formatted chips" :component="examples['format']" />
</div>

<div class="page-container-section">
<h2>Hue Colors</h2>

@@ -156,6 +164,15 @@ export default {
type: 'Boolean',
description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
defaults: 'false'
},
{
name: 'md-format',
type: 'Function',
description: [
'Formatter before chip insertion. Effects to insertion and duplicated-checking.',
'The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.'
].join('<br/>'),
defaults: 'null'
}
]
},
@@ -0,0 +1,47 @@
<template>
<div>
<md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
<label>La Liga Clubs</label>
<div class="md-helper-text">Three uppercase letters</div>
</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 inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
</md-chips>
</div>
</template>

<script>
export default {
name: 'Format',
data: () => ({
clubs: [
'FCB',
'MAD'
],
artists: [
'Claude Debussy',
'Jules Massenet',
'Gabriel Dupont',
'Emma Bardac',
'Mary Garden'
]
}),
methods: {
toUppercase (str) {
str = str.replace(/\s/g, '').toUpperCase()
if (str.length !== 3) return false
return str
},
formatName (str) {
let words = str.split(' ').filter(str => str !== '')
// remove accents / diacritics
words = words.map(str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
// capitalize
words = words.map(str => str[0].toUpperCase() + str.slice(1))
return words.join(' ')
}
}
}
</script>
@@ -58,6 +58,9 @@
mdCheckDuplicated: {
type: Boolean,
default: false
},
mdFormat: {
type: Function
}
},
data: () => ({
@@ -73,26 +76,35 @@
modelRespectLimit () {
return !this.mdLimit || this.value.length < this.mdLimit
},
formattedInputValue () {
if (!this.mdFormat) {
return this.inputValue
}
return this.mdFormat(this.inputValue)
}
},
methods: {
insertChip ({ target }) {
if (!this.inputValue || !this.modelRespectLimit) {
let inputValue = this.formattedInputValue
if (!inputValue || !this.modelRespectLimit) {
return
}
if (this.value.includes(this.inputValue)) {
if (this.value.includes(inputValue)) {
this.duplicatedChip = null
// to trigger animate
this.$nextTick(() => {
this.duplicatedChip = this.inputValue
this.duplicatedChip = inputValue
})
return
}
this.value.push(this.inputValue)
this.value.push(inputValue)
this.$emit('input', this.value)
this.$emit('md-insert', this.inputValue)
this.$emit('md-insert', inputValue)
this.inputValue = ''
},
removeChip (chip) {
@@ -116,12 +128,16 @@
}
},
checkDuplicated () {
if (!this.value.includes(this.inputValue)) {
if (!this.value.includes(this.formattedInputValue)) {
this.duplicatedChip = null
return
return false
}
if (!this.mdCheckDuplicated) return
this.duplicatedChip = this.inputValue
if (!this.mdCheckDuplicated) {
return false
}
this.duplicatedChip = this.formattedInputValue
}
},
watch: {

0 comments on commit 247a840

Please sign in to comment.
You can’t perform that action at this time.