Segments

Show one select filter as a row of buttons.

segments(binding, options?) displays a registered select filter. The filter bar must contain exactly one select filter with one cardinality. The value all is reserved for the control that clears the filter.

import {
  defineResource,
  defineFilters,
  filters,
  segments,
} from '@backlit/sdk'
const orders = defineResource('orders', [])
const status = defineFilters([
  filters.select('status', [
    { value: 'open', label: 'Open' },
    { value: 'closed', label: 'Closed' },
  ]),
])
orders.view('list', { status }, (_ctx, view) =>
  segments(view.state.status, {
    counts: { all: 12, open: 5, closed: 7 },
    tones: { open: 'info' },
    labels: { all: 'All orders' },
  })
)
export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "list",
    "slots": {
      "content": [
        {
          "kind": "segments",
          "resource": "orders",
          "view": "list",
          "keyword": "f",
          "definesResult": true,
          "dependsOnResult": false,
          "filter": {
            "kind": "select",
            "name": "status",
            "label": "",
            "options": [
              {
                "value": "open",
                "label": "Open"
              },
              {
                "value": "closed",
                "label": "Closed"
              }
            ]
          },
          "counts": {
            "all": 12,
            "open": 5,
            "closed": 7
          },
          "tones": {
            "open": "info"
          },
          "labels": {
            "all": "All orders"
          }
        }
      ]
    }
  }
}

The options counts, tones, and labels are maps keyed by a select option value or all. Counts come from the resolver. Labels replace the corresponding option label. Tones describe the meaning of each count.

The binding determines whether a change refreshes the view or one zone. Read the selected value with ctx.parse(scope). Apply it to the query yourself.