CategoryFilter

Sidebar filter panel with category tree, price range, brand selection, and sorting.

CategoryFilter

A sidebar filter panel for product listings. Supports category tree navigation, price range slider, brand multi-select, availability filters, and sort options.

Preview

Usage

<script setup>
const filters = ref({
  categories: [],
  priceRange: [0, 1000],
  brands: [],
  inStock: false,
  sortBy: 'newest',
})
</script>

<CCategoryFilter
  v-model="filters"
  :categories="categoryTree"
  :brands="brands"
  :price-min="0"
  :price-max="5000"
  @update:modelValue="fetchProducts"
/>

Collapsible Sections

<CCategoryFilter v-model="filters" collapsible />

Props

Prop	Type	Default	Description
`modelValue`	`FilterState`	required	Current filter values
`categories`	`Category[]`	`[]`	Category tree
`brands`	`Brand[]`	`[]`	Available brands
`priceMin`	`number`	`0`	Minimum price bound
`priceMax`	`number`	`10000`	Maximum price bound
`collapsible`	`boolean`	`true`	Collapsible filter sections
`showCount`	`boolean`	`true`	Show item counts
`ui`	`Partial<{...}>`	—	Per-instance theme overrides

Events

Event	Payload	Description
`update:modelValue`	`FilterState`	Any filter changed
`clear`	—	All filters cleared

Slots

Slot	Scoped Props	Description
`category`	`{ category, selected, toggle }`	Custom category item
`brand`	`{ brand, selected, toggle }`	Custom brand item
`price-range`	`{ min, max, update }`	Custom price range input
`actions`	`{ clear }`	Custom clear/apply actions

HeroBanner

Full-width marketing hero section with title, subtitle, CTAs, and optional background.