https://github.com/goweiwen/vue-swing

Vue.js wrapper for Swing
https://github.com/goweiwen/vue-swing

swing swipe vue vuejs

Last synced: 2 months ago
JSON representation

Vue.js wrapper for Swing

• Host: GitHub
• URL: https://github.com/goweiwen/vue-swing
• Owner: goweiwen
• License: mit
• Created: 2017-10-12T16:32:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T18:04:56.000Z (about 2 years ago)
• Last Synced: 2024-04-14T04:25:17.961Z (9 months ago)
• Topics: swing, swipe, vue, vuejs
• Language: Vue
• Size: 871 KB
• Stars: 206
• Watchers: 8
• Forks: 34
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VueSwing

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A Vue.js wrapper for [Swing](https://github.com/gajus/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

```sh

npm install --save vue-swing

```

## Usage

```js

import VueSwing from 'vue-swing'

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

```

```html

  
Throw me!


```

## 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](https://github.com/gajus/swing#configuration)

## 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](http://hammerjs.github.io/recognizer-pan/).           |

| `dragmove`      | Hammer [panmove](http://hammerjs.github.io/recognizer-pan/).            |

| `dragend`       | Hammer [panend](http://hammerjs.github.io/recognizer-pan/).             |

| `destroyCard`   | When card.destroy calls stack.destroyCard.                              |

For more information, look at [Swing's documentation](https://github.com/gajus/swing#events)