search

lrembacz / vue-responsive-grid-layout

Vue Repsonsive Grid Layout
MIT License
83 stars 19 forks source link

Few questions about this library #25

Closed tripflex closed 4 years ago

tripflex commented 5 years ago

So i'm looking to switch from using vue-grid-layout over to this library (specifically for responsive handling) but also because of bundle size due to that lib using interactjs which results in a large bundle (whereas this lib uses vue-resizable-core and vue-draggable-core)

Had a few questions I hope you would be able to answer, and then I can help to start pushing some PRs and maybe even clean up the documentation to reflect the questions as well.

  1. It seems there isn't any handling added for the wrapper vue-responsive-grid-layout element to set the height appropriately -- which results in the height being 0 for the most part. Since absolute positioning is used, may need to look at adding handling like vue-grid-layout does to automatically set the height value based on the layout https://github.com/jbaysolutions/vue-grid-layout/blob/master/src/components/GridLayout.vue#L271-L285 ... reason being, when using this lib on any site with existing content, it ends up just overlaying everything

  2. It seems that in order for the lib to work, we have to specifically add the layout-update layout-change layout-init width-change and breakpoint-change events, and then add methods to handle them. Was this done specifically by design for any apparent reason? While this is great to have for granular handling, i'm wondering if maybe it would be good to just add another prop that can define something like autoUpdate or something?

  3. It's great that we can define specific grids for specific breakpoints .. but what about when only one grid breakpoint is defined? I'm going to do some further testing on this myself but figured i would ask in the meantime. Should maybe it resort to using the one defined layout if none of the others are defined?

Either way thanks a ton for your work on this lib, can't wait to start using it and contributing as i can 👍

lrembacz commented 5 years ago

  1. Yes, things related to position: absolute are pretty much main issue I had to handle when I was creating this library and it actually is making this library bad in some use cases. There is only ned one thing to change in order to grant this height for you, I'll try to make it working in few days.

  2. It's actually ned because I've change idea at time and switched from internal state to actually handle it outside lib in another source like vuex or smth. And it actually grant some kind of flexibility I guess.

  3. Yes, idea is to generate needed breakpoints when the given size of our viewport has its breakpoint absent. When I've tested it, pretty much long time ago, it was working, but I don't know that for sure. Tests are pretty welcome.

I haven't been working on this library for some time. However, I am in the process of preparing dragndrop components for various frameworks including VueJs. If you care about patches to this old version, of course, I will get involved, pull requests are also welcome.

Many errors related to the design of this library, its javascript flow, make some assumptions, including the calculation of individual columns, difficult to write. For this reason, I prefer to focus on the version based on CSS (flexbox), and only using javascript.

if you need more API related information, check https://github.com/STRML/react-grid-layout as my library is based on this.

lrembacz commented 4 years ago

Check https://jsfiddle.net/pebwnfL8/. Height is updated based on components height.