+91
-11
lines changedFilter options
+91
-11
lines changed Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
3 3
<example src="./examples/Editable.vue" />
4 4
<example src="./examples/ChipCustomTemplate.vue" />
5 5
<example src="./examples/DuplicatedFeedback.vue" />
6 +
<example src="./examples/Format.vue" />
6 7
<example src="./examples/Themed.vue" />
7 8 8 9
<template>
@@ -53,6 +54,13 @@
53 54
<code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
54 55
</div>
55 56 57 +
<div class="page-container-section">
58 +
<h2>Formatter</h2>
59 + 60 +
<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>
61 +
<code-example title="Formatted chips" :component="examples['format']" />
62 +
</div>
63 + 56 64
<div class="page-container-section">
57 65
<h2>Hue Colors</h2>
58 66
@@ -156,6 +164,15 @@ export default {
156 164
type: 'Boolean',
157 165
description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
158 166
defaults: 'false'
167 +
},
168 +
{
169 +
name: 'md-format',
170 +
type: 'Function',
171 +
description: [
172 +
'Formatter before chip insertion. Effects to insertion and duplicated-checking.',
173 +
'The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.'
174 +
].join('<br/>'),
175 +
defaults: 'null'
159 176
}
160 177
]
161 178
},
@@ -0,0 +1,47 @@
1 +
<template>
2 +
<div>
3 +
<md-chips class="md-primary" v-model="clubs" md-placeholder="Add club..." :md-format="toUppercase">
4 +
<label>La Liga Clubs</label>
5 +
<div class="md-helper-text">Three uppercase letters</div>
6 +
</md-chips>
7 + 8 +
<md-chips class="md-primary" v-model="artists" md-placeholder="Add artist..." :md-format="formatName">
9 +
<label>Artists</label>
10 +
<div class="md-helper-text">Try inserting `Eugène Ysaÿe`. The formatter will remove diacritics.</div>
11 +
</md-chips>
12 +
</div>
13 +
</template>
14 + 15 +
<script>
16 +
export default {
17 +
name: 'Format',
18 +
data: () => ({
19 +
clubs: [
20 +
'FCB',
21 +
'MAD'
22 +
],
23 +
artists: [
24 +
'Claude Debussy',
25 +
'Jules Massenet',
26 +
'Gabriel Dupont',
27 +
'Emma Bardac',
28 +
'Mary Garden'
29 +
]
30 +
}),
31 +
methods: {
32 +
toUppercase (str) {
33 +
str = str.replace(/\s/g, '').toUpperCase()
34 +
if (str.length !== 3) return false
35 +
return str
36 +
},
37 +
formatName (str) {
38 +
let words = str.split(' ').filter(str => str !== '')
39 +
// remove accents / diacritics
40 +
words = words.map(str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))
41 +
// capitalize
42 +
words = words.map(str => str[0].toUpperCase() + str.slice(1))
43 +
return words.join(' ')
44 +
}
45 +
}
46 +
}
47 +
</script>
Original file line number Diff line number Diff line change
@@ -58,6 +58,9 @@
58 58
mdCheckDuplicated: {
59 59
type: Boolean,
60 60
default: false
61 +
},
62 +
mdFormat: {
63 +
type: Function
61 64
}
62 65
},
63 66
data: () => ({
@@ -73,26 +76,35 @@
73 76 74 77
modelRespectLimit () {
75 78
return !this.mdLimit || this.value.length < this.mdLimit
79 +
},
80 + 81 +
formattedInputValue () {
82 +
if (!this.mdFormat) {
83 +
return this.inputValue
84 +
}
85 +
return this.mdFormat(this.inputValue)
76 86
}
77 87
},
78 88
methods: {
79 89
insertChip ({ target }) {
80 -
if (!this.inputValue || !this.modelRespectLimit) {
90 +
let inputValue = this.formattedInputValue
91 + 92 +
if (!inputValue || !this.modelRespectLimit) {
81 93
return
82 94
}
83 - 84 -
if (this.value.includes(this.inputValue)) {
95 + 96 +
if (this.value.includes(inputValue)) {
85 97
this.duplicatedChip = null
86 98
// to trigger animate
87 99
this.$nextTick(() => {
88 -
this.duplicatedChip = this.inputValue
100 +
this.duplicatedChip = inputValue
89 101
})
90 102
return
91 103
}
92 - 93 -
this.value.push(this.inputValue)
104 + 105 +
this.value.push(inputValue)
94 106
this.$emit('input', this.value)
95 -
this.$emit('md-insert', this.inputValue)
107 +
this.$emit('md-insert', inputValue)
96 108
this.inputValue = ''
97 109
},
98 110
removeChip (chip) {
@@ -116,12 +128,16 @@
116 128
}
117 129
},
118 130
checkDuplicated () {
119 -
if (!this.value.includes(this.inputValue)) {
131 +
if (!this.value.includes(this.formattedInputValue)) {
120 132
this.duplicatedChip = null
121 -
return
133 +
return false
122 134
}
123 -
if (!this.mdCheckDuplicated) return
124 -
this.duplicatedChip = this.inputValue
135 + 136 +
if (!this.mdCheckDuplicated) {
137 +
return false
138 +
}
139 + 140 +
this.duplicatedChip = this.formattedInputValue
125 141
}
126 142
},
127 143
watch: {
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4