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

[jacquescrocker]

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)

[nanov]

I have an idea how this could be achieved with a sync property based on item-key property as identifier.

Need to verify a few tests how this would work in situations where items list is updated/changed ( pagination for example... ) and I will release an update.

[jacquescrocker]

Very cool, thanks

Here's how I ended up implementing it: https://gist.github.com/jacquescrocker/95e25ad2b3dc98106e24f777842b633e

[nanov]

I've just released a new version which includes the revealed property on the SwipeOut and SwipeList components.

Both can be used in conjugation with the .sync modifier ( see demo ) to achieve what you need.

Additionally, a isRevealed(index) method is added to the SwipeList comonent which returns false ( for closed ), left or right.

Please let me know if it works for you.

Once those are tested, some help with documenting the new methods, events and properties would be more than appreciated and PRs are more than welcome!

[drewrawitz]

@nanov Is there a way to have the isRevealed method, or something similar, for the SwipeOut component? In addition to swiping to open the menu, I have an icon that should toggle the action menu when clicked.

Right now I have it opening via: @click="revealRight" but I need a way of closing it. Ideally it would be something like this:

@click="isRevealed ? close : revealRight"

This looks to be possible when using the SwipeList component, but I'm having a hard time getting it to work with the SwipeOut component.

Any help is appreciated. Thanks!

[nanov]

@drewrawitz I've just released beta.13, which, among other stuff, adds the revealed property to the scoped slot.

The revealed property is either falsy ( false/empty-string ) or has left or right values.

This means you could implement something like this :

<template v-slot="{ item, index, revealLeft, revealRight, close, revealed }">
    <div ref="content" @click.native="() => revealed ? close() : revealRight()">
        <h2>{{ item.title }}</h2>
        <p>{{ revealed ? `revealed on the ${revealed} side` : `closed` }}</p>
        <p><b>id:</b> {{ item.id }} <b>description:</b> {{ item.description }}</p>
        <b>index:</b><span> {{ index }}</span>
    </div>
</template>

[drewrawitz]

Hey @nanov. For some reason, I can't get any of the new stuff you posted to work. I upgraded my package to beta.13 but index and revealed are just blank.

I was able to work around the issue for now by doing something like this:

@click="menuClick(index)"

and then in my methods:

    menuClick(index) {
      if (this.$refs.swipeItem) {
        const revealed = this.$refs.swipeItem[index].innerRevealed;

        if (revealed) {
          this.$refs.swipeItem[index].close();
        } else {
          this.$refs.swipeItem[index].revealRight(0);
        }
      }
    },

It works great, just seems a little hacky. Having that revealed variable accessible in the template would make this much cleaner.

[nanov]

@drewrawitz Could you post a sample repro, what you do will indeed work, but is, as you said hacky, and may not wok in the future.

revealed will be blank if the item is not revealed.

How do you get the index for the menu click, out of the slot scope right ?

[nanov]

The demo has been updated to demonstrate revealed.

I hope it helps understanding the usage...

[drewrawitz]

Hey @nanov, it looks like I never had the updated version which is why the revealed property was still blank for me.

I just tried it again and removed my package-lock.json file and the node_modules folder, and re-installed the latest version and everything seems to be working now! I could have sworn I had done those steps originally when I posted my last comment, but anyway, it's working now!

Thanks a lot!