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