+20
-21
lines changedFilter options
+20
-21
lines changed Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
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,8 +25,7 @@
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,25 +73,25 @@
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,27 +112,27 @@
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,7 +151,7 @@
152 151
}
153 152
},
154 153
watch: {
155 -
value() {
154 +
value () {
156 155
this.checkDuplicated()
157 156
}
158 157
}
@@ -163,25 +162,25 @@
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>
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