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[] and FilterValues types as FilterChipGroup and FilterPanel. Bind all three to the same ref<FilterValues> and they stay in sync: removing a pill or clicking Clear all emits an updated model; 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

License

MIT