search

topcoat-data / topcoat-public

TopCoat components, visualizations and themes
MIT License
1 stars 3 forks source link

filter section components #165

Closed gau94rav closed 2 years ago

gau94rav commented 2 years ago

Filters UX Figma

What's new This PR adds 2 new components for filters.

  1. TFiltersSection: Shows active filters and allows editing/removal of filters.
  2. TFiltersDropdown: Used by TFiltersSection that shows in-active filters to add inside active section, normally this will not be used independently in any current use case.

Syntax

<t-filters-section>
    <t-select t-layer="select_layer" label="Issues type" dropdown-section="Issues" />
    <t-multi-selector t-layer="multi_layer" label="Projects type" dropdown-section="Projects" />
</t-filters-section>

Props: these are used by children filters, not the TFiltersSection

  1. item-label: Used by child components to display their names in dropdown.
  2. dropdown-section: Used to categories filters in dropdown.
  3. default-[value]: Any filter with a prop named default will force that filter to be visible by default and have no delete button.

Sample Screenshot Screenshot 2022-10-20 at 5 20 39 PM

Some important points

  1. This component will auto add a delete button to any filter that has a slot named footer. Screenshot 2022-10-26 at 5 05 15 PM
  2. To maintain the original "Add order" for filters, it goes through all slot items twice, once for dropdown filter and once of visible filters that appear after added.
  3. Any change to filters result in re-init.