Skip to content

Commit

Permalink
fix bugs with list navigation; refactore to support multiple sections… (
Browse files Browse the repository at this point in the history 
#9)

* fix bugs with list navigation; refactore to support multiple sections of the same type;

* add contributor;

* PR fixes;
  • Loading branch information
@ekulish @darrenjennings
ekulish authored and darrenjennings committed Nov 3, 2017
1 parent 28137bd commit 702e678
Show file tree
Hide file tree
Showing 8 changed files with 1,979 additions and 92 deletions.
12 changes: 12 additions & 0 deletions .all-contributorsrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,18 @@
"design",
"example"
]
},
{
"login": "ekulish",
"name": "Evgeniy Kulish",
"avatar_url": "https://avatars2.githubusercontent.com/u/411772?v=4",
"profile": "https://github.com/ekulish",
"contributions": [
"code",
"design",
"example",
"test"
]
}
]
}
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][LICENSE]

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

Expand Down Expand Up @@ -83,8 +83,8 @@ https://jsfiddle.net/darrenjennings/dugbvezs/
Thanks goes to these people ([emoji key][emojis]):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars.githubusercontent.com/u/5770711?v=4" width="100px;"/><br /><sub>Darren Jennings</sub>](https://darrenjennings.github.io)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") |
| :---: |
| [<img src="https://avatars.githubusercontent.com/u/5770711?v=4" width="100px;"/><br /><sub><b>Darren Jennings</b></sub>](https://darrenjennings.github.io)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") | [<img src="https://avatars2.githubusercontent.com/u/411772?v=4" width="100px;"/><br /><sub><b>Evgeniy Kulish</b></sub>](https://github.com/ekulish)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Code") [🎨](#design-ekulish "Design") [💡](#example-ekulish "Examples") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Tests") |
| :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors] specification.
Expand Down
22 changes: 8 additions & 14 deletions docs/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,6 @@
>
</vue-autosuggest>
</div>
<vue-autosuggest
:suggestions="[filteredOptions[0]]"
:result-item-key="'firstname'"
:input-props="inputProps"
:section-configs="sectionConfigs"
>
</vue-autosuggest>
</div>
</template>

