|
1 | 1 | <template> |
2 | 2 | <md-field class="md-chips" :class="[$mdActiveTheme, chipsClasses]"> |
3 | | - <slot/> |
| 3 | + <slot /> |
4 | 4 |
|
5 | 5 | <md-chip |
6 | 6 | v-for="(chip, key) in value" |
|
25 | 25 | @input="handleInput" |
26 | 26 | @keydown.enter="insertChip" |
27 | 27 | @keydown.8="handleBackRemove" |
28 | | - @focusout="handleFocusOut" |
29 | | - > |
| 28 | + @focusout="handleFocusOut"> |
30 | 29 | </md-input> |
31 | 30 | </md-field> |
32 | 31 | </template> |
|
74 | 73 | duplicatedChip: null |
75 | 74 | }), |
76 | 75 | computed: { |
77 | | - chipsClasses() { |
| 76 | + chipsClasses () { |
78 | 77 | return { |
79 | 78 | 'md-has-value': this.value && this.value.length |
80 | 79 | } |
81 | 80 | }, |
82 | 81 |
|
83 | | - modelRespectLimit() { |
| 82 | + modelRespectLimit () { |
84 | 83 | return !this.mdLimit || this.value.length < this.mdLimit |
85 | 84 | }, |
86 | 85 |
|
87 | | - formattedInputValue() { |
| 86 | + formattedInputValue () { |
88 | 87 | if (!this.mdFormat) { |
89 | 88 | return this.inputValue |
90 | 89 | } |
91 | 90 | return this.mdFormat(this.inputValue) |
92 | 91 | } |
93 | 92 | }, |
94 | 93 | methods: { |
95 | | - insertChip({target}) { |
| 94 | + insertChip ({ target }) { |
96 | 95 | let inputValue = this.formattedInputValue |
97 | 96 |
|
98 | 97 | if (!inputValue || !this.modelRespectLimit) { |
|
113 | 112 | this.$emit('md-insert', inputValue) |
114 | 113 | this.inputValue = '' |
115 | 114 | }, |
116 | | - removeChip(chip) { |
| 115 | + removeChip (chip) { |
117 | 116 | const index = this.value.indexOf(chip) |
118 | 117 |
|
119 | 118 | this.value.splice(index, 1) |
120 | 119 | this.$emit('input', this.value) |
121 | 120 | this.$emit('md-delete', chip, index) |
122 | 121 | this.$nextTick(() => this.$refs.input.$el.focus()) |
123 | 122 | }, |
124 | | - handleBackRemove() { |
| 123 | + handleBackRemove () { |
125 | 124 | if (!this.inputValue) { |
126 | 125 | this.removeChip(this.value[this.value.length - 1]) |
127 | 126 | } |
128 | 127 | }, |
129 | | - handleInput() { |
| 128 | + handleInput () { |
130 | 129 | if (this.mdCheckDuplicated) { |
131 | 130 | this.checkDuplicated() |
132 | 131 | } else { |
133 | 132 | this.duplicatedChip = null |
134 | 133 | } |
135 | 134 | }, |
136 | | - handleFocusOut({target}) { |
| 135 | + handleFocusOut({ target }) { |
137 | 136 | if (this.mdAutoInsert) { |
138 | 137 | this.insertChip(target) |
139 | 138 | } |
|
152 | 151 | } |
153 | 152 | }, |
154 | 153 | watch: { |
155 | | - value() { |
| 154 | + value () { |
156 | 155 | this.checkDuplicated() |
157 | 156 | } |
158 | 157 | } |
|
163 | 162 | @import "~components/MdAnimation/variables"; |
164 | 163 |
|
165 | 164 | .md-chips.md-field { |
166 | | - padding-top : 12px; |
167 | | - flex-wrap : wrap; |
| 165 | + padding-top: 12px; |
| 166 | + flex-wrap: wrap; |
168 | 167 |
|
169 | 168 | &.md-has-value { |
170 | 169 | label { |
171 | | - top : -6px; |
172 | | - } |
| 170 | + top: -6px; |
173 | 171 | } |
| 172 | + } |
174 | 173 |
|
175 | 174 | .md-chip { |
176 | | - margin-bottom : 4px; |
| 175 | + margin-bottom: 4px; |
177 | 176 |
|
178 | 177 | &:last-of-type { |
179 | | - margin-right : 8px; |
180 | | - } |
| 178 | + margin-right: 8px; |
181 | 179 | } |
| 180 | + } |
182 | 181 |
|
183 | 182 | .md-input { |
184 | | - min-width : 128px; |
185 | | - } |
| 183 | + min-width: 128px; |
186 | 184 | } |
| 185 | + } |
187 | 186 | </style> |
0 commit comments