Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

md-error possibility and remove required chip-template within md-chips

Browse source
This commit is contained in:
Roman Ovsyannikov Home 2017-02-28 23:00:01 +02:00
parent bec42aa4d0
commit f2baf69a0f
3 changed files with 61 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
docs/src/pages/components/Chips.vue
View file

@ -161,16 +161,12 @@
<example-box card-title="Static">
<div slot="demo">
<md-chips v-model="fruits" md-static>
<template scope="chip">{{ chip.value }}</template>
</md-chips>
<md-chips v-model="fruits" md-static></md-chips>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-chips v-model=&quot;fruits&quot; md-static&gt;
&lt;template scope=&quot;chip&quot;&gt;{{ '{{ chip.value }\}' }}&lt;/template&gt;
&lt;/md-chips&gt;
&lt;md-chips v-model=&quot;fruits&quot; md-static&gt;&lt;/md-chips&gt;
</code-block>
<code-block lang="javascript">
@ -185,15 +181,35 @@
<example-box card-title="Editable">
<div slot="demo">
<md-chips v-model="contacts" md-input-placeholder="Add a contact">
<template scope="chip">{{ chip.value }}</template>
<md-chips v-model="contacts" md-input-placeholder="Add a contact"></md-chips>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot;&gt;&lt;/md-chips&gt;
</code-block>
<code-block lang="javascript">
export default {
data: () => ({
contacts: ['Marcos Moura'],
})
};
</code-block>
</div>
</example-box>
<example-box card-title="Errors">
<div slot="demo">
<md-chips v-model="contacts" md-input-placeholder="Add a contact" class="md-input-invalid">
<span class="md-error">Validation message</span>
</md-chips>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot;&gt;
&lt;template scope=&quot;chip&quot;&gt;{{ '{{ chip.value }\}' }}&lt;/template&gt;
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot; class=&quot;md-input-invalid&quot;&gt;
&lt;span class=&quot;md-error&quot;&gt;Validation message&lt;/span&gt;
&lt;/md-chips&gt;
</code-block>
@ -207,10 +223,10 @@
</div>
</example-box>
<example-box card-title="Limit">
<example-box card-title="Custom chip and Limit">
<div slot="demo">
<md-chips v-model="cities" :md-max="5" md-input-placeholder="Cities...">
<template scope="chip">
<template scope="chip" slot="chip">
<span>{{ chip.value }}</span>
<small v-if="chip.value === 'Amsterdam'">(favorite)</small>
</template>
@ -220,7 +236,7 @@
<div slot="code">
<code-block lang="xml">
&lt;md-chips v-model=&quot;cities&quot; :md-max=&quot;5&quot; md-input-placeholder=&quot;Cities...&quot;&gt;
&lt;template scope=&quot;chip&quot;&gt;
&lt;template scope=&quot;chip&quot; slot=&quot;chip&quot;&gt;
&lt;span&gt;{{ '{{ chip.value }\}' }}&lt;/span&gt;
&lt;small v-if=&quot;chip.value === &#039;Amsterdam&#039;&quot;&gt;(favorite)&lt;/small&gt;
&lt;/template&gt;

10
src/components/mdChips/mdChips.scss
View file

@ -75,17 +75,15 @@ $chip-icon-font: $chip-icon-size - 4px;
}
.md-chips {
min-height: 54px;
display: flex;
flex-wrap: wrap;
.md-chip {
margin-right: 8px;
margin-bottom: 4px;
}
.md-input-container {
min-height: 54px;
display: flex;
flex-wrap: wrap;
}
.md-input {
width: 128px;
flex: 1;

29
src/components/mdChips/mdChips.vue
View file

@ -1,4 +1,30 @@
<template>
<md-input-container :class="[themeClass, classes]" @click.native="applyInputFocus">
<md-chip
v-for="chip in selectedChips"
:md-deletable="!mdStatic"
:disabled="disabled"
@delete="deleteChip(chip)">
<slot name="chip" :value="chip">{{ chip }}</slot>
</md-chip>
<md-input
v-show="!mdStatic"
v-model="currentChip"
:type="mdInputType"
:placeholder="mdInputPlaceholder"
:id="inputId"
:name="mdInputName"
:disabled="disabled"
@keydown.native.delete="deleteLastChip"
@keydown.native.prevent.enter="addChip"
@keydown.native.prevent.186="addChip"
tabindex="0"
ref="input">
</md-input>
<slot></slot>
</md-input-container>
<div class="md-chips" :class="[themeClass, classes]">
<md-input-container @click.native="applyInputFocus">
<md-chip
@ -69,7 +95,8 @@
classes() {
return {
'md-static': this.mdStatic,
'md-disabled': this.disabled
'md-disabled': this.disabled,
'md-chips': true
};
}
},