Colors shares across different component

[samuveth]

I can't get my progress bars to have unique gradients, it's always the first component that loads that dictates the colors of all of my other progress bars. Any ideas on how I can have unique colors across different instances of ve-progress?

This is how I am specifying the colors:

ellipseGradient: {
        radial: false,
        colors: [
          {
            color: this.type === "call" ? "#00FF97" : "#FF009B",
            offset: "0",
            opacity: "1"
          },
          {
            color: this.type === "call" ? "#00FFC8" : "#FF48C4",
            offset: "100",
            opacity: "1"
          }
        ]
  },
ellipseEmpty: {
        colors: [
          {
            color: this.type === "call" ? "#00FF97" : "#FF009B",
            opacity: "0.35"
          }
        ]
  }

[setaman]

@samuveth Hi, thanks for the report. I see, there are some problems with the gradients in general in 2.0.0-beta.0. Can you please share some details on how you use the components?

[samuveth]

@setaman Hi, thank for your reply. Here is a sandbox https://codesandbox.io/s/upbeat-feather-j0m5l

If you swap the order in which the components load

<SecondColor />
<HelloWorld />

to

<HelloWorld />
<SecondColor />

then the color of the first component is applied to both.

[setaman]

@samuveth thanks for the sandbox, i'm already on it

[setaman]

@samuveth Hey, v2.0.0-beta.1 with the fix is alive. Please check if everything is fine here https://codesandbox.io/s/friendly-satoshi-bkjxg?file=/src/App.vue.

Also note that you have some warnings in the console concerning the correct use of the properties. Especially for the gradients the offset has to be defined.