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.

For more information, look at Swing's documentation

Events

Name	Description
throwout	When card has been thrown out of the stack.
throwoutend	When card has been thrown out of the stack and the animation has ended.
throwoutdown	Shorthand for throwout event in the VueSwing.Direction.DOWN direction.
throwoutleft	Shorthand for throwout event in the VueSwing.Direction.LEFT direction.
throwoutright	Shorthand for throwout event in the VueSwing.Direction.RIGHT direction.
throwoutup	Shorthand for throwout event in the VueSwing.Direction.UP direction.
throwin	When card has been thrown into the stack.
throwinend	When card has been thrown into the stack and the animation has ended.
dragstart	Hammer panstart.
dragmove	Hammer panmove.
dragend	Hammer panend.
destroyCard	When card.destroy calls stack.destroyCard.

For more information, look at Swing's documentation