FilterPanel Component

@phila/phila-ui-filter-panel — filter panel for faceted filtering — the "All Filters" panel (header, optional search, collapsible checkbox/radio sections, deferred Reset/Apply).

Presentational: the app controls visibility and placement by mounting/unmounting FilterPanel. The component emits close and does not hide itself.

Installation

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

Usage with FilterChipGroup

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

const filters: FilterDefinition[] = [
  /* ... */
];
const values = ref<FilterValues>({});
const panelOpen = ref(false);
</script>

<template>
  <FilterChipGroup :filters="filters" v-model="values" filter-button @open-filters="panelOpen = true" />
  <FilterPanel v-if="panelOpen" :filters="filters" v-model="values" @close="panelOpen = false" />
</template>

FilterDefinition and FilterValues are shared types from @phila/phila-ui-core. The chip row and the panel share the same values ref — two views over one piece of state.

Props

| Prop | Type | Default | Description | | ------------------- | -------------------- | --------------- | -------------------------------------- | | filters | FilterDefinition[] | — | Required. Ordered list of filter axes. | | modelValue | FilterValues | {} | Current filter state (v-model). | | title | string | "All Filters" | Panel header title. | | searchable | boolean | true | Show the in-panel search box. | | searchPlaceholder | string | "Search" | Placeholder text for the search input. | | applyText | string | "Apply" | Label for the Apply button. | | resetText | string | "Reset" | Label for the Reset button. |

Events

| Event | Payload | Description | | ------------------- | -------------- | ---------------------------------------------------------------------------- | | update:modelValue | FilterValues | Emitted when Apply is clicked. Carries the confirmed filter state. | | close | — | Emitted when ✕ is clicked and after Apply. The app should unmount the panel. |

Development

Install Dependencies

pnpm install

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT