[PoC] new Toolbar

[JiLiZART]

Q	A
Is bugfix?	❌
New feature?	✔️
Breaks BC?	✔️
Tests pass?	❌
Fixed issues	--

Hi! This is my proof of concept MVP of toolbar build as web component with enabled shadow DOM on top of Vue2 framework

Main goal of this is to provide more structured and more extendable features for toolbar.

You can see in video how it looks like https://yadi.sk/i/7CBAndxoH_b6Lg

Main Features

• No css and any style collisions (thanks to shadow dom)
• Easy to use, the main data format for build toolbar is JSON, no any html + js mess required
• Reactive way to build reach UI, for ex: automatic update information in toolbar, or display more rich ui neither just labels and numbers

How it works?

You need to include js file and define html tag like so

<script src="https://unpkg.com/@devbar/toolbar/dist/dev-bar.js"></script>
<dev-bar url="/url/to/data.json" some-params="true"></dev-bar>

And define json data that looks like this

{
   "title":"Devbar",
   "logo":"url to image or base64 string",
   "placement":"bottom-right",
   "tabs":[
      {
         "title":"Ajax",
         "content":[
            {
               "text":"Ajax"
            },
            {
               "label":"1",
               "type":"primary"
            }
         ],
         "info":[
            [
               {
                  "text":"Ajax"
               },
               {
                  "label":"1",
                  "type":"success"
               }
            ],
            [
               {
                  "icon":"memory"
               },
               {
                  "text":"Reqiests"
               },
               {
                  "label":"1",
                  "type":"dark"
               }
            ]
         ]
      },
      {
         "title":"Performance",
         "content":[
            {
               "icon":"timer"
            },
            {
               "label":"13 ms",
               "type":"info"
            },
            {
               "icon":"memory"
            },
            {
               "label":"1.612 MB",
               "type":"info"
            }
         ]
      }
   ]
}

It's uses this package published in npm https://github.com/jilizart/devbar

Why Vue2?

Because this is looks like jquery drop'in replacement But more powerful, more reactive and provides api to build rich UI without pain. And u don't need any sort of transpilers and any hard build systems. Support of web components and shadow DOM out of the box Ability to compile any html template with variables on runtime

This is proof of work concept and many problems need to be solved

• [ ] Design json schema to build more reactive behavior
• [ ] Provide API for js part for able to extend and add more features and components to display
• [ ] Library tests
• [ ] Yii2 Debug Module tests
• [ ] Ability to build own pages (for ex shell tab using https://github.com/samdark/yii2-webshell)
• [ ] Settings page to define toolbar positions and behavior
• [ ] Dark theme support and night transition

I need your feedback and any suggestions, how it can be better to implement this features or maybe you have any concerns about how really it should work

Cheers :)

[samdark]

It is definitely interesting for Yii 3. Will also check if it's suitable for Yii 2. I don't particularly like that JS isn't in the pull request but is served externally.