FilterSummary Component

@phila/phila-ui-filter-summary — filter summary for applied filters: a "Showing N results for …" line plus removable filter pills (one per active selection) and a Clear all action.

Installation

pnpm add @phila/phila-ui-filter-summary

Shared model

FilterSummary uses the same FilterDefinition[]/FilterValues types as FilterChipGroup and FilterPanel, and reads dropdown filter values as the FilterValues type declares them: a plain string (single-select) or string[] (multi-select) per filter key, plus boolean for toggles.

Known incompatibility: FilterChipGroup's actual runtime modelValue for dropdown filters is a Record<string, boolean> map of every choice → selected (confirmed in FilterChipGroup.vue), not the string/string[] this component expects. If you bind the same ref across both components today, FilterSummary will correctly render pills for toggle filters, but will not render pills for dropdown filter selections made through FilterChipGroup — the value shapes don't match. Removing a pill or clicking Clear all still emits an updated model in FilterSummary's own string/string[]/boolean shape; Clear all preserves any ordering filters (those with excludeFromCount: true, e.g. Sort) so the user's sort preference is not lost.

Usage

<script setup lang="ts">
import { ref } from "vue";
import { FilterSummary } from "@phila/phila-ui-filter-summary";
import type { FilterDefinition, FilterValues } from "@phila/phila-ui-core";

const filters: FilterDefinition[] = [
  /* ... */
];
const values = ref<FilterValues>({ language: ["en", "es"] });
</script>

<template>
  <FilterSummary :filters="filters" v-model="values" :results-count="21" query="health center" />
</template>

Props

| Prop | Type | Default | Description | | -------------- | -------------------- | ------------- | --------------------------------------------------------------------- | | filters | FilterDefinition[] | — | Required. Same filter definitions used by the chip bar / panel. | | modelValue | FilterValues | {} | Applied values (v-model). Removing a pill emits an updated copy. | | resultsCount | number | — | When set, renders the "Showing N results…" line above the pills. | | query | string | — | Searched term shown in the results line as for "…". | | clearAllText | string | "Clear all" | Label for the Clear all action (shown only when 2+ pills are active). |

Events

| Event | Payload | Description | | ------------------- | -------------- | ------------------------------------------------------------------- | | update:modelValue | FilterValues | Emitted when a pill is removed or Clear all is clicked (v-model). |

Slots

| Slot | Props | Description | | ---------- | ---------------------------------- | ------------------------------------------------------------------------ | | #results | { count: number, query: string } | Replaces the default "Showing N results for …" line with custom content. |

Development

Install Dependencies

pnpm install

Build Library

pnpm build

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT