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%

task.mdevals/scenario-10/

Mobile Quick Access Tool

Build a mobile quick access tool that provides a floating, draggable button for easy navigation to common actions.

Requirements

Floating Action Button

Create a floating button that:

  • Remains visible and accessible on the screen at all times
  • Can be freely dragged around the screen by the user
  • Automatically snaps to the nearest screen edge (left or right) when released

Drag Constraints

The floating button should:

  • Be draggable along both horizontal and vertical axes
  • Automatically attach magnetically to the left or right edge after being released
  • Maintain a minimum distance of 20 pixels from screen edges to ensure visibility

Initial Positioning

Position the button:

  • At coordinates (300, 100) when first rendered
  • Using an icon or visual indicator to show it's interactive

Test Cases

  • When the user drags the floating button and releases it, it snaps to the nearest screen edge (left or right) @test
  • The floating button is draggable along both X and Y axes @test
  • The floating button maintains at least 20 pixels gap from screen edges @test
  • The floating button starts at position x: 300, y: 100 @test

Implementation

@generates

API

// Vue 3 Single File Component
// Export a component that renders a draggable floating button
// The component should use appropriate mobile UI library components

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including draggable floating elements.

@satisfied-by

Version

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