List Item Sliding with Actions

[xereda]

Hi,

Sorry to send the question here, but it is because the forum is very unstable.

A while ago, I found a component type the "sliding item" of the Ionic Framework. I can not find the component on the Quasar website. Can you pass me the url where I find such a component in the Quasar Framework?

The component you mention is this one: http://ionicframework.com/docs/v2/api/components/item/ItemSliding/

Thank you.

[rstoenescu]

Currently not implemented. But since you brought this up, adding it to the todo list.

PS: I've just installed the search plugin that's why it seems unstable at the moment. Should work ok now.

[xereda]

Tks!

You have a deadline?

[rstoenescu]

Currently no, but will post it here as soon as it's available.

[DivyaGupta261]

Would love to have this component. When will this be available ?

[rstoenescu]

Quasar v0.14 - a month max probably.

[rkedward]

I would also love to have this feature.

[xereda]

@rstoenescu This was moved to 0.15?

[rstoenescu]

By mistake. It remains for v0.14.

[yoricktran]

Where is this? Can't find it and could really use it!

[rstoenescu]

The milestone for this is v1.0, which is next after v0.15.

[xereda]

Does it leave in 2018?

[mesqueeb]

@xereda @rstoenescu

I made a simple custom implementation for this which works pretty well:

Usage:

Use it like so:

    <options-reveal
      v-for="(item, key) in items"
      :key="key"
      :options="[{
        name: 'Delete',
        action () { return dispatch('deleteItem', key) },
        style: 'background-color: red;',
      }]"
    >
      <!-- your list item -->
    </options-reveal>

Explanation:

So you have your options-reveal component which does all the magic. You just need to pass an array of options you want to be able to reveal underneath the list item.
Each option has a name, an action and extra styling in case you want to style the button's look.

Example:

Vue component:

<template>
<div
  class="options-reveal"
  v-touch-swipe.left.right="handler"
>
  <div
    :style="style"
    class="_wrapper"
  >
    <slot />
  </div>
  <div class="_options">
    <button
      v-for="option in options"
      @click="option.action()"
      :style="option.style"
    >{{ option.name }}</button>
  </div>
</div>
</template>

<script>
import { dom } from 'quasar'
const { cssTransform } = dom

export default {
  props: ['options'],
  data () { return { opened: false } },
  computed:
  {
    style () {
      if (this.opened) {
        const optionsAmount = this.options.length * 100
        const props = cssTransform(`translateX(-${optionsAmount}px)`)
        return Object.keys(props).reduce((carry, key) => {
          return `${carry}${key}: ${props[key]}; `
        }, '')
      }
      return ''
    },
  },
  methods:
  {
    handler (obj) {
      if (obj.direction === 'right') this.opened = false
      if (obj.direction === 'left') this.opened = true
    },
  }
}
</script>

<style lang="stylus" scoped>
.options-reveal
  position relative
  ._wrapper
    position relative
    z-index 2
    transition all 100ms ease-out
  ._options
    position absolute
    z-index 1
    top 0
    right 0
    left 0
    bottom 0
    display flex
    justify-content flex-end
    > button
      margin 0
      padding 0
      border none
      border-left thin solid white
      width 100px
      height 100%
      background-color gray
</style>

[mesqueeb]

Needs some improvements like not setting each option to take 100px width, but I'm sure this will be a good base.

Edit: sorry I had one small bug which I fixed in the code above:

    style () {
      if (this.opened) {
        const optionsAmount = this.options.length * 100
        const props = cssTransform(`translateX(-${optionsAmount}px)`)

forgot the * 100 for 100 pixels

[sebmor]

Would love to see this component supported by Quasar

Similar examples from other libraries
https://framework7.io/vue/swipeout.html
https://didi.github.io/cube-ui/#/en-US/docs/swipe
http://elemefe.github.io/mint-ui/#/cell-swipe

[profalves]

Already in version 0.17, do we really have the item-sliding feature in quasar?

[mesqueeb]

I think a component like this will be available soon. I heard rumours of this being worked on.

[profalves]

@mesqueeb I can't implement the component you showed by example, can I use v-touch in quasar? Or was the example not used in the quasar?

[mesqueeb]

@profalves i use it fine with Quasar.
You're talking about:
v-touch-swipe.left.right="handler"

v-touch-swipe is actually a Quasar directive. Don't forget to add that to your directives in the quasar.conf.

See documentation here:
https://quasar-framework.org/components/touch-swipe.html

[rstoenescu]

Done for v1.0 -- QSlideItem

[wwwizzarrdry]

This issue was closed, stating it's implementation in v.1.0, yet I don't see any mention of this in the API documentation.

Are you able to add multiple action:options for each slide-item direction, or was this added and then later removed from Quasar? I can make my own component to do so, but don't want to reinvent the wheel if it's already been done.

Eg. Slide left reveals multiple actions

<<< Swipe left          ⬇️         ⬇️
-------------------- ---------- -----------
 <--- Slide Item    | Action 1 | Action 2 |
-------------------- ---------- -----------

[Minitosh]

I have the same need as @wwwizzarrdry :) is this feature planned ?