Further work on VueResponsiveGridLayout.

[lrembacz]

Due to the rather large response and interest in this project. I also use it myself for my own solutions, I decided to resume work on this project and improve its operation with new solutions.

The plans for this project are as follows:

For the 1x version - the current version of the layout, no major changes or improvements will be carried out. You can see first changes on DEV branch already.

The second version, which I plan to take care of, is to act more around the GridItem itself. I think that I will use RxJS and pattern observer to create it. The idea is that I will keep track of the size and location of GridItems within the GridLayout and the GridLayout will only be a wrapper / supervisor of GridItems.

As for now, I am working on this project in my free time, but I am aware that the work will take a while, so I want to bring the 1x version to the correct form first.

As soon as I know more or there will be some progress, I will post the information below.

Thank you for all the help and use of the Layout.

[mesaglam]

Many thanks for your great efforts...

[lrembacz]

Hi there!

It took a while, but I have more news!

One of the main disadvantages for this layout as well as for other similar projects is position: absolute on items, which complicates situations and reduces the possibilities. An additional problem is the own calculation of item positions and the margins between them.

And because of many unsuccessful attempts to maintain the current shape of the layout and items, I decided to change the assumptions of this project.

The assumptions are as follows:

• Version 2 will provide several general components (maybe some directives and utils) that will allow you to build your own layout of elements.
• Layouts will be able to be embedded and it will be possible to move items from one list to another
• GridItems, instead of based on calculated coords x, y, w, h, will be based on flexboxes with all their capabilities.
• Each of the elements will have the ability to accept parameters such as:
  • tag - if instead of using ordinary divs we will need to use ready-made components like v-flex from
    vutify or b-col from bootstrap-vue.
  • all types of attributes and props, or directives, both their own and those defined for the components mentioned earlier
  • Writing elements will be possible mainly with the help of slots and scoped slots.
  • I also consider the use of functional components, but this is still a contentious issue.
  • I would like to give the option to change the arrangement of items also programmatically, but I'm still working on this solution.

I also plan to make it possible to overwrite or transfer highorder functions to change / add additional changes to classes, styles or specific attributes of elements during each phase of layout or item modification.

If you have some questions or some ideas to make it even better feel free to post them here below!

Thanks!

[koljada]

Thank you for your work!
It would be very useful to have an ability to drag items between lists. Is it possible to implement it somehow using current version?

[lrembacz]

@koljada
Currently, There is no such possibility. Theoretically, it is possible to transfer element of the list by moving a particular element in the layout[] for one grid to the layout[] of another grid. This type of function should respond to dragging the element above the list.

I haven't tested it and don't have now time for this. This would require a bit of work but it is possible I guess.

[koljada]

@lrembacz
I see, thank you for your reply.

[lrembacz]

Hi there again!

I've just realased new library which contains Draggable and Dropzone Components which gonna be used to new version of VueResponsiveGridLayout. But first I will need to adopt this library into VueJS. Its on my roadmap but im not sure how long it will take.

Check this out please and tell if u have some propositions or issues https://github.com/lrembacz/dragndrop.

Thanks for all!

[tripflex]

Thanks for all your work on this! One thing regarding:

tag - if instead of using ordinary divs we will need to use ready-made components like v-flex from vutify or b-col from bootstrap-vue.

My vote would be for vuetify, but at the time same, please please keep the bundle size as small as possible, would hate to see this lib become over bloated 😛

[lrembacz]

I opened new PR with early works on next version of VRGL - #41.