ecollect/vue-swipe-actions

iOS style swipe actions

vue-swipe-actions's Issues

Disable list scrolling while swiping left and right?

is that possible?

Webpack Spread Operator Compatibility

Hi,

I'm having trouble using this module for my project.

Dependencies
Package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config webpack.conf.js",
},
"dependencies": {
"android-versions": "^1.4.0",
"axios": "^0.18.0",
"cordova-android": "^7.1.4",
"cordova-ios": "^5.0.1",
"cordova-plugin-whitelist": "^1.3.3",
"node-sass": "^4.12.0",
"onsenui": "^2.9.1",
"properties-parser": "^0.3.1",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.5.0",
"vue-ctk-date-time-picker": "^2.0.6",
"vue-onsenui": "^2.5.0",
"vue-pull-to": "^0.1.8",
"vue-router": "^3.0.6",
"vue-swipe-actions": "^2.0.0-beta.18",
"vuelidate": "^0.7.4",
"vuesax": "^3.9.0",
"vuex": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.3.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.1.2",
"vue-template-compiler": "^2.5.0",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},

.babelrc

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": [
"> 1%",
"iOS >= 8.0",
"Android >= 4.4",
"Chrome >= 30",
"Safari >= 9",
"Firefox ESR",
"Opera 12.1"
]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"]
}

ERROR

Module parse failed: Unexpected token (99:4)
You may need an appropriate loader to handle this file type.
| });
| this._emitRevealed({
| ...this.innerRevealed,
| [index]: event.side,
| });

@ ./node_modules/vue-swipe-actions/src/components/index.js 2:0-36
@ ./node_modules/vue-swipe-actions/src/index.esm.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue

Thanks in advance...

speeling mistake: disabled

vue-swipe-actions/src/components/SwipeOut.vue

Line 140 in 1a4d362

if (this.disbaled)

Can I 'disabled' each item individually?

I want features that each item is disabled individually.

Currently, if I pass 'disabled' props, all items will be disabled.

If you don't mind, can I send "PR" what I think?

v-slot:empty does not work?

The empty slot does not seem to work? I use the code below and the items array is empty [] yet the list is just empty instead of showing the message?

    <template v-slot:empty>
      <div>
        You should see this when there are no items in array?
      </div>
    </template>

Simulate swipes

Is it possible to simulate swipes? I need to show how a functionality works to users of my app first time when they go to it. Any suggestions?

Could I use swipeout on the element rather than use swipelist for cycling on the list

Do you have any animation options?

I am using your library with great appreciation.
but I needed some customize to use it.
I am using options such as 'animationDuration' and 'animationTimingFunction'.
Do you have plans to add options for animation?

swipeout:click on the SwipeOut component?

Hi there!

I see that you can use swipeout:click on the main SwipeList component, but is there a way we can also use that when using the SwipeOut component?

If I put a regular @click event on my main div inside the template, then the click event gets triggered even when I'm swiping left / right. This is problematic because I'm going to be opening up a modal on click, and right now that modal keeps popping up when I'm just trying to swipe right to view my actions menu.

Let me know if you have any ideas. Thanks!

Not Trigger 'Closed Event'

#26
You fixed that is. thank you. :)

But. If there is no list on the left side.
Swipe from left to right will not trigger the 'closed' event.
(like right swipe motion)

Moving a short distance will trigger the 'closed' event

Predefined action on large swipe

Hello,
very nice component!
There is a method to choose a predefined action on large swipe movement? For example I have two actions on the right (edit and delete). When I swipe to te left the two actions are reveled, but if I continue to swipe to the left, the predefined action (delete) will expands and the edit action will disappear. When the finger will released, the remove event will fired.
Thank you!

I want to use it without "@vue/app"

I have seen the following error message:

Error: Couldn't find preset "@vue/app" relative to directory ...

I do not want to use "@vue/app" in presets, is there any other way?

Is Readme or Documentation up to date?

I found that API provided through browsing the code is not similar with the explanation on the readme. It seems readme file or the documentation is lacking of some information. For example events revealed in swipeList component. it is not mentioned in the readme.

I think the documentation need to be updated

SwipeOut -- bug on `revealLeft`

https://github.com/eCollect/vue-swipe-actions/blob/master/src/components/SwipeOut.js#L43

i think it should be !this.$refs.left instead of !this.$refs.right

Net result: revealLeft does not function if there is no right slot

release `2.0.0-beta.20` as regular `2.0.0`

Hey! last release since a few years now! I think it's ok to just release the beta as the regular 2.0.0!

Since it's what everyone's been using for the past couple of years. : )

Transition group

Is there any way to wrap the swipe-list in a transition group? It would be really useful when doing deletes (for animating the row removal) or when dynamically inserting new rows.

Duplicate mouse event handling Issue

I get the following error:

