A swipeable cards interface with vue.js

VueSwing

A Vue.js wrapper for Swing. Swing is a swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.

Installing

npm install --save vue-swing

Usage

import VueSwing from 'vue-swing'

Vue.component('vue-swing', VueSwing)

<vue-swing
  @throwout="throwout"
  @throwin="throwin"
  :config="config"
>
  <div class="box">Throw me!</div>
</vue-swing>

Properties

VueSwing takes in one config Object, which can consist of any of these keys:

Name	Description	Default
isThrowOut	Invoked in the event of dragend. Determines if element is being thrown out of the stack.	Element is considered to be thrown out when throwOutConfidence is equal to 1.
allowedDirections	Array of directions in which cards can be thrown out.	[VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP].
throwOutConfidence	Invoked in the event of dragmove. Returns a value between 0 and 1 indicating the completeness of the throw out condition.	Ration of the absolute distance from the original card position and element width.
throwOutDistance	Invoked when card is added to the stack. The card is thrown to this offset from the stack.	The value is a random number between minThrowOutDistance and maxThrowOutDistance.
minThrowOutDistance	In effect when throwOutDistance is not overwritten.	450.
maxThrowOutDistance	In effect when throwOutDistance is not overwritten.	500.
rotation	Invoked in the event of dragmove. Determine the rotation of the element.	Rotation is equal to the proportion of horizontal and vertical offset times the maximumRotation constant.
maxRotation	In effect when rotation is not overwritten.	20.
transform	Invoked in the event of dragmove and every time the physics solver is triggered.	Uses CSS transform to translate element position and rotation.

GitHub