+123
-11
lines changedFilter options
+123
-11
lines changed Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
2 2
<example src="./examples/Static.vue" />
3 3
<example src="./examples/Editable.vue" />
4 4
<example src="./examples/ChipCustomTemplate.vue" />
5 +
<example src="./examples/DuplicatedFeedback.vue" />
5 6
<example src="./examples/Themed.vue" />
6 7 7 8
<template>
@@ -45,6 +46,13 @@
45 46
<code-example title="Scoped Slot" :component="examples['chip-custom-template']" />
46 47
</div>
47 48 49 +
<div class="page-container-section">
50 +
<h2>Duplicated Chip</h2>
51 + 52 +
<p>Chips would reject insertion while a chip was duplicated. You could customize feedback style of the duplicated chip:</p>
53 +
<code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
54 +
</div>
55 + 48 56
<div class="page-container-section">
49 57
<h2>Hue Colors</h2>
50 58
@@ -142,6 +150,12 @@ export default {
142 150
type: 'Number',
143 151
description: 'Blocks the chips to create items above the limit.',
144 152
defaults: 'false'
153 +
},
154 +
{
155 +
name: 'md-check-duplicated',
156 +
type: 'Boolean',
157 +
description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
158 +
defaults: 'false'
145 159
}
146 160
]
147 161
},
@@ -0,0 +1,59 @@
1 +
<template>
2 +
<div>
3 +
<md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
4 +
<div class="md-helper-text">Default</div>
5 +
</md-chips>
6 +
<md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
7 +
<div class="md-helper-text">Shake duplicated chip on insertion</div>
8 +
</md-chips>
9 +
<md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated>
10 +
<div class="md-helper-text">Always pulse duplicated chip</div>
11 +
</md-chips>
12 +
</div>
13 +
</template>
14 + 15 +
<script>
16 +
export default {
17 +
name: 'DuplicatedFeedback',
18 +
data: () => ({
19 +
chips: [
20 +
'Pop',
21 +
'Rock',
22 +
'Jazz',
23 +
'Metal'
24 +
]
25 +
})
26 +
}
27 +
</script>
28 + 29 +
<style lang="scss" scoped>
30 +
.shake-on-error /deep/ .md-duplicated {
31 +
animation-name: shake;
32 +
animation-duration: 0.5s;
33 +
}
34 + 35 +
@keyframes shake {
36 +
0% { transform: translate(15px); }
37 +
20% { transform: translate(-15px); }
38 +
40% { transform: translate(7px); }
39 +
60% { transform: translate(-7px); }
40 +
80% { transform: translate(3px); }
41 +
100% { transform: translate(0px); }
42 +
}
43 +
</style>
44 + 45 +
<style lang="css" scoped>
46 +
.pulse-on-error >>> .md-duplicated {
47 +
animation-name: pulse;
48 +
animation-duration: 0.5s;
49 +
animation-iteration-count: infinite;
50 +
animation-direction: alternate;
51 +
animation-timing-function: ease-in-out
52 +
}
53 + 54 +
@keyframes pulse {
55 +
0% { transform: scale(1.1, 1.1); }
56 +
100% { transform: scale(0.9, 0.9); }
57 +
}
58 +
</style>
59 + Original file line number Diff line number Diff line change
@@ -36,15 +36,20 @@
36 36
props: {
37 37
mdDisabled: Boolean,
38 38
mdDeletable: Boolean,
39 -
mdClickable: Boolean
39 +
mdClickable: Boolean,
40 +
mdDuplicated: {
41 +
type: Boolean,
42 +
default: false
43 +
}
40 44
},
41 45
computed: {
42 46
chipClasses () {
43 47
return {
44 48
'md-disabled': this.mdDisabled,
45 49
'md-deletable': this.mdDeletable,
46 50
'md-clickable': this.mdClickable,
47 -
'md-focused': this.mdHasFocus
51 +
'md-focused': this.mdHasFocus,
52 +
'md-duplicated': this.mdDuplicated
48 53
}
49 54
}
50 55
}
@@ -4,9 +4,10 @@
4 4 5 5
<md-chip
6 6
v-for="(chip, key) in value"
7 -
:key="key"
7 +
:key="chip"
8 8
:md-deletable="!mdStatic"
9 9
:md-clickable="!mdStatic"
10 +
:md-duplicated="duplicatedChip === chip"
10 11
@keydown.enter="$emit('md-click', chip, key)"
11 12
@click.native="$emit('md-click', chip, key)"
12 13
@md-delete.stop="removeChip(chip)">
@@ -21,6 +22,7 @@
21 22
:type="mdInputType"
22 23
:id="id"
23 24
:placeholder="mdPlaceholder"
25 +
@input="handleInput"
24 26
@keydown.enter="insertChip"
25 27
@keydown.8="handleBackRemove">
26 28
</md-input>
@@ -52,10 +54,15 @@
52 54
},
53 55
mdPlaceholder: [String, Number],
54 56
mdStatic: Boolean,
55 -
mdLimit: Number
57 +
mdLimit: Number,
58 +
mdCheckDuplicated: {
59 +
type: Boolean,
60 +
default: false
61 +
}
56 62
},
57 63
data: () => ({
58 -
inputValue: ''
64 +
inputValue: '',
65 +
duplicatedChip: null
59 66
}),
60 67
computed: {
61 68
chipsClasses () {
@@ -70,13 +77,19 @@
70 77
},
71 78
methods: {
72 79
insertChip ({ target }) {
73 -
if (
74 -
!this.inputValue ||
75 -
this.value.includes(this.inputValue) ||
76 -
!this.modelRespectLimit
77 -
) {
80 +
if (!this.inputValue || !this.modelRespectLimit) {
81 +
return
82 +
}
83 + 84 +
if (this.value.includes(this.inputValue)) {
85 +
this.duplicatedChip = null
86 +
// to trigger animate
87 +
this.$nextTick(() => {
88 +
this.duplicatedChip = this.inputValue
89 +
})
78 90
return
79 91
}
92 + 80 93
this.value.push(this.inputValue)
81 94
this.$emit('input', this.value)
82 95
this.$emit('md-insert', this.inputValue)
@@ -94,6 +107,26 @@
94 107
if (!this.inputValue) {
95 108
this.removeChip(this.value[this.value.length - 1])
96 109
}
110 +
},
111 +
handleInput () {
112 +
if (this.mdCheckDuplicated) {
113 +
this.checkDuplicated()
114 +
} else {
115 +
this.duplicatedChip = null
116 +
}
117 +
},
118 +
checkDuplicated () {
119 +
if (!this.value.includes(this.inputValue)) {
120 +
this.duplicatedChip = null
121 +
return
122 +
}
123 +
if (!this.mdCheckDuplicated) return
124 +
this.duplicatedChip = this.inputValue
125 +
}
126 +
},
127 +
watch: {
128 +
value () {
129 +
this.checkDuplicated()
97 130
}
98 131
}
99 132
})
@@ -62,7 +62,8 @@
62 62
}
63 63
}
64 64 65 -
&.md-accent {
65 +
&.md-accent,
66 +
&.md-duplicated {
66 67
@include md-theme-property(background-color, accent);
67 68
@include md-theme-property(color, text-primary, accent);
68 69 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