Skip to content

Commit a448325

Browse files
marcosmouramarcosmoura
committed
comp(MdAutocomplete): add better documentation examples
1 parent 89339c1 commit a448325

File tree

6 files changed

+140
-70
lines changed

6 files changed

+140
-70
lines changed

‎docs/app/pages/Components/Autocomplete/Autocomplete.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<example src="./examples/AutocompleteStatic.vue" />
2+
<example src="./examples/AutocompleteTrigger.vue" />
3+
<example src="./examples/AutocompleteSearch.vue" />
24
<example src="./examples/AutocompleteBox.vue" />
35
<example src="./examples/AutocompleteTemplate.vue" />
46
<example src="./examples/AutocompleteAsync.vue" />
@@ -15,6 +17,18 @@
1517
<code-example title="Normal and Dense" :component="examples['autocomplete-static']" />
1618
</div>
1719

20+
<div class="page-container-section">
21+
<h2>Trigger</h2>
22+
23+
<code-example title="Focus vs Input" :component="examples['autocomplete-trigger']" />
24+
</div>
25+
26+
<div class="page-container-section">
27+
<h2>Search Algorithms</h2>
28+
29+
<code-example title="Fuzzy or Normal" :component="examples['autocomplete-search']" />
30+
</div>
31+
1832
<div class="page-container-section">
1933
<h2>Box Layout</h2>
2034

‎docs/app/pages/Components/Autocomplete/examples/AutocompleteSearch.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<strong>Fuzzy Search:</strong>
4+
<md-autocomplete v-model="selectedCountry" :md-options="employees">
5+
<label>Manager</label>
6+
7+
<template slot="md-autocomplete-item" slot-scope="{ item, term }">
8+
<md-highlight-text :md-term="term">{{ item }}</md-highlight-text>
9+
</template>
10+
11+
<template slot="md-autocomplete-empty" slot-scope="{ term }">
12+
No countries matching "{{ term }}" were found. <a @click="noop()">Create a new</a> one!
13+
</template>
14+
</md-autocomplete>
15+
16+
<strong>Normal Search:</strong>
17+
<md-autocomplete v-model="selectedEmployee" :md-options="countries" :md-fuzzy-search="false">
18+
<label>Country</label>
19+
20+
<template slot="md-autocomplete-item" slot-scope="{ item, term }">
21+
<md-highlight-text :md-term="term">{{ item }}</md-highlight-text>
22+
</template>
23+
24+
<template slot="md-autocomplete-empty" slot-scope="{ term }">
25+
No countries matching "{{ term }}" were found. <a @click="noop()">Create a new</a> one!
26+
</template>
27+
</md-autocomplete>
28+
</div>
29+
</template>
30+
31+
<script>
32+
export default {
33+
name: 'AutocompleteSearch',
34+
data: () => ({
35+
selectedCountry: null,
36+
selectedEmployee: null,
37+
countries: [
38+
'Algeria',
39+
'Argentina',
40+
'Brazil',
41+
'Canada',
42+
'Italy',
43+
'Japan',
44+
'United Kingdom',
45+
'United States'
46+
],
47+
employees: [
48+
'Jim Halpert',
49+
'Dwight Schrute',
50+
'Michael Scott',
51+
'Pam Beesly',
52+
'Angela Martin',
53+
'Kelly Kapoor',
54+
'Ryan Howard',
55+
'Kevin Malone',
56+
'Creed Bratton',
57+
'Oscar Nunez',
58+
'Toby Flenderson',
59+
'Stanley Hudson',
60+
'Meredith Palmer',
61+
'Phyllis Lapin-Vance'
62+
]
63+
}),
64+
methods: {
65+
noop () {
66+
window.alert('noop')
67+
}
68+
}
69+
}
70+
</script>
71+
72+
<style lang="scss" scoped>
73+
.md-autocomplete + strong {
74+
margin-top: 36px;
75+
display: block;
76+
}
77+
</style>

‎docs/app/pages/Components/Autocomplete/examples/AutocompleteStatic.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<md-autocomplete v-model="selectedCountry" :md-options="countries">
3+
<md-autocomplete v-model="selectedCountry" :md-options="countries" :md-fuzzy-search="false">
44
<label>Country</label>
55
</md-autocomplete>
66

‎docs/app/pages/Components/Autocomplete/examples/AutocompleteTrigger.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<md-autocomplete v-model="selectedCountry" :md-options="countries">
4+
<label>Country</label>
5+
</md-autocomplete>
6+
7+
<md-autocomplete v-model="selectedEmployee" :md-options="employees" :md-open-on-focus="false">
8+
<label>Employees</label>
9+
</md-autocomplete>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'AutocompleteStatic',
16+
data: () => ({
17+
selectedCountry: null,
18+
selectedEmployee: null,
19+
countries: [
20+
'Algeria',
21+
'Argentina',
22+
'Brazil',
23+
'Canada',
24+
'Italy',
25+
'Japan',
26+
'United Kingdom',
27+
'United States'
28+
],
29+
employees: [
30+
'Jim Halpert',
31+
'Dwight Schrute',
32+
'Michael Scott',
33+
'Pam Beesly',
34+
'Angela Martin',
35+
'Kelly Kapoor',
36+
'Ryan Howard',
37+
'Kevin Malone',
38+
'Creed Bratton',
39+
'Oscar Nunez',
40+
'Toby Flenderson',
41+
'Stanley Hudson',
42+
'Meredith Palmer',
43+
'Phyllis Lapin-Vance'
44+
]
45+
})
46+
}
47+
</script>

‎docs/app/pages/Components/Autocomplete/examples/Example.vue

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎src/components/MdAutocomplete/MdAutocomplete.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<md-input
55
v-model="searchTerm"
66
@focus.stop="openOnFocus"
7+
@blur="hideOptions"
78
@input="onInput"
89
@click.stop.prevent="openOnFocus" />
910

0 commit comments

Comments
 (0)