consul/ui/packages/consul-ui/app/components/data-collection
John Cowen 308e5a480e
ui: Remove storybook, add docfy (#9831)
This PR removes storybook and adds docfy and uses docfy to render our existing README files.

This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub.
2021-03-08 12:22:01 +00:00
..
README.mdx ui: Remove storybook, add docfy (#9831) 2021-03-08 12:22:01 +00:00
index.hbs ui: Remove old style 'filterable' searching (#9356) 2020-12-09 19:12:17 +00:00
index.js ui: Check for a non-existent items argument/attribute within DataCollection (#9662) 2021-01-29 15:53:28 +00:00

README.mdx

## DataCollection

```hbs
<DataCollection
  @search={{''}}
  @sort={{''}}
  @filter={{hash
    searchproperties=(array)
  }}
  @items={{array}}
as |collection|>
  {{collection.items.length}}
  <collection.Collection>
    Has Results
  </collection.Collection>
  <collection.Empty>
    Is Empty
  </collection.Empty>
</DataCollection>
```

### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array` | [] | The collection of data to search/sort/filter |
| `search` | `String` | '' | A search term to use for searching |
| `sort` | `String` | '' | A sort term to use for sorting on ('Name:asc') |
| `filter` | `Object` |  | An object whose properties are the properties/values to filter on |

### Yields

The DataCollection yields an object containing the following:

| Property | Type | Description |
| --- | --- | --- |
| `items` | `Array` | The resulting collection of data after searching/sorting/filtering |
| `search` | `Function` | An action used to perform a search - takes a single string argument that should be the search term |
| `Collection` | `Component` | A slot-like component that only renders when the items in the collection is greater than 0 |
| `Empty` | `Component` | A slot-like component that only renders when the items in the collection is 0 |

### See

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

---