option "responsive" not working

[KsslJan]

Expected Behavior

When resizing the window, the items should reorder and be displayed.

Current Behavior

The items overlap as soon as the window width is decreased.

Steps to Reproduce

1. Open example 7 ("responsive breakpoints") on the documentation website.
2. Decrease the window width.

Release version: 1.2.6

responsive.bug.mp4

FYI I have tried to get it to work locally, without any luck yet.

[T0miii]

Edit: managed to install the build tgz was in the package json.

"vue-ts-responsive-grid-layout": "file:vue-ts-responsive-grid-layout-1.2.2.tgz",

I wanted to check out the project to see what can be done regarding this responsive issue, but having problems installing the dependancy

[gwinnem]

Send me the project you are using so i can debug it properly. This error is the first one spotted

[T0miii]

Its in the main branches package.json

https://github.com/gwinnem/vue-responsive-grid-layout/blob/c6ba6be1ec965ef73f93f17a9e721cc822ae2faf/package.json#L146C75-L146C75

Also regarding the responsive issue, in the dev branch its working, also in the main branch the layout is getting calculated properly (the new positions) but the grid items dont take the positions.

[T0miii]

The problem seems to be in the events:

export enum EGridLayoutEvent {
  BREAKPOINT_CHANGED = `breakpoint-changed`,
  CHANGED_DIRECTION = `changed-direction`,
  COLUMNS_CHANGED = `columns-changed`,
  CONTAINER_RESIZED = `container-resized`,
  DRAG_END = `dragend`,
  DRAG_MOVE= `dragmove`,
  DRAG_START = `dragstart`,
  LAYOUT_BEFORE_MOUNT = `layout-before-mount`,
  LAYOUT_CREATED = `layout-created`,
  LAYOUT_MOUNTED = `layout-mounted`,
  LAYOUT_READY = `layout-ready`,
  LAYOUT_UPDATED = `layout-updated`,
  LAYOUT_UPDATE = `layout-update`,
}

the layout-update event should be called something like update:layout as on the component v-model:layout is being referenced

also the logic that is reseting back to the old layouts when the window is growing was removed:

  if(breakpoint && layouts[breakpoint] && !distributeEvenly) {
    return cloneLayout(layouts[breakpoint]!);
  }
  // Find or generate the next layout
  let layout = orgLayout;

  const breakpointsSorted = sortBreakpoints(breakpoints);
  const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
  for(let i = 0, len = breakpointsAbove.length; i < len; i++) {
    const b = breakpointsAbove[i];
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    if(layouts[b]) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      layout = layouts[b];
      break;
    }
  }

Created a branch to fix the issues, but got no permissions to push. Guess im doing something wrong.

[gwinnem]

Hi @T0miii
Tnxs for the valuable feedback.
You have to create a pull request in order for me to be able to check the changes before it is being merged into the main branch

[T0miii]

I think i created one, should i do it differently?

#53