Mobile UI Components library built on Vue 3 with 100+ components
74
{
"context": "This evaluation assesses how effectively an engineer uses Vant's SwipeCell component to implement swipeable list items with left and right action buttons. The criteria focus on proper usage of the SwipeCell component, its slots, props, and event handling mechanisms.",
"type": "weighted_checklist",
"checklist": [
{
"name": "SwipeCell Component Usage",
"description": "Uses the SwipeCell component from Vant to create swipeable list items. Each task item should be wrapped in a SwipeCell component.",
"max_score": 25
},
{
"name": "Left Slot Implementation",
"description": "Implements the left slot (#left template) to display action buttons that appear when swiping right. Should include the 'Complete' button.",
"max_score": 20
},
{
"name": "Right Slot Implementation",
"description": "Implements the right slot (#right template) to display action buttons that appear when swiping left. Should include 'Delete' and 'Archive' buttons.",
"max_score": 20
},
{
"name": "Action Button Handlers",
"description": "Implements click handlers for all action buttons (delete, archive, complete) that properly update the task list state. Delete removes the task, archive updates status, and complete toggles status.",
"max_score": 20
},
{
"name": "SwipeCell Props Configuration",
"description": "Appropriately configures SwipeCell props such as name (for identifying cells), leftWidth/rightWidth (for action panel sizing), or other relevant props to enhance functionality.",
"max_score": 10
},
{
"name": "Button Styling",
"description": "Applies appropriate styling to action buttons to distinguish their purposes (e.g., red for delete, yellow for archive, green for complete as specified in requirements).",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vantdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10