Task List Manager with Swipe Actions

Build a mobile-friendly task list manager where users can swipe items left or right to reveal action buttons for quick operations.

Requirements

Task List Display

Create a task list component that displays a list of tasks. Each task should show:

• Task name/description
• Task status (pending, completed, or archived)

Swipe Interaction

Implement swipe gestures on each task item to reveal action buttons:

Swipe left (reveals buttons on the right):

• Delete button (red): Removes the task from the list
• Archive button (yellow): Marks the task as archived

Swipe right (reveals button on the left):

• Complete button (green): Toggles between pending and completed status

State Management

Maintain and update the task list state appropriately when actions are performed:

• Deleting should remove the task from the list
• Archiving should update the task status to "archived"
• Marking complete should toggle between "pending" and "completed" status

Initial Data

Start with at least 3 sample tasks to demonstrate the functionality.

Test Cases

• Swiping a task item left reveals delete and archive buttons on the right @test
• Swiping a task item right reveals a complete button on the left @test
• Clicking the delete button removes the task from the list @test
• Clicking the complete button toggles the task status between pending and completed @test

Implementation

@generates

API

// Component props interface
interface Task {
  id: string;
  name: string;
  status: 'pending' | 'completed' | 'archived';
}

// Component should accept an initial list of tasks and emit events for actions

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components for Vue 3.