Skip to content

Commit

Permalink
feat(class) add ul and li class props (#165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@darrenjennings
darrenjennings authored Jan 7, 2020
1 parent bfe3e7c commit 2ac4732
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 70 deletions.
64 changes: 64 additions & 0 deletions __tests__/__snapshots__/autosuggest.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,70 @@ exports[`Autosuggest can display section header 1`] = `
</div>
`;
exports[`Autosuggest can display ul and li classNames 1`] = `
<div id="autosuggest"><input type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="autosuggest__results" aria-activedescendant="" aria-haspopup="true" aria-expanded="true" id="autosuggest__input" placeholder="Type 'G'" value="G" class="autosuggest__input--open">
<div class="autosuggest__results-container">
<div aria-labelledby="autosuggest" class="autosuggest__results">
<ul role="listbox" aria-labelledby="autosuggest" class="hello-ul">
<li role="option" data-suggestion-index="0" data-section-name="default" id="autosuggest__results-item--0" class="autosuggest__results-item hello-li">
clifford kits
</li>
<li role="option" data-suggestion-index="1" data-section-name="default" id="autosuggest__results-item--1" class="autosuggest__results-item hello-li">
friendly chemistry
</li>
<li role="option" data-suggestion-index="2" data-section-name="default" id="autosuggest__results-item--2" class="autosuggest__results-item hello-li">
phonics
</li>
<li role="option" data-suggestion-index="3" data-section-name="default" id="autosuggest__results-item--3" class="autosuggest__results-item hello-li">
life of fred
</li>
<li role="option" data-suggestion-index="4" data-section-name="default" id="autosuggest__results-item--4" class="autosuggest__results-item hello-li">
life of fred math
</li>
</ul>
<ul role="listbox" aria-labelledby="autosuggest">
<li role="option" data-suggestion-index="5" data-section-name="dogs" id="autosuggest__results-item--5" class="autosuggest__results-item">
spike
</li>
<li role="option" data-suggestion-index="6" data-section-name="dogs" id="autosuggest__results-item--6" class="autosuggest__results-item">
bud
</li>
<li role="option" data-suggestion-index="7" data-section-name="dogs" id="autosuggest__results-item--7" class="autosuggest__results-item">
rover
</li>
</ul>
<ul role="listbox" aria-labelledby="autosuggest">
<li role="option" data-suggestion-index="8" data-section-name="cats" id="autosuggest__results-item--8" class="autosuggest__results-item">
sassy
</li>
<li role="option" data-suggestion-index="9" data-section-name="cats" id="autosuggest__results-item--9" class="autosuggest__results-item">
tuesday
</li>
<li role="option" data-suggestion-index="10" data-section-name="cats" id="autosuggest__results-item--10" class="autosuggest__results-item">
church
</li>
</ul>
<ul role="listbox" aria-labelledby="autosuggest">
<li role="option" data-suggestion-index="11" data-section-name="zeu" id="autosuggest__results-item--11" class="autosuggest__results-item">
elephant
</li>
<li role="option" data-suggestion-index="12" data-section-name="zeu" id="autosuggest__results-item--12" class="autosuggest__results-item">
lion
</li>
</ul>
<ul role="listbox" aria-labelledby="autosuggest">
<li role="option" data-suggestion-index="13" data-section-name="Uhh" id="autosuggest__results-item--13" class="autosuggest__results-item">
something
</li>
<li role="option" data-suggestion-index="14" data-section-name="Uhh" id="autosuggest__results-item--14" class="autosuggest__results-item">
something2
</li>
</ul>
</div>
</div>
</div>
`;
exports[`Autosuggest can handle null data 1`] = `
<div id="autosuggest"><input type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="autosuggest__results" aria-activedescendant="" aria-haspopup="false" aria-expanded="false" id="autosuggest__input" placeholder="Type 'G'">
<div class="autosuggest__results-container">
Expand Down
32 changes: 32 additions & 0 deletions __tests__/autosuggest.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -754,4 +754,36 @@ describe("Autosuggest", () => {
expect(str).toMatchSnapshot();
});
});

it("can display ul and li classNames", async () => {
const props = { ...defaultProps };
props.sectionConfigs.default.liClass = { 'hello-li': true }
props.sectionConfigs.default.ulClass = { 'hello-ul': true }

const wrapper = mount(Autosuggest, {
propsData: props,
listeners: defaultListeners,
attachToDocument: true
});

const input = wrapper.find("input");
input.setValue("G");

input.trigger("click");
input.setValue("G");

const ul = wrapper.find("ul")
const li = ul.find("li:nth-child(1)")

expect(ul.classes()).toContain('hello-ul');
expect(li.classes()).toContain('hello-li');

const renderer = createRenderer();
renderer.renderToString(wrapper.vm, (err, str) => {
if (err) {
return false;
}
expect(str).toMatchSnapshot();
});
});
});
89 changes: 52 additions & 37 deletions docs/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="demo">
<button @click="toggleDark">go {{ colorMode === 'light' ? 'dark' : 'light' }}</button>
<div class="demo" v-if="theme">
<button @click="toggleTheme(oppositeTheme)">{{ oppositeTheme === 'light' ? '🌞 Go Light' : 'Go Dark 🌛' }}</button>
<h1>🔍 Vue-autosuggest</h1>
<div>
<vue-autosuggest
Expand Down Expand Up @@ -65,27 +65,23 @@ function updateCSSVariables(theme) {
}
}
const darkTheme = {
bg: '#21222C',
header: '#8F73BD',
item_color_highlighted: '#80D4E7',
item_bg_highlighted: '#363948'
}
const races = [...new Set(characters.map(c => { return c.Race }))]
export default {
components: {
VueAutosuggest
},
mounted(){
updateCSSVariables(darkTheme)
const storageTheme = localStorage.getItem('autosuggest-theme')
const theme = storageTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light')
console.log({theme})
this.toggleTheme(theme)
},
data() {
return {
selected: "",
searchText: "",
colorMode: 'dark',
theme: null,
options: races.map(r => ({
label: r,
name: r,
Expand All @@ -94,20 +90,41 @@ export default {
),
sectionConfigs: {
default: {
limit: 4
limit: 4,
ulClass: {'data-darren': true },
liClass: {'elf-row': true }
},
hobbits: {
Elf: {
limit: 6
}
},
inputProps: {
id: "autosuggest__input",
placeholder: "Search"
},
themes: {
dark: {
bg: '#21222C',
color: 'white',
header: '#8F73BD',
item_color_highlighted: '#80D4E7',
item_bg_highlighted: '#363948',
},
light: {
bg: 'white',
header: '#8F73BD',
color: 'black',
item_color_highlighted: 'black',
item_bg_highlighted: '#e0e0e0',
}
},
events: []
};
},
computed: {
oppositeTheme() {
return (this.theme === 'light') ? 'dark' : 'light'
},
filteredOptions() {
const filtered = []
if(!this.searchText){
Expand All @@ -116,10 +133,14 @@ export default {
races.forEach(r => {
const people = this.options.filter(o => o.name === r)[0].data.filter(p => {
return p.Name.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1;
}).map(p => {
p.liClass = p.Name === 'Gandalf' ? {'gandalf': true} : null
return p
});
people.length > 0 &&
filtered.push({
name: Object.keys(this.sectionConfigs).indexOf(r) > -1 ? r : 'default',
label: r,
data: people
});
Expand All @@ -129,25 +150,11 @@ export default {
}
},
methods: {
toggleDark(){
this.colorMode = ((this.colorMode === 'dark') ? 'light' : 'dark')
if(this.colorMode === 'dark'){
updateCSSVariables({
bg: '#21222C',
color: 'white',
header: '#8F73BD',
item_color_highlighted: '#80D4E7',
item_bg_highlighted: '#363948',
})
}else{
updateCSSVariables({
bg: 'white',
header: 'black',
color: '#21222C',
item_color_highlighted: 'black',
item_bg_highlighted: '#e0e0e0',
})
}
toggleTheme(theme){
this.theme = theme
localStorage.setItem('autosuggest-theme', theme)
console.log('setting', theme)
updateCSSVariables(this.themes[this.theme])
},
getSuggestionValue(item) {
Expand Down Expand Up @@ -179,11 +186,11 @@ button {
color: var(--theme-color);
text-transform: uppercase;
font-weight: 700;
font-size: .66rem;
font-size: 0.66rem;
white-space: nowrap;
border: 3px solid var(--theme-color);
border-radius: 2rem;
padding: .2rem .85rem .25rem .85rem;
padding: 0.2rem 0.85rem 0.25rem 0.85rem;
cursor: pointer;
}
Expand All @@ -192,7 +199,7 @@ h1 {
}
* {
transition: height 0.200s linear;
transition: height 0.2s linear;
transition: border-color linear 0.1s;
}
Expand All @@ -213,7 +220,8 @@ h1 {
-moz-box-sizing: border-box;
}
#autosuggest__input.autosuggest__input--open, #autosuggest__input:hover {
#autosuggest__input.autosuggest__input--open,
#autosuggest__input:hover {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid lightgray;
Expand All @@ -223,7 +231,6 @@ h1 {
position: relative;
width: 100%;
background-color: var(--theme-bg);
}
.autosuggest__results {
Expand Down Expand Up @@ -299,4 +306,12 @@ h1 {
.evt-val {
color: var(--theme-color);
}
.elf-row {
font-style: italic;
}
.gandalf {
color: var(--theme-header);
}
</style>
Loading

0 comments on commit 2ac4732

Please sign in to comment.