Further improve DocsExample visual output and API

[MisRob]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Background

The first version of DocsExample requires DocsShow being passed via code slot:

<DocsExample>

  // The default slot renders the example

  <template #code>
     // The code slot renders code snippet(s)
     <DocsShowCode language="html">
     
     </DocsShowCode>
     
     <DocsShowCode language="javascript">
     
     </DocsShowCode>
  </template>
</DocsExample>

Visually, all code snippets are displayed above the example.

Addresses

This proposal aims at improving

• concise and better organized visual output
• simpler API for developers

Proposal

(1) Remove the need for passing DocsShowCode to DocsExample

• instead provide html, javascript, and scss slots
• DocsExample will use DocsShowCode internally to render these slots

(2) DocsExample shows a toolbar on the left with the option to switch the view of the code between HTML, Javascript, and CSS.

<DocsExample>

  // The default slot renders the live example
  <KCardGrid ...>
    ...
  </KCardGrid>

  <template #html>
    <KCardGrid ...>
      ...
    </KCardGrid>
  </template>

 <template #javascript>
     export default { 
        ...
       }
  </template>
  
  <template #scss>
     .class {
        ...
      }
  </template>
</DocsExample>

would output very similar experience to Vuetify's:

[chetan21122004]

Hi @MisRob, I’ve added the tabs feature as suggested, allowing users to switch between HTML, JS, and SCSS. If there’s only one tab, the tab options won’t be shown. I’ve also attached a video for reference. Could you please assign this task to me? Looking forward to your feedback
https://github.com/user-attachments/assets/06514a0e-bf34-4fc7-a6dd-5ea58197baaa

[MisRob]

Hi @chetan21122004, thanks a lot! It looks very well. As mentioned in the issue, this is a proposal stage, so the requirements may be subject to change. I'm currently confirming details with the team. After I finalize this issue by the end of next week, I'm happy to assign this to you - you're doing great with the task no.1 #836! There's much more to come in this area so keep an eye if you're interested. Meanwhile you're welcome to find issues that are ready for contribution, marked with 'help wanted'.

[MisRob]

Hi @chetan21122004, we seem to be in agreement that the proposal above is desired. I can get you assigned if you'd like to. I'd ask you to keep this work separate from #836 and open a new pull request for this update after we finish review and merge #836. Let me know! Also is the amount of detail in the issue clear or should I add something?

[MisRob]

Actually @chetan21122004 let me assign you so it's reserved for you as you already have that work, but if you don't wish to work on it anymore, let us know and we will unassign

[chetan21122004]

Hi @MisRob, Thanks a lot! for assigning me! I’m excited to work on improving DocsExample. The details are clear, and I’ll keep it separate from #836. Please let me know when I can start contributing. Looking forward to your guidance!

[MisRob]

Lovely, thanks @chetan21122004. I think after @ozer550 finishes reviewing #836, I would give it one last look, and then you could start addressing this follow-up in a new branch. Looking forward to further collaboration.

[MisRob]

Hi @chetan21122004, I wanted to mention that Learning Equality will be closed from December 23 to January 5. Feel free to slowly work on this in a new branch after you have resolved the feedback on the current PR - I think you already have a good sense of this task. See you later in January!

[chetan21122004]

Hi @MisRob, thank you for the update. I’ll start working on this in a new branch after addressing the feedback on my current PR. Your guidance has been incredibly helpful, and I’ll ensure to maintain quality. Wishing you and the team a joyful Christmas and a wonderful holiday season. Looking forward to collaborating further in January!