Product Category Selector

Build a product category selection interface that allows users to browse and select products from a hierarchical category tree. The interface should display categories on the left side and their subcategories/products on the right side.

Requirements

Create a Vue 3 component that implements the following functionality:

Data Structure

Your component should work with a hierarchical data structure where:

• Top-level items represent main categories
• Each category can contain multiple products
• Products can be individually selected
• Some products may be marked as unavailable
• Categories can display notification counts

User Interface

The interface must:

• Display main categories in a left sidebar
• Show products for the selected category on the right
• Support selection of multiple products
• Visually indicate unavailable products (which cannot be selected)
• Display notification badges on products when applicable
• Set a fixed height of 300 pixels for the selection area

Selection Behavior

Implement the following selection rules:

• Users can select multiple products across different categories
• Maximum of 3 products can be selected at once
• Unavailable products cannot be selected
• The component should track which main category is currently active
• The component should track which products are selected

Sample Data

Your implementation should work with data structured like this example:

const categories = [
  {
    text: 'Electronics',
    children: [
      { text: 'Smartphone', id: 'elec-1' },
      { text: 'Laptop', id: 'elec-2', badge: '5' },
      { text: 'Tablet', id: 'elec-3', disabled: true }
    ]
  },
  {
    text: 'Clothing',
    children: [
      { text: 'T-Shirt', id: 'cloth-1' },
      { text: 'Jeans', id: 'cloth-2' },
      { text: 'Jacket', id: 'cloth-3', dot: true }
    ]
  }
];

Implementation

Create the following file:

• src/ProductSelector.vue - Vue component implementing the category selector @generates

Tests

Your implementation must pass the following test cases:

• The component renders with the first category active by default @test
• When a main category is clicked, it becomes active and displays its products @test
• Products can be selected up to the maximum limit of 3 items @test
• Disabled products cannot be selected @test

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components for Vue 3 including hierarchical selection support.

@satisfied-by