Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Highlight Class Configurable. #188

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Make Highlight Class Configurable. #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
505c0ff
Make Highlight Class Configurable.
vivekitis May 16, 2020
e8bf6fa
Formatting
vivekitis Jul 18, 2020
0a338d4
Merge branch 'master' of github.com:darrenjennings/vue-autosuggest in…
vivekitis Jul 18, 2020
8ab9c37
snapshot changes
vivekitis Jul 18, 2020
ac48982
Added Custom Highlight Class Test
vivekitis Jul 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,17 @@
"test"
]
},
{
"login": "vivekitis",
"name": "Vivek Ashokan",
"avatar_url": "https://avatars2.githubusercontent.com/u/16322466?v=4",
"profile": "https://github.com/vivekitis",
"contributions": [
"code",
"doc",
"example"
]
},
{
"login": "42tte",
"name": "Kristoffer Nordström",
Expand Down
174 changes: 88 additions & 86 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,91 @@
<style>
body {
max-width: 800px;
padding: 20px;
margin-left: auto !important;
margin-right: auto !important;
font-family: monospace;
}

#autosuggest__input {
position: relative;
display: block;
font-family: monospace;
font-size: 20px;
border: 1px solid #616161;
padding: 10px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

#autosuggest__input.autosuggest__input--open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.autosuggest__results-container {
position: relative;
width: 100%;
}

.autosuggest__results {
font-weight: 300;
margin: 0;
position: absolute;
z-index: 10000001;
width: 100%;
border: 1px solid #e0e0e0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: white;
padding: 0px;
}

.autosuggest__results ul {
list-style: none;
padding-left: 0;
margin: 0;
}

.autosuggest__results .autosuggest__results-item {
cursor: pointer;
padding: 15px;
}

#autosuggest ul:nth-child(1) > .autosuggest__results-before {
border-top: none;
}

.autosuggest__results .autosuggest__results-before {
color: gray;
font-size: 11px;
margin-left: 0;
padding: 15px 13px 5px;
border-top: 1px solid lightgray;
}

.autosuggest__results .autosuggest__results-item:active,
.autosuggest__results .autosuggest__results-item:hover,
.autosuggest__results .autosuggest__results-item:focus,
.autosuggest__results
.autosuggest__results-item.autosuggest__results-item--highlighted {
background-color: rgba(0,0,0,0.04);
}
body {
max-width: 800px;
padding: 20px;
margin-left: auto !important;
margin-right: auto !important;
font-family: monospace;
}

.autosuggest__results{
overflow: scroll;
max-height: 400px;
}
#autosuggest__input {
position: relative;
display: block;
font-family: monospace;
font-size: 20px;
border: 1px solid #616161;
padding: 10px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.autosuggest__results .autosuggest__results-after {
color: gray;
font-size: 11px;
margin-left: 0;
padding: 15px 13px 5px;
border-top: 1px solid lightgray;
}
</style>
#autosuggest__input.autosuggest__input--open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.autosuggest__results-container {
position: relative;
width: 100%;
}

.autosuggest__results {
font-weight: 300;
margin: 0;
position: absolute;
z-index: 10000001;
width: 100%;
border: 1px solid #e0e0e0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: white;
padding: 0px;
}

.autosuggest__results ul {
list-style: none;
padding-left: 0;
margin: 0;
}

.autosuggest__results .autosuggest__results-item {
cursor: pointer;
padding: 15px;
}

#autosuggest ul:nth-child(1)>.autosuggest__results-before {
border-top: none;
}

.autosuggest__results .autosuggest__results-before {
color: gray;
font-size: 11px;
margin-left: 0;
padding: 15px 13px 5px;
border-top: 1px solid lightgray;
}

.autosuggest__results .autosuggest__results-item:active,
.autosuggest__results .autosuggest__results-item:focus,
.autosuggest__results .autosuggest__results-item.autosuggest__results-item--highlighted {
background-color: rgba(0, 0, 0, 0.04);
}

.autosuggest__results {
overflow: scroll;
max-height: 400px;
}

.autosuggest__results .autosuggest__results-after {
color: gray;
font-size: 11px;
margin-left: 0;
padding: 15px 13px 5px;
border-top: 1px solid lightgray;
}

.highlightAutoItem {
background-color: rgba(0, 0, 0, 0.4);
}
</style>
43 changes: 22 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,27 +300,28 @@ vue-autosuggest does not have an opinion about how you render the items in your

## [Props](#props)

