fix: convert useComputedClass to defineClass

[mlmoravek]

Fixes #709

Currently, each time a computed is triggered, the useComputedClass composable is triggered for each component class. This causes the getCurrentInstance() method to be called during the computed hook.

I created a new composable called defineClasses which will replace the computed component classes and return a reactive ref value. This way the getCurrentInstance() method got only triggered once synchronous during setup. The class is calculated synchronous during setup too and every time the suffix is changed by a watcher. Another watcher is used to change the apply state of the class if given. However, this doesn't require the class to be recalculated.

This also improves the update time of a computed class, because before, whenever any property or ref value was used to compute the class got updated, the computation for each class calculation used in the computed const got triggered. Now, whenever a property changes, only the relevant class calculation is triggered.

For each component, the "Computed Component Classes" section must be refactored to use the new feature. No component logic or template should be touched.

Proposed Changes

• refactor computed useComputedClass to defineClasses
• Update docs to use Vue 3.4 and latest vitepress version
• Extend basic button docs example

[netlify]

✅ Deploy Preview for oruga-documentation-preview ready!

Name	Link
🔨 Latest commit	f41794a
🔍 Latest deploy log	https://app.netlify.com/sites/oruga-documentation-preview/deploys/65bbe85cbdd71a0008156669
😎 Deploy Preview	https://deploy-preview-725--oruga-documentation-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: 20 lines in your changes are missing coverage. Please review.

Comparison is base (68e4dee) 52.12% compared to head (f41794a) 54.62%.

Files	Patch %	Lines
...ckages/oruga-next/src/composables/defineClasses.ts	77.52%	20 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #725      +/-   ##
===========================================
+ Coverage    52.12%   54.62%   +2.49%     
===========================================
  Files           32       32              
  Lines         1385     1461      +76     
  Branches       512      519       +7     
===========================================
+ Hits           722      798      +76     
  Misses         663      663              

Flag	Coverage Δ
oruga-next	54.62% <88.88%> (+2.49%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[darioillusorium]

Hello! Thank you for fixing this error. I wanted to ask if there is a temporary way to ignore this error until you finish fixing it. I am using a dropdown that works perfectly for my use but when changing the size of the window this error pops up on the screen. I just close it and everything and its ok. Is there a way to prevent the error from poping up on the screen temporarily?

Thanks you very much! :)

[mlmoravek]

@darioillusorium Don't use Vue 3.4, use Vue 3.3.x. However, you can also use Oruga 0.7, which is based on the Options API and could work with the latest Vue version. As of 0.8, we have refactored the components to the Composition API, which contains this bug with Vue 3.4.
If you have any other problems, please open a separate issue.

[l00k]

When next release with this fix?

[mlmoravek]

@l00k
I want to finish my a11y enhancement first (#723) - still working on it.
Then I will see which issues I can fix quickly.
And then I will do the new release 🙂

I don't want to make any date prediction, but I will try to do it this month - be aware that Oruga is a side project and nobody is working full time on it!

[l00k]

I just thought fix (as independent thing) could be pushed without waiting for other bugfixes or improves.

My project which uses oruga is also side thing :) so.. yea