|
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