CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-vant

tessl install tessl/npm-vant@4.9.0

Mobile UI Components library built on Vue 3 with 100+ components

Agent Success

Agent success rate when using this tile

74%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.07x

Baseline

Agent success rate without this tile

69%

rubric.jsonevals/scenario-8/

{
  "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
    }
  ]
}

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vant@4.9.x
tile.json