Skip to content

Commit 6297347

Browse files
author
pablohpsilva
committed
Merge branch 'master' into develop
2 parents a9e2fc5 + c36b183 commit 6297347

File tree

5 files changed

+451
-2
lines changed

5 files changed

+451
-2
lines changed

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

Lines changed: 170 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,126 @@
116116
</md-table>
117117
</api-table>
118118

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>
235+
</md-table-body>
236+
</md-table>
237+
</api-table>
238+
119239
<api-table name="md-textarea">
120240
<md-table slot="properties">
121241
<md-table-header>
@@ -187,6 +307,11 @@
187307
<md-input v-model="initialValue" readonly></md-input>
188308
</md-input-container>
189309

310+
<md-input-container>
311+
<label>Autocomplete (with fetch)</label>
312+
<md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
313+
</md-input-container>
314+
190315
<md-input-container>
191316
<label>With label</label>
192317
<md-input placeholder="My nice placeholder"></md-input>
@@ -227,6 +352,11 @@
227352
&lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
228353
&lt;/md-input-container&gt;
229354

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+
230360
&lt;md-input-container&gt;
231361
&lt;label&gt;With label&lt;/label&gt;
232362
&lt;md-input placeholder=&quot;My nice placeholder&quot;&gt;&lt;/md-input&gt;
@@ -265,7 +395,19 @@
265395
return {
266396
initialValue: &apos;My initial value&apos;
267397
};
268-
}
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+
},
269411
};
270412
</code-block>
271413
</div>
@@ -495,8 +637,34 @@
495637
export default {
496638
data() {
497639
return {
498-
initialValue: 'My initial value'
640+
autocompleteValue: '',
641+
initialValue: 'My initial value',
642+
listAutocomplete: [
643+
{name: 'oi'},
644+
{name: 'hello'},
645+
{name: 'salut'}
646+
]
499647
};
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+
}
500668
}
501669
};
502670
</script>

‎src/components/mdInputContainer/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import mdInputContainer from './mdInputContainer.vue';
22
import mdInput from './mdInput.vue';
3+
import mdAutocomplete from './mdAutocomplete.vue';
34
import mdTextarea from './mdTextarea.vue';
45
import mdInputContainerTheme from './mdInputContainer.theme';
56

67
export default function install(Vue) {
78
Vue.component('md-input-container', mdInputContainer);
89
Vue.component('md-input', mdInput);
10+
Vue.component('md-autocomplete', mdAutocomplete);
911
Vue.component('md-textarea', mdTextarea);
1012

1113
Vue.material.styles.push(mdInputContainerTheme);

0 commit comments

Comments
 (0)