Expand All @@ -36,13 +29,14 @@ export default {
],
sectionConfigs: {
"default": {
limit: 5,
limit: 6,
onSelected: function(item) {
alert('default: ' + item.label)
}
},
"url": {
limit: 2,
"blog": {
limit: 3,
type: 'url-section',
onSelected: function(item) {
alert('url: ' + item.item.url);
}
Expand Down Expand Up @@ -86,12 +80,12 @@ export default {
},
{
"label": "Blog",
"type": "url",
"name": "blog",
"data": [
{"url": "http://bla.com/1", "value":"blog link 1"},
{"url": "http://bla.com/1", "value":"blog link 1"},
{"url": "http://bla.com/1", "value":"blog link 1"},
{"url": "http://bla.com/1", "value":"blog link 1"}
{"url": "http://bla.com/2", "value":"blog link 2"},
{"url": "http://bla.com/3", "value":"blog link 3"},
{"url": "http://bla.com/4", "value":"blog link 4"}
]
}]
}
Expand Down
4 changes: 2 additions & 2 deletions docs/UrlSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
:key="getItemIndex(key)"
:class="{'autosuggest__results_item-highlighted' : getItemIndex(key) == currentIndex, 'autosuggest__results_item':true}"
:data-suggestion-index="getItemIndex(key)"
:data-section-type="section.type"
:data-section-name="section.name"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
:id="`autosuggest__results_item-${getItemIndex(key)}`">{{val.value}}</li>
Expand All @@ -33,7 +33,7 @@ export default {
return this.section.data.slice(0, l);
},
className: function() {
return 'autosuggest__results_title ' + 'autosuggest__results_title_' + this.section.type;
return 'autosuggest__results_title ' + 'autosuggest__results_title_' + this.section.name;
}
},
methods: {
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
}
},
"dependencies": {
"kcd-scripts": "^0.27.1",
"vue-jest": "1.0.0"
}
}
46 changes: 28 additions & 18 deletions src/Autosuggest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
v-if="getSize() > 0 && !loading"
>
<component v-for="(cs, key) in this.computedSections"
:is="cs.name" :section="cs" :ref="getSectionRef(key)" :key="getSectionRef(key)" :updateCurrentIndex="updateCurrentIndex" :searchInput="searchInput"></component>
:is="cs.type" :section="cs" :ref="getSectionRef(key)" :key="getSectionRef(key)" :updateCurrentIndex="updateCurrentIndex" :searchInput="searchInput"></component>
</div>
</div>
</div>
Expand Down Expand Up @@ -96,9 +96,9 @@ export default {
didSelectFromOptions: false,
computedSections: [],
computedSize: 0,
onSelected: function(){
if (this.currentItem && this.sectionConfigs[this.currentItem.type]) {
this.sectionConfigs[this.currentItem.type].onSelected(this.currentItem);
onSelected: function() {
if (this.currentItem && this.sectionConfigs[this.currentItem.name]) {
this.sectionConfigs[this.currentItem.name].onSelected(this.currentItem);
}
}
}),
Expand All @@ -119,13 +119,14 @@ export default {
},
getItemByIndex(index) {
let obj = false;
if (!index) return obj;
if (index === null) return obj;
for (var i = 0; i < this.computedSections.length; i++) {
if (index >= this.computedSections[i].start_index && index <= this.computedSections[i].end_index) {
let trueIndex = index - this.computedSections[i].start_index;
let childSection = this.$refs['computed_section_' + i][0];
if (childSection) {
obj = {
"name": this.computedSections[i].name,
"type": this.computedSections[i].type,
"label": childSection.getLabelByIndex(trueIndex),
"item": childSection.getItemByIndex(trueIndex)
Expand All @@ -150,6 +151,9 @@ export default {
case 38: // ArrowUp
e.preventDefault();
if (this.isOpen) {
if (keyCode === 38 && this.currentIndex === null) {
break;
}
// Determine direction of arrow up/down and determine new currentIndex
const direction = keyCode === 40 ? 1 : -1;
const newIndex = this.currentIndex + direction;
Expand All @@ -158,6 +162,10 @@ export default {
if (this.getSize() > 0 && this.currentIndex >= 0) {
this.setChangeItem(this.getItemByIndex(this.currentIndex));
this.didSelectFromOptions = true;
} else if (this.currentIndex == -1) {
this.currentIndex = null;
this.searchInput = this.searchInputOriginal;
e.preventDefault();
}
}
break;
Expand Down Expand Up @@ -205,8 +213,7 @@ export default {
}
/** Selects an item in the dropdown */
this.loading = true;
this.loading = true;
this.setChangeItem(this.getItemByIndex(this.currentIndex));
this.$nextTick(() => {
this.onSelected(true);
Expand Down Expand Up @@ -265,14 +272,12 @@ export default {
el.className = el.className.replace(reg, ' ')
}
},
generateName(name) {
return `${name}-section`;
},
getType(type) {
if (!type) {
type = 'default';
}
return type;
getSectionName(section) {
if (!section.name) {
section.name = 'default';
}
return section.name;
}
},
mounted() {
Expand All @@ -297,9 +302,14 @@ export default {
this.computedSize = 0;
this.suggestions.forEach(section => {
const t = this.getType(section.type);
const n = this.generateName(t);
var lim = this.sectionConfigs[t].limit ? this.sectionConfigs[t].limit : Infinity;
const n = this.getSectionName(section);
var t;
if (this.sectionConfigs[n] && this.sectionConfigs[n].type) {
t = this.sectionConfigs[n].type;
} else {
t = 'default-section';
}
var lim = this.sectionConfigs[n].limit ? this.sectionConfigs[n].limit : Infinity;
lim = (section.data.length < lim) ? section.data.length : lim;
var obj = {
limit: lim,
Expand Down
6 changes: 3 additions & 3 deletions src/parts/DefaultSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
:key="getItemIndex(key)"
:class="{'autosuggest__results_item-highlighted' : getItemIndex(key) == currentIndex, 'autosuggest__results_item':true}"
:data-suggestion-index="getItemIndex(key)"
:data-section-type="section.type"
:data-section-name="section.name"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
:id="`autosuggest__results_item-${getItemIndex(key)}`"
Expand All @@ -34,12 +34,12 @@ export default {
return this.section.data.slice(0, l);
},
className: function() {
return 'autosuggest__results_title ' + 'autosuggest__results_title_' + this.section.type;
return `autosuggest__results_title autosuggest__results_title_${this.section.name}`;
}
},
methods: {
styleItem(text) {
if (this.searchInput) {
if (this.searchInput && typeof(text) === 'string' && (this.searchInput !== text)) {
const value = this.searchInput.trim();
const r = new RegExp(`${value}`, 'ig');
return text.replace(r, `<b>${value}</b>`);
Expand Down
Loading

0 comments on commit 702e678

Please sign in to comment.