| Prop | Type | Required | Description |
| :------------------------------------------ | :------- | :------: | :-------------------------------------------------------- |
| [`suggestions`](#suggestionsProp) | Array | ✓ | Suggestions to be rendered. e.g.`suggestions: [{data: ['harry','ron','hermione']}]` |
| [`input-props`](#inputPropsTable) | Object | ✓ | Add props to the `<input>`. |
| [`section-configs`](#sectionConfigsProp) | Object | | Define multiple sections `<input>`. |
| [`render-suggestion`](#renderSuggestion) | Function | | Tell vue-autosuggest how to render inside the `<li>` tag. Overrides what is inside the default suggestion template slot. |
| [`get-suggestion-value`](#getSuggestionValue) | Function | | Tells vue-autosuggest what to put in the `<input/>` value |
| [`should-render-suggestions`](#shouldRenderSuggestions) | Function | | Tell vue-autosuggest if it should render the suggestions results popover |
| `component-attr-id-autosuggest` | String | | `id` of entire component |
| `component-attr-class-autosuggest-results-container` | String | | `class` of container of results container |
| `component-attr-class-autosuggest-results` | String | | `class` of results container |
| `component-attr-prefix` | String | | prefix to be used for results item classes/ids. default: `autosuggest` |
| Prop | Type | Required | Description |
| :------------------------------------------------------ | :------- | :------: | :----------------------------------------------------------------------------------------------------------------------- |
| [`suggestions`](#suggestionsProp) | Array | ✓ | Suggestions to be rendered. e.g.`suggestions: [{data: ['harry','ron','hermione']}]` |
| [`input-props`](#inputPropsTable) | Object | ✓ | Add props to the `<input>`. |
| [`section-configs`](#sectionConfigsProp) | Object | | Define multiple sections `<input>`. |
| [`render-suggestion`](#renderSuggestion) | Function | | Tell vue-autosuggest how to render inside the `<li>` tag. Overrides what is inside the default suggestion template slot. |
| [`get-suggestion-value`](#getSuggestionValue) | Function | | Tells vue-autosuggest what to put in the `<input/>` value |
| [`should-render-suggestions`](#shouldRenderSuggestions) | Function | | Tell vue-autosuggest if it should render the suggestions results popover |
| `component-attr-id-autosuggest` | String | | `id` of entire component |
| `component-attr-class-autosuggest-results-container` | String | | `class` of container of results container |
| `component-attr-class-autosuggest-results` | String | | `class` of results container |
| `component-attr-class-autosuggest-item-highlight` | String | | `class` of highlighted item |
| `component-attr-prefix` | String | | prefix to be used for results item classes/ids. default: `autosuggest` |

<a name="inputPropsTable"></a>

### inputProps

| Prop | Type | Required | Description |
| :----------------------- | :------------------ | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`id`](#inputPropsTable) | String | ✓ | id attribute on `<input>`. |
| Any DOM Props | \* | | You can add any props to `<input>` as the component will `v-bind` inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind. The `name` attribute is set to "`q`" by default. |
| Prop | Type | Required | Description |
| :----------------------- | :----- | :------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`id`](#inputPropsTable) | String | ✓ | id attribute on `<input>`. |
| Any DOM Props | \* | | You can add any props to `<input>` as the component will `v-bind` inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind. The `name` attribute is set to "`q`" by default. |

<a name="sectionConfigsProp"></a>

Expand All @@ -329,10 +330,10 @@ vue-autosuggest does not have an opinion about how you render the items in your
Multiple sections can be defined in the `sectionConfigs` prop which defines the control behavior for
each section.

| Prop | Type | Required | Description |
| :----------- | :------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `on-selected` | Function | ✓ | Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc. |
| `limit` | Number | | Limit each section by some value. Default: `Infinity` |
| Prop | Type | Required | Description |
| :------------ | :------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `on-selected` | Function | ✓ | Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc. |
| `limit` | Number | | Limit each section by some value. Default: `Infinity` |

Below we have defined a `default` section and a `blog` section. The `blog` section has a component
`type` of `url-section` which corresponds to which component the Autosuggest loads. When type is not
Expand Down Expand Up @@ -445,7 +446,7 @@ For IE11 and below, some functionality may not work. For example, you will have
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><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") | [<img src="https://avatars3.githubusercontent.com/u/1824850?v=4" width="100px;"/><br /><sub><b>Scott Smith</b></sub>](https://github.com/scottadamsmith)<br />[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith "Bug reports") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Tests") | [<img src="https://avatars0.githubusercontent.com/u/864496?v=4" width="100px;"/><br /><sub><b>Fernando Machuca</b></sub>](https://github.com/chuca)<br />[🎨](#design-chuca "Design") | [<img src="https://avatars1.githubusercontent.com/u/12657810?v=4" width="100px;"/><br /><sub><b>BerniML</b></sub>](https://github.com/BerniML)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Tests") | [<img src="https://avatars0.githubusercontent.com/u/8436510?v=4" width="100px;"/><br /><sub><b>Kristoffer Nordström</b></sub>](https://github.com/42tte)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Tests") |
| [<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") | [<img src="https://avatars3.githubusercontent.com/u/1824850?v=4" width="100px;"/><br /><sub><b>Scott Smith</b></sub>](https://github.com/scottadamsmith)<br />[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith "Bug reports") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Tests") | [<img src="https://avatars0.githubusercontent.com/u/864496?v=4" width="100px;"/><br /><sub><b>Fernando Machuca</b></sub>](https://github.com/chuca)<br />[🎨](#design-chuca "Design") | [<img src="https://avatars1.githubusercontent.com/u/12657810?v=4" width="100px;"/><br /><sub><b>BerniML</b></sub>](https://github.com/BerniML)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Tests") | [<img src="https://avatars0.githubusercontent.com/u/8436510?v=4" width="100px;"/><br /><sub><b>Kristoffer Nordström</b></sub>](https://github.com/42tte)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Tests") | [<img src="https://avatars2.githubusercontent.com/u/16322466?v=4" width="100px;"/><br /><sub><b>Vivek Ashokan</b></sub>](https://github.com/vivekitis)<br />[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=vivekitis "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=vivekitis "Documentation") [💡](#example-vivekitis "Examples") |
| :---: | :---: | :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
Loading