initial responsive version

[shpfive]

my try for including responsive features.
please look into it and give feedback

[gmsa]

Sorry but this doesn't work. If you run this with yarn dev or npm run dev it throws the following error:

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-e025cafc"}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/ResponsiveGridLayout.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div ref="item" class="vue-grid-layout" :style="mergedStyle">
      <template v-for="item in actLayout" :key="item.i">
          <slot :item="item"></slot>
      </template>
      <grid-item class="vue-grid-placeholder"
                 v-show="isDragging"
                 :x="placeholder.x"
                 :y="placeholder.y"
                 :w="placeholder.w"
                 :h="placeholder.h"
                 :i="placeholder.i"></grid-item>
  </div>
  
  - <template> cannot be keyed. Place the key on real elements instead.

There is no sample for the responsive layout or instructions on how to use it.

[shpfive]

i did a quick fix. that was an easy one. should be working now.
you dont have to do anything the sample is the app.vue

its still not perfect but i think you'll get an idea

[alc32]

Is this working?

[shpfive]

@alc32 mostly ? i think it can be improve but it works.
https://strml.github.io/react-grid-layout/examples/0-showcase.html its just like in this example so evrything gets stacked on left or right side

[eugenesaenko]

Why this haven't merged yet?

[lmlong-huynh]

Will this pr be merged anytime soon in the nearest future?

[gmsa]

It wasn't working when I first tried it, I didn't check it after the fix. I hope to have some free time to work on it during the next few weeks.

[bensladden]

i have noticed one bug if you add an item on one layout it will not appear on layouts you have already been on.

1. Start on lg layout
2. Move to md layout
3. Add item
4. Move to lg layout and the item will not be there

[lmlong-huynh]

Any update on this?

[shpfive]

had no time to look into the bug @bensladden mentioned. will try as soon as possible

[lmlong-huynh]

had no time to look into the bug @bensladden mentioned. will try as soon as possible

I added a comment where the bug is with a fix please have a review. The rest seems to work fine.

[shpfive]

@MLongz i'm sorry but where did you comment ?

[lmlong-huynh]

@shpfive

It's seems the comment is pending. Its in new_responsiveutils.js at line 97. This seems to fix the bug where gridItem didnt got copied over to the other breakpoints.

for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
        const b = breakpointsAbove[i];
        if (layouts[b]) {
            layout = layouts[b];
            if (layouts[b].length !== actLayout.length) {
                let newItem = actLayout[actLayout.length - 1];
                layout.push(newItem)
            }
            break;
        }
    } 

But probably have to add a function to Check latest valid item and not last of array. Since you can remove items from array.

[shpfive]

@MLongz thank you for your help. i fixed it differently but i think it should work
#228 please have a look into it as i updated to new plugin structure