Bug: Responsive feature not correctly handling breakpoints

[jremi]

Hello everyone,

Hope we can get this resolved. I have submitted below a bug report related to incorrect responsive functionality.

---

Summary

The responsive feature is NOT working correctly. In the original npm package vue-grid-layout (for vue 2.x) environments, the responsive works great. When you resize the width of the window/viewport, the layout is correctly updated. The grid items correctly re-size to fit the updated column numbers.

When using the the "Vue 3 compatible version" (this library package) @noction/vue-draggable-grid (tested on latest version 1.10.1)... you get different responsive behavior.

The responsive breakpoints are incorrectly being rendered to the grid layout.

Current Results

The @noction/vue-draggable-grid package responsive mode is incorrectly rendering the grid-items within the grid layout.

Expected Results

The vue-grid-layout package and the @noction/vue-draggable-grid package responsive functionality should behave the same.

Sandbox Reproduction Examples

ℹ️ Note: The same exact layout configuration is being used in both sandbox examples.

Example 1 - Uses the original vue 2.x environment with package vue-grid-layout. When you resize the window, the grid items correctly resize. This example is stripped-down version from https://jbaysolutions.github.io/vue-grid-layout/guide/06-responsive.html ✅

https://codesandbox.io/p/devbox/vue-grid-layout-original-vue2x-pn2dfz

Example 2 - Uses the @noction/vue-draggable-grid package. When you resize the window, the grid items DO NOT correctly resize. ❌

https://codesandbox.io/p/devbox/noction-responsive-bug-hmd47r

[50rayn]

Thanks @jremi for very detailed issue, especially for reproduction links 🙏. So, in sandbox was easy to reproduce, but locally - no. It was pretty tough. I could achieve the same behaviour only when I run:

• the module in pnpm build --watch
• playground in pnpm dev

We'll try to fix this issue as soon as possible.

[usama9823]

I clone this repository in my VS code and run locally with responsive=true in GridLayout Props. This is what I am getting for 768px. .

[50rayn]

@usama9823 , I would review the watchers from GridItem.vue. The function createStyle works "unstable". The inline style includes an incorrect width.

[usama9823]

@50rayn I appreciate your dedication. I am also waiting for a new version with responsiveness bug fixes along with others. Thanks

[50rayn]

Hello @usama9823 @jremi The this is available from version v1.11.0

[usama9823]

@50rayn thank you for being so helpful. Do you have any idea when v1.11.0 is available?

[50rayn]

@usama9823 Already released v1.11.0 🙂