LiveFilter.Components.FilterSelector (LiveFilter v0.1.0)

View Source

A dropdown component for selecting filters to add to the active filter set.

This component provides a clean UI for adding optional filters without taking up toolbar space for filters that aren't actively in use.

Features

  • Shows only inactive filters in the dropdown
  • Supports custom icons for each filter
  • Sends standardized events when filters are selected
  • Fully optional - can be used alongside or instead of FilterBuilder

Usage

<.live_component
  module={LiveFilter.Components.FilterSelector}
  id="add-filter"
  available_filters={[
    {:description, "Description", "hero-document-text"},
    {:tags, "Tags", "hero-tag"},
    {:estimated_hours, "Est. Hours", "hero-clock"}
  ]}
  active_filters={[:tags]}
  label="Add Filter"
  class="my-custom-class"
/>

When a filter is selected, it sends a message to the parent LiveView:

{:filter_selected, filter_field}