Vue-swipe-actions NPM

vue-swipe-actions

iOS style swipe actions for Vue.js, Live Demo (Source)

Installation

npm install --save vue-swipe-actions

import { SwipeList, SwipeOut } from 'vue-swipe-actions';

export default {
  components: {
    SwipeOut,
    SwipeList
  }
};

Basic Usage

Import Styles

import 'vue-swipe-actions/dist/vue-swipe-actions.css';

SwipeList

SwipeList component is just a helper for listing multiple SwipeOuts.

Props

Prop	Data Type	Required	Default	Description
`items`	Array	*		An array with your data
`item-key`	String		id	Your key for :key when list is v-for-ed, if not found array index will used
`disabled`	Boolean		false	if true items will be disabled, and text selection will be possible (on desktop). adds class `swipeout--disabled`
`item-disabled`	Function		`js () => false`	A function that receives the item as parameter and returns true case disabled or false if not
`threshold`	Number		45	With that property you can fine tune when actions are considered open
`revealed`	Object			An object representing the revealed status of the items, key is the index and the value is either `left` or `right`, use it with the `.sync` modifier

Events

Event	Payload	Description
`swipeout:click`	item	Emitted on single click/tap on the item
`active`	Boolean	Emitted when the user is opening/closing the any of the actions

Methods

Method	Params	Description
`revealRight`	index (number)	Reveals right actions on given index
`revealLeft`	index (number)	Reveals left actions on given index
`closeActions`	index (number)?	Closes actions on given index, or all if no index given
`isRevealed`	index (number)	Returns the revealed status on a given index, either `false` for closed, or `left` or `right`

SwipeOut

SwipeOut is the main component, representing a single item with it's actions.

Props

Prop	Data Type	Required	Default	Description
`disabled`	Boolean		false	if true items will be disabled, and text selection will be possible (on desktop). adds class `swipeout--disabled`
`threshold`	Number		45	With that property you can fine tune when actions are considered open

Events

Event	Payload	Description
`active`	Boolean	Emitted when the user is opening/closing the any of the actions

<swipe-list
	ref="list"
	class="card"
	:disabled="!enabled"
	:items="mockSwipeList"
	item-key="id"
	@swipeout:click="itemClick"
>
	<template v-slot="{ item, index, revealLeft, revealRight, close }">
		<!-- item is the corresponding object from the array -->
		<!-- index is clearly the index -->
		<!-- revealLeft is method which toggles the left side -->
		<!-- revealRight is method which toggles the right side -->
		<!-- close is method which closes an opened side -->
		<div class="card-content">
			<!-- style content how ever you like -->
			<h2>{{ item.title }}</h2>
			<p>{{ item.description }}</p>
			<span>{{ index }}</span>
		</div>
	</template>
	<!-- left swipe side template and v-slot:left="{ item }" is the item clearly -->
	<!-- remove if you dont wanna have left swipe side  -->
	<template v-slot:left="{ item, close }">
		<div class="swipeout-action red" title="remove" @click="remove(item)">
			<!-- place icon here or what ever you want -->
			<i class="fa fa-trash"></i>
		</div>
		<div class="swipeout-action purple" @click="close">
			<!-- place icon here or what ever you want -->
			<i class="fa fa-close"></i>
		</div>
	</template>
	<!-- right swipe side template and v-slot:right"{ item }" is the item clearly -->
	<!-- remove if you dont wanna have right swipe side  -->
	<template v-slot:right="{ item }">
		<div class="swipeout-action blue">
			<!-- place icon here or what ever you want -->
			<i class="fa fa-heart"></i>
		</div>
		<div class="swipeout-action green">
			<!-- place icon here or what ever you want -->
			<i class="fa fa-heart"></i>
		</div>
	</template>
	<template v-slot:empty>
		<div>
			<!-- change mockSwipeList to an empty array to see this slot in action  -->
			list is empty ( filtered or just empty )
		</div>
	</template>
</swipe-list>

export default {
  components: {
    SwipeOut,
    SwipeList
  },
  data() {
    return {
      enabled: true,
      mockSwipeList: [
        {
          id: 0,
          title: "Some title",
          description: "some description"
        },
        {
          id: 1,
          title: "Some title",
          description: "some description"
        },
        {
          id: 2,
          title: "Some title",
          description: "some description"
        }
      ]
    };
  },
  methods: {
    revealFirstRight() {
      this.$refs.list.revealRight(0);
    },
    revealFirstLeft() {
      this.$refs.list.revealLeft(0);
    },
    closeFirst() {
      this.$refs.list.closeActions(0);
    },
    closeAll() {
      this.$refs.list.closeActions();
    },
    remove(item) {
      this.mockSwipeList = this.mockSwipeList.filter(i => i !== item);
      // console.log(e, 'remove');
    },
    itemClick(e) {
      console.log(e, "item click");
	},
    fbClick(e) {
      console.log(e, "First Button Click");
    },
    sbClick(e) {
      console.log(e, "Second Button Click");
	},
  },
}