+57
-20
lines changedFilter options
+57
-20
lines changed Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
5 5
<example src="./examples/DuplicatedFeedback.vue" />
6 6
<example src="./examples/Format.vue" />
7 7
<example src="./examples/Themed.vue" />
8 +
<example src="./examples/AutoInsert.vue" />
8 9 9 10
<template>
10 11
<page-container centered :title="$t('pages.chips.title')">
@@ -61,6 +62,13 @@
61 62
<code-example title="Formatted chips" :component="examples['format']" />
62 63
</div>
63 64 65 +
<div class="page-container-section">
66 +
<h2 id="auto-insert">Auto insert</h2>
67 + 68 +
<p>Automatic value entry when focus is lost:</p>
69 +
<code-example title="Auto insert" :component="examples['auto-insert']" />
70 +
</div>
71 + 64 72
<div class="page-container-section">
65 73
<h2 id="hue-colors">Hue Colors</h2>
66 74
@@ -0,0 +1,18 @@
1 +
<template>
2 +
<div>
3 +
<md-chips class="md-primary" v-model="emails" md-placeholder="Enter a email" :md-auto-insert="true">
4 +
<label>Recipients</label>
5 +
</md-chips>
6 +
</div>
7 +
</template>
8 + 9 +
<script>
10 +
export default {
11 +
name: 'AutoInsert',
12 +
data: () => ({
13 +
emails: [
14 +
'John.Smith@example.com',
15 +
]
16 +
})
17 +
}
18 +
</script>
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"
@@ -24,7 +24,9 @@
24 24
:placeholder="mdPlaceholder"
25 25
@input="handleInput"
26 26
@keydown.enter="insertChip"
27 -
@keydown.8="handleBackRemove">
27 +
@keydown.8="handleBackRemove"
28 +
@focusout="handleFocusOut"
29 +
>
28 30
</md-input>
29 31
</md-field>
30 32
</template>
@@ -54,6 +56,10 @@
54 56
},
55 57
mdPlaceholder: [String, Number],
56 58
mdStatic: Boolean,
59 +
mdAutoInsert: {
60 +
type: Boolean,
61 +
default: false
62 +
},
57 63
mdLimit: Number,
58 64
mdCheckDuplicated: {
59 65
type: Boolean,
@@ -68,25 +74,25 @@
68 74
duplicatedChip: null
69 75
}),
70 76
computed: {
71 -
chipsClasses () {
77 +
chipsClasses() {
72 78
return {
73 79
'md-has-value': this.value && this.value.length
74 80
}
75 81
},
76 82 77 -
modelRespectLimit () {
83 +
modelRespectLimit() {
78 84
return !this.mdLimit || this.value.length < this.mdLimit
79 85
},
80 86 81 -
formattedInputValue () {
87 +
formattedInputValue() {
82 88
if (!this.mdFormat) {
83 89
return this.inputValue
84 90
}
85 91
return this.mdFormat(this.inputValue)
86 92
}
87 93
},
88 94
methods: {
89 -
insertChip ({ target }) {
95 +
insertChip({target}) {
90 96
let inputValue = this.formattedInputValue
91 97 92 98
if (!inputValue || !this.modelRespectLimit) {
@@ -107,27 +113,32 @@
107 113
this.$emit('md-insert', inputValue)
108 114
this.inputValue = ''
109 115
},
110 -
removeChip (chip) {
116 +
removeChip(chip) {
111 117
const index = this.value.indexOf(chip)
112 118 113 119
this.value.splice(index, 1)
114 120
this.$emit('input', this.value)
115 121
this.$emit('md-delete', chip, index)
116 122
this.$nextTick(() => this.$refs.input.$el.focus())
117 123
},
118 -
handleBackRemove () {
124 +
handleBackRemove() {
119 125
if (!this.inputValue) {
120 126
this.removeChip(this.value[this.value.length - 1])
121 127
}
122 128
},
123 -
handleInput () {
129 +
handleInput() {
124 130
if (this.mdCheckDuplicated) {
125 131
this.checkDuplicated()
126 132
} else {
127 133
this.duplicatedChip = null
128 134
}
129 135
},
130 -
checkDuplicated () {
136 +
handleFocusOut({target}) {
137 +
if (this.mdAutoInsert) {
138 +
this.insertChip(target)
139 +
}
140 +
},
141 +
checkDuplicated() {
131 142
if (!this.value.includes(this.formattedInputValue)) {
132 143
this.duplicatedChip = null
133 144
return false
@@ -141,7 +152,7 @@
141 152
}
142 153
},
143 154
watch: {
144 -
value () {
155 +
value() {
145 156
this.checkDuplicated()
146 157
}
147 158
}
@@ -152,25 +163,25 @@
152 163
@import "~components/MdAnimation/variables";
153 164 154 165
.md-chips.md-field {
155 -
padding-top: 12px;
156 -
flex-wrap: wrap;
166 +
padding-top : 12px;
167 +
flex-wrap : wrap;
157 168 158 169
&.md-has-value {
159 170
label {
160 -
top: -6px;
171 +
top : -6px;
172 +
}
161 173
}
162 -
}
163 174 164 175
.md-chip {
165 -
margin-bottom: 4px;
176 +
margin-bottom : 4px;
166 177 167 178
&:last-of-type {
168 -
margin-right: 8px;
179 +
margin-right : 8px;
180 +
}
169 181
}
170 -
}
171 182 172 183
.md-input {
173 -
min-width: 128px;
184 +
min-width : 128px;
185 +
}
174 186
}
175 -
}
176 187
</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