Product Quantity Selector

Build a product quantity selector component for a shopping cart interface using Vue 3. The component should allow users to select quantities with increment/decrement controls and enforce quantity constraints.

Requirements

The component should:

• Display a product name label ("Product Quantity")
• Allow users to increment and decrement the quantity using controls
• Display the current quantity value between the controls
• Start with an initial quantity of 1
• Enforce a minimum quantity of 1 (users cannot go below 1)
• Enforce a maximum quantity of 99 (users cannot exceed 99)
• Use a step of 1 for increments and decrements
• Disable the decrement control when at minimum
• Disable the increment control when at maximum

Test Cases

• Given initial state, the quantity starts at 1 @test
• When incrementing from 1, the quantity becomes 2 @test
• When decrementing from 2, the quantity becomes 1 @test
• When at minimum (1), the decrement control is disabled @test
• When at maximum (99), the increment control is disabled @test

Implementation

@generates

API

<template>
  <div class="product-quantity">
    <!-- Implement product quantity selector here -->
  </div>
</template>

<script setup>
// Component implementation
</script>

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including numeric stepper controls.