Filterable Product Catalog

Build an interactive product catalog component in Vue where users can filter products by category using category filter chips and search products by name or description using a text input. A dynamic summary text should show the count of matching products.

Requirements

• Search Input: Render an input element labeled Search products (<label for="search-input">Search products</label> and <input id="search-input" />) that filters products matching the query against their name or description (case-insensitive).
• Category Filter Chips: Render category buttons inside a container with role="group" and aria-label="Filter by category". The available options are All, Electronics, Clothing, Home, and Books. Clicking a category chip selects it and filters products accordingly. The selected category button must have aria-pressed="true" while unselected buttons have aria-pressed="false".
• Combined Filtering: Filtering must combine search text and category selection (an item must match both the search text and the active category filter).
• Result Count: Render a text area showing the count of visible items in the format Showing X of Y products where X is the number of matching items and Y is the total number of items (5).
• Clear Filters Button: Render a button labeled Clear filters that resets the search text to an empty string and resets the active category filter to All.
• Empty State: When no products match the current filters, display the text No products found matching your criteria. in place of the product list.
• Product Card Content: Display each matching product with its name, category, price formatted as $XX.XX (e.g. $999.99), and description.

Default Product Data

1. Name: Wireless Headphones, Category: Electronics, Price: 199.99, Description: Noise-canceling over-ear headphones with 30-hour battery life.
2. Name: Cotton T-Shirt, Category: Clothing, Price: 24.50, Description: Soft breathable organic cotton t-shirt for everyday wear.
3. Name: Ergonomic Desk Chair, Category: Home, Price: 289.00, Description: Adjustable lumbar support mesh chair for comfortable work sessions.
4. Name: JavaScript Guide Book, Category: Books, Price: 45.00, Description: Comprehensive guide to modern JavaScript development.
5. Name: Smart Watch, Category: Electronics, Price: 149.99, Description: Fitness tracking smartwatch with heart rate monitoring and GPS.