Skip to content

Commit 71afc01

Browse files
vin-evin-e
authored
Merge branch 'develop' into develop
2 parents 4c89a68 + fe8161d commit 71afc01

34 files changed

+1791
-128
lines changed

‎.babelrc

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
{
22
"presets": [
3+
"es2015",
4+
"es2017",
5+
"stage-0",
36
[
47
"env",
58
{
6-
"modules": false,
79
"targets": {
810
"browsers": ["last 3 versions", "not IE < 10"]
911
}
1012
}
1113
]
1214
],
1315
"plugins": [
14-
"add-module-exports",
15-
"transform-object-rest-spread"
16+
"transform-runtime",
17+
"add-module-exports"
1618
]
17-
}
19+
}

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
<img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
2020
</a>
2121

22+
<a href="https://cdnjs.com/libraries/vue-material">
23+
<img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
24+
</a>
25+
2226
<a href="https://www.npmjs.com/package/vue-material">
2327
<img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
2428
</a>

‎docs/src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@
9999
<router-link exact to="/components/menu">Menu</router-link>
100100
</md-list-item>
101101

102+
<md-list-item class="md-inset">
103+
<router-link exact to="/components/onboarding">Onboarding</router-link>
104+
</md-list-item>
105+
102106
<md-list-item class="md-inset">
103107
<router-link exact to="/components/progress">Progress</router-link>
104108
</md-list-item>

‎docs/src/pages/components/Chips.vue

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -161,16 +161,12 @@
161161

162162
<example-box card-title="Static">
163163
<div slot="demo">
164-
<md-chips v-model="fruits" md-static>
165-
<template scope="chip">{{ chip.value }}</template>
166-
</md-chips>
164+
<md-chips v-model="fruits" md-static></md-chips>
167165
</div>
168166

169167
<div slot="code">
170168
<code-block lang="xml">
171-
&lt;md-chips v-model=&quot;fruits&quot; md-static&gt;
172-
&lt;template scope=&quot;chip&quot;&gt;{{ '{{ chip.value }\}' }}&lt;/template&gt;
173-
&lt;/md-chips&gt;
169+
&lt;md-chips v-model=&quot;fruits&quot; md-static&gt;&lt;/md-chips&gt;
174170
</code-block>
175171

176172
<code-block lang="javascript">
@@ -185,15 +181,35 @@
185181

186182
<example-box card-title="Editable">
187183
<div slot="demo">
188-
<md-chips v-model="contacts" md-input-placeholder="Add a contact">
189-
<template scope="chip">{{ chip.value }}</template>
184+
<md-chips v-model="contacts" md-input-placeholder="Add a contact"></md-chips>
185+
</div>
186+
187+
<div slot="code">
188+
<code-block lang="xml">
189+
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot;&gt;&lt;/md-chips&gt;
190+
</code-block>
191+
192+
<code-block lang="javascript">
193+
export default {
194+
data: () => ({
195+
contacts: ['Marcos Moura'],
196+
})
197+
};
198+
</code-block>
199+
</div>
200+
</example-box>
201+
202+
<example-box card-title="Errors">
203+
<div slot="demo">
204+
<md-chips v-model="contacts" md-input-placeholder="Add a contact" class="md-input-invalid">
205+
<span class="md-error">Validation message</span>
190206
</md-chips>
191207
</div>
192208

193209
<div slot="code">
194210
<code-block lang="xml">
195-
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot;&gt;
196-
&lt;template scope=&quot;chip&quot;&gt;{{ '{{ chip.value }\}' }}&lt;/template&gt;
211+
&lt;md-chips v-model=&quot;contacts&quot; md-input-placeholder=&quot;Add a contact&quot; class=&quot;md-input-invalid&quot;&gt;
212+
&lt;span class=&quot;md-error&quot;&gt;Validation message&lt;/span&gt;
197213
&lt;/md-chips&gt;
198214
</code-block>
199215

@@ -207,10 +223,10 @@
207223
</div>
208224
</example-box>
209225

210-
<example-box card-title="Limit">
226+
<example-box card-title="Custom chip and Limit">
211227
<div slot="demo">
212228
<md-chips v-model="cities" :md-max="5" md-input-placeholder="Cities...">
213-
<template scope="chip">
229+
<template scope="chip" slot="chip">
214230
<span>{{ chip.value }}</span>
215231
<small v-if="chip.value === 'Amsterdam'">(favorite)</small>
216232
</template>
@@ -220,7 +236,7 @@
220236
<div slot="code">
221237
<code-block lang="xml">
222238
&lt;md-chips v-model=&quot;cities&quot; :md-max=&quot;5&quot; md-input-placeholder=&quot;Cities...&quot;&gt;
223-
&lt;template scope=&quot;chip&quot;&gt;
239+
&lt;template scope=&quot;chip&quot; slot=&quot;chip&quot;&gt;
224240
&lt;span&gt;{{ '{{ chip.value }\}' }}&lt;/span&gt;
225241
&lt;small v-if=&quot;chip.value === &#039;Amsterdam&#039;&quot;&gt;(favorite)&lt;/small&gt;
226242
&lt;/template&gt;

