Rewrite panel transition code

[wxwxwxwx9]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

This PR is meant to rewrite some of the panel transition code and lay the groundwork to implement a cleaner version of the panel preview feature (related to #1425).

Overview of changes:
Removed the usage of v-show for the panel refs for both nestedPanel and minimalPanel. Implemented new transition code with javascript and CSS (max-height).

Anything you'd like to highlight / discuss:
I tried to ensure that there is no regression to the existing functionalities for my rewrite. There were some code that I have removed, like the event @src-loaded and setMaxHeight from the retriever, as I did not see the need for it for my implementation. However, I'm unsure if I am right in doing that or whether it would cause regressions in ways that I couldn't foresee. Do let me know if I am breaking any existing features by doing that :O

Also, perhaps my code quality can be improved (e.g. the way I implement certain functionalities). So, I think that may be one area to look at.

I have written some comments in my code to explain the rationale for some of my implementations.

Testing instructions:
markbind serve and test the panels on the user guide section.

Proposed commit message: (wrap lines at 72 characters)
Rewrite panel transition for preview feature

It is not easy to implement the panel preview feature with the existing
transition code in our panels due to the use of v-show.

Let's rewrite some of the transition code and implement our own set
of transition code to allow for more flexibility. This will allow a cleaner
implementation of the panel preview feature.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No blatantly unrelated changes
• Pinged someone for a review!

[ang-zeyu]

Nice work with the rewrite! @wxwxwxwx9

Left some observations that may require some reworking internally; also, expanded + src attribute currently leaves the panel 'stuck'

Since there are quite a few combinations of options which affect the loading, you may want to try creating a whole bunch of <panel>s mixed with / without these options which may affect the functionality:

• vanilla
• preload
• expanded
• src
• type=minimal
• minimized

[wxwxwxwx9]

Hi @ang-zeyu , thank you so much for your review and suggestions. I think with this new commit, most (if not all) of the functionalities should be working properly. I have tested with all the options you listed. There doesn't seem to be any regressions (fingers crossed) based on the exploratory testing that I've done.

There is, however, one "bug" in my code that I have resolved but don't quite seem to understand the root cause. I was thinking maybe you would know something about it. I have documented my observations about that particular section thoroughly. It's regarding the nextTick issue :-/

I have ensured that preload by using v-if for the card-body. I have also re-added the setMaxHeight for src/retriever, with some tweaks for the current usage, which I missed out in my last commit.

Hopefully there won't be anymore major issues like the src/retriever issue you pointed out!

[ang-zeyu]

Nice work again.

One minor bug left, and couple of nits:

Let's standardise to use /* ... */ for multiline comments too

[ang-zeyu]

one more edge case and some nits:

[ang-zeyu]

Lgtm 👍

Let's updatetest