Vue Batch Runner Component

This challenge asks you to create a reusable Vue component that allows users to submit a list of tasks to be executed sequentially. The component should provide visual feedback on the progress of each task, handle errors gracefully, and allow for cancellation of the batch process. Building such a component is useful for managing long-running operations that need to be broken down into smaller, manageable steps, providing a better user experience than a single, potentially lengthy, process.

Problem Description

You need to build a BatchRunner component in Vue.js using TypeScript. This component will accept an array of task objects as input. Each task object will have a name (string) and a execute function (which returns a Promise). The component should:

1. Display Task List: Render a list of tasks with their names.
2. Sequential Execution: Execute the tasks sequentially, one after the other, waiting for each task to complete before starting the next.
3. Progress Tracking: Display the status of each task (e.g., "Pending", "Running", "Completed", "Failed").
4. Error Handling: If a task fails (its execute function rejects), display an error message for that task and stop further execution.
5. Cancellation: Provide a button to cancel the batch process. If the batch is cancelled, any currently running task should be stopped (if possible - the execute function should ideally support cancellation, but this is not strictly required for this challenge). If cancelled before any tasks start, nothing should happen.
6. Completion/Failure: Once all tasks are completed successfully or the batch is cancelled/fails, display a summary message indicating the outcome (e.g., "All tasks completed successfully!" or "Batch failed.").

Examples

Example 1:

Input: tasks = [{ name: 'Task 1', execute: () => new Promise<void>((resolve) => setTimeout(() => resolve(), 500)) }, { name: 'Task 2', execute: () => new Promise<void>((resolve) => setTimeout(() => resolve(), 1000)) }]
Output: The component displays "Task 1" (Pending), then "Task 1" (Running), then "Task 1" (Completed).  Then "Task 2" (Pending), then "Task 2" (Running), then "Task 2" (Completed). Finally, displays "All tasks completed successfully!".
Explanation: The tasks are executed sequentially with a delay.

Example 2:

Input: tasks = [{ name: 'Task 1', execute: () => new Promise<void>((resolve, reject) => setTimeout(() => reject(new Error('Task 1 failed')), 500)) }, { name: 'Task 2', execute: () => new Promise<void>((resolve) => setTimeout(() => resolve(), 1000)) }]
Output: The component displays "Task 1" (Pending), then "Task 1" (Running), then "Task 1" (Failed) with the error message "Task 1 failed". The batch execution stops.
Explanation: Task 1 fails, so the batch stops and an error is displayed. Task 2 is not executed.

Example 3: (Cancellation)

Input: tasks = [{ name: 'Task 1', execute: () => new Promise<void>((resolve) => setTimeout(() => resolve(), 2000)) }]
Output: The component displays "Task 1" (Pending), then "Task 1" (Running).  The user clicks the "Cancel" button before Task 1 completes. The component displays "Batch cancelled."
Explanation: The batch is cancelled mid-execution.

Constraints

• The component should be reusable and accept the task array as a prop.
• The execute function of each task should return a Promise.
• The component should handle errors gracefully and display informative messages to the user.
• The component should be visually appealing and provide clear feedback on the progress of the batch process.
• The component should be implemented using Vue 3 and TypeScript.
• The component should not rely on external libraries beyond Vue and TypeScript.

Notes

• Consider using Vue's reactivity system to update the UI as tasks progress.
• Think about how to manage the state of each task (pending, running, completed, failed).
• The execute function is assumed to be asynchronous.
• You can use a simple template for the UI, focusing on the functionality of the batch runner. Styling is not a primary concern.
• Error handling should prevent the entire application from crashing if a task fails.
• Consider how to handle edge cases, such as an empty task array.