Composable component

blackbox.md

Blackbox component

// users/edit/index.hbs
{{filter-list
  items=model
  filterBy="path.value"
  labelBy="path.value"
  highlight=true
  order="ASC"}}

// components/filter-list/component.hbs
{{select-list
  items=modelFiltered
  order=order
  highlight=hightlight}}

// components/select-list/component.hbs
{{list-component
  items=modelFiltered
  order=order
  highlight=hightlight}}

composable-component.md

Composable component

Filter + Sort + Dropdown + List + Truncation

// users/edit/template.hbs
{{#filter-component items=model filterBy="path.value" as |itemsFiltered|}}
  {{#sort-component items=itemsFiltered as |itemsSorted|}}
    {{#dropdown-component}}
      {{#list-component items=itemsSorted as |item|}}
        {{truncate item=item}}
      {{/list-component}}
    {{/dropdown-component}}
  {{/sort-component}}
{{/filter-component}}

Dropdown + List + Custom line component

//users/new/template.hbs
{{#dropdown-component}}
  {{#list-component items=itemsSorted as |item|}}
    {{pretty-list-item item=item}}
  {{/list-component}}
{{/dropdown-component}}

Sort + List + highlight + truncate

// template.hbs
{{#sort-component items=model as |itemsSorted|}}
    {{#list-component items=itemsSorted as |item|}}
      {{#highlight item=item value="toto" as |itemHighlighted|}}
        {{truncate item=item}}
      {{/highlight}}
    {{/list-component}}
{{/sort-component}}

Ember like a pro, use helpers! Ember composable helpers

// template.hbs
{{#sort-component items=model as |itemsSorted|}}
    {{#list-component items=itemsSorted as |item|}}
      {{list-component-item hightlight="toto" truncate}}
    {{/list-component}}
{{/sort-component}}

/composents
--- /composable /
--- dropdown Display a list of item
--- list
--- filter
--- /inputs
--- /filter-input