{"error":{"name":"TypeError","message":"Cannot read property 'abort' of undefined","stack":"TypeError: Cannot read property 'abort' of undefined at HTMLDivElement.move

{"error":{"name":"TypeError","message":"Cannot read property 'mouse' of undefined","stack":"TypeError: Cannot read property 'mouse' of undefined at HTMLDivElement.end

I'm using a different mouse event than 'vue-swipe-actions'.
but another mouse event has not '.event' property.
property validation seems to be needed.

Swipeout:click broken

Look like @SwipeOut:click is broken too. Do nothing in fact. I was able to reproduce in our internal project. The code look like this:

<swipe-list
     ref="list"
     class="card"
     :items="notifications"
     item-key="id"
     @swipeout:click="notify"
>
...
</swipe-list>

notify: function(e) {
  this.bodyMessage = e.bodyMessage
  this.titleMessage = e.titleMessage
}

How to use swipe-out component?

Hey there! there is good doc for swipe-list component.
But is it possible to use swipe-out component out of list just for along item?

swipe-list does not refresh properly when items array changes

Hi,
thanks' for this plugin... I think is very useful.
I have a problem If I have to change a button visibility.
I must show a list of notifications, and the slide button have to help user to mark to read or delete a notification. The icon for "Marking to read" is visible if and only if flag called "FRead" is a "N" (I apply v-if ="item.FRead === ''N" on the icon div ).
If a notification is not read, i have two icons: one to set read a notification and another to delete it. If I set notification to "READ", item flag is changed to "Y". Button is hidden but the space remains.

Before:

After:

Compared with the first notification (the rightest one)

How can I to refresh the width of buttons' content div, please?
Thanks' in advance for your reply

Compatibility with Vue.Draggable?

Hey there,

I'm trying to get this to work with Vue.Draggable but the problem I'm running into is the markup is too deeply nested. Here's what I have:

  <swipe-list ref="list" class="swipe-wrapper" :items="data" item-key="id">
    <template v-slot="{ item, index, revealLeft, revealRight, close }">
      <draggable :list="item[index]" group="meal" @change="log">
        <div>Content</div>
      </draggable>
    </template>
    <template v-slot:right="{ item }">
      Swipe actions
    </template>
  </swipe-list>

What I need to do is attach <draggable /> to the parent swipeout swipeout-list-item elements. Is there any way I can hook into that parent div?

Thanks!

spelling mistake: doubleclick

vue-swipe-actions/src/components/SwipeOut.vue

Line 279 in 1a4d362

this.$emit('swipeout:dobuleclick', e);

[FEATURE REQUEST] Virtual scroll for swipeList

It could be nice if we have a option to virtual scrolling a swipeList, at least limit the number of visible items per list.

Feature Request: Add `disabled` to the SwipeOut slot scope

It would be great if we could access the disabled state in the slot scope:

<swipe-out class="swipe-row" :disabled="isDisabled(exercise)">
  <template v-slot="{ revealed, revealLeft, revealRight, disabled, close }">
    Disabled status: {{ disabled }}
  </template>
</swipe-out>

I think it's a simple one line fix in the SwipeOut.js component. Happy to open up a PR if that's easier!

Ability to close all on SwipeOut component?

I see that there's a method for the SwipeList component (closeActions) but I can't seem to use that when using the SwipeOut component.

I need to programmatically close any open reveals. Is this currently possible?

Thanks!

Vue3 support?

Hi,
Are you planning to support Vue3 ?
Right now plugin seems to not work with vue3 :(

Doesn't render items content

I do everything as in the example, the left and right slots render perfectly, but the contents of the element do not render.

I expected the specified template with data

Prevent Event trigger on empty list

A lot of your support is helping me much. Really thank you again. 🤩
Can I ask you one more question?

I don't have a swap list on the left.
So I don't render left swipe list. (Using v-if)

However, the 'leftRevealed' event is still being triggered. (Your demo too)
How can I prevent event triggers in that direction if I do not have a list? 🤔

Uglify failed

When I did uglify my component, I got Unexpected token error. This was caused by vue-cli, please simply update vue-cli and republish this package to npm again.

Thanks,

SyntaxError: Unexpected token: name (i) [./~/vue-swipe-actions/dist/vue-swipe-actions.common.js:705,0]

The issue file is here: vue-swipe-actions/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js

Before

if (typeof window !== 'undefined') {
  let i
  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js$/))) {
    __webpack_public_path__ = i[1] // eslint-disable-line
  }
}

Now

if (typeof window !== 'undefined') {
  var i
  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js$/))) {
    __webpack_public_path__ = i[1] // eslint-disable-line
  }
}

Allow to specify class names for the items instead of having the static class swipeout-list-item

Allow to specify class names for the items instead of having the static class swipeout-list-item

Button shows after delete

Thank you for such a great component.
I have a slight issue, and I was not able to see anything regarding this in the docs.
When I swipe to reveal the actions, one of my actions is to delete that item from the array. When I delete the item, the next item below now already has the buttons/actions revealed for it, without swiping. I would like only for the delete button to be shown when an item is swiped on.
Thank you for the help.

why border-left matters?

Hello, thank you for this great vue component.
I met an issue today. I'd like to move the list border in your example from on swipe-list to swipe-list-item and the swipe does not work any longer, the actions to be revealed always bounced back on mouse release.

This is the css style I used.

.swipeout-list-item {
  flex: 1;
  margin: 0.5em;
  border: 1px solid lightgray; // I added some border here
  border-radius: 10px;
}
.card {
  width: 100%;
  background-color: white;
  // removed the border here.
}
.card-content {
  padding: 1rem;
}

Any clue why it is not working and how to fix it. Appreciate your help. Thank you.

SwipeList -- Query to see which items are open vs closed

At runtime, I'd like to be able to see which SwipeOut items are opened vs closed (maybe via index). Really useful information to allow for some basic operation (i.e. toggling items on & off via click)

inverse swipe on delete row

Is it possible to put a swipe on all the line when deleting it?