Skip to content
Permalink
Browse files

feat(MdChips): feedback for duplicated chip (#1281)

* feat(MdChips): feedback for duplicated chip

add `md-duplicated` class which has the same style as `md-accent`. add
`md-check-duplicated-on-change` props.

fix #1212

* fix(MdChips): change api `mdCheckDuplicatedOnChange` to `mdAlwaysCheckDuplicated`

* fix(MdChips): change for loop key from `key` to `chip` to prevent triggering animate while removing

* docs(MdChips): example and new props for duplicated chip checking

fix #1212

* fix(MdChips): always clear `duplicatedChip` on change

* style(MdChips): fix style to pass scss-lint

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* fix(MdChips): rename prop

* style(MdChips): adjust code style
  • Loading branch information...
VdustR authored and marcosmoura committed Dec 19, 2017
1 parent 023723a commit d15f63bb4f44a432d870c37e6c9a25940eb59495
@@ -2,6 +2,7 @@
<example src="./examples/Static.vue" />
<example src="./examples/Editable.vue" />
<example src="./examples/ChipCustomTemplate.vue" />
<example src="./examples/DuplicatedFeedback.vue" />
<example src="./examples/Themed.vue" />

<template>
@@ -45,6 +46,13 @@
<code-example title="Scoped Slot" :component="examples['chip-custom-template']" />
</div>

<div class="page-container-section">
<h2>Duplicated Chip</h2>

<p>Chips would reject insertion while a chip was duplicated. You could customize feedback style of the duplicated chip:</p>
<code-example title="Duplicated Feedback" :component="examples['duplicated-feedback']" />
</div>

<div class="page-container-section">
<h2>Hue Colors</h2>

@@ -142,6 +150,12 @@ export default {
type: 'Number',
description: 'Blocks the chips to create items above the limit.',
defaults: 'false'
},
{
name: 'md-check-duplicated',
type: 'Boolean',
description: 'Always check if there is a duplicated chip while changing the input value, or check it only on insertion',
defaults: 'false'
}
]
},
@@ -0,0 +1,59 @@
<template>
<div>
<md-chips class="md-primary" v-model="chips" md-placeholder="Add genre...">
<div class="md-helper-text">Default</div>
</md-chips>
<md-chips class="md-primary shake-on-error" v-model="chips" md-placeholder="Add genre...">
<div class="md-helper-text">Shake duplicated chip on insertion</div>
</md-chips>
<md-chips class="md-primary pulse-on-error" v-model="chips" md-placeholder="Add genre..." md-check-duplicated>
<div class="md-helper-text">Always pulse duplicated chip</div>
</md-chips>
</div>
</template>

<script>
export default {
name: 'DuplicatedFeedback',
data: () => ({
chips: [
'Pop',
'Rock',
'Jazz',
'Metal'
]
})
}
</script>

<style lang="scss" scoped>
.shake-on-error /deep/ .md-duplicated {
animation-name: shake;
animation-duration: 0.5s;
}
@keyframes shake {
0% { transform: translate(15px); }
20% { transform: translate(-15px); }
40% { transform: translate(7px); }
60% { transform: translate(-7px); }
80% { transform: translate(3px); }
100% { transform: translate(0px); }
}
</style>

<style lang="css" scoped>
.pulse-on-error >>> .md-duplicated {
animation-name: pulse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out
}
@keyframes pulse {
0% { transform: scale(1.1, 1.1); }
100% { transform: scale(0.9, 0.9); }
}
</style>

@@ -36,15 +36,20 @@
props: {
mdDisabled: Boolean,
mdDeletable: Boolean,
mdClickable: Boolean
mdClickable: Boolean,
mdDuplicated: {
type: Boolean,
default: false
}
},
computed: {
chipClasses () {
return {
'md-disabled': this.mdDisabled,
'md-deletable': this.mdDeletable,
'md-clickable': this.mdClickable,
'md-focused': this.mdHasFocus
'md-focused': this.mdHasFocus,
'md-duplicated': this.mdDuplicated
}
}
}
@@ -4,9 +4,10 @@

<md-chip
v-for="(chip, key) in value"
:key="key"
:key="chip"

This comment has been minimized.

Copy link
@motey

motey Apr 8, 2019

This works only if chip is a single string an not an object :(

:md-deletable="!mdStatic"
:md-clickable="!mdStatic"
:md-duplicated="duplicatedChip === chip"
@keydown.enter="$emit('md-click', chip, key)"
@click.native="$emit('md-click', chip, key)"
@md-delete.stop="removeChip(chip)">
@@ -21,6 +22,7 @@
:type="mdInputType"
:id="id"
:placeholder="mdPlaceholder"
@input="handleInput"
@keydown.enter="insertChip"
@keydown.8="handleBackRemove">
</md-input>
@@ -52,10 +54,15 @@
},
mdPlaceholder: [String, Number],
mdStatic: Boolean,
mdLimit: Number
mdLimit: Number,
mdCheckDuplicated: {
type: Boolean,
default: false
}
},
data: () => ({
inputValue: ''
inputValue: '',
duplicatedChip: null
}),
computed: {
chipsClasses () {
@@ -70,13 +77,19 @@
},
methods: {
insertChip ({ target }) {
if (
!this.inputValue ||
this.value.includes(this.inputValue) ||
!this.modelRespectLimit
) {
if (!this.inputValue || !this.modelRespectLimit) {
return
}
if (this.value.includes(this.inputValue)) {
this.duplicatedChip = null
// to trigger animate
this.$nextTick(() => {
this.duplicatedChip = this.inputValue
})
return
}
this.value.push(this.inputValue)
this.$emit('input', this.value)
this.$emit('md-insert', this.inputValue)
@@ -94,6 +107,26 @@
if (!this.inputValue) {
this.removeChip(this.value[this.value.length - 1])
}
},
handleInput () {
if (this.mdCheckDuplicated) {
this.checkDuplicated()
} else {
this.duplicatedChip = null
}
},
checkDuplicated () {
if (!this.value.includes(this.inputValue)) {
this.duplicatedChip = null
return
}
if (!this.mdCheckDuplicated) return
this.duplicatedChip = this.inputValue
}
},
watch: {
value () {
this.checkDuplicated()
}
}
})
@@ -62,7 +62,8 @@
}
}

&.md-accent {
&.md-accent,
&.md-duplicated {
@include md-theme-property(background-color, accent);
@include md-theme-property(color, text-primary, accent);

0 comments on commit d15f63b

Please sign in to comment.
You can’t perform that action at this time.