Fix legendHeight setter in mount

[ChaDonSom]

When VueEllipseProgress mounts, it might have legend disabled, in which case
the legendHeight property should be set to 0 rather than trying to access
the nonexistent legend template ref.

Thanks for your contribution!

By contributing to this project you agree to the contribution rules.

Quick checklist for code changes:

• Created a new branch based on dev
• All test and checks passed
• No linting errors
• New tests added (if necessary)
• Docs updated (if necessary)

---

you can delete the above text, after all checks have passed

---

[setaman]

@ChaDonSom
that's a good caught, thank you! I will take a closer look at the PR soon

[setaman]

@ChaDonSom hey, indeed a very good caught.

I've also found out that it fails to set the height correctly if the hide-legend is initially true. Sadly your suggested change doesn't fix the actual issue, i still get the error:

TypeError: Cannot read properties of undefined (reading 'clientHeight')

That happens for example if data is used. But it isn't a problem at all and can be easily fixed. I would really like you to add the following helper method just right after the computed and use this method in the watcher and in mounted to consistently and safely update the height:

methods: {
    updateLegendHeight() {
      this.$nextTick(() => {
        this.legendHeight = this.hideLegend ? 0 : this.$refs.legend?.clientHeight ?? 0;
      });
    },
  },

[ChaDonSom]

Ah, so sorry, I should've caught that if I had actually run the tests and/or pulled the project locally and manually tested it. I shouldn't have assumed it was that simple of a fix! 😵

I've implemented the suggested method and used it in mounted and in the hideLegend watcher. Hopefully this will work.

Thank you for your patience and understanding!

[setaman]

This looks solid. Many thanks for your contribution! It will be released soon.

The tests fail because of the ?? operator. I need to tweak the config.