vue-ts-responsive-grid-layout

Documentation Website

What is vue-ts-responsive-grid-layout

VUE 3 responsive grid layout is based on the original work by JBaysolution's vue-grid-layout.

This new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.

A proper App developed for testing purposes.

Documentation website contains 13 examples. Will be updated when new features are added to the component.

Donate

If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!

Features:

• Prop in GridLayout for distributing GridItem's equally.
• GridLayout now has slot for GridItem.
• Prop for displaying grid lines in GridLayout.
• Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
• Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
• Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
• Separated out style variables, so it is easier to restyle the component.
• Added tab navigation support.
• Close button in GridItem for removing the GridItem from the GridLayout.
• Added more events to GridLayout and GridItem.
• Support for resize Bottom, Bottom Right and Right in GridIem.
• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support
• Responsive using predefined layout's for different breakpoints.
• GridItem automatically resizes when content change(Useful when displaying charts).

Testing:

• Unit tests Using Vitest
• Unit test console Using Vitest UI
• e2e tests Using nightwatchjs

Changelog

v: 1.2.10 (2025-xx-xx)

• Demo App Eventlog is not displaying any resize events.
• Fixed Issue The margin property cannot be [0,0]
• Fixed Issue Hide resize cursor change when GridItem is not resizable
• Tests Added more unit tests and refactored code so it is easier to test.
• Tests Updated vitest.config.js coverage exclude section.

v: 1.2.9 (2024-02-03)

• Fixed Issue Dynamic change columns, item will overlap

v: 1.2.8 (2024-01-25)

• Fixed Issue Unexpected Behavior when dragging items Tnxs to T0miii

v: 1.2.7 (2024-01-10)

• Fixed Issue option "responsive" not working. Tnxs to T0miii

v: 1.2.6 (2023-12-28)

• Fixed Issue Problem if layout doesnt have static item PullRequest

v: 1.2.5 (2023-12-14)

• Fixed Issue editMode not working as expected
• Documentation Updated config so when refreshing a page it loads the correct page and not the 404 page.
• Demo App Added inputs for Margins.
• Refactor Updated style for gridlines in GridLayout.vue.
• Config Added style linting to project.
• Config Updated scripts section in package.json.
• Demo App Fixed index value when dropping a new GridItem onto the layout. This only works when index is a numeric value.
• Demo App Added checks so number input can not have less than 1.
• Tests Added more unit tests and refactored code so it is easier to test.

v: 1.2.4 (2023-10-23)

• Fixed Issue Layout update event is raised before update is finished. Tnxs to SamGeems
• Fixed issue Close button css is different from the example. Tnxs to SamGeems
• Feature Added event drag-end to GridLayout.
• Feature Added event drag-move to GridLayout.
• Feature Added event drag-start to GridLayout.
• Codebase Renamed EGridLayoutEvent value UPDATE_LAYOUT to LAYOUT_UPDATE.
• Codebase Removed file EDragEvents and updated GridLayout. Values are implemented in EGridLayoutEvent.
• Codebase Added documentation to file DOM.ts
• Codebase Added new enum for drag events and refactored GridLayout to use new enum.
• Refactor Removed obsolete enum EMovingDirections.
• Demo App Added button for clearing the event log.
• Demo App Added Dropdown for filtering on events.

v: 1.2.2 (2023-09-19)

• Fixed Issue Drag and Drop from outside is not working when distributeEvenly prop is set
• Partial Fix Resizemove edges case handling is incomplete
  • Right, Right Bottom and Bottom resize fixed.
  • Left, Top Left, Top and Top Right resize not fixed.
• Codebase Adding description to functions.
• Codebase Added contributors to package.json.
• Codebase Added badges to README file.
• Codebase Fixed outdated dependencies.

Thanks to UTing1119 for his contribution to this release.

v: 1.2.1 (2023-05-07)

• --Fixed Issue-- Issue 7, thanks to UTing1119
• --Fixed Issue-- Issue 6, thanks to UTing1119

Setting up vue-ts-responsive-grid-layout in your project

Howto

Auditing the package

 npm audit --registry=https://registry.npmjs.org/

References

• Mini.css used in the sandbox
• Vue-Multiselect used in the sandbox
• Vitest
• Vitest UI
• nightwatchjs