‎docs/src/pages/components/Input.vue

Lines changed: 187 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,132 @@
106106
<md-table-cell><code>Number</code></md-table-cell>
107107
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
108108
</md-table-row>
109+
110+
<md-table-row>
111+
<md-table-cell>readonly</md-table-cell>
112+
<md-table-cell><code>Boolean</code></md-table-cell>
113+
<md-table-cell>Sets the component to read only mode.</md-table-cell>
114+
</md-table-row>
115+
</md-table-body>
116+
</md-table>
117+
</api-table>
118+
119+
<api-table name="md-autocomplete">
120+
<md-table slot="properties">
121+
<md-table-header>
122+
<md-table-row>
123+
<md-table-head>Name</md-table-head>
124+
<md-table-head>Type</md-table-head>
125+
<md-table-head>Description</md-table-head>
126+
</md-table-row>
127+
</md-table-header>
128+
129+
<md-table-body>
130+
<md-table-row>
131+
<md-table-cell>v-model</md-table-cell>
132+
<md-table-cell><code>String</code></md-table-cell>
133+
<md-table-cell>A required model object to bind the value.</md-table-cell>
134+
</md-table-row>
135+
136+
<md-table-row>
137+
<md-table-cell>debounce</md-table-cell>
138+
<md-table-cell><code>Number</code></md-table-cell>
139+
<md-table-cell>Sets the debounce time. Default <code>1000</code> milliseconds</md-table-cell>
140+
</md-table-row>
141+
142+
<md-table-row>
143+
<md-table-cell>fetch</md-table-cell>
144+
<md-table-cell><code>Function</code></md-table-cell>
145+
<md-table-cell>Sets the fetch function mdAutocomplete will call after the debounce is reached. Chosing <code>fetch</code> prop <strong>disables</strong> the use of either <code>list</code> and <code>filterList</code> props.</md-table-cell>
146+
</md-table-row>
147+
148+
<md-table-row>
149+
<md-table-cell>list</md-table-cell>
150+
<md-table-cell><code>Array</code></md-table-cell>
151+
<md-table-cell>Sets an array of possible values. Default <code>[]</code>. MdAutocomplete will only search in this list if it's set. Chosing <code>list</code> prop <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
152+
</md-table-row>
153+
154+
<md-table-row>
155+
<md-table-cell>filter-list</md-table-cell>
156+
<md-table-cell><code>Function</code></md-table-cell>
157+
<md-table-cell>Sets a filter function which will be used to filter the <code>list</code> props. Chosing <code>filterList</code> prop <strong>requires</strong> the use of <code>list</code> props and <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
158+
</md-table-row>
159+
160+
<md-table-row>
161+
<md-table-cell>min-chars</md-table-cell>
162+
<md-table-cell><code>Number</code></md-table-cell>
163+
<md-table-cell>Sets the minimum number of characters before making opening the autocomplete options or making a request. Default <code>3</code></md-table-cell>
164+
</md-table-row>
165+
166+
<md-table-row>
167+
<md-table-cell>prepare-response-data</md-table-cell>
168+
<md-table-cell><code>Function</code></md-table-cell>
169+
<md-table-cell>This function will be called once the <code>fetch</code> prop has a response. It can manipulate the data received from the server. The output should always be an <code>Array</code>.</md-table-cell>
170+
</md-table-row>
171+
172+
<md-table-row>
173+
<md-table-cell>print-attribute</md-table-cell>
174+
<md-table-cell><code>String</code></md-table-cell>
175+
<md-table-cell>This prop will be used to print values on the autocomplete list. It shall match an object key expected on the <code>fetch</code> result list. Default <code>name</code></md-table-cell>
176+
</md-table-row>
177+
178+
<md-table-row>
179+
<md-table-cell>query-param</md-table-cell>
180+
<md-table-cell><code>String</code></md-table-cell>
181+
<md-table-cell>Sets the query parameter. Example: http//api.com/<strong>q</strong>?=SOMETHING. Default <code>q</code></md-table-cell>
182+
</md-table-row>
183+
184+
<md-table-row>
185+
<md-table-cell>disabled</md-table-cell>
186+
<md-table-cell><code>Boolean</code></md-table-cell>
187+
<md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
188+
</md-table-row>
189+
190+
<md-table-row>
191+
<md-table-cell>required</md-table-cell>
192+
<md-table-cell><code>Boolean</code></md-table-cell>
193+
<md-table-cell>Apply the required rule to style the label with an "*". Default <code>false</code></md-table-cell>
194+
</md-table-row>
195+
196+
<md-table-row>
197+
<md-table-cell>placeholder</md-table-cell>
198+
<md-table-cell><code>String</code></md-table-cell>
199+
<md-table-cell>Sets the placeholder.</md-table-cell>
200+
</md-table-row>
201+
202+
<md-table-row>
203+
<md-table-cell>maxlength</md-table-cell>
204+
<md-table-cell><code>Number</code></md-table-cell>
205+
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
206+
</md-table-row>
207+
</md-table-body>
208+
</md-table>
209+
210+
<md-table slot="events">
211+
<md-table-header>
212+
<md-table-row>
213+
<md-table-head>Name</md-table-head>
214+
<md-table-head>Value</md-table-head>
215+
<md-table-head>Description</md-table-head>
216+
</md-table-row>
217+
</md-table-header>
218+
219+
<md-table-body>
220+
<md-table-row>
221+
<md-table-cell>change</md-table-cell>
222+
<md-table-cell>The <code>String</code> selected</md-table-cell>
223+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
224+
</md-table-row>
225+
<md-table-row>
226+
<md-table-cell>input</md-table-cell>
227+
<md-table-cell>The <code>String</code> selected</md-table-cell>
228+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
229+
</md-table-row>
230+
<md-table-row>
231+
<md-table-cell>selected</md-table-cell>
232+
<md-table-cell>Emits the <code>Object</code> as well as the <code>String</code> selected.</md-table-cell>
233+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
234+
</md-table-row>
109235
</md-table-body>
110236
</md-table>
111237
</api-table>
@@ -156,6 +282,12 @@
156282
<md-table-cell><code>Number</code></md-table-cell>
157283
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
158284
</md-table-row>
285+
286+
<md-table-row>
287+
<md-table-cell>readonly</md-table-cell>
288+
<md-table-cell><code>Boolean</code></md-table-cell>
289+
<md-table-cell>Sets the component to read only mode.</md-table-cell>
290+
</md-table-row>
159291
</md-table-body>
160292
</md-table>
161293
</api-table>
@@ -169,6 +301,16 @@
169301
<label>Initial value</label>
170302
<md-input v-model="initialValue"></md-input>
171303
</md-input-container>
304+
305+
<md-input-container>
306+
<label>Initial value (read only)</label>
307+
<md-input v-model="initialValue" readonly></md-input>
308+
</md-input-container>
309+
310+
<md-input-container>
311+
<label>Autocomplete (with fetch)</label>
312+
<md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
313+
</md-input-container>
172314

