flowbite-vue

flowbite-vue copied to clipboard

This is a fix for #238

When accordion panels are rendered dynamically the order calculations won't work properly because the actual DOM render and FwbAccordionPanel.vue onMounted function order are reversed. So the last rendered element has the order 0. This happens when the key attribute is unique each time. For this reason, I have updated the order calculation to check the actual DOM index. I have explained this in detail below with screenshots.

I have added onUnmounted to delete panel references that are removed.

In the composable files, the panel count calculation is wrong because it checks the keys of the 'panel' object. It always has 3 props: id, isVisible, and order. So in the calculation, the panel count is always 3. I have updated this to check the keys of the 'panels' object.

Lastly, I have updated some classes to match flush accordion styles.

---

Accordion Panel Render Issue

To test this, I have added an input as the number of accordion panels. And made sure it's a full render each time, by updating the id. I have also passed the title as a prop to log the title.

Then I logged the calculated count and title (FwbAccordionPanel.vue)

Here is the result

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	0e9c9ac3c23d96d42635d334a3de3fd1fc591c98
🔍 Latest deploy log	https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/65ac35d4e237780008799551
😎 Deploy Preview	https://deploy-preview-262--sensational-seahorse-8635f8.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.