Allow vue named slots shorthand and start deprecating old syntax

[ang-zeyu]

Describe the solution you'd like

Vue has a shorthand for named slots v-slot:header/slot="header" -> #nameofslot.

However, this is not usable for certain components where markbind does extra processing on the slots currently. ( such as indexing the header slot of panels )

We could add logic to these locations to also search for the corresponding name slot shorthand, allowing the user to use a friendlier syntax.

At the same time, we could start deprecating the old syntax so that we can eventually remove all logic in markbind that searches for slot="header", and rewrite corresponding vue templates to either v-slot:slotname or #slotname,
especially since it is a deprecated syntax in vue itself.

Warnings could also be shown if the old syntax is in use ( #1048 ).

Describe alternatives you've considered
na

Additional context
https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand

https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax

[le0tan]

I will take a look into this~

[Tejas2805]

@le0tan Are you still working on this? Or can I try this issue out?

[wxwxwxwx9]

Let me take a look at this :-)

[wxwxwxwx9]

As discussed in #1483, using #example breaks the CommonMark spec. Thus, if we want to implement a shorthand slot syntax for users, we have to look for an alternative syntax.

However, there are not many other shorthand syntax prefix options available. The only ones that I found to be usable are:

• _example
• :example

I tested the possible syntax-es using CommonMark's demo.

@ang-zeyu also suggested something like s-example.

@damithc would you have any recommendation for a suitable syntax?

[damithc]

@damithc would you have any recommendation for a suitable syntax?

No strong views. We already have var-foo syntax for specifying variable values for <include> https://markbind.org/userGuide/reusingContents.html#specifying-variables-in-an-include. So, the s-example has some level of consistency although slot-example is more consistent with the var-foo syntax.

[wxwxwxwx9]

@damithc thanks for your input! If we were to use slot-example, I think there would not be much benefits in terms of "shorter syntax". But it does provide the benefit of a more consistent syntax than slot="example" I suppose.

I also don't have strong opinion on this, as to which syntax we should adopt. It seems like a highly subjective issue. If there isn't much benefit for the user, then I think leaving the slot syntax as it is currently would be fine. @ang-zeyu what do you think?

[ang-zeyu]

@damithc thanks for your input! If we were to use slot-example, I think there would not be much benefits in terms of "shorter syntax". But it does provide the benefit of a more consistent syntax than slot="example" I suppose.

I also don't have strong opinion on this, as to which syntax we should adopt. It seems like a highly subjective issue. If there isn't much benefit for the user, then I think leaving the slot syntax as it is currently would be fine. @ang-zeyu what do you think?

slot-example sounds good. s- / _ / : are shorter but may not be as easy to remember.

but as you mentioned it dosen't provide too much benefit, just a bit over slot="...". There's also some cost in having to support both syntaxes for a while (+ migration effort).

I guess it would be really low priority since the meat of the issue (deprecated vue syntax) has been dealt with.
Maybe we could revisit this in v4 / 5 / 6 once we've deprecated other things? 🤔