173315
<md-input-container>
174316
<label>With label</label>
@@ -210,6 +352,11 @@
210352
&lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
211353
&lt;/md-input-container&gt;
212354

355+
&lt;md-input-container&gt;
356+
&lt;label&gt;Autocomplete (with fetch)&lt;/label&gt;
357+
&lt;md-input v-model=&quot;autocompleteValue&quot; :fetch=&quot;fetchFunction&quot;&gt;&lt;/md-input&gt;
358+
&lt;/md-input-container&gt;
359+
213360
&lt;md-input-container&gt;
214361
&lt;label&gt;With label&lt;/label&gt;
215362
&lt;md-input placeholder=&quot;My nice placeholder&quot;&gt;&lt;/md-input&gt;
@@ -248,7 +395,19 @@
248395
return {
249396
initialValue: &apos;My initial value&apos;
250397
};
251-
}
398+
},
399+
methods: {
400+
fetchFunction(param) {
401+
// param = { queryParam: query }
402+
403+
// &apos;fetchAutocomplete&apos; should return a Promise.
404+
405+
// md-autocomplete will call fetchAutocomplete and pass
406+
// &apos;param&apos; as an argument.
407+
// the &apos;param&apos; is composed by a query param and
408+
// a query.
409+
},
410+
},
252411
};
253412
</code-block>
254413
</div>
@@ -478,8 +637,34 @@
478637
export default {
479638
data() {
480639
return {
481-
initialValue: 'My initial value'
640+
autocompleteValue: '',
641+
initialValue: 'My initial value',
642+
listAutocomplete: [
643+
{name: 'oi'},
644+
{name: 'hello'},
645+
{name: 'salut'}
646+
]
482647
};
648+
},
649+
methods: {
650+
fetchAutocomplete(param) {
651+
const myInit = {
652+
method: 'GET',
653+
headers: new Headers(),
654+
mode: 'cors',
655+
cache: 'default'
656+
};
657+
const url = 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search';
658+
const queryParam = Object.keys(param)[0];
659+
const queryValue = param[queryParam];
660+
const queryUrl = `${url}?${queryParam}=${queryValue}`;
661+
662+
return window.fetch(queryUrl, myInit)
663+
.then((res) => res.json());
664+
},
665+
filterList(list, query) {
666+
return list.filter((el) => el.name.indexOf(query) !== -1);
667+
}
483668
}
484669
};
485670
</script>

0 commit comments

Comments
 (0)