open-consul/ui-v2/app/components/search-bar
John Cowen 10fe22c9b4
ui: Add Optgroups and selectedItems to multiple select dropdown and use (#8476)
* ui: Switch selects to use more HTML-like approach for optgroups

* Add KV comparator

* Use new option/optgroup approach for sort/select

* Fix up tests for new order of menu items
2020-08-11 18:02:51 +01:00
..
README.mdx ui: Remove WithSearching mixin, use helpers instead (#7961) 2020-06-03 16:46:53 +00:00
index.hbs ui: Add Optgroups and selectedItems to multiple select dropdown and use (#8476) 2020-08-11 18:02:51 +01:00
index.js ui: Remove WithSearching mixin, use helpers instead (#7961) 2020-06-03 16:46:53 +00:00
pageobject.js ui: Colocate pageobject components with their components (#8098) 2020-06-12 16:50:09 +01:00

README.mdx

## SearchBar

```handlebars
<SearchBar
  @value={{"search term"}}
  @onsearch={{action "search"}}
/>
```

### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `String` | | The string `value` of the freetext search bar |
| `onsearch` | `Function` | | The action to fire when the freetext search bar changes. Emits a native event with a `target.value` property containing the text typed into the search bar |
| `options` | `Array` |  | An array of Key/Values pairs to use for options for either a filter interface or a sort interface |
| `selected` | `Object` |  | An object containing a Key/Value pair of the currently selected option |
| `onchange` | `Function` |  | The action to fire when the filter/sort changes. Emits an Event-like object, when filtering this has a `target.value` property containg the key of the selected filter, when sorting this has a `target.selected` property containing the selected Key/Value pair |
| `secondary` | `string` |  | String identifier to signify what type of secondary filter to show. Currently only value here is 'sort' |

`SearchBar` is used for a variety of searching behaviours, freetext searching, filtering and sorting. It is also slot based to enable you to completely overwrite the secondary search if need be.

### Examples

```handlebars
{{! Freetext only search bar}}
<SearchBar
  @value={{"search term"}}
  @onsearch={{action "search"}}
/>
```

```handlebars
{{! Freetext and filter search bar}}
<SearchBar
  @value={{search}}
  @onsearch={{action (mut search) value='target.value'}}
  @selected={{filter.selected}}
  @options={{filter.items}}
  @onchange={{action (mut filterBy) value='target.value'}}
/>
```

```handlebars
{{! Freetext and sort search bar}}
<SearchBar
  @value={{search}}
  @onsearch={{action (mut search) value='target.value'}}
  @secondary="sort"
  @selected={{sort.selected}}
  @options={{sort.items}}
  @onchange={{action (mut sortBy) value='target.selected.key'}}
/>
```

### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---