Can staggerConfig props be reactive ?

[Grafikart]

Hi,

I'm getting a problem and I was wondering if you think it can be solved without too much work.

I have this computed property

  computed: {
    staggerConfig () {
      return {
        listItem: {
          reverse: this.active !== 0,
          speed: 1
        }
      }
    }
  }

used this way

  <Flipper
          :flipKey="active"
          :staggerConfig="staggerConfig"
    >
   // ....
</Flipper>

Unfortunately, the props staggerConfig only use the first value of staggerConfig and is never reversed. If we want to change the behaviour we have to mutate the object.

    onClick (item) {
      this.active = this.active === item ? 0 : item
      this.staggerConfig.listItem.reverse = this.active !== 0
    },

My fix would be to watch staggerConfig here https://github.com/mattrothenberg/vue-flip-toolkit/blob/master/src/Flipper.vue#L82 and update Flipper instance accordingly. Unfortunately i'm not familiar enough with Flipper to handle a PR :(

[Grafikart]

You can see the problem on this story : https://keen-davinci-e49eba.netlify.com/?path=/story/examples--accordion , the stagger is never reversed

[mattrothenberg]

Hey, thanks for raising this issue @Grafikart. I've done a little bit of investigation, but don't have any immediate solutions.

1. Good catch re: staggerConfig not being reactive. We should be able to fix this like you said, by adding a watch statement to Flipper and setting the new stagger config value on this.flipInstance.

staggerConfig(oldConfig, newConfig) {
  if (oldConfig !== newConfig) {
    console.log("staggerConfig change");
    this.flipInstance.staggerConfig = newConfig;
  }
}

That said, I did try that change and nothing seemed to update, so I think there might be something else going on.

I'll dig into this today. In the meantime, feel free to clone this repo, yarn && yarn storybook – you can modify the Flipper.vue and Flipped.vue source while you tinker with the stories, so there's a really nice feedback loop.

[mattrothenberg]

@Grafikart Should be resolved by https://github.com/mattrothenberg/vue-flip-toolkit/pull/18.

Published in 1.6.0. Let me know!

[Grafikart]

Sorry for my lack of feedback :(

It works perfectly now. Thanks !

[mattrothenberg]

@Grafikart pas de soucis